/* FunnelCrew — Design System */
:root {
  --bg: #0a0a0a;
  --bg-elevated: #141414;
  --bg-card: #1a1a1a;
  --fg: #e8e4df;
  --fg-muted: #8a8580;
  --fg-dim: #5a5550;
  --accent: #e8740c;
  --accent-glow: rgba(232,116,12,.15);
  --accent-subtle: rgba(232,116,12,.08);
  --border: #2a2520;
  --radius: 8px;
  --radius-lg: 16px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --success: #22c55e;
  --error: #ef4444;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--fg); font-family:var(--font-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }

/* ---- NAV ---- */
.site-nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(10,10,10,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-inner { max-width:1100px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-link { color:var(--fg-muted); font-size:14px; transition:color .15s; }
.nav-link:hover { color:var(--fg); }
.nav-cta { background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:600; font-size:14px; padding:8px 18px; border-radius:100px; transition:opacity .15s; }
.nav-cta:hover { opacity:.9; }

/* ---- HERO ---- */
.hero { min-height:90vh; display:flex; align-items:center; padding:140px 24px 80px; position:relative; overflow:hidden;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, var(--accent-glow) 0%, transparent 60%), var(--bg); }
.hero-inner { max-width:900px; margin:0 auto; }
.hero-badge { display:inline-block; font-family:var(--font-display); font-size:12px; font-weight:600; letter-spacing:3px; color:var(--accent); border:1px solid var(--accent); padding:8px 20px; border-radius:100px; margin-bottom:40px; }
.hero h1 { font-family:var(--font-display); font-size:clamp(2.8rem,6vw,4.8rem); font-weight:700; line-height:1.08; letter-spacing:-.03em; margin-bottom:28px; color:#fff; }
.hero h1 .strike { text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:3px; color:var(--fg-muted); }
.lede { font-size:1.2rem; color:var(--fg-muted); max-width:640px; line-height:1.7; margin-bottom:40px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.btn-primary { display:inline-block; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:600; font-size:16px; padding:16px 32px; border-radius:var(--radius); transition:opacity .15s,transform .1s; }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); }
.btn-secondary { display:inline-block; background:transparent; color:var(--fg); font-family:var(--font-display); font-weight:600; font-size:16px; padding:16px 32px; border-radius:var(--radius); border:1px solid var(--border); transition:border-color .15s; }
.btn-secondary:hover { border-color:var(--fg-muted); }
.hero-stats { display:flex; align-items:center; gap:32px; flex-wrap:wrap; padding:32px 0; border-top:1px solid var(--border); }
.stat { display:flex; flex-direction:column; }
.stat-number { font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--accent); }
.stat-label { font-size:.85rem; color:var(--fg-muted); max-width:160px; line-height:1.4; }
.stat-divider { width:1px; height:48px; background:var(--border); }

/* ---- PROBLEM ---- */
.problem { padding:80px 24px; }
.problem-inner { max-width:1100px; margin:0 auto; }
.problem-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:3px; color:var(--accent); margin-bottom:20px; }
.problem h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:700; line-height:1.15; margin-bottom:48px; max-width:600px; }
.problem-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.problem-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px; }
.problem-icon { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--accent); margin-bottom:16px; }
.problem-card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:12px; }
.problem-card p { color:var(--fg-muted); font-size:.95rem; line-height:1.7; }

/* ---- VERTICALS ---- */
.verticals { padding:80px 24px; background:var(--bg-elevated); }
.verticals-inner { max-width:1100px; margin:0 auto; }
.verticals-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:3px; color:var(--accent); margin-bottom:20px; }
.verticals h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; margin-bottom:12px; }
.verticals-sub { color:var(--fg-muted); margin-bottom:40px; max-width:540px; }
.verticals-grid { display:flex; flex-wrap:wrap; gap:12px; }
.vertical-chip { display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border); border-radius:100px; padding:10px 20px; font-size:.9rem; transition:border-color .15s; }
.vertical-chip:hover { border-color:var(--accent); }
.chip-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ---- HOW ---- */
.how { padding:80px 24px; }
.how-inner { max-width:700px; margin:0 auto; }
.how-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:3px; color:var(--accent); margin-bottom:20px; }
.how h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3vw,2.4rem); font-weight:700; margin-bottom:48px; }
.how-steps { display:flex; flex-direction:column; }
.step { display:flex; gap:24px; align-items:flex-start; }
.step-num { width:48px; height:48px; border-radius:50%; border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--accent); flex-shrink:0; }
.step-content h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:8px; }
.step-content p { color:var(--fg-muted); line-height:1.7; }
.step-line { width:2px; height:40px; background:var(--border); margin-left:23px; }

