/* ==========================================================================
   DREAMBOOK — Cinematic Control-Room Luxury
   Table of contents:
   1. Reset & base
   2. Design tokens
   3. Layout utilities
   4. Buttons & form controls
   5. Atmosphere (background glows + grain)
   6. Preloader
   7. Navbar
   8. Hero
   9. Marquee / trust strip
   10. Stats
   11. Why Dreambook (features)
   12. Game categories
   13. Featured experience
   14. Editorial / insights
   15. CTA band
   16. FAQ
   17. Footer
   18. Scroll-reveal utility
   19. Responsive
   ========================================================================== */

/* ---------- 1. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- 2. Design tokens ---------- */
:root{
  /* backgrounds */
  --bg-0:#06060a;
  --bg-1:#0b0b13;
  --bg-2:#111120;
  --surface: rgba(246,248,255,0.045);
  --surface-strong: rgba(246,248,255,0.08);
  --surface-solid:#12121c;
  --border-glass: rgba(246,248,255,0.10);
  --border-glass-strong: rgba(246,248,255,0.20);

  /* brand hues */
  --blue:#4f8cff;
  --blue-2:#2563eb;
  --violet:#b06bff;
  --violet-2:#7c3aed;
  --gold-1:#fff3c4;
  --gold-2:#f2c94c;
  --gold-3:#d4af37;
  --gold-4:#8a6512;
  --silver-1:#eef1f5;
  --silver-2:#9aa4b2;

  /* text */
  --text-0:#f6f7fb;
  --text-1:#c1c6d4;
  --text-2:#8b93a6;

  /* gradients */
  --grad-gold: linear-gradient(135deg,var(--gold-1) 0%, var(--gold-2) 42%, var(--gold-3) 75%, var(--gold-4) 100%);
  --grad-gold-text: linear-gradient(95deg,var(--silver-1) 0%, var(--gold-1) 35%, var(--gold-2) 60%, var(--gold-3) 100%);
  --grad-blue-violet: linear-gradient(135deg,var(--blue) 0%, var(--violet-2) 100%);
  --grad-glass: linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.015));

  /* radii */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* motion */
  --ease: cubic-bezier(.19,.84,.35,1);
  --ease-out: cubic-bezier(.16,.9,.3,1);
  --dur-fast:.22s; --dur:.45s; --dur-slow:.8s;

  /* layout */
  --container: 1288px;
  --nav-h: 88px;
  --nav-h-scrolled: 68px;

  /* fonts */
  --font-display:'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'Chakra Petch', 'Consolas', monospace;
  --font-body:'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: light){ :root{ color-scheme: dark; } }

body{
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{ background: var(--gold-2); color:#1a1400; }

/* scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg-0); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--blue-2), var(--violet-2)); border-radius: var(--r-pill); border:2px solid var(--bg-0); }

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

h1,h2,h3,h4{ font-family: var(--font-display); color: var(--text-0); font-weight: 700; letter-spacing: -0.01em; }

.section-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 1.1rem;
}
.section-eyebrow::before{
  content:''; width: 26px; height: 1px; background: var(--grad-gold);
}

.section-head{ max-width: 680px; margin-bottom: 3.4rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-title{ font-size: clamp(1.9rem, 3.6vw, 3rem); line-height:1.08; text-transform: uppercase; }
.section-sub{ margin-top: 1.1rem; color: var(--text-2); font-size: 1.05rem; max-width: 56ch; }
.section-head.center .section-sub{ margin-inline:auto; }

.grad-text{
  background: var(--grad-gold-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-bv{
  background: linear-gradient(95deg, var(--blue) 0%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 3. Layout utilities ---------- */
.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.75rem); }
section{ position: relative; padding-block: clamp(3.5rem, 7vw, 6rem); }
.divider-glow{ height:1px; width:100%; background: linear-gradient(90deg, transparent, var(--border-glass-strong), transparent); }

