/* =========================================
   RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Be Vietnam Pro',sans-serif;
  background:#050201;
  color:#fff;
  overflow-x:hidden;
}

/* =========================================
   HERO
========================================= */

.hero{
  position:relative;

  min-height:100vh;

  padding:40px;

  overflow:hidden;

  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.68) 35%,
      rgba(255,190,70,.05) 65%,
      rgba(0,0,0,.88) 100%
    ),
    url('../img/background.jpg');

  background-size:contain;

  background-position:center top;

  background-repeat:no-repeat;

  background-color:#000;
}
/* =========================================
   OVERLAY
========================================= */

.overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      transparent,
      rgba(0,0,0,.35)
    );
}

/* =========================================
   CONTAINER
========================================= */

.container{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1.1fr .9fr;

  gap:40px;

  align-items:start;
}

/* =========================================
   BRAND
========================================= */

.brand{
  display:flex;
  align-items:center;
  gap:16px;

  margin-bottom:35px;
}

.logo{
  font-size:44px;
  color:#e2b45f;
}

.brand h4{
  font-size:28px;
  color:#f4c86b;
  font-family:'Cinzel',serif;
  letter-spacing:.5px;
}

.brand p{
  color:#c7a777;
  font-size:13px;
  margin-top:4px;
}

/* =========================================
   TITLE
========================================= */

.left-content h1{
  font-size:68px;
  line-height:1.12;
  color:#f5c86a;
  margin-bottom:24px;
  text-shadow:
    0 0 25px rgba(255,180,50,.18);
}

.line{
  width:180px;
  height:2px;

  background:
    linear-gradient(
      to right,
      #c89a41,
      transparent
    );

  margin:26px 0;
}

/* =========================================
   SUBTITLE
========================================= */

.subtitle{
  font-size:22px;
  line-height:1.8;

  color:#ead5ae;

  margin-bottom:34px;

  max-width:800px;
}

/* =========================================
   FEATURES
========================================= */

.features{
  list-style:none;

  display:grid;
  grid-template-columns:repeat(2,1fr);

  gap:16px;

  margin-bottom:55px;
}

.features li{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:16px;

  color:#f3f3f3;

  list-style:none;
}

.feature-icon{
  width: 35px;
  height: 35px;
  min-width:22px;
}
.features li:hover{
  transform:translateY(-3px);

  border-color:
    rgba(255,193,94,.35);

  box-shadow:
    0 0 25px rgba(255,190,70,.08);
}

/* =========================================
   PRODUCT BOX
========================================= */

.product-box{
  display:flex;
  gap:30px;

  justify-content:center;
  align-items:stretch;
}

.product-card{
  position:relative;

  width:300px;

  padding:35px 28px 95px;

  border-radius:32px;

  text-align:center;

  overflow:hidden;

  background:
    linear-gradient(
      to bottom,
      rgba(15,8,3,.72),
      rgba(0,0,0,.82)
    );

  border:
    1px solid rgba(255,191,73,.22);

  box-shadow:
    0 0 40px rgba(255,180,50,.06);

  transition:.35s;
}

.product-card:hover{
  transform:translateY(-6px);

  border-color:
    rgba(255,191,73,.45);

  box-shadow:
    0 0 40px rgba(255,180,50,.12);
}

.product-card img{
  width:100%;
  max-width:240px;

  object-fit:contain;

  filter:
    drop-shadow(0 0 18px rgba(255,190,70,.18));
}

.product-card span{
  display:block;
  margin-top:18px;
  color:#f0c46b;
  font-size: 20px;
  font-weight:600;
}
.product-card strong {
    font-size: 20px;
}
.price{
  position:absolute;

  bottom:28px;
  left:0;
  width:100%;

  text-align:center;

  color:#e7c886;

  font-size:18px;
}

.price strong{
  color:#ffd36b;
}

/* =========================================
   RIGHT CONTENT
========================================= */

