:root{
  --bg0:#070a13; --bg1:#0c1226;
  --txt:#e9edf6; --muted:#b2bdd3;
  --c1:#18ffd6; --c2:#7a5cff; --c3:#00d4ff; --c4:#ff8bd4;
  --glass:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(1200px 800px at 90% -10%, rgba(122,92,255,.15), transparent 60%),
              radial-gradient(1000px 700px at -10% 0%, rgba(24,255,214,.12), transparent 60%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

#backdrop{
  position:fixed; inset:-10%; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(45% 60% at 20% 20%, rgba(24,255,214,.22), transparent 60%),
    radial-gradient(45% 60% at 80% 60%, rgba(0,212,255,.18), transparent 60%),
    radial-gradient(35% 50% at 60% 10%, rgba(122,92,255,.18), transparent 60%);
  filter: blur(40px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(0,-20px,0)}
}

.pagewrap{position:relative; z-index:1}

#preloader{position:fixed; inset:0; display:grid; place-items:center; background:linear-gradient(180deg,#070a13,#0c1226); z-index:1000; transition:opacity .5s ease, visibility .5s ease}
#preloader.hide{opacity:0; visibility:hidden}
.prewrap{display:flex; flex-direction:column; align-items:center; gap:14px}
.spinner{width:72px;height:72px;border-radius:50%; background:
  conic-gradient(from 0deg, var(--c2), transparent 40%, var(--c1));
  animation:spin 1.1s linear infinite; filter:drop-shadow(0 0 14px rgba(122,92,255,.6))}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{width:200px;height:6px;border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden}
.bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--c2),var(--c1)); border-radius:999px; animation:bar 2.2s ease-in-out infinite}
@keyframes bar{0%{width:0%} 60%{width:100%} 100%{width:100%}}
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--stroke); border-radius:999px; background:rgba(255,255,255,.04); font-size:12px; color:var(--muted)}

.container{max-width:1100px; padding:56px 22px; margin:0 auto}
.head{display:flex; justify-content:space-between; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:1px}
.logo{width:28px;height:28px}

.hero{padding-top:18px}
.headline{margin:8px 0 12px}
.title{display:block; font-family:"Teko", system-ui; font-size:clamp(38px,7vw,72px); letter-spacing:.02em; line-height:.95; text-transform:uppercase;
  background:linear-gradient(90deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(122,92,255,.45)}
.subline{display:block; font-family:"Teko", system-ui; font-size:clamp(22px,3.8vw,34px); letter-spacing:.02em; color:#cfe7ff}
.lede{max-width:680px; color:#c7d3ea}

.cta{
  --glow: 0 12px 34px rgba(122,92,255,.35);
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  padding:16px 22px; font-family:"Teko"; font-size:22px; letter-spacing:.05em;
  text-decoration:none; text-transform:uppercase; color:#0b0f1a;
  background:linear-gradient(90deg,var(--c2),var(--c1));
  border-radius:16px; box-shadow:var(--glow), 0 0 0 2px rgba(24,255,214,.15) inset;
  position:relative; transform:translateZ(0);
}
.cta::after{content:""; position:absolute; inset:-2px; border-radius:18px;
  background:conic-gradient(from 0deg, rgba(122,92,255,.5), rgba(0,212,255,.5), rgba(24,255,214,.5), rgba(122,92,255,.5));
  filter:blur(12px); opacity:.45; z-index:-1; animation:spin 6s linear infinite}
.cta:hover{box-shadow:0 16px 42px rgba(0,212,255,.35), 0 0 0 2px rgba(0,212,255,.32) inset}
.cta .ico{font-size:20px}

.stats{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
.badge{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:var(--glass); border:1px solid var(--stroke)}
.badge span{color:var(--muted); font-size:12px}
.badge b{font-family:"Teko"; font-size:18px; letter-spacing:.02em}

.ticker{margin-top:26px; border:1px dashed rgba(255,255,255,.12); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.03)}
.track{display:flex; gap:24px; padding:10px 14px; white-space:nowrap; animation:marquee 24s linear infinite}
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.tick{display:inline-flex; gap:10px; align-items:center; opacity:.9}
.tick b{font-family:"Teko"; font-size:18px}
.ind{font-size:12px; padding:2px 6px; border-radius:8px}
.ind.up{background:rgba(24,255,214,.15); color:#6bffea}
.ind.down{background:rgba(255,139,212,.15); color:#ffb3e7}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.card{
  position:relative; padding:18px; border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid var(--stroke);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style:preserve-3d;
}
.card::before, .card::after{content:none !important}
.card:hover{transform:translateY(-4px) rotateX(0.5deg) rotateY(-0.8deg);
  border-color:rgba(0,212,255,.35); box-shadow:0 18px 50px rgba(0,212,255,.12)}
.card h3{margin:4px 0 6px; font:700 18px "Teko"; letter-spacing:.02em; text-transform:uppercase}
.card p{color:#c7d3ea; font-size:14px}

.foot{padding-top:32px; opacity:.75; font-size:13px}

.char{display:inline-block; transform:translateY(22px) scale(.98); opacity:0}
.char.revealed{animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{transform:none; opacity:1}}

@media (max-width:900px){
  .container{padding:40px 20px}
  .stats{gap:10px}
}