.glass{
  background: var(--surface);
  background-image: var(--grad-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}

.gold-ring{ position:relative; }
.gold-ring::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(242,201,76,.55), rgba(255,255,255,.05) 35%, rgba(124,58,237,.35) 70%, rgba(242,201,76,.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none; opacity:.7; transition: opacity var(--dur) var(--ease);
}

/* ---------- 4. Buttons ---------- */
.btn{
  position: relative;
  display: inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1.05em 2em;
  min-height: 48px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
  white-space: nowrap;
}
.btn svg{ width:1.1em; height:1.1em; flex-shrink:0; }
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  color:#1a1400;
  background: var(--grad-gold);
  box-shadow: 0 8px 30px -8px rgba(242,201,76,.55);
}
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
}
.btn-primary:hover::before{ transform: translateX(120%); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px -10px rgba(242,201,76,.7); }

.btn-secondary{
  color: var(--text-0);
  background: var(--surface-strong);
  border-color: var(--border-glass-strong);
  backdrop-filter: blur(14px);
}
.btn-secondary:hover{
  border-color: rgba(79,140,255,.6);
  box-shadow: 0 0 0 1px rgba(79,140,255,.3), 0 14px 34px -14px rgba(79,140,255,.5);
  transform: translateY(-3px);
  color: var(--text-0);
}

.btn-ghost{
  color: var(--gold-2);
  background: transparent;
  padding: .8em 0;
  min-height: auto;
  gap:.5em;
}
.btn-ghost svg{ transition: transform var(--dur-fast) var(--ease-out); }
.btn-ghost:hover svg{ transform: translateX(5px); }

.btn-block{ width:100%; }

/* ---------- 5. Atmosphere ---------- */
.atmosphere{
  position: fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
}
.atmosphere span{
  position:absolute; border-radius:50%; filter: blur(110px); opacity:.55;
}
.atmosphere .a1{ width:52vw; height:52vw; top:-14vw; left:-10vw; background: radial-gradient(circle, var(--violet-2), transparent 70%); }
.atmosphere .a2{ width:46vw; height:46vw; top:20vh; right:-14vw; background: radial-gradient(circle, var(--blue-2), transparent 70%); }
.atmosphere .a3{ width:40vw; height:40vw; bottom:-10vw; left:18vw; background: radial-gradient(circle, rgba(242,201,76,.35), transparent 70%); }

.grain{
  position: fixed; inset:0; z-index: 40; pointer-events:none;
  opacity:.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- 6. Preloader ---------- */
#preloader{
  position: fixed; inset:0; z-index: 999;
  display:flex; align-items:center; justify-content:center; flex-direction: column; gap: 1.6rem;
  background: radial-gradient(circle at 50% 40%, #14101e 0%, var(--bg-0) 68%);
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
#preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-logo{ width: min(280px, 60vw); filter: drop-shadow(0 0 30px rgba(242,201,76,.35)); animation: preloaderPulse 2.2s ease-in-out infinite; }
@keyframes preloaderPulse{ 0%,100%{ opacity:.75; transform: scale(.98);} 50%{ opacity:1; transform: scale(1);} }
.preloader-bar{ width: min(220px, 50vw); height: 3px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); overflow:hidden; }
.preloader-bar-fill{ height:100%; width:0%; background: var(--grad-gold); border-radius: inherit; transition: width .25s var(--ease-out); }
.preloader-label{ font-family: var(--font-mono); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color: var(--text-2); }

/* ---------- 7. Navbar ---------- */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  height: var(--nav-h);
  display:flex; align-items:center;
  background: linear-gradient(to bottom, rgba(6,6,10,.55), rgba(6,6,10,0));
  border-bottom: 1px solid transparent;
  transition: height var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.navbar.scrolled{
  height: var(--nav-h-scrolled);
  background: rgba(9,9,15,.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--border-glass);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.7);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:100%; }
