/* ─────────────────────────────────────────────────────────
   CR7 LAST DANCE | 2026 FIFA World Cup memecoin
   ───────────────────────────────────────────────────────── */

:root{
  --bg:#080404;
  --bg-2:#120807;
  --bg-3:#1a0d0a;
  --ink:#fff7e6;
  --ink-dim:#c9b896;
  --ink-mute:#8a7960;
  --gold:#f5c544;
  --gold-2:#ffd86a;
  --gold-3:#fde58a;
  --gold-dim:#a07a1a;
  --red:#c8102e;
  --red-2:#e3142e;
  --red-3:#ff5666;
  --crimson:#7a0a18;
  --line:rgba(245,197,68,.20);
  --line-strong:rgba(245,197,68,.45);
  --shadow:0 18px 60px rgba(0,0,0,.55);

  --max:1280px;
  --pad:clamp(20px, 4vw, 64px);
  --sec-pad:clamp(96px, 13vw, 180px);

  --font-script:'Italianno', cursive;
  --font-display:'Big Shoulders Display', 'Anton', 'Bebas Neue', Impact, sans-serif;
  --font-italic:'Playfair Display', Georgia, serif;
  --font-body:'Inter', system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--red);color:#fff}

/* ─── typographic primitives ─── */
.script{font-family:var(--font-script);font-weight:400;color:var(--red-2);letter-spacing:.005em}
.g{color:var(--gold);text-shadow:0 0 28px rgba(245,197,68,.16)}
.itl{font-family:var(--font-italic);font-style:italic;font-weight:900;color:var(--gold-2)}
.eyebrow{
  font-family:var(--font-display);
  letter-spacing:.5em;
  font-size:13px;
  color:var(--gold);
  margin:0 0 32px;
  text-transform:uppercase;
  font-weight:700;
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before,.eyebrow::after{content:"";display:inline-block;width:32px;height:1px;background:linear-gradient(to right, transparent, var(--gold), transparent);opacity:.75}

/* ─── NAV ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:14px var(--pad);
  background:linear-gradient(to bottom, rgba(8,4,4,.88), rgba(8,4,4,.4) 70%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line);box-shadow:0 0 18px rgba(245,197,68,.25);flex-shrink:0}
.nav-brand-text{display:inline-flex;align-items:baseline;gap:10px;line-height:1}
.nb-1{font-family:var(--font-display);font-weight:800;letter-spacing:.22em;font-size:18px;color:var(--gold)}
.nb-2{font-family:var(--font-script);font-size:30px;color:var(--ink);transform:translateY(4px);line-height:.7}

.nav-links{display:flex;gap:24px;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-family:var(--font-display);font-weight:600}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--gold)}
.nav-cta{padding:11px 20px;font-size:13px}

.nav-burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;border:1px solid var(--line);border-radius:6px;background:rgba(8,4,4,.7)}
.nav-burger span{width:18px;height:2px;background:var(--gold);display:block;transition:transform .25s, opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:880px){
  .nav-links, .nav-cta{display:none}
  .nav-burger{display:flex}
  .nav{padding:12px 18px}
}

/* mobile sheet (with faded Ronaldo logo background) */
.mobile-sheet{
  position:fixed;inset:0;z-index:60;
  background:#070303;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;visibility:hidden;transition:opacity .3s, visibility .3s;
  padding:80px 28px;
  overflow:hidden;
}
.mobile-sheet::before{
  content:"";position:absolute;inset:0;
  background:url("./logo.png") center 32% / cover no-repeat;
  opacity:.22;
  filter:saturate(.9) contrast(1.05);
  z-index:0;
  transform:scale(1.04);
}
.mobile-sheet::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(245,197,68,.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,4,4,.55) 0%, rgba(6,3,3,.86) 75%, rgba(4,2,2,.96) 100%);
  z-index:1;pointer-events:none;
}
.mobile-sheet > *{position:relative;z-index:2}
.mobile-sheet.open{opacity:1;visibility:visible}
.mobile-close{position:absolute;top:14px;right:18px;font-size:44px;line-height:1;color:var(--gold);font-family:var(--font-display);font-weight:400;z-index:3}
.ms-link{font-family:var(--font-display);font-size:34px;letter-spacing:.14em;color:var(--ink);text-transform:uppercase;font-weight:700;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.ms-link:hover{color:var(--gold)}
.ms-cta{margin-top:14px}

/* ─── BUTTONS (CSS styled) ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;
  font-family:var(--font-display);font-size:14px;letter-spacing:.22em;
  border-radius:3px;
  text-transform:uppercase;
  font-weight:700;
  transition:transform .15s ease, box-shadow .2s ease, background .2s, color .2s, border-color .2s;
  position:relative;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(180deg, var(--red-3) 0%, var(--red) 55%, var(--crimson) 100%);
  color:#fff7e6;
  box-shadow:0 8px 24px rgba(200,16,46,.35), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(200,16,46,.55)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:rgba(245,197,68,.05);color:var(--gold);border:1px solid rgba(245,197,68,.45)}
.btn-ghost:hover{background:rgba(245,197,68,.12);border-color:var(--gold);color:var(--gold-2)}
.btn.big{padding:18px 32px;font-size:17px;letter-spacing:.22em}
.btn-icon{display:inline-flex;align-items:center;line-height:0}

/* ─── PILL BUTTONS (Higgsfield-rendered PNG sprites) ─── */
.pill{
  display:inline-block;
  position:relative;
  transition:transform .2s ease, filter .25s ease;
  line-height:0;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(245,197,68,.10));
}
.pill img{
  display:block;
  width:260px;height:auto;
  pointer-events:none;
  user-select:none;
  image-rendering:auto;
}
.pill.lg img{width:320px}
.pill.xl img{width:380px}
.pill:hover{transform:translateY(-2px);filter:drop-shadow(0 12px 28px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(245,197,68,.32))}
.pill:active{transform:translateY(0)}
@media (max-width:560px){
  .pill img{width:240px}
  .pill.lg img{width:280px}
  .pill.xl img{width:300px}
}

