/* ═══════════════════════════════════════════════════════════════════════
   NOBUG COMPANY — STYLESHEET v3.0   PRO MAX
   Ultra-animations · No-JS-required effects · Cinematic feel
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── DESIGN TOKENS ─────────────────── */
:root {
    --cy:  #00f0ff;
    --mg:  #ff0055;
    --pu:  #9d4edd;
    --or:  #ff6600;
    --gr:  #00ff88;

    --bg:  #03030a;
    --bg2: #07070f;
    --sf:  rgba(11,12,24,.82);
    --sf2: rgba(15,17,34,.90);

    --bd:  rgba(0,240,255,.12);
    --bdh: rgba(0,240,255,.45);

    --t1: #ecf0fa;
    --t2: #7e8fa8;
    --t3: #3a4562;

    --f1: 'Orbitron', sans-serif;
    --f2: 'Rajdhani', sans-serif;
    --f3: 'Inter', sans-serif;

    --ease: cubic-bezier(0.16,1,0.3,1);
    --spring: cubic-bezier(0.34,1.56,0.64,1);
    --snap: cubic-bezier(0.25,0.46,0.45,0.94);

    --gcyan: 0 0 28px rgba(0,240,255,.38);
    --gmg:   0 0 28px rgba(255,0,85,.38);
    --gpu:   0 0 28px rgba(157,78,221,.38);
}

/* ─────────────────── RESET ─────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html  { scroll-behavior:smooth; background:var(--bg); color:var(--t1); overflow-x:hidden; font-size:16px; }
body  { font-family:var(--f3); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img   { display:block; max-width:100%; height:auto; }
a     { color:inherit; text-decoration:none; }
ul    { list-style:none; }

::-webkit-scrollbar        { width:5px; }
::-webkit-scrollbar-track  { background:var(--bg); }
::-webkit-scrollbar-thumb  { background:#131527; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--cy); box-shadow:0 0 6px var(--cy); }
::selection { background:var(--mg); color:#fff; }

/* ─── CUSTOM CURSOR ─── */
* { cursor: none !important; }

#cur-dot {
    position: fixed;
    top: -4px; left: -4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    transition: opacity .2s;
}

#cur-ring {
    position: fixed;
    top: -18px; left: -18px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 240, 255, 0.6);
    pointer-events: none;
    z-index: 9998;
    will-change: transform;
    transition: width .3s var(--ease), height .3s var(--ease),
                top .3s var(--ease), left .3s var(--ease),
                border-color .3s, opacity .2s;
}

/* Hover — ring grows, dot fades slightly */
#cur-ring.hover {
    width: 52px; height: 52px;
    top: -26px; left: -26px;
    border-color: rgba(0, 240, 255, 0.9);
}
#cur-ring.hover ~ #cur-dot,
body:has(#cur-ring.hover) #cur-dot { opacity: .4; }

/* Press — ring shrinks */
#cur-ring.pressed {
    width: 20px; height: 20px;
    top: -10px; left: -10px;
    border-color: rgba(255, 0, 85, 0.8);
}

/* ─────────────────── LAYOUT ─────────────────── */
.container { max-width:1180px; margin:0 auto; padding:0 28px; position:relative; z-index:2; }
.text-c    { text-align:center; }
.section   { padding:110px 0; position:relative; z-index:2; }

/* colour utils */
.ctext { color:var(--cy); text-shadow:0 0 20px rgba(0,240,255,.5); }
.mtext { color:var(--mg); text-shadow:0 0 20px rgba(255,0,85,.5); }
.cyan  { color:var(--cy); }
.mg    { color:var(--mg); }

.gtext {
    background:linear-gradient(135deg, var(--cy) 0%, var(--mg) 55%, var(--pu) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    display:inline-block; background-size:300%;
    animation:gshift 6s ease infinite;
}

/* ═══════════════════════════════════════════════════════
   WORLD BACKGROUND — minimal / sobre
═══════════════════════════════════════════════════════ */
.world-bg {
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}

/* aurora — désactivé */
.aurora { display:none; }

/* dot grid — très subtil, quasi invisible */
.world-grid {
    position:absolute; inset:0;
    background-image:radial-gradient(circle, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

/* scanlines — désactivé */
.world-scan { display:none; }

/* noise — désactivé */
.world-noise { display:none; }

/* vignette douce sur les bords */
.world-bg::after {
    content:'';
    position:absolute; inset:0;
    background:radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,.55) 100%);
}

/* floating orbs — désactivés */
.orb { display:none; }

/* particles — désactivées */
.px { display:none; }

/* ═══════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════ */
.navbar {
    position:fixed; top:0; left:0; width:100%; z-index:1000;
    background:rgba(3,3,10,.7);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border-bottom:1px solid transparent;
    transition:background .4s var(--ease), border-color .4s, box-shadow .4s;
}
.navbar.scrolled {
    background:rgba(3,3,10,.95);
    border-color:rgba(0,240,255,.14);
    box-shadow:0 4px 40px rgba(0,0,0,.6), 0 0 1px rgba(0,240,255,.15);
}

.nav-wrap {
    max-width:1240px; margin:0 auto; padding:15px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:28px;
}

/* Brand */
.brand { display:flex; align-items:center; gap:10px; }
.brand-ico {
    width:36px; height:36px; border-radius:8px;
    background:linear-gradient(135deg, rgba(0,240,255,.15), rgba(255,0,85,.12));
    border:1px solid rgba(0,240,255,.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--cy); font-size:1rem;
    transition:all .35s var(--spring);
    box-shadow:0 0 12px rgba(0,240,255,.18);
}
.brand:hover .brand-ico { transform:rotate(-10deg) scale(1.12); box-shadow:var(--gcyan); }
.brand-name {
    font-family:var(--f1); font-size:1.5rem; font-weight:900;
    letter-spacing:2px; color:#fff;
}
.brand-name span { color:var(--cy); }
.brand-badge {
    font-family:var(--f2); font-size:.62rem; font-weight:700;
    letter-spacing:1.5px; background:var(--cy); color:#000;
    padding:2px 7px; border-radius:3px;
    align-self:flex-end; margin-bottom:1px;
}

/* Nav links */
.nav-menu { display:flex; align-items:center; gap:4px; }

.nlink {
    font-family:var(--f2); font-size:.95rem; font-weight:600;
    letter-spacing:.8px; text-transform:uppercase;
    color:var(--t2); padding:8px 14px; border-radius:6px;
    position:relative; overflow:hidden;
    transition:color .2s;
}
.nlink::before {
    content:'';
    position:absolute; bottom:5px; left:14px; right:14px;
    height:1.5px; background:var(--cy);
    box-shadow:0 0 6px var(--cy);
    transform:scaleX(0); transform-origin:left;
    transition:transform .3s var(--ease);
}
.nlink::after {
    content:attr(data-label);
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f2); font-size:.95rem; font-weight:700;
    color:var(--cy); padding:8px 14px;
    transform:translateY(110%);
    transition:transform .3s var(--ease);
}
.nlink:hover { color:transparent; }
.nlink:hover::before { transform:scaleX(1); }
.nlink:hover::after  { transform:translateY(0); }

