/* ==========================================================================
   Y1 GAME — "OBSIDIAN VAULT" DESIGN SYSTEM
   Ruby Red · Champagne Gold · Obsidian Black
   Custom built for y1-game.co  —  no template, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Depth / canvas */
  --obsidian:      #08080A;
  --obsidian-2:    #0A0A0D;
  --obsidian-3:    #101014;
  --charcoal:      #16161B;
  --panel:         #1C1C21;
  --panel-2:       #24242B;
  --panel-3:       #2A2A30;

  /* Ruby */
  --ruby:          #C41E3A;
  --ruby-mid:      #9B1B30;
  --ruby-deep:     #6E0F1F;
  --ruby-soft:     rgba(196, 30, 58, .18);

  /* Gold */
  --gold:          #D4AF37;
  --gold-light:    #F1E5C3;
  --gold-deep:     #B8860B;
  --gold-soft:     rgba(212, 175, 55, .16);
  --gold-line:     rgba(212, 175, 55, .26);
  --gold-line-2:   rgba(212, 175, 55, .12);

  /* Text */
  --text:          #F5F1E8;
  --muted:         #B8B3A8;
  --muted-2:       #8C887F;

  /* Gradients */
  --grad-gold:      linear-gradient(135deg, #F1E5C3 0%, #D4AF37 42%, #B8860B 100%);
  --grad-gold-soft: linear-gradient(120deg, #F7EFD8 0%, #D4AF37 55%, #9A6F09 100%);
  --grad-ruby:      linear-gradient(135deg, #E23A55 0%, #C41E3A 45%, #6E0F1F 100%);
  --grad-ruby-flat: linear-gradient(135deg, #C41E3A 0%, #6E0F1F 100%);
  --grad-line:      linear-gradient(90deg, transparent, rgba(212,175,55,.55) 20%, rgba(241,229,195,.9) 50%, rgba(212,175,55,.55) 80%, transparent);
  --grad-panel:     linear-gradient(160deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 40%, rgba(0,0,0,.25) 100%);

  /* Typography scale */
  --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-hero:  clamp(2.45rem, 1.35rem + 4.4vw, 5.1rem);
  --fs-h1:    clamp(2.1rem, 1.35rem + 3vw, 3.7rem);
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 2.95rem);
  --fs-h3:    clamp(1.22rem, 1.02rem + .8vw, 1.6rem);
  --fs-h4:    clamp(1.05rem, .96rem + .38vw, 1.22rem);
  --fs-body:  clamp(.97rem, .93rem + .18vw, 1.06rem);
  --fs-sm:    .875rem;
  --fs-xs:    .78rem;

  /* Spacing scale */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 44px;  --sp-8: 60px;
  --sp-9: 84px;  --sp-10: 112px;

  --section-y: clamp(64px, 8vw, 122px);
  --gutter: clamp(20px, 4.2vw, 54px);
  --maxw: 1280px;
  --maxw-narrow: 900px;

  /* Radii */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* Shadow */
  --sh-soft:  0 18px 44px -22px rgba(0,0,0,.9);
  --sh-card:  0 28px 60px -34px rgba(0,0,0,1), 0 2px 0 rgba(255,255,255,.03) inset;
  --sh-ruby:  0 18px 44px -18px rgba(196,30,58,.55);
  --sh-gold:  0 18px 44px -20px rgba(212,175,55,.42);

  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-io:  cubic-bezier(.65,.05,.36,1);

  --header-h: 76px;
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

html, body{
  max-width:100%;
  overflow-x:hidden;      /* hard guarantee: no horizontal scroll */
  overscroll-behavior-x:none;
}

body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.72;
  color:var(--text);
  background:var(--obsidian);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  position:relative;
  min-height:100vh;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; }
table{ border-collapse:collapse; width:100%; }

::selection{ background:rgba(196,30,58,.5); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#0B0B0E; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#4a3a17,#2a2a30);
  border-radius:99px; border:2px solid #0B0B0E;
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--gold-deep),#3a3a44); }

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

/* --------------------------------------------------------------------------
   3. PAGE ATMOSPHERE (fixed, non-scrolling background layers)
   -------------------------------------------------------------------------- */
.atmos{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 82% -8%,  rgba(196,30,58,.20), transparent 58%),
    radial-gradient(90%  60% at 8% 4%,    rgba(212,175,55,.10), transparent 55%),
    radial-gradient(140% 90% at 50% 108%, rgba(110,15,31,.28), transparent 62%),
    var(--obsidian);
}
.atmos::after{           /* fine gold grid — the brand's structural signature */
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(212,175,55,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.045) 1px, transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 5%, transparent 72%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 5%, transparent 72%);
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.037'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container--narrow{ max-width:var(--maxw-narrow); }

.section{
  position:relative;
  padding-block:var(--section-y);
  isolation:isolate;
}
.section--tight{ padding-block:clamp(48px,5.5vw,80px); }
.section--flush-top{ padding-top:clamp(32px,4vw,56px); }

/* Glow blobs behind content */
.blob{
  position:absolute; border-radius:50%; filter:blur(90px);
  pointer-events:none; z-index:-1; opacity:.5;
}
.blob--ruby{ background:radial-gradient(circle, rgba(196,30,58,.55), transparent 68%); }
.blob--gold{ background:radial-gradient(circle, rgba(212,175,55,.32), transparent 68%); }
.blob--a{ width:min(560px,86vw); height:min(560px,86vw); top:-14%; right:-14%; }
.blob--b{ width:min(480px,80vw); height:min(480px,80vw); bottom:-18%; left:-14%; }

/* Section heading block */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow__num{
  font-variant-numeric:tabular-nums;
  color:var(--ruby); font-weight:700;
}

.section-head{ max-width:760px; margin-bottom:clamp(34px,4vw,58px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head--center .eyebrow::after{
  content:''; width:34px; height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.section-head h2{ margin-top:16px; }
.section-head p{ margin-top:16px; color:var(--muted); font-size:1.03rem; }

/* Split head: title left, copy right (asymmetric rhythm) */
.split-head{
  display:grid; gap:clamp(18px,3vw,52px);
  grid-template-columns:1fr;
  align-items:end;
  margin-bottom:clamp(34px,4vw,56px);
}
@media (min-width:900px){
  .split-head{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); }
  .split-head__aside{ padding-bottom:8px; }
}
.split-head__aside p{ color:var(--muted); }

/* Divider — animated gold hairline */
.divider{
  position:relative; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--gold-line-2) 15%, var(--gold-line) 50%, var(--gold-line-2) 85%, transparent);
  overflow:hidden;
}
.divider::after{
  content:''; position:absolute; inset-block:0; left:-30%;
  width:30%; background:var(--grad-line);
  animation:sweep 5.5s var(--ease-io) infinite;
}
@keyframes sweep{ 0%{left:-30%} 55%,100%{left:110%} }

.divider-diamond{
  display:flex; align-items:center; gap:14px; width:100%;
}
.divider-diamond::before,.divider-diamond::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.divider-diamond i{
  width:7px; height:7px; transform:rotate(45deg);
  background:var(--grad-gold); box-shadow:0 0 14px rgba(212,175,55,.6);
}

/* Angled section edge (structural signature) */
.edge-top,.edge-bottom{ position:relative; }
.edge-top::before{
  content:''; position:absolute; top:-1px; left:0; right:0; height:clamp(40px,6vw,96px);
  background:linear-gradient(180deg, rgba(16,16,20,.9), transparent);
  clip-path:polygon(0 0, 100% 0, 100% 22%, 0 100%);
  z-index:-1;
}

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:700; line-height:1.08;
  letter-spacing:-.02em; color:var(--text);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.22; letter-spacing:-.012em; }
h4{ font-size:var(--fs-h4); line-height:1.3; letter-spacing:-.006em; }

p{ text-wrap:pretty; }
p + p{ margin-top:1.05em; }

