:root {
  --navy: #0A2342;
  --teal: #2CA8A4;
  --accent: #FF6B35;
  --bg: #F5F7FA;
  --text: #333333;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: white; }
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, 94%); margin: 0 auto; }

header.nav { position: sticky; top: 0; z-index: 10; background: white; border-bottom: 1px solid rgba(0,0,0,0.06); }
header.nav .inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 34px; display:block; }
.brand .name { font-weight: 800; letter-spacing: 0.5px; color: var(--navy); }
nav.menu a { margin-left: 18px; padding: 8px 10px; font-weight: 600; color: var(--navy); opacity: .85; }
nav.menu a:hover { opacity: 1; }

.btn { display: inline-flex; align-items:center; gap:10px; padding: 12px 18px; border-radius: 10px; border: 2px solid transparent; font-weight: 700; cursor: pointer; }
.btn.primary { background: var(--accent); color: white; }
.btn.primary:hover { filter: brightness(0.95); }
.btn.ghost { border-color: var(--navy); color: var(--navy); }
.btn.ghost:hover { background: rgba(10,35,66,0.06); }

.hero { background: var(--bg); padding: 72px 0 48px; }
.hero .content { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
.hero h1 { font-size: clamp(28px, 4.4vw, 52px); color: var(--navy); margin: 0 0 12px; }
.hero p.lead { font-size: clamp(16px, 2vw, 19px); opacity: .9; margin: 0 0 24px; }
.hero .badge { display:inline-block; background: rgba(44,168,164,.12); color: var(--navy); padding: 8px 12px; border-radius: 999px; font-weight: 700; margin-bottom: 14px; }
.hero .card { background: white; border-radius: 16px; box-shadow: 0 6px 30px rgba(0,0,0,.06); padding: 18px; }
.kpis { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }
.kpis .kpi { background: #fff; border-radius: 14px; padding: 14px; text-align:center; border:1px solid rgba(0,0,0,.06); }
.kpis .kpi .n { font-size: 24px; font-weight: 800; color: var(--navy); }
.kpis .kpi .t { font-size: 12px; opacity:.75; }

.section { padding: 60px 0; }
.section h2 { font-size: clamp(22px, 3.6vw, 36px); margin: 0 0 12px; color: var(--navy); }
.section p.sub { margin: 0 0 24px; opacity:.85; }

.grid-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { background: #fff; border-radius: 14px; border:1px solid rgba(0,0,0,.06); padding: 18px; }
.card h3 { margin: 4px 0 8px; color: var(--navy); }
.card p { margin:0; opacity:.85; }

.how { background: white; }
.roles .pill { display:inline-block; padding:6px 10px; border-radius: 999px; background: rgba(10,35,66,.06); color: var(--navy); font-weight:700; margin-bottom:8px; }

.features { background: var(--bg); }
.featurelist { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; }
.feature { background:#fff; border-radius:14px; border:1px solid rgba(0,0,0,.06); padding:16px; display:flex; align-items:flex-start; gap:12px; }
.feature .icon { width: 36px; height:36px; border-radius:8px; background: rgba(44,168,164,.14); display:flex; align-items:center; justify-content:center; font-weight:900; color: var(--teal); }
.feature h4 { margin:0 0 6px; color: var(--navy); }
.feature p { margin:0; opacity:.85; }

.roadmap .steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.step { background:#fff; border-radius:14px; padding:16px; border:1px solid rgba(0,0,0,.06); }
.step .tag { font-size:12px; font-weight:800; color:#fff; background: var(--navy); padding:6px 10px; border-radius:999px; display:inline-block; margin-bottom:8px; }
.step ul { margin:8px 0 0 18px; padding:0; line-height:1.5; }
.step ul li { margin:4px 0; }

.cta { background: linear-gradient(135deg, var(--navy), #08192f); color:#fff; padding: 54px 0; text-align:center; }
.cta h2 { margin:0 0 10px; }
.cta p { margin:0 0 20px; opacity:.9; }

footer { background: #0b213f; color: #d8e1ee; padding: 26px 0; font-size: 14px; }
footer a { color:#d8e1ee; opacity:.9; }
footer a:hover { opacity:1; }

@media (max-width: 900px) {
  .hero .content { grid-template-columns: 1fr; }
  .grid-3, .featurelist, .roadmap .steps { grid-template-columns: 1fr; }
  nav.menu { display:none; }
}