/* =========================================================
   PROJECT CHIMERA // CYBERPUNK LANDING
   ========================================================= */

:root{
  --bg-0:#05060a;
  --bg-1:#0a0d16;
  --bg-2:#10131f;
  --ink:#e7f7ff;
  --ink-dim:#8aa2b2;
  --ink-mut:#5a6b7a;

  --cyan:#00ffe5;
  --cyan-soft:#4ff7e8;
  --pink:#ff2bd6;
  --pink-soft:#ff7ae3;
  --yellow:#ffe419;
  --green:#39ff14;
  --violet:#7a3bff;

  --grid:rgba(0,255,229,.08);
  --grid-strong:rgba(0,255,229,.18);
  --border:rgba(0,255,229,.22);

  --mono:'Share Tech Mono','Roboto Mono',monospace;
  --disp:'Orbitron','Rajdhani',sans-serif;
  --body:'Rajdhani','Share Tech Mono',sans-serif;
  --mega:'Major Mono Display','Orbitron',monospace;

  --pad-x:clamp(16px, 4vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--bg-0);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  overflow-x:hidden;
  cursor:crosshair;
}

body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,43,214,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(0,255,229,.12), transparent 60%),
    linear-gradient(180deg, #03040a 0%, #05060e 40%, #06080f 100%);
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img{ max-width:100%; display:block; }
::selection{ background:var(--cyan); color:#000; }

/* =========================================================
   GLOBAL FX LAYERS
   ========================================================= */
.noise-layer{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity:.05;
  mix-blend-mode:overlay;
  animation:noiseShift .2s steps(3) infinite;
}
@keyframes noiseShift{
  0%{transform:translate(0,0)}
  33%{transform:translate(-2%,1%)}
  66%{transform:translate(1%,-1%)}
  100%{transform:translate(0,0)}
}

.grid-layer{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
}

.scanline-global{
  position:fixed; inset:0; pointer-events:none; z-index:3;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 2px,
    rgba(0,255,229,.04) 3px,
    rgba(255,255,255,0) 4px
  );
  mix-blend-mode:screen;
}

#particleCanvas, #matrixCanvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
#matrixCanvas{ opacity:.18; }

/* =========================================================
   BOOT LOADER
   ========================================================= */
.boot-loader{
  position:fixed; inset:0; z-index:9999;
  background:#02030a;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .7s ease, visibility .7s;
}
.boot-loader.done{ opacity:0; visibility:hidden; }

.boot-inner{
  width:min(780px, 92vw);
  font-family:var(--mono);
  color:var(--cyan);
  position:relative;
  padding:28px;
  border:1px solid var(--border);
  box-shadow: 0 0 40px rgba(0,255,229,.15), inset 0 0 20px rgba(0,255,229,.06);
}
.boot-scanline{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent 0 48%, rgba(0,255,229,.25) 49% 51%, transparent 52%);
  animation:bootScan 2.2s linear infinite;
}
@keyframes bootScan{
  0%{transform:translateY(-60%)}
  100%{transform:translateY(60%)}
}
.boot-logo{
  font-size:10px; line-height:1; white-space:pre;
  color:var(--cyan);
  text-shadow:0 0 8px var(--cyan), 0 0 24px rgba(0,255,229,.4);
  margin:0 0 16px;
}
.boot-log{
  min-height:120px;
  font-size:12px;
  color:var(--ink-dim);
  white-space:pre-wrap;
}
.boot-log .ok{ color:var(--green); }
.boot-log .warn{ color:var(--yellow); }
.boot-log .err{ color:var(--pink); }
.boot-bar{
  height:6px; margin:14px 0 8px;
  border:1px solid var(--border);
  background:rgba(0,255,229,.05);
  overflow:hidden;
}
.boot-bar-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  box-shadow:0 0 12px var(--cyan);
  transition:width .2s;
}
.boot-status{ font-size:12px; color:var(--cyan); }

/* =========================================================
   HUD SIDE
   ========================================================= */
.hud-side{
  position:fixed; top:0; bottom:0;
  width:56px; z-index:40;
  display:flex; flex-direction:column;
  justify-content:space-between;
  padding:110px 8px 40px;
  font-family:var(--mono);
  font-size:10px;
  color:var(--cyan);
  pointer-events:none;
  user-select:none;
}
.hud-left{ left:0; border-right:1px solid rgba(0,255,229,.08); }
.hud-right{ right:0; border-left:1px solid rgba(0,255,229,.08); text-align:right; align-items:flex-end; }

