/* ═══════════════════════════════════════════════════════════════
   GOLD ROLEPLAY — Official Teaser
   Handcrafted CSS3. No frameworks.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  --black:      #050505;
  --coal:       #0E0E0E;
  --graphite:   #141414;
  /* Palette sampled directly from the emblem: it is amber/ember, not champagne
     gold. Every accent on the page is derived from these three. */
  --gold:       #E9A413;   /* logo mid  */
  --gold-lit:   #FFC94A;   /* logo highlight */
  --ember:      #E07000;   /* logo body */
  --ember-deep: #B04000;   /* logo shadow */
  --core:       #FCD029;   /* the hot core in the cranium */
  --white:      #FFFFFF;
  --grey:       #9E9E9E;

  --gold-soft:  rgba(233,164,19,.14);
  --gold-line:  rgba(233,164,19,.22);
  --gold-edge:  rgba(233,164,19,.42);
  --glass:      rgba(255,255,255,.028);
  --glass-2:    rgba(255,255,255,.055);
  --hair:       rgba(255,255,255,.07);

  --grad-gold:  linear-gradient(135deg,#FFE9A8 0%,#FFC94A 20%,#F5A600 50%,#E07000 78%,#B04000 100%);
  --grad-text:  linear-gradient(180deg,#FFF1C4 0%,#FFC94A 30%,#F5A600 58%,#D06000 84%,#A8480A 100%);

  --shadow-soft: 0 30px 80px -30px rgba(0,0,0,.9);
  --shadow-gold: 0 0 60px -12px rgba(233,164,19,.35);

  --ff-display: "Orbitron", "Arial Black", system-ui, sans-serif;
  --ff-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:       cubic-bezier(.22,1,.36,1);
  --ease-io:    cubic-bezier(.65,0,.35,1);

  --gut:        clamp(20px, 5vw, 72px);
  --maxw:       1380px;
  --sec-y:      clamp(90px, 13vh, 190px);
}

/* ── 2. RESET ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  background:var(--black);
}

body{
  font-family:var(--ff-body);
  font-weight:400;
  color:var(--grey);
  background:var(--black);
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body.is-locked{ overflow:hidden; height:100vh; }

img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

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

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#080808; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),#6b5416);
  border-radius:10px;
  border:2px solid #080808;
}
::-webkit-scrollbar-thumb:hover{ background:var(--gold-lit); }

:focus-visible{
  outline:2px solid var(--gold-lit);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:1000px; }
.section{ position:relative; padding-block:var(--sec-y); z-index:2; }

/* ── 3. TYPOGRAPHY HELPERS ─────────────────────────────────── */
.goldtext{
  background:var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ═══════════════════════════════════════════════════════════════
   4 · LOADER
   ═══════════════════════════════════════════════════════════════ */
.loader{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-content:center; justify-items:center; gap:46px;
  background:radial-gradient(ellipse at 50% 45%, #0d0b06 0%, #050505 62%);
  transition:opacity .9s var(--ease), visibility .9s;
}
.loader.is-out{ opacity:0; visibility:hidden; pointer-events:none; }

.loader__stage{ position:relative; display:grid; place-items:center; }

.loader__mark{
  height:clamp(118px,16vw,172px); width:auto;
  filter:drop-shadow(0 0 26px rgba(233,164,19,.5));
  animation:markBreathe 3.4s var(--ease-io) infinite;
}
@keyframes markBreathe{
  0%,100%{ transform:scale(1);      filter:drop-shadow(0 0 20px rgba(233,164,19,.35)); }
  50%    { transform:scale(1.055);  filter:drop-shadow(0 0 46px rgba(255,201,74,.7)); }
}

.loader__ring{
  position:absolute; width:220px; height:220px; border-radius:50%;
  border:1px solid transparent;
  border-top-color:var(--gold);
  border-right-color:rgba(233,164,19,.28);
  animation:spin 2.6s linear infinite;
}
.loader__ring::after{
  content:""; position:absolute; inset:16px; border-radius:50%;
  border:1px solid rgba(233,164,19,.09);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.loader__meta{ display:grid; justify-items:center; gap:14px; width:min(360px,72vw); }

.loader__bar{
  width:100%; height:2px; background:rgba(255,255,255,.08);
  border-radius:2px; overflow:hidden;
}
.loader__bar i{
  display:block; height:100%; width:0%;
  background:var(--grad-gold);
  box-shadow:0 0 16px rgba(233,164,19,.9);
  transition:width .35s var(--ease);
}

.loader__pct{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(26px,4vw,38px); letter-spacing:.06em;
  color:var(--white);
}
.loader__pct em{ font-style:normal; font-size:.45em; color:var(--gold); margin-left:3px; }

.loader__hint{
  font-size:10px; letter-spacing:.42em; text-transform:uppercase;
  color:rgba(158,158,158,.6);
}

/* ═══════════════════════════════════════════════════════════════
   7 · AMBIENT BACKGROUND
   ═══════════════════════════════════════════════════════════════ */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.bg__gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(233,164,19,.10) 0%, transparent 55%),
    radial-gradient(90% 60% at 12% 100%, rgba(255,122,24,.07) 0%, transparent 60%),
    radial-gradient(70% 55% at 88% 20%, rgba(233,164,19,.05) 0%, transparent 60%),
    linear-gradient(180deg,#050505 0%,#0A0906 42%,#0E0E0E 72%,#050505 100%);
  background-size:200% 200%,180% 180%,160% 160%,100% 100%;
  animation:gradDrift 34s ease-in-out infinite alternate;
}
@keyframes gradDrift{
  0%  { background-position:0% 0%, 100% 100%, 0% 100%, 0 0; }
  100%{ background-position:100% 40%, 0% 0%, 100% 0%, 0 0; }
}

.bg__city span{
  position:absolute; left:var(--x); top:var(--y);
  width:calc(var(--s) * 90px); height:calc(var(--s) * 90px);
  border-radius:50%; filter:blur(46px);
  background:radial-gradient(circle, hsla(var(--h),90%,60%,.30), transparent 70%);
  animation:cityPulse calc(6s + var(--s) * 3s) ease-in-out infinite alternate;
}
@keyframes cityPulse{ from{ opacity:.35; transform:scale(.9); } to{ opacity:.85; transform:scale(1.14); } }

.bg__fog{ position:absolute; inset:-25%; }
.bg__fog i{
  position:absolute; border-radius:44% 56% 62% 38% / 52% 42% 58% 48%;
  background:radial-gradient(circle, rgba(120,102,58,.16), transparent 66%);
  filter:blur(58px);
}
.bg__fog i:nth-child(1){ width:70vw; height:52vw; left:-10%; top:12%;  animation:fogA 46s linear infinite; }
.bg__fog i:nth-child(2){ width:58vw; height:58vw; right:-8%; top:44%;  animation:fogB 58s linear infinite; }
.bg__fog i:nth-child(3){ width:84vw; height:40vw; left:14%;  bottom:-6%; animation:fogA 72s linear infinite reverse; }
@keyframes fogA{
  0%  { transform:translate3d(-6%,0,0) rotate(0deg) scale(1); }
  50% { transform:translate3d(8%,-5%,0) rotate(180deg) scale(1.18); }
  100%{ transform:translate3d(-6%,0,0) rotate(360deg) scale(1); }
}
@keyframes fogB{
  0%  { transform:translate3d(5%,2%,0) rotate(360deg) scale(1.1); }
  50% { transform:translate3d(-7%,-4%,0) rotate(180deg) scale(.92); }
  100%{ transform:translate3d(5%,2%,0) rotate(0deg) scale(1.1); }
}

.bg__canvas{ position:absolute; inset:0; width:100%; height:100%; }

.bg__flare{
  position:absolute; top:-18%; left:44%; width:60vw; height:60vw;
  background:
    radial-gradient(ellipse 60% 6% at 50% 50%, rgba(255,201,74,.10), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,201,74,.07), transparent 62%);
  filter:blur(14px); mix-blend-mode:screen;
  animation:flareDrift 24s ease-in-out infinite alternate;
}
@keyframes flareDrift{
  from{ transform:translate3d(-4%,0,0) rotate(-6deg); opacity:.55; }
  to  { transform:translate3d(6%,3%,0) rotate(5deg);  opacity:1; }
}

/* mouse spotlight */
.bg__spot{
  position:absolute; inset:0;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,40%),
             rgba(233,164,19,.085) 0%, rgba(233,164,19,.03) 32%, transparent 62%);
  transition:opacity .6s var(--ease);
  mix-blend-mode:screen;
}

