/* ============================================================
   دوباره — Landing page stylesheet
   RTL / Persian · Primary #87009B · Vazirmatn (self-hosted)
   ============================================================ */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("../fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --purple: #87009B;
  --purple-deep: #6E0080;
  --purple-soft: #F3E8F6;
  --bg-alt: #FAF6FC;
  --ink: #221A28;
  --muted: #6C6374;
  --line: #ECE6F0;
  --radius-card: 16px;
  --radius-btn: 14px;
  --radius-box: 20px;
  --shadow-card: 0 2px 10px rgba(34, 26, 40, 0.05);
  --shadow-card-hover: 0 14px 30px rgba(34, 26, 40, 0.10);
  --shadow-mock: 0 18px 50px rgba(34, 26, 40, 0.10);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Clears the sticky header so a nav link never lands underneath it. */
  scroll-padding-top: 84px;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink);
  background: #fff;
  text-rendering: optimizeLegibility;
  /* No overflow-x here. It made body its own scroll container, which stopped
     the sticky header from ever sticking. The artwork that spills past the
     viewport is clipped at its own section instead — see .section below. */
}

::selection { background: var(--purple-soft); color: var(--purple-deep); }

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

/* Form controls do not inherit the page font — they fall back to the
   browser's UI font, which has no Persian and renders as Tahoma. Every
   control has to be told, so a new one is never left in the wrong face. */
button, input, select, textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 3px solid rgba(135, 0, 155, 0.45);
  outline-offset: 3px;
  border-radius: 6px;
}

.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;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding-block: 14px 12px;
}

.header-secondary {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-inline-start: auto;
}

/* On desktop the wrapper dissolves so the nav can sit beside the logo and
   the two buttons can be pushed to the far side. It stays a real row on
   phones, where it is the header's second line. */
@media (min-width: 861px) {
  .header-secondary { display: contents; }
  .site-nav { order: 2; }
  .panel-login { order: 4; margin-inline-start: auto; }
  .site-header .header-cta { order: 5; }
}

/* Scoped to the header so the mobile rule that widens .btn-primary across
   the page does not swallow it. */
.site-header .header-cta {
  order: 5;
  width: auto;
  max-width: none;
  padding: 9px 20px;
  font-size: 0.88rem;
  white-space: nowrap;
  box-shadow: none;
}

.site-header .header-cta:hover { transform: none; box-shadow: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav a:hover { color: var(--purple); }

/* An existing customer should not have to take the buy path to reach their
   own panel — it costs support calls and muddies the conversion numbers. */
.panel-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.panel-login svg { width: 16px; height: 16px; color: var(--muted); transition: color 0.2s ease; }

.panel-login:hover {
  background: var(--purple-soft);
  border-color: #E3D2E9;
  color: var(--purple-deep);
}

.panel-login:hover svg { color: var(--purple); }

/* Two rows on phones: the action on the first line beside the logo, the
   sections and the panel link on the second. */
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; gap: 12px; padding-block: 12px 0; }

  .site-header .header-cta {
    order: 2;
    margin-inline-start: auto;
    padding: 8px 17px;
    font-size: 0.85rem;
  }

  .header-secondary {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }

  .site-nav {
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { font-size: 0.86rem; white-space: nowrap; }

  /* The header is taller with the second row, so anchors need more clearance. */
  html { scroll-padding-top: 126px; }
}

@media (max-width: 420px) {
  .panel-login { padding: 6px 12px; font-size: 0.83rem; }
  .panel-login svg { display: none; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img { width: 40px; height: 40px; display: block; }

.brand-name {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--purple);
}

/* ---------- Layout ---------- */

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
}

.container.narrow { max-width: 860px; }
.center { text-align: center; }

/* clip, not hidden: it contains the hero glow and the reveal transforms
   without turning the section into a scroll container. */
.section { padding-block: 80px; overflow-x: clip; }
.section.alt { background: var(--bg-alt); }

/* ---------- Typography ---------- */

h1, h2, h3 { margin: 0; line-height: 1.45; font-weight: 800; }

h1 {
  font-size: clamp(1.75rem, 1.05rem + 3.1vw, 3.25rem);
  line-height: 1.4;
}

.section-title {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  text-align: center;
  margin-bottom: 48px;
}

.section-title.start { text-align: start; margin-bottom: 0; }

.section-sub {
  text-align: center;
  color: var(--muted);
  max-width: 640px;
  margin: -28px auto 44px;
}

h3 { font-size: 1.2rem; font-weight: 700; }

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 2.1;
  margin: 20px 0 32px;
}

.title-line {
  display: block;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--purple);
  margin: -26px auto 26px;
  opacity: 0.85;
}

