:root {
  --bg:        #080a0f;
  --bg2:       #0c0f16;
  --bg3:       #111520;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --indigo:    #6366f1;
  --indigo-lt: #818cf8;
  --indigo-bg: rgba(99,102,241,0.08);
  --indigo-bd: rgba(99,102,241,0.2);
  --teal:      #2dd4bf;
  --teal-lt:   #5eead4;
  --teal-bg:   rgba(45,212,191,0.07);
  --teal-bd:   rgba(45,212,191,0.18);
  --slate:     #94a3b8;
  --slate2:    #64748b;
  --slate3:    #334155;
  --text:      #f1f5f9;
  --text2:     #cbd5e1;
  --radius:    10px;
  --ff-display:'Bricolage Grotesque',system-ui,sans-serif;
  --ff-body:   'Inter',system-ui,sans-serif;
  --ff-mono:   'DM Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--ff-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(8,10,15,0.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:32px}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);font-weight:700;font-size:15px;color:var(--text);letter-spacing:-.02em;flex-shrink:0}
.nav-logo img{width:28px;height:28px;border-radius:7px;border:1px solid var(--indigo-bd)}
.nav-links{display:flex;align-items:center;gap:24px;list-style:none;flex:1}
.nav-links a{font-size:14px;font-weight:500;color:var(--slate);transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.btn-ghost{font-size:13px;font-weight:600;color:var(--slate);padding:7px 14px;border-radius:7px;border:1px solid var(--border2);transition:all .15s}
.btn-ghost:hover{color:var(--text);border-color:rgba(255,255,255,0.22)}
.btn-primary{font-size:13px;font-weight:600;color:#fff;background:var(--indigo);padding:7px 16px;border-radius:7px;border:none;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:#5254cc}

/* ── SECTIONS ── */
section{max-width:1100px;margin:0 auto;padding:100px 24px}
.section-full{max-width:none;padding-left:0;padding-right:0}

/* ── HERO ── */
.hero{padding-top:140px;padding-bottom:80px;text-align:center;position:relative}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--indigo-bg);border:1px solid var(--indigo-bd);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;color:var(--indigo-lt);letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--indigo);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.hero h1{font-family:var(--ff-display);font-size:clamp(38px,6vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.04em;color:var(--text);margin-bottom:24px;max-width:820px;margin-left:auto;margin-right:auto}
.hero h1 em{font-style:normal;color:var(--indigo-lt)}
.hero-sub{font-size:18px;color:var(--slate);max-width:520px;margin:0 auto 36px;line-height:1.65}
.hero-ctas{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:56px}
.cta-big{font-size:15px;font-weight:700;color:#fff;background:var(--indigo);padding:14px 28px;border-radius:9px;letter-spacing:-.01em;transition:background .15s}
.cta-big:hover{background:#5254cc}
.cta-outline{font-size:15px;font-weight:600;color:var(--slate);border:1px solid var(--border2);padding:13px 24px;border-radius:9px;transition:all .15s}
.cta-outline:hover{color:var(--text);border-color:rgba(255,255,255,.22)}

/* ── TICKER ── */
.ticker-wrap{overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);padding:12px 0;margin-bottom:56px}
.ticker-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);font-family:var(--ff-mono);margin-right:24px;white-space:nowrap}
.ticker-track{display:flex;align-items:center;animation:ticker 28s linear infinite;white-space:nowrap}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:12px;font-family:var(--ff-mono);color:var(--slate2);border-right:1px solid var(--border)}
.tick-name{color:var(--text2);font-weight:500}
.tick-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.04em}
.tick-risk{background:rgba(239,68,68,.12);color:#f87171}
.tick-ok{background:rgba(45,212,191,.1);color:var(--teal)}
.tick-warn{background:rgba(251,191,36,.1);color:#fbbf24}

/* ── HERO SCREENSHOT ── */
.hero-screen{border-radius:14px;border:1px solid var(--border2);overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.6);max-width:900px;margin:0 auto;background:var(--bg3)}
.screen-bar{background:#0f1520;padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.dot{width:10px;height:10px;border-radius:50%}
.dot-r{background:#ff5f57}.dot-y{background:#ffbd2e}.dot-g{background:#28c840}
.screen-url{font-size:11px;font-family:var(--ff-mono);color:var(--slate2);margin-left:8px}
.screen-body{padding:24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px}
.stat-label{font-size:10px;font-weight:600;color:var(--slate2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.stat-val{font-size:26px;font-weight:700;font-family:var(--ff-display);letter-spacing:-.03em;color:var(--text)}
.stat-delta{font-size:12px;color:var(--teal);margin-top:4px;font-weight:500}
.stat-delta-warn{color:#fbbf24}
.screen-accounts{grid-column:1/-1;background:var(--bg2);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.acc-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:10px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;color:var(--slate2);letter-spacing:.06em;text-transform:uppercase}
.acc-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;padding:11px 16px;border-bottom:1px solid var(--border);font-size:13px;align-items:center;transition:background .1s}
.acc-row:last-child{border-bottom:none}
.acc-row:hover{background:rgba(255,255,255,.03)}
.acc-name{font-weight:600;color:var(--text)}
.acc-stage{font-size:11px;padding:3px 9px;border-radius:5px;font-weight:600;display:inline-block}
.stage-q{background:var(--indigo-bg);color:var(--indigo-lt)}
.stage-p{background:rgba(251,191,36,.1);color:#fbbf24}
.stage-n{background:rgba(45,212,191,.1);color:var(--teal)}
.risk-score{font-family:var(--ff-mono);font-size:12px;font-weight:500}
.risk-hi{color:#f87171}.risk-md{color:#fbbf24}.risk-lo{color:var(--teal)}
.signal-chip{display:inline-flex;align-items:center;gap:5px;background:var(--indigo-bg);border:1px solid var(--indigo-bd);border-radius:5px;padding:3px 8px;font-size:11px;color:var(--indigo-lt);font-weight:500;cursor:pointer;white-space:nowrap}

/* ── SOCIAL PROOF BAR ── */
.proof-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg2);padding:20px 24px;text-align:center}
.proof-bar-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap}
.proof-stat{text-align:center}
.proof-num{font-family:var(--ff-display);font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.03em}
.proof-desc{font-size:12px;color:var(--slate2);margin-top:2px}

/* ── SECTION LABELS ── */
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.eyebrow-indigo{color:var(--indigo-lt)}
.eyebrow-teal{color:var(--teal)}
.eyebrow-line{flex:1;height:1px;background:var(--border2);max-width:40px}
h2.section-title{font-family:var(--ff-display);font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:16px}
.section-sub{font-size:17px;color:var(--slate);max-width:560px;line-height:1.65;margin-bottom:52px}

/* ── SIGNAL SECTION ── */
.signal-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.signal-features{display:flex;flex-direction:column;gap:24px}
.sig-feat{display:flex;gap:14px;align-items:flex-start}
.sig-icon{width:36px;height:36px;border-radius:8px;background:var(--indigo-bg);border:1px solid var(--indigo-bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.sig-feat-text h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.sig-feat-text p{font-size:13px;color:var(--slate);line-height:1.6}
.signal-demo{background:var(--bg2);border:1px solid var(--border2);border-radius:12px;overflow:hidden}
.signal-demo-header{background:var(--bg3);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.signal-logo-sm{width:18px;height:18px;border-radius:4px;background:var(--indigo);display:flex;align-items:center;justify-content:center}
.signal-title{font-size:12px;font-weight:700;color:var(--indigo-lt);letter-spacing:.04em}
.signal-demo-body{padding:16px;display:flex;flex-direction:column;gap:12px}
.msg-user{align-self:flex-end;background:var(--indigo-bg);border:1px solid var(--indigo-bd);border-radius:10px 10px 2px 10px;padding:10px 14px;font-size:13px;color:var(--text2);max-width:80%}
.msg-ai{align-self:flex-start;background:var(--bg3);border:1px solid var(--border);border-radius:10px 10px 10px 2px;padding:10px 14px;font-size:13px;color:var(--text2);max-width:88%;line-height:1.6}
.msg-ai strong{color:var(--text)}
.msg-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{font-size:11px;font-weight:600;padding:5px 11px;border-radius:6px;border:1px solid var(--indigo-bd);color:var(--indigo-lt);background:var(--indigo-bg);cursor:pointer;transition:all .15s}
.chip:hover{background:rgba(99,102,241,.15)}
.chip-teal{border-color:var(--teal-bd);color:var(--teal);background:var(--teal-bg)}
.signal-input{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px}
.signal-input input{flex:1;background:transparent;border:none;outline:none;font-family:var(--ff-body);font-size:13px;color:var(--slate);padding:0}
.signal-input input::placeholder{color:var(--slate3)}
.signal-send{width:28px;height:28px;border-radius:6px;background:var(--indigo);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* ── FEATURES GRID ── */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;transition:border-color .2s}
.feat-card:hover{border-color:var(--border2)}
.feat-icon{font-size:22px;margin-bottom:14px}
.feat-card h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px;letter-spacing:-.01em}
.feat-card p{font-size:13px;color:var(--slate);line-height:1.6}

/* ── CONNECT SECTION ── */
.connect-section{background:linear-gradient(180deg,var(--bg) 0%,rgba(13,20,30,1) 100%);border-top:1px solid var(--teal-bd);border-bottom:1px solid var(--teal-bd)}
.connect-inner{max-width:1100px;margin:0 auto;padding:100px 24px}
.connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.connect-feat-list{display:flex;flex-direction:column;gap:16px;margin-top:32px}
.connect-feat{display:flex;gap:12px;align-items:flex-start}
.connect-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:6px;animation:pulse 2.4s ease-in-out infinite}
.connect-feat-text h4{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px}
.connect-feat-text p{font-size:13px;color:var(--slate);line-height:1.55}
.connect-mockup{background:var(--bg2);border:1px solid var(--teal-bd);border-radius:12px;overflow:hidden}
.connect-mock-header{background:var(--bg3);padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.connect-badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);background:var(--teal-bg);border:1px solid var(--teal-bd);padding:3px 9px;border-radius:5px}
.call-dock{margin:16px;background:rgba(45,212,191,.05);border:1px solid var(--teal-bd);border-radius:10px;padding:16px}
.call-dock-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.call-info h4{font-size:14px;font-weight:700;color:var(--text)}
.call-info p{font-size:12px;color:var(--teal)}
.call-timer{font-family:var(--ff-mono);font-size:18px;font-weight:500;color:var(--text)}
.call-controls{display:flex;gap:8px;justify-content:center}
.call-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border2);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .15s}
.call-btn:hover{background:var(--bg2)}
.call-btn-end{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#f87171}
.call-btn-end:hover{background:rgba(239,68,68,.25)}
.connect-account{margin:0 16px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:14px}
.connect-account-label{font-size:10px;font-weight:600;color:var(--slate2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.connect-account h5{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.connect-account p{font-size:12px;color:var(--slate);line-height:1.5}
.connect-account-stage{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px;background:var(--indigo-bg);color:var(--indigo-lt);margin-top:6px}

/* ── PRICING ── */
.pricing-tabs{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:4px;width:fit-content;margin-bottom:40px}
.ptab{font-size:13px;font-weight:600;padding:8px 20px;border-radius:7px;color:var(--slate);cursor:pointer;transition:all .15s}
.ptab.active{background:var(--bg3);color:var(--text);border:1px solid var(--border2)}
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.price-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:24px;position:relative;display:flex;flex-direction:column}
.price-card.featured{border-color:var(--indigo);background:linear-gradient(160deg,rgba(99,102,241,.07),var(--bg2))}
.price-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--indigo);color:#fff;font-size:10px;font-weight:700;padding:3px 12px;border-radius:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.price-tier{font-size:12px;font-weight:700;color:var(--slate2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.price-amount{font-family:var(--ff-display);font-size:36px;font-weight:800;color:var(--text);letter-spacing:-.03em;line-height:1}
.price-amount sup{font-size:18px;vertical-align:top;margin-top:6px;font-weight:600}
.price-period{font-size:13px;color:var(--slate2);margin-top:4px;margin-bottom:16px}
.price-divider{height:1px;background:var(--border);margin:16px 0}
.price-features{display:flex;flex-direction:column;gap:9px;flex:1;margin-bottom:20px}
.price-feat{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--slate)}
.price-feat-check{color:var(--teal);flex-shrink:0;font-size:14px;margin-top:1px}
.price-feat strong{color:var(--text2)}
.price-cta{display:block;text-align:center;padding:10px;border-radius:8px;font-size:13px;font-weight:700;transition:all .15s;margin-top:auto}
.price-cta-primary{background:var(--indigo);color:#fff}
.price-cta-primary:hover{background:#5254cc}
.price-cta-ghost{border:1px solid var(--border2);color:var(--slate)}
.price-cta-ghost:hover{color:var(--text);border-color:rgba(255,255,255,.22)}
.pricing-note{font-size:13px;color:var(--slate2);text-align:center;margin-top:24px;line-height:1.7}
.pricing-note a{color:var(--indigo-lt)}

/* ── FAQ ── */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.faq-item{background:var(--bg2);padding:24px}
.faq-item h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;line-height:1.4}
.faq-item p{font-size:13px;color:var(--slate);line-height:1.65}
.faq-item p strong{color:var(--text2)}

/* ── CTA BAND ── */
.cta-band{background:linear-gradient(135deg,rgba(99,102,241,.1) 0%,rgba(45,212,191,.06) 100%);border-top:1px solid var(--indigo-bd);border-bottom:1px solid var(--border);text-align:center;padding:80px 24px}
.cta-band h2{font-family:var(--ff-display);font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-.03em;margin-bottom:14px}
.cta-band p{font-size:17px;color:var(--slate);margin-bottom:32px}

/* ── FOOTER ── */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:56px 24px 32px}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.footer-brand p{font-size:13px;color:var(--slate2);margin-top:10px;line-height:1.7;max-width:240px}
.footer-col h5{font-size:11px;font-weight:700;color:var(--slate2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-col ul a{font-size:13px;color:var(--slate2);transition:color .15s}
.footer-col ul a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--border);padding-top:24px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--slate3)}
.footer-bottom a{color:var(--slate3);transition:color .15s}
.footer-bottom a:hover{color:var(--slate)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .signal-grid,.connect-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .pricing-grid,.pricing-grid-connect{grid-template-columns:1fr 1fr}
  .faq-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .proof-bar-inner{gap:24px}
  .screen-body{grid-template-columns:1fr 1fr}
  .screen-accounts{grid-column:1/-1}
}
@media(max-width:600px){
  .nav-links{display:none}
  .nav-menu-btn{display:flex}
  section{padding:72px 16px}
  .features-grid{grid-template-columns:1fr}
  .pricing-grid,.pricing-grid-connect{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-ctas{flex-direction:column;align-items:stretch;text-align:center}
  .screen-body{grid-template-columns:1fr}
}

/* Integrations + extras */
.nav-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 16px;
  border-top: 1px solid var(--border);
  background: rgba(8, 10, 15, 0.98);
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile a {
  padding: 0.55rem 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate);
}

.nav-mobile a:hover {
  color: var(--text);
}

.nav-mobile-trial {
  margin-top: 0.35rem;
  padding: 10px 14px !important;
  text-align: center;
  border-radius: 7px;
  background: var(--indigo);
  color: #fff !important;
  font-weight: 600;
}

.connect-accent {
  color: var(--teal);
}

.connect-pricing-link {
  display: inline-block;
  background: var(--teal);
  color: #0a0f0e;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
}

.connect-pricing-link:hover {
  background: var(--teal-lt);
  color: #0a0f0e;
}

.ptab {
  border: none;
  background: transparent;
  font-family: inherit;
}

.ptab-connect {
  color: var(--teal);
}

.ptab-connect.active {
  color: var(--text);
}

.price-card-connect-featured {
  border-color: var(--teal);
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.06), var(--bg2));
}

