/* ============================================================
   GRIDCADE — design tokens
   ============================================================ */
:root{
  /* color */
  --void:      #08060F;
  --void-2:    #0E0B1C;
  --surface:   #140F26;
  --surface-2: #1C1533;
  --border:    #2C2347;

  --volt:      #C6FF3D;
  --volt-dim:  #8FCC1A;
  --plasma:    #FF2FB5;
  --circuit:   #33F7E0;
  --signal:    #8B5CF6;

  --ink:       #F4F2FF;
  --ink-dim:   #B8B2D6;
  --ink-mute:  #7A7398;

  /* type */
  --f-display: 'Chakra Petch', sans-serif;
  --f-body:    'Chakra Petch', sans-serif;
  --f-mono:    'Space Mono', monospace;

  /* scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --radius-s: 8px; --radius-m: 14px; --radius-l: 24px;
  --container: 1240px;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }

.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--space-5);
}
@media (min-width:768px){ .wrap{ padding-inline:var(--space-7); } }

.skip-link{
  position:absolute; left:var(--space-4); top:-60px;
  background:var(--volt); color:var(--void); padding:10px 16px;
  border-radius:var(--radius-s); font-weight:700; z-index:1000;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top:var(--space-4); }

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

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-display); font-weight:600; letter-spacing:.03em;
  font-size:15px; padding:12px 22px; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
  min-height:44px; white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.98); }

.btn-volt{
  background:var(--volt); color:var(--void);
  box-shadow:0 0 0 rgba(198,255,61,0);
}
.btn-volt:hover{
  box-shadow:0 0 28px rgba(198,255,61,.55);
  transform:translateY(-1px);
}

.btn-outline{
  background:transparent; color:var(--ink); border-color:var(--border);
}
.btn-outline:hover{ border-color:var(--circuit); color:var(--circuit); box-shadow:0 0 20px rgba(51,247,224,.25); }

.btn-ghost{ background:transparent; color:var(--ink-dim); padding:12px 14px; }
.btn-ghost:hover{ color:var(--ink); }

.btn-lg{ padding:15px 28px; font-size:16px; }

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  background:rgba(8,6,15,.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background var(--dur-med), border-color var(--dur-med);
}
.site-header.is-scrolled{
  background:rgba(8,6,15,.92);
  border-bottom-color:rgba(198,255,61,.15);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  position:relative; display:inline-flex; flex-shrink:0;
  width:36px; height:36px;
}
.brand-mark img{
  width:100%; height:100%; border-radius:50%; object-fit:cover;
  border:2px solid var(--volt); box-shadow:0 0 12px rgba(198,255,61,.45);
}
.brand-pulse{
  position:absolute; right:-2px; bottom:-2px; width:11px; height:11px;
  border-radius:50%; background:var(--plasma); border:2px solid var(--void);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.55; transform:scale(1.2);} }

.brand-word{
  font-family:var(--f-display); font-weight:700; font-size:22px;
  letter-spacing:.04em; color:var(--ink);
}

.main-nav ul{ display:flex; gap:var(--space-6); }
.main-nav a{
  font-family:var(--f-display); font-weight:600; font-size:15px;
  letter-spacing:.03em; color:var(--ink-dim);
  position:relative; padding:6px 2px;
  transition:color var(--dur-fast);
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--volt); transition:right var(--dur-med) var(--ease-out);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:var(--space-3); }
.header-signin{ display:none; }
@media (min-width:1024px){ .header-signin{ display:inline-flex; } }

.header-cta{ display:none; }
@media (min-width:480px){ .header-cta{ display:inline-flex; } }
@media (max-width:359px){ .brand-word{ font-size:18px; } }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:transparent; border:1px solid var(--border);
  border-radius:var(--radius-s); cursor:pointer;
}
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); margin-inline:auto; transition:transform var(--dur-fast), opacity var(--dur-fast); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width:1024px){ .main-nav{ display:block; } .nav-toggle{ display:none; } }
@media (max-width:1023px){ .main-nav{ display:none; } }

.mobile-nav{
  max-height:0; overflow:hidden; background:var(--void-2);
  border-bottom:1px solid var(--border);
  transition:max-height var(--dur-med) var(--ease-out);
}
.mobile-nav.open{ max-height:360px; }
.mobile-nav ul{ padding:var(--space-4) var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-4); }
.mobile-nav a{ font-family:var(--f-display); font-weight:600; font-size:17px; color:var(--ink-dim); min-height:44px; display:flex; align-items:center; }
.mobile-signin{ color:var(--volt); }

/* ============================================================
   Eyebrow / section titles
   ============================================================ */
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em;
  color:var(--circuit); text-transform:uppercase; margin:0 0 var(--space-3);
  display:flex; align-items:center; gap:8px;
}
.eyebrow-hero{ color:var(--volt); }