/* ─── HERO ─── */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:120px var(--pad) 96px;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.hero-vignette{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 32%, transparent 0%, rgba(8,4,4,.5) 55%, rgba(8,4,4,.96) 95%),
  linear-gradient(to bottom, rgba(8,4,4,.35) 0%, transparent 35%, rgba(8,4,4,.92) 100%);
}
.hero-spotlight{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 50% at 50% 38%, rgba(245,197,68,.12) 0%, transparent 60%);
  mix-blend-mode:screen;animation:spot 7s ease-in-out infinite alternate;
}
@keyframes spot{0%{opacity:.6;transform:scale(1)}100%{opacity:1;transform:scale(1.06)}}

.hero-content{position:relative;z-index:2;max-width:1100px;width:100%}
.hero-eyebrow{
  font-family:var(--font-display);font-weight:700;
  letter-spacing:.5em;font-size:13px;color:var(--gold-2);
  margin:0 0 24px;opacity:.95;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:14px;
}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";display:inline-block;width:46px;height:1px;background:linear-gradient(to right, transparent, var(--gold), transparent)}

.hero-title{margin:0;line-height:.84;display:flex;flex-direction:column;align-items:center;gap:0}

.ht-mark{
  font-family:var(--font-display);font-weight:900;
  letter-spacing:.04em;
  font-size:clamp(72px, 16vw, 240px);
  background:linear-gradient(180deg, var(--gold-3) 0%, var(--gold) 45%, var(--gold-dim) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 6px 24px rgba(245,197,68,.28));
  line-height:.82;
  position:relative;
}
.ht-mark::after{
  /* layered outlined ghost copy for depth */
  content:attr(data-text);
  position:absolute;inset:0;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:1px rgba(245,197,68,.15);
  z-index:-1;
  transform:translate(6px, 6px);
}
.ht-script{
  font-family:var(--font-script);font-weight:400;
  font-size:clamp(96px, 20vw, 320px);
  background:linear-gradient(180deg, #ff6573 0%, var(--red-2) 50%, #6a081a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 10px 30px rgba(200,16,46,.5));
  line-height:.86;
  margin-top:-.32em;
  letter-spacing:-.005em;
  position:relative;
  z-index:1;
}
.hero-sub{
  font-family:var(--font-display);font-weight:600;
  letter-spacing:.5em;font-size:clamp(13px,1.5vw,17px);
  color:var(--gold);margin:18px 0 36px;
  text-shadow:0 0 18px rgba(245,197,68,.3);text-transform:uppercase;
}

.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;margin-bottom:28px}
.hero-ctas .pill img{width:260px}
@media (min-width:1100px){.hero-ctas .pill img{width:290px}}
.hero-ca{font-family:var(--font-display);font-weight:600;letter-spacing:.32em;font-size:12.5px;color:var(--ink-mute);margin:0;text-transform:uppercase}
.hero-ca span{color:var(--gold-2);text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:12.5px;font-weight:500}
.copy{color:var(--ink-mute);text-decoration:underline;text-decoration-color:rgba(245,197,68,.4);text-underline-offset:3px;margin-left:8px;font-size:12px;letter-spacing:.1em;text-transform:lowercase;font-family:var(--font-display);font-weight:600}
.copy:hover{color:var(--gold)}

.hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;width:24px;height:38px;border:1px solid rgba(245,197,68,.55);border-radius:14px;display:flex;align-items:flex-start;justify-content:center;padding-top:6px}
.hero-scroll span{width:2px;height:8px;background:var(--gold);border-radius:1px;animation:scrollPulse 1.6s ease-in-out infinite}
@keyframes scrollPulse{0%{transform:translateY(0);opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}

@media (max-width:680px){
  .hero{padding:104px 14px 84px;min-height:100svh}
  .hero-ctas{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"buy buy" "tg x";
    gap:10px;
    align-items:center;justify-items:center;
    max-width:360px;margin-left:auto;margin-right:auto;
  }
  .hero-ctas > a:nth-child(1){grid-area:buy}
  .hero-ctas > a:nth-child(2){grid-area:tg}
  .hero-ctas > a:nth-child(3){grid-area:x}
  .hero-ctas .pill img{width:auto;max-width:100%}
  .hero-ctas > a:nth-child(1) img{width:240px;max-width:240px}
  .hero-ctas > a:nth-child(2) img,
  .hero-ctas > a:nth-child(3) img{width:160px;max-width:160px}
  .ht-mark{font-size:clamp(54px,18vw,108px)}
  .ht-script{font-size:clamp(76px,24vw,150px);margin-top:-.28em}
  .hero-eyebrow{font-size:11px;letter-spacing:.4em}
  .hero-eyebrow::before,.hero-eyebrow::after{width:24px}
  .hero-sub{margin:14px 0 26px;letter-spacing:.4em}
  .hero-ca{font-size:11px;letter-spacing:.26em}
}
@media (max-width:380px){
  .hero-ctas > a:nth-child(1) img{width:220px;max-width:220px}
  .hero-ctas > a:nth-child(2) img,
  .hero-ctas > a:nth-child(3) img{width:140px;max-width:140px}
}

/* ─── MARQUEE ─── */
.marquee{
  overflow:hidden;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
  position:relative;
  z-index:2;
}
.marquee-track{
  display:flex;gap:36px;align-items:center;
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,4vw,60px);letter-spacing:.22em;
  color:var(--gold);
  white-space:nowrap;
  animation:marquee 42s linear infinite;
  text-shadow:0 0 24px rgba(245,197,68,.20);
  text-transform:uppercase;
  will-change:transform;
}
.marquee-track .sep{color:var(--red-2);font-weight:200;opacity:.85;font-family:var(--font-script);font-size:1.6em;letter-spacing:0;transform:translateY(-.08em)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ─── SECTION BG SYSTEM ─── */
.sec-bg{position:relative;isolation:isolate;overflow:hidden}
.sec-bg-img{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  opacity:.40;
  transform:scale(1.05);
  will-change:transform;
}
.sec-bg-veil{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(8,4,4,.55) 0%, rgba(8,4,4,.88) 60%, rgba(8,4,4,.96) 100%),
    linear-gradient(180deg, rgba(8,4,4,.92) 0%, rgba(8,4,4,.55) 30%, rgba(8,4,4,.55) 70%, rgba(8,4,4,.92) 100%);
}
.sec-bg[data-bg="manifesto"] .sec-bg-img{background-image:url("./assets/bg-manifesto.png")}
.sec-bg[data-bg="mission"]   .sec-bg-img{background-image:url("./assets/bg-mission.png")}
.sec-bg[data-bg="hype"]      .sec-bg-img{background-image:url("./assets/bg-hype.png")}
.sec-bg[data-bg="htb"]       .sec-bg-img{background-image:url("./assets/bg-htb.png");opacity:.22}
.sec-bg[data-bg="community"] .sec-bg-img{background-image:url("./assets/bg-community.png")}

/* ─── MANIFESTO ─── */
.manifesto{padding:var(--sec-pad) var(--pad)}
.manifesto-inner{max-width:1080px;margin:0 auto;text-align:center}