.price-badge-connect {
  background: var(--teal);
  color: #0a0f0e;
}

.price-cta-connect {
  background: var(--teal);
  color: #0a0f0e;
}

.price-cta-connect:hover {
  background: var(--teal-lt);
  color: #0a0f0e;
}

.price-card-enterprise {
  background: var(--bg3);
  border-style: dashed;
}

.price-amount-custom {
  font-size: 28px;
  padding-top: 4px;
}

.pricing-grid[hidden] {
  display: none !important;
}

.footer-bottom a,
.footer-brand a {
  color: inherit;
}

.js-app-url-display {
  color: var(--indigo-lt);
}

/* Hero — real dashboard screenshot */
.hero-visual {
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.app-screenshot-frame {
  margin: 0;
  padding: 0;
}

.screenshot-chrome {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: #0f1520;
}

.mock-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #334155;
}

.mock-dot:nth-child(1) {
  background: #ff5f57;
}
.mock-dot:nth-child(2) {
  background: #ffbd2e;
}
.mock-dot:nth-child(3) {
  background: #28c840;
}

.screenshot-chrome-title {
  margin-left: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--slate2);
  letter-spacing: 0.04em;
}

.app-screenshot {
  display: block;
  width: 100%;
  height: auto;
  background: #05080c;
}