.hud-block{
  display:flex; align-items:center; gap:6px;
  letter-spacing:.18em;
  white-space:nowrap;
}
.hud-block.vertical{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  opacity:.6;
}
.hud-right .hud-block.vertical{
  transform:rotate(0deg); writing-mode:vertical-rl;
}
.hud-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:pulse 1.4s ease-in-out infinite;
}
.hud-dot.dot-pink{ background:var(--pink); box-shadow:0 0 10px var(--pink); }
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.6); opacity:.4; }
}

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

/* =========================================================
   SOUND TOGGLE
   ========================================================= */
.sound-toggle{
  position:fixed; right:72px; bottom:24px; z-index:50;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(0,0,0,.5);
  border:1px solid var(--border);
  color:var(--cyan);
  font-family:var(--mono); font-size:11px;
  letter-spacing:.15em;
  transition:all .2s;
}
.sound-toggle:hover{
  box-shadow:0 0 20px rgba(0,255,229,.35);
  background:rgba(0,255,229,.08);
}
.sound-bar{
  width:3px; height:14px; background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
  animation:barJump 1s ease-in-out infinite;
}
.sound-bar:nth-child(2){ animation-delay:.2s; height:8px; }
.sound-bar:nth-child(3){ animation-delay:.4s; height:11px; }
.sound-toggle.off .sound-bar{ animation:none; height:4px; opacity:.3; }
@keyframes barJump{
  0%,100%{ transform:scaleY(.5); }
  50%{ transform:scaleY(1); }
}

@media (max-width:600px){
  .sound-toggle{ right:16px; bottom:16px; }
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:14px var(--pad-x);
  background:linear-gradient(180deg, rgba(3,5,12,.9), rgba(3,5,12,.4));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(0,255,229,.1);
}
.nav-brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  color:var(--cyan); font-family:var(--disp); font-size:22px;
  text-shadow:0 0 8px var(--cyan);
  animation:flickerSoft 4s infinite;
}
.brand-logo.big{ font-size:36px; }
.brand-name{
  font-family:var(--disp); font-weight:900;
  letter-spacing:.15em; font-size:16px;
}
.brand-name em{ font-style:normal; color:var(--cyan); }
.brand-name.big{ font-size:20px; }
.brand-sub{ font-family:var(--mono); font-size:11px; color:var(--ink-mut); letter-spacing:.2em; }

.nav-links{
  margin-left:auto; display:flex; gap:22px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.2em;
}
.nav-links a{
  position:relative; color:var(--ink-dim);
  padding:6px 2px;
  transition:color .2s;
}
.nav-links a::before{
  content:attr(data-idx);
  position:absolute; top:-10px; left:0;
  font-size:9px; color:var(--cyan); opacity:.6;
}
.nav-links a:hover, .nav-links a.active{
  color:var(--cyan);
  text-shadow:0 0 8px var(--cyan);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px;
  height:1px; width:0; background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
  transition:width .3s;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-burger{
  display:none;
  width:32px; height:28px;
  flex-direction:column; justify-content:space-between;
  padding:4px 2px;
}
.nav-burger span{
  display:block; height:2px; background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
  transition:.3s;
}

@media (max-width:820px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; margin-left:auto; }
  .nav-cta{ display:none; }
}

/* =========================================================
   GLITCH BUTTON
   ========================================================= */
.glitch-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.22em;
  color:var(--cyan);
  background:linear-gradient(90deg, rgba(0,255,229,.08), rgba(255,43,214,.04));
  border:1px solid var(--cyan);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: color .2s, box-shadow .2s, background .2s;
  overflow:hidden;
}
.glitch-btn::before, .glitch-btn::after{
  content:attr(data-text);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:inherit;
  font-family:inherit; letter-spacing:inherit;
  pointer-events:none;
  opacity:0;
}
.glitch-btn::before{ color:var(--pink); transform:translate(2px,0); }
.glitch-btn::after{ color:var(--yellow); transform:translate(-2px,0); }
.glitch-btn:hover{
  color:#000;
  background:var(--cyan);
  box-shadow: 0 0 18px var(--cyan), 0 0 40px rgba(0,255,229,.4);
}
.glitch-btn:hover::before{ animation:glitchA .4s steps(3) infinite; opacity:.9; }
.glitch-btn:hover::after{ animation:glitchB .4s steps(3) infinite; opacity:.9; }
@keyframes glitchA{
  0%{clip-path:inset(0 0 70% 0); transform:translate(2px,0)}
  50%{clip-path:inset(40% 0 20% 0); transform:translate(-2px,0)}
  100%{clip-path:inset(80% 0 0 0); transform:translate(2px,0)}
}
@keyframes glitchB{
  0%{clip-path:inset(60% 0 0 0); transform:translate(-2px,0)}
  50%{clip-path:inset(10% 0 50% 0); transform:translate(2px,0)}
  100%{clip-path:inset(0 0 80% 0); transform:translate(-2px,0)}
}