.manifesto-text{margin:0 auto 64px}
.m-line{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,7.4vw,108px);
  letter-spacing:.02em;
  line-height:1;
  margin:0 0 14px;
  color:var(--ink);
  text-transform:uppercase;
}
.m-line .itl{font-family:var(--font-italic);font-style:italic;font-weight:900;letter-spacing:-.005em;font-size:1.04em;color:var(--gold-2);display:inline-block;margin:0 .04em}
.m-line.muted{
  color:var(--ink-dim);text-transform:none;
  font-family:var(--font-italic);font-style:italic;font-weight:500;letter-spacing:0;
  font-size:clamp(22px,3vw,40px);
  margin-top:34px;
}
.manifesto-quote{max-width:780px;margin:0 auto}
.manifesto-quote p{
  font-family:var(--font-body);
  font-size:clamp(18px,2vw,24px);
  line-height:1.6;
  color:var(--ink-dim);
  margin:0 0 10px;
}
.manifesto-quote em.script{font-family:var(--font-script);font-size:1.7em;color:var(--gold-2);font-style:normal;display:inline-block;transform:translateY(.18em);margin:0 .04em;line-height:0}
.manifesto-quote strong{color:var(--gold-2);font-weight:700}

/* ─── MISSION ─── */
.mission{padding:var(--sec-pad) var(--pad)}
.mission-inner{max-width:1080px;margin:0 auto;text-align:center}
.mission-h{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(48px,8.5vw,128px);
  letter-spacing:.015em;line-height:1;
  margin:0 0 32px;text-transform:uppercase;
}
.mission-h .itl{font-family:var(--font-italic);font-weight:900;font-style:italic;letter-spacing:-.01em}
.mission-body{
  font-size:clamp(17px,1.7vw,21px);
  line-height:1.75;color:var(--ink-dim);
  max-width:740px;margin:0 auto;
}

/* ─── HYPE / VIDEO ─── */
.hype{padding:var(--sec-pad) var(--pad)}
.hype-inner{max-width:1180px;margin:0 auto;text-align:center;position:relative}
.hype-h{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(52px,9vw,128px);
  letter-spacing:.04em;margin:0 0 14px;color:var(--ink);text-transform:uppercase;line-height:1;
}
.hype-h .itl{font-family:var(--font-italic);font-style:italic}
.hype-sub{color:var(--ink-mute);letter-spacing:.32em;font-size:13px;text-transform:uppercase;margin:0 0 36px;font-family:var(--font-display);font-weight:600}

.hype-frame{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:var(--shadow), 0 0 0 1px rgba(245,197,68,.10), 0 0 90px rgba(200,16,46,.22)}
.hype-player{position:absolute;inset:0;width:100%;height:100%}
.hype-player iframe{width:100%;height:100%;border:0;display:block}

.sound-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(8,4,4,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);cursor:pointer;transition:opacity .5s ease, visibility .5s}
.sound-overlay p{font-family:var(--font-display);font-weight:700;letter-spacing:.42em;font-size:clamp(14px,1.5vw,18px);color:var(--gold);margin:0;text-transform:uppercase}
.sound-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.sound-pulse{width:78px;height:78px;border-radius:50%;background:linear-gradient(180deg, var(--red-2), var(--crimson));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 40px rgba(200,16,46,.6);position:relative;animation:pulse 2.2s ease-out infinite}
.sound-pulse::before,.sound-pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red-2);animation:ring 2.2s ease-out infinite}
.sound-pulse::after{animation-delay:1.1s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* ─── GALLERY (20 best Ronaldo moments) ─── */
.gallery{padding:var(--sec-pad) var(--pad)}
.gallery-inner{max-width:var(--max);margin:0 auto;text-align:center}
.gallery-h{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(48px,8vw,118px);
  letter-spacing:.015em;line-height:1;
  margin:0 0 14px;text-transform:uppercase;
}
.gallery-h .itl{font-family:var(--font-italic);font-weight:900;font-style:italic;letter-spacing:-.01em}
.gallery-sub{
  color:var(--ink-mute);font-family:var(--font-display);font-weight:600;
  font-size:clamp(13px,1.5vw,16px);letter-spacing:.42em;
  text-transform:uppercase;margin:0 0 48px;
}

.gal-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  margin:0 auto;
}
@media (max-width:980px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.gal-grid{grid-template-columns:repeat(2,1fr);gap:12px}}