.app-screenshot-hero {
  max-height: min(56vh, 480px);
  object-fit: contain;
  object-position: top center;
}

.screenshot-fallback {
  display: none;
  padding: 16px;
}

.screenshot-fallback-note {
  margin: 1rem 0 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--slate2);
  text-align: center;
}

.mock-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}

.mock-card h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
}

.mock-card p {
  margin: 0;
  font-size: 13px;
  color: var(--slate2);
  font-family: var(--ff-mono);
}

.mock-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pill {
  font-size: 11px;
  font-family: var(--ff-mono);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--indigo-bg);
  color: var(--indigo-lt);
  border: 1px solid var(--indigo-bd);
}

.pill-live {
  background: var(--teal-bg);
  color: var(--teal);
  border-color: var(--teal-bd);
}

.mock-card-live {
  border-color: var(--teal-bd);
}

.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse 1.8s ease-in-out infinite;
}

.app-screenshot-frame:not(.screenshot-loaded) .app-screenshot-hero {
  display: none;
}

.app-screenshot-frame:not(.screenshot-loaded) .screenshot-fallback {
  display: block;
}

/* Hero screenshot carousel */
.hero-carousel-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(56vh, 480px);
  margin: 0 auto;
  background: #05080c;
}

.hero-carousel-viewport .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  opacity: 0;
  transition: opacity 0.65s ease;
  pointer-events: none;
}

