/* ==========================================================================
   WhatsAgent AI — landing page
   Token system: colors pulled directly from the live product's own sign-in
   screen (green gradient panel + white surface) — not an invented palette.
   ========================================================================== */

:root {
  --bg: #f5f8f6;
  --surface: #ffffff;
  --surface-2: #eef5f1;
  --ink: #14181a;
  --ink-dim: #3c4642;
  --ink-muted: #66716a;
  --ink-faint: #98a29b;
  --accent: #2f8f5b;
  --accent-hover: #267a4c;
  --accent-light: #3da372;
  --accent-deep: #163e2b;
  --accent-ink: #ffffff;
  --accent-tint: #eaf6f0;
  --line: rgba(20, 24, 21, 0.09);
  --line-strong: rgba(20, 24, 21, 0.16);
  --warn: #f2b84b;

  /* WhatsApp chat mockup component palette — kept authentic to WhatsApp's
     own look (light green sent bubbles, white received) rather than the
     site accent, so the mockups read instantly as "WhatsApp". */
  --wa-bg: #e7e0d2;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-text: #111b21;
  --wa-tick: #53bdeb;

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --container: 1180px;
  --radius: 16px;
  --radius-sm: 9px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  z-index: 1000;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}

section {
  position: relative;
  padding: 96px 0;
  /* anchor jumps land below the fixed nav */
  scroll-margin-top: 76px;
}

section + section {
  border-top: 1px solid var(--line);
}

.section-head {
  max-width: 640px;
  margin: 0 0 44px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
}

.section-head p {
  color: var(--ink-muted);
  font-size: 17px;
  margin: 16px 0 0;
}

/* ---------------------------------- buttons ---------------------------------- */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  /* No `transform` here: GSAP animates the buttons (load-in, press,
     magnetic hover) and a CSS transition on the same property makes it
     read a mid-transition value as the resting state. */
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent-hover);
  color: var(--accent-ink);
  box-shadow: 0 10px 24px -10px rgba(47, 143, 91, 0.55);
}

.btn-primary:hover {
  background: var(--accent-deep);
}

.btn-ghost {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.btn-sm {
  padding: 9px 18px;
  font-size: 13.5px;
}

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

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(245, 248, 246, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  color: var(--ink);
}

/* The "gent" in Wogent. Green on light surfaces; on the green chat header it
   goes mint so it still reads as a second colour. */
.brand-ai {
  color: var(--accent);
}

.chat-head .brand-ai {
  color: #b9f0d1;
}

.nav-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--accent-light), var(--accent-deep));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.nav-mark svg {
  width: 16px;
  height: 16px;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--accent-hover);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}


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

.hero {
  padding: 150px 0 88px;
  border-top: none !important;
  overflow: hidden;
  position: relative;
}

/* Two soft green blobs behind the hero; GSAP drifts them slowly. */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}

.hero-glow-a {
  top: -280px;
  right: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(61, 163, 114, 0.26), transparent 66%);
}

.hero-glow-b {
  bottom: -320px;
  left: -260px;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(242, 184, 75, 0.16), transparent 66%);
}

.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  position: relative;
}

.hero h1 {
  font-size: clamp(38px, 5.2vw, 64px);
  max-width: 14ch;
  letter-spacing: -0.02em;
}

/* Words are wrapped in spans by JS for the load-in; the wrapper clips so
   each word rises out of its own line. */
.hero h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero h1 .w > span {
  display: inline-block;
}

.hero-sub {
  font-size: 18.5px;
  color: var(--ink-muted);
  max-width: 42ch;
  margin: 22px 0 0;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.trust-row {
  display: flex;
  gap: 10px 18px;
  margin: 36px 0 0;
  flex-wrap: wrap;
  padding: 0;
}

.trust-row li {
  list-style: none;
  font-size: 13.5px;
  color: var(--ink-muted);
  padding-right: 18px;
  border-right: 1px solid var(--line-strong);
}

.trust-row li:last-child {
  border-right: none;
  padding-right: 0;
}

/* -- phone + floating chips -- */

.hero-stage {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin-left: auto;
}

.hero-phone {
  margin: 0;
}

.hero-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 18px 40px -18px rgba(20, 40, 30, 0.35), 0 1px 2px rgba(20, 24, 21, 0.06);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-dim);
  white-space: nowrap;
  will-change: transform;
}

.chip-lang {
  top: 54px;
  left: -236px;
}

.chip-typing {
  top: 210px;
  right: -46px;
}

.chip-order {
  bottom: 118px;
  left: -212px;
}

.chip-clock {
  bottom: 22px;
  right: -28px;
}

.chip-flags {
  display: inline-flex;
}

