/* ══════════════════════════════════════════════════════════════
   CRIME77 HARDCORE — Design System
   Void noir · blood red · soul cyan · voxel brutalism
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TOKENS ─────────────────────────── */
:root{
  /* surfaces */
  --void:        #050506;
  --void-2:      #08080a;
  --obsidian:    #0b0b0e;
  --obsidian-2:  #121215;
  --obsidian-3:  #17171c;
  --line:        #232228;
  --line-soft:   #1a1a1f;

  /* ink */
  --bone:        #eae6e0;
  --ash:         #9b969d;
  --ash-dim:     #635f66;
  --ash-ghost:   #3a383e;

  /* blood */
  --blood:       #7a0c1e;
  --blood-bright:#d1122f;
  --blood-glow:  #ff2d43;
  --blood-ember: #ff6a3d;

  /* soul */
  --soul:        #49f2d6;
  --soul-dim:    #1f6e63;
  --soul-glow:   #7dfff0;

  /* gold */
  --gold:        #ffc46b;

  /* type */
  --f-display: 'Bebas Neue', 'Impact', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* rhythm */
  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 48px);
  --sect-y: clamp(88px, 12vw, 168px);

  /* motion */
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-io:  cubic-bezier(.65,0,.35,1);

  --nav-h: 72px;
}

/* ─────────────────────────── RESET ─────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; height:100vh; }
img,canvas,svg{ display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blood-bright); color:var(--bone); }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--blood),var(--obsidian-3));
  border:3px solid var(--void); border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background:var(--blood-bright); }

.mono{ font-family:var(--f-mono); }
.soul{ color:var(--soul); }
.blood{ color:var(--blood-glow); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:820px; }

/* ═══════════════════════ FIXED OVERLAYS ═══════════════════════ */
.fx-grain,.fx-scanlines,.fx-vignette,.fx-flash{
  position:fixed; inset:0; pointer-events:none;
}
.fx-grain{
  z-index:200; opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:grainShift .6s steps(3) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0) }
  33%{ transform:translate(-3%,2%) }
  66%{ transform:translate(2%,-3%) }
  100%{ transform:translate(0,0) }
}
.fx-scanlines{
  z-index:198; opacity:.35;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.fx-vignette{
  z-index:197;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 100%),
    radial-gradient(ellipse 160% 60% at 50% 0%, rgba(122,12,30,.06), transparent 60%);
}
.fx-flash{
  z-index:199; background:#cfe8ff; opacity:0;
  mix-blend-mode:screen; transition:opacity .09s linear;
}

/* scroll progress */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:210;
  background:rgba(35,34,40,.5); pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blood),var(--blood-glow) 60%,var(--soul));
  box-shadow:0 0 12px rgba(255,45,67,.8);
  transition:width .1s linear;
}

/* ─────────────────────── CURSOR-SYSTEM ─────────────────────── */
@keyframes spin{ to{ transform:rotate(360deg) } }

/* Nur auf echten Zeigergeräten mit genug Platz — Touch behält den
   Systemcursor und bekommt gar keine dieser Ebenen. */
.cursor-gl,.reticle,.cursor-fx{ display:none; }

@media (pointer:fine) and (min-width:900px){
  body,button,a,input,[data-tilt],.mtab{ cursor:none !important; }
  .cursor-gl,.reticle,.cursor-fx{ display:block; }
}

.cursor-gl{
  position:fixed; inset:0; z-index:204; pointer-events:none;
  width:100vw; height:100vh; mix-blend-mode:screen; opacity:.75;
}
.cursor-fx{ position:fixed; inset:0; z-index:206; pointer-events:none; overflow:hidden; }

.reticle{
  position:fixed; top:0; left:0; z-index:207; pointer-events:none;
  width:26px; height:26px; will-change:transform,width,height;
  color:var(--blood-bright);
  transition:color .3s;
}
.reticle[data-state="button"]{ color:var(--soul); }
.reticle[data-state="canvas"]{ color:var(--blood-glow); }
.reticle[data-state="drag"]  { color:var(--soul); }
.reticle[data-state="text"]  { color:var(--bone); }

/* Eckklammern — rasten auf Buttons ein */
.reticle__box{ position:absolute; inset:0; opacity:0; transition:opacity .25s; }
.reticle[data-state="button"] .reticle__box,
.reticle[data-state="canvas"] .reticle__box,
.reticle[data-state="drag"] .reticle__box{ opacity:1; }
.reticle__c{
  position:absolute; width:9px; height:9px;
  border-color:currentColor; border-style:solid; border-width:0;
  filter:drop-shadow(0 0 6px currentColor);
}
.reticle__c--tl{ top:0; left:0; border-top-width:1.5px; border-left-width:1.5px }
.reticle__c--tr{ top:0; right:0; border-top-width:1.5px; border-right-width:1.5px }
.reticle__c--bl{ bottom:0; left:0; border-bottom-width:1.5px; border-left-width:1.5px }
.reticle__c--br{ bottom:0; right:0; border-bottom-width:1.5px; border-right-width:1.5px }

/* Fadenkreuz */
.reticle__cross{ position:absolute; inset:0; opacity:1; transition:opacity .25s; }
.reticle[data-state="button"] .reticle__cross{ opacity:0; }
.reticle__h,.reticle__v{
  position:absolute; background:currentColor; opacity:.9;
  box-shadow:0 0 8px currentColor;
}
.reticle__h{ left:0; right:0; top:50%; height:1.5px; margin-top:-.75px;
  clip-path:polygon(0 0,38% 0,38% 100%,0 100%,0 0,100% 0,100% 0,62% 0,62% 100%,100% 100%); }
.reticle__v{ top:0; bottom:0; left:50%; width:1.5px; margin-left:-.75px;
  clip-path:polygon(0 0,100% 0,100% 38%,0 38%,0 62%,100% 62%,100% 100%,0 100%); }
.reticle[data-state="drag"] .reticle__v{ opacity:0; }
.reticle[data-state="text"] .reticle__h{ opacity:0; }
.reticle[data-state="text"] .reticle__v{ opacity:1; }