.bg__scan{
  position:absolute; inset:0; opacity:.16;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
}

.bg__noise{
  position:absolute; inset:-100%; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(9) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  10%{ transform:translate(-4%,-3%); }  20%{ transform:translate(-8%,3%); }
  30%{ transform:translate(4%,-7%); }   40%{ transform:translate(-4%,6%); }
  50%{ transform:translate(-8%,4%); }   60%{ transform:translate(6%,0); }
  70%{ transform:translate(0,6%); }     80%{ transform:translate(3%,-6%); }
  90%{ transform:translate(-6%,2%); }
}

.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 110% 82% at 50% 46%, transparent 42%, rgba(0,0,0,.62) 78%, #000 100%);
}

/* ═══════════════════════════════════════════════════════════════
   8 · CURSOR
   ═══════════════════════════════════════════════════════════════ */
.cursor{ position:fixed; inset:0; z-index:9500; pointer-events:none; display:none; }
body.has-cursor .cursor{ display:block; }
body.has-cursor,
body.has-cursor *{ cursor:none !important; }

.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0; border-radius:50%;
  transform:translate3d(-50%,-50%,0); will-change:transform;
}
.cursor__dot{
  width:6px; height:6px; background:var(--gold-lit);
  box-shadow:0 0 12px 2px rgba(255,201,74,.9);
}
.cursor__ring{
  width:36px; height:36px;
  border:1px solid rgba(233,164,19,.55);
  background:radial-gradient(circle, rgba(233,164,19,.07), transparent 66%);
  transition:width .35s var(--ease), height .35s var(--ease),
             border-color .35s var(--ease), background .35s var(--ease), opacity .3s;
}
.cursor.is-grow .cursor__ring{
  width:76px; height:76px;
  border-color:rgba(255,201,74,.9);
  background:radial-gradient(circle, rgba(233,164,19,.16), transparent 68%);
}
.cursor.is-down .cursor__ring{ width:26px; height:26px; }

