/* ===========================================
   ACCIO LAUNCHER — V2
   =========================================== */

@font-face { font-family:'Cinzel'; src:url('../assets/fonts/Cinzel-Variable.ttf') format('truetype'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Cinzel Decorative'; src:url('../assets/fonts/CinzelDecorative-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  --dark: #060611;
  --dark2: #0d0d1a;
  --dark3: #0f1528;
  --gold: #d4a017;
  --gold-l: #f0d060;
  --gold-d: #9a7209;
  --text: #e8e8e8;
  --muted: #9a9ab8;
  --border: #1a2744;
  --serif: 'Cinzel', Georgia, serif;
  --display: 'Cinzel Decorative', Georgia, serif;
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--dark); color:var(--text);
  font-family:Georgia,'Times New Roman',serif;
  line-height:1.7; overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:var(--gold); text-decoration:none; }

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--dark); }
::-webkit-scrollbar-thumb { background:var(--gold-d); border-radius:3px; }
html { scrollbar-width:thin; scrollbar-color:var(--gold-d) var(--dark); }

/* Focus visible */
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

/* --- Particles --- */
#particles { position:fixed; inset:0; pointer-events:none; z-index:10; }

/* --- Shared --- */
.section-heading {
  font-family:var(--display);
  font-size:clamp(28px,5vw,42px);
  color:var(--gold);
  text-align:center;
  letter-spacing:2px;
  margin-bottom:48px;
}
.section-heading--left { text-align:left; margin-bottom:24px; }

/* ===========================================
   NAV
   =========================================== */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:52px; display:flex; align-items:center;
  padding:0 32px; gap:20px;
  background:rgba(6,6,17,0);
  border-bottom:1px solid transparent;
  transition:background 0.4s, border-color 0.4s;
}
#nav.scrolled {
  background:rgba(6,6,17,0.92);
  border-bottom-color:rgba(26,39,68,0.4);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.nav-brand { font-family:var(--display); font-size:16px; color:var(--gold); white-space:nowrap; }
.nav-links { display:flex; gap:20px; margin-left:auto; }
.nav-links a { font-family:var(--serif); font-size:13px; color:var(--muted); transition:color 0.2s; }
.nav-links a:hover { color:var(--gold); }
.nav-dl {
  font-family:var(--serif); font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold);
  padding:5px 14px; transition:background 0.3s;
}
.nav-dl:hover { background:rgba(212,160,23,0.12); }
.nav-progress { position:absolute; bottom:0; left:0; height:2px; width:0; background:var(--gold); transition:width 0.08s linear; }

/* Burger */
.nav-burger {
  display:none; background:none; border:none; cursor:pointer;
  width:28px; height:20px; position:relative; margin-left:12px;
}
.nav-burger span {
  display:block; position:absolute; left:0; width:100%; height:2px;
  background:var(--gold); border-radius:1px;
  transition:transform 0.3s, opacity 0.3s;
}
.nav-burger span:nth-child(1) { top:0; }
.nav-burger span:nth-child(2) { top:9px; }
.nav-burger span:nth-child(3) { top:18px; }
.nav-burger.open span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }

/* ===========================================
   HERO
   =========================================== */
.hero {
  position:relative; height:100vh; min-height:550px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.5s ease;
}
.hero-video.playing { opacity:1; }
.hero-fade {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(6,6,17,0.25) 0%, var(--dark) 85%),
    linear-gradient(180deg, rgba(6,6,17,0.15) 0%, rgba(6,6,17,0.4) 50%, var(--dark) 100%);
  z-index:1;
}
.hero-content { position:relative; z-index:2; text-align:center; padding:24px; }
.hero h1 {
  font-family:var(--display);
  font-size:clamp(44px,9vw,88px);
  letter-spacing:6px;
  background:linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 50%, var(--gold-d) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  margin-bottom:16px;
}
.hero-sub {
  font-family:var(--serif);
  font-size:clamp(16px,2.4vw,22px);
  color:var(--text); opacity:0.85;
  letter-spacing:1px; line-height:1.6;
  margin-bottom:40px;
}
.hero-meta {
  margin-top:16px;
  font-family:var(--serif);
  font-size:13px; color:var(--muted); letter-spacing:0.5px;
}
.hero-sep { margin:0 6px; opacity:0.4; }
#dl-count { color:var(--gold-l); font-weight:700; }
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; opacity:0.5; animation:bob 2.5s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(6px); } }

