/* =============================================================
   PROJECT CHIMERA — NEO-NOIR GLITCHWAVE
   styles.css
   ============================================================= */

/* -------------------------------------------------------------
   00. TOKENS
   ------------------------------------------------------------- */
:root{
  /* base */
  --bg:        #050508;
  --bg-2:      #0a0a12;
  --bg-3:      #0f1020;
  --ink:       #e8f4ff;
  --ink-dim:   #7d8ba3;
  --ink-faint: #4a5568;

  /* neon */
  --cy:  #00f0ff;
  --mg:  #ff00a0;
  --gr:  #39ff14;
  --yl:  #ffe600;
  --vi:  #8b5cff;

  --cy-soft: rgba(0,240,255,.14);
  --mg-soft: rgba(255,0,160,.14);

  --line:  rgba(0,240,255,.16);
  --line-2:rgba(255,255,255,.07);

  /* type */
  --f-disp: 'Orbitron', 'Rajdhani', sans-serif;
  --f-mono: 'Share Tech Mono', 'Roboto Mono', monospace;
  --f-body: 'Rajdhani', 'Noto Sans JP', sans-serif;
  --f-jp:   'Noto Sans JP', 'Rajdhani', sans-serif;

  /* metrics */
  --wrap: 1240px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-hard: cubic-bezier(.16,1,.3,1);
}

/* -------------------------------------------------------------
   01. RESET
   ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-jp);
  font-weight:400;
  line-height:1.8;
  overflow-x:hidden;
  letter-spacing:.02em;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body.is-booting{ overflow:hidden; height:100vh; }
body.menu-open{ overflow:hidden; }
img,svg{ max-width:100%; display:block; }
h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }

::selection{ background:var(--mg); color:#fff; text-shadow:none; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#07070c; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--cy),var(--mg)); border:2px solid #07070c; }

:focus-visible{ outline:2px solid var(--cy); outline-offset:3px; }

/* helpers */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
section[id]{ scroll-margin-top:calc(var(--nav-h) + 8px); }
.dim{ color:var(--ink-dim); }
.ok{ color:var(--gr); }
.hl{
  color:#fff;
  background:linear-gradient(transparent 62%, rgba(255,0,160,.32) 62%);
  padding:0 .15em;
}
b,strong{ color:#fff; font-weight:700; }
.blink{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--gr); box-shadow:0 0 8px var(--gr); margin-right:.5em;
  animation:blink 1.4s steps(1) infinite; vertical-align:middle;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }

/* =============================================================
   02. BOOT SEQUENCE
   ============================================================= */
.boot{
  position:fixed; inset:0; z-index:9000;
  background:
    radial-gradient(ellipse at 50% 45%, #0d1424 0%, #050508 62%);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__frame{
  width:min(90vw,560px);
  border:1px solid var(--line);
  background:rgba(5,10,18,.72);
  padding:clamp(1.2rem,4vw,2.2rem);
  position:relative;
  box-shadow:0 0 60px rgba(0,240,255,.09), inset 0 0 40px rgba(0,240,255,.03);
}
.boot__frame::before,.boot__frame::after{
  content:''; position:absolute; width:18px; height:18px;
  border:2px solid var(--cy);
}
.boot__frame::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.boot__frame::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }

.boot__brand{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem; }
.boot__mark{ width:46px; height:46px; flex:none; }
.boot__mark .hexpath{
  fill:none; stroke:var(--cy); stroke-width:4;
  stroke-dasharray:400; stroke-dashoffset:400;
  animation:draw 2s var(--ease) forwards;
}
.boot__mark .hexpath--in{ stroke:var(--mg); stroke-width:3; animation-delay:.35s; }
.boot__mark .core{ fill:var(--cy); opacity:0; animation:pop .5s 1.4s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes pop{ from{opacity:0;transform:scale(.2);transform-origin:center} to{opacity:1;transform:scale(1)} }

.boot__name{
  font-family:var(--f-disp); font-weight:800; font-size:1.15rem;
  letter-spacing:.22em; color:#fff;
}
.boot__name em{ font-style:normal; color:var(--cy); font-size:.62em; margin-left:.5em; letter-spacing:.3em; }

.boot__log{
  font-family:var(--f-mono); font-size:.74rem; line-height:1.65;
  color:var(--gr); margin:0 0 1.2rem; height:9.2em;
  overflow:hidden; white-space:pre-wrap; word-break:break-all;
  text-shadow:0 0 6px rgba(57,255,20,.35);
}
.boot__log .warn{ color:var(--yl); }
.boot__log .err{ color:var(--mg); }

.boot__bar-track{
  height:5px; background:rgba(255,255,255,.07); overflow:hidden;
  border:1px solid var(--line);
}
.boot__bar-fill{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--cy),var(--mg));
  box-shadow:0 0 14px var(--cy);
  transition:width .18s linear;
}
.boot__bar-meta{
  display:flex; gap:.5rem; align-items:baseline;
  font-family:var(--f-mono); font-size:.72rem; margin-top:.5rem; color:var(--cy);
}
.boot__bar-meta .dim{ margin-left:auto; font-size:.68rem; }

