/* ── HERO ── */
.hero{min-height:100vh;padding-top:64px;background:#fff;position:relative;overflow:hidden;display:flex;align-items:center}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 80% 30%,rgba(109,40,217,.07) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 10% 80%,rgba(139,92,246,.05) 0%,transparent 50%);pointer-events:none}
.hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(109,40,217,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(109,40,217,.03) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.hero-content{position:relative;z-index:1;padding:80px 0}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--brand-bg);border:1px solid var(--brand-bdr);border-radius:20px;padding:5px 14px;font-size:13px;font-weight:700;color:var(--brand);margin-bottom:22px}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
.hero-h{font-size:clamp(36px,5vw,58px);font-weight:900;color:var(--text);line-height:1.06;letter-spacing:-2px;margin-bottom:20px}
.hero-h em{font-style:normal;color:var(--brand)}
.hero-sub{font-size:18px;color:var(--text-mid);line-height:1.65;max-width:480px;margin-bottom:36px}
.hero-stats{display:flex;gap:32px;padding-top:32px;border-top:1px solid var(--border);flex-wrap:wrap}
.hero-stat-n{font-size:26px;font-weight:900;color:var(--text);letter-spacing:-.5px}
.hero-stat-n em{font-style:normal;color:var(--brand)}
.hero-stat-l{font-size:12px;color:var(--text-muted);margin-top:2px}
.hero-fade{height:80px;background:linear-gradient(transparent,#fff);position:absolute;bottom:0;left:0;right:0;pointer-events:none;z-index:2}
.hero-sub p{margin:0}

/* ── MOCK UI (hero dashboard) ── */
.mock-wrap{background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(109,40,217,.1)}
.mock-bar{height:40px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:6px}
.mock-dot{width:10px;height:10px;border-radius:50%}
.mock-title-bar{margin-left:12px;font-size:12px;font-weight:600;color:var(--text-muted)}
.mock-body{padding:16px}
.mock-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;margin-bottom:6px;border:1px solid var(--border)}
.mock-row:hover{background:var(--brand-bg);cursor:pointer}
.mock-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700}
.mock-badge-green{background:#ECFDF5;color:#10B981}
.mock-badge-amber{background:#FFFBEB;color:#D97706}
.mock-badge-blue{background:#EFF6FF;color:#3B82F6}
.mock-badge-gray{background:#F1F5F9;color:#64748B}
.mock-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.mock-kpi{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px;border-top:3px solid var(--brand)}
.mock-kpi-v{font-size:20px;font-weight:900;color:var(--text)}
.mock-kpi-l{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}

.hero-screenshot{width:100%;max-width:640px;border-radius:16px;box-shadow:0 20px 60px rgba(109,40,217,.15);border:1px solid var(--border);display:block}
@media(max-width:991px){.hero-img-col{display:none}}
@media(max-width:576px){.hero-h{font-size:32px;letter-spacing:-1px}.hero-stats{gap:20px}}