/* Scanring über 3D-Flächen */
.reticle__scan{
  position:absolute; inset:-8px; border-radius:50%;
  border:1px dashed currentColor; opacity:0;
  transition:opacity .3s; animation:spin 7s linear infinite;
}
.reticle[data-state="canvas"] .reticle__scan{ opacity:.45; }

.reticle__dot{
  position:absolute; top:50%; left:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor;
  opacity:.95; transition:opacity .25s;
}
.reticle[data-state="button"] .reticle__dot{ opacity:0; }

/* Klick: Schockwelle + Voxel-Splitter */
.cursor-shock{
  position:absolute; border-radius:50%; border:1.5px solid var(--blood-glow);
  transform:translate(-50%,-50%); box-shadow:0 0 22px rgba(255,45,67,.55);
  animation:shockOut 680ms cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes shockOut{
  0%{ width:6px; height:6px; opacity:.95 }
  100%{ width:140px; height:140px; opacity:0 }
}
.cursor-chip{
  position:absolute; background:var(--blood-glow); transform:translate(-50%,-50%);
  box-shadow:0 0 8px currentColor;
  animation:chipFly 860ms cubic-bezier(.22,.8,.3,1) forwards;
}
@keyframes chipFly{
  0%{ opacity:1; transform:translate(-50%,-50%) translate(0,0) rotate(0) }
  100%{ opacity:0; transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.3) }
}

/* ═══════════════════════════ PRELOADER ═══════════════════════════ */
.preloader{
  position:fixed; inset:0; z-index:400; background:var(--void);
  display:grid; place-items:center;
  transition:opacity .8s var(--e-out), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ width:min(420px,80vw); text-align:center; }
.preloader__glyphs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
  width:64px; margin:0 auto 34px;
}
.preloader__glyphs span{
  aspect-ratio:1; background:var(--obsidian-3);
  animation:blockPulse 1.5s var(--e-io) infinite;
}
.preloader__glyphs span:nth-child(1){ animation-delay:0s }
.preloader__glyphs span:nth-child(2){ animation-delay:.09s }
.preloader__glyphs span:nth-child(3){ animation-delay:.18s }
.preloader__glyphs span:nth-child(4){ animation-delay:.27s }
.preloader__glyphs span:nth-child(5){ animation-delay:.36s }
.preloader__glyphs span:nth-child(6){ animation-delay:.45s }
.preloader__glyphs span:nth-child(7){ animation-delay:.54s }
.preloader__glyphs span:nth-child(8){ animation-delay:.63s }
.preloader__glyphs span:nth-child(9){ animation-delay:.72s }
@keyframes blockPulse{
  0%,100%{ background:var(--obsidian-3); transform:scale(.86) }
  40%{ background:var(--blood-bright); box-shadow:0 0 18px rgba(255,45,67,.6); transform:scale(1) }
}
.preloader__title{
  font-family:var(--f-display); font-size:clamp(40px,7vw,64px);
  letter-spacing:.14em; line-height:1; color:var(--bone);
  text-shadow:0 0 30px rgba(255,45,67,.35);
}
.preloader__title span{ color:var(--blood-bright); }
.preloader__sub{
  margin-top:12px; font-family:var(--f-mono); font-size:10px;
  letter-spacing:.34em; color:var(--ash-dim); min-height:1.2em;
}
.preloader__track{
  margin-top:26px; height:2px; background:var(--line); overflow:hidden;
}
.preloader__bar{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--blood),var(--blood-glow),var(--soul));
  box-shadow:0 0 16px rgba(255,45,67,.7); transition:width .3s var(--e-out);
}
.preloader__meta{
  margin-top:12px; display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--ash-ghost);
}