.nav-logo{ display:flex; align-items:center; height: 100%; }
.nav-logo img{ height: clamp(28px, 3.2vw, 36px); width:auto; transition: height var(--dur) var(--ease); }
.nav-links{ display:flex; align-items:center; gap: 2.4rem; }
.nav-links a{
  position:relative; font-family: var(--font-mono); font-size:.86rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--text-1); padding: .4rem 0;
  transition: color var(--dur-fast);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--grad-gold); transition: right var(--dur) var(--ease-out); border-radius: 2px;
}
.nav-links a:hover, .nav-links a.active{ color: var(--text-0); }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-actions{ display:flex; align-items:center; gap:1.1rem; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; border-radius: var(--r-sm);
  background: var(--surface); border:1px solid var(--border-glass);
}
.hamburger span{ width:20px; height:2px; margin-inline:auto; background: var(--text-0); border-radius:2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0 0 0 auto; width: min(340px, 84vw); z-index: 250;
  background: rgba(10,10,16,.97); backdrop-filter: blur(24px);
  border-left: 1px solid var(--border-glass);
  padding: 2rem 1.75rem;
  display:flex; flex-direction:column; gap: 2rem;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.mobile-menu.open{
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear 0s;
}
.mobile-menu-top{ display:flex; align-items:center; justify-content:space-between; }
.mobile-menu-top img{ height:30px; }
.mobile-close{ width:44px; height:44px; border-radius:50%; background: var(--surface); border:1px solid var(--border-glass); display:flex; align-items:center; justify-content:center; }
.mobile-links{ display:flex; flex-direction:column; gap:.3rem; }
.mobile-links a{
  font-family: var(--font-display); font-size:1.35rem; text-transform:uppercase; padding: .75rem 0;
  border-bottom:1px solid var(--border-glass); color: var(--text-1);
}
.mobile-links a:hover{ color: var(--gold-2); }
.menu-scrim{
  position: fixed; inset:0; z-index: 240; background: rgba(4,4,8,.6); backdrop-filter: blur(3px);
  opacity:0; visibility:hidden; transition: opacity var(--dur) var(--ease);
}
.menu-scrim.open{ opacity:1; visibility:visible; }

/* ---------- 8. Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: 4rem;
  overflow: hidden;
}
.hero .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items:center; }
.hero-copy{ position:relative; z-index:2; }
.hero-tag{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color: var(--gold-2); background: var(--surface); border:1px solid var(--border-glass-strong);
  padding:.55rem 1.1rem; border-radius: var(--r-pill); margin-bottom: 1.75rem;
}
.hero-tag .dot{ width:7px; height:7px; border-radius:50%; background:#33e07a; box-shadow:0 0 10px #33e07a; animation: pulseDot 1.8s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.hero-title{
  font-size: clamp(2.2rem, 4.8vw, 4.2rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 1.6rem;
  text-wrap: balance;
}
.hero-title .line{ display:block; word-break: keep-all; }
.hero-desc{ font-size: 1.14rem; color: var(--text-1); max-width: 46ch; margin-bottom: 2.4rem; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom: 3rem; }
.hero-meta{ display:flex; flex-wrap:wrap; gap: 2.2rem 2.6rem; }
.hero-meta-item{ display:flex; align-items:center; gap:.75rem; }
.hero-meta-item svg{ width:22px; height:22px; color: var(--gold-2); flex-shrink:0; }
.hero-meta-item strong{ display:block; font-family: var(--font-display); color: var(--text-0); font-size:1rem; line-height:1.2; }
.hero-meta-item span{ font-size:.82rem; color: var(--text-2); }

.hero-visual{
  position: relative; z-index:1;
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 620px; margin-inline:auto;
  display:flex; align-items:center; justify-content:center;
  perspective: 1200px;
}
.hero-visual-core{ width:100%; height:100%; will-change: transform; transform-style: preserve-3d; transition: transform .35s var(--ease-out); }
.hero-visual-core img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 30px 60px rgba(80,60,20,.35)); }

.light-beam{
  position:absolute; top:8%; left:50%; width:2px; height:64%;
  background: linear-gradient(to bottom, rgba(242,201,76,.55), transparent 75%);
  transform-origin: top center; pointer-events:none;
}
.light-beam.b2{ transform: translateX(-50%) rotate(22deg); opacity:.55; }
.light-beam.b3{ transform: translateX(-50%) rotate(-22deg); opacity:.4; }
.light-beam.b1{ transform: translateX(-50%); }

.float-card{
  position:absolute;
  padding: .95rem 1.2rem;
  display:flex; align-items:center; gap:.8rem;
  min-width: 168px;
  animation: floatY 6s ease-in-out infinite;
  will-change: transform;
}
.float-card .fc-icon, .hero-chip .fc-icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(242,201,76,.22), rgba(124,58,237,.18));
  border: 1px solid var(--border-glass-strong);
}
.float-card .fc-icon svg, .hero-chip .fc-icon svg{ width:19px; height:19px; color: var(--gold-2); }
.float-card strong, .hero-chip strong{ display:block; font-family: var(--font-display); font-size:1.05rem; color: var(--text-0); line-height:1.15; }
.float-card span, .hero-chip span{ font-size:.74rem; color: var(--text-2); text-transform:uppercase; letter-spacing:.06em; }
.fc-1{ top:4%; left:-6%; animation-delay:0s; }
.fc-2{ bottom:14%; left:-10%; animation-delay:1.4s; animation-duration:7s; }
.fc-3{ top:38%; right:-9%; animation-delay:.7s; animation-duration:6.5s; }
.fc-4{ bottom:-2%; right:6%; animation-delay:2.1s; animation-duration:7.5s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0px);} 50%{ transform: translateY(-16px);} }

.hero-chip-row{ display:none; }
.hero-chip{
  padding: .8rem 1.05rem;
  display:flex; align-items:center; gap:.7rem;
  min-width: 0;
}

.hero-particles{ position:absolute; inset:-10%; pointer-events:none; z-index:0; }
.hero-particles canvas{ width:100%; height:100%; display:block; }

.scroll-cue{
  position:absolute; bottom: 2.2rem; left:50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: var(--text-2); font-family: var(--font-mono); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .stick{ width:1px; height:34px; background: linear-gradient(to bottom, var(--gold-2), transparent); position:relative; overflow:hidden; }
.scroll-cue .stick::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:50%; background: var(--gold-1); animation: scrollDrop 2.1s ease-in-out infinite; }
@keyframes scrollDrop{ 0%{ top:-50%;} 60%,100%{ top:100%;} }

/* ---------- 9. Marquee / trust strip ---------- */
.marquee-section{ padding-block: 0; }
.marquee-wrap{
  border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass);
  background: linear-gradient(90deg, rgba(124,58,237,.08), rgba(79,140,255,.08));
  padding-block: 1.1rem;
  overflow: hidden;
  position: relative;
}
.marquee-wrap::before, .marquee-wrap::after{
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
}
.marquee-wrap::before{ left:0; background: linear-gradient(to right, var(--bg-0), transparent); }
.marquee-wrap::after{ right:0; background: linear-gradient(to left, var(--bg-0), transparent); }
.marquee-track{ display:flex; width:max-content; animation: marqueeScroll 42s linear infinite; }
.marquee-wrap:hover .marquee-track{ animation-play-state: paused; }
.marquee-group{ display:flex; }
.marquee-chip{
  display:flex; align-items:center; gap:.65rem; white-space:nowrap;
  font-family: var(--font-mono); font-size:.86rem; letter-spacing:.03em; color: var(--text-1);
  padding: .3rem .9rem; border-left: 1px solid var(--border-glass);
  margin-right: 2.75rem;
}
.marquee-chip .chip-dot{ width:7px; height:7px; border-radius:50%; background: var(--gold-2); box-shadow:0 0 8px var(--gold-2); flex-shrink:0; }
.marquee-chip strong{ color: var(--text-0); font-weight:600; }
@keyframes marqueeScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------- 10. Stats ---------- */
.stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.stat-card{
  padding: 2.2rem 1.8rem; text-align:center; position: relative;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur);
}
.stat-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px -22px rgba(79,140,255,.35); }
.stat-card svg{ width:30px; height:30px; color: var(--gold-2); margin-inline:auto; margin-bottom: 1rem; }
.stat-num{
  font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.7rem); font-weight:700;
  background: var(--grad-gold-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1;
}
.stat-label{ margin-top:.7rem; font-size:.86rem; color: var(--text-2); text-transform:uppercase; letter-spacing:.08em; font-family: var(--font-mono); }

