:root{--bg:#0b1221;--brand:#2aa8ff;--brand-2:#6ecbff;--text:#e6f1ff;--muted:#b9c6d3;--card:rgba(255,255,255,.08);--border:rgba(255,255,255,.16);--ring:rgba(42,168,255,.5);--radius-lg:16px;--radius-full:9999px}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:radial-gradient(1200px 800px at 10% -10%,#0e1b36 0%,var(--bg) 60%),linear-gradient(180deg,#0b1221 0%,#0a0f1e 100%);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}

.container{max-width:1120px;margin-inline:auto;padding:24px}
.row{display:flex;gap:16px}
.center-y{align-items:center}
.space-between{justify-content:space-between}
.grid{display:grid;gap:20px}

.rounded-2xl{border-radius:var(--radius-lg)}
.rounded-full{border-radius:var(--radius-full)}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:var(--radius-lg);font-weight:600;border:1px solid transparent;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,background .24s}
.btn-primary{background:linear-gradient(180deg,var(--brand),#207bd8);color:#fff;box-shadow:0 8px 24px rgba(42,168,255,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(42,168,255,.36)}
.btn-ghost{background:rgba(255,255,255,.06);color:var(--text);border-color:var(--border);backdrop-filter:blur(12px) saturate(160%)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

.bg{position:fixed;inset:0;pointer-events:none}
.fx::before,.fx::after{content:"";position:absolute;filter:blur(60px);opacity:.55}
.fx::before{width:520px;height:520px;left:-120px;top:-160px;background:radial-gradient(circle at 40% 40%,var(--brand-2),transparent 60%)}
.fx::after{width:520px;height:520px;right:-160px;bottom:-160px;background:radial-gradient(circle at 60% 60%,#2563eb,transparent 60%)}

.site-header{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,rgba(10,15,30,.75),rgba(10,15,30,.5));backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.2px;color:var(--text)}
.logo{border-radius:var(--radius-full)}
.nav{position:relative}
.nav-toggle{display:none;background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--border);padding:8px 12px}
.nav-menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav-menu a{color:var(--text);opacity:.9;padding:8px 10px;border-radius:var(--radius-lg)}
.nav-menu a:hover{background:rgba(255,255,255,.06)}
.actions{display:flex;gap:10px}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding-top:28px;padding-bottom:24px}
.eyebrow{color:var(--brand-2);font-weight:700;text-transform:uppercase;letter-spacing:.18em;font-size:.78rem}
.title{font-size:clamp(28px,4vw,48px);line-height:1.15;margin:10px 0 8px}
.subtitle{color:var(--muted);max-width:60ch;margin-bottom:18px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{min-height:220px;padding:18px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(800px 320px at 10% 10%,rgba(42,168,255,.16),transparent 40%)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%}
.stat{background:rgba(255,255,255,.04);border:1px solid var(--border);padding:14px;border-radius:var(--radius-lg);text-align:center}
.kpi{display:block;font-size:28px;font-weight:800;color:#8bd0ff}
.label{display:block;font-size:.84rem;color:var(--muted)}

.section{padding:36px 24px}
.section-title{text-align:center;font-size:clamp(22px,3vw,32px);margin:0 0 18px}

.features-grid{grid-template-columns:repeat(4,1fr)}
.card{padding:18px;border:1px solid var(--border)}
.icon{width:36px;height:36px;background:linear-gradient(180deg,rgba(42,168,255,.25),rgba(42,168,255,.06));display:flex;align-items:center;justify-content:center;color:#b3e3ff;border:1px solid var(--border);margin-bottom:10px}
.card h3{margin:8px 0 6px;font-size:1.05rem}
.card p{color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--border)}
.num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(180deg,var(--brand-2),rgba(42,168,255,.25));color:#04213d;font-weight:800;border:1px solid var(--border)}

.cta-panel{text-align:center;padding:24px;border:1px solid var(--border)}

.site-footer{padding:24px 24px 40px;color:var(--muted)}
.top{color:var(--muted)}

.glass{background:var(--card);backdrop-filter:blur(12px) saturate(160%);box-shadow:0 8px 40px rgba(0,0,0,.25)}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:8px;top:8px;width:auto;height:auto;background:#000;color:#fff;padding:8px;border-radius:var(--radius-lg);z-index:50}

@media (max-width: 960px){
  .hero{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .container{padding:18px}
  .nav-toggle{display:inline-flex}
  .nav-menu{position:absolute;right:0;top:44px;flex-direction:column;background:rgba(10,15,30,.9);backdrop-filter:blur(10px);min-width:180px;border:1px solid var(--border);padding:8px;display:none}
  .nav-menu.open{display:flex}
  .features-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
