:root {
  --bg: #0b1020;
  --card: rgba(255,255,255,0.08);
  --card-border: rgba(255,255,255,0.18);
  --text: #e6eaf5;
  --muted: #a2acc7;
  --primary: #6d7cff;
  --primary-2: #4f46e5;
  --success: #10b981;
  --danger: #ef4444;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text); background: radial-gradient(1200px 600px at 15% -10%, #243b8f 0%, transparent 55%), radial-gradient(1000px 500px at 90% 10%, #552b7a 0%, transparent 55%), var(--bg); }
a { color: inherit; text-decoration: none; }
.container { width:min(1120px, 92vw); margin:0 auto; }
.nav { display:flex; justify-content:space-between; align-items:center; padding:20px 0; }
.brand { font-weight:800; letter-spacing:.2px; }
.nav-links { display:flex; gap:10px; align-items:center; }
.btn { border:1px solid transparent; background: var(--primary); color:#fff; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer; }
.btn:hover { filter: brightness(1.06); }
.btn.secondary { background: transparent; border-color: #66708f; color: #d2d8ea; }
.btn.block { width:100%; }
.hero { padding:50px 0 36px; display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:center; }
.badge { display:inline-block; background: rgba(109,124,255,.18); border:1px solid rgba(109,124,255,.45); color:#d8ddff; border-radius:999px; font-size:12px; padding:6px 10px; margin-bottom:14px; }
.hero h1 { margin:0 0 10px; font-size: clamp(32px, 5vw, 52px); line-height:1.06; }
.hero p { margin:0 0 18px; color: var(--muted); font-size: 17px; line-height:1.6; }
.hero-ctas { display:flex; gap:10px; flex-wrap:wrap; }
.hero-card { border:1px solid var(--card-border); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border-radius:18px; padding:18px; backdrop-filter: blur(12px); }
.kpis { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:12px; }
.kpi { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:12px; }
.kpi b { display:block; font-size:20px; }
.section { padding:30px 0 56px; }
.section h2 { margin:0 0 16px; font-size:28px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature { border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); border-radius:14px; padding:16px; }
.feature h3 { margin:0 0 8px; }
.feature p { margin:0; color:var(--muted); line-height:1.5; }
.pricing { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.price-card { border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); border-radius:14px; padding:18px; }
.price-card h3 { margin:0 0 6px; }
.price { font-size:28px; font-weight:800; margin: 8px 0 10px; }
.price small { font-size:14px; color: var(--muted); }
.price-card ul { margin:0; padding-left:18px; color:var(--muted); line-height:1.5; }
.price-card.reco { border-color: rgba(109,124,255,.7); box-shadow: 0 0 0 2px rgba(109,124,255,.2) inset; }
.logos { display:grid; grid-template-columns: repeat(5, 1fr); gap:10px; }
.logo-item { border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius:10px; padding:12px; text-align:center; color:#d0d6ea; font-size:13px; }
.faq { display:grid; gap:10px; }
.faq details { border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius:10px; padding:12px; }
.faq summary { cursor:pointer; font-weight:600; }
.footer { border-top: 1px solid rgba(255,255,255,.12); color: var(--muted); padding:18px 0 30px; font-size:13px; }
.auth-wrap { min-height: 100vh; display:grid; place-items:center; padding:24px; }
.auth-card { width:min(460px, 96vw); border:1px solid var(--card-border); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); border-radius:18px; padding:24px; backdrop-filter: blur(12px); }
.auth-card h1 { margin:0 0 6px; font-size:28px; }
.auth-card p.sub { margin:0 0 16px; color:var(--muted); }
.field { margin-bottom:12px; }
.label { display:block; font-size:13px; color:#cfd7ee; margin:0 0 6px; }
.input { width:100%; background: rgba(9,13,27,.8); border:1px solid #3a4568; color:#f4f6ff; padding:11px 12px; border-radius:10px; outline:none; }
.input:focus { border-color:#7384ff; box-shadow:0 0 0 3px rgba(109,124,255,.2); }
.row { display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.notice { margin-top:14px; font-size:13px; white-space:pre-wrap; background: rgba(6, 10, 22, .7); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px; }
.notice.ok { border-color: rgba(16,185,129,.5); }
.notice.err { border-color: rgba(239,68,68,.5); }
.app-shell { min-height: 100vh; }
.app-main { padding: 20px 0 40px; }
.app-grid { display:grid; grid-template-columns: 320px 1fr; gap:14px; }
.panel { border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); border-radius:14px; padding:16px; }
.panel h3 { margin:0 0 10px; }
.panel p { color: var(--muted); }
@media (max-width: 860px){
  .hero{grid-template-columns:1fr;}
  .grid3, .pricing, .logos {grid-template-columns:1fr;}
  .app-grid { grid-template-columns: 1fr; }
}