.intro-text {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 2.2;
  max-width: 800px;
  margin-inline: auto;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary {
  background: var(--purple);
  color: #fff;
  font-size: 1rem;
  padding: 13px 36px;
  box-shadow: 0 4px 18px rgba(135, 0, 155, 0.25);
}

.btn-primary:hover {
  background: var(--purple-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(135, 0, 155, 0.35);
}

.btn-primary:active { transform: translateY(0); }

.btn-lg { padding: 16px 46px; font-size: 1.06rem; }

/* ---------- Grids & cards ---------- */

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

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: #E3D2E9;
}

.card h3 { font-size: 1.08rem; margin: 18px 0 8px; }

.card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 2;
  color: var(--muted);
}

.card-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--purple-soft);
  color: var(--purple);
  transition: background 0.3s ease, color 0.3s ease;
}

.card-icon svg { width: 24px; height: 24px; }

.card:hover .card-icon { background: var(--purple); color: #fff; }


/* Expandable feature cards */
.card.feat { padding: 0; }

/* Closed cards share one height, set by main.js from the tallest of them and
   recomputed on resize. It lives on the button rather than the card so an
   opened card can grow without dragging its neighbours taller with it. */
.feat-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 28px 24px;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}


.feat-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 8px;
}

.feat-title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
}

.feat-teaser {
  display: block;
  font-size: 0.92rem;
  line-height: 2;
  color: var(--muted);
}

.features-grid { align-items: start; }

.card.feat.open .acc-icon::after {
  transform: translate(50%, -50%) rotate(0deg);
  opacity: 0;
}

.card.feat.open { border-color: rgba(135, 0, 155, 0.3); }
.card.feat.open .card-icon { background: var(--purple); color: #fff; }

.feat-panel { padding: 0 24px; }

.js .feat-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0.35s;
}

.js .card.feat.open .feat-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* One child collapses, so an answer needing two paragraphs wraps in
   .feat-body — same trick as the FAQ panels. */
.feat-panel > p,
.feat-panel > .feat-body {
  margin: 0;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 2.1;
  color: var(--ink);
}

.card.feat.open .feat-panel > p,
.card.feat.open .feat-panel > .feat-body {
  padding: 16px 0 26px;
  border-top: 1px solid var(--line);
}

.js .feat-panel > p,
.js .feat-panel > .feat-body { transition: padding 0.35s ease; }

.feat-body p { margin: 0 0 10px; }
.feat-body p:last-child { margin-bottom: 0; }

/* Not built yet. Still clickable — the click is how we hear the demand. */
.card.feat-soon { background: #FCFAFD; }

.card.feat-soon .card-icon {
  background: var(--line);
  color: var(--muted);
}

.card.feat-soon:hover .card-icon,
.card.feat-soon.open .card-icon {
  background: var(--purple-soft);
  color: var(--purple);
}

/* Its own line under the explanation, not trailing the last sentence. */
.feat-soon-badge {
  display: block;
  width: fit-content;
  margin-top: 10px;
  padding: 2px 11px;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--purple);
  font-size: 0.76rem;
  font-weight: 700;
}

/* ---------- Hero ---------- */

.hero { padding-top: 72px; }

.type-line {
  min-height: 2.4em;
  margin: 0 0 26px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--purple);
  line-height: 2.2;
}

.type-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-inline-start: 3px;
  vertical-align: -0.18em;
  background: var(--purple);
  animation: caret-blink 1.05s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: 56px;
  align-items: center;
}

.hero-copy .btn { margin-top: 4px; }

/* Panel and phone sit on one tinted stage. They are two halves of the same
   thing — the campaign and what arrives — so grouping them says that
   without overlapping one onto the other. */
.hero-visual {
  position: relative;
  padding: 26px 18px;
}

.mockup-glow {
  position: absolute;
  pointer-events: none;
  inset: -8%;
  background: radial-gradient(closest-side, rgba(135, 0, 155, 0.13), transparent 72%);
  filter: blur(8px);
  z-index: 0;
}

/* ---------- Panel mockup (hero) ---------- */

.panel-mock {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  box-shadow: var(--shadow-mock);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #FCFBFD;
}

.dots { display: inline-flex; gap: 6px; }

.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E4DEE9;
}

.panel-title { font-size: 0.82rem; font-weight: 600; color: var(--muted); }

.panel-body {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  background: var(--purple-soft);
  color: var(--purple-deep);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
}

/* Location is chosen from a list in the real panel, so it reads as a select. */
.chip-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 13px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
}

.chip-select svg {
  width: 13px;
  height: 13px;
  color: var(--muted);
  flex: none;
}

.textbox {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FBFAFC;
  padding: 13px 15px;
}

.textbox p {
  margin: 0 0 10px;
  font-size: 0.83rem;
  line-height: 1.95;
  color: var(--ink);
}

/* Live campaign preview — the panel cycles through real example campaigns.
   The text height is reserved so swapping a scenario never shifts the layout. */
.mock-text { min-height: 5.85em; }

