:root{--bg:#f8fafc;--fg:#0f172a;--muted:#475569;--accent:#2563eb;--card:#ffffff;--border:#e2e8f0}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Segoe UI,Arial}
.container{max-width:1100px;margin:0 auto;padding:24px;min-height:100vh;display:flex;flex-direction:column}
.header{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
.brand{font-size:20px;font-weight:700;letter-spacing:.2px}
.nav a{margin-left:12px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);text-decoration:none;color:var(--fg)}
.nav a.primary{border-color:transparent;background:var(--accent);color:#fff}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:24px 0}
.hero .title{font-size:36px;font-weight:800;line-height:1.2}
.hero .subtitle{color:var(--muted);margin-top:12px}
.cta{margin-top:16px;display:flex;gap:12px}
.cta a{padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card);text-decoration:none;color:var(--fg)}
.cta a.primary{border-color:transparent;background:var(--accent);color:#fff}
.card{border:1px solid var(--border);border-radius:16px;background:var(--card)}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.feature{padding:16px}
.feature h3{margin:0 0 8px 0;font-size:18px}
.feature p{margin:0;color:var(--muted)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.compare .col{padding:16px}
.demo{margin-top:32px;padding:16px}
.footer{margin-top:auto;padding:16px 0;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;align-items:center}
.footer .menu a{margin-left:12px;color:var(--fg);text-decoration:none;padding:6px 8px;border-radius:6px}
.footer .menu a:hover{background:#f1f5f9}
@media(max-width:900px){.hero{grid-template-columns:1fr}.features{grid-template-columns:1fr 1fr}.compare{grid-template-columns:1fr}}
@media(max-width:768px){
  .container{padding:12px}
  .hero{grid-template-columns:1fr}
  .demo{justify-self:start;margin-left:0;padding:12px}
  .features{grid-template-columns:1fr}
  .feature{padding:12px}
  .cta{display:none}
}