.hero-carousel-viewport .hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.hero-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: #0f1520;
}

.hero-carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--slate3);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.hero-carousel-dot.is-active {
  background: var(--indigo-lt);
  transform: scale(1.15);
}

.hero-carousel-dot:hover {
  background: var(--slate);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

/* ── PRODUCT SPLIT ── */
.product-split {
  padding-top: 80px;
  padding-bottom: 80px;
}

.product-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.product-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.product-card:hover {
  border-color: var(--border2);
}

.product-card-connect {
  border-color: var(--teal-bd);
  background: linear-gradient(160deg, rgba(45, 212, 191, 0.04), var(--bg2));
}

.product-card-connect:hover {
  border-color: rgba(45, 212, 191, 0.35);
  box-shadow: 0 8px 32px rgba(45, 212, 191, 0.06);
}

.product-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 16px;
  width: fit-content;
}

.product-card-badge-indigo {
  background: var(--indigo-bg);
  color: var(--indigo-lt);
  border: 1px solid var(--indigo-bd);
}

.product-card-badge-teal {
  background: var(--teal-bg);
  color: var(--teal);
  border: 1px solid var(--teal-bd);
}

.product-card h3 {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.2;
}

.product-card > p {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 20px;
  flex: 1;
}

.product-card-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-card-list li {
  font-size: 13px;
  color: var(--text2);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.product-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--indigo-lt);
}

