:root{--bg:#0a0f1a;--panel:#0b1220;--muted:#9ca3af;--text:#e5e7eb;--chip:#111827;--chip2:#0f172a;--ring:#1f2937}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:
  radial-gradient(800px 400px at 10% -10%, #0b0f17 0%, transparent 60%),
  radial-gradient(600px 350px at 90% -20%, #0b0f17 0%, transparent 55%),
  #05070d; color:var(--text)}

.nav{position:sticky;top:16px;z-index:50;padding:8px 16px;display:flex;justify-content:center}
.nav-inner{max-width:1120px;margin:0 auto;display:inline-flex;align-items:center;gap:10px;background:rgba(7,11,18,.85);backdrop-filter:blur(10px);border:1px solid #0f172a;border-radius:999px;padding:8px 12px;box-shadow:0 10px 30px rgba(0,0,0,.55)}
.nav-inner>div,.items{display:flex;align-items:center;gap:8px}
.brand{font-weight:900;font-size:24px;color:#fff;letter-spacing:-.02em;margin-left:8px;text-decoration:none;transition:color .2s}
.brand:hover{color:#d1d5db}
.divider{width:1px;height:32px;background:#0f172a;margin:0 6px}
.items{background:rgba(9,14,22,.6);backdrop-filter:blur(8px);border:1px solid #111827;border-radius:999px;padding:6px 10px}
.pill{display:flex;align-items:center;gap:8px;height:36px;border-radius:999px;background:#0b1220;color:#9ca3af;text-decoration:none;transition:all .25s ease;padding-right:0;max-width:36px;overflow:hidden}
.pill:hover{background:#0f172a;color:#ffffff;transform:translateY(-1px);max-width:180px;padding-right:10px}
.pill-ico{width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px}
.pill svg{width:18px;height:18px}
.pill-label{font-size:12px;font-weight:600;color:#d1d5db;opacity:0;white-space:nowrap;transition:opacity .25s ease}
.pill:hover .pill-label{opacity:1}

.hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:140px 24px 140px;overflow:hidden}
.site-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.site-bg .pattern{position:absolute;inset:-20%;opacity:.08;background-image:linear-gradient(135deg,rgba(255,255,255,.06) 8%,transparent 8%,transparent 50%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.06) 58%,transparent 58%,transparent);background-size:24px 24px;mix-blend-mode:overlay}
.bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;width:520px;height:520px;filter:blur(80px);opacity:.12;border-radius:50%;mix-blend-mode:screen;animation:float 14s ease-in-out infinite}
.b1{background:linear-gradient(135deg,#22d3ee,#818cf8);top:-140px;left:-140px}
.b2{background:linear-gradient(135deg,#34d399,#f472b6);bottom:-160px;right:-120px;animation-delay:1.2s}
.grain{position:absolute;inset:-200%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");transform:translateZ(0);animation:drift 22s linear infinite;opacity:.45}

.content{position:relative;z-index:1;max-width:960px;width:100%;display:grid;place-items:center;text-align:center;gap:20px;padding:24px;border-radius:20px;backdrop-filter:blur(4px)}
.title{font-size:clamp(42px,8vw,110px);line-height:1;letter-spacing:-.02em;color:#ffffff}
.subtitle{font-size:clamp(16px,2.4vw,20px);color:var(--muted)}
.loader{display:flex;align-items:center;gap:10px;margin-top:6px;height:20px}
.dot{width:10px;height:10px;border-radius:999px;background:#cbd5e1;opacity:.7;animation:bounce 1.4s infinite ease-in-out}

.fade-1{opacity:0;transform:translateY(8px);animation:fadeUp .6s ease forwards}
.fade-2{opacity:0;transform:translateY(8px);animation:fadeUp .65s ease forwards;animation-delay:.12s}
.fade-3{opacity:0;transform:translateY(8px);animation:fadeUp .7s ease forwards;animation-delay:.24s}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.6}40%{transform:translateY(-8px);opacity:1}}
@keyframes float{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-16px,0) scale(1.04)}}
@keyframes drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-12%,-8%,0)}}

@media (max-width:480px){.loader{gap:8px}.dot{width:8px;height:8px}}