/* ═══════════════════════════ NAV ═══════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:150;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-inline:var(--pad);
  transition:background .4s, backdrop-filter .4s, border-color .4s, height .4s;
  border-bottom:1px solid transparent;
}
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(5,5,6,.92), rgba(5,5,6,0));
  transition:opacity .4s;
}
.nav.is-stuck{
  height:60px;
  background:rgba(5,5,6,.72);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav.is-stuck::before{ opacity:0; }

.nav__brand{ display:flex; align-items:center; gap:12px; }
.nav__mark{
  display:grid; grid-template-columns:1fr 1fr; gap:2px; width:18px; height:18px;
}
.nav__mark i{ background:var(--ash-dim); transition:background .3s, transform .3s; }
.nav__mark i:nth-child(1){ background:var(--blood-bright); }
.nav__mark i:nth-child(4){ background:var(--soul); }
.nav__brand:hover .nav__mark i{ transform:scale(.72); }
.nav__brand:hover .nav__mark i:nth-child(1){ box-shadow:0 0 10px var(--blood-glow); }
.nav__word{
  font-family:var(--f-display); font-size:22px; letter-spacing:.16em; line-height:1;
}
.nav__word b{ color:var(--blood-bright); }

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__link{
  position:relative; display:flex; align-items:center; gap:7px;
  padding:9px 14px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ash);
  transition:color .25s;
}
.nav__link em{ font-style:normal; font-size:9px; color:var(--ash-ghost); transition:color .25s; }
.nav__link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--blood-bright); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--e-out);
}
.nav__link:hover{ color:var(--bone); }
.nav__link:hover em{ color:var(--blood-bright); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--bone); }
.nav__link.is-active em{ color:var(--soul); }
.nav__link.is-active::after{ transform:scaleX(1); background:var(--soul); }

.nav__aside{ display:flex; align-items:center; gap:9px; }
.pill{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border:1px solid var(--line); border-radius:999px;
  background:rgba(11,11,14,.66); backdrop-filter:blur(8px);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--ash);
  white-space:nowrap; transition:border-color .25s, color .25s, background .25s;
}
.pill b{ color:var(--bone); font-weight:500; }
.pill--btn:hover{ border-color:var(--soul); color:var(--soul); }
.pill__dot{
  width:6px; height:6px; border-radius:50%; background:var(--soul);
  box-shadow:0 0 9px var(--soul-glow); animation:pulseDot 2s var(--e-io) infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }

.eq{ display:flex; align-items:flex-end; gap:2px; height:10px; }
.eq i{ width:2px; height:3px; background:var(--ash-dim); transition:background .3s; }
.pill--btn.is-on .eq i{ background:var(--soul); animation:eqBounce .9s var(--e-io) infinite; }
.pill--btn.is-on .eq i:nth-child(2){ animation-delay:.15s }
.pill--btn.is-on .eq i:nth-child(3){ animation-delay:.3s }
.pill--btn.is-on .eq i:nth-child(4){ animation-delay:.45s }
@keyframes eqBounce{ 0%,100%{ height:3px } 50%{ height:10px } }

.nav__burger{ display:none; width:38px; height:38px; place-items:center; }
.nav__burger i{
  display:block; width:20px; height:1.5px; background:var(--bone); margin:4px auto;
  transition:transform .35s var(--e-out), opacity .25s;
}
.nav__burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.5px) rotate(45deg) }
.nav__burger[aria-expanded="true"] i:nth-child(2){ opacity:0 }
.nav__burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg) }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero{
  position:relative; width:100%; height:100svh; min-height:660px;
  overflow:hidden; background:var(--void);
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.hero__grade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 32%, rgba(122,12,30,.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 84% 78%, rgba(73,242,214,.05), transparent 58%),
    radial-gradient(ellipse 50% 40% at 12% 74%, rgba(255,106,61,.04), transparent 60%);
  mix-blend-mode:screen;
}
.hero__fade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 40% at 50% 46%, rgba(5,5,6,.62), rgba(5,5,6,.18) 62%, transparent 78%),
    linear-gradient(to bottom, rgba(5,5,6,.72) 0%, rgba(5,5,6,.22) 12%, transparent 26%),
    linear-gradient(to top, var(--void) 0%, rgba(5,5,6,.88) 16%, rgba(5,5,6,.32) 38%, transparent 56%);
}

.hero__rail{
  position:absolute; top:50%; z-index:3; pointer-events:none;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.42em;
  color:var(--ash-ghost); white-space:nowrap;
}
.hero__rail--left{ left:18px; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; }
.hero__rail--right{ right:18px; transform:translateY(-50%); writing-mode:vertical-rl; }

.hero__brackets{ position:absolute; inset:26px; z-index:3; pointer-events:none; }
.bk{ position:absolute; width:26px; height:26px; opacity:.5; }
.bk--tl{ top:0; left:0; border-top:1px solid var(--blood-bright); border-left:1px solid var(--blood-bright) }
.bk--tr{ top:0; right:0; border-top:1px solid var(--soul); border-right:1px solid var(--soul) }
.bk--bl{ bottom:0; left:0; border-bottom:1px solid var(--soul); border-left:1px solid var(--soul) }
.bk--br{ bottom:0; right:0; border-bottom:1px solid var(--blood-bright); border-right:1px solid var(--blood-bright) }

.hero__content{
  position:relative; z-index:4; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--nav-h) var(--pad) 0;
  will-change:transform,opacity;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--ash);
}
.eyebrow--center{ justify-content:center; }
.eyebrow--soul{ color:var(--soul); }
.eyebrow--blood{ color:var(--blood-bright); }
.eyebrow__line{ display:block; width:34px; height:1px; background:currentColor; opacity:.65; }

.hero__title{ margin:22px 0 0; line-height:.82; }
.hero__title-main{
  display:block; font-family:var(--f-display);
  font-size:clamp(66px,15.5vw,186px); letter-spacing:.012em; color:var(--bone);
  text-shadow:
    0 0 22px rgba(255,45,67,.5),
    0 0 70px rgba(122,12,30,.45),
    0 0 140px rgba(122,12,30,.3);
  position:relative;
}
/* RGB-split glitch */
.hero__title-main::before,
.hero__title-main::after{
  content:attr(data-glitch); position:absolute; inset:0; pointer-events:none;
  clip-path:inset(0 0 0 0);
}
.hero__title-main::before{ color:var(--blood-glow); mix-blend-mode:screen; animation:glitchA 7s steps(1) infinite; }
.hero__title-main::after{ color:var(--soul); mix-blend-mode:screen; animation:glitchB 7s steps(1) infinite; }
@keyframes glitchA{
  0%,88%,100%{ transform:translate(0,0); opacity:0 }
  89%{ transform:translate(-4px,2px); opacity:.85; clip-path:inset(12% 0 58% 0) }
  91%{ transform:translate(5px,-2px); opacity:.7; clip-path:inset(62% 0 14% 0) }
  93%{ transform:translate(-2px,0); opacity:.5; clip-path:inset(35% 0 40% 0) }
  95%{ opacity:0 }
}
@keyframes glitchB{
  0%,88%,100%{ transform:translate(0,0); opacity:0 }
  89.5%{ transform:translate(4px,-2px); opacity:.75; clip-path:inset(28% 0 44% 0) }
  92%{ transform:translate(-5px,1px); opacity:.6; clip-path:inset(8% 0 72% 0) }
  94%{ opacity:0 }
}
.hero__title-sub{
  display:block; margin-top:6px; font-family:var(--f-display);
  font-size:clamp(34px,8.4vw,92px); letter-spacing:.16em; color:var(--ash);
}
.hero__title-sub b{ font-weight:400; }

.hero__lede{
  margin-top:30px; max-width:540px; font-size:clamp(16px,1.55vw,19px);
  line-height:1.65; color:var(--ash);
}
.hero__lede em{ font-style:normal; color:var(--bone); }

.hero__actions{
  margin-top:38px; display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:center;
}