/* ═══════════════════════════════════════════════════════════════
   9 · BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn{
  --pad:18px 40px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:var(--pad);
  font-family:var(--ff-display); font-weight:700; font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; white-space:nowrap;
  border-radius:2px; overflow:hidden; isolation:isolate;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), color .35s var(--ease);
  will-change:transform;
}
.btn svg{ width:17px; height:17px; fill:currentColor; }
.btn--lg{ --pad:22px 56px; font-size:13px; }
.btn--sm{ --pad:12px 26px; font-size:10px; letter-spacing:.2em; }

.btn--gold{
  color:#100C02;
  background:var(--grad-gold);
  box-shadow:0 12px 40px -12px rgba(233,164,19,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--gold::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.85) 50%,transparent 68%);
  transform:translateX(-120%);
  transition:transform .85s var(--ease);
}
.btn--gold:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 60px -14px rgba(233,164,19,.9), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--gold:hover::before{ transform:translateX(120%); }
.btn--gold:active{ transform:translateY(-1px) scale(.985); }

.btn--ghost{
  color:var(--gold-lit);
  border:1px solid var(--gold-line);
  background:rgba(233,164,19,.045);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.btn--ghost::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(circle at 50% 120%, rgba(233,164,19,.34), transparent 68%);
  opacity:0; transition:opacity .5s var(--ease);
}
.btn--ghost:hover{
  color:var(--white); border-color:var(--gold-edge);
  transform:translateY(-3px);
  box-shadow:0 18px 46px -18px rgba(233,164,19,.7);
}
.btn--ghost:hover::after{ opacity:1; }

.btn__pulse{
  width:7px; height:7px; border-radius:50%; background:var(--gold-lit);
  box-shadow:0 0 0 0 rgba(255,201,74,.8);
  animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(255,201,74,.75); }
  70% { box-shadow:0 0 0 12px rgba(255,201,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,201,74,0); }
}

/* ═══════════════════════════════════════════════════════════════
   10 · NAV
   ═══════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:22px var(--gut);
  transition:padding .5s var(--ease), background .5s var(--ease),
             border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
  transform:translateY(-110%);
}
.nav.is-ready{ transform:none; transition:transform 1s .2s var(--ease), padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease); }
.nav.is-stuck{
  padding-block:13px;
  background:rgba(5,5,5,.72);
  border-bottom-color:var(--hair);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}

.nav__brand{ display:flex; align-items:center; gap:13px; }
.nav__mark{ height:38px; width:auto; filter:drop-shadow(0 0 12px rgba(233,164,19,.55)); transition:transform .5s var(--ease); }
.nav__brand:hover .nav__mark{ transform:rotate(-6deg) scale(1.1); }
.nav__word{
  font-family:var(--ff-display); font-weight:900; font-size:15px;
  letter-spacing:.16em; color:var(--white); line-height:1;
}
.nav__word em{
  display:block; font-style:normal; font-weight:500; font-size:9px;
  letter-spacing:.44em; color:var(--gold); margin-top:3px;
}

.nav__links{ display:flex; gap:clamp(16px,2.4vw,40px); }
.nav__links a{
  position:relative; font-size:10px; font-weight:600;
  letter-spacing:.24em; color:rgba(255,255,255,.62);
  padding-block:6px; transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--grad-gold); box-shadow:0 0 10px var(--gold);
  transition:width .45s var(--ease);
}
.nav__links a:hover{ color:var(--gold-lit); }
.nav__links a:hover::after{ width:100%; }

.nav__tools{ display:flex; align-items:center; gap:12px; }

.iconbtn{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hair); color:var(--grey);
  background:rgba(255,255,255,.03);
  transition:.4s var(--ease);
}
.iconbtn svg{ width:17px; height:17px; fill:currentColor; }
.iconbtn:hover{ color:var(--gold-lit); border-color:var(--gold-edge); background:rgba(233,164,19,.09); }
.iconbtn .ico-on{ display:none; }
.iconbtn[aria-pressed="true"]{ color:var(--gold-lit); border-color:var(--gold-edge); }
.iconbtn[aria-pressed="true"] .ico-on{ display:block; }
.iconbtn[aria-pressed="true"] .ico-off{ display:none; }

.lang{
  position:relative; display:flex; gap:2px; padding:4px;
  border:1px solid var(--hair); border-radius:100px;
  background:rgba(255,255,255,.028);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.lang__btn{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:7px 15px; border-radius:100px;
  font-size:10px; font-weight:600; letter-spacing:.12em;
  color:rgba(255,255,255,.5);
  transition:color .4s var(--ease);
}
.lang__btn span{ font-size:12px; line-height:1; }
.lang__btn.is-active{ color:#120D02; }
.lang__pill{
  position:absolute; top:4px; left:4px; height:calc(100% - 8px);
  border-radius:100px; background:var(--grad-gold);
  box-shadow:0 4px 16px -4px rgba(233,164,19,.8);
  transition:transform .55s var(--ease), width .55s var(--ease);
  z-index:1;
}

.burger{ display:none; width:38px; height:38px; place-items:center; gap:5px; }
.burger i{ display:block; width:20px; height:1.5px; background:var(--white); transition:.4s var(--ease); }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3.25px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════════
   11 · HERO
   ═══════════════════════════════════════════════════════════════ */
.hero{
  position:relative; z-index:2;
  min-height:100svh; min-height:100vh;
  display:grid; place-items:center;
  padding:130px var(--gut) 120px;
  text-align:center; overflow:hidden;
}

.hero__backdrop{
  position:absolute; inset:0; z-index:-2; pointer-events:none;
  opacity:0; animation:backdropIn 2.6s 1.1s var(--ease) forwards;
}
.hero__backdrop img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.04);
  /* Tight enough that the art never reaches the viewport edges — it reads as
     ember haze around the emblem, with no hard top edge behind the header. */
  mask-image:radial-gradient(ellipse 72% 56% at 50% 58%, #000 4%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 72% 56% at 50% 58%, #000 4%, transparent 72%);
  transform:scale(1.04);
}
@keyframes backdropIn{ to{ opacity:.42; } }

.hero__glow{
  position:absolute; top:22%; left:50%; transform:translateX(-50%);
  width:min(1100px,120vw); height:min(1100px,120vw);
  background:radial-gradient(circle, rgba(233,164,19,.14) 0%, rgba(255,122,24,.05) 34%, transparent 66%);
  filter:blur(30px); pointer-events:none;
  animation:heroGlow 9s ease-in-out infinite alternate;
}
@keyframes heroGlow{ from{ opacity:.6; transform:translateX(-50%) scale(.94); } to{ opacity:1; transform:translateX(-50%) scale(1.08); } }

.hero__inner{ position:relative; display:grid; justify-items:center; gap:clamp(18px,2.6vw,30px); max-width:1120px; }

.hero__logo{
  position:relative; display:grid; place-items:center;
  transform-style:preserve-3d;
  /* `backwards` (not `both`) so the animation stops applying a transform
     once finished — otherwise it would permanently beat the JS parallax. */
  animation:logoIn 1.8s .1s var(--ease) backwards;
}
@keyframes logoIn{
  from{ opacity:0; transform:translateY(40px) scale(.82); filter:blur(14px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
.hero__mark{
  height:clamp(168px,23vw,300px); width:auto;
  filter:drop-shadow(0 0 44px rgba(233,164,19,.5)) drop-shadow(0 14px 36px rgba(0,0,0,.9));
  animation:markFloat 7s ease-in-out infinite;
}
@keyframes markFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-14px) rotate(1.4deg); }
}
.hero__mark-glow{
  position:absolute; width:120%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,74,.24), transparent 62%);
  filter:blur(40px); z-index:-1;
  animation:heroGlow 5s ease-in-out infinite alternate;
}