.boot__enter{
  display:block; width:100%; margin-top:1.3rem; padding:.85rem;
  border:1px solid var(--cy); color:var(--cy);
  font-family:var(--f-disp); font-weight:700; letter-spacing:.3em; font-size:.8rem;
  background:rgba(0,240,255,.05);
  animation:enterIn .5s var(--ease) backwards;
  transition:background .25s, color .25s, box-shadow .25s;
}
.boot__enter:hover{ background:var(--cy); color:#04060a; box-shadow:0 0 30px rgba(0,240,255,.5); }
@keyframes enterIn{ from{opacity:0;transform:translateY(8px)} }

.boot__scan{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(0,240,255,.07) 48%,rgba(0,240,255,.22) 50%,rgba(0,240,255,.07) 52%,transparent 100%);
  height:38%; animation:bootScan 2.6s linear infinite;
}
@keyframes bootScan{ from{transform:translateY(-120%)} to{transform:translateY(320%)} }

/* =============================================================
   03. GLOBAL FX LAYERS
   ============================================================= */
.fx-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }

.fx-grain{
  position:fixed; inset:-150%; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 16%{transform:translate(-4%,-3%)} 33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)} 66%{transform:translate(5%,2%)} 83%{transform:translate(-2%,-4%)}
}

.fx-scanlines{
  position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0px,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px,rgba(0,0,0,.28) 4px);
}
.fx-vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.72) 100%);
}
.fx-glitchbar{
  position:fixed; left:0; right:0; height:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(0,240,255,.55),rgba(255,0,160,.55),transparent);
  mix-blend-mode:screen; opacity:0;
}
.fx-glitchbar.on{ opacity:1; height:2px; }

/* body-wide glitch burst */
body.glitching #main,body.glitching .nav{
  animation:bodyGlitch .22s steps(2) 2;
}
@keyframes bodyGlitch{
  0%{ transform:translate(0) }
  25%{ transform:translate(-3px,1px) skewX(.4deg); filter:hue-rotate(18deg) }
  50%{ transform:translate(2px,-1px) }
  75%{ transform:translate(-1px,0) skewX(-.3deg) }
}

/* =============================================================
   04. CUSTOM CURSOR
   ============================================================= */
.cursor{ position:fixed; top:0; left:0; z-index:8000; pointer-events:none; mix-blend-mode:screen; opacity:0; transition:opacity .3s; }
.cursor.ready{ opacity:1; }
.cursor__dot{
  position:absolute; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--cy); box-shadow:0 0 10px var(--cy);
}
.cursor__ring{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  transition:width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease);
}
.cursor__ring span{
  position:absolute; width:9px; height:9px; border:1px solid var(--cy); opacity:.85;
}
.cursor__ring span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.cursor__ring span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.cursor__ring span:nth-child(3){ bottom:0; right:0; border-left:0; border-top:0; }
.cursor__ring span:nth-child(4){ bottom:0; left:0; border-right:0; border-top:0; }
.cursor__label{
  position:absolute; left:26px; top:14px; font-family:var(--f-mono); font-size:.62rem;
  color:var(--mg); letter-spacing:.1em; white-space:nowrap; opacity:0; transition:opacity .2s;
}
.cursor.hot .cursor__ring{ width:56px; height:56px; margin:-28px 0 0 -28px; }
.cursor.hot .cursor__ring span{ border-color:var(--mg); width:13px; height:13px; }
.cursor.hot .cursor__label{ opacity:1; }
.cursor.click .cursor__ring{ width:22px; height:22px; margin:-11px 0 0 -11px; }
@media (hover:none),(pointer:coarse){ .cursor{ display:none !important; } }

