@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#050505; --white:#f5f5f2; --muted:#858581;
  --accent:#ff5a00; --accent2:#ff9b4a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg)}
body{font-family:'Space Mono',monospace;color:var(--white);overflow:hidden}
main{position:relative;z-index:5;min-height:100vh;padding:30px 5vw 22px;display:flex;flex-direction:column}
.noise{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.grid{position:fixed;inset:-10%;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:55px 55px;transform:perspective(600px) rotateX(62deg) scale(1.6);transform-origin:50% 100%;animation:gridMove 9s linear infinite}
@keyframes gridMove{to{background-position:0 55px}}
.scan{position:fixed;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 22px var(--accent);z-index:4;animation:scan 6s linear infinite}
@keyframes scan{from{top:-2%}to{top:102%}}
.orb{position:fixed;width:42vw;height:42vw;border-radius:50%;filter:blur(110px);opacity:.11;pointer-events:none}
.orb-a{background:var(--accent);left:-20vw;top:15vh}.orb-b{background:#ff9b4a;right:-22vw;bottom:-15vh}
#particles{position:fixed;inset:0;z-index:2;pointer-events:none}

.nav{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.13);padding-bottom:18px}
.logo{font-family:'Barlow Condensed',sans-serif;display:flex;align-items:baseline;gap:7px}
.logo span{font-size:45px;font-weight:900;letter-spacing:-4px}.logo small{font-size:17px;letter-spacing:5px;color:var(--accent);font-weight:800}
.live{font-size:9px;letter-spacing:2px;color:var(--muted);display:flex;align-items:center;gap:9px}
.live i{display:block;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}

.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative}
.kicker{font-size:9px;letter-spacing:4px;color:var(--accent);display:flex;align-items:center;gap:14px;margin-bottom:24px;animation:fade .9s both}
.kicker b{height:1px;width:55px;background:var(--accent);box-shadow:0 0 9px var(--accent)}
.title-wrap{position:relative;animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both}
.ghost{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font-family:'Barlow Condensed';font-size:28vw;font-weight:900;line-height:.7;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.035);pointer-events:none}
h1{position:relative;font-family:'Barlow Condensed',sans-serif;font-size:clamp(110px,18vw,270px);font-weight:900;line-height:.72;letter-spacing:-7px}
h1 em{font-style:normal;color:transparent;-webkit-text-stroke:2px var(--white);text-shadow:0 0 35px rgba(255,255,255,.08)}
@keyframes rise{from{opacity:0;transform:translateY(45px) scale(.96);letter-spacing:12px}to{opacity:1;transform:none;letter-spacing:-7px}}
@keyframes fade{from{opacity:0}to{opacity:1}}

.lead{margin-top:35px;color:#aaa;font-size:12px;line-height:1.8;letter-spacing:.5px}.lead strong{color:var(--white)}
.meter{width:min(610px,90vw);margin-top:35px;padding:17px 20px;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(12px);text-align:left;position:relative}
.meter:before{content:"";position:absolute;left:-1px;top:-1px;width:80px;height:3px;background:var(--accent);box-shadow:0 0 15px var(--accent)}
.meter-top,.meter-bottom{display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#777}.meter-top strong,.pulse{color:var(--accent)}
.track{height:4px;background:rgba(255,255,255,.08);margin:12px 0;overflow:hidden}.track span{display:block;width:78%;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 16px var(--accent);animation:load 1.8s ease-out both,glow 1.5s infinite alternate}
@keyframes load{from{width:0}to{width:78%}}@keyframes glow{to{opacity:.6}}

.flash-card{position:absolute;font-family:'Space Mono';font-size:7px;letter-spacing:2px;color:rgba(255,106,0,.8);border:1px solid rgba(255,106,0,.25);padding:8px 11px;animation:float 4s ease-in-out infinite}
.card-a{left:8%;top:30%}.card-b{right:7%;top:38%;animation-delay:1s}.card-c{left:12%;bottom:24%;animation-delay:2s}
@keyframes float{50%{transform:translateY(-10px) rotate(-1deg);opacity:.5}}

.rings{position:absolute;right:4%;bottom:10%;width:180px;height:180px;display:grid;place-items:center;opacity:.4}
.rings span{position:absolute;border:1px solid rgba(255,90,0,.6);border-radius:50%;animation:spin 10s linear infinite}
.rings span:nth-child(1){inset:0}.rings span:nth-child(2){inset:20px;animation-duration:7s;animation-direction:reverse}.rings span:nth-child(3){inset:45px;animation-duration:5s}
.rings div{font-family:'Barlow Condensed';font-size:30px;font-weight:900;color:var(--accent)}.rings small{font-family:'Space Mono';font-size:6px;letter-spacing:3px;color:#aaa}
@keyframes spin{to{transform:rotate(360deg)}}
.bottom-message{width:100%;position:absolute;bottom:2%;display:flex;justify-content:space-between;font-size:7px;letter-spacing:2px;color:#666}
footer{border-top:1px solid rgba(255,255,255,.13);padding-top:15px;display:flex;justify-content:space-between;color:#5e5e5b;font-size:7px;letter-spacing:2px}

@media(max-width:800px){
  main{padding:22px 20px 18px}.status{font-size:7px;max-width:140px;text-align:right;line-height:1.5}
  .logo span{font-size:36px}.logo small{font-size:13px}
  h1{font-size:24vw;letter-spacing:-3px}h1 em{-webkit-text-stroke:1px var(--white)}
  .ghost{font-size:45vw}.rings{display:none}.flash-card{display:none}
  .bottom-message{bottom:1%;font-size:6px}.bottom-message span:last-child{display:none}
  footer{font-size:6px;gap:15px;line-height:1.5}
}
@media(max-width:480px){.kicker{font-size:7px;letter-spacing:2px}.kicker b{width:25px}.lead{font-size:10px}.meter{margin-top:28px}.meter-top,.meter-bottom{font-size:6px}}