/* VIBEATHON Living Cyberpunk World — Styles */
:root{--b:#00f0ff;--p:#ff2d95;--pu:#b026ff;--g:#39ff14;--y:#ffe600;--bg:#0a0a12;--card:rgba(15,15,30,.7);--glass:rgba(20,20,50,.45);--gb:rgba(0,240,255,.15);--txt:#e0e0ff;--dim:#8888aa;--hd:'Orbitron',sans-serif;--bd:'Rajdhani',sans-serif;--mn:'Share Tech Mono',monospace}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--b) var(--bg)}
html::-webkit-scrollbar{width:5px}html::-webkit-scrollbar-thumb{background:var(--b)}html::-webkit-scrollbar-track{background:var(--bg)}
body{font-family:var(--bd);background:var(--bg);color:var(--txt);overflow-x:hidden;cursor:none;line-height:1.6;font-size:16px}
a{color:var(--b);text-decoration:none;cursor:none}button,input,select{cursor:none}

/* ═══ LIVING ANIMATIONS ═══ */
@keyframes float-y{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes float-y2{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes breath{0%,100%{opacity:.7;text-shadow:0 0 8px currentColor}50%{opacity:1;text-shadow:0 0 20px currentColor,0 0 40px currentColor}}
@keyframes neon-p{0%,100%{box-shadow:0 0 5px rgba(0,240,255,.3),inset 0 0 5px rgba(0,240,255,.05)}50%{box-shadow:0 0 15px rgba(0,240,255,.5),0 0 30px rgba(0,240,255,.2),inset 0 0 10px rgba(0,240,255,.1)}}
@keyframes spin-s{to{transform:rotate(360deg)}}
@keyframes holo-f{0%,100%{opacity:1}50%{opacity:.92}}
@keyframes scan-line{0%{top:-10%}100%{top:110%}}
@keyframes grid-scroll{to{background-position:0 50px,50px 0}}
@keyframes portal-pulse{0%,100%{opacity:.3;transform:scaleX(.8)}50%{opacity:.8;transform:scaleX(1)}}
@keyframes portal-spin{to{transform:rotate(360deg)}}
@keyframes shine-sweep{to{background-position:-300% 0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes blink{50%{opacity:0}}
@keyframes glitch-skew{0%,100%{transform:skew(0)}50%{transform:skew(-.2deg)}}
@keyframes glitch-a{0%{clip-path:polygon(0 2%,100% 2%,100% 5%,0 5%);transform:translate(-1px,0)}50%{clip-path:polygon(0 33%,100% 33%,100% 36%,0 36%);transform:translate(1px,0)}100%{clip-path:polygon(0 70%,100% 70%,100% 73%,0 73%);transform:translate(-1px,0)}}
@keyframes glitch-b{0%{clip-path:polygon(0 25%,100% 25%,100% 28%,0 28%);transform:translate(1px,0)}50%{clip-path:polygon(0 55%,100% 55%,100% 58%,0 58%);transform:translate(-1px,0)}100%{clip-path:polygon(0 80%,100% 80%,100% 83%,0 83%);transform:translate(1px,0)}}
@keyframes sec-title-glitch{0%,95%,100%{opacity:0}96%,98%{opacity:.3}}
@keyframes bb-flicker{0%,100%{opacity:.6}50%{opacity:.85}}
@keyframes drone-fly{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(40px,-20px) rotate(12deg)}50%{transform:translate(-25px,-30px) rotate(-6deg)}75%{transform:translate(20px,-12px) rotate(8deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes car-fly{0%{transform:translateX(-150px)}100%{transform:translateX(calc(100vw + 150px))}}
@keyframes beam-pulse{0%,100%{opacity:.04;transform:scaleY(.85)}50%{opacity:.18;transform:scaleY(1.1)}}
@keyframes fog-drift{0%{transform:translateX(-20%)}100%{transform:translateX(20%)}}
@keyframes lightning{0%,100%{opacity:0}1%{opacity:.8}2%{opacity:0}3%{opacity:.4}4%{opacity:0}}
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.1)}}
@keyframes ach-in{0%{opacity:0;transform:translateX(-50%) translateY(30px) scale(.9)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}

.float-slow{animation:float-y 4s ease-in-out infinite}.float-slow.d1{animation-delay:.7s}.float-slow.d2{animation-delay:1.4s}
.breath-glow{animation:breath 3s ease-in-out infinite}
.neon-pulse{animation:neon-p 2.5s ease-in-out infinite}
.pulse-glow{animation:breath 2s ease-in-out infinite}
.spin-slow{animation:spin-s 12s linear infinite;display:inline-block}
.holo-flicker{animation:holo-f 6s ease-in-out infinite}

/* ═══ BOOT ═══ */
#boot-screen{position:fixed;inset:0;z-index:20000;background:#050510;display:flex;align-items:center;justify-content:center;transition:opacity .6s,visibility .6s}
#boot-screen.off{opacity:0;visibility:hidden;pointer-events:none}
.boot-content{width:min(700px,90vw)}.boot-terminal{background:rgba(0,20,30,.9);border:1px solid rgba(0,240,255,.2);border-radius:8px;overflow:hidden;font-family:var(--mn);font-size:.78rem}
.boot-header{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(0,240,255,.05);border-bottom:1px solid rgba(0,240,255,.1)}
.bd{width:10px;height:10px;border-radius:50%}.bd.red{background:#ff5f57}.bd.yellow{background:#ffbd2e}.bd.green{background:#28c840}
.bt-title{margin-left:auto;color:var(--dim);font-size:.6rem;letter-spacing:2px}
.boot-body{padding:14px;min-height:250px;max-height:280px;overflow:hidden}
.boot-line{margin-bottom:2px;opacity:0;animation:fadeInLine .1s forwards}.boot-line.sys{color:var(--b)}.boot-line.ok{color:var(--g)}.boot-line.warn{color:var(--y)}.boot-line.err{color:var(--p)}
@keyframes fadeInLine{to{opacity:1}}
.boot-bar-wrap{height:3px;background:rgba(0,240,255,.1);margin-top:1rem;border-radius:2px;overflow:hidden}
.boot-bar{height:100%;width:0;background:linear-gradient(90deg,var(--b),var(--p));transition:width .1s}
.scanlines-overlay{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,.015) 2px,rgba(0,240,255,.015) 4px);pointer-events:none}

/* ═══ AMBIENT LAYERS ═══ */
#particle-canvas{display:none}
#three-bg{position:fixed;inset:0;z-index:0;pointer-events:none}#three-bg canvas{display:block;width:100%!important;height:100%!important;filter:drop-shadow(0 0 5px rgba(0,240,255,.5)) drop-shadow(0 0 15px rgba(255,45,149,.4))}

/* ═══ CYBERPUNK BUILDING SILHOUETTES ═══ */
.city-side{position:fixed;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;opacity:.05}
.city-side-left{left:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 900'%3E%3Crect x='0' y='0' width='35' height='900' fill='%23080818'/%3E%3Crect x='0' y='80' width='45' height='820' fill='%230a0a1e' stroke='rgba(0,240,255,0.06)' stroke-width='0.5'/%3E%3Crect x='5' y='100' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='12' y='120' width='3' height='5' fill='rgba(255,45,149,0.3)'/%3E%3Crect x='20' y='95' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='8' y='200' width='3' height='5' fill='rgba(176,38,255,0.3)'/%3E%3Crect x='25' y='180' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='15' y='300' width='3' height='5' fill='rgba(255,45,149,0.3)'/%3E%3Crect x='5' y='400' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='30' y='350' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='50' y='30' width='30' height='870' fill='%230c0c22' stroke='rgba(0,240,255,0.04)' stroke-width='0.5'/%3E%3Crect x='55' y='50' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='62' y='80' width='3' height='5' fill='rgba(255,45,149,0.25)'/%3E%3Crect x='55' y='150' width='3' height='5' fill='rgba(176,38,255,0.25)'/%3E%3Crect x='65' y='250' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='55' y='450' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='85' y='120' width='25' height='780' fill='%230e0e25' stroke='rgba(176,38,255,0.04)' stroke-width='0.5'/%3E%3Crect x='90' y='140' width='3' height='5' fill='rgba(176,38,255,0.25)'/%3E%3Crect x='98' y='200' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='90' y='350' width='3' height='5' fill='rgba(255,45,149,0.2)'/%3E%3Cline x1='45' y1='0' x2='45' y2='900' stroke='rgba(0,240,255,0.03)' stroke-width='0.5'/%3E%3Cline x1='80' y1='0' x2='80' y2='900' stroke='rgba(176,38,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E") repeat-y left top/120px auto}
.city-side-right{right:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 900'%3E%3Crect x='85' y='0' width='35' height='900' fill='%23080818'/%3E%3Crect x='75' y='60' width='45' height='840' fill='%230a0a1e' stroke='rgba(0,240,255,0.06)' stroke-width='0.5'/%3E%3Crect x='80' y='90' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='95' y='110' width='3' height='5' fill='rgba(255,45,149,0.3)'/%3E%3Crect x='105' y='85' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='88' y='190' width='3' height='5' fill='rgba(176,38,255,0.3)'/%3E%3Crect x='100' y='270' width='3' height='5' fill='rgba(0,240,255,0.3)'/%3E%3Crect x='85' y='380' width='3' height='5' fill='rgba(255,45,149,0.3)'/%3E%3Crect x='40' y='40' width='30' height='860' fill='%230c0c22' stroke='rgba(0,240,255,0.04)' stroke-width='0.5'/%3E%3Crect x='45' y='70' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='55' y='130' width='3' height='5' fill='rgba(255,45,149,0.25)'/%3E%3Crect x='48' y='240' width='3' height='5' fill='rgba(176,38,255,0.25)'/%3E%3Crect x='58' y='340' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='5' y='100' width='30' height='800' fill='%230e0e25' stroke='rgba(176,38,255,0.04)' stroke-width='0.5'/%3E%3Crect x='10' y='120' width='3' height='5' fill='rgba(176,38,255,0.25)'/%3E%3Crect x='20' y='200' width='3' height='5' fill='rgba(0,240,255,0.25)'/%3E%3Crect x='12' y='320' width='3' height='5' fill='rgba(255,45,149,0.2)'/%3E%3Cline x1='40' y1='0' x2='40' y2='900' stroke='rgba(0,240,255,0.03)' stroke-width='0.5'/%3E%3Cline x1='75' y1='0' x2='75' y2='900' stroke='rgba(176,38,255,0.03)' stroke-width='0.5'/%3E%3C/svg%3E") repeat-y right top/120px auto}
@media(max-width:768px){.city-side{width:60px;opacity:.2}}
#cursor-trail-canvas{position:fixed;inset:0;z-index:9997;pointer-events:none}
#cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(0,240,255,.07) 0%,transparent 70%);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);mix-blend-mode:screen}
#cursor-dot{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--b);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 10px var(--b)}

/* FOG */
#fog-layer{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.fog{position:absolute;width:140%;height:300px;opacity:.06;filter:blur(60px);border-radius:50%}
.f1{bottom:-50px;left:-20%;background:linear-gradient(90deg,transparent,var(--b),var(--pu),transparent);animation:fog-drift 20s ease-in-out infinite alternate}
.f2{bottom:100px;right:-20%;background:linear-gradient(90deg,transparent,var(--p),var(--pu),transparent);animation:fog-drift 25s ease-in-out infinite alternate-reverse}

/* LIGHTNING */
#lightning-flash{position:fixed;inset:0;z-index:3;pointer-events:none;background:rgba(0,240,255,.08);opacity:0}

/* ═══ VIBE SCORE HUD ═══ */
#vibe-hud{position:fixed;top:70px;right:20px;z-index:9000;background:rgba(10,10,18,.8);backdrop-filter:blur(15px);border:1px solid rgba(0,240,255,.15);border-radius:8px;padding:10px 16px;text-align:center;min-width:100px}
.vibe-label{font-family:var(--mn);font-size:.55rem;color:var(--dim);letter-spacing:2px}
.vibe-score{font-family:var(--hd);font-size:1.5rem;color:var(--b);font-weight:700;text-shadow:0 0 15px rgba(0,240,255,.4)}
.vibe-bar-wrap{height:2px;background:rgba(0,240,255,.1);border-radius:1px;margin-top:6px;overflow:hidden}
.vibe-bar{height:100%;width:0;background:linear-gradient(90deg,var(--b),var(--g));transition:width .4s}

/* ═══ ACHIEVEMENT ═══ */
#achievement{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);z-index:15000;background:rgba(10,10,18,.92);backdrop-filter:blur(20px);border:1px solid var(--g);border-radius:10px;padding:14px 24px;display:flex;align-items:center;gap:14px;animation:ach-in .5s ease-out;box-shadow:0 0 30px rgba(57,255,20,.15);transition:opacity .4s,visibility .4s}
.ach-hidden{opacity:0;visibility:hidden;pointer-events:none}
.ach-icon{font-size:2rem}.ach-title{font-family:var(--hd);font-size:.8rem;color:var(--g);letter-spacing:2px}.ach-desc{font-size:.75rem;color:var(--dim);margin-top:2px}

/* ═══ COLLECTIBLE ORBS ═══ */
.orb{position:fixed;width:14px;height:14px;border-radius:50%;z-index:100;cursor:pointer;animation:orb-float 3s ease-in-out infinite;transition:transform .3s,opacity .3s;opacity:.7}
.orb::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid;opacity:.3;animation:spin-s 4s linear infinite}
.orb.blue{background:var(--b);box-shadow:0 0 8px var(--b)}.orb.blue::before{border-color:var(--b)}
.orb.pink{background:var(--p);box-shadow:0 0 8px var(--p)}.orb.pink::before{border-color:var(--p)}
.orb.green{background:var(--g);box-shadow:0 0 8px var(--g)}.orb.green::before{border-color:var(--g)}
.orb.collected{transform:scale(2)!important;opacity:0!important;pointer-events:none}

/* ═══ NAVBAR ═══ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:9000;padding:.65rem 2rem;background:rgba(10,10,18,.65);backdrop-filter:blur(20px);border-bottom:1px solid rgba(0,240,255,.05);transition:.3s}
.nav-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--hd);font-size:1.15rem;letter-spacing:2px;user-select:none}
.lb{color:var(--dim)}.lt{color:var(--b)}.la{color:var(--p)}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nl{font-family:var(--mn);font-size:.72rem;letter-spacing:1px;color:var(--dim);transition:.3s;position:relative}
.nl:hover{color:var(--b);text-shadow:0 0 10px rgba(0,240,255,.5)}
.nl::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--b);transition:.3s}.nl:hover::after{width:100%}
.nav-cta{color:var(--bg)!important;background:var(--b);padding:.3rem .85rem;border-radius:2px;font-weight:700}.nav-cta:hover{background:var(--p);color:#fff!important}.nav-cta::after{display:none}
.nav-ham{display:none;flex-direction:column;gap:5px;cursor:pointer}.nav-ham span{width:22px;height:2px;background:var(--b);transition:.3s}
.mob-menu{display:none;flex-direction:column;gap:1rem;padding:1.2rem 2rem;background:rgba(10,10,18,.95)}.mob-menu.active{display:flex}
.ml{font-family:var(--mn);font-size:.9rem;color:var(--dim)}.ml:hover{color:var(--b)}
@media(max-width:768px){.nav-links{display:none}.nav-ham{display:flex}#vibe-hud{top:60px;right:10px;padding:8px 10px;min-width:80px}.vibe-score{font-size:1.2rem}}

/* ═══ HERO ═══ */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#06061a,#0a0a1a 50%,#0f0a22)}
.hero-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,240,255,.012) 2px,rgba(0,240,255,.012) 4px);pointer-events:none;z-index:4}
.hero-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.6));pointer-events:none;z-index:4}
.hero-grid{position:absolute;bottom:0;left:-50%;width:200%;height:45%;background:linear-gradient(rgba(0,240,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.05) 1px,transparent 1px);background-size:50px 50px;transform:perspective(500px) rotateX(65deg);transform-origin:bottom;z-index:1;animation:grid-scroll 3s linear infinite}