/* Nav CTA */
.nav-cta {
    font-family:var(--f1); font-size:.72rem; font-weight:700;
    letter-spacing:1.2px; text-transform:uppercase;
    color:#000; background:var(--cy);
    padding:10px 20px; border-radius:7px;
    position:relative; overflow:hidden;
    box-shadow:0 0 20px rgba(0,240,255,.3);
    transition:all .3s var(--ease);
}
.nav-cta-bg {
    position:absolute; top:50%; left:-60%; width:60%; height:200%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    transform:translateY(-50%) skewX(-20deg);
    animation:nav-shine 3.5s ease infinite;
}
.nav-cta:hover { transform:translateY(-2px); box-shadow:0 0 35px rgba(0,240,255,.55); background:#fff; }

/* burger */
.burger-btn { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; }
.burger-btn span { display:block; width:22px; height:2px; background:var(--cy); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
#nav-cb:checked ~ .nav-menu { transform:translateY(0); opacity:1; pointer-events:auto; }
#nav-cb:checked ~ .burger-btn span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
#nav-cb:checked ~ .burger-btn span:nth-child(2) { opacity:0; }
#nav-cb:checked ~ .burger-btn span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════════ */
.sec-hd  { margin-bottom:60px; }
.sec-tag {
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f1); font-size:.68rem; font-weight:700;
    letter-spacing:2.5px; text-transform:uppercase;
    color:var(--cy); background:rgba(0,240,255,.07);
    border:1px solid rgba(0,240,255,.28);
    padding:6px 16px; border-radius:100px; margin-bottom:18px;
    position:relative; overflow:hidden;
}
.sec-tag::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, transparent, rgba(0,240,255,.15), transparent);
    transform:translateX(-100%);
    animation:tag-sweep 4s ease infinite;
}
.tag-mg { color:var(--mg); background:rgba(255,0,85,.07); border-color:rgba(255,0,85,.28); }
.tag-mg::after { background:linear-gradient(90deg, transparent, rgba(255,0,85,.15), transparent); }

.sec-title {
    font-family:var(--f1); font-size:clamp(1.85rem,3.8vw,3.1rem); font-weight:900;
    letter-spacing:.8px; text-transform:uppercase; line-height:1.18; margin-bottom:16px;
}
.sec-sub {
    font-size:1.08rem; color:var(--t2); max-width:620px; margin:0 auto; line-height:1.75;
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS — REVEAL
═══════════════════════════════════════════════════════ */
.anim-fade-up {
    animation:fade-up .85s var(--ease) var(--d,0s) both;
}
.anim-fade-right {
    animation:fade-right .9s var(--ease) var(--d,0s) both;
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
/* Primary — fire button */
.btn-fire {
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--f1); font-size:.8rem; font-weight:700; letter-spacing:1.5px;
    text-transform:uppercase; color:#fff;
    background:linear-gradient(135deg, #c0003d 0%, var(--mg) 45%, #7a002a 100%);
    padding:16px 38px; border-radius:8px;
    position:relative; overflow:hidden;
    box-shadow:0 0 30px rgba(255,0,85,.4), inset 0 1px 0 rgba(255,255,255,.12);
    transition:transform .3s var(--spring), box-shadow .3s;
}
.btn-fire:hover {
    transform:translateY(-4px) scale(1.025);
    box-shadow:0 0 60px rgba(255,0,85,.65), 0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
/* ripple rings */
.btn-fire-ring {
    position:absolute; top:50%; left:50%;
    width:100%; padding-top:100%;
    transform:translate(-50%,-50%) scale(0);
    background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
    border-radius:50%;
    animation:ring-pulse 2.8s ease-in-out infinite;
}
.btn-fire-ring.r2 { animation-delay:1.4s; }
.btn-fire-txt { position:relative; z-index:1; }

/* Ghost / wire button */
.btn-wire {
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--f1); font-size:.8rem; font-weight:700; letter-spacing:1.2px;
    text-transform:uppercase;
    padding:16px 34px; border-radius:8px;
    position:relative; overflow:hidden;
    background:rgba(255,255,255,.04);
    transition:all .3s var(--ease);
}
/* animated border via outline + pseudo */
.btn-wire-border {
    position:absolute; inset:0; border-radius:8px;
    border:1px solid rgba(255,255,255,.2);
    transition:border-color .3s;
}
.btn-wire-txt { position:relative; z-index:1; color:var(--t1); transition:color .3s; }
.btn-wire::before {
    content:''; position:absolute; inset:0; border-radius:8px;
    background:linear-gradient(135deg, rgba(0,240,255,.12), rgba(255,0,85,.08));
    opacity:0; transition:opacity .3s;
}
.btn-wire:hover { transform:translateY(-4px); }
.btn-wire:hover::before { opacity:1; }
.btn-wire:hover .btn-wire-border { border-color:var(--cy); box-shadow:var(--gcyan); }
.btn-wire:hover .btn-wire-txt { color:var(--cy); }

.btn-lg { padding:18px 48px; font-size:.88rem; }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero {
    min-height:100vh; padding:148px 0 90px;
    display:flex; flex-direction:column;
    justify-content:center; position:relative; z-index:2;
    overflow:hidden;
}

/* animated stripe at very top */
.hero-bar {
    position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,
        transparent 0%, var(--cy) 20%, var(--mg) 50%, var(--pu) 80%, transparent 100%);
    background-size:400% 100%;
    animation:bar-race 4s ease-in-out infinite;
}

/* Watermark */
.hero-wm {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--f1); font-size:clamp(8rem,18vw,22rem); font-weight:900;
    color:rgba(255,255,255,.018); letter-spacing:8px;
    pointer-events:none; white-space:nowrap;
    animation:wm-breathe 8s ease-in-out infinite;
}