.hero__eyebrow{
  font-family:var(--ff-display); font-size:clamp(9px,1.05vw,11px); font-weight:500;
  letter-spacing:.62em; color:var(--gold);
  text-shadow:0 0 24px rgba(233,164,19,.5);
}

.hero__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(50px,14.2vw,228px);
  line-height:.84; letter-spacing:-.025em;
  display:grid; gap:clamp(2px,.6vw,10px);
}
/* Each line rides up out of its own clipped row. Deliberately NOT split into
   characters — a per-letter stagger reads as a broken render mid-flight. */
.hero__title-row{
  display:block; overflow:hidden;
  padding:.14em 0; margin:-.14em 0;
}
.hero__title-line{
  display:block;
  transform:translateY(140%);
  transition:transform 1.15s var(--ease);
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 46px rgba(233,164,19,.4));
}
.hero__title-row:nth-child(2) .hero__title-line{ transition-delay:.13s; }
.hero__title.is-in .hero__title-line{ transform:none; }
.hero__title-line--thin{
  font-weight:500;
  letter-spacing:.185em;
  font-size:.375em;
  background:linear-gradient(180deg,#fff 0%, #cfcfcf 60%, #7d7d7d 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:none;
}
.hero__title .char{ display:inline-block; will-change:transform,opacity; }

.hero__rule{ width:min(420px,74vw); height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); position:relative; }
.hero__rule i{
  position:absolute; top:-2px; left:50%; transform:translateX(-50%);
  width:6px; height:5px; background:var(--gold); rotate:45deg;
  box-shadow:0 0 14px var(--gold);
}

.hero__lead{
  font-size:clamp(14px,1.55vw,19px); font-weight:300;
  line-height:2; letter-spacing:.05em; color:rgba(255,255,255,.72);
  max-width:52ch;
}
.hero__lead b{ color:var(--gold-lit); font-weight:600; letter-spacing:.12em; }

.hero__cta{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:10px; }

.hero__scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:grid; justify-items:center; gap:11px;
  font-size:9px; letter-spacing:.42em; color:rgba(255,255,255,.34);
  transition:color .4s var(--ease);
}
.hero__scroll i{
  width:1px; height:52px;
  background:linear-gradient(180deg,var(--gold),transparent);
  position:relative; overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; left:-1px; top:0; width:3px; height:14px;
  background:var(--gold-lit); box-shadow:0 0 12px var(--gold-lit); border-radius:2px;
  animation:scrollDot 2.2s var(--ease-io) infinite;
}
@keyframes scrollDot{ 0%{ transform:translateY(-16px); opacity:0; } 30%{ opacity:1; } 100%{ transform:translateY(52px); opacity:0; } }
.hero__scroll:hover{ color:var(--gold-lit); }

/* ═══════════════════════════════════════════════════════════════
   12 · SECTION HEADS
   ═══════════════════════════════════════════════════════════════ */
.shead{
  position:relative;
  display:grid; justify-items:center; gap:14px; text-align:center;
  margin-bottom:clamp(48px,7vw,86px);
}

/* oversized chapter numeral ghosted behind the heading */
.shead__num{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-58%);
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(110px,17vw,240px); line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(233,164,19,.14);
  pointer-events:none; user-select:none; z-index:-1;
  white-space:nowrap;
}
.shead__kicker{
  font-family:var(--ff-display); font-size:10px; font-weight:500;
  letter-spacing:.56em; color:var(--gold);
  padding-bottom:14px; position:relative;
}
.shead__kicker::after{
  content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:44px; height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.shead__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(28px,5.6vw,72px); line-height:1.05; letter-spacing:.01em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 34px rgba(233,164,19,.24));
}
.shead__sub{ font-size:14px; font-weight:300; color:rgba(158,158,158,.9); max-width:56ch; letter-spacing:.04em; }

/* ═══════════════════════════════════════════════════════════════
   13 · COUNTDOWN
   ═══════════════════════════════════════════════════════════════ */
.countdown__soon{
  text-align:center;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(36px,7.4vw,104px); line-height:1;
  letter-spacing:.02em; text-transform:uppercase;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 40px rgba(233,164,19,.4));
}

/* ═══════════════════════════════════════════════════════════════
   14 · PROGRESS PANEL
   ═══════════════════════════════════════════════════════════════ */
.panel{
  position:relative;
  padding:clamp(24px,4vw,52px);
  border:1px solid var(--gold-line); border-radius:6px;
  background:linear-gradient(155deg, rgba(255,255,255,.05), rgba(255,255,255,.01) 40%, rgba(0,0,0,.35));
  backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.08);
  overflow:hidden;
  transform-style:preserve-3d;
}
.panel::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.6;
}

.panel__head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:26px; margin-bottom:30px;
  border-bottom:1px solid var(--hair);
  font-family:var(--ff-display); font-size:10px; letter-spacing:.32em;
  color:rgba(255,255,255,.55);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulseGreen 2.4s infinite;
}
@keyframes pulseGreen{
  0%{ box-shadow:0 0 0 0 rgba(74,222,128,.6); }
  70%{ box-shadow:0 0 0 10px rgba(74,222,128,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,128,0); }
}
.panel__ping{ margin-left:auto; color:var(--gold-lit); font-weight:700; }
.panel__ping em{ font-style:normal; color:rgba(255,255,255,.4); font-weight:500; margin-left:5px; }