.countdown{
  margin-top:32px; display:flex; flex-direction:column; align-items:center; gap:12px;
}
.countdown__label{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:var(--blood-bright);
}
.countdown__units{
  display:flex; align-items:baseline; gap:clamp(10px,2.4vw,22px);
  padding:16px clamp(18px,4vw,32px);
  border:1px solid var(--line); background:rgba(122,12,30,.07);
  border-radius:2px;
}
.cd-unit{ display:flex; flex-direction:column; align-items:center; gap:4px; min-width:44px; }
.cd-unit b{
  font-family:var(--f-display); font-size:clamp(28px,5vw,42px);
  letter-spacing:.03em; color:var(--bone); line-height:1;
  text-shadow:0 0 18px rgba(255,45,67,.35);
  font-variant-numeric:tabular-nums;
}
.cd-unit span{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ash-ghost);
}
.cd-sep{ font-family:var(--f-display); font-size:clamp(22px,3.6vw,34px); color:var(--ash-dim); transform:translateY(-2px); }
.countdown.is-over .countdown__label{ color:var(--ash-dim); }
.countdown.is-over .cd-unit b{ color:var(--ash-dim); text-shadow:none; }

.hero__stats{
  margin-top:40px; display:flex; align-items:center; gap:clamp(14px,3vw,32px);
  flex-wrap:wrap; justify-content:center;
}
.hstat{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.hstat b{
  font-family:var(--f-display); font-size:26px; letter-spacing:.05em;
  color:var(--bone); line-height:1;
}
.hstat b em{ font-style:normal; font-size:.6em; color:var(--ash); }
.hstat span{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; color:var(--ash-ghost);
}
.hstat__sep{ width:1px; height:22px; background:var(--line); }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.36em; color:var(--ash-ghost);
}
.hero__scroll-line{
  width:1px; height:44px; background:linear-gradient(to bottom,var(--ash-dim),transparent);
  animation:scrollPulse 2s var(--e-io) infinite;
}
@keyframes scrollPulse{ 0%,100%{ opacity:.15 } 50%{ opacity:1 } }

.hero__hint{
  position:absolute; bottom:26px; right:var(--pad); z-index:4;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--ash-ghost);
  opacity:.6;
}

/* ─────────────────────────── BUTTONS ─────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:15px 30px; font-family:var(--f-mono); font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  overflow:hidden; transition:transform .25s var(--e-out), box-shadow .3s, background .3s, border-color .3s, color .3s;
  will-change:transform;
}
.btn--lg{ padding:19px 44px; font-size:14px; }
.btn--blood{
  background:var(--blood-bright); color:var(--bone);
  box-shadow:0 0 0 1px rgba(209,18,47,.4), 0 10px 40px -12px rgba(255,45,67,.7);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn--blood:hover{
  background:var(--blood-glow);
  box-shadow:0 0 0 1px rgba(255,45,67,.7), 0 0 60px rgba(255,45,67,.55);
}
.btn__shine{
  position:absolute; top:0; left:-120%; width:70%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn--blood:hover .btn__shine{ animation:shine .9s var(--e-out) forwards; }
@keyframes shine{ to{ left:150% } }
.btn__icon{ width:16px; display:grid; place-items:center; transition:transform .3s var(--e-out); }
.btn__icon svg{ width:16px; height:16px; }
.btn--blood:hover .btn__icon{ transform:translateX(5px); }

.btn--ghost{
  border:1px solid var(--line); background:rgba(11,11,14,.55);
  color:var(--ash); backdrop-filter:blur(8px);
}
.btn--ghost:hover{ border-color:var(--soul); color:var(--soul); background:rgba(31,110,99,.1); }
.btn__hint{ font-size:10px; letter-spacing:.16em; color:var(--ash-ghost); }
.btn.is-copied{ border-color:var(--soul); color:var(--soul); }
.btn.is-copied .btn__hint{ color:var(--soul); }

.dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.dot--soul{ background:var(--soul); box-shadow:0 0 9px var(--soul-glow); }
.dot--blood{ background:var(--blood-glow); box-shadow:0 0 9px var(--blood-glow); }

/* ═══════════════════════════ MARQUEE ═══════════════════════════ */
.marquee{
  position:relative; overflow:hidden; border-block:1px solid var(--line);
  background:var(--obsidian); padding:15px 0;
}
.marquee::before,.marquee::after{
  content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.marquee::before{ left:0; background:linear-gradient(90deg,var(--obsidian),transparent) }
.marquee::after{ right:0; background:linear-gradient(-90deg,var(--obsidian),transparent) }
.marquee__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
.marquee__track span{
  font-family:var(--f-display); font-size:22px; letter-spacing:.2em;
  color:var(--ash-dim); padding-right:28px; white-space:nowrap;
}
.marquee__track i{ color:var(--blood-bright); font-style:normal; padding-inline:12px; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ═══════════════════════════ STATUS ═══════════════════════════ */
.status{
  background:var(--obsidian); border-bottom:1px solid var(--line);
  padding:clamp(34px,5vw,56px) var(--pad);
}
.status__grid{
  max-width:var(--wrap); margin-inline:auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.scard{
  position:relative; background:var(--obsidian); padding:22px 22px 8px;
  display:flex; flex-direction:column; gap:8px; overflow:hidden;
  transition:background .35s; transform-style:preserve-3d;
}
.scard::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,45,67,.07),transparent 45%);
  opacity:0; transition:opacity .4s;
}
.scard:hover{ background:var(--obsidian-2); }
.scard:hover::after{ opacity:1; }
.scard header{ display:flex; align-items:center; justify-content:space-between; }
.scard__k{ font-family:var(--f-mono); font-size:9px; letter-spacing:.22em; color:var(--ash-dim); }
.scard__v{
  font-family:var(--f-display); font-size:clamp(38px,4.4vw,52px); line-height:1;
  letter-spacing:.02em; color:var(--bone);
}
.scard__v em{ font-style:normal; font-size:.42em; color:var(--ash-dim); margin-left:2px; }
.spark{ width:100%; height:46px; opacity:.85; }

