:root {
  --bg: #050507;
  --text: #f4f1fb;
  --muted: #8b8499;
  --purple: #7c3aed;
  --purple-bright: #9f67ff;
  --purple-glow: rgba(124, 58, 237, 0.55);
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --ring: rgba(159, 103, 255, 0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "DM Mono", ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
body { min-height: 100dvh; overflow-x: hidden; position: relative; }

/* ---------- Ambient background ---------- */
.ambient { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.glow--a {
  width: 55vmax; height: 55vmax; top: -20vmax; left: -12vmax;
  background: radial-gradient(circle, var(--purple) 0%, transparent 65%);
  animation: drift 18s ease-in-out infinite alternate;
}
.glow--b {
  width: 48vmax; height: 48vmax; bottom: -22vmax; right: -14vmax;
  background: radial-gradient(circle, #4c1d95 0%, transparent 65%);
  animation: drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(4vmax, 3vmax) scale(1.12); }
}

/* ---------- Split: text (left, smaller) | demo (right, bigger) ---------- */
.split {
  position: relative; z-index: 1;
  min-height: 100dvh; max-width: 1180px; margin: 0 auto; padding: 48px 44px;
  display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 60px; align-items: center;
}

/* ---------- LEFT — pitch ---------- */
.pitch { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.pitch__head {
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.015em;
  text-wrap: balance;
}
.pitch__head .hl {
  background: linear-gradient(120deg, var(--purple-bright), #d8b4fe);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pitch__hooksub { font-size: 14px; line-height: 1.5; color: var(--muted); }
.pitch__label {
  font-family: "Syne", sans-serif; font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem); letter-spacing: 0.01em;
  color: var(--purple-bright); margin-top: 10px;
}
.ladder { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.ladder li {
  position: relative; padding-left: 22px;
  font-size: 14px; line-height: 1.45; color: #c9c3d6;
}
.ladder li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple-bright); box-shadow: 0 0 8px rgba(159, 103, 255, 0.6);
}
.ladder li strong { color: var(--text); font-weight: 500; }
.pitch__worst { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 8px; }

/* ---------- RIGHT — demo card (hero) ---------- */
.card {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.03));
  border: 1px solid rgba(159, 103, 255, 0.28); border-radius: 28px; padding: 56px 44px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  border: 1px solid rgba(159, 103, 255, 0.22); background: rgba(124, 58, 237, 0.08);
  padding: 8px 16px; border-radius: 999px;
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--purple-bright); box-shadow: 0 0 10px var(--purple-bright);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.headline {
  font-family: "Syne", sans-serif; font-weight: 800;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em;
}
.accent {
  background: linear-gradient(120deg, var(--purple-bright), #d8b4fe);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.subhead { font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 400px; }

/* ---------- Visualizer ---------- */
.visualizer {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  height: 0; opacity: 0; transition: opacity 0.4s ease, height 0.4s ease;
}
.visualizer.active { height: 56px; opacity: 1; }
.visualizer span {
  width: 5px; height: 12px; border-radius: 999px;
  background: linear-gradient(var(--purple-bright), var(--purple));
  box-shadow: 0 0 12px var(--purple-glow);
}
.visualizer.active span { animation: wave 1s ease-in-out infinite; }
.visualizer span:nth-child(1) { animation-delay: 0s; }
.visualizer span:nth-child(2) { animation-delay: 0.1s; }
.visualizer span:nth-child(3) { animation-delay: 0.2s; }
.visualizer span:nth-child(4) { animation-delay: 0.3s; }
.visualizer span:nth-child(5) { animation-delay: 0.4s; }
.visualizer span:nth-child(6) { animation-delay: 0.5s; }
.visualizer span:nth-child(7) { animation-delay: 0.4s; }
.visualizer span:nth-child(8) { animation-delay: 0.3s; }
.visualizer span:nth-child(9) { animation-delay: 0.2s; }
.visualizer span:nth-child(10){ animation-delay: 0.1s; }
@keyframes wave {
  0%, 100% { height: 12px; }
  50% { height: 44px; }
}

/* ---------- CTA button ---------- */
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: "DM Mono", monospace; font-size: 16px; font-weight: 500; letter-spacing: 0.01em;
  color: #fff; padding: 21px 34px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--purple), var(--purple-bright));
  box-shadow: 0 14px 46px -8px var(--purple-glow);
  transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -8px var(--purple-glow); }
.cta:active { transform: translateY(0); }
.cta:disabled { cursor: wait; opacity: 0.9; }
.cta__icon { display: inline-flex; width: 22px; height: 22px; }
.cta__icon svg { width: 100%; height: 100%; }

/* Expanding ring on the button */
.cta__ring {
  position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid var(--ring); opacity: 0; pointer-events: none;
}

/* State: connecting */
.cta.is-connecting { background: linear-gradient(135deg, #4c1d95, var(--purple)); }
.cta.is-connecting .cta__ring { opacity: 1; animation: ringPulse 1.4s ease-out infinite; }
@keyframes ringPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* State: connected (live — red end-call) */
.cta.is-live {
  background: linear-gradient(135deg, #b91c1c, var(--red));
  box-shadow: 0 12px 40px -8px rgba(239, 68, 68, 0.5);
}
.cta.is-live .cta__ring {
  opacity: 1; border-color: rgba(239, 68, 68, 0.4); animation: ringPulse 1.6s ease-out infinite;
}

/* State: error */
.cta.is-error { background: linear-gradient(135deg, #7f1d1d, #b91c1c); }

/* ---------- Status + error ---------- */
.status { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); min-height: 18px; }
.status.live { color: var(--green); }
.status.connecting { color: var(--amber); }
.error {
  font-size: 13px; line-height: 1.5; color: #fecaca;
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px; padding: 12px 16px; max-width: 440px;
}

/* ---------- Contact (call / WhatsApp) ---------- */
.contact {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 360px; text-align: center;
}
.contact__label { font-size: 14px; line-height: 1.5; color: var(--muted); }
.contact__bars { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cbar.callbtn { display: none; }
.calltext {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 15px; line-height: 1.4; color: var(--text);
}
.calltext svg { width: 18px; height: 18px; color: var(--purple-bright); flex-shrink: 0; }
.calltext strong { color: var(--purple-bright); font-weight: 500; letter-spacing: 0.04em; }
.cbar {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  font-family: "DM Mono", monospace; font-size: 15px; font-weight: 500; color: #fff;
  text-decoration: none; padding: 15px 22px; border-radius: 999px;
  transition: transform 0.15s ease;
}
.cbar:hover { transform: translateY(-2px); }
.cbar svg { width: 20px; height: 20px; flex-shrink: 0; }
.cbar--call { background: linear-gradient(135deg, var(--purple), var(--purple-bright)); box-shadow: 0 10px 30px -10px var(--purple-glow); }
.cbar--wa { background: #25d366; box-shadow: 0 10px 30px -10px rgba(37, 211, 102, 0.5); }

/* ---------- Mobile "try the demo" bar ---------- */
.mobcta {
  display: none; align-items: center; justify-content: center; gap: 8px;
  width: 100%; max-width: 340px;
  font-family: "DM Mono", monospace; font-size: 15px; font-weight: 500; color: #fff;
  text-decoration: none; padding: 17px 24px; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), var(--purple-bright));
  box-shadow: 0 12px 36px -10px var(--purple-glow);
}

/* ---------- Mobile: a normal, freely-scrolling page (no snap, no dvh jumps) ---------- */
@media (max-width: 880px) {
  /* Background paints WITH the page (absolute, no blur) instead of a fixed
     blurred layer that re-composites every scroll frame — kills scroll stutter. */
  .ambient { position: absolute; }
  .glow { animation: none; filter: none; opacity: 0.42; }
  .split { display: block; padding: 0; min-height: 0; max-width: none; }

  .pitch {
    text-align: center; align-items: center;
    padding: 54px 24px 36px; gap: 14px;
  }
  .pitch__head { font-size: clamp(2rem, 8.5vw, 2.7rem); }
  .pitch__hooksub { font-size: 15px; }
  .pitch__label { font-size: clamp(1.3rem, 5.5vw, 1.6rem); margin-top: 8px; }
  .ladder { text-align: left; width: max-content; max-width: 100%; margin: 0 auto; gap: 9px; }
  .ladder li { font-size: 15px; }
  .mobcta { display: inline-flex; margin-top: 22px; }

  /* demo as a distinct full-width section that flows beneath the pitch */
  .card {
    padding: 52px 26px 56px; gap: 22px;
    border: none; border-radius: 0;
  }
  .headline { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .card .subhead { font-size: 15px; max-width: none; }
  .card .badge { font-size: 13px; }
  .card .cta { font-size: 17px; padding: 22px 36px; }
  .cbar.callbtn { display: inline-flex; }
  .calltext { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .badge__dot, .cta__ring, .visualizer.active span { animation: none !important; }
  html { scroll-behavior: auto; }
}