.bars{ display:grid; gap:clamp(18px,2.4vw,26px); }
.bar{
  display:grid; align-items:center; gap:8px 20px;
  grid-template-columns:minmax(96px,140px) 1fr auto;
}
.bar__name{
  font-family:var(--ff-display); font-size:11px; font-weight:500;
  letter-spacing:.2em; color:rgba(255,255,255,.82);
}
.bar__track{
  position:relative; height:5px; border-radius:100px;
  background:rgba(255,255,255,.055);
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.bar__track i{
  position:absolute; inset:0 auto 0 0; width:0;
  border-radius:100px;
  background:var(--grad-gold);
  box-shadow:0 0 18px rgba(233,164,19,.75);
  transition:width 1.8s var(--ease);
}
.bar__track i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);
  animation:barShine 2.8s var(--ease-io) infinite;
}
@keyframes barShine{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(220%); } }
.bar__pct{
  font-family:var(--ff-display); font-size:12px; font-weight:700;
  color:var(--gold-lit); min-width:52px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   15 · FEATURE CARDS
   ═══════════════════════════════════════════════════════════════ */
.cards{
  display:grid; gap:clamp(14px,1.8vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.card{
  position:relative; isolation:isolate;
  display:grid; align-content:start; gap:14px;
  padding:clamp(24px,2.8vw,36px);
  border:1px solid var(--hair); border-radius:5px;
  background:linear-gradient(158deg, rgba(255,255,255,.048), rgba(255,255,255,.008) 44%, rgba(0,0,0,.3));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transform-style:preserve-3d;
  transition:border-color .55s var(--ease), box-shadow .55s var(--ease), background .55s var(--ease);
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(420px circle at var(--cx,50%) var(--cy,0%), rgba(233,164,19,.17), transparent 62%);
  transition:opacity .5s var(--ease);
}
.card::after{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,201,74,.9),transparent);
  transform:scaleX(0); transform-origin:50%;
  transition:transform .7s var(--ease);
}
.card:hover{
  border-color:var(--gold-edge);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95), 0 0 44px -14px rgba(233,164,19,.4);
}
.card:hover::before{ opacity:1; }
.card:hover::after{ transform:scaleX(1); }

.card__idx{
  position:absolute; top:18px; right:22px;
  font-family:var(--ff-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:rgba(233,164,19,.26);
  transition:color .5s var(--ease);
}
.card:hover .card__idx{ color:rgba(255,201,74,.85); }

.card__ico{
  width:34px; height:34px; color:var(--gold);
  fill:currentColor;
  filter:drop-shadow(0 0 12px rgba(233,164,19,.5));
  transition:transform .55s var(--ease), color .4s;
  transform:translateZ(24px);
}
.card:hover .card__ico{ transform:translateZ(34px) scale(1.14) rotate(-5deg); color:var(--gold-lit); }

.card h3{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(14px,1.25vw,17px); letter-spacing:.1em;
  color:var(--white); line-height:1.35;
  transform:translateZ(18px);
}
.card p{
  font-size:13.5px; font-weight:300; line-height:1.75;
  color:rgba(158,158,158,.92);
  transform:translateZ(10px);
}

/* ═══════════════════════════════════════════════════════════════
   15a · GALLERY SLIDER
   ═══════════════════════════════════════════════════════════════ */
.slider{
  position:relative;
  border:1px solid var(--gold-line); border-radius:6px;
  background:#070707;
  box-shadow:var(--shadow-soft), 0 0 70px -34px rgba(233,164,19,.6);
  overflow:hidden;
}
.slider__stage{ position:relative; aspect-ratio:16/9; }
@supports not (aspect-ratio:16/9){ .slider__stage{ height:min(56vw,620px); } }

.slide{
  position:absolute; inset:0; margin:0;
  opacity:0; visibility:hidden;
  transition:opacity 1s var(--ease), visibility 1s;
}
.slide.is-on{ opacity:1; visibility:visible; }
.slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 7s linear; }
.slide.is-on img{ transform:scale(1.11); }
.slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.34) 0%, transparent 26%, transparent 54%, rgba(0,0,0,.82) 100%);
}
.slide figcaption{
  position:absolute; left:clamp(18px,3vw,34px); bottom:clamp(38px,5vw,54px); z-index:2;
  font-family:var(--ff-display); font-size:clamp(11px,1.5vw,15px); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.9);
  transform:translateY(14px); opacity:0;
  transition:transform .9s .25s var(--ease), opacity .9s .25s var(--ease);
}
.slide.is-on figcaption{ transform:none; opacity:1; }

.slider__nav{
  position:absolute; top:50%; z-index:3;
  display:grid; place-items:center;
  width:clamp(38px,4vw,52px); aspect-ratio:1;
  transform:translateY(-50%);
  border:1px solid var(--gold-line); border-radius:50%;
  background:rgba(6,6,6,.55); color:rgba(255,255,255,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:.4s var(--ease);
}
.slider__nav svg{ width:18px; height:18px; }
.slider__nav--prev{ left:clamp(10px,1.6vw,20px); }
.slider__nav--next{ right:clamp(10px,1.6vw,20px); }
.slider__nav:hover{
  color:var(--gold-lit); border-color:var(--gold-edge);
  background:rgba(233,164,19,.16);
  box-shadow:0 0 26px -6px rgba(233,164,19,.8);
}

.slider__dots{
  position:absolute; right:clamp(18px,3vw,34px); bottom:clamp(38px,5vw,54px); z-index:3;
  display:flex; gap:9px;
}
.slider__dot{
  width:26px; height:3px; border-radius:3px;
  background:rgba(255,255,255,.24);
  transition:.45s var(--ease);
}
.slider__dot:hover{ background:rgba(255,255,255,.5); }
.slider__dot.is-on{ background:var(--grad-gold); box-shadow:0 0 12px rgba(233,164,19,.9); width:42px; }

.slider__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  height:2px; background:rgba(255,255,255,.07);
}
.slider__bar i{
  display:block; height:100%; transform-origin:0 50%; transform:scaleX(0);
  background:var(--grad-gold); box-shadow:0 0 14px rgba(233,164,19,.9);
}

@media (max-width:640px){
  .slider__nav{ display:none; }
  .slide figcaption{ bottom:34px; font-size:10px; }
  .slider__dots{ bottom:32px; }
}

/* ═══════════════════════════════════════════════════════════════
   15b · MARQUEE BAND
   ═══════════════════════════════════════════════════════════════ */