.panel-mock .chips,
.schedule-pill .schedule-text {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.panel-mock.swapping .chips {
  opacity: 0;
  transform: translateY(-5px);
}

.panel-mock.swapping .schedule-pill .schedule-text { opacity: 0; }

/* ---------- Coverage map ---------- */
.coverage-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 56px;
}

.coverage-copy .lead { margin-bottom: 26px; }

.coverage-stats {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
}

.coverage-stats li { display: flex; flex-direction: column; }

.coverage-stats b {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--purple);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.coverage-stats span { font-size: 0.85rem; color: var(--muted); }

.iran-map { width: 100%; height: auto; display: block; overflow: visible; margin-top: -18px; }

/* ---------- FAQ page ---------- */
.faq-hero { padding-block: 56px 8px; }
.faq-hero .section-title { margin-bottom: 14px; }
.faq-hero .section-sub { margin: 0 auto 30px; }

/* The counter page has no cards between its heading and its tool, so it
   does not need two sections' worth of padding in between. */
/* Beats .faq-hero .section-sub, which is the more specific of the two. */
.faq-hero .counter-lead { margin-bottom: 0; }
.counter-page { padding-block: 6px 72px; }
.counter-page .faq-tool { margin-top: 0; }
.counter-note { margin-top: 40px; }
.counter-note p { color: var(--muted); line-height: 2.1; }

.faq-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto 34px;
}

.faq-search svg {
  position: absolute;
  inset-inline-start: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.faq-search input {
  width: 100%;
  /* Logical, so the room for the icon stays on the start side in RTL. */
  padding-block: 14px;
  padding-inline: 46px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
}

.faq-search input::placeholder { color: var(--muted); }

.faq-search input:focus {
  outline: none;
  border-color: #E3D2E9;
  box-shadow: 0 0 0 4px rgba(135, 0, 155, 0.08);
}

.faq-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 980px) {
  .faq-cats { grid-template-columns: repeat(2, 1fr); }
}

.faq-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 22px 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #fff;
  font-family: inherit;
  text-align: center;
  /* One of these cards is a link now, and links come underlined. */
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.faq-cat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: #E3D2E9;
}

.faq-cat[aria-pressed="true"] {
  background: var(--purple-soft);
  border-color: rgba(135, 0, 155, 0.3);
}

.faq-cat-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--purple-soft);
  color: var(--purple);
}

.faq-cat[aria-pressed="true"] .faq-cat-icon { background: var(--purple); color: #fff; }
.faq-cat-icon svg { width: 23px; height: 23px; }

.faq-cat-title { font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.faq-cat-blurb { font-size: 0.86rem; line-height: 1.9; color: var(--muted); }

.faq-cat-count {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--purple);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 11px;
  margin-top: 2px;
}

.faq-cat-tool { border-style: dashed; }
.faq-cat-open { color: var(--purple); background: var(--purple-soft); border-color: transparent; }

/* ---------- Modal ---------- */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  /* "safe" so a dialog taller than the viewport is pinned to the top and
     scrolled to, instead of being centred with its head cut off above the
     scroll origin — which is unreachable. The business picker grows with the
     number of businesses a phone owns, so this is reachable in practice. */
  place-items: safe center;
  overflow-y: auto;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 26, 40, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal-card {
  position: relative;
  width: min(430px, 100%);
  padding: 26px 24px 22px;
  border-radius: var(--radius-box);
  background: #fff;
  box-shadow: 0 24px 60px rgba(34, 26, 40, 0.28);
}

.modal-close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--bg-alt);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-close:hover { background: var(--purple-soft); color: var(--purple); }
.modal-close svg { width: 16px; height: 16px; }

.modal-title { font-size: 1.16rem; margin: 0 6px 6px 0; line-height: 1.7; }
.modal-sub { margin: 0 0 20px; font-size: 0.88rem; color: var(--muted); }

/* One question, two doors. A first-time visitor sent to a login screen they
   cannot pass simply leaves. */
.route-actions { display: grid; gap: 10px; }

