:root{
  --primary: #22577A;
  --accent: #38A3A5;
  --dark: #113447;
  --light: #F7F9FB;
  --text: #0F172A;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--text); background: var(--light); }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.site-header { position: sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid #e5e7eb; }
.site-header .container { display:flex; align-items:center; gap:16px; padding: 14px 20px; }
.logo { font-weight:700; color: var(--dark); text-decoration:none; font-size: 18px; }
.logo .pin { margin-right:6px; }
.nav a { margin-right: 14px; text-decoration:none; color:#334155; }
.nav a:hover { color: var(--primary); }
.cta { margin-left:auto; background: var(--primary); color:white; padding:10px 14px; border-radius: 10px; text-decoration:none; }
.hero { background: linear-gradient(180deg, #fff, #f3f6f8); border-bottom:1px solid #e5e7eb; }
.hero .container { padding: 64px 20px; text-align:center; }
.hero h1 { font-size: 40px; line-height:1.1; margin:0 0 16px; }
.hero p { font-size: 18px; color:#334155; }
.btn { display:inline-block; background: var(--accent); color:#003; padding:12px 16px; border-radius: 12px; text-decoration:none; font-weight:600; }
.btn.outline { background: transparent; border:2px solid var(--accent); color: var(--accent); }
.actions .btn { margin-right: 10px; }
.trust { margin-top:14px; font-size: 14px; color:#475569; }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.features-quick .card { background:white; padding:18px; border-radius:14px; border:1px solid #e5e7eb; }
.screenshot img { width:100%; height:auto; border-radius: 12px; border:1px solid #e5e7eb; background:white; }
.callout { background:white; border-radius: 12px; border:1px solid #e5e7eb; padding: 24px; margin: 24px auto; }
.site-footer { margin-top:40px; padding: 24px 0; background: #0b1520; color:#cbd5e1; }
.site-footer .grid { grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.site-footer a { color:#e2e8f0; text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }
.site-footer .logo { font-weight:700; color:white; }
.site-footer .legal { border-top:1px solid #1f2937; margin-top:12px; padding-top:12px; font-size: 12px; text-align:center; }
.page { padding: 32px 20px; }
.page h1 { margin: 0 0 12px; }
.feature-list li { margin: 10px 0; }
.steps li { margin: 8px 0; }
.contact label { display:block; margin: 10px 0; }
.contact input, .contact textarea { width:100%; padding:10px; border:1px solid #e5e7eb; border-radius:8px; }
.contact button { margin-top:10px; }
.legal h2 { margin-top: 18px; }
@media (prefers-color-scheme: dark) {
  html, body { background: #0b1520; color: #e2e8f0; }
  .site-header { background:#0f1b26; border-bottom-color:#1f2a36; }
  .nav a { color:#cbd5e1; }
  .hero { background: linear-gradient(180deg, #0f1b26, #0b1520); }
  .features-quick .card, .callout, .screenshot img { background:#0f1b26; border-color:#1f2a36; }
}