/* =============================================================
   05. NAV
   ============================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:1000;
  display:flex; align-items:center; gap:1.5rem;
  padding:0 clamp(1rem,3vw,2rem);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(5,5,10,.9),rgba(5,5,10,.5));
  border-bottom:1px solid var(--line);
  transform:translateY(-100%);
  transition:transform .6s var(--ease-hard), background .3s;
}
body:not(.is-booting) .nav{ transform:none; }
.nav.scrolled{ background:rgba(5,5,10,.94); box-shadow:0 8px 40px rgba(0,0,0,.6); }

.nav__logo{ display:flex; align-items:center; gap:.6rem; flex:none; }
.nav__logo svg{ width:26px; height:26px; fill:none; stroke:var(--cy); stroke-width:6; filter:drop-shadow(0 0 6px rgba(0,240,255,.6)); }
.nav__logo svg circle{ fill:var(--mg); stroke:none; }
.nav__logo span{ font-family:var(--f-disp); font-weight:800; font-size:.9rem; letter-spacing:.18em; }
.nav__logo em{ font-style:normal; color:var(--cy); font-size:.7em; letter-spacing:.22em; }

.nav__links{ display:flex; gap:.35rem; margin-left:auto; }
.nav__links a{
  position:relative; padding:.5rem .85rem;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em;
  color:var(--ink-dim); transition:color .25s;
}
.nav__links a::before{
  content:attr(data-idx); position:absolute; top:-.1rem; left:.2rem;
  font-size:.55rem; color:var(--mg); opacity:0; transition:opacity .25s, transform .25s;
  transform:translateY(4px);
}
.nav__links a::after{
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.25rem; height:1px;
  background:var(--cy); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease-hard);
}
.nav__links a:hover,.nav__links a.active{ color:#fff; }
.nav__links a:hover::before,.nav__links a.active::before{ opacity:1; transform:none; }
.nav__links a:hover::after,.nav__links a.active::after{ transform:scaleX(1); }
.nav__links a.active{ text-shadow:0 0 12px rgba(0,240,255,.6); }

.nav__tools{ display:flex; align-items:center; gap:.6rem; }
.iconbtn{
  display:flex; align-items:center; gap:.35rem; padding:.4rem .55rem;
  border:1px solid var(--line); color:var(--ink-dim);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em;
  transition:color .25s, border-color .25s, background .25s;
}
.iconbtn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.iconbtn .ic--on{ display:none; }
.iconbtn[aria-pressed="true"]{ color:var(--gr); border-color:rgba(57,255,20,.4); background:rgba(57,255,20,.07); }
.iconbtn[aria-pressed="true"] .ic--on{ display:block; }
.iconbtn[aria-pressed="true"] .ic--off{ display:none; }
.iconbtn:hover{ color:var(--cy); border-color:var(--cy); }

.nav__cta{
  position:relative; padding:.55rem 1.1rem; overflow:hidden;
  border:1px solid var(--mg); color:var(--mg);
  font-family:var(--f-disp); font-weight:700; font-size:.68rem; letter-spacing:.2em;
  transition:color .3s, box-shadow .3s;
}
.nav__cta::before{
  content:''; position:absolute; inset:0; background:var(--mg);
  transform:translateX(-101%); transition:transform .4s var(--ease-hard);
}
.nav__cta:hover{ color:#0a0008; box-shadow:0 0 26px rgba(255,0,160,.5); }
.nav__cta:hover::before{ transform:none; }
.nav__cta-txt{ position:relative; z-index:1; }

.nav__progress{ position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:rgba(255,255,255,.05); }
.nav__progress i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cy),var(--mg)); box-shadow:0 0 12px var(--cy); }

/* burger */
.burger{ display:none; width:34px; height:30px; position:relative; }
.burger span{
  position:absolute; left:5px; right:5px; height:2px; background:var(--cy);
  transition:transform .35s var(--ease-hard), opacity .2s;
}
.burger span:nth-child(1){ top:8px; } .burger span:nth-child(2){ top:14px; } .burger span:nth-child(3){ top:20px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* mobile menu */
.mmenu{
  position:fixed; inset:var(--nav-h) 0 0; z-index:999;
  background:rgba(5,5,10,.97); backdrop-filter:blur(20px);
  padding:2rem clamp(1rem,5vw,2rem);
  opacity:0; transition:opacity .35s;
}
.mmenu.show{ opacity:1; }
.mmenu__inner{ display:flex; flex-direction:column; gap:.2rem; }
.mmenu a{
  display:flex; align-items:baseline; gap:.9rem; padding:1rem .4rem;
  border-bottom:1px solid var(--line-2);
  font-family:var(--f-disp); font-weight:700; letter-spacing:.16em; font-size:1.05rem;
}
.mmenu a i{ font-style:normal; font-family:var(--f-mono); font-size:.7rem; color:var(--mg); }
.mmenu a em{ font-style:normal; margin-left:auto; font-family:var(--f-jp); font-size:.7rem; color:var(--ink-dim); letter-spacing:.05em; }
.mmenu__cta{
  justify-content:center; margin-top:1.2rem; border:1px solid var(--cy) !important;
  color:var(--cy); background:rgba(0,240,255,.06);
}

/* =============================================================
   06. SIDE HUD
   ============================================================= */
.hud{
  position:fixed; z-index:900; pointer-events:none;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; color:var(--ink-faint);
  opacity:0; transition:opacity .8s .6s;
}
body:not(.is-booting) .hud{ opacity:1; }
.hud--l{ left:1rem; bottom:1.2rem; display:flex; flex-direction:column; gap:.55rem; }
.hud--r{ right:1rem; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; gap:.8rem; }

.hud__block{ display:flex; flex-direction:column; line-height:1.4; }
.hud__k{ color:var(--mg); font-size:.55rem; }
.hud__v{ color:var(--cy); }
.hud__v .dot{ display:inline-block; width:5px; height:5px; background:var(--gr); border-radius:50%; margin-right:.4em; box-shadow:0 0 6px var(--gr); }
.hud__bars{ display:flex; align-items:flex-end; gap:2px; height:26px; }
.hud__bars i{ display:block; width:3px; background:linear-gradient(var(--cy),rgba(0,240,255,.15)); transition:height .25s; }

.hud__sect{ color:var(--cy); writing-mode:vertical-rl; letter-spacing:.28em; font-size:.6rem; }
.hud__rail{ width:1px; height:130px; background:rgba(255,255,255,.12); position:relative; }
.hud__rail i{ position:absolute; left:-2px; width:5px; height:22px; background:var(--mg); box-shadow:0 0 10px var(--mg); top:0; }
.hud__clock{ writing-mode:vertical-rl; letter-spacing:.2em; color:var(--ink-faint); }

@media (max-width:1100px){ .hud{ display:none; } }

/* =============================================================
   07. TYPO / GLITCH
   ============================================================= */
.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0;
  clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
}
.glitch::before{ color:var(--cy); transform:translate(-2px,0); }
.glitch::after{ color:var(--mg); transform:translate(2px,0); }
.glitch:hover::before,.glitch.fire::before{ animation:gA .55s steps(2) 2; opacity:.9; }
.glitch:hover::after,.glitch.fire::after{ animation:gB .55s steps(2) 2; opacity:.9; }
@keyframes gA{
  0%{clip-path:inset(4% 0 82% 0)} 20%{clip-path:inset(48% 0 33% 0)} 40%{clip-path:inset(12% 0 70% 0)}
  60%{clip-path:inset(72% 0 8% 0)} 80%{clip-path:inset(30% 0 55% 0)} 100%{clip-path:inset(0 0 100% 0)}
}
@keyframes gB{
  0%{clip-path:inset(66% 0 12% 0)} 20%{clip-path:inset(15% 0 68% 0)} 40%{clip-path:inset(55% 0 25% 0)}
  60%{clip-path:inset(5% 0 88% 0)} 80%{clip-path:inset(40% 0 40% 0)} 100%{clip-path:inset(0 0 100% 0)}
}