.nav-cta{ padding:10px 18px; font-size:12px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  padding:140px var(--pad-x) 80px;
  overflow:hidden;
  isolation:isolate;
}

.hero-bg{
  position:absolute; inset:0; z-index:-1; overflow:hidden;
}
.hero-sun{
  position:absolute;
  left:50%; top:30%; transform:translate(-50%,-50%);
  width:560px; height:560px; border-radius:50%;
  background:
    radial-gradient(circle at center, #ff2bd6 0%, #7a3bff 35%, transparent 70%);
  filter:blur(40px);
  opacity:.55;
  animation:sunFloat 12s ease-in-out infinite;
}
@keyframes sunFloat{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-55%) scale(1.06); }
}
.hero-mountains{
  position:absolute; left:0; right:0; bottom:30%;
  height:180px;
  background:
    linear-gradient(180deg, transparent 0%, #0a0d16 95%),
    conic-gradient(from 180deg at 50% 100%, #2a0a4a 0deg, #4a0a3a 180deg, #2a0a4a 360deg);
  clip-path: polygon(
    0% 100%, 5% 60%, 12% 80%, 20% 50%, 28% 70%, 35% 40%,
    45% 65%, 55% 35%, 62% 55%, 70% 30%, 78% 60%, 86% 40%,
    93% 70%, 100% 50%, 100% 100%
  );
  filter:drop-shadow(0 0 12px rgba(255,43,214,.4));
}
.hero-grid-floor{
  position:absolute; left:-20%; right:-20%; bottom:0;
  height:50%;
  background-image:
    linear-gradient(0deg, rgba(0,255,229,.5), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 59px, var(--cyan) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 59px, var(--cyan) 59px 60px);
  transform:perspective(500px) rotateX(60deg);
  transform-origin:bottom;
  opacity:.35;
  mask-image:linear-gradient(to top, #000 0%, transparent 100%);
  animation:floorScroll 2.2s linear infinite;
}
@keyframes floorScroll{
  from{ background-position: 0 0, 0 0, 0 0; }
  to  { background-position: 0 0, 0 60px, 0 60px; }
}

.hero-corner{
  position:absolute;
  width:56px; height:56px;
  border:2px solid var(--cyan);
  box-shadow:0 0 12px rgba(0,255,229,.5);
}
.hero-corner.tl{ top:100px; left:28px; border-right:none; border-bottom:none; }
.hero-corner.tr{ top:100px; right:28px; border-left:none; border-bottom:none; }
.hero-corner.bl{ bottom:28px; left:28px; border-right:none; border-top:none; }
.hero-corner.br{ bottom:28px; right:28px; border-left:none; border-top:none; }
@media (max-width:900px){ .hero-corner{ display:none; } }

.hero-meta{
  font-family:var(--mono); font-size:12px; color:var(--ink-dim);
  display:flex; justify-content:space-between;
  letter-spacing:.2em;
  margin-bottom:20px;
}
.blink{ color:var(--pink); animation:blink 1.2s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

.hero-content{
  position:relative;
  max-width:1200px; margin:0 auto;
}

.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:22px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.3em;
  color:var(--cyan);
}
.tag-bar{
  width:40px; height:1px; background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
}

.hero-title{
  font-family:var(--disp);
  font-weight:900;
  font-size:clamp(44px, 9vw, 124px);
  line-height:.95;
  letter-spacing:.02em;
  margin:0 0 22px;
}
.title-line{ display:block; }
.title-line.accent{ color:var(--cyan); text-shadow: 0 0 20px rgba(0,255,229,.5); }
.title-sub{
  display:block;
  margin-top:18px;
  font-family:var(--mono);
  font-size:clamp(12px, 1.3vw, 16px);
  letter-spacing:.35em;
  color:var(--ink-dim);
}

.hero-lead{
  font-family:var(--mono);
  font-size:clamp(13px, 1.15vw, 15px);
  line-height:1.9;
  color:var(--ink);
  max-width:560px;
  margin:0 0 32px;
  padding:14px 16px;
  border-left:2px solid var(--cyan);
  background:linear-gradient(90deg, rgba(0,255,229,.05), transparent);
}

.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:52px; }

.cta-primary{
  --c: var(--cyan);
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px;
  font-family:var(--mono); font-size:14px;
  letter-spacing:.25em;
  color:#001;
  background:var(--cyan);
  border:1px solid var(--cyan);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow:0 0 20px rgba(0,255,229,.5), inset 0 0 20px rgba(255,43,214,.2);
  transition:all .25s;
  overflow:hidden;
}
.cta-primary::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%);
  transition:transform .6s;
}
.cta-primary:hover{ transform:translate(-2px,-2px); box-shadow: 4px 4px 0 var(--pink), 0 0 40px var(--cyan); }
.cta-primary:hover::after{ transform:translateX(100%); }
.cta-primary.big{ padding:20px 34px; font-size:16px; }
.cta-hex{ font-size:16px; }
.cta-arrow{ letter-spacing:0; font-weight:700; }

