:root {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface-1: #1a1a19;
  --surface-2: #202020;
  --surface-3: #262624;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --hairline: #2c2c2a;
  --border: #383835;
  --accent: #3987e5;
  --accent-bright: #63a6f2;
  --accent-wash: rgba(57, 135, 229, 0.14);
  --roof: #fab219;
  --roof-wash: rgba(250, 178, 25, 0.14);
  --good: #2fbf71;
  --serious: #ec835a;
  --violet: #8b7fd6;

  /* One color per "how it works" step (landing.html's data-step="0".."4") —
     each step and the stage card on the right share the same color so
     picking a step visibly "tints" the whole right-hand panel to match. */
  --step-0: var(--accent);
  --step-0-wash: var(--accent-wash);
  --step-1: var(--roof);
  --step-1-wash: var(--roof-wash);
  --step-2: var(--good);
  --step-2-wash: rgba(47, 191, 113, 0.14);
  --step-3: var(--serious);
  --step-3-wash: rgba(236, 131, 90, 0.14);
  --step-4: var(--violet);
  --step-4-wash: rgba(139, 127, 214, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 13, 13, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-icon { color: var(--accent-bright); }
.brand-sub { font-weight: 400; font-size: 12px; color: var(--text-muted); }

.nav-links { display: flex; align-items: center; gap: 24px; font-size: 13px; color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); }

.nav-cta {
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--accent-wash);
  color: var(--accent-bright) !important;
  font-weight: 600;
}
.nav-cta:hover { background: var(--accent); color: #fff !important; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 24px 96px;
}

.hero-glow {
  position: absolute;
  top: -220px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--roof);
  background: var(--roof-wash);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.hero-copy h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  margin: 0 0 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.accent-text { color: var(--accent-bright); }

.lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 480px;
  margin: 0 0 28px;
}

.hero-actions { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-bright); }

.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-primary); }
.btn-ghost:hover { border-color: var(--accent); }

.btn-sm { padding: 8px 14px; font-size: 13px; }

.trust-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }

.pill {
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  padding: 5px 10px;
  border-radius: 100px;
  color: var(--text-secondary);
}

/* ---------- hero art (interactive illustration) ---------- */

.hero-art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  outline: none;
}

.house-svg { width: 100%; max-width: 380px; }

.house-halo { fill: var(--accent-wash); }

.roof { fill: #d9573f; }
.walls { fill: var(--surface-2); stroke: var(--hairline); stroke-width: 2; }
.door { fill: var(--surface-3); stroke: var(--hairline); stroke-width: 2; rx: 6; }
.window {
  fill: var(--roof-wash);
  stroke: var(--roof);
  stroke-width: 1.5;
}

.drip {
  fill: var(--accent-bright);
  opacity: 0;
}
.hero-art.raining .drip-1 { animation: drip 1.6s 0.0s infinite; }
.hero-art.raining .drip-2 { animation: drip 1.6s 0.5s infinite; }
.hero-art.raining .drip-3 { animation: drip 1.6s 1.0s infinite; }

@keyframes drip {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(70px); }
}

.phone-badge { transform-origin: 300px 90px; }

.phone-ring { fill: none; stroke: var(--accent-bright); stroke-width: 2; opacity: 0; }
.phone-disc { fill: var(--accent); }
.phone-icon { fill: #fff; }

.hero-art.ringing .phone-badge { animation: shake 0.5s ease-in-out infinite; }
.hero-art.ringing .ring-a { animation: sonar 1.4s ease-out infinite; }
.hero-art.ringing .ring-b { animation: sonar 1.4s ease-out 0.4s infinite; }

@keyframes sonar {
  0% { r: 26px; opacity: 0.7; }
  100% { r: 56px; opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 14px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  background: var(--surface-1);
}

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(47, 191, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 191, 113, 0); }
}

/* ---------- generic section ---------- */

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 24px;
  border-top: 1px solid var(--hairline);
}

.section-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.section-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 40px;
}

/* ---------- how it works ---------- */

.steps-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: start;
}

.steps-list { display: flex; flex-direction: column; gap: 10px; }

.step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 16px 18px;
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.step:hover { border-color: var(--border); }
/* Fallback for a step index beyond --step-0..4 (shouldn't happen with 5
   steps, but keeps this from silently going colorless if one's ever added). */
.step.active { border-color: var(--accent); background: var(--accent-wash); }