/* ═══════════════════════ SECTION HEADINGS ═══════════════════════ */
.sect-head{ display:flex; flex-direction:column; gap:18px; max-width:700px; }
.sect-head--center{ align-items:center; text-align:center; margin-inline:auto; }
.sect-title{
  font-family:var(--f-display); font-size:clamp(42px,6.6vw,86px); line-height:.92;
  letter-spacing:.015em; color:var(--bone);
  text-shadow:0 0 44px rgba(234,230,224,.09);
}
.sect-title--center{ text-align:center; }
.lede{ font-size:clamp(15px,1.5vw,17.5px); line-height:1.72; color:var(--ash); }
.lede b{ color:var(--bone); font-weight:600; }
.lede--center{ text-align:center; margin-inline:auto; max-width:560px; }
.note{ font-size:11px; letter-spacing:.12em; color:var(--ash-ghost); }

/* ═══════════════════════ REVIVE SYSTEM ═══════════════════════ */
.revive{ position:relative; background:var(--obsidian); padding:var(--sect-y) 0; overflow:hidden; }
.revive__aura{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 8%, rgba(73,242,214,.10), transparent 58%),
    radial-gradient(ellipse 50% 60% at 88% 82%, rgba(122,12,30,.10), transparent 60%);
}
.revive .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(48px,7vw,80px); }
.revive__body{
  display:grid; gap:clamp(36px,6vw,64px);
  grid-template-columns:minmax(300px,1fr) minmax(300px,1fr); align-items:center;
}
.revive__text{ display:flex; flex-direction:column; gap:26px; }
.quote{
  position:relative; font-family:var(--f-display);
  font-size:clamp(24px,3vw,34px); line-height:1.16; letter-spacing:.01em;
  color:var(--soul);
  text-shadow:0 0 22px rgba(125,255,240,.55), 0 0 62px rgba(73,242,214,.32);
  padding-left:26px; border-left:2px solid var(--soul-dim);
}
.quote__mark{
  position:absolute; left:6px; top:-14px; font-size:52px; color:var(--soul-dim); opacity:.5;
}
.revive__facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px; padding-top:10px; border-top:1px solid var(--line); margin-top:4px;
}
.revive__facts li{ display:flex; flex-direction:column; gap:2px; }
.revive__facts b{
  font-family:var(--f-display); font-size:30px; color:var(--bone); line-height:1;
}
.revive__facts span{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; color:var(--ash-dim); }

.revive__stage{ display:grid; place-items:center; }
.ritual{
  position:relative; width:100%; max-width:440px; aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  border:1px solid rgba(35,34,40,.7);
  background:radial-gradient(circle at 50% 50%, rgba(73,242,214,.10), rgba(11,11,14,.5) 68%);
  transition:transform .15s var(--e-out), box-shadow .5s;
  box-shadow:0 0 70px -22px rgba(73,242,214,.35);
}
.ritual.is-charged{ box-shadow:0 0 130px -18px rgba(73,242,214,.85); }
.ritual__ring{ position:absolute; border-radius:50%; pointer-events:none; }
.ritual__ring--1{ inset:26px; border:1px solid rgba(31,110,99,.45); }
.ritual__ring--2{ inset:58px; border:1px solid rgba(31,110,99,.26); }
.ritual__ring--3{
  inset:8px; border:1px dashed rgba(73,242,214,.16); animation:spin 44s linear infinite;
}
.ritual__runes{
  position:absolute; inset:0; animation:spin 60s linear infinite reverse;
  color:var(--soul-dim); font-size:15px;
}
.ritual__runes span{
  position:absolute; left:50%; top:50%;
  transform-origin:0 0; opacity:.55;
}
.ritual__runes span:nth-child(1){ transform:rotate(0deg) translate(0,-46%) }
.ritual__runes span:nth-child(2){ transform:rotate(45deg) translate(0,-46%) }
.ritual__runes span:nth-child(3){ transform:rotate(90deg) translate(0,-46%) }
.ritual__runes span:nth-child(4){ transform:rotate(135deg) translate(0,-46%) }
.ritual__runes span:nth-child(5){ transform:rotate(180deg) translate(0,-46%) }
.ritual__runes span:nth-child(6){ transform:rotate(225deg) translate(0,-46%) }
.ritual__runes span:nth-child(7){ transform:rotate(270deg) translate(0,-46%) }
.ritual__runes span:nth-child(8){ transform:rotate(315deg) translate(0,-46%) }
.ritual__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.ritual__btn{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--soul); background:rgba(5,5,6,.6); border:1px solid var(--soul-dim);
  border-radius:999px; padding:9px 18px; backdrop-filter:blur(6px);
  transition:background .3s, border-color .3s, color .3s;
}
.ritual__btn:hover{ background:rgba(31,110,99,.5); border-color:var(--soul); color:var(--bone); }
.ritual__btn-pulse{
  position:absolute; inset:-1px; border-radius:999px; border:1px solid var(--soul);
  opacity:0; pointer-events:none;
}
.ritual__btn.is-firing .ritual__btn-pulse{ animation:btnPulse .7s var(--e-out); }
@keyframes btnPulse{ 0%{ opacity:.9; transform:scale(1) } 100%{ opacity:0; transform:scale(1.5) } }

/* steps */
.steps{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--line); border:1px solid var(--line);
}
.step{
  position:relative; background:var(--obsidian); padding:26px 22px 30px;
  display:flex; flex-direction:column; gap:10px; overflow:hidden;
  transition:background .4s;
}
.step::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom,var(--soul),transparent);
  transform:scaleY(0); transform-origin:top; transition:transform .55s var(--e-out);
}
.step:hover{ background:var(--obsidian-2); }
.step:hover::before{ transform:scaleY(1); }
.step__n{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; color:var(--soul-dim);
  transition:color .3s;
}
.step:hover .step__n{ color:var(--soul); }
.step h3{ font-family:var(--f-display); font-size:22px; letter-spacing:.02em; color:var(--bone); }
.step p{ font-size:13.5px; line-height:1.66; color:var(--ash); }