/* reveal */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-hard), transform .8s var(--ease-hard); }
.reveal.in{ opacity:1; transform:none; }
.delay-1{ transition-delay:.08s } .delay-2{ transition-delay:.16s }
.delay-3{ transition-delay:.24s } .delay-4{ transition-delay:.32s } .delay-5{ transition-delay:.4s }

/* =============================================================
   08. BUTTONS
   ============================================================= */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1rem 2.1rem; overflow:hidden; isolation:isolate;
  font-family:var(--f-disp); font-weight:700; font-size:.8rem; letter-spacing:.18em;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  transition:color .3s, box-shadow .35s, transform .2s;
}
.btn__label{ position:relative; z-index:2; }
.btn--primary{ background:var(--cy); color:#03080c; box-shadow:0 0 0 rgba(0,240,255,0); }
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:1; background:var(--mg);
  transform:translateY(101%); transition:transform .4s var(--ease-hard);
}
.btn--primary:hover{ color:#fff; box-shadow:0 0 40px rgba(255,0,160,.45); }
.btn--primary:hover::before{ transform:none; }
.btn--primary:active{ transform:translateY(2px); }

.btn--ghost{ border:1px solid var(--line); color:var(--ink); background:rgba(255,255,255,.02); }
.btn--ghost::before{
  content:''; position:absolute; inset:0; z-index:1; background:rgba(0,240,255,.12);
  transform:translateY(101%); transition:transform .4s var(--ease-hard);
}
.btn--ghost:hover{ color:var(--cy); box-shadow:0 0 26px rgba(0,240,255,.18); }
.btn--ghost:hover::before{ transform:none; }

.btn--full{ width:100%; }
.btn__scan{
  position:absolute; z-index:2; top:0; bottom:0; width:36%; left:-40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
}
.btn:hover .btn__scan{ animation:btnScan .75s var(--ease) 1; }
@keyframes btnScan{ to{ left:120%; } }

.btn:hover .btn__label{ animation:btnTxt .3s steps(2) 1; }
@keyframes btnTxt{ 50%{ transform:translate(-1px,1px); letter-spacing:.22em; } }

/* =============================================================
   09. HERO
   ============================================================= */
.hero{
  position:relative; z-index:1; min-height:100svh;
  display:grid; align-items:center;
  padding:calc(var(--nav-h) + 4rem) 0 5rem;
  overflow:hidden;
}
.hero__grid{
  position:absolute; inset:auto 0 0 0; height:55%;
  background-image:
    linear-gradient(rgba(0,240,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,240,255,.13) 1px,transparent 1px);
  background-size:56px 56px;
  transform:perspective(340px) rotateX(62deg) scale(2.2);
  transform-origin:bottom center;
  mask-image:linear-gradient(transparent 8%,#000 78%);
  -webkit-mask-image:linear-gradient(transparent 8%,#000 78%);
  animation:gridRun 3.4s linear infinite;
  opacity:.6;
}
@keyframes gridRun{ to{ background-position:0 56px,0 0; } }

.hero__body{
  width:min(100% - 2.5rem,var(--wrap)); margin-inline:auto;
  position:relative; z-index:2; max-width:min(100% - 2.5rem, 830px);
}
.hero__tag{
  display:inline-flex; align-items:center; margin-bottom:1.6rem;
  padding:.42rem 1rem; border:1px solid var(--line);
  background:rgba(0,240,255,.05);
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.16em; color:var(--cy);
}
.hero__h1{
  font-family:var(--f-disp); font-weight:900;
  font-size:clamp(2.6rem,8.2vw,6.4rem); line-height:.98; letter-spacing:.01em;
  margin-bottom:1.8rem;
}
.hero__h1 .glitch{
  display:block; color:#fff;
  text-shadow:0 0 34px rgba(0,240,255,.32), 0 0 90px rgba(255,0,160,.18);
}
.hero__h1 .glitch:nth-child(2){
  background:linear-gradient(100deg,#fff 12%,var(--cy) 48%,var(--mg) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
}
.hero__h1-sub{
  display:block; margin-top:1rem;
  font-family:var(--f-mono); font-weight:400;
  font-size:clamp(.85rem,2.4vw,1.35rem); letter-spacing:.5em;
  color:var(--cy); text-shadow:0 0 18px rgba(0,240,255,.5);
}
.hero__lead{
  font-size:clamp(.95rem,1.55vw,1.1rem); line-height:2; color:#c3d4e6;
  font-weight:300; max-width:60ch; margin-bottom:2.4rem;
  border-left:2px solid var(--mg); padding-left:1.2rem;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:3.2rem; }

.hero__stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  max-width:660px;
}
.hero__stats > div{ background:rgba(6,8,14,.72); padding:.9rem 1rem; }
.hero__stats dt{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.2em; color:var(--ink-faint); }
.hero__stats dd{ display:flex; align-items:baseline; gap:.25rem; margin-top:.2rem; }
.hero__stats b{ font-family:var(--f-disp); font-weight:700; font-size:1.15rem; color:var(--cy); text-shadow:0 0 14px rgba(0,240,255,.4); }
.hero__stats i{ font-style:normal; font-family:var(--f-mono); font-size:.6rem; color:var(--ink-dim); }

/* hero visual */
.hero__visual{
  position:absolute; z-index:1; right:-6%; top:50%; transform:translateY(-50%);
  width:min(58vw,720px); aspect-ratio:1; pointer-events:none;
}
.core{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.core__ring{
  position:absolute; border-radius:50%; border:1px solid rgba(0,240,255,.22);
}
.core__ring--1{ inset:6%; border-top-color:var(--cy); border-bottom-color:transparent; animation:spin 14s linear infinite; }
.core__ring--2{ inset:17%; border-left-color:var(--mg); border-right-color:transparent; animation:spin 9s linear infinite reverse; }
.core__ring--3{ inset:28%; border-style:dashed; border-color:rgba(139,92,255,.3); animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.core__hex{ width:52%; animation:float 7s ease-in-out infinite; }
.core__hex svg{ overflow:visible; filter:drop-shadow(0 0 18px rgba(0,240,255,.4)); }
@keyframes float{ 50%{ transform:translateY(-16px); } }
.core__glow{
  position:absolute; inset:22%; border-radius:50%;
  background:radial-gradient(circle,rgba(0,240,255,.24),transparent 68%);
  filter:blur(28px); animation:pulseGlow 4.5s ease-in-out infinite;
}
@keyframes pulseGlow{ 50%{ transform:scale(1.22); opacity:.65; } }

.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.4em; color:var(--ink-faint);
}
.hero__scroll i{ display:block; width:1px; height:44px; background:linear-gradient(var(--cy),transparent); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:''; position:absolute; left:-1px; width:3px; height:12px; background:var(--cy); box-shadow:0 0 8px var(--cy); animation:scrollDot 1.9s var(--ease) infinite; }
@keyframes scrollDot{ from{ top:-14px } to{ top:46px } }
.hero__scroll:hover{ color:var(--cy); }

/* =============================================================
   10. TICKER
   ============================================================= */
.ticker{
  position:relative; z-index:2; overflow:hidden;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(255,0,160,.07),rgba(0,240,255,.07));
  padding:.55rem 0;
}
.ticker__track{ display:flex; gap:3rem; width:max-content; animation:tick 38s linear infinite; }
.ticker__track span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--cy); white-space:nowrap; }
.ticker__track span:nth-child(even){ color:var(--mg); }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* =============================================================
   11. SECTIONS (common)
   ============================================================= */
.sect{ position:relative; z-index:1; padding:clamp(5rem,11vw,9rem) 0; }
.sect::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.sect__head{ display:flex; gap:clamp(1rem,3vw,2.2rem); align-items:flex-start; margin-bottom:2.6rem; }
.sect__num{
  font-family:var(--f-disp); font-weight:900; font-size:clamp(2.4rem,6vw,4.4rem); line-height:.85;
  color:transparent; -webkit-text-stroke:1px rgba(0,240,255,.42); flex:none;
}
.sect__label{
  display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.34em;
  color:var(--mg); margin-bottom:.5rem;
}
.sect__title{
  font-family:var(--f-disp); font-weight:800; letter-spacing:.02em;
  font-size:clamp(1.5rem,4.2vw,2.9rem); line-height:1.18; color:#fff;
  text-shadow:0 0 30px rgba(0,240,255,.2);
}
.sect__lead{ max-width:62ch; color:#b9c8da; font-weight:300; margin-bottom:3rem; font-size:1.02rem; }

/* =============================================================
   12. PROLOGUE
   ============================================================= */
.prologue__cols{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
.prologue__text p{ margin-bottom:1.35rem; color:#aebbcb; font-weight:300; }
.prologue__text .lead{ font-size:1.14rem; color:#dbe7f4; line-height:1.95; }
.prologue__text em{ font-style:normal; color:var(--cy); }

.quote{
  margin:2.2rem 0 0; padding:1.4rem 1.6rem;
  border-left:2px solid var(--cy); background:linear-gradient(90deg,rgba(0,240,255,.06),transparent);
  font-family:var(--f-disp); font-weight:600; font-size:1.05rem; line-height:1.75; color:#fff;
}
.quote cite{ display:block; margin-top:.9rem; font-family:var(--f-mono); font-style:normal; font-size:.68rem; letter-spacing:.14em; color:var(--ink-dim); }

.panel{
  border:1px solid var(--line); background:rgba(7,10,18,.78);
  backdrop-filter:blur(6px); position:relative;
}
.panel::after{
  content:''; position:absolute; top:-1px; right:-1px; width:16px; height:16px;
  border-top:2px solid var(--mg); border-right:2px solid var(--mg);
}
.panel__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .9rem; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; color:var(--cy);
  background:rgba(0,240,255,.05);
}
.panel__body{ padding:1.3rem 1.1rem 1rem; }
.gauge{ margin-bottom:1.05rem; }
.gauge__k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:.35rem; }
.gauge__track{ height:6px; background:rgba(255,255,255,.06); overflow:hidden; }
.gauge__track i{
  display:block; height:100%; width:0; background:linear-gradient(90deg,rgba(0,240,255,.5),var(--cy));
  transition:width 1.4s var(--ease-hard);
}
.gauge--max .gauge__track i{ background:linear-gradient(90deg,var(--cy),var(--mg)); box-shadow:0 0 14px var(--mg); }
.gauge__v{ font-family:var(--f-mono); font-size:.66rem; color:var(--cy); margin-top:.28rem; text-align:right; }
.gauge--max .gauge__v{ color:var(--mg); }
.panel__note{ font-family:var(--f-mono); font-size:.6rem; color:var(--ink-faint); line-height:1.6; margin-top:1rem; }

/* =============================================================
   13. FEATURES
   ============================================================= */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.feat{
  position:relative; padding:2.2rem 1.6rem 1.6rem; background:rgba(6,8,14,.85);
  transition:background .4s, transform .4s var(--ease-hard);
  transform-style:preserve-3d;
}
.feat::before{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,240,255,.13), transparent 62%);
  transition:opacity .35s;
}
.feat:hover{ background:rgba(10,16,28,.95); }
.feat:hover::before{ opacity:1; }
.feat__idx{
  position:absolute; top:.8rem; right:1rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; color:var(--ink-faint);
}
.feat__ic{ width:52px; height:52px; margin-bottom:1.3rem; }
.feat__ic svg{ width:100%; height:100%; fill:none; stroke:var(--cy); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(0,240,255,.45)); transition:stroke .35s, filter .35s, transform .5s var(--ease-hard); }
.feat__ic svg .fill{ fill:var(--mg); stroke:none; }
.feat:hover .feat__ic svg{ stroke:var(--mg); filter:drop-shadow(0 0 14px rgba(255,0,160,.6)); transform:rotate(-8deg) scale(1.06); }
.feat h3{
  font-family:var(--f-disp); font-weight:700; font-size:1.02rem; line-height:1.5;
  color:#fff; margin-bottom:.8rem;
}
.feat h3 em{ display:block; font-style:normal; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; color:var(--cy); margin-top:.3rem; font-weight:400; }
.feat p{ font-size:.88rem; line-height:1.85; color:#9fb0c2; font-weight:300; }
.feat__meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.feat__meta span{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.12em;
  padding:.2rem .55rem; border:1px solid var(--line); color:var(--ink-dim);
}
.feat__corner{
  position:absolute; bottom:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 0 16px 16px; border-color:transparent transparent var(--cy) transparent;
  opacity:.25; transition:opacity .35s, border-color .35s;
}
.feat:hover .feat__corner{ opacity:1; border-color:transparent transparent var(--mg) transparent; }

/* =============================================================
   14. ARCHITECTURE
   ============================================================= */
.arch__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.6rem,4vw,3.4rem); align-items:start; }
.arch__diagram{
  border:1px solid var(--line); background:rgba(6,9,16,.7);
  padding:1.4rem 1rem 1rem; position:relative;
}
.diagram{ width:100%; height:auto; }
.diagram__links path{ stroke:rgba(0,240,255,.4); stroke-width:1; fill:none; stroke-dasharray:4 4; animation:dash 22s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-200; } }
.dnode rect{ fill:rgba(0,240,255,.05); stroke:var(--cy); stroke-width:1; transition:fill .3s, stroke .3s; }
.dnode text{
  fill:var(--ink); font-family:var(--f-mono); font-size:10.5px; text-anchor:middle; letter-spacing:.08em;
  transition:fill .3s;
}
.dnode.hot rect{ fill:rgba(255,0,160,.16); stroke:var(--mg); }
.dnode.hot text{ fill:#fff; }
.diagram__cap{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; color:var(--ink-faint); text-align:center; margin-top:.7rem; }

.acc{ border:1px solid var(--line); margin-bottom:.6rem; background:rgba(6,9,16,.62); transition:border-color .3s, background .3s; }
.acc.open{ border-color:rgba(255,0,160,.45); background:rgba(12,8,18,.8); }
.acc__head{
  width:100%; display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; text-align:left;
  transition:background .3s;
}
.acc__head:hover{ background:rgba(0,240,255,.05); }
.acc__id{ font-family:var(--f-disp); font-weight:800; font-size:.9rem; color:var(--cy); flex:none; letter-spacing:.1em; }
.acc.open .acc__id{ color:var(--mg); }
.acc__t{ font-family:var(--f-disp); font-weight:700; font-size:.86rem; letter-spacing:.14em; color:#fff; }
.acc__t em{ display:block; font-style:normal; font-family:var(--f-jp); font-size:.7rem; letter-spacing:.04em; color:var(--ink-dim); font-weight:400; margin-top:.15rem; }
.acc__x{ margin-left:auto; position:relative; width:13px; height:13px; flex:none; }
.acc__x::before,.acc__x::after{ content:''; position:absolute; background:var(--cy); transition:transform .35s var(--ease-hard), background .3s; }
.acc__x::before{ left:0; right:0; top:6px; height:1px; }
.acc__x::after{ top:0; bottom:0; left:6px; width:1px; }
.acc.open .acc__x::after{ transform:scaleY(0); }
.acc.open .acc__x::before{ background:var(--mg); }
.acc__body{ overflow:hidden; max-height:0; opacity:.2; transition:max-height .45s var(--ease-hard), opacity .45s var(--ease); }
.acc.open .acc__body{ max-height:460px; opacity:1; }
.acc__body p{ padding:0 1.1rem .2rem; font-size:.88rem; line-height:1.9; color:#9fb0c2; font-weight:300; }
.kv{ display:flex; flex-wrap:wrap; gap:1px; margin:1rem 1.1rem 1.2rem; background:var(--line); border:1px solid var(--line); }
.kv li{ flex:1 1 90px; padding:.5rem .7rem; background:rgba(4,6,12,.9); }
.kv span{ display:block; font-family:var(--f-mono); font-size:.55rem; letter-spacing:.14em; color:var(--ink-faint); }
.kv b{ font-family:var(--f-disp); font-size:.82rem; color:var(--cy); }

/* =============================================================
   15. TIMELINE
   ============================================================= */
.timeline{ position:relative; padding-left:clamp(1.4rem,4vw,3rem); }
.timeline::before{
  content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--cy),var(--mg),transparent);
}
.tl{ position:relative; padding-bottom:1.6rem; }
.tl__dot{
  position:absolute; left:calc(-1 * clamp(1.4rem,4vw,3rem) + 1px); top:.55rem;
  width:11px; height:11px; border:1px solid var(--cy); background:var(--bg);
  transform:rotate(45deg);
}
.tl.is-done .tl__dot{ background:var(--cy); }
.tl.is-active .tl__dot{ border-color:var(--mg); background:var(--mg); box-shadow:0 0 0 0 rgba(255,0,160,.6); animation:ping 2s infinite; }
@keyframes ping{ to{ box-shadow:0 0 0 16px rgba(255,0,160,0); } }

.tl__card{
  border:1px solid var(--line); background:rgba(6,9,16,.66);
  padding:1.2rem 1.4rem; transition:transform .35s var(--ease-hard), border-color .35s, background .35s;
}
.tl__card:hover{ transform:translateX(8px); border-color:rgba(0,240,255,.45); background:rgba(8,14,24,.85); }
.tl.is-active .tl__card{ border-color:rgba(255,0,160,.35); }
.tl__date{ display:flex; align-items:center; gap:.7rem; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.2em; color:var(--cy); }
.tag{
  font-style:normal; font-size:.55rem; letter-spacing:.14em; padding:.15rem .5rem;
  border:1px solid var(--ink-faint); color:var(--ink-dim);
}
.tag--done{ border-color:rgba(57,255,20,.5); color:var(--gr); }
.tag--live{ border-color:var(--mg); color:var(--mg); background:rgba(255,0,160,.1); animation:blinkSoft 1.6s infinite; }
@keyframes blinkSoft{ 50%{ opacity:.45 } }
.tl h3{ font-family:var(--f-disp); font-weight:700; font-size:1.05rem; color:#fff; margin:.55rem 0 .5rem; letter-spacing:.04em; }
.tl p{ font-size:.88rem; line-height:1.9; color:#9fb0c2; font-weight:300; }

/* =============================================================
   16. ACCESS / CTA
   ============================================================= */
.access{ overflow:hidden; }
.access__glow{
  position:absolute; inset:auto 0 -30% 0; height:70%;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,0,160,.22), transparent 62%);
  filter:blur(40px); pointer-events:none;
}
.access__box{
  border:1px solid rgba(0,240,255,.3); background:rgba(5,8,15,.9);
  box-shadow:0 0 90px rgba(0,240,255,.09);
  position:relative;
}
.access__bar{
  display:flex; justify-content:space-between; gap:1rem; padding:.6rem 1rem;
  border-bottom:1px solid var(--line); background:rgba(0,240,255,.05);
  font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; color:var(--cy);
}
.access__inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3rem); padding:clamp(1.6rem,4vw,3rem); }
.access__h2{
  font-family:var(--f-disp); font-weight:900; font-size:clamp(1.8rem,4.6vw,3.1rem);
  line-height:1.15; color:#fff; margin:.3rem 0 1rem;
  text-shadow:0 0 36px rgba(255,0,160,.32);
}
.access__lead p{ color:#aebbcb; font-weight:300; font-size:.95rem; }

.countdown{ display:flex; align-items:flex-end; gap:.5rem; margin:1.8rem 0 1.4rem; }
.countdown > div{ display:flex; flex-direction:column; align-items:center; min-width:62px; padding:.55rem .3rem; border:1px solid var(--line); background:rgba(0,240,255,.04); }
.countdown b{ font-family:var(--f-disp); font-weight:800; font-size:1.7rem; color:var(--cy); text-shadow:0 0 16px rgba(0,240,255,.5); line-height:1; }
.countdown span{ font-family:var(--f-mono); font-size:.52rem; letter-spacing:.18em; color:var(--ink-faint); margin-top:.35rem; }
.countdown i{ font-style:normal; font-family:var(--f-disp); font-size:1.3rem; color:var(--ink-faint); padding-bottom:1.1rem; animation:blinkSoft 1s steps(1) infinite; }

.slots__track{ height:8px; background:rgba(255,255,255,.06); border:1px solid var(--line); overflow:hidden; }
.slots__track i{ display:block; height:100%; width:0; background:repeating-linear-gradient(90deg,var(--mg) 0 6px,rgba(255,0,160,.35) 6px 10px); box-shadow:0 0 14px rgba(255,0,160,.5); transition:width 1.6s var(--ease-hard); }
.slots__meta{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-dim); margin-top:.45rem; }
.slots__meta b{ color:var(--mg); }