.live-dot{
  width:8px; height:8px; border-radius:50%; background:var(--volt);
  box-shadow:0 0 10px var(--volt);
  animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

.section-title{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px, 5vw, 48px); line-height:1.05; letter-spacing:.01em;
  margin:0;
}
.text-volt{ color:var(--volt); }
.text-plasma{ color:var(--plasma); }
.text-circuit{ color:var(--circuit); }

.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-5);
  margin-bottom:var(--space-7); flex-wrap:wrap;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; min-height:100dvh; display:flex; align-items:center;
  padding-block:calc(72px + var(--space-8)) var(--space-9);
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,.20), transparent 60%),
    linear-gradient(180deg, var(--void) 0%, var(--void-2) 100%);
}

.hero-sun{
  position:absolute; left:50%; top:18%; width:min(640px, 70vw); aspect-ratio:1/1;
  transform:translate(-50%,-30%);
  background:radial-gradient(circle, rgba(255,47,181,.55) 0%, rgba(198,255,61,.28) 45%, transparent 72%);
  filter:blur(30px);
  border-radius:50%;
  z-index:0;
}

.hero-grid-floor{
  position:absolute; left:0; right:0; bottom:0; height:56%;
  background-image:
    linear-gradient(rgba(51,247,224,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,247,224,.35) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(420px) rotateX(62deg) scale(2.1);
  transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(to top, black 15%, transparent 92%);
  mask-image:linear-gradient(to top, black 15%, transparent 92%);
  opacity:.65;
  z-index:0;
  animation:grid-scroll 6s linear infinite;
}
@keyframes grid-scroll{ from{ background-position:0 0; } to{ background-position:0 64px; } }
@media (prefers-reduced-motion: reduce){ .hero-grid-floor{ animation:none; } }

.hero-scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px);
  mix-blend-mode:overlay;
}

.hero-3d{
  position:absolute; right:2%; top:50%; transform:translateY(-50%);
  width:min(560px, 46vw); aspect-ratio:1/1; z-index:1;
  opacity:0; transition:opacity 900ms var(--ease-out);
}
.hero-3d.is-ready{ opacity:1; }
.hero-3d canvas{ width:100% !important; height:100% !important; }
@media (max-width:900px){
  .hero-3d{ position:relative; inset:auto; transform:none; width:min(380px,72vw); margin-inline:auto; margin-top:var(--space-6); }
}

.hero-inner{ position:relative; z-index:3; }
@media (min-width:900px){ .hero-inner{ max-width:640px; } }

.hero-title{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(48px, 9vw, 96px); line-height:.92; letter-spacing:.005em;
  margin:0 0 var(--space-5);
}
.hero-title .line{ display:block; color:var(--ink); }
.hero-title .line-outline{
  color:transparent; -webkit-text-stroke:2px var(--volt);
  text-shadow:0 0 34px rgba(198,255,61,.35);
}

.hero-sub{
  font-size:18px; color:var(--ink-dim); max-width:52ch; margin:0 0 var(--space-6);
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-8); }