/* ═══════════════════════ HARDCORE RULES ═══════════════════════ */
.rules{ position:relative; background:var(--void); padding:var(--sect-y) 0; overflow:hidden; }
.rules__aura{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 44% at 50% 0%, rgba(122,12,30,.18), transparent 58%);
}
.rules .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(44px,6vw,72px); }

.bento{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.rule{
  position:relative; background:var(--obsidian); padding:30px 26px 34px;
  display:flex; flex-direction:column; gap:12px; overflow:hidden;
  transform-style:preserve-3d; transition:background .4s, transform .18s var(--e-out);
  min-height:210px;
}
.rule--wide{ grid-column:span 2; }
.rule::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(140deg,rgba(255,45,67,.12),transparent 46%);
  transition:opacity .45s;
}
.rule--soul::before{ background:linear-gradient(140deg,rgba(73,242,214,.13),transparent 46%); }
.rule:hover{ background:var(--obsidian-2); }
.rule:hover::before{ opacity:1; }
.rule__glare{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.09), transparent 62%);
  transition:opacity .3s;
}
.rule:hover .rule__glare{ opacity:1; }
.rule__ico{
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--blood-bright);
  background:rgba(5,5,6,.5); transition:color .35s, border-color .35s, box-shadow .35s;
}
.rule__ico svg{ width:21px; height:21px; }
.rule--soul .rule__ico{ color:var(--soul); }
.rule:hover .rule__ico{ border-color:currentColor; box-shadow:0 0 22px -6px currentColor; }
.rule h3{
  font-family:var(--f-display); font-size:clamp(20px,2.1vw,25px);
  letter-spacing:.02em; color:var(--bone); margin-top:4px;
}
.rule p{ font-size:14px; line-height:1.68; color:var(--ash); max-width:44ch; }
.rule__idx{
  position:absolute; right:16px; bottom:10px;
  font-family:var(--f-display); font-size:52px; line-height:1;
  color:var(--bone); opacity:.05; transition:opacity .4s, transform .5s var(--e-out);
}
.rule:hover .rule__idx{ opacity:.11; transform:translateY(-4px); }

/* ═══════════════════════ MODEL SHOWCASE ═══════════════════════ */
.showcase{ position:relative; background:var(--obsidian); padding:var(--sect-y) 0; overflow:hidden; }
.showcase::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 60% at 30% 50%, rgba(73,242,214,.07), transparent 62%);
}
.showcase .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; gap:clamp(40px,5vw,60px); }
.showcase__frame{
  display:grid; grid-template-columns:1.45fr .95fr; gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.showcase__viewport{
  position:relative; background:
    radial-gradient(ellipse at 50% 62%, rgba(73,242,214,.09), transparent 60%),
    linear-gradient(180deg,var(--void),#07070b);
  min-height:clamp(380px,52vh,560px); overflow:hidden;
  touch-action:none;
}
.showcase__viewport canvas{ position:absolute; inset:0; width:100%; height:100%; }
.showcase__hud{ position:absolute; inset:16px; pointer-events:none; }
.hud__corner{ position:absolute; width:20px; height:20px; opacity:.55; }
.hud__corner--tl{ top:0; left:0; border-top:1px solid var(--soul); border-left:1px solid var(--soul) }
.hud__corner--tr{ top:0; right:0; border-top:1px solid var(--soul); border-right:1px solid var(--soul) }
.hud__corner--bl{ bottom:0; left:0; border-bottom:1px solid var(--soul); border-left:1px solid var(--soul) }
.hud__corner--br{ bottom:0; right:0; border-bottom:1px solid var(--soul); border-right:1px solid var(--soul) }
.hud__scan{
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--soul),transparent);
  opacity:.5; animation:scanMove 5s var(--e-io) infinite;
}
@keyframes scanMove{ 0%,100%{ top:0; opacity:0 } 10%{ opacity:.6 } 50%{ top:100%; opacity:.6 } 60%{ opacity:0 } }
.showcase__drag{
  position:absolute; bottom:18px; left:18px;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.24em; color:var(--ash-dim);
  pointer-events:none; padding:6px 14px; border:1px solid var(--line-soft);
  border-radius:999px; background:rgba(5,5,6,.55); backdrop-filter:blur(6px);
}

.showcase__panel{ background:var(--obsidian); display:flex; flex-direction:column; }
.showcase__tabs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); }
.mtab{
  background:var(--obsidian); padding:15px 16px; text-align:left;
  display:flex; flex-direction:column; gap:3px;
  transition:background .3s, color .3s; position:relative;
}
.mtab::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--soul); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--e-out);
}
.mtab:hover{ background:var(--obsidian-2); }
.mtab.is-active{ background:var(--obsidian-2); }
.mtab.is-active::after{ transform:scaleX(1); }
.mtab__n{ font-family:var(--f-mono); font-size:9px; letter-spacing:.2em; color:var(--ash-ghost); }
.mtab.is-active .mtab__n{ color:var(--soul); }
.mtab__t{ font-family:var(--f-display); font-size:19px; letter-spacing:.06em; color:var(--ash); }
.mtab.is-active .mtab__t{ color:var(--bone); }

.showcase__info{
  padding:28px 26px 30px; display:flex; flex-direction:column; gap:14px; flex:1;
  border-top:1px solid var(--line);
}
.showcase__info h3{
  font-family:var(--f-display); font-size:clamp(30px,3.6vw,42px);
  letter-spacing:.05em; color:var(--bone); line-height:1;
}
.showcase__info p{ font-size:14px; line-height:1.7; color:var(--ash); }
.statbars{ display:flex; flex-direction:column; gap:11px; margin-top:4px; }
.statbar{ display:flex; flex-direction:column; gap:5px; }
.statbar__top{
  display:flex; justify-content:space-between;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; color:var(--ash-dim);
}
.statbar__track{ height:4px; background:var(--line); overflow:hidden; }
.statbar__fill{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--blood),var(--blood-glow));
  box-shadow:0 0 12px rgba(255,45,67,.55);
  transition:width 1s var(--e-out);
}
.statbar--soul .statbar__fill{
  background:linear-gradient(90deg,var(--soul-dim),var(--soul));
  box-shadow:0 0 12px rgba(73,242,214,.55);
}
.showcase__tag{ font-size:10px; letter-spacing:.24em; color:var(--blood-bright); margin-top:auto; }

