:root{--bg:#0b1220;--panel:#121a2b;--text:#e6eefc;--muted:#9db0d3;--primary:#2f80ed;--primary-900:#1f4fb0;--card:#0e1626;--border:#1e2942;--success:#22c55e;--gold:#ffd34d}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.85);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:800}
.menu{display:flex;gap:14px;align-items:center}
.menu a{color:var(--muted);text-decoration:none}
.menu a:hover{color:var(--text)}
.btn{display:inline-block;border-radius:10px;padding:10px 14px;text-decoration:none;font-weight:600;border:1px solid transparent}
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-900));color:#fff}
.btn-outline{border-color:var(--border);color:var(--text)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.hero{padding:64px 0 48px;border-bottom:1px solid var(--border);background:radial-gradient(1000px 500px at 20% -10%,rgba(47,128,237,.25),transparent)}
.eyebrow{color:#7aa1f6;letter-spacing:.12em;font-size:12px;text-transform:uppercase;margin:0 0 8px}
.headline{display:inline-block}
.hero h1{font-size:56px;line-height:1.08;margin:6px 0 10px;font-weight:800;letter-spacing:.01em}
.headline .br{display:inline-block;width:14px}
.glow-panel{position:relative;border-radius:14px;padding:10px 14px;background:#0b1326;border:1px solid #1a2b4d;box-shadow:0 0 0 1px rgba(52,116,255,.25) inset}
.glow-panel::before{content:"";position:absolute;inset:-10px;border-radius:18px;background:radial-gradient(600px 160px at 20% 0%,rgba(47,128,237,.35),transparent);filter:blur(14px);z-index:-1}
.lead{color:var(--muted);font-size:18px;max-width:820px}
.cta{margin-top:16px;display:flex;gap:10px}
.section{padding:48px 0;border-bottom:1px solid var(--border)}
.grid2{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.card h3{margin:0 0 10px}
.muted{color:var(--muted)}
.pill{background:#0c192b;border:1px dashed var(--border);border-radius:12px;padding:14px;margin-top:12px}
.price{font-size:28px;font-weight:800;color:#8fda99}
.tiers{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:8px}
.tiers li{display:flex;justify-content:space-between;align-items:center;background:#0c1628;border:1px solid var(--border);border-radius:10px;padding:10px}
.tiers li.active{background:#10203a;border-color:#2c4c8f}
label{display:block;margin:10px 0 6px}
input,select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--panel);color:var(--text)}
.center{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.big{font-size:40px;font-weight:800;margin-top:6px}
.gold{color:var(--gold)}
.full{width:100%;margin-top:12px}

/* Calculator */
.calc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
@media (max-width:900px){.calc-grid{grid-template-columns:1fr}}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.row-3{grid-template-columns:1fr}}
.result-panel{background:#142447;border:1px solid #233661;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px;justify-content:center}
.result-panel.glow-panel::before{inset:-14px;filter:blur(16px)}

/* Diagram (simple spokes) */
/* SVG sales force diagram */
.force-diagram{width:300px;max-width:100%;height:auto;display:block}
.force-diagram .force-label{fill:var(--muted);font-size:12px;letter-spacing:.18em}
.force-diagram line{stroke:#6da8ff;stroke-width:1.2;opacity:.9}
.force-diagram .node{fill:#a6c7ff;stroke:#6da8ff;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:nodePulse 2.8s ease-in-out infinite}
.force-diagram .node.small{fill:#8fb6ff;opacity:.9}
.force-diagram .node:hover{fill:#ffffff;stroke:#bfe0ff;filter:drop-shadow(0 0 8px #9cc7ff)}
.force-diagram .ring{filter:drop-shadow(0 0 6px rgba(109,168,255,.6))}

@keyframes nodePulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.7}
}
.force-diagram .core-text{fill:#fff;font-weight:800;letter-spacing:.08em}
.force-diagram .orbit-dot{fill:#7fb0ff;filter:drop-shadow(0 0 6px rgba(127,176,255,.6));animation:nodePulse 2.8s ease-in-out infinite}
.footer{padding:28px 0}
.footer .container{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:16px}
.footer a{color:var(--muted);text-decoration:none}

/* Page toolbars and cards */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.catalog-card .thumb{width:100%;height:180px;object-fit:cover;background:#0b1320;border-bottom:1px solid var(--border)}
.catalog-card .pad{padding:12px}
.meta{color:var(--muted);font-size:12px;margin-top:2px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{background:#0e1b2f;border:1px solid var(--border);border-radius:999px;padding:2px 8px;font-size:12px;color:var(--muted)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center}
.modal .box{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:16px;width:min(420px,92vw)}
.hidden{display:none}

/* Badges & sparkline for SM dashboard */
.badge{display:inline-block;background:#0f203c;border:1px solid var(--border);color:#a5c7ff;border-radius:999px;padding:2px 8px;font-size:12px}
.badge.positive{color:#9ff3b2;border-color:#224d36;background:#0d221a}
.badge.warning{color:#ffd34d;border-color:#4a3b15;background:#1c1608}
.kpi-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.sparkline{width:140px;height:36px}
.sparkline path{fill:none;stroke:#7fb0ff;stroke-width:2}
.sparkline .axis{stroke:#244;stroke-width:1;opacity:.5}