/* Typing cursor */
#hero-typed::after {
  content:'|'; color:var(--gold); font-weight:300;
  animation:blink 0.8s step-end infinite;
  margin-left:2px;
}
#hero-typed.typed-done::after { display:none; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* Back to top */
.btt {
  position:fixed; bottom:24px; right:24px; z-index:90;
  width:40px; height:40px; border-radius:50%;
  background:rgba(6,6,17,0.85); border:1px solid var(--border);
  color:var(--gold); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 0.3s, background 0.3s, border-color 0.3s;
  backdrop-filter:blur(6px);
}
.btt.visible { opacity:1; pointer-events:auto; }
.btt:hover { background:rgba(212,160,23,0.12); border-color:var(--gold-d); }

/* CTA button */
.cta {
  display:inline-block; position:relative; overflow:hidden;
  border:2px solid var(--gold); background:transparent;
  color:var(--gold); font-family:var(--serif); font-weight:700;
  font-size:16px; letter-spacing:2px; text-transform:uppercase;
  padding:16px 44px;
  transition:background 0.3s, box-shadow 0.3s, color 0.3s, transform 0.3s;
}
.cta:hover {
  background:rgba(212,160,23,0.1);
  box-shadow:0 0 50px rgba(212,160,23,0.3), 0 0 100px rgba(212,160,23,0.1);
  color:var(--gold-l); transform:translateY(-2px);
  border-color:var(--gold-l);
}
/* Subtle pulse on hero CTA */
.hero .cta {
  animation:ctaPulse 3s ease-in-out infinite 2s;
}
@keyframes ctaPulse {
  0%,100% { box-shadow:0 0 0 rgba(212,160,23,0); }
  50% { box-shadow:0 0 24px rgba(212,160,23,0.15); }
}
.cta-shimmer {
  position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
  animation:shimmer 4s ease-in-out infinite;
}
@keyframes shimmer { 0%,100%{transform:translateX(-100%);} 50%{transform:translateX(100%);} }
.cta--kofi { font-size:15px; padding:14px 36px; border-color:var(--gold-d); }
.cta--kofi:hover { border-color:var(--gold); }

/* Hero staggered entrance */
.js .hero-stagger {
  opacity:0; transform:translateY(20px);
  animation:fadeUp 0.8s ease-out forwards;
}
.js .hero-stagger:nth-child(1) { animation-delay:0.3s; }
.js .hero-stagger:nth-child(2) { animation-delay:0.6s; }
.js .hero-stagger:nth-child(3) { animation-delay:0.9s; }
.js .hero-stagger:nth-child(4) { animation-delay:1.2s; }
@keyframes fadeUp { to{opacity:1;transform:translateY(0);} }

/* ===========================================
   LANG TOGGLE
   =========================================== */
.lang-toggle {
  font-family:var(--serif); font-size:11px; font-weight:700;
  letter-spacing:1px; color:var(--muted);
  background:none; border:1px solid var(--border);
  padding:4px 10px; cursor:pointer;
  transition:color 0.3s, border-color 0.3s;
  margin-left:4px; flex-shrink:0;
}
.lang-toggle:hover { color:var(--gold); border-color:var(--gold-d); }

/* Music toggle */
.nav-music {
  background:none; border:none; cursor:pointer;
  color:var(--muted); padding:4px;
  display:flex; align-items:center;
  transition:color 0.3s;
  flex-shrink:0;
}
.nav-music:hover { color:var(--gold); }
.nav-music .music-off { display:none; }
.nav-music.muted .music-on { display:none; }
.nav-music.muted .music-off { display:block; }
.nav-music.playing { color:var(--gold); }

/* ===========================================
   GAMES — CINEMATIC GRID
   =========================================== */
.games {
  padding:100px 0 80px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,160,23,0.03) 0%, transparent 40%),
    var(--dark);
}
.games-sub {
  text-align:center; color:var(--muted);
  font-size:17px; max-width:550px;
  margin:-32px auto 48px; line-height:1.6;
}

/* 4×2 grid */
.gcard-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  max-width:1000px;
  margin:0 auto;
  padding:0 24px;
}