.route-btn {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.route-btn b { display: block; font-size: 0.98rem; color: var(--ink); }
.route-btn span { display: block; margin-top: 2px; font-size: 0.82rem; color: var(--muted); }

.route-btn:hover {
  background: var(--purple-soft);
  border-color: #E3D2E9;
  transform: translateY(-2px);
}

.route-btn-main { border-color: rgba(135, 0, 155, 0.3); background: #FDFBFE; }
.route-btn-main b { color: var(--purple-deep); }

.route-note { margin: 14px 0 0; font-size: 0.76rem; color: var(--muted); text-align: center; }

/* ---------- Onboarding funnel ---------- */

/* The card is a fixed stage: steps swap inside it without the dialog jumping
   in height, which would otherwise throw the visitor's eye on every step. */
.funnel-card { width: min(420px, 100%); }
.funnel-step[hidden] { display: none; }

.funnel-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.funnel-progress li {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #E4DBE9;
  transition: width 0.25s ease, background 0.25s ease;
}

.funnel-progress li.on { width: 22px; background: var(--purple); }
.funnel-progress li.done { background: var(--purple-soft); }

.funnel-form { display: grid; gap: 14px; }

.funnel-field { display: grid; gap: 7px; }
.funnel-field > span { font-size: 0.82rem; color: var(--muted); }
.funnel-field[hidden] { display: none; }

.funnel-field input {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.funnel-field input::placeholder { color: #A79EB0; }

.funnel-field input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(135, 0, 155, 0.12);
}

/* The code field is read digit by digit when someone checks it against the
   SMS, so it gets room to breathe. */
.funnel-step[data-step="code"] .funnel-field input {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  padding-inline-start: 0.5em;
}

.funnel-submit { width: 100%; justify-content: center; gap: 9px; }

/* A working button says so, rather than going dim and looking broken. The
   label swaps to the verb and a ring spins beside it; the button keeps its
   full colour because it is busy, not disabled. */
.funnel-submit[aria-busy="true"] {
  pointer-events: none;
  background: var(--purple-deep);
}

.funnel-submit[aria-busy="true"]::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  border-radius: 999px;
  animation: funnel-spin 0.7s linear infinite;
}

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

/* Reduced motion still needs the state to be visible, so the ring stays and
   only the rotation goes. */
@media (prefers-reduced-motion: reduce) {
  .funnel-submit[aria-busy="true"]::before {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.32);
  }
}

.funnel-error {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #B3261E;
}

.funnel-error[hidden] { display: none; }

.funnel-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--purple);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.funnel-link[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.funnel-phone-echo { font-weight: 700; unicode-bidi: isolate; }

.funnel-picker { display: grid; gap: 8px; }
.funnel-picker[hidden] { display: none; }

.funnel-picker label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.funnel-picker label:has(input:checked) {
  background: var(--purple-soft);
  border-color: rgba(135, 0, 155, 0.35);
}

.funnel-picker input { accent-color: var(--purple); margin: 0; }
.funnel-picker b { font-size: 0.94rem; font-weight: 600; }
.funnel-picker .funnel-picker-new b { color: var(--purple-deep); }

.funnel-done { text-align: center; }

.funnel-check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 4px auto 16px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
}

.funnel-check svg { width: 26px; height: 26px; }
.funnel-done .modal-title { margin-inline: 0; }

/* ---------- Calculator ---------- */
.faq-tool[hidden] { display: none; }

.faq-tool {
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-box);
  background: #fff;
  box-shadow: var(--shadow-card);
}

.faq-tool-sub { margin: 0 0 22px; font-size: 0.92rem; color: var(--muted); }
.calc-label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.calc-text,
.calc-qty {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #FBFAFC;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 2;
  color: var(--ink);
  resize: vertical;
}

.calc-qty { font-variant-numeric: tabular-nums; text-align: start; }

.calc-text:focus,
.calc-qty:focus {
  outline: none;
  border-color: #E3D2E9;
  box-shadow: 0 0 0 4px rgba(135, 0, 155, 0.08);
}

.calc-meter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: 0.83rem;
  color: var(--muted);
}

.calc-meter b { color: var(--purple); font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-left { margin-inline-start: auto; }
.calc-left.is-close { color: var(--purple-deep); font-weight: 600; }

.calc-hint {
  margin: 10px 0 22px;
  font-size: 0.79rem;
  line-height: 1.95;
  color: var(--muted);
}

.calc-tabs { display: flex; gap: 8px; margin-bottom: 20px; }

.calc-tab {
  flex: 1 1 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.calc-tab.is-on {
  background: var(--purple-soft);
  border-color: rgba(135, 0, 155, 0.3);
  color: var(--purple-deep);
}

.calc-note {
  margin: 9px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.6em;
}

.calc-note.is-warn { color: var(--purple-deep); font-weight: 600; }

.calc-out {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--purple-soft);
}

.calc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.87rem;
  color: #5A2062;
  padding: 3px 0;
}

/* An author display beats the browser's [hidden], so say it again here. */
.calc-row[hidden] { display: none; }

.calc-row b { font-weight: 700; color: #3D0A46; font-variant-numeric: tabular-nums; }

.calc-total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(135, 0, 155, 0.18);
  font-size: 0.98rem;
}

.calc-total b { font-size: 1.16rem; color: var(--purple); }

.calc-tiers { margin-top: 18px; }

.calc-tiers-title {
  display: block;
  margin-bottom: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink);
}

.calc-tiers ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calc-tiers li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  text-align: center;
}

.calc-tiers li span { font-size: 0.76rem; color: var(--muted); }

.calc-tiers li b {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
}

.calc-tiers li:first-child b { font-size: 0.82rem; font-weight: 600; color: var(--muted); }

@media (max-width: 620px) {
  .calc-tiers ul { grid-template-columns: repeat(2, 1fr); }
}

.calc-foot {
  margin: 14px 0 0;
  font-size: 0.78rem;
  line-height: 1.95;
  color: var(--muted);
}