.marquee{
  position:relative; z-index:2;
  overflow:hidden;
  padding-block:clamp(16px,2vw,26px);
  border-block:1px solid var(--hair);
  background:linear-gradient(90deg, rgba(233,164,19,.05), rgba(224,112,0,.08) 50%, rgba(233,164,19,.05));
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:clamp(20px,3vw,44px);
  width:max-content;
  animation:marquee 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(15px,2.4vw,32px); letter-spacing:.16em; white-space:nowrap;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.55;
}
.marquee__track i{
  flex:none; width:7px; height:7px; rotate:45deg;
  background:var(--gold); box-shadow:0 0 14px var(--gold);
}
/* the track holds 4 identical groups — shifting by exactly half loops seamlessly */
@keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }

/* ═══════════════════════════════════════════════════════════════
   16 · QUOTE
   ═══════════════════════════════════════════════════════════════ */
.quote{
  display:grid; justify-items:center; gap:clamp(34px,5vw,60px);
  text-align:center; padding-inline:var(--gut);
  padding-block:clamp(120px,18vh,240px);
  overflow:hidden;
}
.quote__aura{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(1200px,140vw); height:min(700px,90vw);
  background:radial-gradient(ellipse, rgba(233,164,19,.11), transparent 62%);
  filter:blur(50px); pointer-events:none;
  animation:heroGlow 11s ease-in-out infinite alternate;
}
.quote__text{
  position:relative;
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(24px,5.2vw,68px); line-height:1.22; letter-spacing:.005em;
  max-width:16ch;
}
.quote__text .quote__l1{ display:block; color:rgba(255,255,255,.9); }
.quote__text .quote__l2{
  display:block; margin-top:.22em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 40px rgba(233,164,19,.5));
}
.quote__text .word{
  display:inline-block; opacity:0;
  transform:translateY(.5em) rotateX(-70deg);
  filter:blur(8px);
  transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
  transition-delay:var(--d,0s);
}
.quote__text.is-in .word{ opacity:1; transform:none; filter:blur(0); }

.quote__sig{ display:flex; align-items:center; gap:20px; opacity:.7; }
.quote__sig i{ width:clamp(40px,9vw,120px); height:1px; background:linear-gradient(90deg,transparent,var(--gold-line),transparent); }
.quote__sig img{ height:38px; width:auto; filter:drop-shadow(0 0 14px rgba(233,164,19,.6)); }

/* ═══════════════════════════════════════════════════════════════
   17 · STATS
   ═══════════════════════════════════════════════════════════════ */
.stats{
  display:grid; gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.stat{
  display:grid; justify-items:center; gap:10px; text-align:center;
  padding:clamp(26px,3.4vw,44px) 18px;
  border:1px solid var(--hair); border-radius:5px;
  background:linear-gradient(160deg, rgba(255,255,255,.04), rgba(0,0,0,.3));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transform-style:preserve-3d;
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.stat:hover{ border-color:var(--gold-edge); box-shadow:0 0 44px -16px rgba(233,164,19,.55); }
.stat__n{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(28px,3.6vw,50px); line-height:1;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(233,164,19,.36));
  font-variant-numeric:tabular-nums;
  transform:translateZ(26px);
}
.stat span{
  font-size:10px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.46);
  transform:translateZ(12px);
}

/* ═══════════════════════════════════════════════════════════════
   17b · FOUNDER
   ═══════════════════════════════════════════════════════════════ */
.founder{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; align-items:center;
  gap:clamp(20px,3.4vw,44px);
  margin-top:clamp(20px,3vw,32px);
  padding:clamp(26px,3.6vw,46px);
  border:1px solid var(--gold-line); border-radius:6px;
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(233,164,19,.11), transparent 58%),
    linear-gradient(158deg, rgba(255,255,255,.045), rgba(0,0,0,.38));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--shadow-soft);
  transform-style:preserve-3d;
  overflow:hidden;
}
.founder::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);
}

.founder__mark{
  display:grid; place-items:center;
  width:clamp(78px,9vw,116px); aspect-ratio:1;
  border:1px solid var(--gold-line); border-radius:50%;
  background:radial-gradient(circle, rgba(233,164,19,.16), transparent 68%);
  transform:translateZ(30px);
}
.founder__mark img{
  height:60%; width:auto;
  filter:drop-shadow(0 0 18px rgba(233,164,19,.7));
  animation:markFloat 6s ease-in-out infinite;
}

.founder__body{ display:grid; gap:7px; transform:translateZ(16px); }
.founder__role{
  font-family:var(--ff-display); font-size:10px; font-weight:700;
  letter-spacing:.42em; color:var(--gold);
}
.founder__name{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(24px,3.4vw,44px); line-height:1.05; letter-spacing:.01em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(233,164,19,.3));
}
.founder__alias{ font-size:12.5px; color:rgba(158,158,158,.75); letter-spacing:.04em; }
.founder__alias a{
  color:var(--gold-lit); font-weight:600;
  border-bottom:1px solid rgba(233,164,19,.35);
  transition:.35s var(--ease);
}
.founder__alias a:hover{ color:#fff; border-color:var(--gold-lit); }
.founder__quote{
  margin-top:8px; max-width:62ch;
  font-size:14px; font-weight:300; font-style:italic; line-height:1.85;
  color:rgba(255,255,255,.72);
}

@media (max-width:640px){
  .founder{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .founder__body{ justify-items:center; }
  .founder__quote{ text-align:center; }
}

/* ═══════════════════════════════════════════════════════════════
   17c · FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq__list{ display:grid; gap:10px; }

.faq__item{
  border:1px solid var(--hair); border-radius:5px;
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.3));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.faq__item[open]{ border-color:var(--gold-edge); }
.faq__item:hover{ border-color:var(--gold-line); }

.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.6vw,28px);
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(12px,1.4vw,15px); letter-spacing:.05em;
  color:rgba(255,255,255,.88);
  list-style:none; cursor:pointer;
  transition:color .35s var(--ease);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover,
.faq__item[open] summary{ color:var(--gold-lit); }

/* plus / minus built from two rules so it needs no icon font */
.faq__item summary i{
  position:relative; flex:none; width:15px; height:15px;
}
.faq__item summary i::before,
.faq__item summary i::after{
  content:""; position:absolute; top:50%; left:0;
  width:100%; height:1.5px; border-radius:2px;
  background:var(--gold);
  transition:transform .45s var(--ease);
}
.faq__item summary i::before{ transform:translateY(-50%); }
.faq__item summary i::after { transform:translateY(-50%) rotate(90deg); }
.faq__item[open] summary i::after{ transform:translateY(-50%) rotate(0deg); }

.faq__a{
  padding:0 clamp(18px,2.6vw,28px) clamp(18px,2.4vw,24px);
  animation:faqIn .5s var(--ease);
}
.faq__a p{
  font-size:14px; font-weight:300; line-height:1.85;
  color:rgba(200,200,200,.82); max-width:70ch;
}
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* ═══════════════════════════════════════════════════════════════
   18 · CTA + SOCIALS
   ═══════════════════════════════════════════════════════════════ */
.cta__card{
  position:relative;
  display:grid; justify-items:center; gap:22px; text-align:center;
  padding:clamp(40px,6vw,82px) clamp(24px,4vw,60px);
  border:1px solid var(--gold-line); border-radius:8px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233,164,19,.13), transparent 58%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(0,0,0,.42));
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:var(--shadow-soft), 0 0 90px -40px rgba(233,164,19,.6);
  overflow:hidden;
  transform-style:preserve-3d;
}
.cta__card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);
}
.cta__mark{ height:82px; width:auto; filter:drop-shadow(0 0 26px rgba(233,164,19,.65)); animation:markFloat 6s ease-in-out infinite; }
.cta__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(22px,4.2vw,52px); line-height:1.1; letter-spacing:.02em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta__sub{ font-size:14px; font-weight:300; color:rgba(158,158,158,.92); max-width:44ch; }