/* ---- CLOSING ---- */
.closing { padding:100px 24px; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--accent-glow) 0%, transparent 60%), var(--bg-elevated); }
.closing-inner { max-width:760px; margin:0 auto; text-align:center; position:relative; }
.closing-accent { width:80px; height:4px; background:var(--accent); border-radius:2px; margin:0 auto 40px; }
.closing h2 { font-family:var(--font-display); font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700; line-height:1.2; margin-bottom:24px; }
.closing-text { color:var(--fg-muted); max-width:580px; margin:0 auto 40px; line-height:1.7; }
.closing-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---- FOOTER ---- */
.site-footer { padding:40px 24px; border-top:1px solid var(--border); }
.footer-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.footer-brand { font-family:var(--font-display); font-weight:700; color:#fff; }
.footer-text { color:var(--fg-muted); font-size:.85rem; }
.footer-location { color:var(--fg-dim); font-size:.85rem; }

/* ---- FORM PAGES ---- */
.page-wrap { min-height:100vh; padding:100px 24px 60px; }
.page-inner { max-width:640px; margin:0 auto; }
.page-inner.wide { max-width:1100px; }
.page-header { margin-bottom:48px; }
.page-label { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:3px; color:var(--accent); margin-bottom:16px; }
.page-header h1 { font-family:var(--font-display); font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.1; margin-bottom:16px; }
.page-header p { color:var(--fg-muted); max-width:480px; line-height:1.7; }

/* ---- VERTICAL SELECTOR ---- */
.vertical-selector { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; margin-bottom:40px; }
.vertical-option { display:none; }
.vertical-option + label { display:flex; flex-direction:column; align-items:center; gap:8px; background:var(--bg-card); border:2px solid var(--border); border-radius:var(--radius-lg); padding:20px 16px; cursor:pointer; transition:border-color .15s,background .15s; text-align:center; font-size:.9rem; }
.vertical-option + label .v-icon { font-size:1.8rem; }
.vertical-option:checked + label { border-color:var(--accent); background:var(--accent-subtle); }
.vertical-option + label:hover { border-color:var(--fg-dim); }

/* ---- FORM CARD ---- */
.form-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-grid.full { grid-template-columns:1fr; }
@media(max-width:540px){ .form-grid { grid-template-columns:1fr; } }
.form-group { display:flex; flex-direction:column; gap:8px; }
.form-group.span2 { grid-column:1/-1; }
.form-group label { font-size:.85rem; font-weight:600; font-family:var(--font-display); color:var(--fg-muted); letter-spacing:.5px; text-transform:uppercase; font-size:11px; }
.form-group input, .form-group select, .form-group textarea {
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--fg); font-family:var(--font-body); font-size:15px; padding:12px 16px;
  outline:none; transition:border-color .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--accent); }
.form-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a8580' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.form-group textarea { resize:vertical; min-height:100px; }
.btn-submit { width:100%; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px; padding:16px; border:none; border-radius:var(--radius); cursor:pointer; transition:opacity .15s,transform .1s; margin-top:8px; }
.btn-submit:hover { opacity:.9; transform:translateY(-1px); }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.form-note { font-size:.8rem; color:var(--fg-dim); text-align:center; margin-top:12px; }
.alert { border-radius:var(--radius); padding:14px 18px; margin-bottom:24px; font-size:.9rem; }
.alert-error { background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; }
.alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#86efac; }