.cta-ghost{
  display:inline-flex; align-items:center; gap:8px;
  padding:16px 24px;
  font-family:var(--mono); font-size:13px; letter-spacing:.25em;
  color:var(--pink);
  border:1px solid var(--pink);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  transition:.25s;
}
.cta-ghost:hover{
  background:var(--pink); color:#000;
  box-shadow:0 0 24px var(--pink);
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  border-top:1px solid var(--border);
  padding-top:22px;
  max-width:820px;
}
.stat{
  display:flex; flex-direction:column; gap:4px;
  padding:8px 14px;
  border-left:1px solid rgba(0,255,229,.2);
  font-family:var(--mono);
}
.stat:first-child{ border-left:none; }
.stat-label{ font-size:10px; color:var(--ink-mut); letter-spacing:.25em; }
.stat-value{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(18px, 2.4vw, 28px);
  color:var(--cyan);
  text-shadow:0 0 10px rgba(0,255,229,.4);
}
.stat-unit{ font-size:10px; color:var(--ink-dim); letter-spacing:.2em; }

@media (max-width:720px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}

.hero-scroll{
  position:absolute; bottom:24px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em;
  color:var(--ink-dim);
}
.scroll-line{
  width:1px; height:40px;
  background:linear-gradient(to bottom, transparent, var(--cyan));
  position:relative; overflow:hidden;
}
.scroll-line::before{
  content:''; position:absolute;
  left:0; right:0; top:-20px; height:20px;
  background:var(--cyan); box-shadow:0 0 10px var(--cyan);
  animation:scrollDrip 1.6s ease-in infinite;
}
@keyframes scrollDrip{
  0%{ top:-20px; }
  100%{ top:100%; }
}

/* =========================================================
   SECTION BASE
   ========================================================= */
.section{
  position:relative;
  padding:120px var(--pad-x);
  max-width:1400px;
  margin:0 auto;
}
.section-head{
  display:flex; align-items:center; gap:16px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.3em;
  color:var(--cyan);
  margin-bottom:28px;
}
.section-idx{ color:var(--pink); }
.section-bar{
  flex:0 0 80px; height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}
.section-tag{ color:var(--ink-dim); }

.section-title{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(36px, 6.2vw, 84px);
  line-height:1; letter-spacing:.02em;
  margin:0 0 48px;
}
.section-title.mega{
  display:flex; flex-wrap:wrap; gap:.25em;
  font-family:var(--mega); font-weight:400;
  font-size:clamp(40px, 7.6vw, 110px);
}
.section-title.center{ text-align:center; justify-content:center; }
.section-title .accent{ color:var(--cyan); }
.section-title .outline{
  color:transparent;
  -webkit-text-stroke: 1.5px var(--cyan);
}
.section-title .title-sub{
  display:block; margin-top:10px;
  font-family:var(--mono); font-size:14px;
  color:var(--ink-dim); letter-spacing:.25em;
}

/* =========================================================
   GLITCH TEXT
   ========================================================= */