.socials{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:18px; padding-top:30px;
  border-top:1px solid var(--hair); width:100%;
}
.socials a{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:11px 18px; border-radius:100px;
  border:1px solid var(--hair);
  background:rgba(255,255,255,.02);
  font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition:.45s var(--ease);
  overflow:hidden;
}
.socials svg{ width:16px; height:16px; fill:currentColor; }
.socials a::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(circle at 50% 130%, rgba(233,164,19,.4), transparent 70%);
  transition:opacity .45s var(--ease);
}
.socials a:hover{
  color:var(--gold-lit); border-color:var(--gold-edge);
  transform:translateY(-4px);
  box-shadow:0 16px 34px -16px rgba(233,164,19,.8);
}
.socials a:hover::before{ opacity:1; }
.socials em{ font-style:normal; position:relative; }

/* ═══════════════════════════════════════════════════════════════
   19 · FOOTER
   ═══════════════════════════════════════════════════════════════ */
.foot{
  position:relative; z-index:2;
  padding-block:56px 44px;
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.6));
}
.foot__grid{
  display:flex; align-items:center; justify-content:space-between;
  gap:26px; flex-wrap:wrap;
}
.foot__brand{ display:flex; align-items:center; gap:12px; }
.foot__brand img{ height:36px; width:auto; opacity:.85; filter:drop-shadow(0 0 12px rgba(233,164,19,.45)); }
.foot__brand span{
  font-family:var(--ff-display); font-weight:900; font-size:13px;
  letter-spacing:.14em; color:rgba(255,255,255,.85); line-height:1;
}
.foot__brand em{
  display:block; font-style:normal; font-weight:500; font-size:8px;
  letter-spacing:.4em; color:var(--gold); margin-top:3px;
}
.foot__tag{
  font-family:var(--ff-display); font-size:9px; letter-spacing:.42em;
  color:rgba(233,164,19,.5); text-align:right;
}

/* ── legal bar ── */
.foot__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 28px;
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--hair);
}
.foot__legal{ font-size:11.5px; color:rgba(158,158,158,.62); }

.foot__links{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.foot__links span{ color:rgba(158,158,158,.28); font-size:11px; }
.foot__links a{
  position:relative; font-size:11.5px; color:rgba(158,158,158,.72);
  transition:color .35s var(--ease);
}
.foot__links a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease);
}
.foot__links a:hover{ color:var(--gold-lit); }
.foot__links a:hover::after{ width:100%; }

.foot__credit{ font-size:11.5px; color:rgba(158,158,158,.5); }
.foot__credit a{
  color:var(--gold); font-weight:600;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text;
  transition:filter .35s var(--ease);
}
.foot__credit a:hover{ color:transparent; filter:brightness(1.25) drop-shadow(0 0 12px rgba(233,164,19,.7)); }

/* ═══════════════════════════════════════════════════════════════
   20 · TOAST
   ═══════════════════════════════════════════════════════════════ */
.toast{
  position:fixed; left:50%; bottom:38px; z-index:700;
  transform:translate(-50%,150%);
  padding:14px 26px; border-radius:100px;
  border:1px solid var(--gold-edge);
  background:rgba(10,9,6,.9);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9), 0 0 40px -18px rgba(233,164,19,.7);
  font-family:var(--ff-display); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lit);
  transition:transform .7s var(--ease), opacity .5s;
  opacity:0; pointer-events:none;
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; }