.gold-text{
  background:var(--grad-gold);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.ruby-text{
  background:linear-gradient(120deg,#FF5C74,#C41E3A 55%,#8E1428);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* Foil headline: gold gradient with a slow travelling sheen */
.foil{
  background:linear-gradient(100deg,#B8860B 0%,#D4AF37 22%,#FFF8E2 42%,#F1E5C3 52%,#D4AF37 70%,#9A6F09 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:foil 9s linear infinite;
}
@keyframes foil{ 0%{background-position:0% 50%} 100%{background-position:260% 50%} }

.lead{ font-size:clamp(1.02rem,.97rem + .38vw,1.19rem); color:var(--muted); line-height:1.75; }
.muted{ color:var(--muted); }
.small{ font-size:var(--fs-sm); }
.tabnum{ font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-py:15px; --btn-px:30px;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:var(--btn-py) var(--btn-px);
  font-family:var(--font-display); font-size:.95rem; font-weight:700;
  letter-spacing:.03em; border-radius:var(--r-pill);
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease-out), color .3s, border-color .3s, background-color .3s;
  will-change:transform;
  text-align:center; line-height:1.15;
}
.btn:active{ transform:translateY(1px) scale(.985); }
.btn svg{ flex:none; }

/* Primary — ruby with gold rim + shine sweep */
.btn--primary{
  color:#fff; background:var(--grad-ruby);
  box-shadow:var(--sh-ruby), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary::before{         /* gold rim */
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:linear-gradient(135deg, rgba(241,229,195,.95), rgba(212,175,55,.35) 40%, rgba(212,175,55,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.btn--primary::after{          /* shine sweep */
  content:''; position:absolute; top:-60%; left:-70%; width:45%; height:220%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform:rotate(18deg); pointer-events:none;
  animation:shine 4.6s var(--ease-io) infinite;
}
@keyframes shine{ 0%{left:-70%} 42%,100%{left:135%} }
.btn--primary:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 54px -18px rgba(196,30,58,.75), 0 0 0 1px rgba(241,229,195,.45), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Gold — prestige action */
.btn--gold{
  color:#150F02; background:var(--grad-gold);
  box-shadow:var(--sh-gold), inset 0 1px 0 rgba(255,255,255,.6);
  font-weight:800;
}
.btn--gold::after{
  content:''; position:absolute; top:-60%; left:-70%; width:40%; height:220%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:rotate(18deg); pointer-events:none;
  animation:shine 5.4s var(--ease-io) infinite;
}
.btn--gold:hover{ transform:translateY(-3px); box-shadow:0 26px 54px -18px rgba(212,175,55,.65); }

/* Ghost — gold hairline */
.btn--ghost{
  color:var(--gold-light);
  border:1px solid var(--gold-line);
  background:rgba(212,175,55,.05);
  backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  color:#fff; border-color:rgba(241,229,195,.7);
  background:rgba(212,175,55,.12); transform:translateY(-3px);
  box-shadow:0 18px 40px -22px rgba(212,175,55,.7);
}

/* Telegram — real brand-icon button */
.btn--tg{
  color:#EAF6FF;
  background:linear-gradient(135deg, #2AABEE 0%, #1C93D2 55%, #147AB0 100%);
  box-shadow:0 18px 40px -20px rgba(42,171,238,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--tg:hover{ transform:translateY(-3px); box-shadow:0 26px 52px -18px rgba(42,171,238,.85); }
.btn--tg .tg-ico{ width:20px; height:20px; }

.btn--xs{ --btn-py:7px; --btn-px:15px; font-size:.74rem; gap:6px; }
.btn--sm{ --btn-py:11px; --btn-px:20px; font-size:.85rem; }
.btn--lg{ --btn-py:18px; --btn-px:40px; font-size:1.03rem; }
.btn--block{ width:100%; }

.btn__sub{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; opacity:.82; margin-top:2px;
}

/* Text link with animated gold underline */
.link-gold{
  position:relative; color:var(--gold-light); font-weight:600;
  display:inline-flex; align-items:center; gap:7px;
}
.link-gold::after{
  content:''; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--grad-gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.link-gold:hover::after{ transform:scaleX(1); transform-origin:left; }
.link-gold svg{ transition:transform .35s var(--ease-out); }
.link-gold:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   7. BADGES / PILLS / CHIPS
   -------------------------------------------------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; font-family:var(--font-display);
  border:1px solid var(--gold-line);
  background:linear-gradient(120deg, rgba(212,175,55,.12), rgba(196,30,58,.08));
  color:var(--gold-light);
  backdrop-filter:blur(10px);
}
.pill--ruby{
  border-color:rgba(196,30,58,.42);
  background:linear-gradient(120deg, rgba(196,30,58,.22), rgba(110,15,31,.14));
  color:#FFD9DF;
}
.dot-live{
  width:8px; height:8px; border-radius:50%; background:#3BE07A; flex:none;
  box-shadow:0 0 0 0 rgba(59,224,122,.65); animation:pulseDot 2.1s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(59,224,122,.6) }
  70%{ box-shadow:0 0 0 9px rgba(59,224,122,0) }
  100%{ box-shadow:0 0 0 0 rgba(59,224,122,0) }
}

.tag{
  display:inline-block; padding:5px 11px; border-radius:6px;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(212,175,55,.1); border:1px solid var(--gold-line-2); color:var(--gold);
}

/* --------------------------------------------------------------------------
   8. SURFACES / CARDS
   -------------------------------------------------------------------------- */
.card{
  position:relative; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(42,42,48,.62) 0%, rgba(16,16,20,.9) 55%, rgba(10,10,13,.96) 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:var(--sh-card);
  overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
}
.card::before{        /* top gold hairline */
  content:''; position:absolute; top:0; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
  transition:left .55s var(--ease-out), right .55s var(--ease-out), opacity .4s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(212,175,55,.34);
  box-shadow:0 36px 70px -34px rgba(0,0,0,1), 0 0 46px -20px rgba(212,175,55,.4);
}
.card:hover::before{ left:0; right:0; }
.card__body{ padding:clamp(22px,2.6vw,32px); }

/* Panel = flatter surface for text-heavy content */
.panel{
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(160deg, rgba(28,28,33,.72), rgba(10,10,13,.9));
  padding:clamp(22px,3vw,40px);
  box-shadow:var(--sh-soft);
}
.panel--gold{
  border-color:var(--gold-line);
  background:linear-gradient(150deg, rgba(212,175,55,.09), rgba(10,10,13,.9) 55%);
}
.panel--ruby{
  border-color:rgba(196,30,58,.3);
  background:linear-gradient(150deg, rgba(196,30,58,.14), rgba(10,10,13,.92) 58%);
}

/* --------------------------------------------------------------------------
   9. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
/* Header must sit ABOVE the fullscreen menu so the close (X) button stays clickable */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1010;
  transition:background-color .45s var(--ease-out), box-shadow .45s, backdrop-filter .45s, border-color .45s;
  border-bottom:1px solid transparent;
}
body.menu-open .site-header{
  background:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
body.menu-open .site-header::after{ opacity:0; }
.site-header::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
  opacity:0; transition:opacity .45s;
}
.site-header.is-stuck{
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 18px 40px -30px rgba(0,0,0,1);
}
.site-header.is-stuck::after{ opacity:1; }

.nav{
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  height:var(--header-h);
  transition:height .4s var(--ease-out);
}
.site-header.is-stuck .nav{ height:64px; }

/* Brand lockup — the logo gets a proper, balanced presentation */
.brand{
  display:inline-flex; align-items:center; gap:12px;
  flex:none; position:relative; padding:6px 2px;
}
.brand__plate{
  position:relative; display:grid; place-items:center;
  padding:8px 14px; border-radius:12px;
  background:linear-gradient(150deg, rgba(212,175,55,.12), rgba(196,30,58,.10) 60%, rgba(10,10,13,.6));
  border:1px solid rgba(212,175,55,.28);
  box-shadow:0 10px 26px -16px rgba(212,175,55,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transition:box-shadow .45s var(--ease-out), border-color .45s, transform .45s var(--ease-out);
  overflow:hidden;
}
.brand__plate::after{
  content:''; position:absolute; top:-70%; left:-80%; width:40%; height:240%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform:rotate(20deg); animation:shine 6.5s var(--ease-io) infinite;
}
.brand:hover .brand__plate{
  border-color:rgba(241,229,195,.65);
  box-shadow:0 14px 34px -14px rgba(212,175,55,.8), inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(-1px);
}
.brand__img{
  height:30px; width:auto; display:block;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));
  transition:height .4s var(--ease-out);
}
.site-header.is-stuck .brand__img{ height:26px; }
.brand__tag{
  display:none; flex-direction:column; line-height:1.05;
  font-family:var(--font-display); text-transform:uppercase;
}
.brand__tag b{
  font-size:.82rem; font-weight:800; letter-spacing:.2em;
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.brand__tag span{
  font-size:.56rem; letter-spacing:.28em; color:var(--muted-2); font-weight:600; margin-top:3px;
}
@media (min-width:520px){ .brand__tag{ display:flex; } }
@media (min-width:1024px){ .brand__img{ height:34px; } }

/* Desktop links */
.nav__links{
  display:none; align-items:center; gap:clamp(4px,1.4vw,14px);
  margin-inline:auto;
}
@media (min-width:1080px){ .nav__links{ display:flex; } }
.nav__link{
  position:relative; padding:10px 14px; border-radius:10px;
  font-size:.92rem; font-weight:600; color:var(--muted);
  transition:color .32s var(--ease-out);
  white-space:nowrap;
}
.nav__link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1.5px;
  background:var(--grad-gold); border-radius:2px;
  transform:scaleX(0); transform-origin:center;
  transition:transform .42s var(--ease-out);
}
.nav__link:hover{ color:var(--text); }
.nav__link:hover::after{ transform:scaleX(.75); }
.nav__link.is-active{ color:var(--gold-light); }
.nav__link.is-active::after{
  transform:scaleX(1);
  box-shadow:0 0 12px rgba(212,175,55,.85);
}

.nav__actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
@media (min-width:1080px){ .nav__actions{ margin-left:0; } }
.nav__cta{ display:none; }
@media (min-width:680px){ .nav__cta{ display:inline-flex; } }
.nav__tg{
  display:none; width:42px; height:42px; border-radius:50%;
  place-items:center; flex:none;
  border:1px solid rgba(42,171,238,.42);
  background:radial-gradient(circle at 30% 25%, rgba(42,171,238,.3), rgba(42,171,238,.08));
  color:#8FD6FF; transition:transform .4s var(--ease-out), box-shadow .4s, border-color .4s, color .3s;
}
.nav__tg:hover{
  transform:translateY(-2px) scale(1.06); color:#fff;
  border-color:rgba(42,171,238,.9); box-shadow:0 10px 26px -10px rgba(42,171,238,.85);
}
@media (min-width:480px){ .nav__tg{ display:grid; } }

/* Hamburger */
.burger{
  display:grid; place-items:center; width:46px; height:46px; flex:none;
  border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03); position:relative; z-index:1002;
  transition:border-color .35s, background-color .35s;
}
.burger:hover{ border-color:var(--gold-line); background:rgba(212,175,55,.08); }
@media (min-width:1080px){ .burger{ display:none; } }
.burger span{
  position:absolute; left:13px; width:20px; height:2px; border-radius:2px;
  background:var(--gold-light);
  transition:transform .45s var(--ease-out), opacity .3s, width .35s, background-color .3s;
}
.burger span:nth-child(1){ transform:translateY(-6px); }
.burger span:nth-child(3){ transform:translateY(6px); width:13px; }
body.menu-open .burger span:nth-child(1){ transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; transform:scaleX(.2); }
body.menu-open .burger span:nth-child(3){ transform:rotate(-45deg); width:20px; }

/* Fullscreen mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:1000;   /* below .site-header (1010) on purpose */
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(196,30,58,.24), transparent 60%),
    radial-gradient(80% 60% at 10% 100%, rgba(212,175,55,.14), transparent 62%),
    rgba(8,8,10,.98);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 22px) var(--gutter) 34px;
  overflow-y:auto; overscroll-behavior:contain;
  clip-path:circle(0% at calc(100% - 46px) 44px);
  transition:clip-path .72s var(--ease-io);
  visibility:hidden;
}
body.menu-open .mobile-menu{
  clip-path:circle(155% at calc(100% - 46px) 44px);
  visibility:visible;
}
.mobile-menu__list{ display:flex; flex-direction:column; gap:2px; }
.mobile-menu__link{
  display:flex; align-items:center; gap:16px;
  padding:15px 4px; border-bottom:1px solid rgba(255,255,255,.06);
  font-family:var(--font-display); font-size:1.32rem; font-weight:700;
  color:var(--text); letter-spacing:-.01em;
  opacity:0; transform:translateY(22px);
  transition:color .3s, padding-left .35s var(--ease-out);
}
body.menu-open .mobile-menu__link{
  animation:menuIn .6s var(--ease-out) forwards;
  animation-delay:calc(.13s + var(--i,0) * .055s);
}
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.mobile-menu__link i{
  font-style:normal; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  color:var(--ruby); font-variant-numeric:tabular-nums; min-width:26px;
}
.mobile-menu__link:hover,.mobile-menu__link.is-active{ color:var(--gold-light); padding-left:10px; }
.mobile-menu__foot{ margin-top:auto; padding-top:28px; display:grid; gap:12px; }
.mobile-menu__legal{
  display:flex; flex-wrap:wrap; gap:8px 18px; padding-top:16px;
  font-size:var(--fs-sm); color:var(--muted-2);
}

/* --------------------------------------------------------------------------
   10. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(34px,5vw,74px));
  padding-bottom:clamp(56px,7vw,110px);
  overflow:hidden;
}
.hero__rays{
  position:absolute; inset:-20% -30% auto; height:130%; z-index:-1;
  background:
    conic-gradient(from 200deg at 62% 12%, transparent 0deg, rgba(196,30,58,.20) 22deg, transparent 46deg,
      rgba(212,175,55,.13) 74deg, transparent 104deg, rgba(196,30,58,.13) 140deg, transparent 176deg);
  filter:blur(28px); opacity:.85;
  animation:rayspin 42s linear infinite;
}
@keyframes rayspin{ to{ transform:rotate(360deg) } }
.hero__spark{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}
.hero__spark i{
  position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:var(--gold-light); opacity:0;
  box-shadow:0 0 10px 1px rgba(212,175,55,.85);
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) scale(.6); opacity:0 }
  12%{ opacity:.9 }
  85%{ opacity:.5 }
  100%{ transform:translateY(-86vh) scale(1.15); opacity:0 }
}

.hero__grid{
  display:grid; gap:clamp(38px,5vw,56px);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width:980px){
  .hero__grid{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px,4vw,64px); }
}
.hero__copy{ position:relative; z-index:2; }
.hero h1{
  font-size:var(--fs-hero); line-height:1.02; letter-spacing:-.035em;
  margin-top:22px;
}
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{ display:block; }
.hero__sub{
  margin-top:22px; max-width:56ch;
  font-size:clamp(1rem,.95rem + .42vw,1.16rem); color:var(--muted); line-height:1.72;
}
.hero__sub strong{ color:var(--gold-light); font-weight:700; }

/* Bonus slab — the hero's hero */
.bonus-slab{
  margin-top:30px; display:inline-flex; align-items:stretch; gap:0;
  border-radius:18px; overflow:hidden; position:relative;
  border:1px solid var(--gold-line);
  background:linear-gradient(130deg, rgba(196,30,58,.20), rgba(10,10,13,.7) 55%, rgba(212,175,55,.12));
  box-shadow:0 26px 60px -34px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
  max-width:100%; flex-wrap:wrap;
}
.bonus-slab__amt{
  padding:16px 24px; display:flex; flex-direction:column; justify-content:center;
  border-right:1px solid var(--gold-line-2);
}
.bonus-slab__amt b{
  font-family:var(--font-display); font-size:clamp(1.7rem,1.2rem + 1.9vw,2.5rem);
  line-height:1; letter-spacing:-.03em; display:block;
}
.bonus-slab__amt small{
  display:block; margin-top:7px; font-size:.68rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.bonus-slab__note{
  padding:16px 24px; display:flex; flex-direction:column; justify-content:center;
  font-size:var(--fs-sm); color:var(--muted); max-width:34ch;
}
.bonus-slab__note b{ color:var(--text); display:block; font-weight:700; }

.hero__actions{
  margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.hero__trust{
  margin-top:26px; display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-size:var(--fs-sm); color:var(--muted-2);
}
.hero__trust span{ display:inline-flex; align-items:center; gap:8px; }
.hero__trust svg{ color:var(--gold); flex:none; }

/* --------------------------------------------------------------------------
   11. PHONE MOCKUP (hero + download) — premium device frame
   -------------------------------------------------------------------------- */
.mockup{
  position:relative; display:flex; justify-content:center; align-items:center;
  perspective:1400px; z-index:1;
}
.mockup__stage{
  position:relative;
  transform-style:preserve-3d;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{
  0%,100%{ transform:translateY(0) rotateY(-9deg) rotateX(3deg) }
  50%{ transform:translateY(-16px) rotateY(-4deg) rotateX(1deg) }
}
@media (max-width:979px){
  @keyframes floaty{
    0%,100%{ transform:translateY(0) rotateY(0) }
    50%{ transform:translateY(-13px) rotateY(0) }
  }
}
.mockup__halo{
  position:absolute; inset:-16% -22%; z-index:-1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(196,30,58,.5), transparent 62%),
    radial-gradient(circle at 62% 72%, rgba(212,175,55,.28), transparent 60%);
  filter:blur(56px); animation:haloPulse 6s ease-in-out infinite;
}
@keyframes haloPulse{ 0%,100%{ opacity:.75; transform:scale(1) } 50%{ opacity:1; transform:scale(1.07) } }

.phone{
  position:relative;
  width:clamp(232px, 25vw, 306px);
  aspect-ratio:1280 / 2800;
  border-radius:clamp(30px,3.4vw,42px);
  padding:9px;
  background:
    linear-gradient(160deg,#3a3a42 0%, #101014 22%, #0A0A0D 60%, #26262e 100%);
  box-shadow:
    0 60px 90px -46px rgba(0,0,0,1),
    0 0 0 1px rgba(212,175,55,.32),
    0 0 46px -10px rgba(196,30,58,.42),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.phone::before{                 /* gold rim highlight */
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(150deg, rgba(241,229,195,.75), rgba(212,175,55,.18) 38%, rgba(212,175,55,.6) 72%, rgba(255,255,255,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.phone__screen{
  position:relative; width:100%; height:100%; overflow:hidden;
  border-radius:clamp(23px,2.6vw,33px);
  background:#0A0A0D;
}
.phone__screen img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block;
}
.phone__glare{                  /* diagonal glass reflection that sweeps */
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  border-radius:inherit;
}
.phone__glare::after{
  content:''; position:absolute; top:-40%; left:-120%; width:70%; height:190%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.16) 40%, rgba(255,255,255,.28) 52%, transparent 70%);
  transform:rotate(14deg);
  animation:glare 7.5s var(--ease-io) infinite;
}
@keyframes glare{ 0%{ left:-120% } 45%,100%{ left:135% } }
.phone__notch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:34%; height:22px; border-radius:0 0 14px 14px;
  background:#08080A; z-index:3;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}
.phone__notch::after{
  content:''; position:absolute; top:7px; right:22%; width:6px; height:6px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #33333d, #0d0d11);
  box-shadow:0 0 0 1px rgba(212,175,55,.25);
}
.phone__side{
  position:absolute; right:-2px; width:3px; border-radius:2px;
  background:linear-gradient(180deg, rgba(212,175,55,.7), rgba(212,175,55,.15));
}
.phone__side--a{ top:22%; height:8%; }
.phone__side--b{ top:33%; height:12%; }

/* Floating chips orbiting the phone */
.chip{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 15px; border-radius:14px;
  background:linear-gradient(150deg, rgba(28,28,33,.94), rgba(10,10,13,.94));
  border:1px solid var(--gold-line);
  box-shadow:0 22px 44px -22px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  font-size:.76rem; font-weight:700; line-height:1.25;
  white-space:nowrap;
  animation:chipFloat 5.5s ease-in-out infinite;
}
.chip small{ display:block; font-size:.62rem; font-weight:600; color:var(--muted-2); letter-spacing:.08em; text-transform:uppercase; }
.chip__ico{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:var(--grad-ruby); color:#fff;
}
.chip__ico--gold{ background:var(--grad-gold); color:#180F02; }
@keyframes chipFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }
.chip--tl{ top:9%; left:-8%; animation-delay:-1.2s; }
.chip--br{ bottom:14%; right:-9%; animation-delay:-3s; }
.chip--bl{ bottom:34%; left:-13%; animation-delay:-2.1s; }
@media (max-width:520px){
  .chip--tl{ left:-2%; } .chip--br{ right:-2%; } .chip--bl{ display:none; }
  .chip{ font-size:.7rem; padding:9px 12px; }
}

/* Duo arrangement — two devices (download page) */
.mockup--duo .mockup__stage{ display:flex; align-items:flex-end; }
.mockup--duo .phone{ width:clamp(196px, 20vw, 254px); }
.mockup--duo .phone--back{
  position:absolute; left:-32%; bottom:6%;
  width:clamp(150px, 15.5vw, 198px);
  transform:rotate(-9deg) translateZ(-60px);
  opacity:.94; z-index:-1;
  animation:floatyBack 8s ease-in-out infinite;
}
@keyframes floatyBack{
  0%,100%{ transform:rotate(-9deg) translateY(0) }
  50%{ transform:rotate(-7deg) translateY(-11px) }
}
@media (max-width:640px){
  .mockup--duo .phone--back{ left:-24%; width:clamp(120px,32vw,160px); }
  .mockup--duo .chip--bl{ display:none; }
}

/* Compact inline arrangement — a supporting visual inside a text column (promo/bonus section,
   and the phone-view hero). Sized to read as a real, prominent device on a phone screen rather
   than a thumbnail — the bezel/radii/notch scale with it so it stays proportionate. */
.mockup--sm{ margin-inline:auto; max-width:100%; }
.mockup--sm .phone{
  width:clamp(200px, 58vw, 300px);
  padding:8px;
  border-radius:clamp(26px, 5.5vw, 34px);
}
.mockup--sm .phone__screen{ border-radius:clamp(20px, 4.4vw, 27px); }
.mockup--sm .phone__notch{
  top:8px; width:32%; height:19px; border-radius:0 0 12px 12px;
}
.mockup--sm .phone__notch::after{ top:6px; width:5px; height:5px; }
.mockup--sm .phone__side{ width:2.5px; right:-2px; }
.mockup--sm .mockup__halo{ inset:-16% -22%; }
.mockup--sm .chip{ font-size:.72rem; padding:9px 12px; }
.mockup--sm .chip__ico{ width:28px; height:28px; }

/* Hero mockup swap: small inline version above the CTA on phone view, full side-by-side
   version on desktop — never both at once. Breakpoint matches .hero__grid's own switch. */
.hero__mockup--mobile{ margin-block:26px 6px; }
.hero__mockup--desktop{ display:none; }
@media (min-width:980px){
  .hero__mockup--mobile{ display:none; }
  .hero__mockup--desktop{ display:flex; }
}

/* Rotating gold ring behind device */
.mockup__ring{
  position:absolute; width:118%; aspect-ratio:1; border-radius:50%; z-index:-1;
  border:1px dashed rgba(212,175,55,.24);
  animation:rayspin 34s linear infinite;
}
.mockup__ring::after{
  content:''; position:absolute; top:-5px; left:50%; width:9px; height:9px;
  border-radius:50%; background:var(--grad-gold); box-shadow:0 0 16px rgba(212,175,55,.9);
}

/* --------------------------------------------------------------------------
   12. KEYWORD MARQUEE
   -------------------------------------------------------------------------- */
.marquee{
  position:relative; overflow:hidden; width:100%;
  border-block:1px solid var(--gold-line-2);
  background:linear-gradient(90deg, rgba(196,30,58,.09), rgba(10,10,13,.4) 40%, rgba(212,175,55,.09));
  padding-block:13px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track{
  display:flex; width:max-content; gap:0;
  animation:marquee 44s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.marquee__item{
  display:inline-flex; align-items:center; gap:16px; padding-inline:16px;
  font-family:var(--font-display); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.marquee__item::after{
  content:''; width:6px; height:6px; transform:rotate(45deg);
  background:var(--grad-gold); opacity:.8;
}
.marquee__item b{ color:var(--gold-light); font-weight:700; }

/* --------------------------------------------------------------------------
   13. STATS
   -------------------------------------------------------------------------- */
.stats{
  display:grid; gap:1px; border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:rgba(212,175,55,.16);
  border:1px solid var(--gold-line-2);
}
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{
  position:relative; padding:clamp(20px,2.6vw,32px) clamp(16px,2vw,26px);
  background:linear-gradient(165deg, rgba(24,24,29,.96), rgba(10,10,13,.98));
  text-align:center; overflow:hidden;
  transition:background-color .45s;
}
.stat:hover{ background:linear-gradient(165deg, rgba(34,34,40,.96), rgba(14,14,18,.98)); }
.stat::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:0; height:2px; background:var(--grad-gold); transition:width .55s var(--ease-out);
}
.stat:hover::after{ width:64%; }
.stat b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.65rem,1.1rem + 2vw,2.5rem); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; margin-top:10px; font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2);
}

/* --------------------------------------------------------------------------
   14. FEATURE GRID (asymmetric bento)
   -------------------------------------------------------------------------- */
.bento{
  display:grid; gap:clamp(14px,1.6vw,22px);
  grid-template-columns:1fr;
}
@media (min-width:680px){ .bento{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .bento{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.bento > *{ grid-column:span 1; }
@media (min-width:1024px){
  .bento__lg{ grid-column:span 3; }
  .bento__md{ grid-column:span 2; }
  .bento__sm{ grid-column:span 2; }
  .bento__wide{ grid-column:span 6; }
  .bento__half{ grid-column:span 3; }
}

.feature{
  position:relative; padding:clamp(24px,2.7vw,34px);
  border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(165deg, rgba(30,30,36,.72), rgba(11,11,14,.94));
  box-shadow:var(--sh-card);
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
  height:100%;
}
.feature::after{               /* ruby corner glow that grows on hover */
  content:''; position:absolute; top:-40%; right:-30%;
  width:70%; aspect-ratio:1; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(196,30,58,.32), transparent 68%);
  opacity:.5; transition:opacity .55s, transform .7s var(--ease-out);
}
.feature:hover{
  transform:translateY(-7px);
  border-color:rgba(212,175,55,.32);
  box-shadow:0 40px 74px -38px rgba(0,0,0,1), 0 0 50px -22px rgba(212,175,55,.42);
}
.feature:hover::after{ opacity:1; transform:scale(1.25); }
.feature__ico{
  width:54px; height:54px; border-radius:15px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(212,175,55,.2), rgba(196,30,58,.16));
  border:1px solid var(--gold-line);
  color:var(--gold-light); margin-bottom:20px;
  transition:transform .5s var(--ease-out), box-shadow .5s, color .4s;
}
.feature:hover .feature__ico{
  transform:translateY(-4px) rotate(-6deg) scale(1.06);
  box-shadow:0 14px 30px -14px rgba(212,175,55,.8);
  color:#fff;
}
.feature h3{ margin-bottom:12px; }
.feature p{ color:var(--muted); font-size:.97rem; }
.feature__list{ margin-top:16px; display:grid; gap:9px; }
.feature__list li{
  position:relative; padding-left:24px; font-size:.92rem; color:var(--muted);
}
.feature__list li::before{
  content:''; position:absolute; left:0; top:.62em; width:9px; height:9px;
  transform:rotate(45deg); background:var(--grad-gold); border-radius:2px;
}
.feature__num{
  position:absolute; top:18px; right:22px;
  font-family:var(--font-display); font-size:2.4rem; font-weight:800;
  color:rgba(255,255,255,.04); letter-spacing:-.04em; line-height:1;
  transition:color .5s;
}
.feature:hover .feature__num{ color:rgba(212,175,55,.12); }

/* --------------------------------------------------------------------------
   15. GAMES
   -------------------------------------------------------------------------- */
.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin-bottom:clamp(24px,3vw,38px);
}
.filter{
  padding:10px 20px; border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:.82rem; font-weight:700;
  letter-spacing:.06em; color:var(--muted);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.02);
  transition:color .35s, border-color .35s, background .45s, transform .35s var(--ease-out), box-shadow .4s;
  white-space:nowrap;
}
.filter:hover{ color:var(--text); border-color:var(--gold-line); transform:translateY(-2px); }
.filter.is-active{
  color:#150F02; background:var(--grad-gold); border-color:transparent;
  box-shadow:0 12px 28px -14px rgba(212,175,55,.8);
}
.filter span{
  display:inline-block; margin-left:7px; font-size:.72rem; opacity:.65;
  font-variant-numeric:tabular-nums;
}

.games-grid{
  display:grid; gap:clamp(12px,1.4vw,20px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:560px){ .games-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:860px){ .games-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1180px){ .games-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.games-grid--home{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:560px){ .games-grid--home{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:900px){ .games-grid--home{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1180px){ .games-grid--home{ grid-template-columns:repeat(6,minmax(0,1fr)); } }

.game{
  position:relative; display:block; border-radius:16px; overflow:hidden;
  background:linear-gradient(165deg, rgba(34,34,40,.9), rgba(10,10,13,.96));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 40px -28px rgba(0,0,0,1);
  transform-style:preserve-3d;
  transition:transform .45s var(--ease-out), border-color .4s, box-shadow .45s;
  will-change:transform;
}
.game:hover,.game:focus-visible{
  border-color:rgba(212,175,55,.55);
  box-shadow:0 30px 56px -26px rgba(0,0,0,1), 0 0 42px -16px rgba(212,175,55,.55);
}
.game__media{
  display:block; position:relative; aspect-ratio:1/1; overflow:hidden; background:#111116;
}
.game__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .78s var(--ease-out), filter .5s;
}
.game:hover .game__media img{ transform:scale(1.1); filter:saturate(1.15) brightness(1.05); }
.game__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(8,8,10,.85) 100%);
}
.game__shine{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
}
.game__shine::after{
  content:''; position:absolute; top:-50%; left:-140%; width:60%; height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:rotate(20deg); transition:left .85s var(--ease-out);
}
.game:hover .game__shine::after{ left:150%; }
.game__play{
  position:absolute; z-index:3; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.6); opacity:0;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-ruby); color:#fff;
  border:1.5px solid rgba(241,229,195,.85);
  box-shadow:0 12px 34px -8px rgba(196,30,58,.9);
  transition:transform .5s var(--ease-out), opacity .4s;
}
.game:hover .game__play,.game:focus-visible .game__play{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.game__badge{
  position:absolute; z-index:3; top:9px; left:9px;
  padding:4px 9px; border-radius:6px;
  font-size:.6rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  font-family:var(--font-display);
  background:var(--grad-ruby); color:#fff;
  box-shadow:0 6px 16px -6px rgba(196,30,58,.9);
  overflow:hidden;
}
.game__badge--gold{ background:var(--grad-gold); color:#150F02; box-shadow:0 6px 16px -6px rgba(212,175,55,.9); }
.game__badge::after{
  content:''; position:absolute; top:-50%; left:-120%; width:50%; height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform:rotate(20deg); animation:shine 3.6s var(--ease-io) infinite;
}
.game__info{ display:block; padding:11px 12px 13px; position:relative; z-index:3; }
.game__info h3{
  font-size:.86rem; font-weight:700; line-height:1.25; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.game__meta{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:6px; font-size:.68rem; color:var(--muted-2); letter-spacing:.05em;
}
.game__rtp{ color:var(--gold); font-weight:700; font-variant-numeric:tabular-nums; }

.games-empty{
  display:none; text-align:center; padding:60px 20px; color:var(--muted);
}
.games-empty.is-shown{ display:block; }

/* --------------------------------------------------------------------------
   16. STEPS (how to download)
   -------------------------------------------------------------------------- */
.steps{
  display:grid; gap:clamp(16px,2vw,24px);
  grid-template-columns:1fr; counter-reset:step;
  position:relative;
}
@media (min-width:760px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1080px){ .steps--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.step{
  position:relative; padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,28px);
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(170deg, rgba(30,30,36,.68), rgba(10,10,13,.94));
  border:1px solid rgba(255,255,255,.07);
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
  height:100%;
}
.step:hover{
  transform:translateY(-6px); border-color:rgba(212,175,55,.34);
  box-shadow:0 34px 64px -36px rgba(0,0,0,1), 0 0 42px -22px rgba(212,175,55,.4);
}
.step__n{
  display:inline-grid; place-items:center; width:46px; height:46px;
  border-radius:13px; margin-bottom:18px;
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  color:#150F02; background:var(--grad-gold);
  box-shadow:0 12px 26px -14px rgba(212,175,55,.9);
  position:relative;
}
.step__n::after{
  content:''; position:absolute; inset:-5px; border-radius:17px;
  border:1px solid var(--gold-line); opacity:0; transition:opacity .4s, inset .4s;
}
.step:hover .step__n::after{ opacity:1; inset:-8px; }
.step h3{ margin-bottom:10px; font-size:1.08rem; }
.step p{ color:var(--muted); font-size:.94rem; }
.step__line{
  position:absolute; top:44px; right:-12px; width:24px; height:1px;
  background:linear-gradient(90deg, var(--gold-line), transparent);
  display:none;
}
@media (min-width:1080px){ .steps--4 .step__line{ display:block; } .steps--4 .step:last-child .step__line{ display:none; } }

/* --------------------------------------------------------------------------
   17. SCREENSHOT SLIDER
   -------------------------------------------------------------------------- */
.shots{ position:relative; }
.shots__viewport{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.shots__track{
  display:flex; gap:clamp(16px,2vw,26px);
  padding-block:22px; padding-inline:4px;
  transition:transform .85s var(--ease-out);
  will-change:transform;
}
.shot{
  flex:0 0 auto;
  width:clamp(178px, 42vw, 234px);
  position:relative;
  border-radius:clamp(22px,2.4vw,30px);
  padding:7px;
  background:linear-gradient(160deg,#33333c 0%, #101014 24%, #0A0A0D 62%, #22222a 100%);
  box-shadow:0 34px 60px -38px rgba(0,0,0,1), 0 0 0 1px rgba(212,175,55,.22);
  transition:transform .6s var(--ease-out), box-shadow .6s, filter .6s;
  filter:saturate(.92);
}
.shot__inner{
  position:relative; border-radius:clamp(17px,1.9vw,24px); overflow:hidden;
  aspect-ratio:1280 / 2800; background:#0A0A0D;
}
.shot__inner img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.shot__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 14px 12px; text-align:center;
  background:linear-gradient(180deg, transparent, rgba(8,8,10,.94));
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-light);
}
.shot.is-active{
  transform:translateY(-14px) scale(1.045); filter:saturate(1.08);
  box-shadow:0 46px 76px -36px rgba(0,0,0,1), 0 0 0 1px rgba(241,229,195,.5), 0 0 54px -18px rgba(196,30,58,.6);
}
.shot:hover{ filter:saturate(1.05); }

.shots__nav{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(18px,2.4vw,28px);
}
.shots__btn{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none;
  border:1px solid var(--gold-line); color:var(--gold-light);
  background:rgba(212,175,55,.06);
  transition:transform .4s var(--ease-out), background .4s, color .3s, box-shadow .4s, border-color .3s;
}
.shots__btn:hover{
  transform:scale(1.08); color:#150F02; background:var(--grad-gold);
  border-color:transparent; box-shadow:0 14px 30px -14px rgba(212,175,55,.9);
}
.shots__dots{ display:flex; gap:8px; align-items:center; }
.shots__dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.18); transition:all .45s var(--ease-out);
}
.shots__dot.is-active{ width:26px; border-radius:5px; background:var(--grad-gold); }

/* --------------------------------------------------------------------------
   18. OG BANNER SHOWCASE
   -------------------------------------------------------------------------- */
.ogbanner{
  position:relative; border-radius:clamp(18px,2.2vw,26px); overflow:hidden;
  border:1px solid var(--gold-line);
  box-shadow:0 46px 90px -48px rgba(0,0,0,1), 0 0 70px -34px rgba(196,30,58,.6);
  background:#0A0A0D;
  isolation:isolate;
}
.ogbanner__img{
  width:100%; height:auto; display:block;
  transition:transform 1.2s var(--ease-out);
}
.ogbanner:hover .ogbanner__img{ transform:scale(1.028); }
.ogbanner::after{           /* sweeping gold foil shine over the banner */
  content:''; position:absolute; top:-40%; left:-60%; width:38%; height:190%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22) 45%, rgba(241,229,195,.3) 55%, transparent);
  transform:rotate(16deg); pointer-events:none; z-index:3;
  animation:shine 6.5s var(--ease-io) infinite;
}
.ogbanner__frame{
  position:absolute; inset:10px; border-radius:inherit; z-index:2; pointer-events:none;
  border:1px solid rgba(241,229,195,.22);
}
.ogbanner__corner{
  position:absolute; width:26px; height:26px; z-index:4; pointer-events:none;
  border:0 solid var(--gold);
}
.ogbanner__corner--tl{ top:16px; left:16px; border-top-width:2px; border-left-width:2px; border-top-left-radius:8px; }
.ogbanner__corner--tr{ top:16px; right:16px; border-top-width:2px; border-right-width:2px; border-top-right-radius:8px; }
.ogbanner__corner--bl{ bottom:16px; left:16px; border-bottom-width:2px; border-left-width:2px; border-bottom-left-radius:8px; }
.ogbanner__corner--br{ bottom:16px; right:16px; border-bottom-width:2px; border-right-width:2px; border-bottom-right-radius:8px; }

.ogbanner__cta{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(20px,2.6vw,30px);
}

.og-meta{
  display:grid; gap:clamp(12px,1.6vw,18px); margin-top:clamp(20px,2.4vw,28px);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:820px){ .og-meta{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.og-meta__item{
  padding:16px 18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(160deg, rgba(28,28,33,.7), rgba(10,10,13,.9));
  transition:border-color .4s, transform .45s var(--ease-out);
}
.og-meta__item:hover{ border-color:var(--gold-line); transform:translateY(-4px); }
.og-meta__item b{ display:block; font-family:var(--font-display); font-size:.96rem; color:var(--gold-light); }
.og-meta__item span{ display:block; margin-top:5px; font-size:.8rem; color:var(--muted-2); }

/* --------------------------------------------------------------------------
   19. PROMO / BONUS SECTION
   -------------------------------------------------------------------------- */
.promo{
  position:relative; border-radius:clamp(20px,2.4vw,30px); overflow:hidden;
  padding:clamp(28px,4.4vw,66px);
  border:1px solid var(--gold-line);
  background:
    radial-gradient(120% 130% at 8% 0%, rgba(196,30,58,.30), transparent 58%),
    radial-gradient(100% 120% at 100% 100%, rgba(212,175,55,.20), transparent 60%),
    linear-gradient(160deg, rgba(24,24,29,.94), rgba(8,8,10,.98));
  box-shadow:0 50px 90px -52px rgba(0,0,0,1);
  isolation:isolate;
}
.promo::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(212,175,55,.05) 22px 23px);
}
.promo__grid{ display:grid; gap:clamp(24px,3.4vw,48px); grid-template-columns:1fr; align-items:center; }
@media (min-width:920px){ .promo__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); } }

.bonus-tiers{ display:grid; gap:12px; }
.tier{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(120deg, rgba(28,28,33,.86), rgba(10,10,13,.9));
  transition:transform .45s var(--ease-out), border-color .4s, background .5s;
}
.tier:hover{ transform:translateX(6px); border-color:var(--gold-line); }
.tier__ico{
  width:46px; height:46px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(212,175,55,.24), rgba(196,30,58,.2));
  border:1px solid var(--gold-line); color:var(--gold-light);
}
.tier__txt b{ display:block; font-family:var(--font-display); font-size:1rem; }
.tier__txt span{ display:block; font-size:.86rem; color:var(--muted); margin-top:2px; }
.tier__amt{
  margin-left:auto; flex:none; font-family:var(--font-display); font-weight:800;
  font-size:1.06rem; font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   20. TESTIMONIALS
   -------------------------------------------------------------------------- */
.reviews{
  display:grid; gap:clamp(14px,1.8vw,22px); grid-template-columns:1fr;
}
@media (min-width:720px){ .reviews{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1060px){ .reviews{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.review{
  position:relative; padding:clamp(24px,2.6vw,32px);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(165deg, rgba(28,28,33,.72), rgba(10,10,13,.94));
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
  height:100%; display:flex; flex-direction:column;
}
.review:hover{
  transform:translateY(-6px); border-color:rgba(212,175,55,.3);
  box-shadow:0 34px 64px -36px rgba(0,0,0,1);
}
.review__quote{
  position:absolute; top:6px; right:18px; font-family:var(--font-display);
  font-size:5.5rem; line-height:1; color:rgba(212,175,55,.07); font-weight:800;
  pointer-events:none;
}
.stars{ display:flex; gap:3px; color:var(--gold); margin-bottom:14px; }
.review p{ color:var(--muted); font-size:.97rem; flex:1; }
.review__who{
  display:flex; align-items:center; gap:12px; margin-top:20px;
  padding-top:18px; border-top:1px solid rgba(255,255,255,.06);
}
.review__av{
  width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.95rem; color:#150F02;
  background:var(--grad-gold);
  box-shadow:0 8px 20px -10px rgba(212,175,55,.9);
}
.review__who b{ display:block; font-size:.92rem; }
.review__who span{ display:block; font-size:.78rem; color:var(--muted-2); }

/* --------------------------------------------------------------------------
   21. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq{ display:grid; gap:12px; }
.faq__item{
  border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(160deg, rgba(26,26,31,.72), rgba(10,10,13,.9));
  transition:border-color .4s, background .5s, box-shadow .45s;
}
.faq__item.is-open{
  border-color:var(--gold-line);
  box-shadow:0 26px 54px -36px rgba(0,0,0,1), 0 0 40px -26px rgba(212,175,55,.5);
}
.faq__q{
  width:100%; display:flex; align-items:flex-start; gap:16px; text-align:left;
  padding:19px clamp(18px,2vw,26px);
  font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.4;
  color:var(--text); transition:color .35s;
}
.faq__q:hover{ color:var(--gold-light); }
.faq__item.is-open .faq__q{ color:var(--gold-light); }
.faq__ico{
  margin-left:auto; flex:none; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; position:relative;
  border:1px solid var(--gold-line-2); background:rgba(212,175,55,.06);
  transition:transform .5s var(--ease-out), background .4s, border-color .4s;
}
.faq__ico::before,.faq__ico::after{
  content:''; position:absolute; background:var(--gold); border-radius:2px;
  transition:transform .45s var(--ease-out), opacity .3s;
}
.faq__ico::before{ width:11px; height:1.6px; }
.faq__ico::after{ width:1.6px; height:11px; }
.faq__item.is-open .faq__ico{ transform:rotate(180deg); background:rgba(212,175,55,.16); border-color:var(--gold-line); }
.faq__item.is-open .faq__ico::after{ transform:scaleY(0); opacity:0; }
.faq__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s var(--ease-io);
}
.faq__item.is-open .faq__a{ grid-template-rows:1fr; }
.faq__a > div{ overflow:hidden; }
.faq__a p{
  padding:0 clamp(18px,2vw,26px) 22px;
  color:var(--muted); font-size:.96rem;
}
.faq__a p + p{ padding-top:0; margin-top:-8px; }
.faq__q i{
  font-style:normal; font-size:.72rem; font-weight:700; color:var(--ruby);
  font-variant-numeric:tabular-nums; padding-top:4px; flex:none;
}

/* --------------------------------------------------------------------------
   22. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden; border-radius:clamp(20px,2.4vw,30px);
  padding:clamp(34px,5vw,74px) clamp(22px,4vw,60px);
  text-align:center;
  border:1px solid var(--gold-line);
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(196,30,58,.34), transparent 62%),
    linear-gradient(160deg, rgba(22,22,27,.96), rgba(8,8,10,.98));
  box-shadow:0 50px 100px -56px rgba(0,0,0,1);
  isolation:isolate;
}
.cta-band::before{
  content:''; position:absolute; inset:auto 0 -60% 0; height:120%; z-index:-1;
  background:conic-gradient(from 180deg at 50% 50%, transparent, rgba(212,175,55,.18), transparent 40%);
  animation:rayspin 26s linear infinite;
}
.cta-band h2{ max-width:20ch; margin-inline:auto; }
.cta-band p{ max-width:62ch; margin:18px auto 0; color:var(--muted); }
.cta-band__actions{
  margin-top:30px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.cta-band__note{
  margin-top:22px; font-size:var(--fs-xs); color:var(--muted-2); letter-spacing:.04em;
}

/* --------------------------------------------------------------------------
   23. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-head{
  position:relative; overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(40px,5vw,76px));
  padding-bottom:clamp(38px,4.6vw,64px);
}
.page-head::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.page-head__inner{ max-width:820px; }
.page-head h1{ margin-top:20px; }
.page-head p{ margin-top:20px; color:var(--muted); font-size:1.06rem; max-width:66ch; }
.crumbs{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:var(--fs-xs); color:var(--muted-2); letter-spacing:.08em; text-transform:uppercase;
}
.crumbs a:hover{ color:var(--gold-light); }
.crumbs span{ color:var(--gold); }

/* --------------------------------------------------------------------------
   24. PROSE (legal / long-form)
   -------------------------------------------------------------------------- */
.prose{ max-width:78ch; }
.prose h2{
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);
  margin-top:clamp(38px,4vw,58px); margin-bottom:16px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.07);
  scroll-margin-top:100px;
}
.prose > h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.prose h3{ margin-top:30px; margin-bottom:12px; color:var(--gold-light); font-size:1.12rem; }
.prose p{ color:var(--muted); margin-bottom:1.05em; }
.prose ul,.prose ol{ margin:0 0 1.3em; display:grid; gap:10px; }
.prose li{ position:relative; padding-left:26px; color:var(--muted); }
.prose ul li::before{
  content:''; position:absolute; left:2px; top:.65em; width:8px; height:8px;
  transform:rotate(45deg); background:var(--grad-gold); border-radius:2px;
}
.prose ol{ counter-reset:o; }
.prose ol li{ counter-increment:o; }
.prose ol li::before{
  content:counter(o); position:absolute; left:0; top:0;
  font-family:var(--font-display); font-size:.78rem; font-weight:800; color:var(--gold);
}
.prose strong{ color:var(--text); font-weight:700; }
.prose a{ color:var(--gold-light); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(212,175,55,.4); }
.prose a:hover{ text-decoration-color:var(--gold); }
.prose table{ margin-bottom:1.5em; font-size:.94rem; }
.prose th,.prose td{
  padding:12px 14px; text-align:left; border:1px solid rgba(255,255,255,.07); color:var(--muted);
}
.prose th{ background:rgba(212,175,55,.07); color:var(--gold-light); font-family:var(--font-display); font-size:.86rem; letter-spacing:.04em; }

.legal-layout{ display:grid; gap:clamp(28px,3.4vw,52px); grid-template-columns:1fr; }
@media (min-width:1000px){ .legal-layout{ grid-template-columns:minmax(0,270px) minmax(0,1fr); } }
.toc{ position:relative; }
@media (min-width:1000px){ .toc{ position:sticky; top:calc(var(--header-h) + 26px); align-self:start; } }
.toc__title{
  font-family:var(--font-display); font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin-bottom:16px;
}
.toc ol{ display:grid; gap:2px; counter-reset:t; }
.toc a{
  display:block; padding:9px 14px; border-radius:9px; font-size:.88rem;
  color:var(--muted); border-left:2px solid transparent;
  transition:color .3s, background .35s, border-color .3s, padding-left .3s;
}
.toc a:hover{ color:var(--text); background:rgba(255,255,255,.03); border-left-color:var(--gold-line); padding-left:18px; }
.toc a.is-active{ color:var(--gold-light); background:rgba(212,175,55,.08); border-left-color:var(--gold); }

.notice{
  padding:20px 22px; border-radius:14px; margin-bottom:28px;
  border:1px solid rgba(196,30,58,.32);
  background:linear-gradient(140deg, rgba(196,30,58,.14), rgba(10,10,13,.86));
  display:flex; gap:14px; align-items:flex-start;
}
.notice svg{ flex:none; color:var(--ruby); margin-top:3px; }
.notice p{ font-size:.92rem; color:var(--muted); margin:0; }
.notice b{ color:var(--text); }
.notice--gold{ border-color:var(--gold-line); background:linear-gradient(140deg, rgba(212,175,55,.12), rgba(10,10,13,.86)); }
.notice--gold svg{ color:var(--gold); }

/* --------------------------------------------------------------------------
   25. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{ display:grid; gap:clamp(20px,2.6vw,34px); grid-template-columns:1fr; }
@media (min-width:960px){ .contact-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); } }

.channel{
  position:relative; display:flex; gap:18px; align-items:flex-start;
  padding:clamp(20px,2.4vw,28px); border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(160deg, rgba(28,28,33,.72), rgba(10,10,13,.92));
  transition:transform .5s var(--ease-out), border-color .45s, box-shadow .5s;
  overflow:hidden;
}
.channel:hover{
  transform:translateY(-5px); border-color:rgba(42,171,238,.4);
  box-shadow:0 32px 60px -36px rgba(0,0,0,1), 0 0 40px -24px rgba(42,171,238,.55);
}
.channel--gold:hover{ border-color:var(--gold-line); box-shadow:0 32px 60px -36px rgba(0,0,0,1), 0 0 40px -24px rgba(212,175,55,.55); }
.channel__ico{
  width:52px; height:52px; border-radius:15px; flex:none; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(42,171,238,.28), rgba(42,171,238,.08));
  border:1px solid rgba(42,171,238,.35); color:#8FD6FF;
  transition:transform .5s var(--ease-out);
}
.channel:hover .channel__ico{ transform:scale(1.08) rotate(-5deg); }
.channel--gold .channel__ico{
  background:linear-gradient(150deg, rgba(212,175,55,.24), rgba(196,30,58,.16));
  border-color:var(--gold-line); color:var(--gold-light);
}
.channel h3{ font-size:1.05rem; margin-bottom:7px; }
.channel p{ color:var(--muted); font-size:.92rem; margin-bottom:14px; }
.channel__link{ font-size:.84rem; color:var(--gold-light); font-weight:700; word-break:break-all; }

.form-grid{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .form-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{
  font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); font-family:var(--font-display);
}
.field input,.field textarea,.field select{
  width:100%; padding:14px 16px; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  color:var(--text); font-size:.95rem;
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.field textarea{ min-height:140px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); opacity:.7; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold-line);
  background:rgba(212,175,55,.05);
  box-shadow:0 0 0 3px rgba(212,175,55,.12);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:44px;
}
.field select option{ background:#14141a; color:var(--text); }
.form-note{ font-size:var(--fs-xs); color:var(--muted-2); margin-top:6px; }
.form-status{
  margin-top:14px; padding:14px 16px; border-radius:12px; font-size:.9rem;
  border:1px solid var(--gold-line); background:rgba(212,175,55,.09); color:var(--gold-light);
  display:none;
}
.form-status.is-shown{ display:block; animation:menuIn .5s var(--ease-out) both; }

/* --------------------------------------------------------------------------
   26. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{
  position:relative; margin-top:clamp(50px,6vw,90px);
  border-top:1px solid var(--gold-line-2);
  background:linear-gradient(180deg, rgba(10,10,13,.6), rgba(6,6,8,.98));
  overflow:hidden;
}
.site-footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.footer__glow{
  position:absolute; width:min(720px,120%); height:340px; left:50%; top:-180px;
  transform:translateX(-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(196,30,58,.22), transparent 68%);
  filter:blur(40px);
}
.footer__top{
  display:grid; gap:clamp(28px,3.4vw,46px);
  padding-block:clamp(44px,5vw,72px);
  grid-template-columns:1fr;
}
@media (min-width:720px){ .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .footer__top{ grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); } }

.footer__brandcol .brand{ margin-bottom:20px; }
.footer__brandcol p{ color:var(--muted); font-size:.93rem; max-width:44ch; }
.footer__social{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.footer__col h4{
  font-size:.76rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.footer__col ul{ display:grid; gap:11px; }
.footer__col a{
  font-size:.92rem; color:var(--muted); display:inline-flex; align-items:center; gap:8px;
  transition:color .3s, transform .35s var(--ease-out);
}
.footer__col a::before{
  content:''; width:0; height:1px; background:var(--gold);
  transition:width .35s var(--ease-out);
}
.footer__col a:hover{ color:var(--gold-light); }
.footer__col a:hover::before{ width:12px; }

.footer__disclaimer{
  padding:clamp(22px,2.6vw,30px); border-radius:16px;
  border:1px solid rgba(196,30,58,.26);
  background:linear-gradient(150deg, rgba(196,30,58,.10), rgba(10,10,13,.86));
  margin-bottom:clamp(24px,3vw,36px);
}
.footer__disclaimer p{ font-size:.88rem; color:var(--muted); }
.footer__disclaimer p + p{ margin-top:10px; }
.footer__disclaimer strong{ color:var(--gold-light); }
.footer__badges{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.badge-18{
  display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid rgba(196,30,58,.5); background:rgba(196,30,58,.12);
  font-size:.74rem; font-weight:800; letter-spacing:.1em; color:#FFD9DF;
  font-family:var(--font-display);
}
.badge-18 b{
  display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--grad-ruby); color:#fff; font-size:.66rem;
}
.badge-plain{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.02);
  font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--muted);
}
.badge-plain svg{ color:var(--gold); }

.footer__keywords{
  padding-block:22px; border-top:1px solid rgba(255,255,255,.05);
  font-size:.76rem; color:var(--muted-2); line-height:2;
}
.footer__keywords b{ color:var(--muted); font-weight:600; }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center;
  padding-block:24px; border-top:1px solid rgba(255,255,255,.06);
  font-size:.84rem; color:var(--muted-2);
}
.footer__bottom nav{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-left:auto; }
.footer__bottom a:hover{ color:var(--gold-light); }

/* --------------------------------------------------------------------------
   27. FLOATING WIDGETS
   -------------------------------------------------------------------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:880;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(8,8,10,.93);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--gold-line);
  display:flex; align-items:center; gap:12px;
  transform:translateY(110%); transition:transform .55s var(--ease-out);
}
.sticky-cta.is-shown{ transform:none; }
@media (min-width:1080px){ .sticky-cta{ display:none; } }
.sticky-cta__txt{ flex:1; min-width:0; }
.sticky-cta__txt b{
  display:block; font-family:var(--font-display); font-size:.9rem; line-height:1.2;
}
.sticky-cta__txt span{ display:block; font-size:.7rem; color:var(--muted-2); margin-top:2px; }
.sticky-cta .btn{ flex:none; --btn-py:12px; --btn-px:20px; font-size:.86rem; }
body.has-sticky-cta{ padding-bottom:78px; }
@media (min-width:1080px){ body.has-sticky-cta{ padding-bottom:0; } }

/* Community widget (desktop) */
.tg-widget{
  position:fixed; right:20px; bottom:24px; z-index:870;
  display:none; align-items:center; gap:12px;
  padding:11px 18px 11px 12px; border-radius:var(--r-pill);
  background:linear-gradient(135deg, rgba(42,171,238,.96), rgba(20,122,176,.96));
  box-shadow:0 22px 48px -20px rgba(42,171,238,.8), inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff; font-weight:700; font-size:.88rem;
  transition:transform .45s var(--ease-out), box-shadow .45s;
  transform:translateY(24px); opacity:0;
}
@media (min-width:1080px){ .tg-widget{ display:flex; } }
.tg-widget.is-shown{ transform:none; opacity:1; }
.tg-widget:hover{ transform:translateY(-4px) scale(1.02); box-shadow:0 28px 56px -18px rgba(42,171,238,.95); }
.tg-widget__ico{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.18);
}
.tg-widget__ico::after{
  content:''; position:absolute; width:36px; height:36px; border-radius:50%;
  border:2px solid rgba(255,255,255,.55); animation:ripple 2.6s ease-out infinite;
}
@keyframes ripple{
  0%{ transform:scale(1); opacity:.7 }
  100%{ transform:scale(1.85); opacity:0 }
}
.tg-widget b{ display:block; line-height:1.2; }
.tg-widget span{ display:block; font-size:.7rem; font-weight:600; opacity:.85; }

/* Back to top */
.to-top{
  position:fixed; right:20px; bottom:96px; z-index:860;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gold-line); color:var(--gold-light);
  background:rgba(10,10,13,.86); backdrop-filter:blur(10px);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .45s, transform .45s var(--ease-out), background .4s, color .3s;
}
.to-top.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--grad-gold); color:#150F02; border-color:transparent; }
@media (max-width:1079px){ .to-top{ bottom:88px; right:14px; } }

