:root{
  --black:#050505;
  --black-2:#0b0b0c;
  --black-3:#111113;
  --gold:#d9ab41;
  --gold-light:#f4d783;
  --gold-dim:#8a6a24;
  --white:#f4f2ec;
  --muted:#9a978d;
  --radius:14px;
  --maxw:1200px;
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Poppins',sans-serif;
  overflow-x:hidden;
  position:relative;
}

::selection{background:var(--gold);color:#000;}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- background canvas ---------- */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
}

.grain{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared ---------- */
.section-kicker{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.35em;
  font-size:.72rem;
  color:var(--muted);
  font-family:'Oswald',sans-serif;
}

/* ---------- nav ---------- */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.2rem clamp(1.2rem,5vw,4rem);
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(5,5,5,.75), rgba(5,5,5,0));
  transition:background .3s ease, padding .3s ease;
}
.nav.scrolled{
  background:rgba(6,6,7,.85);
  border-bottom:1px solid rgba(217,171,65,.15);
}
.nav__brand{display:flex;align-items:center;gap:.7rem;font-family:'Oswald',sans-serif;}
.nav__logo-icon{
  width:38px;
  display:flex;
  border-radius:6px;
  overflow:hidden;
}
.nav__logo-icon img{width:100%;height:auto;display:block;}
.nav__word{font-size:.95rem;letter-spacing:.35em;color:var(--white);opacity:.85;}
.nav__links{display:flex;gap:2.2rem;font-size:.85rem;letter-spacing:.05em;}
.nav__links a{color:var(--muted);text-decoration:none;position:relative;transition:color .25s;}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--gold);transition:width .3s ease;
}
.nav__links a:hover{color:var(--white);}
.nav__links a:hover::after{width:100%;}
.nav__cta{
  border:1px solid var(--gold-dim);
  color:var(--gold-light);
  padding:.5rem 1.3rem;
  border-radius:100px;
  font-size:.8rem;
  letter-spacing:.05em;
  text-decoration:none;
  transition:all .3s ease;
}
.nav__cta:hover{
  background:var(--gold);
  color:#0a0a0a;
  box-shadow:0 0 22px rgba(217,171,65,.55);
}
@media (max-width:820px){ .nav__links{display:none;} }

/* ---------- hero ---------- */
.hero{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9rem 1.5rem 4rem;
  overflow:hidden;
}

.hero__content{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  max-width:780px;
}

/* logo */
.logo-mark{
  position:relative;
  width:min(72vw, 420px);
  margin-top:1rem;
  margin-bottom:1rem;
  animation:float 5s ease-in-out infinite;
}
.logo-mark__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  animation:glowPulse 3.2s ease-in-out infinite;
}

@keyframes glowPulse{
  0%,100%{box-shadow:0 0 22px rgba(217,171,65,.25), 0 14px 50px rgba(0,0,0,.55);}
  50%{box-shadow:0 0 38px rgba(217,171,65,.5), 0 14px 50px rgba(0,0,0,.55);}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}