/* ---------- 11. Why Dreambook ---------- */
.features-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.feature-card{
  padding: 2.4rem 2rem; position:relative; overflow:hidden;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur);
}
.feature-card::before{
  content:''; position:absolute; top:-40%; right:-30%; width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(124,58,237,.28), transparent 70%);
  opacity:0; transition: opacity var(--dur);
}
.feature-card:hover{ transform: translateY(-8px); }
.feature-card:hover::before{ opacity:1; }
.feature-icon{
  width:58px; height:58px; border-radius: var(--r-md); margin-bottom:1.6rem;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(242,201,76,.16), rgba(79,140,255,.14));
  border: 1px solid var(--border-glass-strong);
}
.feature-icon svg{ width:28px; height:28px; color: var(--gold-2); transition: transform .6s var(--ease-out); transform-origin: 50% 50%; }
.feature-card:hover .feature-icon{ border-color: rgba(242,201,76,.5); }
.feature-card:nth-child(1):hover .feature-icon svg{ transform: rotate(90deg); }
.feature-card:nth-child(2):hover .feature-icon svg{ animation: iconPulse .55s var(--ease-out); }
.feature-card:nth-child(3):hover .feature-icon svg{ transform: scale(1.12) translateY(-2px); }
.feature-card:nth-child(4):hover .feature-icon svg{ animation: iconTilt .6s var(--ease-out); }
@keyframes iconPulse{ 0%,100%{ transform:scale(1);} 45%{ transform:scale(1.22);} }
@keyframes iconTilt{ 0%,100%{ transform:rotate(0deg);} 30%{ transform:rotate(-8deg);} 65%{ transform:rotate(6deg);} }
.feature-card h3{ font-size:1.18rem; text-transform:uppercase; margin-bottom:.7rem; letter-spacing:.01em; }
.feature-card p{ font-size:.94rem; color: var(--text-2); }