/* Single card */
.gcard {
  position:relative;
  aspect-ratio:2/3;
  border-radius:10px; overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:transform 0.4s cubic-bezier(0.2,0.9,0.3,1), border-color 0.3s, box-shadow 0.3s;
}
.gcard:hover {
  transform:translateY(-6px) scale(1.02);
  border-color:var(--gold-d);
  box-shadow:0 16px 40px rgba(0,0,0,0.5), 0 0 24px rgba(212,160,23,0.08);
  z-index:2;
}
.gcard.active {
  border-color:var(--gold);
  box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(212,160,23,0.15);
  transform:scale(1.02);
  z-index:2;
}
.gcard img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s cubic-bezier(0.2,0.9,0.3,1);
}
.gcard:hover img { transform:scale(1.06); }

/* Overlay: year big + title */
.gcard-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding:14px;
  background:linear-gradient(0deg, rgba(6,6,17,0.88) 0%, rgba(6,6,17,0.2) 45%, transparent 100%);
  transition:background 0.3s;
}
.gcard:hover .gcard-overlay {
  background:linear-gradient(0deg, rgba(6,6,17,0.92) 0%, rgba(6,6,17,0.3) 50%, transparent 100%);
}
.gcard-year { display:none; }
.gcard-overlay h3 {
  font-family:var(--serif);
  font-size:clamp(12px,1.4vw,15px);
  color:var(--text);
  line-height:1.4;
}