.product-card-connect .product-card-list li::before {
  background: var(--teal);
}

.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.product-card-price {
  font-size: 13px;
  color: var(--slate2);
}

.product-card-price strong {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
}

.product-card-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--indigo-lt);
  white-space: nowrap;
}

.product-card-cta:hover {
  color: var(--text);
}

.product-card-cta-teal {
  color: var(--teal);
}

.product-card-cta-teal:hover {
  color: var(--teal-lt);
}

/* ── HERO EXTRAS ── */
.hero-inline-link {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(45, 212, 191, 0.35);
  text-underline-offset: 3px;
}

.hero-inline-link:hover {
  color: var(--teal-lt);
}

.cta-outline-teal {
  border-color: var(--teal-bd);
  color: var(--teal);
}

.cta-outline-teal:hover {
  border-color: rgba(45, 212, 191, 0.4);
  color: var(--teal-lt);
}

.cta-outline-subtle {
  font-size: 14px;
  padding: 13px 18px;
  border-color: transparent;
  color: var(--slate2);
}

.cta-outline-subtle:hover {
  color: var(--slate);
  border-color: var(--border);
}

.proof-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}

/* ── SIGNAL SVG ICONS ── */
.sig-icon-svg {
  font-size: 0;
  color: var(--indigo-lt);
}

