:root{
  --brand: #1eafe1;
  --bg: #ffffff;
  --muted: #6b7280;
  --radius: 10px;
  --container: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#111;background:var(--bg)}
.container{max-width:var(--container);margin:0 auto;padding:24px}
.small{max-width:720px}

.nav{border-bottom:1px solid rgba(30,175,225,0.08);background:linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,1));position:sticky;top:0;backdrop-filter:blur(4px);z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;color:var(--brand);text-decoration:none;font-size:18px;display:flex;align-items:center}
.nav a{margin-left:18px;color:#0b1720;text-decoration:none}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);background:#fff;color:#0b1720;text-decoration:none;font-weight:600}
.btn.primary{background:var(--brand);color:#fff;border:none;box-shadow:0 6px 18px rgba(30,175,225,0.12)}

.hero{padding:48px 0}
.hero-inner{display:flex;gap:40px;align-items:center}
.hero-copy{flex:1}
.hero h1{font-size:36px;margin:0 0 12px}
.lead{color:var(--muted);margin:0 0 18px}
.hero-art{width:340px}
.actions .btn{margin-right:12px}

.section{padding:40px 0}
.section.alt{background:rgba(30,175,225,0.03)}
h2{margin:0 0 8px}
.muted{color:var(--muted)}

.grid{display:flex;gap:18px;margin-top:18px}
.card{flex:1;padding:18px;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(12,15,20,0.03);border:1px solid rgba(15,23,42,0.04)}
.card h3{margin:8px 0}
.icon{height:56px;width:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(30,175,225,0.06);}

.steps{display:flex;gap:18px;margin-top:18px}
.step{flex:1;padding:16px;background:#fff;border-radius:10px;border:1px solid rgba(15,23,42,0.04)}

.footer{border-top:1px solid rgba(30,175,225,0.06);padding:18px 0;margin-top:30px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer a{margin-left:12px;color:var(--muted);text-decoration:none}

/* form */
.form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.form label{display:flex;flex-direction:column;font-weight:600}
.form input,.form textarea{margin-top:8px;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);font-size:14px}
.form-actions{display:flex;gap:12px}
.small.small .lead{max-width:42ch}

@media(max-width:900px){
  .hero-inner{flex-direction:column}
  .hero-art{width:100%}
  .grid{flex-direction:column}
  .steps{flex-direction:column}
}