.hero-stats{
  display:flex; flex-wrap:wrap; gap:var(--space-7) var(--space-8);
  margin:0; padding-top:var(--space-6); border-top:1px solid var(--border);
}
.hero-stats dt{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-mute); text-transform:uppercase; margin-bottom:4px; }
.hero-stats dd{ margin:0; font-family:var(--f-mono); font-size:26px; font-weight:700; color:var(--ink); }

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid var(--ink-mute); border-radius:14px;
  z-index:3; display:flex; justify-content:center; padding-top:8px;
}
.scroll-cue span{ width:4px; height:8px; background:var(--volt); border-radius:2px; animation:scrollcue 1.6s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ opacity:1; transform:translateY(0);} 70%{ opacity:0; transform:translateY(10px);} 100%{ opacity:0; } }
@media (max-width:640px){ .scroll-cue{ display:none; } }

/* reveal-on-load state (JS adds .is-in) */
[data-reveal]{ opacity:0; transform:translateY(18px); }
[data-reveal].is-in{ opacity:1; transform:none; transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{
  background:var(--surface); border-block:1px solid var(--border);
  overflow:hidden; padding-block:var(--space-3);
}
.marquee-track{
  display:flex; gap:var(--space-5); width:max-content;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.12em; color:var(--ink-mute);
  animation:marquee 26s linear infinite;
}
.marquee-track span:nth-child(odd){ color:var(--plasma); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; overflow-x:auto; } }

/* ============================================================
   Showcase / Carousel
   ============================================================ */
.showcase{ padding-block:var(--space-9); }

.carousel-controls{ display:flex; gap:var(--space-2); }
.carousel-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.carousel-btn:hover{ border-color:var(--volt); color:var(--volt); }
.carousel-btn:disabled{ opacity:.35; cursor:not-allowed; }

.carousel-viewport{ overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.carousel-viewport::-webkit-scrollbar{ display:none; }

.carousel-track{
  display:flex; gap:var(--space-5);
}

.game-card{
  scroll-snap-align:start; flex:0 0 auto;
  width:280px;
  border-radius:var(--radius-m); overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-med), box-shadow var(--dur-med);
}
@media (min-width:640px){ .game-card{ width:320px; } }

.game-card.is-clickable{ cursor:pointer; }
.game-card.is-clickable:focus-visible{ outline:2px solid var(--circuit); outline-offset:3px; }

.game-card:hover{
  transform:translateY(-6px);
  border-color:var(--art-a);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6), 0 0 24px -6px var(--art-a);
}

.game-art{
  position:relative; aspect-ratio:4/3;
  background:linear-gradient(155deg, var(--art-a) 0%, var(--art-b) 65%);
  display:flex; align-items:flex-end; padding:var(--space-4);
}
.game-art-glyph{
  position:absolute; right:14px; top:10px; font-size:34px; color:rgba(8,6,15,.35);
}
.game-tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; font-weight:700;
  background:rgba(8,6,15,.55); color:var(--ink); padding:5px 10px; border-radius:999px;
  backdrop-filter:blur(4px);
}

.game-body{ padding:var(--space-5); }
.game-body h3{ font-family:var(--f-display); font-size:21px; letter-spacing:.02em; margin:0 0 8px; text-transform:uppercase; }
.game-body p{ font-size:14px; color:var(--ink-dim); margin:0 0 var(--space-4); min-height:60px; }

.game-meta{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:13px; color:var(--ink-mute); padding-top:var(--space-3); border-top:1px solid var(--border); }
.game-meta span{ display:inline-flex; align-items:center; gap:5px; }
.game-meta svg{ color:var(--volt); }

.carousel-dots{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:var(--space-6); }
.carousel-dots button{
  width:8px; height:8px; border-radius:50%; background:var(--border); border:none; padding:0; cursor:pointer;
  transition:background var(--dur-fast), width var(--dur-fast);
}
.carousel-dots button.active{ background:var(--volt); width:22px; border-radius:5px; }

/* ============================================================
   Features / Bento
   ============================================================ */
.features{ padding-block:var(--space-9); background:var(--void-2); }

