/* Simple, clean corporate style */
:root{
  --bg:#0b1220;
  --ink:#101828;
  --muted:#475467;
  --brand:#2563eb;
  --brand-ink:#1e40af;
  --surface:#ffffff;
  --accent:#eef2ff;
  --ring:#93c5fd;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
     color:var(--ink); background:#f7f9fc; line-height:1.6}
a{color:var(--brand); text-decoration: none}
a:hover{ text-decoration: underline }
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(120%) blur(8px); border-bottom:1px solid #eef2f7; z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between; padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:700}
.logo-mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg, var(--brand), var(--brand-ink)); display:inline-block}
.nav a{margin-left:20px;color:var(--muted);font-weight:600}
.nav .btn{margin-left:24px}
.hero{background:radial-gradient(1200px 500px at 50% -10%, #dbeafe 0%, rgba(219,234,254,0) 60%), linear-gradient(#ffffff, #f7f9fc);}
.hero .wrap{display:grid;grid-template-columns: 1.15fr 0.85fr; gap:40px; padding:64px 0}
h1{font-size: clamp(32px, 5vw, 56px); line-height:1.05; margin:0 0 16px 0; letter-spacing:-0.02em}
.lead{font-size: clamp(16px, 2.2vw, 20px); color:var(--muted); margin-bottom:28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center; padding:12px 18px;border-radius:999px;border:1px solid transparent; font-weight:700; cursor:pointer; transition:.2s}
.btn.primary{background:var(--brand); color:#fff}
.btn.primary:hover{background:var(--brand-ink)}
.btn.ghost{background:#fff;border-color:#e5e7eb;color:var(--ink)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.kpi{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius); padding:18px}
.kpi b{font-size:28px;display:block}
.illustration{align-self:center; background:var(--bg); color:#cbd5e1; border-radius:24px; padding:28px;border:1px solid #111827}
.code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size:13px; background:#0b1220; color:#e5e7eb; border-radius:12px; padding:16px; overflow:auto; border:1px solid #1f2937}
.section{padding:56px 0}
.section h2{font-size: clamp(24px, 3.5vw, 36px); margin:0 0 12px}
.section .sub{color:var(--muted); margin-bottom:24px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid #eef2f7;border-radius:var(--radius); padding:22px}
.badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--brand-ink); padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}
.footer{margin-top:40px;background:#0b1220;color:#cbd5e1}
.footer .container{padding:28px 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between}
.footer a{color:#cbd5e1}
small, .muted{color:var(--muted)}
ul.clean{list-style:none;padding-left:0;margin:0}
ul.clean li{margin:8px 0}
.hero .wrap{grid-template-columns:1fr}
@media(min-width:920px){ .hero .wrap{grid-template-columns: 1.15fr 0.85fr} }