.glitch{ position:relative; display:inline-block; }
.glitch::before, .glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.8;
}
.glitch::before{
  color:var(--pink);
  transform:translate(2px,0);
  clip-path:inset(0 0 60% 0);
  mix-blend-mode:screen;
  animation:txA 3s infinite steps(2);
}
.glitch::after{
  color:var(--cyan);
  transform:translate(-2px,0);
  clip-path:inset(60% 0 0 0);
  mix-blend-mode:screen;
  animation:txB 2.4s infinite steps(2);
}
@keyframes txA{
  0%,92%,100%{ transform:translate(2px,0); clip-path:inset(0 0 60% 0); }
  93%{ transform:translate(-4px,-1px); clip-path:inset(12% 0 70% 0); }
  96%{ transform:translate(5px,2px); clip-path:inset(40% 0 10% 0); }
}
@keyframes txB{
  0%,90%,100%{ transform:translate(-2px,0); clip-path:inset(60% 0 0 0); }
  92%{ transform:translate(4px,1px); clip-path:inset(70% 0 6% 0); }
  95%{ transform:translate(-5px,-2px); clip-path:inset(30% 0 30% 0); }
}

/* =========================================================
   PROLOGUE
   ========================================================= */
.section-prologue{
  border-top:1px solid rgba(0,255,229,.08);
}
.prologue-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:60px; align-items:center;
}
@media (max-width:900px){ .prologue-grid{ grid-template-columns:1fr; } }

.prologue-text em{
  color:var(--yellow); font-style:normal;
  text-shadow:0 0 8px rgba(255,228,25,.5);
}
.prologue-text p{
  font-family:var(--mono); font-size:14px; line-height:1.9;
  color:var(--ink); max-width:560px;
}
.inline-hl{
  color:var(--cyan);
  padding:2px 6px;
  background:rgba(0,255,229,.1);
  border:1px solid rgba(0,255,229,.3);
  font-weight:700;
  text-shadow:0 0 8px rgba(0,255,229,.6);
}
.prologue-bullets{
  list-style:none; padding:0; margin:28px 0 0;
  font-family:var(--mono); font-size:13px;
  color:var(--ink);
}
.prologue-bullets li{
  display:flex; gap:10px; padding:8px 0;
  border-bottom:1px dashed rgba(0,255,229,.15);
}
.bullet-mark{ color:var(--pink); font-weight:700; }

.prologue-visual{
  position:relative;
  aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
}
.viz-ring{
  position:relative;
  width:min(100%, 460px);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid var(--border);
  box-shadow:0 0 40px rgba(0,255,229,.2), inset 0 0 40px rgba(0,255,229,.05);
  animation:ringSpin 30s linear infinite;
}
@keyframes ringSpin{ to{ transform:rotate(360deg); } }
.viz-ring-inner{
  position:absolute; inset:10%;
  border-radius:50%;
  border:1px dashed rgba(255,43,214,.5);
  animation:ringSpin 18s linear reverse infinite;
}
.viz-ring-orbit{
  position:absolute; inset:18%;
  border-radius:50%;
  border:1px solid rgba(0,255,229,.2);
}
.viz-ring-orbit::before{
  content:''; position:absolute; top:-6px; left:50%;
  width:10px; height:10px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 12px var(--cyan);
  transform:translateX(-50%);
}
.viz-ring-orbit.orbit-2{
  inset:34%;
  border-color:rgba(255,43,214,.35);
  animation:ringSpin 12s linear reverse infinite;
}
.viz-ring-orbit.orbit-2::before{ background:var(--pink); box-shadow:0 0 12px var(--pink); }
.viz-ring-core{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:24%; height:24%;
  border-radius:50%;
  background:radial-gradient(circle, var(--cyan), transparent 70%);
  display:flex; align-items:center; justify-content:center;
  animation:corePulse 2.4s ease-in-out infinite;
}
@keyframes corePulse{
  0%,100%{ box-shadow:0 0 40px var(--cyan); }
  50%{ box-shadow:0 0 80px var(--pink); }
}
.core-glyph{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(28px, 4vw, 52px);
  color:#001; text-shadow:0 0 20px rgba(255,255,255,.8);
}
.viz-ring-ticks{
  position:absolute; inset:0;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg 8deg, var(--cyan) 8deg 9deg,
      transparent 9deg 18deg, var(--cyan) 18deg 19deg,
      transparent 19deg 36deg, var(--pink) 36deg 37deg,
      transparent 37deg 90deg, var(--cyan) 90deg 91deg,
      transparent 91deg 360deg
    );
  mask-image:radial-gradient(circle, transparent 46%, #000 47%, #000 50%, transparent 51%);
}