.bento{
  display:grid; gap:var(--space-5);
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .bento{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; }
  .bento-tile-lg{ grid-column:span 3; }
}
@media (min-width:1024px){
  .bento-tile-lg{ grid-column:span 1; grid-row:span 2; }
}

.bento-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:var(--space-6); position:relative; overflow:hidden;
  transition:border-color var(--dur-med), transform var(--dur-med);
}
.bento-tile:hover{ border-color:var(--signal); transform:translateY(-4px); }
.bento-tile::before{
  content:''; position:absolute; inset:-1px; z-index:0; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,.25), transparent 60%);
  transition:opacity var(--dur-med);
}
.bento-tile:hover::before{ opacity:1; }

.tile-icon{ color:var(--volt); margin-bottom:var(--space-4); position:relative; z-index:1; }
.bento-tile h3{ font-family:var(--f-display); font-size:22px; text-transform:uppercase; letter-spacing:.02em; margin:0 0 10px; position:relative; z-index:1; }
.bento-tile p{ color:var(--ink-dim); font-size:14.5px; margin:0; max-width:42ch; position:relative; z-index:1; }
.bento-tile-lg p{ max-width:30ch; }

/* ============================================================
   Lead capture form (hero)
   ============================================================ */
.lead-form{
  max-width:560px; margin:0 0 var(--space-6);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:var(--space-5);
}
.lead-form-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-4); }
.lead-field{ flex:1 1 200px; min-width:0; }
.lead-field label{
  display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:8px;
}
.lead-field input,
.lead-field textarea{
  width:100%; background:var(--void-2); border:1px solid var(--border); color:var(--ink);
  padding:12px 14px; border-radius:var(--radius-s); font-family:var(--f-body); font-size:15px; min-height:44px;
}
.lead-field textarea{ resize:vertical; min-height:88px; line-height:1.5; }
.lead-field input:focus,
.lead-field textarea:focus{ border-color:var(--circuit); outline:none; }
.lead-field-full{ width:100%; margin-bottom:var(--space-4); }
.lead-submit{ width:100%; }

.modal-title{
  font-family:var(--f-display); font-weight:700; font-size:22px; color:var(--ink);
  margin:0 0 var(--space-5); text-transform:none;
}
.modal-title span{ color:var(--volt); }
.modal-form{ max-width:none; margin:0; padding:0; background:none; border:none; }
.lead-status{ font-family:var(--f-mono); font-size:12.5px; color:var(--volt); min-height:18px; margin:var(--space-3) 0 0; text-align:center; }

.section-note{
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-mute); margin:var(--space-6) 0 0; text-align:center;
}

.tile-tag{
  display:inline-flex; margin-bottom:var(--space-4); position:relative; z-index:1;
  background:rgba(198,255,61,.12); color:var(--volt);
}

.case-tile{ padding-top:0; }
.case-video{
  display:block; position:relative; aspect-ratio:16/9; overflow:hidden;
  margin:0 calc(-1 * var(--space-6)) var(--space-5);
  border-radius:var(--radius-l) var(--radius-l) 0 0;
  background:var(--void-2);
}
.case-video img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-med) var(--ease-out), filter var(--dur-med);
}
.case-video::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,6,15,0) 40%, rgba(8,6,15,.55) 100%);
}
.case-video:hover img{ transform:scale(1.05); filter:brightness(.85); }
.play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; z-index:1;
  background:rgba(8,6,15,.55); backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast);
}
.case-video:hover .play-badge{ transform:translate(-50%,-50%) scale(1.1); background:var(--volt); color:var(--void); border-color:var(--volt); }
.play-badge svg{ margin-left:3px; }

/* ============================================================
   Document giveaway grid
   ============================================================ */
.doc-grid{
  display:grid; gap:var(--space-4); grid-template-columns:1fr; margin-bottom:var(--space-7);
  text-align:left;
}
@media (min-width:640px){ .doc-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .doc-grid{ grid-template-columns:repeat(4, 1fr); } }

