/* ============================================================
   NEXUS-7 // Project CHIMERA  —  Cyberpunk Landing Page
   ============================================================ */

:root{
    --bg:        #05060a;
    --bg-2:      #080b14;
    --panel:     rgba(10,14,24,.72);
    --cyan:      #00f0ff;
    --magenta:   #ff2bd6;
    --green:     #39ff14;
    --yellow:    #ffe600;
    --txt:       #cfe6ee;
    --txt-dim:   #6b7d8a;
    --line:      rgba(0,240,255,.16);
    --glow-c:    0 0 12px rgba(0,240,255,.55), 0 0 26px rgba(0,240,255,.25);
    --glow-m:    0 0 12px rgba(255,43,214,.55), 0 0 26px rgba(255,43,214,.25);
    --ff-head:   'Orbitron', sans-serif;
    --ff-mono:   'Share Tech Mono', monospace;
    --ff-body:   'Rajdhani', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    background:var(--bg);
    color:var(--txt);
    font-family:var(--ff-body);
    overflow-x:hidden;
    line-height:1.6;
    cursor:none;
}
@media (hover:none){ body{cursor:auto} }

::selection{background:var(--magenta);color:#000}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#04060b}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--magenta));border-radius:2px}

/* ============================================================
   BOOT / LOADING SEQUENCE
   ============================================================ */
.boot{
    position:fixed;inset:0;z-index:9999;
    background:radial-gradient(circle at 50% 40%,#0a1018 0%,#04060b 70%,#000 100%);
    display:flex;align-items:center;justify-content:center;
    transition:opacity .6s ease, visibility .6s;
}
.boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot__inner{width:min(640px,90vw);text-align:left}
.boot__ascii{
    font-family:var(--ff-mono);
    color:var(--cyan);
    font-size:clamp(5px,1.5vw,11px);
    line-height:1.05;
    text-shadow:var(--glow-c);
    margin-bottom:24px;
    white-space:pre;
    animation:flicker 2.5s infinite;
}
.boot__log{
    font-family:var(--ff-mono);
    font-size:12px;color:var(--txt-dim);
    height:120px;overflow:hidden;margin-bottom:16px;
}
.boot__log span{display:block}
.boot__log span b{color:var(--green)}
.boot__bar{
    height:4px;background:rgba(0,240,255,.12);
    border:1px solid var(--line);position:relative;overflow:hidden;
}
.boot__bar span{
    position:absolute;inset:0;width:0;
    background:linear-gradient(90deg,var(--cyan),var(--magenta));
    box-shadow:var(--glow-c);transition:width .2s;
}
.boot__percent{
    font-family:var(--ff-head);font-weight:700;
    color:var(--cyan);margin-top:10px;font-size:20px;letter-spacing:2px;
}

/* ============================================================
   GLOBAL OVERLAYS
   ============================================================ */
.bg-canvas{position:fixed;inset:0;z-index:-3;opacity:.9}
.grid-overlay{
    position:fixed;inset:0;z-index:-2;pointer-events:none;
    background-image:
        linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 80%);
    -webkit-mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 80%);
}
.noise-overlay{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:noiseShift .4s steps(4) infinite;
}
.vignette{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    box-shadow:inset 0 0 220px rgba(0,0,0,.9);
}
.scanline{
    position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.25) 3px 4px);
    mix-blend-mode:overlay;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor,.cursor-ring{
    position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
    border-radius:50%;transform:translate(-50%,-50%);
    mix-blend-mode:screen;
}
.cursor{width:6px;height:6px;background:var(--cyan);box-shadow:var(--glow-c)}
.cursor-ring{
    width:34px;height:34px;border:1px solid var(--magenta);
    transition:width .18s,height .18s,border-color .18s,background .18s;
}
.cursor-ring.hot{width:54px;height:54px;border-color:var(--cyan);background:rgba(0,240,255,.06)}
@media (hover:none){.cursor,.cursor-ring{display:none}}

/* ============================================================
   HUD NAVIGATION
   ============================================================ */