/* City */
.hero-env{position:absolute;inset:0;z-index:1;overflow:hidden}
.city-skyline{position:absolute;bottom:5%;width:100%;height:45%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300'%3E%3Crect x='30' y='60' width='35' height='240' fill='%23111128' stroke='rgba(0,240,255,0.08)' stroke-width='1'/%3E%3Crect x='80' y='100' width='55' height='200' fill='%230f0f24' stroke='rgba(0,240,255,0.06)' stroke-width='1'/%3E%3Crect x='155' y='30' width='45' height='270' fill='%23111130' stroke='rgba(0,240,255,0.1)' stroke-width='1'/%3E%3Crect x='225' y='70' width='65' height='230' fill='%230d0d22' stroke='rgba(176,38,255,0.08)' stroke-width='1'/%3E%3Crect x='310' y='40' width='40' height='260' fill='%23101028' stroke='rgba(0,240,255,0.07)' stroke-width='1'/%3E%3Crect x='375' y='15' width='60' height='285' fill='%230e0e26' stroke='rgba(255,45,149,0.06)' stroke-width='1'/%3E%3Crect x='465' y='55' width='50' height='245' fill='%23111130' stroke='rgba(0,240,255,0.08)' stroke-width='1'/%3E%3Crect x='540' y='25' width='75' height='275' fill='%230c0c20' stroke='rgba(0,240,255,0.1)' stroke-width='1'/%3E%3Crect x='640' y='80' width='45' height='220' fill='%23101028' stroke='rgba(176,38,255,0.06)' stroke-width='1'/%3E%3Crect x='710' y='20' width='55' height='280' fill='%230f0f26' stroke='rgba(0,240,255,0.08)' stroke-width='1'/%3E%3Crect x='790' y='50' width='60' height='250' fill='%23111130' stroke='rgba(255,45,149,0.07)' stroke-width='1'/%3E%3Crect x='875' y='10' width='50' height='290' fill='%230d0d24' stroke='rgba(0,240,255,0.09)' stroke-width='1'/%3E%3Crect x='950' y='60' width='65' height='240' fill='%23101028' stroke='rgba(0,240,255,0.06)' stroke-width='1'/%3E%3Crect x='1040' y='35' width='40' height='265' fill='%230e0e26' stroke='rgba(176,38,255,0.08)' stroke-width='1'/%3E%3Crect x='1110' y='70' width='55' height='230' fill='%23111130' stroke='rgba(0,240,255,0.07)' stroke-width='1'/%3E%3Crect x='1190' y='20' width='45' height='280' fill='%230c0c20' stroke='rgba(0,240,255,0.1)' stroke-width='1'/%3E%3Crect x='1260' y='45' width='70' height='255' fill='%23101028' stroke='rgba(255,45,149,0.06)' stroke-width='1'/%3E%3Crect x='1350' y='90' width='50' height='210' fill='%230f0f26' stroke='rgba(0,240,255,0.08)' stroke-width='1'/%3E%3Crect x='1420' y='30' width='60' height='270' fill='%23111130' stroke='rgba(176,38,255,0.07)' stroke-width='1'/%3E%3Crect x='1510' y='55' width='45' height='245' fill='%230d0d22' stroke='rgba(0,240,255,0.09)' stroke-width='1'/%3E%3C/svg%3E") repeat-x bottom/1600px auto;opacity:.5}

/* Hover Cars */
.hover-cars{position:absolute;inset:0;z-index:2;pointer-events:none}
.hcar{position:absolute;width:40px;height:4px;border-radius:4px;opacity:.6}
.hc1{top:20%;background:var(--b);box-shadow:0 0 15px var(--b),20px 0 8px var(--b);animation:car-fly 8s linear infinite}
.hc2{top:30%;background:var(--p);box-shadow:0 0 15px var(--p),-20px 0 8px var(--p);animation:car-fly 12s linear infinite reverse;animation-delay:3s}
.hc3{top:15%;background:var(--y);box-shadow:0 0 12px var(--y),15px 0 6px var(--y);animation:car-fly 10s linear infinite;animation-delay:6s}

/* Drones */
.sky-drones{position:absolute;inset:0;z-index:3;pointer-events:none}
.drone{position:absolute;font-size:.9rem;text-shadow:0 0 12px currentColor;animation:drone-fly 9s ease-in-out infinite}
.d1{top:12%;left:18%;color:var(--b)}.d2{top:22%;right:22%;color:var(--p);animation-delay:2s;animation-duration:11s}
.d3{top:8%;left:55%;color:var(--pu);animation-delay:4s;animation-duration:13s}.d4{top:28%;left:38%;color:var(--g);animation-delay:6s;animation-duration:10s}

/* Beams */
.beams{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.beam{position:absolute;width:2px;background:linear-gradient(180deg,transparent,var(--b),transparent);animation:beam-pulse 5s ease-in-out infinite}
.b1{left:10%;height:55%;top:12%}.b2{left:30%;height:45%;top:22%;background:linear-gradient(180deg,transparent,var(--p),transparent);animation-delay:1.2s}
.b3{left:50%;height:50%;top:15%;animation-delay:2.4s}.b4{left:70%;height:40%;top:25%;background:linear-gradient(180deg,transparent,var(--pu),transparent);animation-delay:3.6s}
.b5{left:88%;height:48%;top:18%;animation-delay:4.8s}

/* Billboards */
.billboards{position:absolute;z-index:3;pointer-events:none;width:100%;height:100%}
.bb{position:absolute;font-family:var(--hd);font-size:.55rem;letter-spacing:2px;padding:5px 10px;border:1px solid;text-align:center;line-height:1.4;animation:bb-flicker 3.5s infinite}
.bb1{top:18%;left:10%;color:var(--p);border-color:rgba(255,45,149,.25)}.bb2{top:14%;right:12%;color:var(--b);border-color:rgba(0,240,255,.25);animation-delay:1.2s}
.bb3{top:26%;left:52%;color:var(--pu);border-color:rgba(176,38,255,.25);animation-delay:2.4s}

/* Hero Content */
.hero-content{position:relative;z-index:5;text-align:center;padding:2rem}
.hero-badge{font-family:var(--mn);font-size:clamp(.6rem,1.3vw,.78rem);color:var(--b);letter-spacing:5px;margin-bottom:1rem;opacity:.8}
.glitch{font-family:var(--hd);font-size:clamp(3.5rem,12vw,9rem);font-weight:900;color:#fff;position:relative;text-shadow:0 0 10px rgba(0,240,255,.5),0 0 40px rgba(0,240,255,.2),0 0 80px rgba(0,240,255,.1);animation:glitch-skew 8s infinite linear alternate-reverse;line-height:1}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}
.glitch::before{color:var(--p);animation:glitch-a 6s infinite linear alternate-reverse;clip-path:polygon(0 0,100% 0,100% 35%,0 35%);transform:translate(-1px,-1px);opacity:.5}
.glitch::after{color:var(--b);animation:glitch-b 5s infinite linear alternate-reverse;clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);transform:translate(1px,1px);opacity:.5}
.hero-sub{font-family:var(--mn);font-size:clamp(.6rem,1.6vw,.92rem);color:var(--dim);letter-spacing:4px;margin-top:.8rem}
.hero-stats{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin:1.8rem 0;font-family:var(--hd)}
.stat{text-align:center}.sv{display:block;font-size:clamp(1.1rem,2.8vw,1.6rem);color:var(--b);font-weight:700}.sl{font-family:var(--mn);font-size:.55rem;color:var(--dim);letter-spacing:2px}
.stat-div{width:1px;height:28px;background:rgba(0,240,255,.2)}
.countdown{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-bottom:1.8rem}
.cd-b{text-align:center;background:rgba(0,0,0,.4);border:1px solid rgba(0,240,255,.1);padding:.5rem .7rem;border-radius:4px;min-width:58px}
.cdv{font-family:var(--hd);font-size:clamp(1.3rem,3.5vw,2.2rem);font-weight:700;color:#fff;display:block;text-shadow:0 0 18px rgba(0,240,255,.4)}
.cdl{font-family:var(--mn);font-size:.5rem;color:var(--dim);letter-spacing:2px}
.cds{font-family:var(--hd);font-size:clamp(1rem,2.5vw,1.8rem);color:var(--b);animation:blink .8s steps(2) infinite;margin-bottom:.7rem}
.cta-btn{display:inline-flex;align-items:center;gap:10px;padding:.9rem 2.2rem;border:2px solid var(--b);color:var(--b);font-family:var(--hd);font-size:.9rem;letter-spacing:3px;position:relative;overflow:hidden;transition:.4s}
.cta-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--b),var(--pu));transform:translateX(-101%);transition:.4s;z-index:0}
.cta-btn:hover .cta-bg{transform:translateX(0)}.cta-txt,.cta-arr{position:relative;z-index:1}
.cta-btn:hover{color:#fff;border-color:var(--pu);box-shadow:0 0 25px rgba(0,240,255,.3)}
.cta-arr{transition:.3s}.cta-btn:hover .cta-arr{transform:translateX(5px)}

/* ═══ PORTAL DIVIDER ═══ */
.portal-divider{display:flex;align-items:center;justify-content:center;gap:1rem;padding:2rem 0;position:relative;z-index:5}
.portal-line{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--b),transparent);animation:portal-pulse 3s ease-in-out infinite}
.portal-diamond{color:var(--b);font-size:1rem;animation:portal-spin 8s linear infinite;text-shadow:0 0 10px var(--b)}