.calc-cta { width: 100%; margin-top: 16px; padding: 12px 24px; }

@media (max-width: 520px) {
  .faq-tool { padding: 22px 18px 20px; }
  .calc-tabs { flex-direction: column; }
}

.faq-page { padding-block: 44px 80px; }

.faq-group + .faq-group { margin-top: 44px; }

.faq-group-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 18px;
  padding-inline-start: 13px;
  border-inline-start: 4px solid var(--purple);
  line-height: 1.6;
}

.faq-group[hidden],
.acc-item[hidden] { display: none !important; }

.faq-empty { text-align: center; color: var(--muted); padding: 40px 0; }

@media (max-width: 720px) {
  .faq-cats { grid-template-columns: 1fr; gap: 12px; }

  .faq-cat {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    text-align: start;
    padding: 16px 16px;
  }

  .faq-cat-icon { grid-row: 1 / 3; }
  .faq-cat-blurb { display: none; }
  .faq-cat-count { justify-self: start; margin-top: 4px; }
}

.faq-more { margin: 26px 0 0; text-align: center; }

.faq-more a {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.faq-more a:hover {
  background: var(--purple-soft);
  border-color: #E3D2E9;
  color: var(--purple-deep);
}

.iran-map .pr {
  fill: #F6EDF9;
  stroke: #E4D2EA;
  stroke-width: 1;
  stroke-linejoin: round;
}

.iran-map .ct {
  fill: var(--purple);
  opacity: 0.55;
}

/* The dots light up in a sweep instead of all at once — 14 delay buckets
   rather than an inline style on each of the 747. */
.js .iran-map .ct {
  opacity: 0;
  animation: dot-in 0.5s ease forwards;
}

@keyframes dot-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 0.55; transform: scale(1); }
}

.iran-map .ct { transform-box: fill-box; transform-origin: center; }

.js .iran-map .s0  { animation-delay: 0.05s; }
.js .iran-map .s1  { animation-delay: 0.11s; }
.js .iran-map .s2  { animation-delay: 0.17s; }
.js .iran-map .s3  { animation-delay: 0.23s; }
.js .iran-map .s4  { animation-delay: 0.29s; }
.js .iran-map .s5  { animation-delay: 0.35s; }
.js .iran-map .s6  { animation-delay: 0.41s; }
.js .iran-map .s7  { animation-delay: 0.47s; }
.js .iran-map .s8  { animation-delay: 0.53s; }
.js .iran-map .s9  { animation-delay: 0.59s; }
.js .iran-map .s10 { animation-delay: 0.65s; }
.js .iran-map .s11 { animation-delay: 0.71s; }
.js .iran-map .s12 { animation-delay: 0.77s; }
.js .iran-map .s13 { animation-delay: 0.83s; }

@media (prefers-reduced-motion: reduce) {
  .js .iran-map .ct { opacity: 0.55; animation: none; }
}

@media (max-width: 900px) {
  .coverage-grid { grid-template-columns: 1fr; gap: 26px; }

  /* The map leads, and what it proves is centred underneath it. */
  .coverage-visual { order: -1; }
  .coverage-copy { text-align: center; }
  .coverage-stats { justify-content: center; gap: 14px 30px; }
  .coverage-stats li { align-items: center; }
  .coverage-stats b { font-size: 1.3rem; }
}

/* ---------- Cards on phones ---------- */
@media (max-width: 720px) {
  /* Icon opposite the title rather than stacked above it. Stacked, each card
     was three short lines tall with a column of empty space beside them. */
  .benefits-grid .card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 20px 18px;
  }

  .benefits-grid .card-icon { grid-column: 2; grid-row: 1; }
  .benefits-grid .card h3 { grid-column: 1; grid-row: 1; margin: 0; }
  .benefits-grid .card p { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }

  .feat-btn {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 14px;
    padding: 20px 18px;
  }

  .feat-btn .card-icon { grid-column: 2; grid-row: 1; }
  .feat-title-row { grid-column: 1; grid-row: 1; margin: 0; justify-content: flex-start; gap: 10px; }
  .feat-teaser { grid-column: 1 / -1; grid-row: 2; margin-top: 9px; }
  .feat-panel { grid-column: 1 / -1; }
}

.mock-text-body {
  display: block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.panel-mock.swapping .mock-text-body {
  opacity: 0;
  transform: translateY(-5px);
}


.ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--purple);
  background: #fff;
  border: 1px solid rgba(135, 0, 155, 0.28);
  border-radius: 999px;
  padding: 5px 11px;
}

.ai-chip svg { width: 14px; height: 14px; }

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.schedule-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
}

.schedule-pill svg { width: 15px; height: 15px; }

/* Tinted like the filter chips, not solid like the real buttons. It lives
   inside a picture of the panel; dressing it as an action invites a click
   that does nothing. */