.hero-wrap {
    max-width:1240px; margin:0 auto; padding:0 28px;
    display:grid; grid-template-columns:1.1fr .9fr;
    gap:56px; align-items:center; width:100%;
}

/* Eyebrow */
.h-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--f1); font-size:.68rem; font-weight:700; letter-spacing:1.5px;
    color:#ff5080;
    background:rgba(255,0,85,.1); border:1px solid rgba(255,0,85,.3);
    padding:6px 16px; border-radius:100px; margin-bottom:26px;
}
.eyebrow-dot {
    width:7px; height:7px; border-radius:50%;
    background:var(--mg); box-shadow:0 0 8px var(--mg);
    animation:dot-blink 1.6s ease infinite;
}

/* Title */
.h-title {
    font-family:var(--f1); font-size:clamp(2.3rem,4.6vw,3.9rem);
    font-weight:900; letter-spacing:-.5px; line-height:1.12;
    text-transform:uppercase; margin-bottom:28px;
    display:flex; flex-direction:column;
}
.ht-line { display:block; }
.ht-accent {
    background:linear-gradient(90deg, var(--cy) 0%, var(--mg) 55%, var(--pu) 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    background-size:200%;
    animation:gshift 5s ease infinite;
    position:relative;
}
/* glitch element */
.glitch-el::before, .glitch-el::after {
    content:attr(data-t);
    position:absolute; top:0; left:0;
    background:inherit; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    opacity:0;
}
.glitch-el::before { animation:gh1 6s infinite; transform:translate(-4px,0); clip-path:polygon(0 0,100% 0,100% 40%,0 40%); }
.glitch-el::after  { animation:gh2 6s infinite; transform:translate(4px,0);  clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%); }

.h-desc { font-size:1.1rem; color:var(--t2); line-height:1.78; max-width:540px; margin-bottom:36px; }

.h-actions { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:46px; }

/* Metrics strip */
.h-metrics {
    display:flex; align-items:center; gap:28px;
    padding-top:26px; border-top:1px solid rgba(255,255,255,.07);
}
.hm { display:flex; flex-direction:column; gap:4px; }
.hm-n {
    font-family:var(--f1); font-size:1.7rem; font-weight:900;
    color:#fff; line-height:1;
}
.hm-u { font-family:var(--f1); font-size:.6rem; color:var(--t3); letter-spacing:1.5px; }
.hm-line { width:1px; height:40px; background:rgba(255,255,255,.08); }
.hm-live {
    font-family:var(--f1); font-size:.85rem; font-weight:700;
    letter-spacing:2px; color:var(--mg);
    animation:live-pulse 2s ease infinite;
}

/* ─── HUD Visual ─── */
.hero-visual { position:relative; display:flex; justify-content:center; align-items:center; }

/* orbit rings */
.ring {
    position:absolute; border-radius:50%;
    border:1px solid rgba(0,240,255,.1);
    pointer-events:none;
}
.r-out { width:560px; height:560px; animation:spin 30s linear infinite; }
.r-mid { width:440px; height:440px; animation:spin 20s linear infinite reverse; border-color:rgba(255,0,85,.07); }
.r-in  { width:330px; height:330px; animation:spin 14s linear infinite; border-color:rgba(157,78,221,.08); }
/* dots on rings */
.r-out::before, .r-mid::before, .r-in::before {
    content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
    width:8px; height:8px; border-radius:50%;
}
.r-out::before { background:var(--cy); box-shadow:0 0 12px var(--cy), 0 0 24px var(--cy); }
.r-mid::before { background:var(--mg); box-shadow:0 0 10px var(--mg); }
.r-in::before  { background:var(--pu); box-shadow:0 0 8px var(--pu); }

.hud {
    position:relative; width:100%; max-width:450px;
    background:rgba(5,6,16,.92);
    border:1px solid rgba(0,240,255,.25);
    border-radius:12px; overflow:hidden;
    box-shadow:0 24px 70px rgba(0,0,0,.85), var(--gcyan);
    padding:12px;
    transition:box-shadow .4s;
}
.hud:hover { box-shadow:0 30px 90px rgba(0,0,0,.9), 0 0 60px rgba(0,240,255,.22); }

/* scan beam */
.hud-scanbeam {
    position:absolute; top:0; left:0; right:0; height:1.5px;
    background:linear-gradient(90deg, transparent, rgba(0,240,255,.9), transparent);
    z-index:10;
    animation:scanbeam 3s ease-in-out infinite;
}

.hud-head {
    display:flex; justify-content:space-between;
    font-family:var(--f1); font-size:.63rem; letter-spacing:1px;
    color:var(--cy); padding:4px 6px 10px;
}
.hud-pi { color:var(--mg); }