.viz-caption{
  position:absolute; bottom:-8px; left:0; right:0;
  text-align:center;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-dim); letter-spacing:.2em;
}
.viz-line{ display:block; color:var(--cyan); margin-top:4px; min-height:16px; }

/* =========================================================
   SOLUTION / FEATURES
   ========================================================= */
.features-grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:980px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .features-grid{ grid-template-columns:1fr; } }

.feature{
  position:relative;
  padding:24px 22px 22px;
  background:
    linear-gradient(180deg, rgba(0,255,229,.03), rgba(0,0,0,.5));
  border:1px solid rgba(0,255,229,.18);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition:transform .3s, border-color .3s, box-shadow .3s;
  opacity:0;
  transform:translateY(24px);
  animation:featureIn .7s forwards ease var(--d, 0ms);
}
@keyframes featureIn{
  to{ opacity:1; transform:translateY(0); }
}

.feature::before{
  content:''; position:absolute;
  top:0; left:0; width:40px; height:1px;
  background:var(--cyan); box-shadow:0 0 6px var(--cyan);
}
.feature::after{
  content:''; position:absolute;
  bottom:0; right:0; width:40px; height:1px;
  background:var(--pink); box-shadow:0 0 6px var(--pink);
}

.feature:hover{
  transform:translateY(-6px);
  border-color:var(--cyan);
  box-shadow:0 10px 30px rgba(0,255,229,.15), 0 0 30px rgba(0,255,229,.2);
}
.feature.accented{ border-color:rgba(255,43,214,.35); }
.feature.accented:hover{ box-shadow:0 10px 30px rgba(255,43,214,.2); border-color:var(--pink); }

.feature-head{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10px; letter-spacing:.25em;
  color:var(--ink-mut); margin-bottom:18px;
}
.feature-status{ color:var(--green); }
.feature.accented .feature-status{ color:var(--pink); }

.feature-icon{
  width:70px; height:70px; margin-bottom:18px;
  color:var(--cyan);
  filter:drop-shadow(0 0 10px rgba(0,255,229,.6));
}
.feature.accented .feature-icon{ color:var(--pink); filter:drop-shadow(0 0 10px rgba(255,43,214,.6)); }
.feature-icon svg{ width:100%; height:100%; }

.feature h3{
  font-family:var(--disp); font-weight:700;
  font-size:20px; line-height:1.15;
  margin:0 0 12px;
  letter-spacing:.04em;
}
.feature p{
  font-family:var(--mono); font-size:12.5px;
  color:var(--ink-dim); line-height:1.7;
  min-height:60px;
  margin:0 0 16px;
}
.feature p b{ color:var(--cyan); }
.feature.accented p b{ color:var(--pink); }

.feature-foot{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em;
  padding-top:12px;
  border-top:1px dashed rgba(0,255,229,.15);
  color:var(--ink-mut);
}

/* =========================================================
   ARCHITECTURE
   ========================================================= */
.section-arch{ background: linear-gradient(180deg, transparent, rgba(0,255,229,.02), transparent); }
.arch-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:40px;
}
@media (max-width:900px){ .arch-grid{ grid-template-columns:1fr; } }

.layers{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:10px;
}
.layer{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:14px 18px;
  background:rgba(0,255,229,.03);
  border:1px solid rgba(0,255,229,.12);
  font-family:var(--mono); font-size:12px;
  letter-spacing:.2em;
  color:var(--ink);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:.3s;
  cursor:pointer;
}
.layer:hover{ background:rgba(0,255,229,.08); border-color:var(--cyan); color:var(--cyan); }
.layer.active{
  background:linear-gradient(90deg, rgba(0,255,229,.2), rgba(255,43,214,.08));
  border-color:var(--cyan);
  color:var(--cyan);
  box-shadow:0 0 22px rgba(0,255,229,.3);
}
.layer-id{
  font-family:var(--disp); font-weight:900;
  color:var(--pink); letter-spacing:.1em;
  min-width:32px;
}
.layer i{
  margin-left:auto;
  width:32px; height:6px;
  background:repeating-linear-gradient(90deg, var(--cyan) 0 2px, transparent 2px 4px);
  opacity:.6;
}