/* Scroll progress rail */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:950; width:0%;
  background:var(--grad-gold);
  box-shadow:0 0 12px rgba(212,175,55,.8);
  transition:width .12s linear;
}

/* --------------------------------------------------------------------------
   28. REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
[data-reveal="left"]{ transform:translateX(-34px); }
[data-reveal="right"]{ transform:translateX(34px); }
[data-reveal="zoom"]{ transform:scale(.94); }
[data-reveal].is-in{ opacity:1; transform:none; }

.stagger > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.stagger.is-in > *{ opacity:1; transform:none; }
.stagger.is-in > *:nth-child(1){ transition-delay:.03s }
.stagger.is-in > *:nth-child(2){ transition-delay:.09s }
.stagger.is-in > *:nth-child(3){ transition-delay:.15s }
.stagger.is-in > *:nth-child(4){ transition-delay:.21s }
.stagger.is-in > *:nth-child(5){ transition-delay:.27s }
.stagger.is-in > *:nth-child(6){ transition-delay:.33s }
.stagger.is-in > *:nth-child(7){ transition-delay:.39s }
.stagger.is-in > *:nth-child(8){ transition-delay:.45s }
.stagger.is-in > *:nth-child(n+9){ transition-delay:.5s }

/* Hero entrance (plays on load) */
.hero-in{ opacity:0; transform:translateY(28px); }
body.is-ready .hero-in{
  animation:heroIn 1s var(--ease-out) forwards;
  animation-delay:calc(var(--hd, 0) * 1ms);
}
@keyframes heroIn{ to{ opacity:1; transform:none } }

