:root{--brand-accent:#00D8FF;--brand-steel:#1E2A38;--brand-dark:#12181E;--brand-slate:#4C5D6C}
html,body{background:#0B0E11;color:#EAF4F7}
.hero-gradient{background: radial-gradient(900px 400px at 70% 10%, rgba(0,216,255,.14), transparent),
                          radial-gradient(700px 320px at 10% 20%, rgba(30,42,56,.85), rgba(18,24,30,1));}
.card{background:#0e141a;border:1px solid #1f2a36;border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,0.02)}
.card:hover{transform:translateY(-2px);transition:all .25s ease;box-shadow:0 18px 42px rgba(0,0,0,.35)}
.btn-primary{background:var(--brand-accent);color:#001016;border-radius:12px;font-weight:700;padding:.75rem 1.25rem}
.btn-outline{border:1px solid #334155;border-radius:12px;color:#EAF4F7;padding:.75rem 1.25rem}
input,textarea,select{background:#0f141a;color:#e5eef4;border:1px solid #233040;border-radius:12px;padding:.75rem}
input::placeholder,textarea::placeholder{color:#7a8a97}
a:hover{text-decoration: underline; text-decoration-color: var(--brand-accent)}
.badge{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;background:rgba(0,216,255,.12);color:#8beaff;border:1px solid rgba(0,216,255,.25);font-size:.75rem}
h1{letter-spacing:-0.02em}
.counter{font-variant-numeric: tabular-nums}