:root{
  --bg:#0b0f15;
  --card:#0f1721;
  --muted:#94a3b8;
  --accent:#7c5cff;
  --glass:rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:#e6eef8;
  background:radial-gradient(1200px 600px at 10% 10%,rgba(124,92,255,0.08),transparent 8%),linear-gradient(180deg,#05060a 0%,#0b0f15 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent),#4c6df5);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
container,main{display:block}
main.container{min-height:calc(100vh - 56px);display:flex;align-items:center;justify-content:center;padding:48px}
.card{width:min(920px,92%);background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:16px;padding:48px;box-shadow:0 8px 30px rgba(2,6,23,0.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.03);display:grid;gap:20px;grid-template-columns:1fr}
.title{font-size:clamp(28px,6vw,56px);line-height:1.02;margin:0;font-weight:800;letter-spacing:-0.02em}
.subtitle{margin:0;color:var(--muted);font-size:16px}
.subtitle .note{color:var(--muted);font-size:12px;margin-left:8px;font-style:italic;opacity:0.95}
.controls{display:flex;gap:12px;align-items:center;margin-top:10px}
.btn{background:linear-gradient(90deg,#2b6cff,#4cc3ff,#3b82f6);color:white;padding:12px 18px;border-radius:10px;border:0;font-weight:600;cursor:pointer;box-shadow:0 6px 18px rgba(59,130,246,0.12);transition:transform .18s ease,box-shadow .18s ease;text-decoration:none;display:inline-block}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--accent)}
.footer{height:56px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}
@media(min-width:980px){main.container{padding:72px}.card{padding:64px}}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.title{animation:float 6s ease-in-out infinite}
.btn:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgba(59,130,246,0.18);filter:brightness(1.03)}
.btn:focus-visible{outline:3px solid rgba(76,145,255,0.16);outline-offset:4px}