.doc-card{
  display:flex; flex-direction:column; gap:var(--space-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:var(--space-5); transition:border-color var(--dur-med), transform var(--dur-med), box-shadow var(--dur-med);
}
.doc-card:hover{ border-color:var(--circuit); transform:translateY(-4px); box-shadow:0 14px 32px -16px rgba(0,0,0,.6), 0 0 20px -8px var(--circuit); }
.doc-icon{ font-size:28px; line-height:1; }
.doc-title{ font-family:var(--f-display); font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.3; flex:1; }
.doc-cta{ font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--volt); text-transform:uppercase; }
.doc-cta::after{ content:' →'; }

/* ============================================================
   Community
   ============================================================ */
.community{ padding-block:var(--space-9); }
.about-block{ max-width:78ch; }

.community-lede{ color:var(--ink-dim); margin:var(--space-4) 0 var(--space-6); font-size:16px; }

.stat-blocks{ display:flex; flex-wrap:wrap; gap:var(--space-7); margin:0; }
.stat-block dt{ font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--ink-mute); text-transform:uppercase; margin-bottom:4px; }
.stat-block dd{ margin:0; font-family:var(--f-mono); font-weight:700; font-size:32px; color:var(--sc, var(--volt)); text-shadow:0 0 24px color-mix(in srgb, var(--sc, var(--volt)) 55%, transparent); }

.social-row{ display:flex; gap:var(--space-3); margin-bottom:var(--space-7); }
.social-btn{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--ink-dim);
  transition:border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.social-btn:hover{ border-color:var(--plasma); color:var(--plasma); transform:translateY(-2px); }

.community-feed{
  display:flex; flex-direction:column; gap:var(--space-4);
  margin-top:var(--space-9); padding-top:var(--space-8); border-top:1px solid var(--border);
}
.feed-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:var(--space-4) var(--space-5); display:grid; grid-template-columns:auto 1fr; gap:var(--space-3);
  align-items:start;
}
.feed-card p{ margin:0; font-size:14.5px; color:var(--ink-dim); grid-column:2; }
.feed-card p strong{ color:var(--ink); }
.feed-card time{ grid-column:2; font-family:var(--f-mono); font-size:11.5px; color:var(--ink-mute); margin-top:4px; }
.feed-badge{ font-size:20px; line-height:1; }

.eyebrow-feed{ margin-bottom:var(--space-5); }

.feedback-track{ display:flex; gap:var(--space-4); }
.feedback-card{
  scroll-snap-align:start; flex:0 0 auto; width:240px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  padding:var(--space-5); text-align:center;
}
.feedback-thumb{
  width:100%; aspect-ratio:4/3; border-radius:var(--radius-s);
  background:linear-gradient(155deg, var(--surface-2), var(--void-2));
  display:flex; align-items:center; justify-content:center; font-size:32px;
  margin-bottom:var(--space-4); border:1px solid var(--border); overflow:hidden;
}
.feedback-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

.proof-viewport{ margin-top:var(--space-6); }
.proof-head{ margin-bottom:var(--space-5); align-items:center; }
.proof-head .eyebrow{ margin:0; }
.proof-track{ display:flex; gap:var(--space-4); }
.proof-card{
  scroll-snap-align:start; flex:0 0 auto; width:320px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m);
  overflow:hidden;
}
.proof-thumb{ width:100%; aspect-ratio:16/10; background:var(--void-2); display:flex; align-items:center; justify-content:center; }
.proof-thumb img{ width:100%; height:100%; object-fit:contain; }
.proof-card p{ margin:0; padding:var(--space-3) var(--space-4); font-family:var(--f-mono); font-size:11.5px; color:var(--ink-mute); border-top:1px solid var(--border); }
.feedback-card p{ margin:0; font-size:13px; color:var(--ink-mute); }

/* ============================================================
   Download CTA
   ============================================================ */