/* ═══ SECTIONS ═══ */
.sec{position:relative;z-index:5;padding:6rem 2rem}.sec-full{max-width:none!important;padding-left:0;padding-right:0}
.sec-inner{max-width:1300px;margin:0 auto}
.sec-head{text-align:center;margin-bottom:3rem}
.si{font-family:var(--mn);font-size:.65rem;color:var(--p);letter-spacing:4px;display:block;margin-bottom:.5rem}
.st{font-family:var(--hd);font-size:clamp(1.5rem,4.2vw,2.6rem);font-weight:700;color:#fff;text-shadow:0 0 25px rgba(0,240,255,.1);position:relative}
.st::before,.st::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.st::before{color:var(--p);clip-path:polygon(0 0,100% 0,100% 40%,0 40%);transform:translate(-1px,-1px);opacity:0;animation:sec-title-glitch 12s infinite}
.st::after{color:var(--b);clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);transform:translate(1px,1px);opacity:0;animation:sec-title-glitch 12s 1s infinite}
.sl-line{width:65px;height:2px;background:linear-gradient(90deg,var(--b),var(--p));margin:.8rem auto 0}

/* ABOUT */
.about-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem}
.hcard{position:relative;border-radius:12px;padding:2px;background:linear-gradient(135deg,rgba(0,240,255,.18),rgba(255,45,149,.18),rgba(176,38,255,.18));transition:.5s;transform-style:preserve-3d;display:flex;flex-direction:column;height:100%}
.hcard:hover{box-shadow:0 0 35px rgba(0,240,255,.1)}
.hcard-shine{position:absolute;inset:0;border-radius:12px;background:linear-gradient(105deg,transparent 40%,rgba(0,240,255,.04) 45%,rgba(255,45,149,.04) 50%,transparent 55%);background-size:300% 100%;animation:shine-sweep 5s linear infinite}
.hcard-body{background:var(--card);backdrop-filter:blur(20px);border-radius:11px;padding:2.2rem 1.8rem;min-height:220px;position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:flex-start}
.hcard-icon{font-size:2.2rem;margin-bottom:.8rem}
.hcard h3{font-family:var(--hd);font-size:1rem;color:var(--b);margin-bottom:.7rem;letter-spacing:2px}
.hcard p{color:var(--dim);font-size:.88rem;line-height:1.7}