.arch-panels{
  display:grid; grid-template-rows:auto auto; gap:20px;
}
.panel{
  padding:24px;
  background:rgba(0,0,0,.45);
  border:1px solid var(--border);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  color:var(--ink-dim); margin-bottom:14px;
}
.panel-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px var(--green);
  animation:pulse 1.2s infinite;
}
.panel-title{
  font-family:var(--disp); font-weight:700;
  font-size:24px; margin:0 0 12px;
  color:var(--cyan); text-shadow:0 0 12px rgba(0,255,229,.4);
}
.panel p{
  font-family:var(--mono); font-size:13px; line-height:1.8;
  color:var(--ink-dim);
}
.panel p b{ color:var(--cyan); }

.panel-meters{
  margin-top:18px; display:flex; flex-direction:column; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
}
.meter{ display:flex; align-items:center; gap:12px; color:var(--ink-dim); }
.meter span{ min-width:90px; }
.meter b{ color:var(--cyan); min-width:46px; text-align:right; }
.meter-bar{
  flex:1; height:6px;
  background:rgba(0,255,229,.08);
  border:1px solid rgba(0,255,229,.2);
  overflow:hidden;
}
.meter-bar i{
  display:block; height:100%;
  width:var(--v, 50%);
  background:linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow:0 0 8px var(--cyan);
  animation:meterPulse 2s ease-in-out infinite;
}
@keyframes meterPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.3); }
}

.panel-ascii pre{
  margin:0;
  font-family:var(--mono); font-size:12px;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,255,229,.4);
  line-height:1.4;
  overflow-x:auto;
}

/* =========================================================
   PROTOCOL / TIMELINE
   ========================================================= */
.timeline{
  list-style:none; padding:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  position:relative;
}
.timeline::before{
  content:'';
  position:absolute;
  top:8px; left:2%; right:2%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--cyan), transparent);
  box-shadow:0 0 8px rgba(0,255,229,.4);
}
@media (max-width:800px){
  .timeline{ grid-template-columns:1fr; }
  .timeline::before{ top:0; bottom:0; left:8px; right:auto; width:1px; height:auto; background:linear-gradient(180deg, transparent, var(--cyan), var(--pink), transparent); }
}

.t-node{ position:relative; padding-top:26px; }
.t-dot{
  position:absolute; top:0; left:0;
  width:18px; height:18px;
  border:2px solid var(--cyan);
  background:var(--bg-0);
  transform:rotate(45deg);
  box-shadow:0 0 10px var(--cyan);
}
.t-node.active .t-dot{
  background:var(--pink); border-color:var(--pink);
  box-shadow:0 0 16px var(--pink);
  animation:pulse 1s infinite;
}
@media (max-width:800px){
  .t-node{ padding:0 0 0 32px; }
}
.t-card{
  padding:18px 18px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.4);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition:.3s;
}
.t-card:hover{
  border-color:var(--cyan);
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,255,229,.15);
}
.t-date{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.25em;
  color:var(--cyan);
}
.t-card h4{
  font-family:var(--disp); font-weight:700;
  font-size:18px; margin:8px 0 8px;
  letter-spacing:.06em;
}
.t-card p{
  margin:0; font-family:var(--mono); font-size:12px;
  color:var(--ink-dim); line-height:1.7;
}
.t-node.active .t-card{
  border-color:var(--pink);
  background:linear-gradient(180deg, rgba(255,43,214,.08), rgba(0,0,0,.5));
}

/* =========================================================
   CTA CLOSING
   ========================================================= */
.section-cta{
  padding:140px var(--pad-x);
  background:
    radial-gradient(800px 400px at 50% 50%, rgba(255,43,214,.12), transparent 70%);
}
.cta-frame{
  position:relative;
  max-width:900px; margin:0 auto;
  padding:60px 40px;
  background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,20,25,.4));
  border:1px solid var(--border);
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
}
.cta-corner{
  position:absolute; width:30px; height:30px;
  border:2px solid var(--cyan);
  box-shadow:0 0 10px rgba(0,255,229,.5);
}
.cta-corner.tl{ top:-2px; left:-2px; border-right:0; border-bottom:0; }
.cta-corner.tr{ top:-2px; right:-2px; border-left:0; border-bottom:0; }
.cta-corner.bl{ bottom:-2px; left:-2px; border-right:0; border-top:0; }
.cta-corner.br{ bottom:-2px; right:-2px; border-left:0; border-top:0; }

