:root {
  --bg: #f4f5fb;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #667085;
  --line: #e6e8ef;
  --primary: #4f46e5;
}
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
.container { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
.site-header, .site-footer { background:#fff; border-bottom:1px solid var(--line); }
.site-footer { border-top:1px solid var(--line); border-bottom:none; margin-top:40px; }
.nav-wrap, .footer-wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; }
.brand { font-weight:800; }
.nav { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.main-content { padding:32px 0 48px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:24px; box-shadow:0 8px 24px rgba(15,23,42,.04); }
.grid { display:grid; gap:20px; }
.grid-2 { grid-template-columns: 1.2fr .8fr; }
.badge { display:inline-block; background:#eef2ff; color:var(--primary); border-radius:999px; padding:7px 12px; font-size:12px; font-weight:700; }
.hero h1 { font-size:48px; line-height:1.05; margin:12px 0; }
.hero p { color:var(--muted); font-size:18px; line-height:1.6; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:14px; border:1px solid var(--line); font-weight:700; }
.btn-primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-secondary { background:#fff; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; }
.stack { display:grid; gap:16px; }
.input { width:100%; margin-top:8px; padding:12px 14px; border:1px solid #d7d8df; border-radius:12px; }
.alert { margin-bottom:16px; padding:12px 14px; border-radius:12px; }
.alert-error { background:#fdecec; color:#8a1f1f; }
.alert-success { background:#ecfdf3; color:#166534; }
.meta { color:var(--muted); }
@media (max-width: 920px) {
  .grid-2 { grid-template-columns: 1fr; }
  .hero h1 { font-size:36px; }
}