/* ---------- 12. Game categories ---------- */
.cat-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.cat-card{
  position:relative; border-radius: var(--r-lg); overflow:hidden;
  aspect-ratio: 4/5; border:1px solid var(--border-glass);
  transform-style: preserve-3d; perspective: 1000px;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.cat-card:hover{ border-color: rgba(242,201,76,.5); box-shadow: 0 30px 70px -24px rgba(242,201,76,.3), 0 0 0 1px rgba(242,201,76,.25); }
.cat-card-inner{ position:relative; width:100%; height:100%; transition: transform .35s var(--ease-out); transform-style: preserve-3d; will-change: transform; }
.cat-card-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease-out);
}
.cat-card:hover .cat-card-img{ transform: scale(1.08); }
.cat-card-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(4,4,8,.94) 8%, rgba(4,4,8,.35) 55%, rgba(4,4,8,.05) 100%);
}
.cat-card-glow{
  position:absolute; inset:0; opacity:0; transition: opacity var(--dur);
  background: linear-gradient(160deg, rgba(242,201,76,.14), transparent 60%);
  pointer-events:none;
}
.cat-card:hover .cat-card-glow{ opacity:1; }
.cat-card-content{ position:absolute; left:0; right:0; bottom:0; padding: 1.6rem; z-index:2; }
.cat-card-num{ font-family: var(--font-mono); font-size:.75rem; letter-spacing:.2em; color: var(--gold-2); margin-bottom:.5rem; display:block; }
.cat-card h3{ font-size:1.4rem; text-transform:uppercase; margin-bottom:.4rem; }
.cat-card p{ font-size:.86rem; color: var(--text-1); margin-bottom:1.1rem; max-width: 30ch; }
.cat-card .btn{ padding:.7em 1.4em; font-size:.76rem; min-height:44px; }

/* ---------- 13. Featured experience ---------- */
.featured-wrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:center; }
.featured-art{ position:relative; }
.featured-art img{ width:100%; height:auto; border-radius: var(--r-xl); }
.featured-art-glow{
  position:absolute; inset: -10%; z-index:-1;
  background: radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 60%), radial-gradient(circle at 75% 70%, rgba(79,140,255,.3), transparent 60%);
  filter: blur(50px);
}
.featured-panel{ padding: 2.6rem clamp(1.6rem, 3vw, 3.2rem); }
.featured-panel h2{ font-size: clamp(1.7rem, 2.8vw, 2.4rem); text-transform:uppercase; line-height:1.12; margin-bottom:1.2rem; }
.featured-panel > p{ color: var(--text-2); margin-bottom: 2rem; }
.featured-list{ display:flex; flex-direction:column; gap:1.1rem; margin-bottom: 2.2rem; }
.featured-list li{ display:flex; align-items:flex-start; gap:.9rem; font-size:.98rem; color: var(--text-1); }
.featured-list svg{ width:22px; height:22px; flex-shrink:0; color: var(--gold-2); margin-top:.1rem; }