.gal-card{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:6px;
  border:1px solid var(--line);
  background:#080404;
  padding:0;
  cursor:pointer;
  transition:transform .25s ease, border-color .25s, box-shadow .25s;
  display:block;text-align:left;
}
.gal-card:hover{transform:translateY(-4px);border-color:rgba(245,197,68,.55);box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(245,197,68,.18), 0 0 40px rgba(245,197,68,.10)}
.gal-card img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s ease, filter .3s;
  filter:saturate(.95);
}
.gal-card:hover img{transform:scale(1.05);filter:saturate(1.05)}

.gal-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(8,4,4,0) 30%, rgba(8,4,4,.78) 100%);
  pointer-events:none;
}

.gal-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,16,46,.92);
  color:#fff;
  box-shadow:0 6px 22px rgba(200,16,46,.55), 0 0 0 6px rgba(255,255,255,.06);
  opacity:0;transition:opacity .25s, transform .25s;
  z-index:2;
}
.gal-card:hover .gal-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover: none){
  .gal-play{opacity:.86;transform:translate(-50%,-50%) scale(.85)}
}

.gal-title{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 14px 12px;
  font-family:var(--font-display);font-weight:700;
  font-size:13.5px;letter-spacing:.04em;
  color:var(--ink);
  z-index:2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
  text-transform:uppercase;
  line-height:1.2;
}
.gal-card .gal-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--font-display);font-weight:700;
  font-size:10px;letter-spacing:.28em;
  color:var(--gold);text-transform:uppercase;
  background:rgba(8,4,4,.7);
  border:1px solid var(--line);
  padding:5px 9px;border-radius:3px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:80;
  background:rgba(4,2,2,.92);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.lightbox.open{opacity:1;visibility:visible}
.lb-shell{position:relative;width:100%;max-width:1180px;aspect-ratio:16/9;background:#000;border-radius:6px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(245,197,68,.10)}
.lb-shell iframe{width:100%;height:100%;border:0;display:block}
.lb-close{
  position:absolute;top:-46px;right:0;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-family:var(--font-display);font-weight:400;font-size:36px;line-height:1;
  background:rgba(8,4,4,.7);border:1px solid var(--line);border-radius:50%;
  cursor:pointer;
}
.lb-close:hover{color:var(--gold-2);border-color:var(--gold)}
@media (max-width:680px){
  .lightbox{padding:16px}
  .lb-close{top:-44px}
}

/* ─── HOW TO BUY (upgraded) ─── */
.htb{padding:var(--sec-pad) var(--pad)}
.htb-inner{max-width:var(--max);margin:0 auto;text-align:center}
.htb-h{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(48px,8.4vw,120px);letter-spacing:.015em;
  margin:0 0 14px;text-transform:uppercase;line-height:1;
}
.htb-h .itl{font-family:var(--font-italic);font-weight:900;font-style:italic;letter-spacing:-.01em}
.htb-sub{
  color:var(--ink-mute);font-family:var(--font-display);font-weight:600;
  font-size:clamp(13px,1.5vw,16px);letter-spacing:.42em;
  text-transform:uppercase;margin:0 0 56px;
}

.htb-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  text-align:left;margin:0 auto 40px;
  max-width:1180px;
}
/* gold connector thread behind cards (desktop horizontal) */
.htb-grid::before{
  content:"";position:absolute;left:6%;right:6%;top:78px;height:1px;
  background:linear-gradient(to right, transparent 0%, rgba(245,197,68,.0) 4%, rgba(245,197,68,.55) 18%, rgba(245,197,68,.55) 82%, rgba(245,197,68,.0) 96%, transparent 100%);
  z-index:0;pointer-events:none;
}

@media (max-width:980px){
  .htb-grid{grid-template-columns:repeat(2,1fr)}
  .htb-grid::before{display:none}
}
@media (max-width:560px){
  .htb-grid{grid-template-columns:1fr;gap:18px}
}