/* form */
.access__form{ border-left:1px solid var(--line); padding-left:clamp(0rem,3vw,2.2rem); }
.field{ margin-bottom:1.2rem; }
.field label{
  display:block; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em;
  color:var(--cy); margin-bottom:.4rem;
}
.field input,.select select{
  width:100%; padding:.8rem .9rem;
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:#fff;
  font-family:var(--f-mono); font-size:.86rem; letter-spacing:.05em;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.field input::placeholder{ color:var(--ink-faint); }
.field input:focus,.select select:focus{
  outline:none; border-color:var(--cy); background:rgba(0,240,255,.06);
  box-shadow:0 0 0 1px var(--cy), 0 0 22px rgba(0,240,255,.2);
}
.field.err input{ border-color:var(--mg); box-shadow:0 0 18px rgba(255,0,160,.25); }
.field__err{ display:block; font-family:var(--f-mono); font-size:.6rem; color:var(--mg); margin-top:.3rem; min-height:1em; letter-spacing:.06em; }
.select{ position:relative; }
.select::after{
  content:'▼'; position:absolute; right:.9rem; top:50%; transform:translateY(-50%);
  font-size:.55rem; color:var(--cy); pointer-events:none;
}
.select select{ appearance:none; -webkit-appearance:none; cursor:pointer; }
.select select option{ background:#0a0d16; color:#fff; }

.check{ display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; font-size:.8rem; color:var(--ink-dim); }
.check input{ position:absolute; opacity:0; width:0; height:0; }
.check i{
  flex:none; width:16px; height:16px; margin-top:.25rem; border:1px solid var(--cy);
  position:relative; transition:background .25s;
}
.check i::after{
  content:''; position:absolute; left:4px; top:0px; width:5px; height:10px;
  border:solid #03080c; border-width:0 2px 2px 0; transform:rotate(45deg) scale(0);
  transition:transform .25s var(--ease-hard);
}
.check input:checked + i{ background:var(--cy); box-shadow:0 0 14px rgba(0,240,255,.5); }
.check input:checked + i::after{ transform:rotate(45deg) scale(1); }
.check input:focus-visible + i{ outline:2px solid var(--mg); outline-offset:2px; }
.check a{ color:var(--cy); border-bottom:1px dotted currentColor; }
.access__form > .field__err{ margin:.2rem 0 .9rem; }

.access__out{
  display:block; margin-top:1rem; min-height:1.4em;
  font-family:var(--f-mono); font-size:.72rem; line-height:1.7; letter-spacing:.06em; color:var(--gr);
  white-space:pre-wrap;
}
.access__out.err{ color:var(--mg); }

/* =============================================================
   17. FOOTER
   ============================================================= */
.foot{ position:relative; z-index:1; border-top:1px solid var(--line); background:rgba(3,4,8,.9); padding-top:3rem; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr auto auto; gap:2rem; align-items:start; padding-bottom:2.4rem; }
.foot__brand{ display:flex; gap:.9rem; align-items:flex-start; }
.foot__brand svg{ width:34px; height:34px; flex:none; fill:none; stroke:var(--cy); stroke-width:6; }
.foot__brand svg circle{ fill:var(--mg); stroke:none; }
.foot__brand b{ display:block; font-family:var(--f-disp); font-weight:800; letter-spacing:.18em; font-size:.9rem; }
.foot__brand span{ display:block; font-size:.72rem; color:var(--ink-faint); font-family:var(--f-mono); letter-spacing:.08em; margin-top:.3rem; }
.foot__nav,.foot__legal{ display:flex; flex-direction:column; gap:.55rem; }
.foot__nav a,.foot__legal a{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; color:var(--ink-dim);
  transition:color .25s, letter-spacing .25s;
}
.foot__nav a:hover,.foot__legal a:hover{ color:var(--cy); letter-spacing:.22em; }
.foot__sns{ display:flex; gap:.5rem; }
.foot__sns a{
  width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--line);
  transition:border-color .25s, background .25s, transform .25s;
}
.foot__sns svg{ width:16px; height:16px; fill:none; stroke:var(--ink-dim); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.foot__sns svg .fill{ fill:var(--ink-dim); stroke:none; transition:fill .25s; }
.foot__sns a:hover{ border-color:var(--cy); background:rgba(0,240,255,.08); transform:translateY(-3px); }
.foot__sns a:hover svg{ stroke:var(--cy); }
.foot__sns a:hover svg .fill{ fill:var(--cy); }

.foot__bottom{
  border-top:1px solid var(--line-2); padding:1rem clamp(1rem,3vw,2rem);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em; color:var(--ink-faint);
}
.foot__code{ color:var(--cy); opacity:.6; }

/* =============================================================
   18. RESPONSIVE
   ============================================================= */
@media (max-width:1024px){
  .prologue__cols,.arch__grid,.access__inner{ grid-template-columns:1fr; }
  .access__form{ border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:2rem; }
  .hero__visual{ right:-24%; width:min(92vw,620px); opacity:.42; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .burger{ display:block; }
  .nav__cta{ display:none; }
  .hero__stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  :root{ --nav-h:58px; }
  body{ line-height:1.75; }
  .hero{ padding-top:calc(var(--nav-h) + 2.5rem); }
  .hero__h1{ font-size:clamp(2.1rem,10vw,3rem); }
  .hero__lead{ padding-left:.9rem; }
  .btn{ padding:.85rem 1.4rem; font-size:.72rem; width:100%; }
  .hero__cta{ flex-direction:column; }
  .sect__head{ flex-direction:column; gap:.6rem; }
  .countdown > div{ min-width:0; flex:1; }
  .countdown b{ font-size:1.25rem; }
  .foot__grid{ grid-template-columns:1fr; }
  .fx-scanlines{ opacity:.3; }
}

/* =============================================================
   19. A11Y / MOTION
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .fx-grain,.fx-scanlines,.boot__scan{ display:none; }
  .cursor{ display:none; }
}
@media (prefers-contrast:more){
  :root{ --ink-dim:#b8c6d8; --ink-faint:#8e9eb2; --line:rgba(0,240,255,.4); }
  .fx-scanlines{ display:none; }
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}