/* ═══════════════════════════════════════════════════════════════
   21 · SCROLL REVEAL
   ═══════════════════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(46px) scale(.985);
  filter:blur(6px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
  transition-delay:var(--rd,0s);
  will-change:opacity,transform;
}
.reveal.is-in{ opacity:1; transform:none; filter:blur(0); }

/* ═══════════════════════════════════════════════════════════════
   22 · RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1100px){
  .nav__links{ display:none; }
  .burger{ display:grid; }
  .nav.is-open .nav__links{
    display:grid; gap:26px;
    position:fixed; inset:0; z-index:-1;
    place-content:center; justify-items:center;
    background:rgba(4,4,4,.96);
    backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  }
  .nav.is-open .nav__links a{ font-size:14px; letter-spacing:.3em; color:#fff; }
}

@media (max-width:860px){
  :root{ --sec-y:clamp(70px,10vh,120px); }
  .foot__grid{ flex-direction:column; text-align:center; }
  .foot__tag{ text-align:center; }
  .foot__bar{ flex-direction:column; text-align:center; }
  .bar{ grid-template-columns:1fr auto; }
  .bar__track{ grid-column:1 / -1; order:3; }
  .hero__scroll{ display:none; }
  .lang__btn{ padding:7px 11px; font-size:0; gap:0; }
  .lang__btn span{ font-size:14px; }
}

@media (max-width:520px){
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 100%; }
  .socials a{ padding:10px 14px; }
  .socials em{ display:none; }
  .socials svg{ width:18px; height:18px; }
}

@media (min-width:2200px){
  :root{ --maxw:1720px; --sec-y:210px; }
  .hero__title{ font-size:clamp(120px,9vw,230px); }
}

/* ═══════════════════════════════════════════════════════════════
   23 · ACCESSIBILITY / MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; filter:none; }
  .quote__text .word{ opacity:1; transform:none; filter:none; }
  .bg__noise,.bg__scan{ display:none; }
  /* the global override would snap the loop to its end frame — stop it instead */
  .marquee__track{ animation:none !important; transform:none !important; }
  .marquee{ mask-image:none; -webkit-mask-image:none; }
  .hero__title-line{ transform:none !important; }
  .slide img,.slide.is-on img{ transform:none; }
  body.has-cursor .cursor{ display:none; }
  body.has-cursor,body.has-cursor *{ cursor:auto !important; }
}

@media print{
  .bg,.cursor,.loader,.nav,.toast,.cookie{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ═══════════════════════════════════════════════════════════════
   24 · COOKIE CONSENT
   ═══════════════════════════════════════════════════════════════ */
.cookie{
  position:fixed; left:50%; bottom:24px; z-index:750;
  width:min(760px, calc(100vw - 32px));
  transform:translate(-50%, calc(100% + 40px));
  display:grid; gap:16px;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--gold-line); border-radius:6px;
  background:linear-gradient(158deg, rgba(20,17,10,.96), rgba(6,6,6,.97));
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  box-shadow:0 30px 80px -30px #000, 0 0 60px -28px rgba(233,164,19,.6);
  transition:transform .8s var(--ease), opacity .5s var(--ease);
  opacity:0;
}
.cookie.is-on{ transform:translate(-50%,0); opacity:1; }
.cookie[hidden]{ display:none; }
.cookie::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-lit),transparent);
}
.cookie__head{ display:flex; align-items:center; gap:11px; }
.cookie__head img{ height:26px; width:auto; filter:drop-shadow(0 0 10px rgba(233,164,19,.5)); }
.cookie__head b{
  font-family:var(--ff-display); font-size:11px; font-weight:700;
  letter-spacing:.28em; color:var(--gold-lit);
}
.cookie p{ font-size:13px; line-height:1.75; color:rgba(255,255,255,.66); }
.cookie p a{ color:var(--gold-lit); text-decoration:underline; text-underline-offset:3px; }
.cookie__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.cookie__actions .btn{ --pad:13px 26px; font-size:10px; }
.cookie__actions .btn--gold{ flex:1 1 auto; }

@media (max-width:560px){
  .cookie{ bottom:12px; }
  .cookie__actions .btn{ flex:1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   25 · LEGAL PAGES
   ═══════════════════════════════════════════════════════════════ */
.legal{ position:relative; z-index:2; padding:clamp(120px,16vh,190px) 0 clamp(70px,10vh,120px); }
.legal .wrap{ max-width:900px; }

.legal__head{ display:grid; gap:16px; margin-bottom:clamp(38px,6vw,62px); }
.legal__back{
  justify-self:start; display:inline-flex; align-items:center; gap:9px;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.45); transition:color .35s var(--ease);
}
.legal__back:hover{ color:var(--gold-lit); }
.legal__back svg{ width:13px; height:13px; }
.legal__title{
  font-family:var(--ff-display); font-weight:900;
  font-size:clamp(30px,6vw,66px); line-height:1.05;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.legal__meta{ font-size:12px; color:rgba(158,158,158,.6); letter-spacing:.04em; }

.legal__body{
  border:1px solid var(--hair); border-radius:6px;
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(0,0,0,.32));
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding:clamp(24px,4vw,52px);
}
.legal__body[hidden]{ display:none; }
.legal__body h2{
  font-family:var(--ff-display); font-weight:700;
  font-size:clamp(14px,1.8vw,19px); letter-spacing:.06em;
  color:var(--gold-lit); margin:36px 0 12px;
  padding-top:22px; border-top:1px solid var(--hair);
}
.legal__body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.legal__body h3{
  font-size:14px; font-weight:600; color:rgba(255,255,255,.9); margin:20px 0 8px;
}
.legal__body p,.legal__body li{ font-size:14px; line-height:1.85; color:rgba(200,200,200,.82); }
.legal__body p{ margin-bottom:12px; }
.legal__body ul{ margin:0 0 14px; padding-left:2px; display:grid; gap:8px; }
.legal__body li{ position:relative; padding-left:20px; }
.legal__body li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; rotate:45deg; background:var(--gold);
  box-shadow:0 0 8px rgba(233,164,19,.8);
}
.legal__body a{ color:var(--gold-lit); text-decoration:underline; text-underline-offset:3px; }
.legal__body strong{ color:#fff; font-weight:600; }
.legal__body table{
  width:100%; border-collapse:collapse; margin:6px 0 18px; font-size:13px;
}
.legal__body th,.legal__body td{
  text-align:left; padding:11px 12px; border-bottom:1px solid var(--hair);
  color:rgba(200,200,200,.82); vertical-align:top;
}
.legal__body th{
  font-family:var(--ff-display); font-size:10px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
}
.legal__body td:first-child{ color:#fff; white-space:nowrap; }
@media (max-width:560px){
  .legal__body table,.legal__body thead,.legal__body tbody,
  .legal__body tr,.legal__body th,.legal__body td{ display:block; }
  .legal__body thead{ display:none; }
  .legal__body tr{ padding:12px 0; border-bottom:1px solid var(--hair); }
  .legal__body td{ border:0; padding:3px 0; }
  .legal__body td:first-child{ color:var(--gold-lit); font-weight:600; }
}