/* Page transition veil */
.veil{
  position:fixed; inset:0; z-index:1200; pointer-events:none;
  background:var(--obsidian);
  opacity:1; transition:opacity .6s var(--ease-out);
}
body.is-ready .veil{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],.stagger > *,.hero-in{ opacity:1 !important; transform:none !important; }
}

/* --------------------------------------------------------------------------
   29. UTILITIES
   -------------------------------------------------------------------------- */
.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;
}
.skip-link{
  position:absolute; top:-60px; left:16px; z-index:1300;
  padding:12px 20px; border-radius:0 0 10px 10px;
  background:var(--grad-gold); color:#150F02; font-weight:700;
  transition:top .3s;
}
.skip-link:focus{ top:0; }
.mt-0{ margin-top:0 } .mt-4{ margin-top:var(--sp-4) } .mt-5{ margin-top:var(--sp-5) }
.mt-6{ margin-top:var(--sp-6) } .mt-7{ margin-top:var(--sp-7) } .mt-8{ margin-top:var(--sp-8) }
.mb-5{ margin-bottom:var(--sp-5) } .mb-6{ margin-bottom:var(--sp-6) }
.text-center{ text-align:center }
.flex-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center }
.flex-center{ justify-content:center }
.grid-2{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:1fr }
@media (min-width:760px){ .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.grid-3{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:1fr }
@media (min-width:640px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.grid-4{ display:grid; gap:clamp(14px,1.8vw,22px); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:1000px){ .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

/* Spec / requirement list */
.speclist{ display:grid; gap:0; }
.speclist li{
  display:flex; gap:16px; align-items:baseline; flex-wrap:wrap;
  padding:14px 2px; border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.94rem;
}
.speclist li:last-child{ border-bottom:0; }
.speclist b{
  min-width:170px; flex:none; font-family:var(--font-display);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
}
.speclist span{ color:var(--muted); flex:1; min-width:200px; }

/* Icon list with check marks */
.checks{ display:grid; gap:12px; }
.checks li{ display:flex; gap:13px; align-items:flex-start; font-size:.95rem; color:var(--muted); }
.checks svg{ flex:none; color:var(--gold); margin-top:4px; }
.checks b{ color:var(--text); }

/* Pull quote */
.pullquote{
  position:relative; padding:clamp(24px,3vw,38px) clamp(24px,3vw,42px);
  border-radius:var(--r-lg); border-left:3px solid transparent;
  border-image:var(--grad-gold) 1;
  background:linear-gradient(120deg, rgba(212,175,55,.09), rgba(10,10,13,.7));
  font-family:var(--font-display); font-size:clamp(1.06rem,.98rem + .6vw,1.32rem);
  line-height:1.5; color:var(--text); font-weight:600;
}
.pullquote cite{
  display:block; margin-top:16px; font-family:var(--font-body); font-style:normal;
  font-size:.84rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}

/* Timeline */
.timeline{ position:relative; display:grid; gap:clamp(18px,2.4vw,28px); padding-left:34px; }
.timeline::before{
  content:''; position:absolute; left:11px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg, var(--gold), rgba(212,175,55,.1));
}
.timeline__item{ position:relative; }
.timeline__item::before{
  content:''; position:absolute; left:-28px; top:7px; width:11px; height:11px;
  border-radius:50%; background:var(--grad-gold);
  box-shadow:0 0 0 4px rgba(212,175,55,.14), 0 0 16px rgba(212,175,55,.7);
}
.timeline__year{
  font-family:var(--font-display); font-size:.74rem; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ruby); margin-bottom:6px;
}
.timeline__item h3{ font-size:1.06rem; margin-bottom:8px; }
.timeline__item p{ color:var(--muted); font-size:.94rem; }

/* Comparison table wrapper (scrolls inside itself, never the page) */
.table-wrap{
  width:100%; overflow-x:auto; border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{ min-width:560px; margin:0; }
.table-wrap th,.table-wrap td{ border:0; border-bottom:1px solid rgba(255,255,255,.06); }
.table-wrap tr:last-child td{ border-bottom:0; }
.table-wrap td:first-child{ color:var(--text); font-weight:600; }

/* Highlight number row */
.metrics{ display:grid; gap:clamp(14px,1.8vw,20px); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:900px){ .metrics{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.metric{
  padding:22px 20px; border-radius:16px; text-align:center;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(165deg, rgba(28,28,33,.7), rgba(10,10,13,.92));
  transition:border-color .4s, transform .45s var(--ease-out);
}
.metric:hover{ border-color:var(--gold-line); transform:translateY(-5px); }
.metric b{ display:block; font-family:var(--font-display); font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.metric span{ display:block; margin-top:8px; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }