:root {
  --color-bg: #F9FAFB;
  --color-primary: #004AAD;
  --color-secondary: #00B3A6;
  --color-accent: #FFD66B;
  --color-text: #1F2937;
  --color-muted: #4B5563;
  --radius: 12px;
}

* { box-sizing: border-box; }
body { font-family: 'Outfit', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: var(--color-bg); color: var(--color-text); margin: 0; padding: 24px; -webkit-font-smoothing: antialiased; }
.container { max-width: 1100px; margin: 0 auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.brand { font-weight:800; color:var(--color-text); font-size:18px; }
nav a { margin-left:18px; color:var(--color-muted); text-decoration:none; font-weight:600 }
nav a.cta { background: linear-gradient(135deg, #4ade80 0%, #22d3ee 50%); color:#000; padding:8px 12px; border-radius:8px; margin-left:12px; font-weight:800 }
.hero { padding:28px 0 }
.pill { display:inline-block; background:#f1fdfb; color:var(--color-secondary); padding:6px 10px; border-radius:999px; font-weight:600; margin-bottom:12px }
h1 { font-size:28px; margin:6px 0; }
p.lead { color:var(--color-muted); font-size:16px }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:20px }
.card { border:1px solid rgba(15,23,42,0.04); padding:18px; border-radius:12px; background:#fff }
.cta { display:inline-block; padding:10px 14px; background: linear-gradient(135deg, #4ade80 0%, #22d3ee 50%); color:#000; text-decoration:none; border-radius:8px; font-weight:700 }
footer { border-top:1px solid rgba(15,23,42,0.04); padding:18px 0; margin-top:36px; color:var(--color-muted); font-size:14px }
.muted { color:var(--color-muted) }

.brand-gradient {
  background: linear-gradient(135deg, #4ade80 0%, #22d3ee 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width:640px) { header{ flex-direction:column; align-items:flex-start } nav{ margin-top:8px } }