/* ═══════════════════════════ BOARD ═══════════════════════════ */
.board{ background:var(--void); padding:var(--sect-y) 0; }
.board .wrap{ display:flex; flex-direction:column; gap:clamp(38px,5vw,56px); }

.podium{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:end; }
.pod{
  position:relative; background:var(--obsidian); border:1px solid var(--line);
  padding:24px 20px 22px; display:flex; flex-direction:column; gap:6px; overflow:hidden;
  transition:transform .4s var(--e-out), border-color .4s, box-shadow .4s;
}
.pod:hover{ transform:translateY(-6px); }
.pod__rank{ font-family:var(--f-display); font-size:44px; line-height:1; color:var(--ash-dim); }
.pod__name{ font-family:var(--f-mono); font-size:14px; color:var(--bone); letter-spacing:.02em; }
.pod__days{ font-family:var(--f-mono); font-size:11px; color:var(--ash-dim); letter-spacing:.1em; }
.pod__days b{ color:var(--ash); }
.pod__bar{
  position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--line);
}
.pod--1{
  padding-top:44px; border-color:rgba(209,18,47,.45);
  background:linear-gradient(180deg,rgba(122,12,30,.22),var(--obsidian) 55%);
  box-shadow:0 -8px 60px -24px rgba(255,45,67,.8);
}
.pod--1 .pod__rank{ color:var(--blood-glow); font-size:56px; text-shadow:0 0 26px rgba(255,45,67,.6); }
.pod--1 .pod__bar{ background:linear-gradient(90deg,var(--blood),var(--blood-glow)); box-shadow:0 0 16px rgba(255,45,67,.7); }
.pod--1 .pod__crown{
  position:absolute; top:14px; left:20px; width:24px; color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(255,196,107,.7));
}
.pod--2{ border-color:rgba(73,242,214,.3); }
.pod--2 .pod__rank{ color:var(--soul); }
.pod--2 .pod__bar{ background:linear-gradient(90deg,var(--soul-dim),var(--soul)); }
.pod--3 .pod__rank{ color:var(--ash); }
.pod--3 .pod__bar{ background:var(--ash-ghost); }

.table{ border:1px solid var(--line); }
.table__head,.row{
  display:grid; grid-template-columns:56px 1fr 110px 96px 90px; align-items:center; gap:14px;
  padding:14px 22px;
}
.table__head{
  background:var(--obsidian-2); border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em; color:var(--ash-ghost);
  text-transform:uppercase;
}
.row{
  position:relative; background:var(--obsidian); border-bottom:1px solid var(--line-soft);
  transition:background .3s, transform .3s var(--e-out); overflow:hidden;
}
.row:last-child{ border-bottom:none; }
.row:hover{ background:var(--obsidian-2); }
.row__meter{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,rgba(122,12,30,.28),transparent);
  transition:width 1.1s var(--e-out); pointer-events:none;
}
.row > span{ position:relative; z-index:1; }
.row__rank{ font-family:var(--f-display); font-size:24px; color:var(--ash-dim); line-height:1; }
.row:nth-child(1) .row__rank{ color:var(--blood-glow) }
.row:nth-child(2) .row__rank{ color:var(--soul) }
.row:nth-child(3) .row__rank{ color:var(--ash) }
.row__name{ font-family:var(--f-mono); font-size:14px; color:var(--bone); }
.row__v{ font-family:var(--f-mono); font-size:12px; color:var(--ash); letter-spacing:.05em; }
.row__v--dim{ color:var(--ash-dim); }
.row__empty{ font-family:var(--f-mono); font-size:13px; color:var(--ash-dim); text-align:center; padding:32px 0; }

/* ═══════════════════════════ VOICES ═══════════════════════════ */
.voices{ position:relative; background:var(--obsidian); padding:var(--sect-y) 0; overflow:hidden; }
.voices__aura{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 60% at 50% 50%, rgba(73,242,214,.08), transparent 62%);
}
.voices .wrap{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:26px; text-align:center;
}
.voices .wrap::before{
  content:'”'; position:absolute; top:-96px; left:50%; transform:translateX(-50%);
  font-family:var(--f-display); font-size:clamp(180px,26vw,300px); line-height:1;
  color:var(--soul); opacity:.055; pointer-events:none; z-index:-1;
}
.voices__quote{
  font-family:var(--f-display); font-size:clamp(23px,3.4vw,40px); line-height:1.22;
  letter-spacing:.012em; color:var(--bone); min-height:3.1em; margin:0;
  transition:opacity .45s var(--e-out), transform .45s var(--e-out);
  text-shadow:0 0 50px rgba(234,230,224,.1);
}
.voices__quote.is-out{ opacity:0; transform:translateY(14px); }
.voices__author{ font-size:12.5px; color:var(--ash-dim); letter-spacing:.1em; transition:opacity .45s; }
.voices__author.is-out{ opacity:0; }
.voices__dots{ display:flex; gap:10px; }
.voices__dots button{
  width:8px; height:8px; border-radius:50%; background:var(--line);
  transition:transform .25s var(--e-out), background .3s, box-shadow .3s;
}
.voices__dots button:hover{ transform:scale(1.5); }
.voices__dots button.is-active{
  background:var(--soul); box-shadow:0 0 12px var(--soul-glow); transform:scale(1.3);
}

/* ═══════════════════════════ COMMUNITY ═══════════════════════════ */
.community{ background:var(--void); padding:var(--sect-y) 0; }
.community .wrap{
  display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center;
}
.community__actions{ margin-top:6px; }

