:root {
  --primary: #4F46E5;
  --secondary: #06B6D4;
  --accent: #22C55E;
  --text: #0F172A;
  --bg: #ffffff;
  --muted:#64748B;
  --border:#E5E7EB;
  --shadow: 0 10px 30px rgba(2,6,23,0.06);
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Inter, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
.container{ width:min(1100px, 92%); margin-inline:auto; }
.btn{ display:inline-block; padding:12px 18px; border-radius:10px; font-weight:600; border:1px solid var(--border); box-shadow: var(--shadow); }
.btn-primary{ background:var(--primary); color:white; border-color:transparent; }
.btn-secondary{ background:transparent; color:var(--text); }
.btn-outline{ background:white; border-color:var(--primary); color:var(--primary);}
.btn:hover{ transform: translateY(-1px); transition: .15s ease; }
nav { position:sticky; top:0; background:white; backdrop-filter:saturate(180%) blur(6px); border-bottom:1px solid var(--border); z-index:10; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; }
.brand .logo{ width:34px; height:34px; border-radius:9px; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: var(--shadow); }
nav ul{ display:flex; gap:20px; list-style:none; padding:0; margin:0; }
nav li a{ padding:8px 10px; border-radius:8px; color:#0f172a }
nav li a.active, nav li a:hover{ background:#EEF2FF; color:var(--primary);}

.hero{ display:grid; grid-template-columns: 1.3fr 1fr; gap:40px; padding:60px 0; align-items:center; }
.hero h1{ font-size: clamp(32px, 6vw, 48px); line-height:1.1; margin:0 0 14px; }
.hero p{ color:var(--muted); margin: 0 0 22px;}
.hero .card{ background: white; border:1px solid var(--border); border-radius:14px; padding:22px; box-shadow: var(--shadow);}

.section{ padding:60px 0; }
.section h2{ font-size: clamp(24px, 4vw, 34px); margin:0 0 18px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }

.card{ background:white; border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow: var(--shadow);}
.card h3{ margin-top:0;}
.kpi{ font-weight:800; color:var(--primary); }

.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.price .amount{ font-size:32px; font-weight:900; }
.price ul{ padding-left:18px; color:var(--muted); line-height:1.8; }

footer{ border-top:1px solid var(--border); background:#f8fafc; }
.footer-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; padding:26px 0;}
.small{ color:var(--muted); font-size:14px; }

.cta-strip{ background:linear-gradient(135deg, var(--primary), var(--secondary)); color:white; padding:28px 0; }
.cta-strip .row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cta-strip .row p{ margin:0; font-weight:600; }

.notice{ background:#fff7ed; border:1px dashed #fdba74; padding:14px 16px; border-radius:12px; color:#9a3412; }

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .grid-3, .grid-4{ grid-template-columns: 1fr; }
  .pricing{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr; }
  nav ul{ display:none; }
  .menu-btn{ display:inline-flex; }
}
.menu-btn{ display:none; align-items:center; gap:8px; border:1px solid var(--border); border-radius:10px; padding:8px 12px; background:white; }
.mobile-menu{ display:none; position:fixed; inset:64px 0 0 0; background:white; border-top:1px solid var(--border); padding:18px; }
.mobile-menu a{ display:block; padding:12px 6px; border-bottom:1px solid var(--border);}
.hidden{ display:none !important; }