.download{
  position:relative; overflow:hidden;
  padding-block:var(--space-10);
  background:linear-gradient(180deg, var(--void-2) 0%, var(--void) 100%);
  text-align:center;
}
.download-grid-floor{
  position:absolute; left:0; right:0; top:0; height:70%;
  background-image:
    linear-gradient(rgba(255,47,181,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,47,181,.28) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(420px) rotateX(-62deg) scale(2.1);
  transform-origin:top center;
  -webkit-mask-image:linear-gradient(to bottom, black 15%, transparent 92%);
  mask-image:linear-gradient(to bottom, black 15%, transparent 92%);
  opacity:.5;
}
.download-inner{ position:relative; z-index:1; }

.download-title{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(34px, 6vw, 62px); line-height:1.02; margin:0 0 var(--space-5);
}
.download-title .line-outline{ color:transparent; -webkit-text-stroke:2px var(--plasma); text-shadow:0 0 34px rgba(255,47,181,.35); }

.download-sub{ color:var(--ink-dim); font-size:17px; max-width:52ch; margin:0 auto var(--space-7); }

.platform-row{ display:flex; flex-wrap:wrap; gap:var(--space-4); justify-content:center; margin-bottom:var(--space-6); }
.platform-btn{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  padding:13px 22px; border-radius:var(--radius-s); font-family:var(--f-display); font-weight:600; letter-spacing:.02em;
  min-height:44px; transition:border-color var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.platform-btn:hover{ border-color:var(--circuit); color:var(--circuit); transform:translateY(-2px); }

.download-notes{ display:flex; flex-wrap:wrap; gap:var(--space-5); justify-content:center; font-family:var(--f-mono); font-size:12.5px; color:var(--ink-mute); letter-spacing:.05em; }
.download-notes li::before{ content:'✓ '; color:var(--volt); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--void-2); border-top:1px solid var(--border); }
.footer-top{
  display:grid; gap:var(--space-8); padding-block:var(--space-9);
  grid-template-columns:1fr;
}
@media (min-width:768px){ .footer-top{ grid-template-columns:1.6fr repeat(3, 1fr); } }

.footer-brand p{ color:var(--ink-mute); font-size:14px; margin:var(--space-3) 0 var(--space-5); max-width:34ch; }

.newsletter label{ display:block; font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; color:var(--ink-dim); margin-bottom:var(--space-3); text-transform:uppercase; }
.newsletter-row{ display:flex; gap:8px; }
.newsletter-row input{
  flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); color:var(--ink);
  padding:12px 14px; border-radius:var(--radius-s); font-family:var(--f-body); font-size:14px; min-height:44px;
}
.newsletter-row input:focus{ border-color:var(--circuit); outline:none; }
.newsletter-row .btn{ padding:12px 16px; }
.newsletter-status{ font-family:var(--f-mono); font-size:12px; color:var(--volt); min-height:18px; margin:var(--space-2) 0 0; }

.footer-col h3{ font-family:var(--f-display); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin:0 0 var(--space-4); }
.footer-col ul{ display:flex; flex-direction:column; gap:var(--space-3); }
.footer-col a{ color:var(--ink-mute); font-size:14.5px; transition:color var(--dur-fast); }
.footer-col a:hover{ color:var(--circuit); }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding-block:var(--space-5); border-top:1px solid var(--border);
  font-size:13px; color:var(--ink-mute);
}
.footer-legal{ display:flex; gap:var(--space-5); }
.footer-legal a:hover{ color:var(--ink); }
.back-to-top{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color var(--dur-fast), color var(--dur-fast);
}
.back-to-top:hover{ border-color:var(--volt); color:var(--volt); }

/* ============================================================
   Modal
   ============================================================ */
.modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--space-5); }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(8,6,15,.82); backdrop-filter:blur(6px); }
.modal-panel{
  position:relative; z-index:1; width:min(760px, 100%);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l);
  padding:var(--space-6);
}
.modal-close{
  position:absolute; top:var(--space-4); right:var(--space-4);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-close:hover{ border-color:var(--plasma); color:var(--plasma); }
.modal-video{
  aspect-ratio:16/9; border-radius:var(--radius-m); background:var(--void-2);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:var(--space-6);
  color:var(--ink-mute); font-family:var(--f-mono); font-size:14px;
}