/* Stagger reveals */
.js .gcard-grid .gcard[data-reveal]:nth-child(1) { transition-delay:0s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(2) { transition-delay:0.06s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(3) { transition-delay:0.12s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(4) { transition-delay:0.18s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(5) { transition-delay:0.24s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(6) { transition-delay:0.30s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(7) { transition-delay:0.36s; }
.js .gcard-grid .gcard[data-reveal]:nth-child(8) { transition-delay:0.42s; }

/* Inline detail panel (injected via JS) */
.gcard-detail {
  grid-column:1 / -1;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--gold-d);
  animation:detailOpen 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes detailOpen {
  from { opacity:0; max-height:0; margin-top:0; margin-bottom:0; }
  to { opacity:1; max-height:500px; margin-top:0; margin-bottom:0; }
}
.gcard-detail-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(12px) brightness(0.3);
  transform:scale(1.15);
}
.gcard-detail-content {
  position:relative; z-index:1;
  padding:36px 48px 36px 36px;
  background:linear-gradient(135deg, rgba(6,6,17,0.85), rgba(6,6,17,0.7));
}
.gcard-detail-close {
  position:absolute; top:14px; right:14px;
  background:none; border:none; color:var(--muted);
  cursor:pointer; padding:6px;
  transition:color 0.2s;
  z-index:2;
}
.gcard-detail-close:hover { color:var(--gold); }
.gcard-detail-year {
  font-family:var(--display);
  font-size:14px; color:var(--gold-d);
  letter-spacing:3px;
}
.gcard-detail-title {
  font-family:var(--serif);
  font-size:clamp(18px,2.5vw,24px);
  color:var(--gold);
  margin:6px 0 14px;
  letter-spacing:0.5px;
}
.gcard-detail-text {
  font-size:15px; color:var(--text);
  line-height:1.8; opacity:0.9;
  max-width:750px;
}
/* Arrow pointing up at the active card */
.gcard-detail-arrow {
  position:absolute; top:-8px;
  width:16px; height:16px;
  background:var(--gold-d);
  transform:rotate(45deg);
  transition:left 0.3s;
}

/* 2nd CTA after games */
.games-cta { text-align:center; margin-top:48px; }

/* ===========================================
   PREVIEW
   =========================================== */
.preview {
  padding:100px 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(212,160,23,0.03) 0%, transparent 50%),
    var(--dark3);
}
.preview-sub {
  text-align:center; color:var(--muted);
  font-size:17px; max-width:550px;
  margin:-32px auto 48px; line-height:1.6;
}

.preview-frame {
  max-width:960px; margin:0 auto;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--border);
  box-shadow:
    0 24px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(212,160,23,0.04);
  transition:border-color 0.4s, box-shadow 0.4s, transform 0.4s;
}
.preview-frame:hover {
  border-color:var(--gold-d);
  box-shadow:0 28px 90px rgba(0,0,0,0.7), 0 0 40px rgba(212,160,23,0.05);
  transform:translateY(-4px);
}
.preview-frame img {
  width:100%; display:block; border-radius:11px;
  aspect-ratio:16/9; object-fit:cover;
}

/* ===========================================
   BEFORE/AFTER
   =========================================== */
.compare { padding:100px 0; background:var(--dark); }
.compare-sub {
  text-align:center; color:var(--muted);
  font-size:17px; margin:-32px auto 48px; max-width:550px;
}
/* Compare tabs */
.compare-tabs {
  display:flex; justify-content:center; gap:8px;
  margin-bottom:24px; flex-wrap:wrap;
  padding:0 24px;
}
.compare-tab {
  font-family:var(--serif); font-size:13px;
  color:var(--muted); background:none; border:1px solid var(--border);
  padding:8px 18px; border-radius:6px; cursor:pointer;
  transition:color 0.3s, border-color 0.3s, background 0.3s;
}
.compare-tab:hover { color:var(--text); border-color:var(--gold-d); }
.compare-tab.active {
  color:var(--gold); border-color:var(--gold-d);
  background:rgba(212,160,23,0.08);
}

.slider {
  position:relative; max-width:900px; margin:0 auto;
  aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  border:1px solid var(--border); cursor:ew-resize;
  user-select:none; -webkit-user-select:none;
}
.slider-before, .slider-after { position:absolute; inset:0; }
.slider-before img, .slider-after img { width:100%; height:100%; object-fit:cover; }
.slider-after { clip-path:inset(0 0 0 50%); }
.slider-placeholder {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a1a2e,#16213e); font-family:var(--serif);
  font-size:16px; color:var(--muted);
}
.slider-placeholder--after { background:linear-gradient(135deg,#1a2744,#2c3e6b); color:var(--gold-d); }
.slider-handle {
  position:absolute; top:0; bottom:0; left:50%; width:3px;
  transform:translateX(-50%); z-index:5;
  display:flex; flex-direction:column; align-items:center; pointer-events:none;
}
.slider-hint {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-size:13px; color:var(--gold);
  background:rgba(6,6,17,0.7); padding:6px 16px; border-radius:4px;
  letter-spacing:0.5px; z-index:20; pointer-events:none;
  opacity:1; transition:opacity 0.4s;
}
.slider-hint.hidden { opacity:0; }
.slider-line { flex:1; width:2px; background:var(--gold); opacity:0.7; }
.slider-grip {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--gold); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 12px rgba(212,160,23,0.4);
}

/* ===========================================
   BOTTOM (FAQ + Support)
   =========================================== */
.bottom {
  padding:100px 0;
  background:
    radial-gradient(ellipse at 70% 100%, rgba(212,160,23,0.025) 0%, transparent 50%),
    var(--dark2);
}
.bottom-grid {
  max-width:1000px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px;
}
.bottom-col--support {
  display:flex; flex-direction:column;
}
.support-text { color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:24px; }
.support-links {
  margin-top:auto; padding-top:20px;
  display:flex; gap:20px;
}
.support-links a {
  display:flex; align-items:center; gap:6px;
  font-family:var(--serif); font-size:13px; color:var(--muted);
  transition:color 0.2s;
}
.support-links a:hover { color:var(--gold); }

/* FAQ */
.faq-item {
  border-bottom:1px solid var(--border);
}
.faq-item summary {
  font-family:var(--serif); font-size:15px; color:var(--text);
  padding:18px 0; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  transition:color 0.3s, padding-left 0.3s;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::marker { content:''; }
.faq-item summary::after {
  content:'+'; font-family:var(--serif); font-size:20px; color:var(--gold-d);
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--border);
  flex-shrink:0; transition:background 0.3s, color 0.3s, border-color 0.3s;
}
.faq-item[open] summary::after {
  content:'−'; background:rgba(212,160,23,0.1);
  border-color:var(--gold-d); color:var(--gold);
}
.faq-item summary:hover { color:var(--gold); padding-left:4px; }
.faq-item summary:hover::after { border-color:var(--gold-d); }
.faq-item p {
  font-size:14px; color:var(--muted); line-height:1.7;
  padding:0 0 18px; padding-right:36px;
}

/* ===========================================
   FOOTER
   =========================================== */
.footer {
  padding:32px 24px; text-align:center;
  border-top:1px solid var(--border);
  background:var(--dark);
}
.footer p, .footer .legal p { font-size:11px; color:var(--muted); opacity:0.6; line-height:1.6; }
.footer-oss { font-family:var(--serif); font-size:12px; color:var(--muted); opacity:0.7; margin-bottom:16px; }
.footer-oss a { color:var(--gold-d); transition:color 0.2s; }
.footer-oss a:hover { color:var(--gold); }
#version { font-family:var(--serif); font-size:12px; opacity:0.6; margin-bottom:12px; }
.legal { max-width:700px; margin:0 auto; }
.legal p + p { margin-top:8px; }

/* ===========================================
   REVEAL
   =========================================== */
.js [data-reveal] { opacity:0; transform:translateY(20px); transition:opacity 0.6s, transform 0.6s; }
.js [data-reveal].shown { opacity:1; transform:translateY(0); }


/* ===========================================
   COMMUNITY QUOTES
   =========================================== */
.quotes {
  padding:80px 0;
  background:var(--dark3);
}
.quotes-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  max-width:1000px; margin:0 auto; padding:0 24px;
}
.quote-card {
  padding:24px;
  background:linear-gradient(135deg, rgba(13,13,26,0.7), rgba(6,6,17,0.9));
  border:1px solid var(--border);
  border-radius:8px;
  transition:border-color 0.3s;
}
.quote-card:hover { border-color:var(--gold-d); }
.quote-card p {
  font-size:15px; font-style:italic; color:var(--text);
  line-height:1.6; margin-bottom:12px;
}
.quote-card cite {
  font-family:var(--serif); font-size:12px; color:var(--gold-d);
  font-style:normal; letter-spacing:0.5px;
}

/* ===========================================
   PREVIEW TABS
   =========================================== */
.preview-tabs {
  display:flex; justify-content:center; gap:8px;
  margin-bottom:20px; padding:0 24px;
}
.preview-tab {
  font-family:var(--serif); font-size:13px;
  color:var(--muted); background:none; border:1px solid var(--border);
  padding:7px 16px; border-radius:6px; cursor:pointer;
  transition:color 0.3s, border-color 0.3s, background 0.3s;
}
.preview-tab:hover { color:var(--text); border-color:var(--gold-d); }
.preview-tab.active {
  color:var(--gold); border-color:var(--gold-d);
  background:rgba(212,160,23,0.08);
}

/* ===========================================
   EASTER EGG
   =========================================== */
.ee-msg {
  position:fixed; inset:0; z-index:10000;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background:rgba(6,6,17,0.95);
  opacity:0; pointer-events:none;
  transition:opacity 0.6s;
}
.ee-msg.show { opacity:1; pointer-events:auto; }
.ee-msg p {
  font-family:var(--display); font-size:clamp(20px,4vw,36px);
  color:var(--gold); text-align:center; letter-spacing:2px;
}
.ee-msg small {
  font-family:var(--serif); font-size:14px;
  color:var(--muted); margin-top:16px; letter-spacing:1px;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media(max-width:768px) {
  .hero h1 { letter-spacing:2px; }
  .bottom-grid { grid-template-columns:1fr; gap:48px; }
  .preview-frame { margin:0 16px; }
  .preview-tabs { gap:6px; }
  .preview-tab { font-size:12px; padding:6px 12px; }
  .compare-tabs { gap:6px; }
  .compare-tab { font-size:11px; padding:6px 12px; }
  .quotes-grid { grid-template-columns:1fr; }
  .nav-burger { display:block; }
  .nav-links {
    display:none; position:fixed; inset:52px 0 0 0;
    background:rgba(6,6,17,0.97);
    flex-direction:column; align-items:center; justify-content:center;
    gap:28px; z-index:99;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:18px; }
  .nav-dl { margin-left:auto; font-size:10px; padding:4px 10px; }
  .cta { font-size:14px; padding:14px 32px; }
  .gcard-grid { grid-template-columns:repeat(2, 1fr); gap:10px; }
  .gcard-detail-content { padding:28px 36px 28px 20px; }
  .gcard-detail-text { font-size:14px; }
}

@media(max-width:480px) {
  .slider { aspect-ratio:4/3; }
  .gcard-detail-content { padding:20px 32px 20px 16px; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .js [data-reveal] { opacity:1; transform:none; transition:none; }
  .js .hero-content { animation:none; }
  .cta-shimmer { animation:none; }
  .hero .cta { animation:none; }
  .js .hero-stagger { animation:none; opacity:1; transform:none; }
  .scroll-hint { animation:none; }
  #particles { display:none; }
  #hero-typed::after { display:none; }
  .gcard { transition:none; }
  .gcard-detail { animation:none; opacity:1; max-height:500px; }
}