.cta-warn{
  text-align:center;
  font-family:var(--mono); font-size:13px;
  letter-spacing:.3em; color:var(--yellow);
  border:1px solid rgba(255,228,25,.35);
  padding:8px; margin-bottom:24px;
  background:rgba(255,228,25,.05);
}

.cta-lead{
  text-align:center;
  font-family:var(--mono); font-size:15px;
  color:var(--ink-dim); line-height:1.9;
  margin:0 0 32px;
}
.cta-lead b{ color:var(--pink); text-shadow:0 0 8px rgba(255,43,214,.6); }

.countdown{
  display:flex; justify-content:center; align-items:flex-end;
  gap:8px; margin:0 0 36px;
  font-family:var(--mega);
}
.cd-unit{
  display:flex; flex-direction:column; align-items:center;
  padding:16px 18px;
  min-width:78px;
  border:1px solid var(--border);
  background:rgba(0,0,0,.5);
  color:var(--cyan);
  box-shadow:inset 0 0 12px rgba(0,255,229,.1);
}
.cd-unit span{
  font-size:clamp(28px, 4vw, 42px);
  line-height:1;
  text-shadow:0 0 14px rgba(0,255,229,.5);
}
.cd-unit em{
  font-style:normal;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.3em;
  color:var(--ink-mut); margin-top:6px;
}
.cd-sep{
  font-family:var(--mega); font-size:42px;
  color:var(--pink);
  animation:blink 1s steps(2) infinite;
}

.cta-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:640px; margin:0 auto;
}
.cta-field{
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.25em; color:var(--cyan);
}
.cta-field input{
  padding:12px 14px;
  font-family:var(--mono); font-size:14px;
  color:var(--ink); background:rgba(0,0,0,.5);
  border:1px solid var(--border);
  outline:none;
  transition:.2s;
}
.cta-field input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 14px rgba(0,255,229,.3);
  background:rgba(0,255,229,.04);
}
.cta-form .cta-primary.big{
  grid-column:1 / -1;
  justify-content:center;
}
.cta-msg{
  grid-column:1 / -1;
  min-height:20px;
  text-align:center;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.2em;
}
.cta-msg.ok{ color:var(--green); }
.cta-msg.err{ color:var(--pink); }

@media (max-width:600px){
  .cta-form{ grid-template-columns:1fr; }
  .cd-unit{ min-width:60px; padding:10px 12px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding:60px var(--pad-x) 30px;
  border-top:1px solid rgba(0,255,229,.15);
  background:linear-gradient(180deg, transparent, rgba(0,255,229,.02));
  position:relative;
}
.footer-top{
  display:grid; grid-template-columns:1fr 2fr; gap:40px;
  max-width:1400px; margin:0 auto;
}
.footer-brand{ display:flex; align-items:center; gap:16px; }
.footer-cols{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  font-family:var(--mono); font-size:12px;
}
.footer-cols h5{
  margin:0 0 12px;
  font-family:var(--disp); font-weight:700;
  font-size:12px; letter-spacing:.3em;
  color:var(--cyan);
}
.footer-cols a{
  display:block; padding:4px 0;
  color:var(--ink-dim);
  transition:.2s;
}
.footer-cols a:hover{ color:var(--cyan); text-shadow:0 0 6px var(--cyan); padding-left:6px; }

.footer-bar{
  margin:36px 0 18px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--pink), var(--cyan), transparent);
}

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
  max-width:1400px; margin:0 auto;
  font-family:var(--mono); font-size:11px;
  color:var(--ink-mut); letter-spacing:.2em;
}

.footer-barcode{
  display:inline-flex; gap:2px; height:22px;
}
.footer-barcode i{
  display:block; background:var(--ink-dim);
  width:2px; height:100%;
}
.footer-barcode i:nth-child(2n){ width:1px; height:70%; }
.footer-barcode i:nth-child(3n){ width:3px; background:var(--cyan); }
.footer-barcode i:nth-child(5n){ width:1px; height:50%; background:var(--pink); }

@media (max-width:800px){
  .footer-top{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   FLICKER & MISC
   ========================================================= */
@keyframes flickerSoft{
  0%,100%{ opacity:1; }
  92%{ opacity:.6; }
  94%{ opacity:1; }
  96%{ opacity:.4; }
}

/* Reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.in{
  opacity:1; transform:none;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}