:root{--bg:#f6f7fb;--ink:#12131a;--muted:#5b6172;--card:#fff;--line:#e6e8ef;--brand:#2E2E84;--radius:16px;font-family:Inter,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}
.demo-top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0}
.demo-brand{font:800 1rem/1.2 "Plus Jakarta Sans",Inter,sans-serif}
.demo-chip{margin:0;font:600 .75rem/1 Inter,sans-serif;color:var(--muted);background:#eef0f8;padding:6px 10px;border-radius:999px}
.demo-tabs{display:flex;gap:8px;padding:12px 16px;overflow:auto}
.demo-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:600 .85rem Inter,sans-serif;cursor:pointer}
.demo-tabs button.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.demo-pane{padding:8px 16px 28px}.demo-pane[hidden]{display:none}
h1{font:800 1.35rem/1.2 "Plus Jakarta Sans",Inter,sans-serif;margin:8px 0 16px}
.kanban{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.col,.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.col h2{margin:0 0 10px;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.col article,.card{margin-top:8px;box-shadow:0 8px 20px rgba(18,19,26,.04)}
.stats{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.stats div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.stats b{display:block;font-size:1.25rem}
.demo-form{display:grid;gap:12px;max-width:420px}
.demo-form label{display:grid;gap:6px;font:600 .85rem Inter,sans-serif}
.demo-form input,.demo-form select{padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit}
.demo-form button,.demo-cta{appearance:none;border:0;background:var(--brand);color:#fff;border-radius:999px;padding:12px 18px;font:700 .9rem Inter,sans-serif;cursor:pointer}
[data-brand=northline]{--brand:#1D4E89}
[data-brand=verdanta]{--brand:#14735A}
[data-brand=clearpath]{--brand:#D6452A}
[data-brand=litoral]{--brand:#00A36A}
[data-brand=circula]{--brand:#5B4FE8}
[data-brand=helix]{--brand:#0F766E}
[data-brand=meridian]{--brand:#B45309}
[data-brand=portico]{--brand:#0891B2}
[data-brand=raiz]{--brand:#3F6212}
[data-brand=atlas]{--brand:#1D4ED8}
.demo--mobile{max-width:420px;margin:0 auto;min-height:100vh;border-inline:1px solid var(--line);background:#fafafa}
@media (max-width:800px){.kanban,.stats{grid-template-columns:1fr}}