.right-content{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* =========================================
   CARD COMMON
========================================= */
.video-box {
    border: 1px solid rgba(255,193,94,.16);
}
.video-box,
.info-card,
.audio-card,
.qr-card{
  background:
    linear-gradient(
      to bottom,
      rgba(15,8,3,.78),
      rgba(0,0,0,.74)
    );
  border-radius:28px;
  padding:24px;
  backdrop-filter:blur(12px);
}

/* =========================================
   VIDEO
========================================= */

.video-placeholder{
  width:100%;

  border-radius:24px;

  overflow:hidden;
}

.video-placeholder video{
  width:100%;

  height:100%;

  display:block;

  object-fit:cover;

  border-radius:24px;
}
.play-btn{
  width:82px;
  height:82px;

  border-radius:50%;

  border:
    1px solid rgba(255,190,70,.38);

  background:
    rgba(255,190,70,.05);

  color:#f0c46b;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:28px;

  cursor:pointer;

  transition:.3s;
}

.play-btn:hover{
  transform:scale(1.05);

  background:
    rgba(255,190,70,.14);

  box-shadow:
    0 0 25px rgba(255,190,70,.18);
}

/* =========================================
   TEXT CARD
========================================= */

.info-card h3,
.audio-card h3,
.qr-card h3{
  color:#f2c15c;
  margin-bottom:14px;
  font-size:24px;
  line-height:1.45;
}

.info-card p,
.audio-card p,
.qr-card p{
  color:#ddd;

  line-height:1.8;

  font-size:16px;
}

/* =========================================
   AUDIO PLAYER
========================================= */

.custom-audio-player{
  display:flex;
  align-items:center;
  gap:18px;
}

.wave-bars{
  display:flex;
  align-items:center;
  gap:4px;

  flex:1;
}

.wave-bars span{
  width:4px;

  border-radius:10px;

  background:#f0c46b;

  animation:wave 1s infinite ease-in-out;
}

.wave-bars span:nth-child(1){height:12px;animation-delay:.1s;}
.wave-bars span:nth-child(2){height:22px;animation-delay:.2s;}
.wave-bars span:nth-child(3){height:15px;animation-delay:.3s;}
.wave-bars span:nth-child(4){height:28px;animation-delay:.4s;}
.wave-bars span:nth-child(5){height:18px;animation-delay:.5s;}
.wave-bars span:nth-child(6){height:32px;animation-delay:.6s;}
.wave-bars span:nth-child(7){height:14px;animation-delay:.7s;}
.wave-bars span:nth-child(8){height:26px;animation-delay:.8s;}
.wave-bars span:nth-child(9){height:20px;animation-delay:.9s;}
.wave-bars span:nth-child(10){height:30px;}
.wave-bars span:nth-child(11){height:16px;}
.wave-bars span:nth-child(12){height:24px;}
.wave-bars span:nth-child(13){height:14px;}
.wave-bars span:nth-child(14){height:20px;}
.wave-bars span:nth-child(15){height:10px;}
.wave-bars span:nth-child(16){height:12px;animation-delay:.1s;}
.wave-bars span:nth-child(17){height:22px;animation-delay:.2s;}
.wave-bars span:nth-child(18){height:15px;animation-delay:.3s;}
.wave-bars span:nth-child(19){height:28px;animation-delay:.4s;}
.wave-bars span:nth-child(20){height:18px;animation-delay:.5s;}
.wave-bars span:nth-child(21){height:32px;animation-delay:.6s;}
.wave-bars span:nth-child(22){height:14px;animation-delay:.7s;}
.wave-bars span:nth-child(23){height:26px;animation-delay:.8s;}
.wave-bars span:nth-child(24){height:20px;animation-delay:.9s;}
.wave-bars span:nth-child(25){height:30px;}
.wave-bars span:nth-child(26){height:16px;}
.wave-bars span:nth-child(27){height:24px;}
.wave-bars span:nth-child(28){height:14px;}
.wave-bars span:nth-child(29){height:20px;}
.wave-bars span:nth-child(30){height:10px;}
@keyframes wave{

  0%{
    transform:scaleY(.6);
    opacity:.5;
  }

  50%{
    transform:scaleY(1.2);
    opacity:1;
  }

  100%{
    transform:scaleY(.6);
    opacity:.5;
  }

}

.audio-time{
  color:#f3eee7;
  font-size:15px;
  min-width:110px;
}

.volume-box{
  display:flex;
  align-items:center;
  gap:10px;

  color:#f0c46b;
}

.volume-box input[type="range"]{
  width:90px;
  accent-color:#f0c46b;
}

/* =========================================
   QR
========================================= */

.qr-card{
  display:flex;
  gap:22px;
  align-items:center;
}

.qr-box{
  min-width:150px;
  height:150px;

  background:#fff;

  border-radius:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#000;

  font-size:30px;
  font-weight:700;
}

/* =========================================
   MEANING GRID
========================================= */

.meaning-grid{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  margin-top:55px;

  border:
    1px solid rgba(255,190,70,.12);

  border-radius:34px;

  overflow:hidden;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,.78),
      rgba(20,10,4,.72)
    );
}

.meaning-card{
  padding:40px;

  min-height:250px;

  border-right:
    1px solid rgba(255,190,70,.08);

  transition:.3s;
}

.meaning-card:last-child{
  border-right:none;
}

.meaning-card:hover{
  background:
    rgba(255,190,70,.03);
}

.meaning-card h3{
  font-size:24px;
  line-height:1.4;
  margin-bottom:20px;
  color:#f0c46b;
}

