:root{--bg:#050816;--panel:#0a1022;--line:rgba(148,163,184,.12)}
html{background:var(--bg)}
body{min-height:100vh;background:radial-gradient(circle at 12% -5%,rgba(6,182,212,.16),transparent 27%),radial-gradient(circle at 88% 5%,rgba(99,102,241,.11),transparent 28%),var(--bg)}
.grid-bg{background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,black,transparent 90%)}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(16px)}
.glass-strong{background:linear-gradient(180deg,rgba(12,20,42,.95),rgba(7,12,28,.9));border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 70px rgba(0,0,0,.3)}
.brand-mark{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 20%),linear-gradient(135deg,rgba(34,211,238,.28),rgba(99,102,241,.18))}
.section-kicker{letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;font-weight:700}
.gradient-text{background:linear-gradient(90deg,#67e8f9,#7dd3fc,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.card-hover{transition:transform .25s ease,border-color .25s ease,background-color .25s ease}
.mobile-menu{max-height:0;opacity:0;overflow:hidden;transition:max-height .28s ease,opacity .2s ease}.mobile-menu.open{max-height:520px;opacity:1}
.safe-bottom{padding-bottom:max(12px,env(safe-area-inset-bottom))}
@media(hover:hover){.card-hover:hover{transform:translateY(-5px);border-color:rgba(103,232,249,.28);background-color:rgba(255,255,255,.055)}}