.step-num {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--surface-3);
  color: var(--text-muted);
}
.step.active .step-num { background: var(--accent); color: #fff; }

/* Each step gets its own color (see the --step-N vars above) instead of
   every active step looking the same — and the stage card on the right
   (below) picks up the same color per data-step, so clicking a step tints
   both sides to match. */
.step[data-step="0"].active { border-color: var(--step-0); background: var(--step-0-wash); }
.step[data-step="0"].active .step-num { background: var(--step-0); }
.step[data-step="1"].active { border-color: var(--step-1); background: var(--step-1-wash); }
.step[data-step="1"].active .step-num { background: var(--step-1); }
.step[data-step="2"].active { border-color: var(--step-2); background: var(--step-2-wash); }
.step[data-step="2"].active .step-num { background: var(--step-2); }
.step[data-step="3"].active { border-color: var(--step-3); background: var(--step-3-wash); }
.step[data-step="3"].active .step-num { background: var(--step-3); }
.step[data-step="4"].active { border-color: var(--step-4); background: var(--step-4-wash); }
.step[data-step="4"].active .step-num { background: var(--step-4); }

.step-body { display: flex; flex-direction: column; gap: 4px; }
.step-body strong { font-size: 14px; }
.step-body small { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

.step-stage { min-height: 280px; }

.stage-card {
  height: 100%;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: linear-gradient(160deg, var(--surface-1), var(--surface-2));
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  min-height: 280px;
  transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

/* Same 5 colors as the step list (JS sets data-step on #stage-card to match
   whichever step is active) — the wash is layered under the existing
   surface gradient rather than replacing it, so text stays readable. */
.stage-card[data-step="0"] { border-color: var(--step-0); background: linear-gradient(160deg, var(--step-0-wash), var(--surface-2)); }
.stage-card[data-step="1"] { border-color: var(--step-1); background: linear-gradient(160deg, var(--step-1-wash), var(--surface-2)); }
.stage-card[data-step="2"] { border-color: var(--step-2); background: linear-gradient(160deg, var(--step-2-wash), var(--surface-2)); }
.stage-card[data-step="3"] { border-color: var(--step-3); background: linear-gradient(160deg, var(--step-3-wash), var(--surface-2)); }
.stage-card[data-step="4"] { border-color: var(--step-4); background: linear-gradient(160deg, var(--step-4-wash), var(--surface-2)); }

.stage-icon { font-size: 30px; }
.stage-card h3 { margin: 0; font-size: 19px; }
.stage-card p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; max-width: 420px; }
.stage-card[data-step="0"] .stage-quote { border-left-color: var(--step-0); }
.stage-card[data-step="1"] .stage-quote { border-left-color: var(--step-1); }
.stage-card[data-step="2"] .stage-quote { border-left-color: var(--step-2); }
.stage-card[data-step="3"] .stage-quote { border-left-color: var(--step-3); }
.stage-card[data-step="4"] .stage-quote { border-left-color: var(--step-4); }

.stage-quote {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
  border-left: 2px solid var(--accent);
  padding-left: 12px;
  font-style: italic;
}

/* ---------- demo / phone mock ---------- */

.phone-mock {
  max-width: 620px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}

.phone-mock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}

.dot-red { background: #ec6a5e; box-shadow: none; animation: none; }
.dot-yellow { background: #f4bf4f; box-shadow: none; animation: none; }
.dot-green { background: #61c454; box-shadow: none; animation: none; }
.dot-red, .dot-yellow, .dot-green { width: 9px; height: 9px; }

.phone-mock-title { margin-left: 8px; font-size: 12.5px; color: var(--text-muted); flex: 1; }
.phone-mock-badge { font-size: 11.5px; color: var(--good); }

.phone-mock-body {
  padding: 20px;
  min-height: 260px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: rise 0.25s ease both;
}
.bubble.assistant { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--hairline); border-bottom-left-radius: 4px; }
.bubble.caller { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.typing-dots { display: inline-flex; gap: 3px; align-self: flex-start; padding: 10px 14px; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  animation: bounce 1.1s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.phone-mock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}

.saved-badge { font-size: 12px; color: var(--good); font-weight: 600; animation: rise 0.3s ease both; }

/* ---------- impact / stats ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 24px 20px;
}

.stat-num {
  font-size: 34px;
  font-weight: 700;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

.stat-label { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--hairline);
  padding: 40px 24px 60px;
}
.footer-inner { max-width: 1120px; margin: 0 auto; color: var(--text-muted); font-size: 13px; }
.footer-brand { color: var(--text-secondary); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.footer-links { display: flex; gap: 16px; margin-top: 12px; }
.footer-links a:hover { color: var(--text-primary); }

/* ---------- reveal-on-scroll (below-the-fold sections only) ---------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* The hero is already in the initial viewport, so it animates in
   immediately on load instead of waiting on a scroll observer — otherwise
   it flashes blank until the IntersectionObserver's first callback fires. */
.hero-copy, .hero-art { animation: hero-in 0.6s ease both; }
.hero-art { animation-delay: 0.08s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .steps-layout { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-links a:not(.nav-cta) { display: none; }
}