.hud-screen { position:relative; border-radius:6px; overflow:hidden; aspect-ratio:1/1; background:#000; }
.hud-img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.hud:hover .hud-img { transform:scale(1.06); }

/* RGB split */
.hud-rgb {
    position:absolute; inset:0; pointer-events:none;
    mix-blend-mode:screen;
    background:
        linear-gradient(rgba(255,0,0,.025) 50%, transparent 50%),
        linear-gradient(rgba(0,255,0,.015) 50%, transparent 50%),
        linear-gradient(rgba(0,0,255,.02)  50%, transparent 50%);
    background-size:100% 4px, 100% 6px, 100% 8px;
    animation:rgb-shift 8s ease infinite;
}
/* vignette */
.hud-vig {
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.7) 100%);
}
/* glitch stripes */
.hud-stripes {
    position:absolute; inset:0; pointer-events:none;
    animation:stripes-flash 7s ease infinite;
}
.hud-stripes::before {
    content:''; position:absolute;
    width:100%; height:6px; background:rgba(0,240,255,.25);
    top:30%; left:0;
    animation:stripe-travel 7s ease infinite;
}
.hud-stripes::after {
    content:''; position:absolute;
    width:100%; height:3px; background:rgba(255,0,85,.2);
    top:60%; left:0;
    animation:stripe-travel 7s ease infinite 3.5s;
}

.hud-foot { padding:10px 8px 2px; }
.hud-log  { display:flex; flex-direction:column; gap:5px; font-family:'Courier New',monospace; font-size:.7rem; }
.hlog     { display:flex; gap:8px; color:var(--t3); }
.hlog-c   { color:var(--cy); }
.hlog.active .hlog-c ~ * { color:var(--cy); }
.hlog.warn   { color:var(--mg); }
.tcursor  { animation:blink-cur 1s step-end infinite; }

/* HUD corners */
.hc {
    position:absolute; width:14px; height:14px; z-index:5;
    border-color:var(--cy);
}
.tl { top:-1px; left:-1px;  border-top:2px solid; border-left:2px solid;  border-radius:3px 0 0 0; }
.tr { top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; border-radius:0 3px 0 0; }
.bl { bottom:-1px; left:-1px;  border-bottom:2px solid; border-left:2px solid;  border-radius:0 0 0 3px; }
.br { bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; border-radius:0 0 3px 0; }

/* scroll hint */
.scroll-hint {
    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    font-family:var(--f1); font-size:.55rem; letter-spacing:3px; color:var(--t3);
    animation:hint-fade 2.5s ease-in-out infinite;
}
.sh-line {
    width:1px; height:36px;
    background:linear-gradient(to bottom, transparent, var(--cy));
    animation:sh-grow 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════
   FEATURES
═══════════════════════════════════════════════════════ */
.s-features {
    background:linear-gradient(180deg, transparent, rgba(0,240,255,.025) 50%, transparent);
}
.feat-grid {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    gap:26px;
}

.fcard {
    position:relative; border-radius:14px; overflow:hidden;
    background:var(--sf); border:1px solid rgba(255,255,255,.06);
    transition:transform .4s var(--spring), border-color .35s, box-shadow .4s;
    animation:fade-up .8s var(--ease) calc(var(--ai) * .12s) both;
}
.fcard:hover { transform:translateY(-12px) scale(1.015); border-color:var(--ac); box-shadow:0 22px 55px rgba(0,0,0,.75), 0 0 40px color-mix(in srgb,var(--ac) 35%,transparent); }

.fcard-glow {
    position:absolute; bottom:-70px; right:-70px;
    width:200px; height:200px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb,var(--ac) 18%,transparent), transparent 70%);
    pointer-events:none; transition:all .5s;
}
.fcard:hover .fcard-glow { bottom:-30px; right:-30px; }

.fcard-body { padding:36px 30px 24px; position:relative; z-index:1; }

.fcard-ico {
    width:54px; height:54px; border-radius:12px; margin-bottom:24px;
    background:color-mix(in srgb,var(--ac) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--ac) 30%,transparent);
    display:flex; align-items:center; justify-content:center;
    color:var(--ac); font-size:1.5rem;
    transition:all .35s var(--spring);
}
.fcard:hover .fcard-ico { transform:rotate(-12deg) scale(1.15); background:color-mix(in srgb,var(--ac) 22%,transparent); box-shadow:0 0 22px color-mix(in srgb,var(--ac) 40%,transparent); }