.meaning-card p{
  font-size:18px;

  line-height:1.9;

  color:#f3eee7;
}

/* =========================================
   BOTTOM FEATURES
========================================= */

.bottom-features{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  gap:20px;

  margin-top:36px;
}

.bottom-features div{
  padding:22px;

  border-radius:18px;

  text-align:center;

  background:
    rgba(0,0,0,.55);

  border:
    1px solid rgba(255,193,94,.14);

  color:#f0c46b;

  font-weight:500;

  transition:.3s;
}

.bottom-features div:hover{
  transform:translateY(-4px);

  border-color:
    rgba(255,193,94,.35);
}

/* =========================================
   TABLET
========================================= */

@media(max-width:1200px){

  .container{
    grid-template-columns:1fr;
  }

  .left-content h1{
    font-size:58px;
  }

  .product-box{
    flex-wrap:wrap;
  }

  .meaning-grid{
    grid-template-columns:1fr 1fr;
  }

  .bottom-features{
    grid-template-columns:1fr 1fr;
  }

}

/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

  .hero{
    padding:18px;
  }

  .container{
    gap:28px;
  }

  .brand{
    margin-bottom:24px;
  }

  .brand h4{
    font-size:22px;
  }

  .left-content h1{
    font-size:42px;
    line-height:1.25;
  }

  .subtitle{
    font-size:18px;
  }

  .features{
    grid-template-columns:1fr;
  }

  .features li{
    font-size:16px;
  }

  .product-box{
    flex-direction:column;
  }

  .product-card{
    width:100%;
  }

  .video-placeholder{
    height:220px;
  }

  .custom-audio-player{
    flex-wrap:wrap;
  }

  .wave-bars{
    width:100%;
    order:3;
  }

  .volume-box{
    width:100%;
    justify-content:flex-end;
  }

  .qr-card{
    flex-direction:column;
    text-align:center;
  }

  .meaning-grid{
    grid-template-columns:1fr;
  }

  .meaning-card{
    min-height:auto;

    border-right:none;

    border-bottom:
      1px solid rgba(255,190,70,.08);
  }

  .meaning-card:last-child{
    border-bottom:none;
  }

  .bottom-features{
    grid-template-columns:1fr;
  }

}
  .audio-top{
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
  }

/* =========================================
   MOBILE AUDIO PLAYER FIX
========================================= */

@media(max-width:768px){

  .audio-card{
    padding:24px 20px;

    border-radius:26px;
  }

  /* TITLE */

  .audio-card h3{
    font-size:28px;

    line-height:1.4;

    margin-bottom:26px;

    text-align:left;
  }

  /* PLAYER */
/*
  .custom-audio-player{
    display:flex;
    flex-direction:column;

    align-items:flex-start;

    gap:20px;
  }*/

  /* TOP */

  .audio-top{
    display: flex;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
  }

  /* PLAY */

  .custom-audio-player .play-btn{
    width:72px;
    min-width:72px;

    height:72px;

    font-size:24px;
  }

  /* WAVE */

  .wave-bars{
    flex:1;

    width:100%;

    justify-content:flex-start;

    overflow:hidden;
  }

  .wave-bars span{
    width:3px;
  }

  /* BOTTOM */

  .audio-bottom{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;
  }

  /* TIME */

  .audio-time{
    font-size:14px;

    min-width:auto;

    white-space:nowrap;
  }

  /* VOLUME */

  .volume-box{
    display:flex;
    align-items:center;

    gap:10px;

    width:160px;
  }

  .volume-box input[type="range"]{
    width:100%;
  }

}
.meaning-grid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:28px;
}

.meaning-card{
  padding:28px;

  border:1px solid rgba(212,168,71,0.25);

  border-radius:24px;

  background:rgba(0,0,0,0.45);

  backdrop-filter:blur(10px);
}

.meaning-title{
  display:flex;

  align-items:center;

  gap:14px;

  margin-bottom:18px;
}

.meaning-title svg{
  width: 70px;
  height: 70px;
  min-width:34px;
}

.meaning-card h3{
  color:#D4A847;
  font-size: 16px;
  line-height:1.3;
  margin:0;
}

.meaning-card p{
  color:#EAEAEA;

  line-height:1.7;

  margin:0;
}

/* MOBILE */

@media(max-width:768px){

  .meaning-grid{
    grid-template-columns:1fr;

    gap:18px;
  }

  .meaning-card{
    padding:22px;
  }

  .meaning-title{
    align-items: center;
    gap:12px;
  }

  .meaning-title svg{
    width: 70px;
    height: 70px;
    min-width:28px;
  }

  .meaning-card h3{
    font-size:20px;
  }

  .meaning-card p{
    font-size:15px;

    line-height:1.6;
  }

}