.hud-nav{
    position:fixed;top:0;left:0;right:0;z-index:500;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px clamp(18px,4vw,54px);
    backdrop-filter:blur(6px);
    transition:background .3s,border-color .3s;
    border-bottom:1px solid transparent;
}
.hud-nav.scrolled{background:rgba(5,6,10,.78);border-bottom:1px solid var(--line)}
.hud-nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-head);font-weight:900;letter-spacing:3px;font-size:18px}
.brand-mark{color:var(--magenta);text-shadow:var(--glow-m);animation:spin 6s linear infinite}
.brand-text{color:#fff;text-shadow:var(--glow-c)}

.hud-nav__links{display:flex;gap:6px}
.nav-link{
    font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;
    padding:8px 14px;color:var(--txt-dim);position:relative;
    transition:color .2s;display:inline-flex;align-items:center;gap:6px;
}
.nav-idx{color:var(--cyan);opacity:.6;font-size:10px}
.nav-link::after{
    content:'';position:absolute;left:14px;right:14px;bottom:4px;height:1px;
    background:var(--cyan);transform:scaleX(0);transform-origin:left;
    transition:transform .25s;box-shadow:var(--glow-c);
}
.nav-link:hover{color:#fff}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link--cta{
    color:var(--magenta);border:1px solid rgba(255,43,214,.4);
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.nav-link--cta:hover{background:rgba(255,43,214,.12);color:#fff}

.hud-nav__sound{
    display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);
    color:var(--txt-dim);padding:7px 12px;font-family:var(--ff-mono);font-size:11px;
    cursor:none;transition:color .2s,border-color .2s;letter-spacing:1px;
}
.hud-nav__sound:hover{color:var(--cyan);border-color:var(--cyan)}
.sound-bars{display:flex;gap:2px;align-items:flex-end;height:14px}
.sound-bars i{width:2px;background:var(--cyan);height:30%;box-shadow:0 0 4px var(--cyan)}
.hud-nav__sound.on .sound-bars i{animation:eq .8s ease-in-out infinite}
.hud-nav__sound.on .sound-bars i:nth-child(2){animation-delay:.2s}
.hud-nav__sound.on .sound-bars i:nth-child(3){animation-delay:.4s}
.hud-nav__sound.on .sound-bars i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

.hud-nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:6px}
.hud-nav__burger span{width:26px;height:2px;background:var(--cyan);box-shadow:var(--glow-c);transition:.3s}
.hud-nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hud-nav__burger.open span:nth-child(2){opacity:0}
.hud-nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HUD CORNER FRAME
   ============================================================ */
.frame{position:fixed;inset:0;z-index:400;pointer-events:none}
.frame__corner{position:absolute;width:26px;height:26px;border:2px solid var(--cyan);opacity:.5}
.frame__corner--tl{top:14px;left:14px;border-right:0;border-bottom:0}
.frame__corner--tr{top:14px;right:14px;border-left:0;border-bottom:0}
.frame__corner--bl{bottom:14px;left:14px;border-right:0;border-top:0}
.frame__corner--br{bottom:14px;right:14px;border-left:0;border-top:0}
.frame__readout{
    position:fixed;bottom:18px;display:flex;flex-direction:column;gap:2px;
    font-family:var(--ff-mono);font-size:10px;color:var(--txt-dim);letter-spacing:1px;
}
.frame__readout--l{left:50px;text-align:left}
.frame__readout--r{right:50px;text-align:right}
.frame__readout span:last-child{color:var(--green)}
@media (max-width:860px){.frame__readout{display:none}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
    position:relative;display:inline-block;padding:15px 30px;
    font-family:var(--ff-head);font-weight:700;font-size:14px;letter-spacing:2px;
    cursor:none;overflow:hidden;transition:transform .2s,box-shadow .2s,color .2s;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn span{position:relative;z-index:2}
.btn--primary{background:var(--cyan);color:#04060b;box-shadow:var(--glow-c)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(0,240,255,.8),0 0 44px rgba(0,240,255,.4)}
.btn--ghost{background:transparent;color:var(--magenta);border:1px solid var(--magenta);box-shadow:inset 0 0 0 rgba(255,43,214,.4)}
.btn--ghost:hover{color:#fff;box-shadow:inset 0 0 20px rgba(255,43,214,.4),var(--glow-m);transform:translateY(-2px)}
.btn--lg{padding:18px 44px;font-size:16px}
/* glitch hover layer */
.btn::before{
    content:attr(data-text);position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:var(--magenta);clip-path:inset(0 0 50% 0);opacity:0;z-index:1;
    transform:translateX(-3px);
}
.btn:hover::before{animation:btnGlitch .35s steps(2) 2}
@keyframes btnGlitch{
    0%{opacity:.9;transform:translate(-3px,1px)}
    50%{opacity:.6;transform:translate(3px,-1px);clip-path:inset(50% 0 0 0)}
    100%{opacity:0;transform:translate(0)}
}

/* ============================================================
   GLITCH TEXT
   ============================================================ */
[data-glitch]{position:relative;display:inline-block}
[data-glitch].glitching::before,
[data-glitch].glitching::after{
    content:attr(data-glitch);position:absolute;top:0;left:0;width:100%;height:100%;
    overflow:hidden;
}
[data-glitch].glitching::before{color:var(--magenta);animation:gl1 .4s steps(2) infinite;clip-path:inset(0 0 60% 0)}
[data-glitch].glitching::after{color:var(--cyan);animation:gl2 .4s steps(2) infinite;clip-path:inset(60% 0 0 0)}
@keyframes gl1{0%{transform:translate(0)}50%{transform:translate(-3px,-1px)}100%{transform:translate(2px,1px)}}
@keyframes gl2{0%{transform:translate(0)}50%{transform:translate(3px,1px)}100%{transform:translate(-2px,-1px)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    min-height:100vh;position:relative;display:flex;align-items:center;
    padding:120px clamp(20px,6vw,90px) 80px;overflow:hidden;
}
.hero__bg-text{
    position:absolute;right:-4vw;top:50%;transform:translateY(-50%);
    font-family:var(--ff-head);font-weight:900;
    font-size:clamp(120px,28vw,420px);line-height:.8;
    color:transparent;-webkit-text-stroke:1px rgba(0,240,255,.07);
    letter-spacing:-10px;pointer-events:none;user-select:none;z-index:-1;
}
.hero__content{max-width:780px;position:relative;z-index:2}
.hero__tag{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--ff-mono);font-size:12px;letter-spacing:2px;
    color:var(--yellow);border:1px solid rgba(255,230,0,.3);
    padding:7px 16px;margin-bottom:28px;background:rgba(255,230,0,.05);
}
.hero__tag .blink{color:var(--magenta)}
.hero__title{
    font-family:var(--ff-head);font-weight:900;
    font-size:clamp(42px,8vw,108px);line-height:.98;letter-spacing:1px;
    margin-bottom:26px;
}
.hero__title .line{display:block;color:#fff;text-shadow:0 0 24px rgba(255,255,255,.15)}
.hero__title .accent{
    color:var(--cyan);
    text-shadow:var(--glow-c);
    background:linear-gradient(92deg,var(--cyan),var(--magenta));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__lead{
    font-family:var(--ff-mono);font-size:clamp(13px,1.5vw,16px);
    color:var(--txt-dim);line-height:1.9;margin-bottom:38px;max-width:560px;
}
.hero__lead b{color:var(--cyan)}
.hero__cta{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:54px}
.hero__stats{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.stat b{
    display:block;font-family:var(--ff-head);font-weight:700;
    font-size:clamp(26px,4vw,40px);color:#fff;text-shadow:var(--glow-c);
}
.stat span{font-family:var(--ff-mono);font-size:10px;letter-spacing:2px;color:var(--txt-dim)}

.hero__scroll{
    position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-family:var(--ff-mono);font-size:10px;letter-spacing:3px;color:var(--txt-dim);
}
.hero__scroll-line{width:1px;height:46px;background:linear-gradient(var(--cyan),transparent);position:relative;overflow:hidden}
.hero__scroll-line::after{content:'';position:absolute;top:0;left:0;width:100%;height:14px;background:var(--cyan);box-shadow:var(--glow-c);animation:scrollDot 1.8s ease-in-out infinite}
@keyframes scrollDot{0%{top:-14px}100%{top:46px}}

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{position:relative;padding:clamp(80px,12vh,150px) clamp(20px,6vw,90px);overflow:hidden}
.section--dark{background:linear-gradient(180deg,transparent,rgba(0,0,0,.4) 40%,transparent)}
.section__index{
    position:absolute;top:30px;right:clamp(20px,6vw,90px);
    font-family:var(--ff-head);font-weight:900;font-size:clamp(70px,12vw,160px);
    color:transparent;-webkit-text-stroke:1px rgba(255,43,214,.1);z-index:0;pointer-events:none;
}
.section__head{max-width:760px;margin-bottom:60px;position:relative;z-index:2}
.section__label{
    font-family:var(--ff-mono);font-size:13px;letter-spacing:3px;color:var(--magenta);
    display:inline-block;margin-bottom:14px;text-shadow:var(--glow-m);
}
.section__title{
    font-family:var(--ff-head);font-weight:900;
    font-size:clamp(30px,5.5vw,64px);line-height:1.05;color:#fff;letter-spacing:1px;
}
.section__sub{font-family:var(--ff-mono);color:var(--txt-dim);margin-top:18px;font-size:15px}

/* ============================================================
   PROLOGUE
   ============================================================ */
.prologue__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.prologue__text p{font-size:18px;margin-bottom:22px;color:#aebecb}
.prologue__text b{color:#fff}
.prologue__text .hl{color:var(--cyan);text-shadow:var(--glow-c);font-weight:600}
.prologue__panel{
    background:var(--panel);border:1px solid var(--line);
    clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
    backdrop-filter:blur(4px);
}
.panel__bar{
    display:flex;justify-content:space-between;padding:12px 16px;
    border-bottom:1px solid var(--line);font-family:var(--ff-mono);font-size:11px;
    color:var(--txt-dim);letter-spacing:1px;
}
.panel__bar .blink{color:var(--magenta)}
.panel__body{
    padding:20px 18px;font-family:var(--ff-mono);font-size:13px;
    color:var(--green);min-height:230px;line-height:1.9;white-space:pre-wrap;
}
.panel__body .cur{display:inline-block;width:8px;height:15px;background:var(--green);vertical-align:middle;animation:blinkCur .8s steps(1) infinite}
@keyframes blinkCur{50%{opacity:0}}
.panel__foot{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:10px;color:var(--txt-dim)}

/* ============================================================
   FEATURES
   ============================================================ */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:2}
.feature{
    position:relative;padding:36px 28px;background:var(--panel);
    border:1px solid var(--line);overflow:hidden;
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
    transition:transform .3s,border-color .3s;
}
.feature::after{content:attr(data-num);position:absolute;top:14px;right:18px;font-family:var(--ff-head);font-weight:900;font-size:46px;color:rgba(0,240,255,.06)}
.feature:hover{transform:translateY(-6px);border-color:var(--cyan)}
.feature:hover .feature__icon{color:var(--magenta);transform:rotate(-8deg) scale(1.08)}
.feature__icon{width:54px;height:54px;color:var(--cyan);margin-bottom:22px;filter:drop-shadow(var(--glow-c));transition:transform .3s,color .3s}
.feature h3{font-family:var(--ff-head);font-weight:700;font-size:20px;color:#fff;margin-bottom:14px;line-height:1.3}
.feature h3 span{display:block;font-family:var(--ff-mono);font-size:11px;color:var(--cyan);font-weight:400;letter-spacing:1px;margin-top:6px}
.feature p{font-size:15px;color:var(--txt-dim);line-height:1.7;margin-bottom:22px}
.feature__meter{height:3px;background:rgba(0,240,255,.1);position:relative;overflow:hidden}
.feature__meter i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));box-shadow:var(--glow-c);transition:width 1.2s ease}
.feature.in-view .feature__meter i{width:var(--w)}

/* ============================================================
   ARCHITECTURE
   ============================================================ */
.arch{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;position:relative;z-index:2}
.arch__diagram{position:relative;display:flex;flex-direction:column;gap:14px}
.layer{
    position:relative;padding:22px 24px 22px 80px;
    background:var(--panel);border:1px solid var(--line);
    clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
    transition:transform .3s,border-color .3s,box-shadow .3s;
}
.layer::before{
    content:attr(data-layer);position:absolute;left:20px;top:50%;transform:translateY(-50%);
    font-family:var(--ff-head);font-weight:900;font-size:24px;color:var(--cyan);text-shadow:var(--glow-c);
}
.layer:hover{transform:translateX(10px);border-color:var(--magenta);box-shadow:-8px 0 24px rgba(255,43,214,.15)}
.layer__name{display:block;font-family:var(--ff-head);font-weight:700;font-size:17px;color:#fff;letter-spacing:1px}
.layer__desc{display:block;font-family:var(--ff-mono);font-size:12px;color:var(--txt-dim);margin-top:4px}
.arch__flow{position:absolute;left:39px;top:0;bottom:0;width:2px;background:rgba(0,240,255,.12);z-index:-1}
.arch__flow span{position:absolute;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:var(--glow-c);animation:flowDown 2.4s linear infinite}
.arch__flow span:nth-child(2){animation-delay:.8s}
.arch__flow span:nth-child(3){animation-delay:1.6s}
@keyframes flowDown{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

.arch__readouts{display:flex;flex-direction:column;gap:18px}
.readout-card{
    padding:24px 26px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--magenta);
}
.readout-card__val{font-family:var(--ff-head);font-weight:900;font-size:clamp(28px,4vw,42px);color:#fff;text-shadow:var(--glow-c)}
.readout-card__val span{color:var(--cyan)}
.readout-card__lbl{font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;color:var(--txt-dim);margin-top:8px}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline{list-style:none;position:relative;max-width:820px;margin:0 auto;padding-left:38px;z-index:2}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--cyan),var(--magenta));opacity:.4}
.timeline__item{position:relative;padding:0 0 46px 26px}
.timeline__item::before{
    content:'';position:absolute;left:-34px;top:4px;width:14px;height:14px;
    border:2px solid var(--cyan);background:var(--bg);border-radius:50%;transition:.3s;
}
.timeline__item.done::before{background:var(--cyan);box-shadow:var(--glow-c)}
.timeline__item.active::before{background:var(--magenta);border-color:var(--magenta);box-shadow:var(--glow-m);animation:pulse 1.6s ease-in-out infinite}
.timeline__date{font-family:var(--ff-mono);font-size:12px;letter-spacing:2px;color:var(--cyan)}
.timeline__item h3{font-family:var(--ff-head);font-weight:700;font-size:21px;color:#fff;margin:6px 0 10px}
.timeline__item.active h3{color:var(--magenta);text-shadow:var(--glow-m)}
.timeline__item p{color:var(--txt-dim);font-size:15px;max-width:560px}
.timeline__item p b{color:var(--yellow)}

/* ============================================================
   CTA CLOSING
   ============================================================ */
.cta{position:relative;padding:clamp(90px,16vh,170px) 20px;text-align:center;overflow:hidden}
.cta__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:700px;height:700px;max-width:120vw;background:radial-gradient(circle,rgba(255,43,214,.16),transparent 60%);filter:blur(40px);pointer-events:none}
.cta__content{position:relative;z-index:2;max-width:680px;margin:0 auto}
.cta__title{font-family:var(--ff-head);font-weight:900;font-size:clamp(34px,7vw,82px);color:#fff;margin:14px 0 20px;letter-spacing:1px;text-shadow:0 0 30px rgba(0,240,255,.3)}
.cta__lead{font-family:var(--ff-mono);color:var(--txt-dim);font-size:15px;line-height:1.9;margin-bottom:40px}

.countdown{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:44px;flex-wrap:wrap}
.countdown__unit{display:flex;flex-direction:column;align-items:center;min-width:74px}
.countdown__unit b{
    font-family:var(--ff-head);font-weight:900;font-size:clamp(34px,6vw,56px);color:var(--cyan);
    text-shadow:var(--glow-c);background:rgba(0,240,255,.05);padding:8px 14px;border:1px solid var(--line);min-width:78px;
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.countdown__unit span{font-family:var(--ff-mono);font-size:10px;letter-spacing:2px;color:var(--txt-dim);margin-top:8px}
.countdown__sep{font-family:var(--ff-head);font-weight:900;font-size:36px;color:var(--magenta);animation:blinkCur 1s steps(1) infinite}

.cta__form{max-width:480px;margin:0 auto}
.field{position:relative;margin-bottom:24px;text-align:left}
.field input{
    width:100%;background:rgba(0,240,255,.04);border:1px solid var(--line);
    padding:18px 16px;color:#fff;font-family:var(--ff-mono);font-size:15px;
    cursor:none;transition:border-color .25s,background .25s;outline:none;
}
.field input:focus{border-color:var(--cyan);background:rgba(0,240,255,.08)}
.field label{
    position:absolute;left:16px;top:18px;color:var(--txt-dim);font-family:var(--ff-mono);
    font-size:13px;pointer-events:none;transition:.2s;letter-spacing:1px;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label{
    top:-9px;left:10px;font-size:10px;color:var(--cyan);background:var(--bg);padding:0 6px;
}
.field__line{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--cyan);box-shadow:var(--glow-c);transition:width .3s}
.field input:focus ~ .field__line{width:100%}
.cta__msg{font-family:var(--ff-mono);font-size:13px;margin-top:18px;min-height:20px}
.cta__msg.ok{color:var(--green)}
.cta__msg.err{color:var(--magenta)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);padding:54px clamp(20px,6vw,90px) 30px;background:rgba(0,0,0,.4);position:relative;z-index:2}
.footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.footer__brand{font-family:var(--ff-head);font-weight:900;letter-spacing:2px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#fff}
.footer__brand p{flex-basis:100%;font-family:var(--ff-mono);font-size:12px;color:var(--txt-dim);font-weight:400;letter-spacing:1px;margin-top:6px}
.footer__links{display:flex;gap:24px;flex-wrap:wrap}
.ft-link{font-family:var(--ff-mono);font-size:12px;letter-spacing:1px;color:var(--txt-dim);transition:color .2s}
.ft-link:hover{color:var(--cyan);text-shadow:var(--glow-c)}
.footer__social{display:flex;gap:12px}
.soc{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);color:var(--txt-dim);transition:.25s;font-size:14px}
.soc:hover{color:var(--magenta);border-color:var(--magenta);box-shadow:var(--glow-m);transform:translateY(-3px)}
.footer__bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);font-family:var(--ff-mono);font-size:11px;color:var(--txt-dim);letter-spacing:1px}
.footer__barcode{color:var(--cyan);letter-spacing:0;opacity:.5}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.in-view{opacity:1;transform:none}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes flicker{0%,100%{opacity:1}48%{opacity:1}50%{opacity:.6}52%{opacity:1}92%{opacity:.8}}
@keyframes noiseShift{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(2%,3%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
.blink{animation:blinkCur 1.2s steps(1) infinite}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
    .prologue__grid,.arch,.features{grid-template-columns:1fr}
    .features{gap:20px}
}
@media (max-width:820px){
    .hud-nav__links{
        position:fixed;top:0;right:0;height:100vh;width:min(300px,80vw);
        flex-direction:column;justify-content:center;gap:18px;padding:40px;
        background:rgba(5,7,12,.97);backdrop-filter:blur(10px);
        border-left:1px solid var(--line);transform:translateX(100%);transition:transform .4s ease;
    }
    .hud-nav__links.open{transform:translateX(0)}
    .nav-link{font-size:16px}
    .hud-nav__burger{display:flex}
    .hud-nav__sound{display:none}
    .hero__title{font-size:clamp(38px,12vw,72px)}
}
@media (max-width:520px){
    .hero__cta{flex-direction:column}
    .btn{text-align:center}
    .countdown__sep{display:none}
    .footer__bar{justify-content:center;text-align:center}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto}
    .reveal{opacity:1;transform:none}
}