.chip-flags span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: var(--accent-hover);
  border: 2px solid var(--surface);
  margin-right: -7px;
}

.chip-flags span:nth-child(2) {
  background: var(--accent-light);
}

.chip-flags span:nth-child(3) {
  background: var(--accent-deep);
  margin-right: 2px;
}

.chip-dots {
  display: inline-flex;
  gap: 3px;
  padding: 0 4px;
}

.chip-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-hover);
  animation: wa-typing-bounce 1s infinite ease-in-out;
}

.chip-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.chip-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.chip-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-hover);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.chip-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-hover);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 3px 8px;
}

/* ---------------------------------- ticker ---------------------------------- */

.ticker {
  background: linear-gradient(90deg, #0e2a1d, var(--accent-deep) 60%, #1b4a34);
  color: #fff;
  overflow: hidden;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ticker-track {
  display: flex;
  gap: 56px;
  width: max-content;
  will-change: transform;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}

.ticker-item b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--warn);
}

.ticker-item i {
  font-style: normal;
  font-weight: 600;
  color: #fff;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* ---------------------------------- who it's for ---------------------------------- */

.fit {
  padding: 56px 0;
}

.fit-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px 48px;
  align-items: center;
}

.fit-copy h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  max-width: 22ch;
}

.fit-copy p {
  color: var(--ink-muted);
  font-size: 15.5px;
  max-width: 46ch;
  margin: 12px 0 0;
}

.fit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.fit-list li {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 15px;
}

.fit-trust {
  grid-column: 1 / -1;
  list-style: none;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13.5px;
  color: var(--ink-muted);
}

.fit-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fit-trust li::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23267a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.fit-trust a {
  color: var(--accent-hover);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

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

.hiw {
  padding-bottom: 88px;
}

.hiw-flow {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

.hiw-line {
  position: absolute;
  top: 24px;
  left: 16.66%;
  width: 66.66%;
  height: 8px;
  overflow: visible;
}

.hiw-line path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.hiw-line-bg {
  stroke: var(--line-strong);
}

.hiw-line-draw {
  stroke: var(--accent-hover);
}

.hiw-vline {
  display: none;
}

.hiw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}

.hiw-step {
  text-align: center;
  padding: 0 12px;
}

.hiw-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--line-strong);
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  position: relative;
  z-index: 1;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hiw-step.is-lit .hiw-dot {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
  box-shadow: 0 0 0 6px var(--accent-tint);
}

.hiw-step h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.hiw-step p {
  color: var(--ink-muted);
  font-size: 14.5px;
  margin: 0 auto;
  max-width: 28ch;
}

/* ---------------------------------- capabilities showcase ---------------------------------- */

.show {
  padding: 0;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}

/* This block gets pinned by ScrollTrigger on wide screens; it is a full
   viewport tall so the phone and the list sit centred while the user
   scrolls through the six capabilities. */
.show-pin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 0;
}

.show-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}

.show-title {
  font-size: clamp(28px, 3.4vw, 40px);
  margin-bottom: 34px;
}

