:root{
  --brand-primary:#1E2A5A;   /* Navy */
  --brand-secondary:#00A3FF; /* Cyan */
  --brand-accent:#FF6B00;    /* Orange */
  --brand-muted:#5F6C7B;     /* Muted slate */
  --bg:#0A0F1F;              /* Deep background for hero */
  --text:#111827;            /* Gray-900 */
  --text-muted:#4B5563;      /* Gray-600 */
  --surface:#FFFFFF;
  --surface-alt:#F8FAFC;     /* slate-50 */
  --border:#E5E7EB;          /* gray-200 */
  --success:#10B981;         /* emerald-500 */
  --warning:#F59E0B;         /* amber-500 */
  --radius-xl:20px;
  --shadow-1:0 10px 24px rgba(0,0,0,.08);
  --shadow-2:0 28px 60px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:var(--text);background:var(--surface);}
img{max-width:100%;display:block}
a{color:var(--brand-secondary);text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--brand-accent);color:#fff;border:none;border-radius:999px;padding:14px 22px;font-weight:600;box-shadow:var(--shadow-1);transition:transform .08s ease,box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn.outline{background:transparent;border:2px solid var(--brand-secondary);color:var(--brand-secondary)}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(0,163,255,.1);color:var(--brand-secondary);font-weight:600;font-size:12px;letter-spacing:.2px}

header.hero{position:relative;background:linear-gradient(135deg,var(--bg) 0%, #111936 100%);color:#fff;overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:84px 20px}
.hero h1{font-size:44px;line-height:1.1;margin:0 0 16px}
.hero p{color:#D0D7E2;font-size:18px;margin:0 0 28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-blob{position:absolute;inset:auto -10% -20% auto;width:620px;opacity:.25;filter:blur(12px)}

.section{padding:72px 0}
.section h2{font-size:34px;margin:0 0 14px}
.section p.lead{font-size:18px;color:var(--text-muted);margin:0 0 30px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);padding:22px;box-shadow:var(--shadow-1)}
.card h3{margin:10px 0 10px;font-size:18px}
.card p{color:var(--text-muted);font-size:14.5px;line-height:1.6;margin:0}

.features .card{display:flex;gap:16px;align-items:flex-start}
.icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(30,42,90,.08);color:var(--brand-primary);flex:0 0 auto}

.steps{position:relative}
.steps .flow{position:relative;background:var(--surface-alt);border:1px dashed var(--border);border-radius:var(--radius-xl);padding:26px}
.step{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:flex-start;padding:14px 12px;border-radius:16px}
.step:not(:last-child){border-bottom:1px dashed var(--border);padding-bottom:18px;margin-bottom:12px}
.step .num{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--brand-secondary),#72d1ff);color:#001a2b;font-weight:800;display:grid;place-items:center;box-shadow:var(--shadow-1)}
.step h4{margin:2px 0 8px}
.step p{margin:0;color:var(--text-muted)}

.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.milestone{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px}
.milestone .tag{font-size:12px;background:rgba(255,107,0,.1);color:var(--brand-accent);border-radius:999px;padding:6px 10px;display:inline-block;margin-bottom:8px}

.ucx{background:linear-gradient(180deg,#F6FAFF 0%,#fff 100%)}
.ucx .grid-3 .card{background:#fff}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}
.kpi strong{font-size:28px}
.kpi span{display:block;color:var(--text-muted);font-size:13px;margin-top:6px}

.cta-panel{background:linear-gradient(135deg,var(--brand-primary),#2B3A78);color:#fff;border-radius:24px;padding:26px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;box-shadow:var(--shadow-2)}

footer{padding:40px 0;border-top:1px solid var(--border);background:var(--surface)}

@media (max-width: 980px){
  .hero .container{grid-template-columns:1fr;gap:18px;padding:64px 20px}
  .grid-3,.grid-4,.kpis{grid-template-columns:1fr;gap:14px}
  .cta-panel{grid-template-columns:1fr}
}