:root{
  --bg:#07060f; --line:rgba(255,255,255,.16); --txt:#f4f3ff; --muted:rgba(244,243,255,.62);
  --acc:#7c5cff; --acc2:#00e5ff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--txt);background:var(--bg);
  min-height:100vh;padding:56px 16px 80px;overflow-x:hidden}

.bg{position:fixed;inset:0;overflow:hidden;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75;mix-blend-mode:screen;
  animation:float 18s ease-in-out infinite alternate}
.b1{width:460px;height:460px;background:#7c5cff;top:-140px;left:-120px}
.b2{width:420px;height:420px;background:#00e5ff;bottom:-160px;right:-100px;animation-delay:-5s}
.b3{width:360px;height:360px;background:#ff2d95;top:38%;left:58%;animation-delay:-9s}
.b4{width:300px;height:300px;background:#2ef2a0;top:55%;left:6%;animation-delay:-13s}
@keyframes float{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(60px,-40px,0) scale(1.15)}
  100%{transform:translate3d(-40px,50px,0) scale(.95)}
}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}

.wrap{position:relative;z-index:2;width:min(1020px,100%);margin:0 auto}
.head{text-align:center;margin-bottom:38px;animation:up .7s cubic-bezier(.2,.8,.2,1) both}
.pill{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#bfe9ff;
  border:1px solid var(--line);padding:7px 15px;border-radius:99px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(12px)}
h1{font-size:clamp(34px,7vw,56px);margin:16px 0 8px;letter-spacing:-.02em;
  text-shadow:0 8px 40px rgba(0,0,0,.5)}
h1 span{background:linear-gradient(90deg,#a78bfa,#00e5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{color:var(--muted);font-size:15.5px;text-shadow:0 3px 18px rgba(0,0,0,.6)}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;
  animation:up .7s .1s cubic-bezier(.2,.8,.2,1) both}
.glass{position:relative;padding:26px;border-radius:26px;overflow:hidden;
  background:rgba(255,255,255,.09);border:1px solid var(--line);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 26px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s}
.glass::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.glass:hover{transform:translateY(-10px);box-shadow:0 40px 80px rgba(0,0,0,.55),
  inset 0 1px 0 rgba(255,255,255,.5)}
.glass:hover::before{left:130%}
.tall{grid-row:span 2}
.icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;font-size:24px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);margin-bottom:16px}
.glass h3{font-size:20px;letter-spacing:-.01em;margin-bottom:9px}
.glass p{color:var(--muted);font-size:14.3px;line-height:1.65}
.stats{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.stats span{font-size:11.5px;letter-spacing:.08em;padding:6px 12px;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24)}
.bar{height:9px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin:18px 0 14px}
.bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#7c5cff,#00e5ff);animation:fill 3.4s ease-in-out infinite alternate}
@keyframes fill{to{width:92%}}
.row{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;
  border-bottom:1px dashed rgba(255,255,255,.16)}
.row:last-child{border-bottom:none}
.row b{color:#bfe9ff}
.btn{margin-top:16px;padding:13px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.16);color:var(--txt);font-family:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;transition:.3s;backdrop-filter:blur(8px)}
.btn:hover{background:#fff;color:#0a0818;transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(255,255,255,.24)}

.hud{margin-top:24px;display:flex;align-items:center;gap:12px;padding:16px 22px;border-radius:20px;
  font-size:14px;animation:up .7s .2s cubic-bezier(.2,.8,.2,1) both}
.hud .dot{width:10px;height:10px;border-radius:50%;background:#2ef2a0;box-shadow:0 0 12px #2ef2a0;
  animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.35}}
.hud em{margin-left:auto;font-style:normal;font-weight:700;color:#bfe9ff;font-variant-numeric:tabular-nums}

@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}.tall{grid-row:span 1}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.glass{padding:22px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}