.show-tabs {
  display: none;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.show-tabs::-webkit-scrollbar {
  display: none;
}

.show-tab,
.demo-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

.show-tab,
.demo-tab {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.show-tab.is-active,
.demo-tab.is-active {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

.show-tab:focus-visible,
.demo-tab:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.show-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.show-item {
  position: relative;
  padding: 12px 18px 12px 26px;
  border-radius: var(--radius-sm);
  opacity: 0.38;
  transition: opacity 0.25s ease;
}

.show-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-hover);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.show-item.is-active {
  opacity: 1;
}

.show-item.is-active::before {
  transform: scaleY(1);
}

.show-item h3 {
  font-size: 19px;
  margin-bottom: 4px;
}

.show-item p {
  color: var(--ink-muted);
  font-size: 14.5px;
  margin: 0;
  max-width: 40ch;
}

.show-stage {
  display: flex;
  justify-content: center;
}

.show-phone {
  margin: 0;
}

/* All seven screens share one grid cell, so the phone is as tall as the
   tallest thread (the photos one) and nothing gets cut off at any width. */
.show-screens {
  display: grid;
  min-height: 460px;
}

.show-screens .show-screen {
  grid-area: 1 / 1;
  height: auto;
  min-height: 100%;
  opacity: 0;
}

/* Pinned layout: the phone must fit the viewport with the nav and some
   air above and below. Screens taller than that clip at the top and keep
   the end of the conversation (the agent's answer) in view. */
@media (min-width: 901px) {
  .show-screens,
  .show-screens .show-screen {
    max-height: calc(100vh - 230px);
  }

  .show-screens {
    overflow: hidden;
  }
}

/* Short laptop screens: the seven-item list would not fit beside the
   phone, so only the active item shows its second line. */
@media (min-width: 901px) and (max-height: 860px) {
  .show-pin {
    padding: 88px 0 32px;
  }

  .show-title {
    font-size: 26px;
    margin-bottom: 16px;
  }

  .show-item {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .show-item h3 {
    font-size: 17px;
  }

  .show-item p {
    display: none;
    font-size: 13.5px;
  }

  .show-item.is-active p {
    display: block;
  }
}

.show-screen.is-active {
  opacity: 1;
}

.show-screen .wa-body {
  justify-content: center;
}

/* ---------------------------------- front desk ---------------------------------- */

.desk-grid {
  display: grid;
  /* minmax(0, …) so the inbox mock-up's no-wrap pills can't widen a column
     past its share and push the page into horizontal scroll on phones. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.desk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 26px;
  display: flex;
  flex-direction: column;
}

.desk-visual {
  height: 262px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 14px;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.desk-visual .wa-snippet-compact {
  border: 1px solid var(--line-strong);
}

.desk-card h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

.desk-card p {
  color: var(--ink-muted);
  font-size: 14.5px;
  margin: 0;
}

/* ---------------------------------- demos ---------------------------------- */

.demo-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: -16px 0 36px;
}

.demo-stage {
  text-align: center;
}

.demo-phone {
  margin: 0 auto 22px;
  text-align: left;
}

.demo-caption {
  font-size: 15px;
  color: var(--ink-muted);
  max-width: 44ch;
  margin: 0 auto;
  min-height: 1.6em;
}

/* ---------------------------------- faq ---------------------------------- */

.faq-wrap {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}

.faq-wrap .section-head {
  margin-bottom: 0;
}

.faq .faq-list {
  max-width: none;
}
/* ---------------------------------- WhatsApp chat mockup component ---------------------------------- */

.wa-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.wa-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light), var(--accent-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.wa-header-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wa-header-text strong {
  font-size: 13.5px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-header-text span {
  font-size: 11px;
  color: var(--accent-hover);
}

.wa-body {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background-color: var(--wa-bg);
  background-image: radial-gradient(rgba(20, 24, 21, 0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  overflow: hidden;
}

.wa-bubble {
  position: relative;
  max-width: 82%;
  padding: 7px 10px 8px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--wa-text);
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(6px);
  animation: wa-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wa-reaction {
  position: absolute;
  bottom: -10px;
  right: 0;
  width: 23px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: scale(0.4);
  animation: wa-reaction-in 0.3s ease forwards;
}

@keyframes wa-reaction-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wa-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* sent bubbles grow from their bottom-right corner, received from the
   bottom-left — the way WhatsApp's own bubbles land */
.wa-out {
  transform-origin: bottom right;
}

.wa-in {
  transform-origin: bottom left;
}

/* ticks: grey on send, blue once "read" */
.wa-out .wa-ticks path {
  stroke: #9aa5a0;
  animation: wa-tick-read 0.4s ease 0.9s forwards;
}

@keyframes wa-tick-read {
  to {
    stroke: var(--wa-tick);
  }
}

.wa-reaction-float {
  position: absolute;
  bottom: -6px;
  right: 6px;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.wa-in {
  align-self: flex-start;
  background: var(--wa-in);
  border-top-left-radius: 2px;
}

.wa-out {
  align-self: flex-end;
  background: var(--wa-out);
  border-top-right-radius: 2px;
}

.wa-meta {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: rgba(17, 27, 33, 0.45);
}

.wa-ticks {
  flex-shrink: 0;
}

.wa-system {
  align-self: center;
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink-muted);
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  animation: wa-in 0.35s ease forwards;
}

.wa-typing {
  align-self: flex-start;
  background: var(--wa-in);
  padding: 9px 13px;
  border-radius: 9px;
  border-top-left-radius: 2px;
  display: flex;
  gap: 4px;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1);
}

.wa-typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: wa-typing-bounce 1s infinite ease-in-out;
}

.wa-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.wa-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes wa-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* -- photo / screenshot attachments (drawn in CSS, no image files) -- */

.wa-bubble.wa-has-image {
  padding: 4px 4px 8px;
}

.wa-bubble.wa-has-image .wa-text {
  padding: 4px 6px 0;
}

.wa-bubble.wa-has-image .wa-meta {
  padding-right: 6px;
}

.wa-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 168px;
  max-width: 100%;
  height: 92px;
  border-radius: 6px;
  color: var(--ink-muted);
}

.wa-image-photo {
  background: linear-gradient(160deg, #d7dfd9, #b8c4bc);
  color: var(--ink-dim);
}

/* a real image file: fills the tile, cropped like WhatsApp does */
.wa-image-real {
  height: auto;
  aspect-ratio: 168 / 100;
  overflow: hidden;
  background: var(--surface-2);
}

.wa-image-real img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wa-image-screenshot {
  background: var(--surface);
  border: 1px solid var(--line);
}

.wa-image-art {
  display: grid;
  place-items: center;
}

.wa-image-art svg {
  width: 30px;
  height: 30px;
}

.wa-image-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.wa-image-screenshot .wa-image-label {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}

/* -- full "phone" mockup: hero + use-case demos -- */

.wa-window {
  position: relative;
  margin-left: auto;
  width: 100%;
  max-width: 330px;
  background: #1a1f1c;
  border: 10px solid #14181a;
  border-radius: 40px;
  box-shadow: 0 40px 80px -30px rgba(20, 40, 30, 0.35), 0 0 0 1px rgba(20, 24, 21, 0.05);
}

.wa-window-notch {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wa-window-notch::after {
  content: "";
  width: 70px;
  height: 6px;
  border-radius: 4px;
  background: #14181a;
}

.wa-window-screen {
  height: 540px;
  /* the bezel is 40px with a 10px border, so the screen's own corners
     follow it at 28px instead of the old near-square 4px */
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wa-window-screen .wa-body {
  justify-content: flex-end;
}

/* -- compact "snippet" card: capability rows -- */

.wa-snippet {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 40px -24px rgba(20, 40, 30, 0.25);
  display: flex;
  flex-direction: column;
  max-width: 380px;
  margin: 0 auto;
}

.wa-snippet .wa-body {
  min-height: 140px;
  justify-content: center;
}

.wa-snippet-compact {
  max-width: none;
  border-radius: var(--radius-sm);
  box-shadow: none;
  height: 100%;
}

.wa-snippet-compact .wa-header {
  padding: 10px 14px;
}

.wa-snippet-compact .wa-body {
  min-height: 0;
  padding: 12px 10px;
  gap: 8px;
}

.wa-snippet-compact .wa-bubble {
  font-size: 12.5px;
}

.wa-snippet-compact .wa-system {
  font-size: 11px;
}

/* campaign card */

.bc-campaign {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.bc-campaign-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bc-campaign-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.bc-pill {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 3px 9px;
}

.bc-campaign-meta {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
}

.bc-campaign-meta li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 7px;
  vertical-align: 1px;
}

.bc-steps {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-dim);
}

.bc-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bc-steps li::before {
  content: "";
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
}

.bc-steps li.is-done::before {
  border-color: var(--accent-hover);
  background: var(--accent-hover) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.bc-steps li.is-live {
  color: var(--accent-hover);
  font-weight: 600;
}

.bc-steps li.is-live::before {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* inbox card */

.bc-inbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bc-inbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
}

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

.bc-inbox-row.is-active {
  background: var(--accent-tint);
}

.bc-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--accent-light), var(--accent-deep));
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.bc-inbox-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.bc-inbox-text strong {
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-inbox-text span {
  font-size: 11.5px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-stage {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.bc-stage-new {
  background: var(--surface-2);
  color: var(--ink-dim);
}

.bc-stage-hot {
  background: var(--warn);
  color: var(--ink);
}

.bc-stage-closed {
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.bc-takeover {
  position: absolute;
  right: 12px;
  bottom: -11px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-hover);
  border-radius: 999px;
  padding: 4px 10px;
  box-shadow: 0 6px 14px -6px rgba(38, 122, 76, 0.7);
  z-index: 1;
}

/* ---------------------------------- faq ---------------------------------- */

.faq-list {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 22px;
}

.faq-item summary {
  padding: 18px 28px 18px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 16px;
  font-size: 20px;
  color: var(--accent-hover);
  font-weight: 400;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 4px;
}

.faq-item p {
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 62ch;
}

/* ---------------------------------- final CTA ---------------------------------- */

.cta-band {
  background: linear-gradient(135deg, var(--accent-light), var(--accent-deep));
  border-radius: 22px;
  padding: 64px 56px;
  text-align: center;
  color: #ffffff;
}

.cta-band h2 {
  color: #ffffff;
  font-size: clamp(26px, 3.2vw, 38px);
}

.cta-band p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 46ch;
  margin: 14px auto 30px;
  font-size: 16px;
}

.cta-band .btn-primary {
  background: #ffffff;
  color: var(--accent-deep);
  box-shadow: none;
}

.cta-band .btn-primary:hover {
  background: #eef4f0;
}

.cta-band .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.cta-band .btn-ghost:hover {
  border-color: #ffffff;
  color: #ffffff;
}

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

footer {
  padding: 90px 0 40px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}

.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-dim);
}

.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 13.5px;
}

.footer-links a:hover {
  color: var(--accent-hover);
}

.footer-copyright {
  width: 100%;
  order: 3;
  text-align: center;
  padding-top: 8px;
}

/* ---------------------------------- book-a-demo modal ---------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(14, 20, 17, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 34px 30px;
  box-shadow: 0 30px 70px -20px rgba(10, 20, 15, 0.45);
}

.modal h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.modal-sub {
  color: var(--ink-muted);
  font-size: 14.5px;
  margin: 0 0 26px;
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.modal-close svg {
  width: 15px;
  height: 15px;
}

.modal-close:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.modal fieldset.field {
  border: none;
  padding: 0;
  margin: 0 0 18px;
}

.modal fieldset.field legend {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 10px;
}

.modal .field {
  margin-bottom: 18px;
}

.modal .field > label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 7px;
}

.modal .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366716a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
  cursor: pointer;
}

.modal .field select[hidden],
.modal .field input[hidden] {
  display: none;
}

.modal .field input[type="text"],
.modal .field input[type="tel"],
.modal .field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}

.modal .field input[type="text"]:focus-visible,
.modal .field input[type="tel"]:focus-visible,
.modal .field select:focus-visible {
  outline: none;
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.field-row {
  display: flex;
  gap: 14px;
}

.field-row .field {
  flex: 1;
  min-width: 0;
}

.biz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.biz-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 11px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.biz-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.biz-option:has(input:checked) {
  border-color: var(--accent-hover);
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.biz-option:has(input:focus-visible) {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.biz-options-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.biz-options-3 .biz-option {
  padding: 10px 6px;
  font-size: 13px;
}

.phone-row {
  display: flex;
  gap: 8px;
}

.phone-row input[type="tel"] {
  flex: 1;
  min-width: 0;
}

/* flag + native select in one bordered box; the select's own chrome is
   hidden so it matches the text inputs */
.phone-code {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding-left: 10px;
}

.phone-code:focus-within {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.phone-flag {
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(20, 24, 21, 0.1);
}

.modal .field .phone-code select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366716a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  padding: 11px 24px 11px 8px;
  cursor: pointer;
  /* fixed: a native select otherwise sizes to its longest option */
  width: 86px;
}

.modal .field .phone-code select:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.field-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--ink-muted);
}

.field-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: -6px 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #a33a2a;
  background: #fdf0ed;
  border: 1px solid rgba(163, 58, 42, 0.2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.form-status[hidden] {
  display: none;
}

.modal-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.modal-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.modal-done {
  text-align: center;
  padding: 12px 0 4px;
}

.modal-done[hidden] {
  display: none;
}

.modal-done-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent-hover);
}