.mock-btn {
  display: inline-block;
  background: var(--purple-soft);
  color: var(--purple-deep);
  font-size: 0.84rem;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 11px;
}

.mock-btn.small {
  font-size: 0.72rem;
  padding: 6px 15px;
  border-radius: 9px;
  box-shadow: none;
}

/* Floating cards */

.float-card {
  position: absolute;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(34, 26, 40, 0.13);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: floaty 6s ease-in-out infinite;
}

.float-stat {
  top: 6px;
  inset-inline-end: -8px;
  flex-direction: column;
  gap: 0;
  text-align: center;
}

.stat-num { color: var(--purple); font-weight: 800; font-size: 1.25rem; line-height: 1.3; }
.stat-label { font-size: 0.72rem; color: var(--muted); }

/* The panel shows the campaign being built; the phone shows what actually
   arrives. It carries the same message as the panel, so the two read as one
   before-and-after rather than two separate pictures. */
.float-sms {
  bottom: -6px;
  inset-inline-start: -6px;
  font-size: 0.78rem;
  font-weight: 600;
  animation-delay: 3s;
}

.float-sms svg { width: 17px; height: 17px; color: var(--purple); flex: none; }

/* Only the top of the phone: status bar, clock, and the message landing on
   the lock screen. It sits above the map and fades into it, so the message
   and the reach read as one picture. */
.lockscreen {
  position: relative;
  z-index: 3;
  width: min(320px, 100%);
  margin: 0 auto -56px;
  padding: 10px 13px 46px;
  border-radius: 24px 24px 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 97%);
  background: linear-gradient(170deg, #8A2E9C 0%, #A550B6 48%, #C888D6 100%);
}

.lock-status {
  display: flex;
  align-items: center;
  /* Start side, so the icons sit where a real status bar puts them. */
  justify-content: flex-start;
  gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
}

.lock-signal { display: inline-flex; align-items: flex-end; gap: 1.5px; }

.lock-signal i {
  width: 2.5px;
  border-radius: 1px;
  background: currentColor;
}

.lock-signal i:nth-child(1) { height: 4px; }
.lock-signal i:nth-child(2) { height: 6px; }
.lock-signal i:nth-child(3) { height: 8px; }
.lock-signal i:nth-child(4) { height: 10px; }

.lock-wifi { width: 12px; height: 12px; }

.lock-battery {
  position: relative;
  width: 18px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 1.5px;
}

.lock-battery::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: -3px;
  transform: translateY(-50%);
  width: 1.5px;
  height: 4px;
  border-radius: 0 1px 1px 0;
  background: currentColor;
}

.lock-battery i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
}

/* Clock sits opposite the status icons, the way a lock screen puts them. */
.lock-clock {
  text-align: end;
  color: #fff;
  margin-bottom: 12px;
}

.lock-day {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 0;
}

.lock-time {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.lock-notif {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px 11px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(34, 26, 40, 0.2);
}

.lock-notif-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--purple);
  color: #fff;
}

.lock-notif-icon svg { width: 14px; height: 14px; }

.lock-notif-body { min-width: 0; flex: 1 1 auto; }

.lock-notif-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.lock-notif-app { font-size: 0.7rem; font-weight: 700; color: var(--ink); }
.lock-notif-when { font-size: 0.63rem; color: var(--muted); }

.lock-notif-text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.8;
  color: var(--ink-2, #5A4560);
}

.lock-notif-text,
.lock-clock { transition: opacity 0.4s ease, transform 0.4s ease; }

.lockscreen.swapping .lock-notif-text,
.lockscreen.swapping .lock-clock {
  opacity: 0;
  transform: translateY(-4px);
}


@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- How it works ---------- */

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  text-align: center;
  margin-top: 8px;
}

.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  right: 12.5%;
  left: 12.5%;
  border-top: 2px dashed #E2D4E8;
}

.step { position: relative; padding: 0 8px; }

.step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  box-shadow: 0 0 0 10px #fff, 0 6px 18px rgba(135, 0, 155, 0.25);
}

.step h3 { font-size: 1.05rem; margin: 20px 0 8px; }

.step p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 2;
  color: var(--muted);
}

/* ---------- Demo / panel showcase ---------- */

.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 64px;
  align-items: center;
}

.browser-mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-mock);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: #FCFBFD;
}

.url-pill {
  font-size: 0.74rem;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 16px;
  direction: ltr;
}

.browser-body {
  display: grid;
  grid-template-columns: 136px 1fr;
}

.mock-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 10px;
  border-inline-end: 1px solid var(--line);
  background: #FCFBFD;
}

.side-item {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 9px;
}

.side-item.active {
  background: var(--purple-soft);
  color: var(--purple-deep);
  font-weight: 700;
}

.mock-main { padding: 18px 16px; }

.mock-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mock-h { font-size: 0.86rem; font-weight: 700; }

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 14px;
  margin-bottom: 9px;
}