/* ---------- 14. Editorial ---------- */
.insight-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.insight-card{
  position: relative;
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
}
.insight-card:hover, .insight-card:focus-within{ transform: translateY(-6px); border-color: rgba(242,201,76,.4); box-shadow: 0 30px 60px -28px rgba(242,201,76,.25); }
.insight-thumb{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.insight-thumb::after{
  content:''; position:absolute; top:50%; left:50%; width:78%; height:78%; border-radius:50%;
  border:1px solid rgba(255,255,255,.12); transform: translate(-50%,-50%); z-index:0;
}
.insight-thumb svg{ width:56%; height:56%; opacity:.95; position:relative; z-index:1; transition: transform var(--dur) var(--ease-out); }
.insight-card:hover .insight-thumb svg{ transform: scale(1.06); }
.insight-thumb::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 40%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
}
.it-1{ background: linear-gradient(150deg, #241040 0%, #0c0a16 65%); }
.it-2{ background: linear-gradient(150deg, #0c2340 0%, #0a0c16 65%); }
.it-3{ background: linear-gradient(150deg, #2a1c08 0%, #100c0a 65%); }
.it-4{ background: linear-gradient(200deg, #1a1440 0%, #0a0a16 65%); }
.it-5{ background: linear-gradient(150deg, #17163a 0%, #0a0a16 65%); }
.it-6{ background: linear-gradient(200deg, #241708 0%, #0d0a08 65%); }
.it-1 svg{ color:#c084fc; } .it-2 svg{ color:#60a5fa; } .it-3 svg{ color:#f2c94c; }
.it-4 svg{ color:#8b93ff; } .it-5 svg{ color:#818cf8; } .it-6 svg{ color:#d4af37; }
.insight-tag{
  position:absolute; top:1rem; left:1rem; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  background: rgba(6,6,10,.55); border:1px solid var(--border-glass-strong); color: var(--gold-2);
  padding:.4rem .8rem; border-radius: var(--r-pill); backdrop-filter: blur(8px); z-index:2;
}
.insight-body{ padding: 1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.8rem; flex:1; }
.insight-body h3{ font-size:1.08rem; text-transform:none; line-height:1.3; }
.insight-link{ color: var(--text-0); transition: color var(--dur-fast); }
.insight-link::after{ content:''; position:absolute; inset:0; z-index:2; }
.insight-card:hover .insight-link, .insight-link:focus-visible{ color: var(--gold-2); }
.insight-body p{ font-size:.9rem; color: var(--text-2); flex:1; }
.insight-read{
  display:inline-flex; align-items:center; gap:.5em; align-self:flex-start;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--gold-2);
}
.insight-read svg{ width:15px; height:15px; transition: transform var(--dur-fast) var(--ease-out); }
.insight-card:hover .insight-read svg{ transform: translateX(4px); }
.insight-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color: var(--text-2); font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.04em; }

/* ---------- 15. CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; text-align:center; }
.cta-band-bg{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(60% 90% at 50% 20%, rgba(124,58,237,.32), transparent 65%), radial-gradient(50% 70% at 80% 90%, rgba(79,140,255,.28), transparent 65%), var(--bg-1);
  border-top: 1px solid var(--border-glass); border-bottom: 1px solid var(--border-glass);
}
.cta-particles{ position:absolute; inset:0; z-index:0; pointer-events:none; width:100%; height:100%; display:block; }
.cta-inner{ position:relative; z-index:2; max-width: 720px; margin-inline:auto; }
.cta-title{ font-size: clamp(2.1rem, 4.4vw, 3.6rem); text-transform:uppercase; line-height:1.05; margin-bottom:1.4rem; }
.cta-inner p{ font-size:1.1rem; color: var(--text-1); margin-bottom: 2.4rem; }
.cta-band .hero-ctas{ justify-content:center; margin-bottom:0; }

/* ---------- 16. FAQ ---------- */
.faq-wrap{ max-width: 860px; margin-inline:auto; display:flex; flex-direction:column; gap:1rem; }
.faq-item{ overflow:hidden; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  background:none; border:none; text-align:left; padding: 1.5rem 1.8rem;
  font-family: var(--font-display); font-size:1.02rem; color: var(--text-0); text-transform:uppercase; letter-spacing:.01em;
}
.faq-q .faq-icon{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; position:relative;
  background: var(--surface-strong); border:1px solid var(--border-glass-strong);
}
.faq-q .faq-icon::before, .faq-q .faq-icon::after{
  content:''; position:absolute; top:50%; left:50%; background: var(--gold-2);
  transform: translate(-50%,-50%);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur);
}
.faq-q .faq-icon::before{ width:14px; height:2px; }
.faq-q .faq-icon::after{ width:2px; height:14px; }
.faq-item.open .faq-icon::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item.open .faq-icon::before{ transform: translate(-50%,-50%) rotate(180deg); }
.faq-a{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); }
.faq-a-inner{ overflow:hidden; }
.faq-a-inner p{ padding: 0 1.8rem 1.7rem; color: var(--text-2); font-size:.98rem; max-width: 68ch; }
.faq-item.open .faq-a{ grid-template-rows: 1fr; }

/* ---------- 17. Footer ---------- */
.site-footer{ position:relative; padding-top: 5rem; border-top:1px solid var(--border-glass); overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3.5rem; }
.footer-brand img{ height:34px; width:auto; margin-bottom:1.3rem; }
.footer-brand p{ color: var(--text-2); font-size:.92rem; max-width:34ch; margin-bottom:1.6rem; }
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border-glass); transition: border-color var(--dur), transform var(--dur-fast), background var(--dur);
}
.footer-social svg{ width:18px; height:18px; color: var(--text-1); }
.footer-social a:hover{ border-color: var(--gold-2); transform: translateY(-3px); background: var(--surface-strong); }
.footer-col h4{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color: var(--text-2);
  margin-bottom:1.3rem;
}
.footer-col ul{ display:flex; flex-direction:column; }
.footer-col a{ display:flex; align-items:center; min-height:44px; color: var(--text-1); font-size:.94rem; transition: color var(--dur-fast); }
.footer-col a:hover{ color: var(--gold-2); }
.footer-bottom{
  border-top:1px solid var(--border-glass); padding-block:1.8rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.footer-bottom-links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-bottom-links a{ display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; color: var(--text-2); }
.footer-bottom-links a:hover{ color: var(--gold-2); }
.footer-copy{ font-size:.85rem; color: var(--text-2); }
.footer-disclaimer{
  border-top:1px solid var(--border-glass); padding-block:1.5rem;
  font-size:.8rem; line-height:1.7; color: var(--text-2);
}
.footer-disclaimer strong{ color: var(--text-1); }

/* ---------- 18. Scroll reveal ---------- */
section[id]{ scroll-margin-top: var(--nav-h-scrolled); }
.reveal{ opacity:1; transform:none; }
.js-gsap-ready .reveal{
  opacity:0; transform: translateY(36px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.js-gsap-ready .reveal.revealed{ opacity:1; transform:none; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1100px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ max-width: min(340px, 62vw); max-height: 38vh; margin-block: .5rem 0; }
  .hero-copy{ text-align:center; margin-inline:auto; }
  .hero-desc{ margin-inline:auto; }
  .hero-ctas{ justify-content:center; }
  .hero-meta{ justify-content:center; }
  .float-card{ display:none; }
  .light-beam{ display:none; }
  .hero-chip-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; margin-top: 1.4rem; }
  .featured-wrap{ grid-template-columns: 1fr; }
  .featured-art{ order:-1; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); }
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .insight-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-col.links-4{ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  .nav-links, .nav-actions .btn-primary{ display:none; }
  .hamburger{ display:flex; }
}

@media (max-width: 720px){
  :root{ --nav-h:76px; --nav-h-scrolled:64px; }
  section{ padding-block: 3.6rem; }
  .section-head{ margin-bottom: 2.4rem; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap:1rem; }
  .features-grid{ grid-template-columns: 1fr; }
  .cat-grid{ grid-template-columns: 1fr; }
  .insight-grid{ grid-template-columns: 1fr; }
  .featured-panel{ padding: 2rem 1.4rem; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:2rem 1.5rem; }
  .footer-brand{ grid-column: 1 / -1; }
  .hero-meta{ gap: 1.4rem 2rem; }
  .marquee-track{ gap: 1.8rem; }
  .cta-inner p{ font-size:1rem; }
}

@media (max-width: 460px){
  .footer-grid{ grid-template-columns: 1fr; }
  .stats-grid{ grid-template-columns: 1fr 1fr; }
  .hero-tag{ font-size:.68rem; }
  .btn{ padding: 1em 1.5em; font-size:.84rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .marquee-track{ animation: none; }
}