/* ═══════════════════════════ FAQ ═══════════════════════════ */
.faq{ background:var(--obsidian); padding:var(--sect-y) 0; }
.faq .wrap{ display:flex; flex-direction:column; gap:40px; }
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 0; text-align:left; font-size:16px; color:var(--bone);
  transition:color .3s, padding-left .35s var(--e-out);
}
.acc__q:hover{ color:var(--blood-glow); padding-left:8px; }
.acc__item.is-open .acc__q{ color:var(--blood-glow); }
.acc__sign{
  flex:none; width:22px; height:22px; display:grid; place-items:center;
  border:1px solid var(--line); position:relative; transition:border-color .3s, transform .4s var(--e-out);
}
.acc__sign::before,.acc__sign::after{
  content:''; position:absolute; background:currentColor; transition:transform .4s var(--e-out);
}
.acc__sign::before{ width:9px; height:1px; }
.acc__sign::after{ width:1px; height:9px; }
.acc__item.is-open .acc__sign{ border-color:var(--blood-bright); transform:rotate(180deg); }
.acc__item.is-open .acc__sign::after{ transform:scaleY(0); }
.acc__a{
  overflow:hidden; height:0; transition:height .45s var(--e-out);
}
.acc__a p{
  padding:0 0 24px; font-size:14.5px; line-height:1.75; color:var(--ash); max-width:64ch;
}

/* ═══════════════════════════ CTA ═══════════════════════════ */
.cta{ position:relative; background:var(--void); padding:var(--sect-y) 0 calc(var(--sect-y) * .7); overflow:hidden; }
.cta__aura{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 50%, rgba(122,12,30,.30), transparent 62%);
}
.cta__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:
    linear-gradient(rgba(35,34,40,.75) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,34,40,.75) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 20%, transparent 72%);
  animation:gridDrift 26s linear infinite;
}
@keyframes gridDrift{ to{ background-position:64px 64px } }
.cta .wrap{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:24px; text-align:center;
}
.cta__title{
  font-family:var(--f-display); font-size:clamp(36px,6.2vw,74px); line-height:1.02;
  letter-spacing:.012em; color:var(--bone);
  text-shadow:0 0 60px rgba(255,45,67,.28);
}
.cta__actions{ margin-top:8px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.cta__meta{ font-size:10px; letter-spacing:.24em; color:var(--ash-ghost); margin-top:6px; }

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
.foot{ background:var(--void); border-top:1px solid var(--line); padding:56px 0 30px; }
.foot__top{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px;
}
.foot__brand{ display:flex; flex-direction:column; gap:14px; max-width:330px; }
.foot__brand p{ font-size:12.5px; line-height:1.7; color:var(--ash-ghost); }
.foot__col{
  display:flex; flex-direction:column; gap:9px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.1em; color:var(--ash);
}
.foot__col a{ transition:color .25s; }
.foot__col a:hover{ color:var(--soul); }
.foot__k{ color:var(--ash-ghost); text-transform:uppercase; font-size:9.5px; letter-spacing:.24em; }
.foot__bottom{
  margin-top:42px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-family:var(--f-mono); font-size:10px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--ash-ghost);
}
.foot__tag{ color:var(--ash-dim); }

/* ═══════════════════════════ TOAST ═══════════════════════════ */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:220;
  transform:translate(-50%,26px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:10px;
  padding:13px 22px; background:rgba(11,11,14,.94); border:1px solid var(--soul-dim);
  backdrop-filter:blur(14px);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--soul);
  box-shadow:0 18px 60px -18px rgba(0,0,0,.9), 0 0 40px -14px rgba(73,242,214,.5);
  transition:opacity .4s var(--e-out), transform .4s var(--e-out);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ═══════════════════════ WEICHES SCROLLEN ═══════════════════════ */
/* Ohne .has-smooth (Touch, reduced-motion, JS aus) bleibt alles im
   normalen Fluss — der Wrapper ist dann ein reiner Durchreicher. */
#scroll-spacer{ display:none; }

.has-smooth{ scroll-behavior:auto; }
.has-smooth #scroll-wrap{
  position:fixed; top:0; left:0; width:100%;
  will-change:transform; backface-visibility:hidden;
}
.has-smooth #scroll-spacer{ display:block; width:100%; pointer-events:none; }
/* Die Neigung sitzt auf dem Inhalt, nicht auf den Sektionen — sonst
   bekämen die vollflächigen Hintergründe schiefe Kanten. */
.has-smooth section .wrap,
.has-smooth .status__grid,
.has-smooth .foot__top,
.has-smooth .foot__bottom{ will-change:transform; }

/* ═══════════════════════ REVEAL ANIMATIONS ═══════════════════════ */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity .95s var(--e-out), transform .95s var(--e-out);
  transition-delay:var(--rd,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:1080px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .rule--wide{ grid-column:span 2; }
  .showcase__frame{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:8px;
    background:rgba(5,5,6,.97); backdrop-filter:blur(20px);
    opacity:0; visibility:hidden; transition:opacity .4s, visibility .4s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; z-index:1; }
  .nav__link{ font-size:20px; padding:14px 20px; letter-spacing:.24em; }
  .nav__link em{ font-size:11px; }
  .nav__burger{ display:grid; }
  .pill--live{ display:none; }
  .revive__body{ grid-template-columns:1fr; }
  .hero__rail{ display:none; }
  .hero__hint{ display:none; }
  .table__head,.row{ grid-template-columns:40px 1fr 72px 62px; }
  .table__head span:nth-child(5),.row .row__v:nth-last-child(1){ display:none; }
}
@media (max-width:680px){
  :root{ --nav-h:62px; }
  .bento{ grid-template-columns:1fr; }
  .rule--wide{ grid-column:span 1; }
  .podium{ grid-template-columns:1fr; }
  .pod--1{ order:-1; padding-top:44px; }
  .foot__top{ grid-template-columns:1fr; }
  .status__grid{ grid-template-columns:repeat(2,1fr); }
  .showcase__tabs{ grid-template-columns:repeat(2,1fr); }
  .hero__stats{ gap:14px; }
  .hstat__sep{ display:none; }
  .marquee__track span{ font-size:17px; }
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .fx-grain,.fx-scanlines{ display:none; }
}