/* ---- STEPS INDICATOR ---- */
.steps-indicator { display:flex; align-items:center; gap:0; margin-bottom:40px; }
.step-dot { width:32px; height:32px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:12px; font-weight:700; color:var(--fg-dim); flex-shrink:0; transition:all .2s; }
.step-dot.active { border-color:var(--accent); color:var(--accent); }
.step-dot.done { border-color:var(--accent); background:var(--accent); color:#fff; }
.step-connector { flex:1; height:2px; background:var(--border); margin:0 8px; }
.step-connector.done { background:var(--accent); }

/* ---- DASHBOARD ---- */
.dash-header { background:var(--bg-elevated); border-bottom:1px solid var(--border); padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between; position:fixed; top:0; left:0; right:0; z-index:100; }
.dash-brand { font-family:var(--font-display); font-weight:700; font-size:18px; color:#fff; display:flex; align-items:center; gap:12px; }
.dash-badge { background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:3px 10px; border-radius:100px; }
.dash-user { display:flex; align-items:center; gap:16px; }
.dash-user-name { font-size:.9rem; color:var(--fg-muted); }
.btn-logout { background:transparent; color:var(--fg-muted); border:1px solid var(--border); border-radius:var(--radius); padding:8px 16px; font-size:13px; cursor:pointer; transition:border-color .15s; }
.btn-logout:hover { border-color:var(--fg-muted); color:var(--fg); }
.dash-body { padding:88px 24px 48px; max-width:1200px; margin:0 auto; }
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:40px; }
.dash-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; }
.dash-stat-card .ds-num { font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--accent); }
.dash-stat-card .ds-label { font-size:.85rem; color:var(--fg-muted); margin-top:4px; }
.dash-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:32px; }
.dash-tab { font-family:var(--font-display); font-size:.9rem; font-weight:600; padding:12px 24px; cursor:pointer; border-bottom:2px solid transparent; color:var(--fg-muted); transition:all .15s; background:none; border-top:none; border-left:none; border-right:none; }
.dash-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.leads-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.lead-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; transition:border-color .15s; }
.lead-card:hover { border-color:var(--fg-dim); }
.lead-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.lead-vertical { font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:2px; color:var(--accent); text-transform:uppercase; }
.lead-urgency { font-size:11px; font-weight:600; padding:4px 10px; border-radius:100px; }
.urgency-emergency { background:rgba(232,116,12,.15); color:var(--accent); border:1px solid rgba(232,116,12,.3); }
.urgency-soon { background:rgba(234,179,8,.1); color:#fbbf24; border:1px solid rgba(234,179,8,.2); }
.urgency-normal { background:var(--bg-elevated); color:var(--fg-muted); border:1px solid var(--border); }
.lead-service { font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin-bottom:8px; }
.lead-location { color:var(--fg-muted); font-size:.9rem; margin-bottom:4px; }
.lead-time { color:var(--fg-dim); font-size:.8rem; margin-bottom:16px; }
.lead-desc { color:var(--fg-muted); font-size:.88rem; line-height:1.6; margin-bottom:16px; background:var(--bg-elevated); border-radius:var(--radius); padding:12px; }
.btn-claim { width:100%; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; padding:12px; border:none; border-radius:var(--radius); cursor:pointer; transition:opacity .15s; }
.btn-claim:hover { opacity:.9; }
.btn-claim:disabled { opacity:.4; cursor:not-allowed; }
.lead-contact { background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); border-radius:var(--radius); padding:14px; margin-bottom:16px; }
.contact-row { display:flex; align-items:center; gap:8px; font-size:.9rem; margin-bottom:6px; }
.contact-row:last-child { margin-bottom:0; }
.contact-label { color:var(--fg-muted); font-size:.8rem; min-width:48px; }
.contact-value { color:var(--fg); font-weight:600; }
.claimed-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--success); background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); padding:6px 14px; border-radius:100px; }
.no-leads { text-align:center; padding:60px 24px; color:var(--fg-muted); }
.no-leads .nl-icon { font-size:3rem; margin-bottom:16px; }
.no-leads h3 { font-family:var(--font-display); font-size:1.2rem; margin-bottom:8px; color:var(--fg); }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--success); display:inline-block; margin-right:6px; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---- AUTH PAGES ---- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 24px; background:radial-gradient(ellipse 60% 40% at 50% 0%, var(--accent-glow), transparent 60%), var(--bg); }
.auth-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:48px 40px; width:100%; max-width:440px; }
.auth-logo { font-family:var(--font-display); font-weight:700; font-size:22px; color:#fff; margin-bottom:32px; }
.auth-card h1 { font-family:var(--font-display); font-size:1.6rem; font-weight:700; margin-bottom:8px; }
.auth-card .auth-sub { color:var(--fg-muted); font-size:.9rem; margin-bottom:32px; }
.auth-footer { margin-top:24px; text-align:center; font-size:.85rem; color:var(--fg-muted); }
.auth-footer a { color:var(--accent); }
.checkbox-group { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checkbox-item { display:flex; align-items:center; gap:8px; font-size:.85rem; cursor:pointer; }
.checkbox-item input[type=checkbox] { accent-color:var(--accent); width:16px; height:16px; }

/* ---- SUCCESS PAGE ---- */
.success-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:80px 24px; }
.success-card { text-align:center; max-width:480px; }
.success-icon { font-size:4rem; margin-bottom:24px; }
.success-card h1 { font-family:var(--font-display); font-size:2rem; font-weight:700; margin-bottom:16px; }
.success-card p { color:var(--fg-muted); margin-bottom:32px; line-height:1.7; }
.success-detail { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-bottom:32px; text-align:left; }
.success-detail .sd-row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.success-detail .sd-row:last-child { border-bottom:none; }
.sd-key { color:var(--fg-muted); }
.sd-val { font-weight:600; }

/* ---- RESPONSIVE ---- */
@media(max-width:768px) {
  .nav-links { display:none; }
  .dash-header { padding:0 16px; }
  .dash-body { padding:80px 16px 40px; }
  .auth-card { padding:32px 24px; }
  .form-card { padding:24px; }
}