.fcard-code { position:absolute; top:24px; right:24px; font-family:var(--f1); font-size:.65rem; color:var(--t3); letter-spacing:2px; }
.fcard-title { font-family:var(--f1); font-size:1.25rem; font-weight:700; color:#fff; margin-bottom:14px; }
.fcard-desc  { font-size:.96rem; color:var(--t2); line-height:1.68; }

.fcard-foot { position:relative; padding:0 30px 22px; }
.fcard-bar  { height:2px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
.fcard-bar::after {
    content:''; display:block; height:100%; width:0;
    background:var(--ac); box-shadow:0 0 8px var(--ac);
    border-radius:2px; transition:width .5s var(--ease) .1s;
}
.fcard:hover .fcard-bar::after { width:100%; }

/* ═══════════════════════════════════════════════════════
   MECHANICS
═══════════════════════════════════════════════════════ */
.s-mech { background:linear-gradient(180deg, transparent, rgba(255,0,85,.03), transparent); }

.mech-layout { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.mech-lede   { font-size:1.06rem; color:var(--t2); line-height:1.8; margin-bottom:36px; }
.mech-list   { display:flex; flex-direction:column; gap:16px; }

.ml-item {
    display:flex; gap:18px; align-items:flex-start;
    padding:18px 20px; border-radius:10px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.06);
    transition:all .3s var(--ease);
    animation:slide-left .65s var(--ease) calc(var(--mi)*.1s) both;
    cursor:default;
}
.ml-item:hover { background:rgba(255,0,85,.07); border-color:rgba(255,0,85,.3); transform:translateX(8px); }
.mli-ico {
    width:40px; height:40px; flex-shrink:0; border-radius:8px;
    background:rgba(255,0,85,.12); border:1px solid rgba(255,0,85,.25);
    display:flex; align-items:center; justify-content:center;
    color:var(--mg); font-size:1.1rem;
    transition:all .3s var(--ease);
}
.ml-item:hover .mli-ico { background:rgba(255,0,85,.22); box-shadow:var(--gmg); }
.mli-body strong { display:block; font-family:var(--f2); font-size:1rem; font-weight:700; color:#fff; margin-bottom:4px; }
.mli-body p      { font-size:.94rem; color:var(--t2); line-height:1.6; }

/* Card stack */
.mech-card-zone { display:flex; justify-content:center; align-items:center; position:relative; }
.mc-shadow {
    position:absolute; border-radius:14px;
    background:var(--sf); border:1px solid rgba(255,255,255,.06);
}
.s3 { inset:0; transform:translate(24px,24px) rotate(5deg); opacity:.3; }
.s2 { inset:0; transform:translate(12px,12px) rotate(2.5deg); opacity:.55; }
.s1 { inset:0; transform:translate(6px,6px) rotate(1deg); opacity:.8; }

.mc-card {
    position:relative; z-index:2; width:100%; max-width:320px;
    background:rgba(8,9,20,.97);
    border:1px solid rgba(255,0,85,.35);
    border-radius:14px; overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.85), var(--gmg);
    animation:card-hover-idle 5s ease-in-out infinite;
}
.mcc-head {
    background:rgba(255,0,85,.12); border-bottom:1px solid rgba(255,0,85,.22);
    padding:11px 20px;
    font-family:var(--f1); font-size:.67rem; letter-spacing:1px; color:var(--mg);
    display:flex; align-items:center; gap:8px;
    animation:head-pulse 2.8s ease infinite;
}
.mcc-body { padding:22px 20px; display:flex; flex-direction:column; gap:14px; }
.mcc-row  { display:flex; justify-content:space-between; align-items:center; font-family:var(--f1); font-size:.7rem; }
.mcc-lbl  { color:var(--t3); letter-spacing:1px; }
.mcc-val  { font-weight:700; color:var(--t1); }
.mcc-val.cyan { color:var(--cy); text-shadow:0 0 8px rgba(0,240,255,.4); }
.mcc-val.mg   { color:var(--mg); text-shadow:0 0 8px rgba(255,0,85,.4); }
.mcc-bar-row  { flex-direction:column; align-items:flex-start; gap:8px; }
.mcc-bar-row .mcc-lbl { margin-bottom:2px; }
.mcc-prog { width:100%; height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.mcc-fill {
    height:100%; width:var(--fw); background:var(--fc);
    box-shadow:0 0 8px var(--fc);
    border-radius:3px;
    animation:bar-fill .9s var(--ease) .4s both;
}
.mcc-foot {
    padding:11px 20px; border-top:1px solid rgba(255,255,255,.05);
    font-family:var(--f1); font-size:.65rem; letter-spacing:.8px; color:var(--t3);
    display:flex; align-items:center; gap:8px;
}
.mcc-ping {
    width:6px; height:6px; border-radius:50%;
    background:var(--mg); box-shadow:0 0 6px var(--mg);
    animation:dot-blink 1s ease infinite;
}

/* ═══════════════════════════════════════════════════════
   AI NPC
═══════════════════════════════════════════════════════ */
.s-ai {
    background:linear-gradient(135deg, rgba(157,78,221,.04) 0%, transparent 50%, rgba(0,240,255,.03) 100%);
}
.ai-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.ai-lede   { font-size:1.06rem; color:var(--t2); line-height:1.8; margin-bottom:36px; }
.ai-pillars { display:flex; flex-direction:column; gap:16px; }

.aip {
    display:flex; gap:18px; align-items:flex-start;
    padding:20px; border-radius:10px;
    background:var(--sf); border:1px solid var(--bd);
    transition:all .3s var(--ease);
    animation:fade-up .7s var(--ease) calc(var(--api)*.12s) both;
}
.aip:hover { border-color:rgba(157,78,221,.45); background:rgba(157,78,221,.08); transform:translateX(8px); }
.aip-ico {
    width:42px; height:42px; flex-shrink:0; border-radius:8px;
    background:rgba(157,78,221,.15); border:1px solid rgba(157,78,221,.3);
    display:flex; align-items:center; justify-content:center;
    color:var(--pu); font-size:1.1rem;
    transition:all .3s;
}
.aip:hover .aip-ico { box-shadow:var(--gpu); }
.aip-body h4 { font-family:var(--f2); font-size:1rem; font-weight:700; color:#fff; margin-bottom:4px; }
.aip-body p  { font-size:.9rem; color:var(--t2); line-height:1.6; }

/* Terminal */
.ai-terminal {
    background:#050610; border:1px solid rgba(255,0,85,.28);
    border-radius:12px; overflow:hidden;
    box-shadow:0 18px 55px rgba(0,0,0,.85), var(--gmg);
}
.at-chrome {
    background:#0b0c1d; padding:12px 16px;
    display:flex; align-items:center; gap:8px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.atc-dots { display:flex; gap:6px; }
.atd { width:10px; height:10px; border-radius:50%; }
.atd.r { background:#ff5f56; } .atd.y { background:#ffbd2e; } .atd.g { background:#27c93f; }
.atc-title { font-family:var(--f1); font-size:.6rem; color:var(--t3); letter-spacing:1px; flex:1; margin-left:8px; }
.atc-live  { font-family:var(--f1); font-size:.6rem; color:var(--gr); display:flex; align-items:center; gap:5px; }
.atl-dot   { width:5px; height:5px; border-radius:50%; background:var(--gr); box-shadow:0 0 5px var(--gr); animation:dot-blink 1.4s ease infinite; }

.at-body   { padding:18px 20px; display:flex; flex-direction:column; gap:12px; }
.at-msg    { padding:12px 14px; border-radius:8px; font-size:.86rem; line-height:1.55; }
.atm-from  { display:flex; align-items:center; gap:6px; font-family:var(--f1); font-size:.63rem; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
.at-msg.npc    { background:rgba(255,0,85,.07); border-left:3px solid var(--mg); }
.at-msg.npc .atm-from { color:var(--mg); }
.at-msg.player { background:rgba(0,240,255,.07); border-left:3px solid var(--cy); }
.at-msg.player .atm-from { color:var(--cy); }
.at-sep { height:1px; background:rgba(255,255,255,.06); }

.at-stat { display:flex; flex-direction:column; gap:5px; }
.ats-lbl { font-family:var(--f1); font-size:.63rem; color:var(--t3); letter-spacing:1px; display:flex; align-items:center; gap:6px; }
.ats-bar { flex:1; height:5px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; position:relative; }
.ats-fill {
    position:absolute; top:0; left:0; height:100%; width:var(--sf); background:var(--sc);
    box-shadow:0 0 8px var(--sc); border-radius:3px;
    animation:bar-fill .9s var(--ease) .5s both;
}
.at-stat { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.ats-pct { font-family:var(--f1); font-size:.63rem; color:var(--t3); width:28px; text-align:right; }

/* ═══════════════════════════════════════════════════════
   ARENAS
═══════════════════════════════════════════════════════ */
.s-arenas { background:linear-gradient(180deg, transparent, rgba(0,240,255,.025), transparent); }
.arena-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); gap:28px; }

.acard {
    background:var(--sf); border:1px solid rgba(255,255,255,.07);
    border-radius:14px; overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform .45s var(--spring), border-color .35s, box-shadow .45s;
    animation:fade-up .8s var(--ease) calc(var(--ai)*.14s) both;
}
.acard:hover { transform:translateY(-14px); }
.acard[data-theme="cyber"]:hover  { border-color:rgba(0,240,255,.4);   box-shadow:0 24px 60px rgba(0,0,0,.8), 0 0 35px rgba(0,240,255,.2); }
.acard[data-theme="magma"]:hover  { border-color:rgba(255,102,0,.4);   box-shadow:0 24px 60px rgba(0,0,0,.8), 0 0 35px rgba(255,102,0,.2); }
.acard[data-theme="sky"]:hover    { border-color:rgba(157,78,221,.4);  box-shadow:0 24px 60px rgba(0,0,0,.8), 0 0 35px rgba(157,78,221,.2); }

.acard-media { position:relative; aspect-ratio:16/9; overflow:hidden; }
.acard-img   { width:100%; height:100%; object-fit:cover; transition:transform .65s var(--ease); }
.acard:hover .acard-img { transform:scale(1.1); }

.acard-overlay {
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 25%, rgba(5,6,15,.92) 100%);
}
/* animated scan lines on image */
.acard-lines {
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,240,255,.035) 3px, rgba(0,240,255,.035) 4px);
    opacity:0; transition:opacity .4s;
}
.acard:hover .acard-lines { opacity:1; }

.acard-body { padding:22px 24px; flex:1; display:flex; flex-direction:column; }
.acard-badge {
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--f1); font-size:.62rem; font-weight:700; letter-spacing:1.5px;
    padding:5px 12px; border-radius:100px; margin-bottom:14px; width:fit-content;
}
.badge-cy { color:var(--cy); background:rgba(0,240,255,.1);  border:1px solid rgba(0,240,255,.28); }
.badge-or { color:var(--or); background:rgba(255,102,0,.1); border:1px solid rgba(255,102,0,.28); }
.badge-pu { color:#cb88ff;   background:rgba(157,78,221,.1); border:1px solid rgba(157,78,221,.28); }

.acard-name { font-family:var(--f1); font-size:1.25rem; font-weight:700; color:#fff; margin-bottom:12px; }
.acard-desc { font-size:.93rem; color:var(--t2); line-height:1.68; flex:1; margin-bottom:20px; }
.acard-foot {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:16px; border-top:1px solid rgba(255,255,255,.07);
    font-family:var(--f2); font-size:.88rem;
}
.af-mode { display:flex; align-items:center; gap:7px; color:var(--t2); font-weight:600; }
.af-tag  { display:flex; align-items:center; gap:6px; font-family:var(--f1); font-size:.6rem; font-weight:700; letter-spacing:1px; }
.af-tag.tc { color:var(--cy); }
.af-tag.to { color:var(--or); }
.af-tag.tp { color:#cb88ff; }

/* ═══════════════════════════════════════════════════════
   STUDIO
═══════════════════════════════════════════════════════ */
.studio-box {
    background:var(--sf); border:1px solid var(--bd);
    border-radius:20px; padding:70px 56px;
    position:relative; overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.75);
}
/* four animated borders */
.sb-border-t, .sb-border-b, .sb-border-l, .sb-border-r {
    position:absolute; background:linear-gradient(90deg, transparent, var(--cy), var(--mg), var(--pu), transparent);
    background-size:400%;
}
.sb-border-t { top:0; left:0; right:0; height:2px; animation:border-race-h 4s ease infinite; }
.sb-border-b { bottom:0; left:0; right:0; height:2px; animation:border-race-h 4s ease infinite reverse; }
.sb-border-l { left:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg, transparent, var(--cy), var(--mg), transparent); background-size:100% 400%; animation:border-race-v 4s ease infinite 2s; }
.sb-border-r { right:0; top:0; bottom:0; width:2px; background:linear-gradient(180deg, transparent, var(--pu), var(--mg), transparent); background-size:100% 400%; animation:border-race-v 4s ease infinite 2s reverse; }

.studio-lede {
    font-size:1.18rem; color:#ccd3e2; line-height:1.82; font-weight:300;
    max-width:740px; margin:14px auto 0;
}
.studio-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; margin:52px 0; }

.studio-col {
    padding:28px 24px; border-radius:12px;
    background:rgba(6,7,18,.75);
    border:1px solid rgba(255,255,255,.06);
    transition:all .35s var(--ease);
    animation:fade-up .7s var(--ease) calc(var(--sci)*.12s) both;
}
.studio-col:hover { border-color:rgba(0,240,255,.3); background:rgba(0,240,255,.05); transform:translateY(-6px); }
.sc-ico {
    width:48px; height:48px; border-radius:10px; margin-bottom:18px;
    background:rgba(0,240,255,.1); border:1px solid rgba(0,240,255,.25);
    display:flex; align-items:center; justify-content:center;
    color:var(--cy); font-size:1.3rem;
    transition:all .3s var(--ease);
}
.studio-col:hover .sc-ico { background:rgba(0,240,255,.2); box-shadow:var(--gcyan); }
.studio-col h3 { font-family:var(--f1); font-size:1.05rem; font-weight:700; color:#fff; margin-bottom:12px; }
.studio-col p  { font-size:.93rem; color:var(--t2); line-height:1.68; }

/* CTA block */
.cta-block {
    display:flex; justify-content:space-between; align-items:center; gap:28px;
    padding:40px 44px; border-radius:14px;
    background:linear-gradient(135deg, rgba(255,0,85,.12) 0%, rgba(0,240,255,.08) 100%);
    border:1px solid rgba(0,240,255,.18);
    position:relative; overflow:hidden;
}
.cta-block::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(90deg, rgba(255,0,85,.04), transparent, rgba(0,240,255,.04));
    animation:shimmer-lr 7s ease-in-out infinite alternate;
}
.cta-ttl { font-family:var(--f1); font-size:1.65rem; font-weight:900; color:#fff; letter-spacing:.8px; margin-bottom:6px; }
.cta-copy p { font-size:.98rem; color:var(--t2); }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer {
    background:#020207; border-top:1px solid rgba(255,255,255,.06);
    padding:70px 0 30px; position:relative; z-index:2;
}
.footer-shimmer {
    position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg, transparent, var(--cy), var(--mg), transparent);
    opacity:.55;
}
.footer-grid {
    display:grid; grid-template-columns:1.4fr 1fr 1fr;
    gap:48px; margin-bottom:48px;
}
.fg-tagline { font-size:.93rem; color:var(--t2); margin-top:14px; line-height:1.68; max-width:300px; }
.fg-socials { display:flex; gap:10px; margin-top:20px; }
.fsoc {
    width:36px; height:36px; border-radius:7px;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    color:var(--t2); font-size:.95rem;
    transition:all .25s var(--ease);
}
.fsoc:hover { background:rgba(0,240,255,.15); border-color:var(--cy); color:var(--cy); box-shadow:0 0 14px rgba(0,240,255,.25); transform:translateY(-3px); }

.fg-nav { display:flex; flex-direction:column; gap:12px; }
.fg-nav h4 { font-family:var(--f1); font-size:.75rem; color:#fff; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.fg-nav a  { font-size:.92rem; color:var(--t2); transition:color .2s, padding-left .2s; }
.fg-nav a:hover { color:var(--cy); padding-left:6px; }

.footer-bottom {
    padding-top:22px; border-top:1px solid rgba(255,255,255,.05);
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:14px; font-size:.8rem; color:var(--t3);
}
.fb-online { display:flex; align-items:center; gap:8px; font-family:var(--f1); font-size:.62rem; letter-spacing:1.5px; color:var(--gr); }
.fbo-dot   { width:6px; height:6px; border-radius:50%; background:var(--gr); box-shadow:0 0 8px var(--gr); animation:dot-blink 2s ease infinite; }

/* ═══════════════════════════════════════════════════════
   KEYFRAMES — COMPLETE LIBRARY
═══════════════════════════════════════════════════════ */

/* Aurora */
@keyframes aurora-morph {
    0%   { transform:translate(0,0) scale(1) rotate(0deg); opacity:.65; }
    33%  { transform:translate(4%,3%) scale(1.08) rotate(5deg); opacity:.8; }
    66%  { transform:translate(-3%,5%) scale(.95) rotate(-4deg); opacity:.6; }
    100% { transform:translate(2%,-2%) scale(1.05) rotate(3deg); opacity:.75; }
}

/* Grid */
@keyframes grid-breathe {
    0%,100% { opacity:.45; background-size:42px 42px; }
    50%      { opacity:.8;  background-size:43px 43px; }
}

/* Orbs */
@keyframes orb-float {
    0%   { transform:translate(0,0) scale(1); }
    50%  { transform:translate(3%,4%) scale(1.1); }
    100% { transform:translate(-2%,2%) scale(.95); }
}

/* Particles */
@keyframes px-float {
    0%,100% { transform:translateY(0) scale(1); opacity:.8; }
    50%      { transform:translateY(-30px) scale(1.3); opacity:1; }
}

/* Gradient shift */
@keyframes gshift {
    0%,100% { background-position:0% 50%; }
    50%      { background-position:100% 50%; }
}

/* Hero bar */
@keyframes bar-race {
    0%   { background-position:200% 0%; }
    100% { background-position:-200% 0%; }
}

/* Watermark */
@keyframes wm-breathe {
    0%,100% { opacity:.018; transform:translate(-50%,-50%) scale(1); }
    50%      { opacity:.03;  transform:translate(-50%,-50%) scale(1.03); }
}

/* Dot blink */
@keyframes dot-blink {
    0%,100% { opacity:1; }
    50%      { opacity:.15; }
}

/* Live pulse */
@keyframes live-pulse {
    0%,100% { color:var(--mg); text-shadow:0 0 18px rgba(255,0,85,.55); }
    50%      { color:var(--cy); text-shadow:0 0 18px rgba(0,240,255,.55); }
}

/* Glitch */
@keyframes gh1 {
    0%,88%,100% { opacity:0; }
    90%          { opacity:.75; transform:translate(-4px,-1px); }
    92%          { opacity:.4;  transform:translate(4px,0); }
    94%          { opacity:.75; transform:translate(-2px,2px); }
}
@keyframes gh2 {
    0%,82%,100% { opacity:0; }
    84%          { opacity:.7;  transform:translate(4px,1px); }
    86%          { opacity:.35; transform:translate(-4px,0); }
    88%          { opacity:.7;  transform:translate(2px,-2px); }
}

/* Scan beam */
@keyframes scanbeam {
    0%   { top:-2px; opacity:1; }
    85%  { top:100%; opacity:.6; }
    100% { top:100%; opacity:0; }
}

/* RGB shift */
@keyframes rgb-shift {
    0%,100% { transform:translate(0,0); }
    25%      { transform:translate(-1px,0); }
    75%      { transform:translate(1px,0); }
}

/* Stripe */
@keyframes stripe-travel {
    0%   { top:-10%; opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:.5; }
    100% { top:110%; opacity:0; }
}
@keyframes stripes-flash { 90%,91%,95%,96%,100% { opacity:1; } 90.5%,95.5% { opacity:0; } }

/* Cursor */
@keyframes blink-cur {
    0%,100% { opacity:1; }
    50%      { opacity:0; }
}

/* Rings */
@keyframes spin { to { transform:rotate(360deg); } }

/* Scroll hint */
@keyframes hint-fade {
    0%,100% { opacity:.4; }
    50%      { opacity:.9; }
}
@keyframes sh-grow {
    0%  { transform:scaleY(0); transform-origin:top; }
    50% { transform:scaleY(1); transform-origin:top; }
    51% { transform:scaleY(1); transform-origin:bottom; }
    100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* Nav shine */
@keyframes nav-shine {
    0%   { left:-60%; opacity:1; }
    45%  { left:130%; opacity:.7; }
    100% { left:130%; opacity:0; }
}

/* Tag sweep */
@keyframes tag-sweep {
    0%  { transform:translateX(-100%); }
    50%,100% { transform:translateX(300%); }
}

/* Ripple ring */
@keyframes ring-pulse {
    0%  { transform:translate(-50%,-50%) scale(0); opacity:.7; }
    100%{ transform:translate(-50%,-50%) scale(2.8); opacity:0; }
}

/* Bar fill */
@keyframes bar-fill {
    from { width:0; }
    to   { width:var(--fw, var(--sf)); }
}

/* Card idle float */
@keyframes card-hover-idle {
    0%,100% { transform:translateY(0); }
    50%      { transform:translateY(-6px); }
}

/* Head pulse */
@keyframes head-pulse {
    0%,100% { background:rgba(255,0,85,.12); }
    50%      { background:rgba(255,0,85,.22); }
}

/* Border race */
@keyframes border-race-h {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
}
@keyframes border-race-v {
    0%   { background-position:0 200%; }
    100% { background-position:0 -200%; }
}

/* Shimmer */
@keyframes shimmer-lr {
    0%   { transform:translateX(-5%); opacity:.7; }
    100% { transform:translateX(5%);  opacity:1; }
}

/* Reveal animations */
@keyframes fade-up {
    from { opacity:0; transform:translateY(36px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fade-right {
    from { opacity:0; transform:translateX(48px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes slide-left {
    from { opacity:0; transform:translateX(-28px); }
    to   { opacity:1; transform:translateX(0); }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
    .hero-wrap    { grid-template-columns:1fr; text-align:center; gap:52px; }
    .h-desc       { margin:0 auto 36px; }
    .h-actions    { justify-content:center; }
    .h-metrics    { justify-content:center; }
    .hero-visual  { order:-1; }
    .ring         { display:none; }
    .mech-layout  { grid-template-columns:1fr; gap:50px; }
    .ai-layout    { grid-template-columns:1fr; gap:46px; }
    .studio-box   { padding:50px 32px; }
    .cta-block    { flex-direction:column; text-align:center; }
    .footer-grid  { grid-template-columns:1fr 1fr; }
    .fg-brand     { grid-column:1/-1; }
}

@media (max-width:768px) {
    .section { padding:80px 0; }
    .sec-hd  { margin-bottom:44px; }

    /* mobile nav */
    .burger-btn { display:flex; }
    .nav-menu {
        position:fixed; top:64px; left:0; width:100%;
        background:rgba(3,3,10,.97);
        backdrop-filter:blur(24px);
        border-bottom:1px solid var(--bd);
        flex-direction:column; padding:22px 28px; gap:4px;
        transform:translateY(-140%); opacity:0; pointer-events:none;
        transition:transform .35s var(--ease), opacity .3s;
    }
    #nav-cb:checked ~ .nav-menu { transform:translateY(0); opacity:1; pointer-events:auto; }
    .nlink { padding:12px 16px; border-radius:8px; width:100%; }
    .nav-cta { justify-content:center; }

    .feat-grid { grid-template-columns:1fr; }
    .arena-grid { grid-template-columns:1fr; }
    .studio-cols { grid-template-columns:1fr; }
    .mech-card-zone { display:none; }
    .footer-grid { grid-template-columns:1fr; gap:32px; }
    .studio-box { padding:36px 20px; }
    .cta-block  { padding:28px 20px; }
}

@media (max-width:480px) {
    .h-metrics { flex-wrap:wrap; gap:16px; }
    .hud { max-width:320px; }
}