.htb-card{
  position:relative;z-index:1;
  padding:36px 28px 32px;
  background:linear-gradient(180deg, rgba(245,197,68,.06) 0%, rgba(20,8,6,.85) 60%, rgba(8,4,4,.95) 100%);
  border:1px solid var(--line);
  border-radius:8px;
  transition:transform .3s ease, border-color .3s, box-shadow .3s;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  overflow:hidden;
}
.htb-card::before{
  content:"";position:absolute;inset:-1px;
  border-radius:8px;
  padding:1px;
  background:linear-gradient(180deg, rgba(245,197,68,.55), rgba(245,197,68,0) 60%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:.6;transition:opacity .3s;
}
.htb-card:hover{transform:translateY(-8px);border-color:rgba(245,197,68,.55);box-shadow:0 28px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(245,197,68,.22), 0 0 60px rgba(245,197,68,.10)}
.htb-card:hover::before{opacity:1}

.htb-num{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(64px,8vw,112px);
  letter-spacing:.02em;line-height:.85;
  background:linear-gradient(180deg, var(--gold-3) 0%, var(--gold) 45%, var(--gold-dim) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:18px;
  position:relative;display:inline-block;
}
.htb-num::after{
  content:attr(data-num);
  position:absolute;inset:0;
  -webkit-text-fill-color:transparent;color:transparent;
  -webkit-text-stroke:1px rgba(245,197,68,.20);
  z-index:-1;transform:translate(3px,3px);
}

.htb-icon{
  width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(245,197,68,.10);border:1px solid var(--line);
  color:var(--gold);margin:0 0 14px;
}
.htb-card h3{
  font-family:var(--font-display);font-weight:800;
  font-size:24px;letter-spacing:.08em;color:var(--ink);
  margin:0 0 12px;text-transform:uppercase;
}
.htb-card p{font-size:14.5px;line-height:1.7;color:var(--ink-dim);margin:0}
.htb-card a{color:var(--gold-2);text-decoration:underline;text-decoration-color:rgba(245,197,68,.35);text-underline-offset:3px}
.htb-card a:hover{color:var(--gold)}

/* PRO TIP callout */
.htb-tip{
  margin:0 auto 48px;max-width:760px;
  padding:18px 24px;
  border:1px dashed rgba(245,197,68,.4);
  border-radius:6px;
  background:rgba(245,197,68,.04);
  display:flex;align-items:center;gap:18px;text-align:left;
}
.htb-tip-tag{
  font-family:var(--font-display);font-weight:800;
  font-size:11px;letter-spacing:.32em;color:var(--gold);
  background:rgba(245,197,68,.10);border:1px solid var(--line-strong);
  padding:6px 12px;border-radius:3px;flex-shrink:0;text-transform:uppercase;
}
.htb-tip p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink-dim)}
.htb-tip strong{color:var(--gold-2)}
@media (max-width:600px){
  .htb-tip{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
}

.htb-cta{margin-top:8px;display:flex;justify-content:center}

/* ─── COMMUNITY ─── */
.community{padding:var(--sec-pad) var(--pad);text-align:center}
.community-inner{max-width:820px;margin:0 auto}
.community-h{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(56px,10vw,144px);
  letter-spacing:.015em;margin:0 0 22px;text-transform:uppercase;line-height:1;
}
.community-h .itl{font-family:var(--font-italic);font-weight:900;font-style:italic}
.community-body{color:var(--ink-dim);font-size:clamp(16px,1.7vw,20px);line-height:1.7;margin:0 auto 44px;max-width:560px}
.community-ctas{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:center}

@media (max-width:560px){
  .community-ctas{flex-direction:column;align-items:center;width:100%}
}

/* ─── FOOTER ─── */
.footer{padding:72px var(--pad) 44px;background:#040202;border-top:1px solid var(--line)}
.footer-inner{max-width:var(--max);margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px}
.footer-brand{display:flex;align-items:center;gap:14px}
.footer-brand img{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);object-fit:cover}
.footer-name{display:inline-flex;align-items:baseline;gap:10px;line-height:1}
.fn-1{font-family:var(--font-display);font-weight:800;letter-spacing:.22em;font-size:24px;color:var(--gold)}
.fn-2{font-size:38px;color:var(--ink)}
.disclaimer{color:var(--ink-mute);font-size:12.5px;line-height:1.7;max-width:820px;margin:0;text-align:center}
.disclaimer strong{color:var(--ink-dim)}
.copyright{color:var(--ink-mute);font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-family:var(--font-display);font-weight:600;margin:0}

/* ─── MOTION GUARDS ─── */
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
  .hero-spotlight{animation:none}
  .sound-pulse,.sound-pulse::before,.sound-pulse::after{animation:none}
  .hero-scroll span{animation:none}
}