.row-title { font-size: 0.79rem; font-weight: 600; }
.row-meta { font-size: 0.72rem; color: var(--muted); }

.status {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 11px;
}

.status.ok { background: #E9F7EE; color: #1C7C46; }
.status.pending { background: var(--purple-soft); color: var(--purple-deep); }
.status.draft { background: #F1F0F3; color: var(--muted); }

/* ---------- Pricing ---------- */

.price-box {
  background: #fff;
  border: 1px solid rgba(135, 0, 155, 0.22);
  border-radius: var(--radius-box);
  box-shadow: 0 10px 44px rgba(135, 0, 155, 0.10);
  padding: 48px 36px;
  margin-top: -8px;
}

.price-line {
  font-size: 1.15rem;
  margin: 0 0 26px;
  color: var(--ink);
}

.price-num {
  display: block;
  color: var(--purple);
  font-size: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  font-weight: 800;
  line-height: 1.5;
}

.price-points {
  list-style: none;
  margin: 0 auto 34px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 13px;
  text-align: start;
}

.price-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  color: var(--ink);
}

.price-points svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--purple);
  margin-top: 6px;
}

.price-box .btn { display: inline-flex; }

/* ---------- Use cases ---------- */

.usecase-grid { gap: 18px; }

.usecase {
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 17px 19px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.usecase:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: #E3D2E9;
}

.usecase svg {
  width: 23px;
  height: 23px;
  flex: none;
  color: var(--purple);
}

/* ---------- Customers ---------- */

/* The logos ride a marquee rather than a grid: the list is duplicated once
   and the track slides exactly one copy, so the loop has no seam. Cell width
   comes from how many should be on screen, so 3 fit on a phone and 5 on a
   desktop without measuring anything in script. */
.logo-marquee {
  --per-view: 3;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to left, transparent, #000 7%, #000 93%, transparent);
}

.logo-track {
  display: flex;
  gap: 0;
  width: calc(100% * var(--count) / var(--per-view));
  animation: logo-scroll 44s linear infinite;
}

.logo-marquee:hover .logo-track { animation-play-state: paused; }

/* Positive, not negative: the track is laid out right-to-left, so the next
   logo waits on the left and the track has to travel right to reach it. */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

@media (min-width: 861px) {
  .logo-marquee { --per-view: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; width: auto; }
  .logo-marquee { overflow-x: auto; }
}

.logo-cell {
  /* The margin is taken out of the basis, so each item still occupies
     exactly one slot of the track and the loop stays seamless. */
  flex: 0 0 calc(100% / var(--count) - 12px);
  margin-inline: 6px;
  height: 104px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.logo-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.logo-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: #E3D2E9;
}

.logo-cell:hover img {
  filter: none;
  opacity: 1;
}

/* ---------- FAQ / accordion ---------- */

.accordion { margin-top: -6px; }

.acc-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.acc-item.open {
  border-color: rgba(135, 0, 155, 0.3);
  background: #FDFBFE;
  box-shadow: 0 6px 22px rgba(135, 0, 155, 0.07);
}

.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  text-align: start;
  padding: 19px 22px;
  cursor: pointer;
}

.acc-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}

.acc-icon::before,
.acc-icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: 14px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--purple);
  transform: translate(50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.acc-icon::after { transform: translate(50%, -50%) rotate(90deg); }

.acc-item.open .acc-icon::after {
  transform: translate(50%, -50%) rotate(0deg);
  opacity: 0;
}

.acc-panel {
  padding: 0 22px;
}

.js .acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.35s ease, visibility 0.35s;
}

.js .acc-item.open .acc-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

/* One child collapses; .acc-body is the wrapper for answers that need more
   than a paragraph, so the grid still measures a single row. */
.acc-panel > p,
.acc-panel > .acc-body {
  margin: 0;
  overflow: hidden;
  font-size: 0.93rem;
  line-height: 2.1;
  color: var(--muted);
}

.acc-item.open .acc-panel > p,
.acc-item.open .acc-panel > .acc-body { padding-bottom: 20px; }

.js .acc-panel > p,
.js .acc-panel > .acc-body { transition: padding 0.35s ease; }

.acc-body p { margin: 0 0 10px; }
.acc-body p:last-child { margin-bottom: 0; }

.acc-list {
  margin: 10px 0 0;
  padding-inline-start: 20px;
  list-style: none;
}

.acc-list li {
  position: relative;
  margin-bottom: 8px;
  padding-inline-start: 2px;
}

.acc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: -16px;
  top: 0.92em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  opacity: 0.55;
}

.acc-list li:last-child { margin-bottom: 0; }
.acc-list b { color: var(--ink); font-weight: 700; }

/* ---------- Final CTA ---------- */