.sig-icon-svg svg {
  display: block;
}

/* ── CONNECT SECTION EXTRAS ── */
.connect-lead {
  font-size: 16px;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 8px;
  max-width: 520px;
}

.connect-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  align-items: center;
}

.connect-pricing-link-secondary {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate);
  padding: 12px 0;
}

.connect-pricing-link-secondary:hover {
  color: var(--text);
}

.connect-inbox-preview {
  margin: 0 16px 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.connect-inbox-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--slate2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.connect-inbox-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.connect-inbox-row:last-child {
  border-bottom: none;
}

.connect-inbox-from {
  color: var(--text2);
  font-family: var(--ff-mono);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connect-inbox-match {
  color: var(--teal);
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}

.connect-inbox-row-warn .connect-inbox-match {
  color: #fbbf24;
}

.cta-band-link {
  color: var(--teal);
  font-weight: 600;
}

.cta-band-link:hover {
  color: var(--teal-lt);
}

/* ── NAV CONNECT ── */
.nav-connect {
  color: var(--teal) !important;
}

.nav-connect.active {
  color: var(--teal-lt) !important;
}

.btn-connect {
  background: var(--teal);
  color: #0a0f0e;
}

.btn-connect:hover {
  background: var(--teal-lt);
}

.nav-mobile-trial-connect {
  background: var(--teal) !important;
  color: #0a0f0e !important;
}

/* ── CONNECT PAGE ── */
.page-connect {
  --hero-accent: var(--teal);
}

.hero-eyebrow-teal {
  background: var(--teal-bg);
  border-color: var(--teal-bd);
  color: var(--teal);
}

.hero-eyebrow-teal .hero-eyebrow-dot {
  background: var(--teal);
}

.connect-hero h1 em {
  color: var(--teal-lt);
}

.cta-connect {
  background: var(--teal);
  color: #0a0f0e;
}

.cta-connect:hover {
  background: var(--teal-lt);
  color: #0a0f0e;
}

.proof-bar-teal {
  background: linear-gradient(180deg, var(--bg2), rgba(13, 20, 30, 1));
  border-color: var(--teal-bd);
}

.connect-hero-visual {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  min-height: 280px;
}

.connect-hero-call {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  background: var(--bg2);
  border-right: 1px solid var(--border);
}

.call-dock-hero {
  margin: 0;
}

.connect-account-hero {
  margin: 0;
}

.connect-hero-inbox {
  overflow: hidden;
  background: #05080c;
}

.connect-hero-inbox .app-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.connect-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pillar-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 24px;
  transition: border-color 0.2s;
}

.pillar-card:hover {
  border-color: var(--teal-bd);
}

.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.pillar-icon-teal {
  background: var(--teal-bg);
  border: 1px solid var(--teal-bd);
  color: var(--teal);
}

.pillar-icon-indigo {
  background: var(--indigo-bg);
  border: 1px solid var(--indigo-bd);
  color: var(--indigo-lt);
}

.pillar-card h3 {
  font-family: var(--ff-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--text);
}

.pillar-card p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.65;
  margin: 0;
}

.connect-flow-section {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.connect-flow-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 24px;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

.flow-step {
  position: relative;
}

.flow-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--teal-bg);
  border: 1px solid var(--teal-bd);
  color: var(--teal);
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.flow-step h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.flow-step p {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.6;
  margin: 0;
}

.cta-band-connect {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
  border-top-color: var(--teal-bd);
}

@media (max-width: 900px) {
  .product-cards {
    grid-template-columns: 1fr;
  }

  .connect-pillars {
    grid-template-columns: 1fr 1fr;
  }

  .flow-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .connect-hero-visual {
    grid-template-columns: 1fr;
  }

  .connect-hero-call {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  .connect-pillars {
    grid-template-columns: 1fr;
  }

  .product-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .connect-ctas {
    flex-direction: column;
    align-items: stretch;
  }

  .connect-pricing-link,
  .connect-pricing-link-secondary {
    text-align: center;
  }

  .connect-pricing-link-secondary {
    padding: 8px 0;
  }
}