.modal-done-mark svg {
  width: 26px;
  height: 26px;
}

.modal-done h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

.modal-done p {
  color: var(--ink-muted);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 22px;
}

.modal-submit svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------- motion extras ---------------------------------- */

/* page-load curtain */

.curtain {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: linear-gradient(160deg, var(--accent-light), var(--accent-deep));
  pointer-events: none;
}

/* soft glow that follows the cursor (desktop only; removed otherwise) */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(61, 163, 114, 0.16), transparent 62%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

section,
footer,
.ticker {
  position: relative;
  z-index: 1;
}

/* split headlines share the hero's word-clip treatment */

[data-split] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

[data-split] .w > span {
  display: inline-block;
}

/* buttons: press ripple */

.btn {
  position: relative;
  overflow: hidden;
}

.btn-ripple {
  position: absolute;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: currentColor;
  pointer-events: none;
}

/* mascot eyes on the nav mark */

.nav-mark-eyes {
  transform-box: fill-box;
  transform-origin: center;
}

/* Lenis */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* hero phone: seconds counter while the agent types (see renderAnimated) */

.wa-window-screen {
  position: relative;
}

.wa-stopwatch {
  position: absolute;
  top: 66px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  box-shadow: 0 6px 14px -8px rgba(20, 40, 30, 0.4);
  opacity: 0;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  pointer-events: none;
}