.cta-final {
  background: linear-gradient(180deg, #FBF7FD 0%, #F5ECF8 100%);
}

.cta-final .section-title { margin-bottom: 0; }

.cta-final .lead { margin: 18px 0 34px; }

.cta-final .btn-lg {
  box-shadow: 0 6px 26px rgba(135, 0, 155, 0.32);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: #BDB5C4;
  font-size: 0.9rem;
  line-height: 2.1;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.15fr auto;
  gap: 56px;
  padding-block: 60px 20px;
}

.site-footer h3 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 16px;
}

.brand-footer { margin-bottom: 14px; }
.brand-footer .brand-name { color: #fff; }

.footer-about p { margin: 0 0 12px; }

.footer-slogan {
  color: #D9A9E2;
  font-weight: 700;
}

.footer-site { margin: 10px 0 0; }

.footer-site a {
  color: #C9A5D2;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 165, 210, 0.4);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-site a:hover { color: #fff; border-color: #fff; }

.footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.footer-contact svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 8px;
  color: #D9A9E2;
}

.footer-contact a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-contact a:hover { color: #fff; }

.enamad {
  display: inline-block;
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  line-height: 0;
}

.enamad img {
  width: 110px;
  height: auto;
}

.enamad .enamad-text { display: none; }

.enamad.no-img img { display: none; }

.enamad.no-img .enamad-text {
  display: inline-block;
  padding: 26px 10px;
  width: 110px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--purple);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-block: 18px;
  font-size: 0.78rem;
  color: #8F8699;
  text-align: center;
}

/* ---------- Scroll reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal-side { transform: translateY(0) translateX(-28px); }

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Stagger inside grids and steps */
.grid .reveal:nth-child(4n + 2), .steps .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid .reveal:nth-child(4n + 3), .steps .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid .reveal:nth-child(4n + 4), .steps .reveal:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Responsive: tablet ---------- */

@media (max-width: 1024px) {
  .section { padding-block: 60px; }
  .container { padding-inline: 20px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .hero-grid, .demo-grid { gap: 40px; }
}

/* ---------- Responsive: mobile ---------- */

@media (max-width: 900px) {
  .hero { padding-top: 56px; }

  .hero-grid, .demo-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-visual, .demo-visual {
    max-width: 500px;
    margin-inline: auto;
    width: 100%;
  }

  .demo-copy { text-align: center; }
  .demo-copy .section-title.start { text-align: center; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-block: 48px 12px;
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding-block: 40px; }
  .container { padding-inline: 16px; }
  .grid-4 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .section-title { margin-bottom: 32px; }
  .section-sub { margin: -16px auto 32px; }

  .btn-primary {
    width: 100%;
    max-width: 340px;
  }

  .hero-visual { padding: 20px 6px; }
  .float-stat { inset-inline-end: 0; }
  .float-sms { inset-inline-start: 0; }

  .browser-body { grid-template-columns: 108px 1fr; }
  .mock-main { padding: 14px 12px; }

  .price-box { padding: 36px 22px; }
  .acc-btn { padding: 16px 18px; font-size: 0.95rem; }
  .acc-panel { padding: 0 18px; }

  .header-inner { min-height: 56px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 1.15rem; }

  .type-line {
    min-height: 4.6em;
    font-size: 0.92rem;
  }

  .logo-grid { gap: 12px; }

  .logo-cell {
    width: calc(50% - 6px);
    height: 84px;
    padding: 10px 14px;
  }
}

@media (max-width: 420px) {
  .browser-body { grid-template-columns: 1fr; }
  .mock-side { display: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal,
  .js .reveal-side {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .float-card { animation: none; }
  .type-caret { animation: none; }

  .btn, .card, .usecase, .logo-cell { transition: none; }
}

/* ---------- Steps as an alternating timeline on phones ---------- */
@media (max-width: 720px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: start;
    margin-top: 0;
  }

  .steps::before {
    display: block;
    top: 14px;
    bottom: 14px;
    right: auto;
    left: 50%;
    border-top: 0;
    border-left: 2px dashed #E2D4E8;
    transform: translateX(-50%);
  }

  .step { position: relative; padding: 0 0 30px; }

  /* Short spur from the circle to the text, so each step is tied to the
     spine rather than floating beside it. */
  .step::after {
    content: "";
    position: absolute;
    top: 20px;
    width: 15px;
    border-top: 2px dashed #E2D4E8;
  }

  .step:nth-child(odd)::after { left: calc(50% + 21px); }
  .step:nth-child(even)::after { left: calc(50% - 36px); }

  .step-num {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    margin: 0;
    font-size: 1.1rem;
    box-shadow: 0 0 0 6px #fff, 0 4px 12px rgba(135, 0, 155, 0.25);
  }

  .step h3 { margin: 0 0 6px; font-size: 1rem; }
  .step h3,
  .step p { width: calc(50% - 34px); }

  .step:nth-child(odd) h3,
  .step:nth-child(odd) p { margin-inline-end: auto; text-align: end; }

  .step:nth-child(even) h3,
  .step:nth-child(even) p { margin-inline-start: auto; text-align: start; }
}