/* TRACKS */
.tracks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;align-items:start}
.tcard{position:relative;border-radius:12px;overflow:hidden;transition:.5s;transform-style:preserve-3d}
.tcard:hover{transform:translateY(-8px)}
.tcard-bg{position:absolute;inset:0;background:var(--card);backdrop-filter:blur(20px);border:1px solid var(--gb);border-radius:12px}
.tcard-glow{position:absolute;bottom:-30%;left:50%;transform:translateX(-50%);width:80%;height:60%;border-radius:50%;filter:blur(45px);opacity:0;transition:.5s}
.tcard:hover .tcard-glow{opacity:.2}
.tcard[data-clr=blue] .tcard-glow{background:var(--b)}.tcard[data-clr=pink] .tcard-glow{background:var(--p)}.tcard[data-clr=green] .tcard-glow{background:var(--g)}.tcard[data-clr=purple] .tcard-glow{background:var(--pu)}.tcard[data-clr=cyan] .tcard-glow{background:var(--b)}
.tcard-scan{position:absolute;top:-10%;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--b),transparent);opacity:.3;animation:scan-line 4s linear infinite;z-index:1}
.tcard-body{position:relative;z-index:2;padding:2rem 1.5rem;text-align:center}
.tcard-icon{font-size:2.5rem;margin-bottom:.7rem}
.tcard h3{font-family:var(--hd);font-size:.95rem;color:#fff;letter-spacing:2px;margin-bottom:.5rem}
.tcard p{color:var(--dim);font-size:.82rem;line-height:1.5;margin-bottom:1rem}
.tcard-tag{font-family:var(--mn);font-size:.6rem;letter-spacing:3px;padding:.2rem .7rem;border:1px solid rgba(0,240,255,.2);color:var(--b);display:inline-block}

/* TIMELINE */
.tl-wrap{position:relative;max-width:880px;margin:0 auto;padding:2rem 0}
.tl-line-bg{position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(180deg,rgba(0,240,255,.1),rgba(176,38,255,.1),rgba(255,45,149,.1));transform:translateX(-50%)}
#tl-fill{position:absolute;left:50%;top:0;width:2px;height:0;background:linear-gradient(180deg,var(--b),var(--pu),var(--p));transform:translateX(-50%);z-index:1}
.tl-n{position:relative;width:50%;padding:1rem 2.2rem;opacity:0;transform:translateY(20px)}
.tl-n.left{left:0;text-align:right}.tl-n.right{left:50%;text-align:left}
.tl-dot{position:absolute;top:1.3rem;width:13px;height:13px;background:var(--b);border:3px solid var(--bg);border-radius:50%;z-index:2;box-shadow:0 0 12px rgba(0,240,255,.5)}
.tl-n.left .tl-dot{right:-6.5px}.tl-n.right .tl-dot{left:-6.5px}
.tl-card{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--gb);border-radius:8px;padding:1.2rem;transition:.3s}
.tl-card:hover{border-color:var(--b);box-shadow:0 0 18px rgba(0,240,255,.07)}
.tl-t{font-family:var(--mn);font-size:.6rem;color:var(--p);letter-spacing:2px;margin-bottom:.3rem;display:block}
.tl-card h3{font-family:var(--hd);font-size:.82rem;color:var(--b);letter-spacing:1px;margin-bottom:.3rem}
.tl-card p{color:var(--dim);font-size:.78rem}
@media(max-width:768px){.tl-line-bg,#tl-fill{left:18px}.tl-n,.tl-n.left,.tl-n.right{width:100%;left:0;text-align:left;padding-left:45px;padding-right:1rem}.tl-n.left .tl-dot,.tl-n.right .tl-dot{left:12px;right:auto}}

/* SPEAKERS */
.spk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem}
.spk{text-align:center;border:1px solid rgba(0,240,255,.07);border-radius:12px;padding:1.6rem 1rem;background:var(--card);transition:.4s}
.spk:hover{transform:translateY(-7px);border-color:var(--b);box-shadow:0 0 25px rgba(0,240,255,.07)}
.spk-av{width:80px;height:80px;margin:0 auto 1rem;border-radius:50%;border:2px solid var(--b);box-shadow:0 0 12px rgba(0,240,255,.2);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(0,240,255,.08),rgba(255,45,149,.08))}
.spk-av span{font-size:2.2rem;position:relative;z-index:1}
.spk-scanline{position:absolute;top:-10%;left:0;width:100%;height:2px;background:var(--b);opacity:0;animation:scan-line 3s linear infinite}.spk:hover .spk-scanline{opacity:.5}
.spk h3{font-family:var(--hd);font-size:.72rem;color:#fff;letter-spacing:1px;margin-bottom:.15rem}
.spk p{font-size:.7rem;color:var(--dim);margin-bottom:.6rem}
.spk-r{font-family:var(--mn);font-size:.55rem;color:var(--p);letter-spacing:2px;padding:.12rem .4rem;border:1px solid rgba(255,45,149,.2)}

/* PRIZES */
.prize-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.8rem;margin-bottom:2rem}
.pbox{position:relative;perspective:800px;display:flex;flex-direction:column;height:100%}
.pbox-3d{transition:.6s;transform-style:preserve-3d;flex:1;display:flex;flex-direction:column;height:100%}
.pbox:hover .pbox-3d{transform:rotateY(6deg) rotateX(4deg)}
.pface{background:var(--card);backdrop-filter:blur(20px);border-radius:14px;padding:2.2rem 1.5rem;text-align:center;border:1px solid var(--gb);flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.pemoji{font-size:3rem;margin-bottom:.7rem}
.pbox h3{font-family:var(--hd);font-size:.9rem;color:#fff;letter-spacing:2px;margin-bottom:.6rem}
.pamt{font-family:var(--hd);font-size:1.6rem;font-weight:900;margin-bottom:.5rem}
.pgold .pamt{color:var(--y);text-shadow:0 0 22px rgba(255,230,0,.3)}.psilver .pamt{color:#c0c0ff;text-shadow:0 0 22px rgba(192,192,255,.3)}.pbronze .pamt{color:#ff9944;text-shadow:0 0 22px rgba(255,153,68,.3)}
.pbox p{color:var(--dim);font-size:.78rem}
.pbox-orb{position:absolute;bottom:-18%;left:50%;transform:translateX(-50%);width:45%;height:45%;border-radius:50%;filter:blur(45px);opacity:0;transition:.5s}
.pgold .pbox-orb{background:var(--y)}.psilver .pbox-orb{background:#8888ff}.pbronze .pbox-orb{background:#ff6622}
.pbox:hover .pbox-orb{opacity:.1}
.prize-extra{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem}
.pe{background:var(--glass);backdrop-filter:blur(20px);border:1px solid var(--gb);border-radius:8px;padding:.9rem 1.1rem;font-size:.82rem;color:var(--dim);transition:.3s}.pe:hover{border-color:var(--b)}.pe strong{color:#fff}

/* SPONSORS */
.mq-wrap{overflow:hidden;padding:1rem 0;position:relative}
.mq-wrap::before,.mq-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2}
.mq-wrap::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}.mq-wrap::after{right:0;background:linear-gradient(90deg,transparent,var(--bg))}
.mq-track{display:flex;gap:1.8rem;animation:marquee 26s linear infinite;width:max-content}
.mq-wrap.rev .mq-track{animation-direction:reverse}
.mq-logo{font-family:var(--hd);font-size:clamp(.8rem,1.8vw,1.15rem);color:var(--dim);letter-spacing:3px;white-space:nowrap;padding:.7rem 1.3rem;border:1px solid rgba(0,240,255,.07);border-radius:6px;transition:.3s}
.mq-logo:hover{color:var(--b);border-color:var(--b);text-shadow:0 0 12px rgba(0,240,255,.4)}

/* GAME */
.game-desc{font-family:var(--mn);font-size:.82rem;color:var(--dim);margin-top:.8rem}
.game-box{position:relative;width:100%;max-width:800px;margin:1.5rem auto 0;border:1px solid rgba(0,240,255,.12);border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:#050510}
#game-canvas{width:100%;height:100%;display:block}
.game-hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;font-family:var(--hd);font-size:.8rem;color:var(--b);text-shadow:0 0 8px rgba(0,240,255,.5);pointer-events:none}
.game-ov,.game-res{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,5,16,.85);z-index:5}
.game-btn{font-family:var(--hd);font-size:.9rem;letter-spacing:3px;padding:.9rem 1.8rem;background:transparent;border:2px solid var(--b);color:var(--b);cursor:pointer;transition:.4s}
.game-btn:hover{background:var(--b);color:var(--bg);box-shadow:0 0 25px rgba(0,240,255,.3)}
.game-res h3{font-family:var(--hd);font-size:1.3rem;margin-bottom:.4rem}
.game-res p{font-family:var(--mn);margin-bottom:1.2rem;color:var(--dim)}

/* REGISTER */
.reg-wrap{max-width:520px;margin:0 auto}
.reg-card{position:relative;background:var(--card);border:1px solid var(--gb);border-radius:12px;padding:2.2rem 1.8rem;backdrop-filter:blur(20px)}
.reg-corners{position:absolute;inset:0;pointer-events:none}
.rc{position:absolute;width:16px;height:16px;border-color:var(--b);border-style:solid}
.rc.tl{top:-1px;left:-1px;border-width:2px 0 0 2px}.rc.tr{top:-1px;right:-1px;border-width:2px 2px 0 0}.rc.bl{bottom:-1px;left:-1px;border-width:0 0 2px 2px}.rc.br{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.fg{margin-bottom:1.2rem}
.fg label{display:block;font-family:var(--mn);font-size:.6rem;color:var(--b);letter-spacing:2px;margin-bottom:.35rem}
.fg input,.fg select{width:100%;padding:.75rem .9rem;background:rgba(0,0,0,.4);border:1px solid rgba(0,240,255,.1);border-radius:4px;color:var(--txt);font-family:var(--bd);font-size:.9rem;transition:.3s;outline:none}
.fg input:focus,.fg select:focus{border-color:var(--b);box-shadow:0 0 12px rgba(0,240,255,.1)}
.fg select option{background:#111;color:#fff}
.reg-btn{width:100%;padding:.85rem;background:transparent;border:2px solid var(--b);color:var(--b);font-family:var(--hd);font-size:.85rem;letter-spacing:3px;position:relative;overflow:hidden;transition:.4s;margin-top:.2rem}
.reg-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--b),var(--pu));transform:scaleX(0);transform-origin:left;transition:.4s;z-index:-1}
.reg-btn:hover::before{transform:scaleX(1)}.reg-btn:hover{color:#fff;box-shadow:0 0 22px rgba(0,240,255,.2)}
.reg-success{text-align:center;padding:1.5rem 0}.reg-success h3{font-family:var(--hd);font-size:1.1rem;color:var(--g);letter-spacing:2px;margin:.7rem 0}.reg-success p{color:var(--dim)}.rs-i{font-size:2.2rem}

/* FOOTER */
#footer{position:relative;z-index:5;padding:3rem 2rem;text-align:center;border-top:1px solid rgba(0,240,255,.05);overflow:hidden}
.footer-grid{position:absolute;inset:0;background:linear-gradient(rgba(0,240,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.018) 1px,transparent 1px);background-size:40px 40px;opacity:.5}
.footer-inner{position:relative}
.footer-logo{font-family:var(--hd);font-size:1.6rem;font-weight:900;color:#fff;text-shadow:0 0 18px rgba(0,240,255,.3);margin-bottom:.2rem}
.footer-tag{font-family:var(--mn);font-size:.65rem;color:var(--b);letter-spacing:5px;margin-bottom:1.2rem}
.footer-links{display:flex;justify-content:center;gap:1.3rem;margin-bottom:1.2rem}
.footer-links a{font-family:var(--mn);font-size:.7rem;color:var(--dim);letter-spacing:1px;transition:.3s}.footer-links a:hover{color:var(--p)}
.footer-copy{font-family:var(--mn);font-size:.55rem;color:rgba(136,136,170,.35);letter-spacing:2px}

/* HACKER TERMINAL */
#hterm{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(680px,92vw);z-index:15000;background:rgba(5,5,16,.96);border:1px solid rgba(0,240,255,.22);border-radius:8px;backdrop-filter:blur(20px);box-shadow:0 0 35px rgba(0,240,255,.08);transition:.4s;font-family:var(--mn);font-size:.78rem}
.hterm-off{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(25px)}
.hterm-head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid rgba(0,240,255,.08);color:var(--dim);font-size:.6rem;letter-spacing:2px}
.hterm-x{background:none;border:none;color:var(--p);font-size:.9rem;cursor:pointer}
.hterm-body{padding:10px 14px;max-height:240px;overflow-y:auto;min-height:100px}
.htl{margin-bottom:2px;color:var(--g);word-break:break-all}.htl.sys{color:var(--b)}.htl.err{color:var(--p)}.htl.warn{color:var(--y)}.htl .hl{color:var(--p);font-weight:700}
.hterm-in{display:flex;align-items:center;padding:8px 14px;border-top:1px solid rgba(0,240,255,.08)}
.hterm-p{color:var(--b);margin-right:8px;white-space:nowrap}
#hterm-input{flex:1;background:none;border:none;color:var(--g);font-family:var(--mn);font-size:.78rem;outline:none;caret-color:var(--g)}

/* EASTER EGG */
#easter-egg{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center}
.ee-box{text-align:center;max-width:90vw;padding:1.5rem}
.ee-ascii{font-family:var(--mn);font-size:clamp(.18rem,.55vw,.4rem);color:var(--b);line-height:1.2;white-space:pre;margin-bottom:1.2rem;text-shadow:0 0 8px rgba(0,240,255,.4);overflow:hidden}
.ee-msg{font-size:1.1rem;color:var(--txt);margin-bottom:.3rem}
.ee-code{color:var(--g)!important;font-size:1.2rem!important;font-family:var(--hd)!important;text-shadow:0 0 18px rgba(57,255,20,.4)}
.ee-close{margin-top:1.2rem;padding:.4rem 1.2rem;background:none;border:1px solid var(--b);color:var(--b);font-family:var(--mn);cursor:pointer;transition:.3s}
.ee-close:hover{background:var(--b);color:var(--bg)}

@media(max-width:480px){.sec{padding:3.5rem 1rem}.reg-card{padding:1.6rem 1.2rem}.cd-b{min-width:45px;padding:.3rem .4rem}}