.wa-stopwatch::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  animation: wa-stopwatch-spin 0.8s linear infinite;
}

.wa-stopwatch b {
  font-weight: 500;
}

.wa-stopwatch.is-on {
  opacity: 1;
  transform: none;
}

.wa-stopwatch.is-done {
  color: #fff;
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.wa-stopwatch.is-done::before {
  border-color: #fff;
  border-top-color: #fff;
  animation: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 7px no-repeat;
}

@keyframes wa-stopwatch-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ticker: the outcome word flashes as it crosses the centre of the screen */

.ticker-item i {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.ticker-item i.is-hit {
  color: #9ff0c1;
  text-shadow: 0 0 14px rgba(61, 163, 114, 0.9);
}

/* how it works: ripple ring when a step lights */

.hiw-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--accent-hover);
  opacity: 0;
  pointer-events: none;
}

.hiw-step.is-lit .hiw-dot::after {
  animation: hiw-ripple 0.9s ease-out forwards;
}

@keyframes hiw-ripple {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

/* showcase: GSAP owns the bubbles here, so the component's own CSS
   entrance (which would override inline opacity) is switched off */

.show-screen .wa-bubble,
.show-screen .wa-system {
  animation: none;
  opacity: 1;
  transform: none;
}

/* campaign card: delivery bar under the "Delivered" step */

.bc-steps li {
  position: relative;
  flex-wrap: wrap;
}

.bc-progress {
  flex-basis: 100%;
  height: 3px;
  margin: 4px 0 2px 24px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.bc-progress i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  background: var(--accent-hover);
  transform-origin: left center;
}

/* inbox card: rows animate height, so each row clips itself and the list
   stays open so the "Take over" pill can hang below the last row */

.bc-inbox {
  overflow: visible;
}

.bc-inbox-row {
  overflow: hidden;
  background: var(--surface);
}

.bc-inbox-row:first-child {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.bc-inbox-row:last-child {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.bc-inbox-row.is-active {
  overflow: visible;
}

/* demo phone: screen wipes inside the bezel, phone tilts in 3D */

.demo-phone {
  overflow: hidden;
  will-change: transform;
}

/* nav: compact after the first scroll; current section underlined */

.nav .container {
  transition: height 0.25s ease;
}

.nav.is-scrolled .container {
  height: 60px;
}

.nav.is-scrolled {
  background: rgba(245, 248, 246, 0.9);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(20, 40, 30, 0.35);
}

.nav-links a {
  position: relative;
  padding-bottom: 3px;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav-links a.is-current {
  color: var(--ink);
}

.nav-links a.is-current::after {
  transform: scaleX(1);
}

/* CTA band: drifting chat bubbles behind the copy */

.cta-band {
  position: relative;
  overflow: hidden;
}

.cta-band > :not(.cta-bubbles) {
  position: relative;
  z-index: 1;
}

.cta-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-bubble {
  position: absolute;
  display: block;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cta-bubble-in {
  border-top-left-radius: 3px;
}

.cta-bubble-out {
  border-top-right-radius: 3px;
  background: rgba(217, 253, 211, 0.12);
}

.cta-bubble:nth-child(1) {
  width: 150px;
  height: 46px;
  left: 6%;
  top: 18%;
}

.cta-bubble:nth-child(2) {
  width: 110px;
  height: 38px;
  left: 14%;
  bottom: 16%;
}

.cta-bubble:nth-child(3) {
  width: 90px;
  height: 34px;
  right: 8%;
  top: 22%;
}

.cta-bubble:nth-child(4) {
  width: 170px;
  height: 52px;
  right: 12%;
  bottom: 14%;
}

.cta-bubble:nth-child(5) {
  width: 70px;
  height: 30px;
  right: 30%;
  top: 8%;
}

@media (max-width: 720px) {
  .cta-bubble {
    display: none;
  }

  .cta-bubble:nth-child(1),
  .cta-bubble:nth-child(4) {
    display: block;
    width: 90px;
    height: 32px;
    opacity: 0.8;
  }

  .cta-bubble:nth-child(1) {
    left: 4%;
    top: 8%;
  }

  .cta-bubble:nth-child(4) {
    right: 4%;
    bottom: 6%;
  }

  .wa-stopwatch {
    top: 62px;
  }
}

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

@media (max-width: 980px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .hero h1 {
    max-width: none;
  }

  .hero-stage {
    margin: 0 auto;
  }

  .wa-window {
    margin: 0 auto;
  }

  .chip-lang {
    left: -120px;
  }

  .chip-order {
    left: -110px;
  }

  .desk-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    margin: 0 auto;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .fit-wrap {
    grid-template-columns: 1fr;
  }

  .fit-list {
    justify-content: flex-start;
  }

  .cta-band {
    padding: 48px 28px;
  }
}

/* The showcase drops the pin below 900px: tabs pick the capability and
   only the active item's copy is shown under them. */
@media (max-width: 900px) {
  .show-pin {
    min-height: 0;
    padding: 72px 0;
  }

  .show-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .show-stage {
    width: 100%;
  }

  /* The copy wrapper dissolves so the title, tabs, phone and caption can
     be ordered as one column: title → tabs → phone → caption. */
  .show-copy {
    display: contents;
  }

  .show-title {
    order: 0;
    margin-bottom: 18px;
  }

  .show-tabs {
    order: 1;
    display: flex;
    margin: 0 -28px 22px;
    padding: 0 28px;
    /* flex item in a column: without this the no-wrap chips set its
       minimum width and push the page wider than the phone */
    min-width: 0;
    max-width: calc(100% + 56px);
  }

  .show-stage {
    order: 2;
  }

  .show-list {
    order: 3;
    margin-top: 22px;
  }

  .show-phone {
    max-width: 300px;
  }

  .show-screens {
    min-height: 360px;
  }

  .show-item {
    display: none;
    padding: 0;
    text-align: center;
  }

  .show-item.is-active {
    display: block;
  }

  .show-item::before {
    display: none;
  }

  .show-item h3 {
    font-size: 18px;
  }

  .show-item p {
    max-width: none;
  }
}

@media (max-width: 720px) {
  section {
    padding: 64px 0;
  }

  /* brand + CTA on the first row, section links on a second row */
  .nav .container,
  .nav.is-scrolled .container {
    flex-wrap: wrap;
    height: auto;
    padding-top: 12px;
    padding-bottom: 10px;
    row-gap: 8px;
  }

  .nav-brand {
    font-size: 15.5px;
  }

  .nav-links {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .nav-links a {
    font-size: 12.5px;
    white-space: nowrap;
  }

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

  .hero {
    padding: 128px 0 56px;
  }

  section {
    scroll-margin-top: 100px;
  }

  .hero-sub {
    font-size: 16px;
  }

  .hero-stage {
    max-width: 300px;
    margin-top: 12px;
  }

  /* All four chips stay, but the phone fills the width here so nothing
     floats over the chat: two chips hang off the top edge (over the
     header) and two step down off the bottom edge. */
  .hero-chip {
    font-size: 12px;
    padding: 7px 11px 7px 8px;
    gap: 7px;
  }

  .chip-lang {
    top: -16px;
    left: -18px;
  }

  .chip-typing {
    top: -16px;
    right: -12px;
  }

  .chip-order {
    bottom: -16px;
    left: -24px;
  }

  .chip-clock {
    bottom: -60px;
    right: -18px;
  }

  .hero-stage {
    margin-bottom: 52px;
  }

  .chip-flags span {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .wa-window-screen {
    height: 440px;
  }

  .trust-row {
    gap: 6px 14px;
    margin-top: 28px;
  }

  .trust-row li {
    padding-right: 14px;
  }

  .ticker {
    padding: 13px 0;
  }

  .hiw-line {
    display: none;
  }

  .hiw-vline {
    display: block;
    position: absolute;
    left: 23px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    border-radius: 2px;
    background: var(--line-strong);
  }

  .hiw-vline i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background: var(--accent-hover);
    transform: scaleY(0);
    transform-origin: top center;
  }

  .hiw-steps {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .hiw-step {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding: 0;
  }

  .hiw-dot {
    margin: 0;
    grid-row: 1 / span 2;
  }

  .hiw-step h3 {
    grid-column: 2;
    padding-top: 12px;
    margin-bottom: 4px;
  }

  .hiw-step p {
    grid-column: 2;
    max-width: none;
    margin: 0;
  }

  .demo-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-left: -28px;
    margin-right: -28px;
    padding: 0 28px;
  }

  .demo-tabs::-webkit-scrollbar {
    display: none;
  }

  .demo-tabs {
    margin-top: -8px;
  }

  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    padding: 28px 22px 26px;
  }

  .biz-options-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }
}
/* ==========================================================================
   Site chat widget
   Floating assistant that answers questions about the product. Styled to
   echo the WhatsApp mockups above (--wa-* tokens, same bubble shapes) so it
   reads as the same product rather than a bolted-on third-party chat.
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Invitation bubble above the launcher; shown once per session by
   script.js a few seconds after load. */
.chat-teaser {
  position: fixed;
  right: 24px;
  bottom: 88px;
  z-index: 59;
  width: min(300px, calc(100vw - 48px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 24px 50px -20px rgba(20, 40, 30, 0.4), 0 1px 2px rgba(20, 24, 21, 0.06);
  will-change: transform;
}

.chat-teaser[hidden] {
  display: none;
}

.chat-teaser-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 40px 14px 14px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
  border-radius: inherit;
}

.chat-teaser-body:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.chat-teaser-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(155deg, var(--accent-light), var(--accent-deep));
  color: #fff;
  display: grid;
  place-items: center;
}

.chat-teaser-avatar svg {
  width: 16px;
  height: 16px;
}

.chat-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chat-teaser-text strong {
  font-size: 14px;
  line-height: 1.35;
}

.chat-teaser-text span {
  font-size: 13px;
  color: var(--ink-muted);
}

.chat-teaser-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.chat-teaser-close svg {
  width: 12px;
  height: 12px;
}

.chat-teaser-close:hover {
  color: var(--ink);
}

.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 16px;
  border: none;
  border-radius: 999px;
  background: var(--accent-hover);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(22, 62, 43, 0.28);
  transition: transform 0.18s ease, background 0.18s ease;
}

.chat-launcher:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
}

.chat-launcher:focus-visible {
  outline: 3px solid var(--accent-light);
  outline-offset: 3px;
}

.chat-launcher-icon {
  display: flex;
  width: 21px;
  height: 21px;
}

.chat-launcher-icon svg {
  width: 100%;
  height: 100%;
}

.chat-launcher-close,
.chat-launcher.is-open .chat-launcher-open {
  display: none;
}

.chat-launcher.is-open .chat-launcher-close {
  display: flex;
}

.chat-launcher.is-open .chat-launcher-label {
  display: none;
}

.chat-launcher.is-open {
  padding: 15px;
}

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-height: min(620px, calc(100vh - 130px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(20, 24, 21, 0.22);
  overflow: hidden;
  animation: chat-in 0.22s ease;
}

/* Required, not optional: an author `display` rule outranks the browser's
   built-in [hidden] { display: none }, so without this the panel stays on
   screen no matter what script.js sets .hidden to — it renders open on page
   load and the close button appears dead. Same guard as .modal-overlay. */
.chat-panel[hidden] {
  display: none;
}

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

.chat-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 14px 14px 16px;
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.chat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.chat-avatar svg {
  width: 20px;
  height: 20px;
}

.chat-head-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.chat-head-text strong {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
}

.chat-status {
  font-size: 0.78rem;
  opacity: 0.82;
}

.chat-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.chat-close svg {
  width: 17px;
  height: 17px;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.chat-log {
  /* auto basis, not 0 — the panel sizes to its content up to max-height, so
     a two-message conversation gets a short panel instead of a tall one with
     an empty expanse above the input. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px;
  background: var(--wa-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-msg {
  max-width: 84%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--wa-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: chat-in 0.18s ease;
}

.chat-msg-bot {
  align-self: flex-start;
  background: var(--wa-in);
  border-top-left-radius: 3px;
}

.chat-msg-user {
  align-self: flex-end;
  background: var(--wa-out);
  border-top-right-radius: 3px;
}

/* System lines (failures, notices). Centred and quiet, the way a messenger
   shows a status line — they come from the page, not from the assistant, so
   they deliberately don't wear a message bubble. */
.chat-note {
  align-self: center;
  max-width: 92%;
  margin: 2px 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(20, 24, 21, 0.06);
  color: var(--ink-dim);
  font-size: 0.79rem;
  line-height: 1.45;
  text-align: center;
}

/* Openers under the greeting. Left-aligned with the assistant's bubbles so
   they read as its suggestions rather than page chrome. */
.chat-quick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
}

.chat-quick-btn {
  max-width: 92%;
  padding: 8px 13px;
  border: 1px solid var(--accent-light);
  border-radius: 14px;
  border-top-left-radius: 4px;
  background: var(--surface);
  color: var(--accent-hover);
  font-family: var(--font-body);
  font-size: 0.83rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-quick-btn:hover {
  background: var(--accent-tint);
}

.chat-quick-btn:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px;
  background: var(--wa-in);
  border-radius: 12px;
  border-top-left-radius: 3px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  animation: chat-dot 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) {
  animation-delay: 0.18s;
}

.chat-typing span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes chat-dot {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.chat-form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
}

.chat-form input:focus {
  outline: none;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.chat-send {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent-hover);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.chat-send svg {
  width: 19px;
  height: 19px;
}

.chat-send:hover:not(:disabled) {
  background: var(--accent-deep);
}

.chat-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .chat-launcher {
    right: 16px;
    bottom: 16px;
  }

  .chat-teaser {
    right: 16px;
    bottom: 84px;
  }

  .chat-launcher-label {
    display: none;
  }

  .chat-launcher {
    padding: 15px;
  }

  .chat-panel {
    right: 8px;
    left: 8px;
    bottom: 78px;
    width: auto;
    /* Grow upward from the launcher and stop short of the fixed 72px nav,
       rather than pinning `top` and fighting it. Capping the height is what
       keeps the panel's own header clear of the nav on short screens. */
    max-height: min(68vh, calc(100vh - 168px));
  }

  .chat-msg {
    max-width: 88%;
  }
}