.hero__title{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(2.6rem,8vw,5rem);
  letter-spacing:.18em;
  color:var(--white);
  text-shadow:0 0 30px rgba(255,255,255,.12);
}
.hero__title span{
  display:inline-block;
  opacity:0;
  transform:translateY(30px);
  animation:letterIn .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero__title span:nth-child(1){animation-delay:.05s;}
.hero__title span:nth-child(2){animation-delay:.1s;}
.hero__title span:nth-child(3){animation-delay:.2s;}
.hero__title span:nth-child(4){animation-delay:.25s;}
.hero__title span:nth-child(5){animation-delay:.3s;}
.hero__title span:nth-child(6){animation-delay:.35s;}
.hero__title span:nth-child(7){animation-delay:.4s;}
.hero__title span:nth-child(8){animation-delay:.45s;}
.hero__title span:nth-child(9){animation-delay:.5s;}
@keyframes letterIn{ to{opacity:1;transform:translateY(0);} }

.hero__tagline{
  margin-top:.8rem;
  font-family:'Oswald',sans-serif;
  letter-spacing:.5em;
  text-transform:uppercase;
  font-size:clamp(.7rem,1.6vw,.95rem);
  color:var(--gold-light);
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.7s;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

.subscribe-btn{
  margin-top:2.6rem;
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  text-decoration:none;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(1.6rem,4vw,2.6rem);
  letter-spacing:.12em;
  color:var(--white);
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.9s;
  position:relative;
}
.subscribe-btn__text{
  background:linear-gradient(90deg,#fff,var(--gold-light),#fff);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shine 3.2s linear infinite;
}
.subscribe-btn__arrow{
  color:var(--gold);
  transition:transform .35s ease;
}
.subscribe-btn:hover .subscribe-btn__arrow:first-child{transform:translateX(-6px);}
.subscribe-btn:hover .subscribe-btn__arrow:last-child{transform:translateX(6px);}
@keyframes shine{
  to{background-position:-220% center;}
}

.hero__sub{
  margin-top:.4rem;
  color:var(--muted);
  letter-spacing:.08em;
  font-size:.95rem;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:1.05s;
}

.hero__banner{
  margin-top:1.6rem;
  padding:.7rem 2.4rem;
  border:1px solid var(--gold);
  border-radius:6px;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:clamp(1rem,2.4vw,1.4rem);
  color:var(--gold-light);
  background:rgba(217,171,65,.06);
  box-shadow:0 0 0 rgba(217,171,65,0);
  opacity:0;
  animation:fadeUp .8s ease forwards, bannerGlow 2.6s ease-in-out infinite 2s;
  animation-delay:1.2s;
}
@keyframes bannerGlow{
  0%,100%{box-shadow:0 0 10px rgba(217,171,65,.15);}
  50%{box-shadow:0 0 28px rgba(217,171,65,.55);}
}

.scroll-hint{
  margin-top:3.2rem;
  width:26px;height:42px;
  border:2px solid var(--gold-dim);
  border-radius:20px;
  display:flex;
  justify-content:center;
  padding-top:8px;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:1.5s;
}
.scroll-hint span{
  width:4px;height:8px;
  background:var(--gold-light);
  border-radius:3px;
  animation:scrollDot 1.6s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{opacity:1;transform:translateY(0);}
  70%{opacity:0;transform:translateY(14px);}
  100%{opacity:0;transform:translateY(0);}
}

/* ---------- speakers ---------- */
.speaker{
  position:absolute;
  bottom:-90px;
  width:220px;height:220px;
  z-index:1;
  pointer-events:none;
}
.speaker--left{left:-60px;}
.speaker--right{right:-60px;}
.speaker__cone{
  position:absolute;inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #1a1a1a 0%, #050505 55%, #000 100%);
  box-shadow:inset 0 0 30px #000, 0 0 40px rgba(217,171,65,.25);
}
.speaker__cone::after{
  content:'';
  position:absolute;
  inset:38%;
  border-radius:50%;
  background:radial-gradient(circle,#2a2a2a,#0a0a0a 70%);
  box-shadow:inset 0 0 12px #000;
}
.speaker__ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(217,171,65,.5);
  animation:speakerPulse 2.4s ease-in-out infinite;
}
.speaker__ring--2{
  inset:-14px;
  border-color:rgba(217,171,65,.25);
  animation-delay:.5s;
}
@keyframes speakerPulse{
  0%,100%{transform:scale(.94);opacity:.5;box-shadow:0 0 0 rgba(217,171,65,0);}
  50%{transform:scale(1.03);opacity:1;box-shadow:0 0 26px rgba(217,171,65,.45);}
}
@media (max-width:900px){ .speaker{width:120px;height:120px;bottom:-40px;} }
@media (max-width:600px){ .speaker{display:none;} }

/* ---------- platforms ---------- */
.platforms{
  position:relative;
  z-index:2;
  padding:5rem 1.5rem 6rem;
  max-width:var(--maxw);
  margin:0 auto;
}
.platform-row{
  margin-top:2.2rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem 1.4rem;
}
.platform{
  --brand:#d9ab41;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.85rem 1.4rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:100px;
  text-decoration:none;
  color:var(--white);
  font-size:.9rem;
  letter-spacing:.02em;
  background:rgba(255,255,255,.02);
  opacity:0;
  transform:translateY(24px);
  transition:border-color .3s ease, transform .35s ease, box-shadow .35s ease, background .3s ease;
}
.platform.in-view{opacity:1;transform:translateY(0);}
.platform svg{width:20px;height:20px;color:var(--brand);flex-shrink:0;}
.platform:hover{
  border-color:var(--brand);
  background:rgba(255,255,255,.05);
  box-shadow:0 0 22px color-mix(in srgb, var(--brand) 45%, transparent);
  transform:translateY(-4px);
}

/* ---------- subscribe / qr ---------- */
.subscribe{
  position:relative;
  z-index:2;
  padding:6rem 1.5rem 7rem;
  text-align:center;
  overflow:hidden;
}
.subscribe__glow{
  position:absolute;
  left:50%;top:20%;
  width:900px;height:900px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(217,171,65,.14), transparent 65%);
  pointer-events:none;
  z-index:-1;
}
.subscribe__title{
  font-family:'Oswald',sans-serif;
  font-size:clamp(2rem,5vw,3.2rem);
  letter-spacing:.06em;
  color:var(--white);
}
.subscribe__desc{
  margin-top:.7rem;
  color:var(--muted);
  font-size:1rem;
}

.qr-grid{
  margin-top:3rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3rem;
}
.qr-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
.qr-card.in-view{opacity:1;transform:translateY(0);}
.qr-canvas{
  background:#fff;
  padding:12px;
  border-radius:10px;
  border:1px solid var(--gold-dim);
  box-shadow:0 0 24px rgba(217,171,65,.25);
  transition:box-shadow .35s ease, transform .35s ease;
}
.qr-card:hover .qr-canvas{
  box-shadow:0 0 36px rgba(217,171,65,.55);
  transform:scale(1.03);
}
.qr-card p{
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--muted);
}

.site-pill{
  margin-top:3.4rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.8rem 1.8rem;
  border:1px solid var(--gold);
  border-radius:100px;
  color:var(--gold-light);
  text-decoration:none;
  font-family:'Oswald',sans-serif;
  letter-spacing:.15em;
  font-size:.85rem;
  background:rgba(217,171,65,.05);
  transition:all .3s ease;
}
.site-pill:hover{
  background:var(--gold);
  color:#0a0a0a;
  box-shadow:0 0 26px rgba(217,171,65,.55);
}

/* ---------- footer ---------- */
.footer{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(217,171,65,.15);
  padding:2.6rem 1.5rem;
  text-align:center;
  color:var(--muted);
  font-size:.82rem;
}
.footer__brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-family:'Oswald',sans-serif;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--gold-light);
  margin-bottom:.6rem;
}
.footer__brand span{color:var(--white);font-weight:400;letter-spacing:.35em;margin-left:.4rem;}
.footer__logo-icon{
  width:26px;
  display:flex;
  border-radius:5px;
  overflow:hidden;
}
.footer__logo-icon img{width:100%;height:auto;display:block;}
.footer__socials{
  margin-top:1rem;
  display:flex;
  justify-content:center;
  gap:1rem;
}
.footer__socials a{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  text-decoration:none;
  font-size:.7rem;
  transition:all .3s ease;
}
.footer__socials a:hover{
  color:#0a0a0a;
  background:var(--gold);
  border-color:var(--gold);
}