/* ============================================================
   نبض (Nabz) — Landing
   Style: Swiss / Minimalism · Brand: Emerald pulse · RTL Persian
   ============================================================ */

/* ---------- Fonts ----------
   Kahroba → display only (h1/h2, brand, price)
   Pelak FA → UI/body; static weights, so every weight below is a real cut
   (no fake bold). The browser fetches only the weights actually used.
   -------------------------------------------- */
@font-face {
  font-family: "Kahroba";
  src: url("/account-assets/fonts/kahroba/Kahroba-VF[wght,wdth,CNTR].woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pelak";
  src: url("/account-assets/fonts/pelak/PelakFA-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* brand emerald (from logo gradient) */
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  --primary: var(--emerald-600);
  --primary-hover: var(--emerald-700);
  --on-primary: #ffffff;

  /* accents — urgency & strike-through pricing */
  --warn: #f59e0b; /* fills / bars on dark */
  --warn-ink: #b45309; /* icons & text on light — passes 3:1 */
  --danger: #e11d48;

  /* neutrals (slate) */
  --ink: #0f172a;
  --ink-2: #1e293b;
  --slate: #475569;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --surface: #ffffff;
  --bg: #f8fafc;
  --bg-tint: #ecfdf5; /* emerald-50 */

  /* dark band — slate, so emerald actually pops on it */
  --dark: #0f172a;
  --dark-2: #1e293b;

  /* text on the dark band */
  --on-dark: #e2e8f0;
  --on-dark-muted: #94a3b8;
  --on-dark-soft: #cbd5e1;

  /* type */
  --font-ui: "Pelak", "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font-display: "Pelak", "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;

  --radius-sm: 8px;
  --radius: 8px;
  --radius-lg: 8px;

  --shadow-sm:
    0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px -12px rgba(15, 23, 42, 0.22);

  --container: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --t: 220ms;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Never let the page pan sideways on touch devices. `clip` (not `hidden`)
   leaves overflow-y visible, so the body stays out of the scroll chain and
   the sticky nav keeps working; `hidden` is the fallback for iOS < 16. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-ui);
  line-height: 1.3;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* display face: only where type is large enough to carry it */
h1,
h2,
.brand__name,
.kpi__value,
.stat__num,
.offer__new b {
  font-family: var(--font-display);
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 3px solid var(--emerald-400);
  outline-offset: 3px;
  border-radius: 8px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.skip-link {
  position: absolute;
  right: -9999px;
  top: 8px;
  z-index: 1000;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
}
.skip-link:focus {
  right: 16px;
}

.grad {
  background: linear-gradient(120deg, var(--emerald-400), var(--emerald-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  --pad-y: 9px;
  --pad-x: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: var(--pad-y) var(--pad-x);
  border-radius: 8px;
  border: 1px solid transparent;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
  white-space: nowrap;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn--lg {
  --pad-y: 11px;
  --pad-x: 22px;
  font-size: 15px;
}
.btn--block {
  display: flex;
  width: 100%;
}

.btn--primary {
  background: var(--emerald-700);
  color: var(--on-primary);
  box-shadow: 0 6px 18px -4px rgba(5, 150, 105, 0.5);
}
.btn--primary:hover {
  background: #065f46;
  box-shadow: 0 10px 26px -6px rgba(5, 150, 105, 0.58);
  transform: translateY(-1px);
}

.btn__play {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat
    url("/account-assets/icons/solar-broken/play-circle-broken.svg");
  mask: center / contain no-repeat
    url("/account-assets/icons/solar-broken/play-circle-broken.svg");
}
.btn--lg .btn__play {
  width: 20px;
  height: 20px;
}
.btn--outline {
  background: var(--surface);
  color: var(--ink);
  border-width: 1.5px;
  border-color: #94a3b8;
  padding: calc(var(--pad-y) - 0.5px) calc(var(--pad-x) - 0.5px);
}
.btn--outline:hover {
  border-color: var(--emerald-500);
  color: var(--emerald-700);
  background: var(--bg-tint);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--line-soft);
}
.btn--on-dark {
  color: var(--on-dark);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 250, 252, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--t),
    box-shadow var(--t),
    background var(--t);
}
.nav.is-scrolled {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.82);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
  justify-content: space-around;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}
.brand__mark {
  border-radius: 8px;
}
.brand__text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand__name {
  font-size: 20px;
  letter-spacing: -0.02em;
}
.brand__tagline {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

.nav__links {
  display: flex;
  gap: 2px;
  margin-inline-start: 12px;
  margin-inline-end: auto;
}
.nav__links a {
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--slate);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap; /* Pelak runs wide — never let a link break in two */
  transition:
    color var(--t),
    background var(--t);
}
.nav__links a:hover {
  color: var(--ink);
  background: var(--line-soft);
}

.nav__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.nav__toggle svg {
  width: 24px;
  height: 24px;
  color: var(--ink);
}
.nav__toggle-close {
  display: none;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-menu {
  display: none;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-close {
  display: block;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 24px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.mobile-menu a {
  padding: 12px 8px;
  font-weight: 500;
  color: var(--slate);
  border-radius: 8px;
}
.mobile-menu a:hover {
  background: var(--line-soft);
  color: var(--ink);
}
.mobile-menu .btn {
  margin-top: 8px;
}
.mobile-menu a.btn--primary,
.mobile-menu a.btn--primary:hover {
  color: var(--on-primary);
}

/* ---------- Section helpers ---------- */
section {
  position: relative;
}
.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--emerald-700);
  background: var(--bg-tint);
  border: 1px solid #d1fae5;
  padding: 5px 12px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.kicker--light {
  color: var(--emerald-300);
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.22);
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head--start {
  text-align: start;
  margin-inline: 0;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 34px);
}
.section-head p {
  color: var(--muted);
  margin-top: 16px;
  font-size: 17px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 64px 0 80px;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  inset-block-start: -200px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 900px;
  height: 600px;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(16, 185, 129, 0.16),
    transparent 70%
  );
  filter: blur(10px);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--emerald-700);
  background: var(--bg-tint);
  border: 1px solid #d1fae5;
  padding: 6px 14px;
  border-radius: 8px;
}
.eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: ping 2s var(--ease) infinite;
}
@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
  }
}

.hero__title {
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.25;
  margin: 22px 0 0;
  letter-spacing: -0.025em;
}
.hero__title-line {
  display: block;
}
.hero__lede {
  color: var(--slate);
  font-size: clamp(14px, 1.6vw, 16px);
  margin-top: 22px;
  max-width: 540px;
  text-align: justify;
}
.hero__lede strong {
  color: var(--ink);
  font-weight: 700;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 28px;
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--slate);
  font-weight: 500;
}
.hero__trust svg {
  color: var(--emerald-600);
}

.hero__platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  width: min(100%, 430px);
  margin-top: 18px;
}
.hero__platform {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 11px;
}
.hero__platform--available {
  background: rgba(135, 62, 255, 0.07);
  border: 1px solid rgba(135, 62, 255, 0.22);
}
.hero__platform--soon {
  background: #fff8f4;
  border-color: rgba(240, 90, 40, 0.24);
}
.hero__platform-logo {
  width: auto;
  display: block;
  object-fit: contain;
}
.hero__platform-logo--woo {
  height: 20px;
}
.hero__platform-logo--basalam {
  height: 22px;
}
.hero__platform-state {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.hero__platform-state--available {
  color: #065f46;
  background: #d1fae5;
}
.hero__platform-state--soon {
  color: #a63a17;
  background: #ffeadf;
}

/* hero visual */
.hero__visual {
  position: relative;
}

.dash {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dash__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: #f8fafc;
}
.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.dot--r {
  background: #f87171;
}
.dot--y {
  background: #fbbf24;
}
.dot--g {
  background: var(--emerald-400);
}
.dash__bar-title {
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.dash__body {
  padding: 24px;
}

.kpi {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 8px 8px;
}
.kpi__label {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.kpi__value {
  font-size: clamp(28px, 5vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.kpi__unit {
  font-size: 15px;
  color: var(--slate);
  font-weight: 600;
}
.kpi__delta {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--emerald-700);
  font-weight: 600;
}
.kpi__delta svg {
  width: 17px;
  height: 17px;
}

.pulse {
  width: 100%;
  height: 70px;
  margin: 4px 0 18px;
}
.pulse__track {
  stroke: var(--line);
  stroke-width: 2;
}
.pulse__line {
  stroke: var(--emerald-500);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  animation: trace 3.4s var(--ease) infinite;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.35));
}
@keyframes trace {
  0% {
    stroke-dashoffset: 620;
  }
  55%,
  100% {
    stroke-dashoffset: 0;
  }
}

.dash__rows {
  display: grid;
  gap: 12px;
}
.seg-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  font-size: 14px;
}
.seg-row__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--slate);
  font-weight: 500;
}
.seg-row__count {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.seg-row__bar {
  grid-column: 1 / -1;
  height: 7px;
  background: var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}
.seg-row__bar i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--emerald-400), var(--emerald-600));
}
.seg {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.seg--whale {
  background: #0ea5e9;
}
.seg--loyal {
  background: var(--emerald-500);
}
.seg--risk {
  background: #f59e0b;
}
.seg--sleep {
  background: #94a3b8;
}

.float-card {
  position: absolute;
  inset-block-end: -26px;
  inset-inline-end: -22px;
  width: 270px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.float-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--emerald-700);
  margin-bottom: 8px;
}
.float-card__icon {
  display: inline-flex;
  color: var(--emerald-600);
}
.float-card__text {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.6;
}
.float-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 29px;
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--line-soft);
  color: var(--slate);
}
.chip--go {
  position: relative;
  isolation: isolate;
  cursor: pointer;
  background: var(--emerald-700);
  color: #fff;
  box-shadow: 0 7px 16px -7px rgba(4, 120, 87, 0.9);
  transition:
    background var(--t) var(--ease),
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.chip--go::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px;
  border: 2px solid rgba(16, 185, 129, 0.38);
  border-radius: 11px;
  animation: send-cue 2s var(--ease) infinite;
  pointer-events: none;
}
.chip--go:hover {
  background: #065f46;
  transform: translateY(-2px);
  box-shadow: 0 11px 21px -8px rgba(4, 120, 87, 0.95);
}
.chip--go:active {
  transform: translateY(0) scale(0.96);
}
.chip--go:disabled {
  cursor: wait;
  opacity: 0.9;
}
.chip--go.is-sent {
  background: var(--emerald-700);
  cursor: default;
}
.chip--go.is-sent .chip__send-icon {
  transform: scale(0.85) rotate(-8deg);
}
.chip__send-icon {
  flex: none;
  transition: transform var(--t) var(--ease);
}
@keyframes send-cue {
  0%,
  45% {
    opacity: 0;
    transform: scale(0.88);
  }
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.13);
  }
}

/* ---------- SMS demo success ---------- */
.sms-success {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--t) var(--ease),
    visibility var(--t) var(--ease);
}
.sms-success[hidden] {
  display: none;
}
.sms-success.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sms-success__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}
.sms-success__dialog {
  position: relative;
  z-index: 1;
  width: min(410px, 100%);
  overflow: hidden;
  padding: 28px 26px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px solid rgba(16, 185, 129, 0.24);
  border-radius: 16px;
  box-shadow: 0 28px 70px -18px rgba(15, 23, 42, 0.48);
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition:
    transform 320ms var(--ease),
    opacity var(--t) var(--ease);
}
.sms-success.is-visible .sms-success__dialog {
  transform: none;
  opacity: 1;
}
.sms-success__close {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--t) var(--ease),
    color var(--t) var(--ease);
}
.sms-success__close:hover {
  background: var(--line-soft);
  color: var(--ink);
}
.sms-success__close svg,
.login-modal__close svg,
.lead-modal__close svg {
  width: 23px;
  height: 23px;
}
.sms-success__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 13px;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald-400), var(--emerald-700));
  box-shadow: 0 13px 30px -10px rgba(5, 150, 105, 0.7);
}
.sms-success.is-visible .sms-success__icon {
  animation: success-pop 500ms 90ms var(--ease) both;
}
.sms-success__badge {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--bg-tint);
  color: var(--emerald-700);
  font-size: 11px;
  font-weight: 700;
}
.sms-success__title {
  margin-top: 10px;
  color: var(--ink);
  font-size: 19px;
}
.sms-success__text {
  margin-top: 9px;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.9;
}
.sms-success__meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 15px;
  color: var(--emerald-700);
  font-size: 12px;
  font-weight: 700;
}
.sms-success__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.13);
}
.sms-success__timer {
  height: 3px;
  margin: 20px -26px -22px;
  overflow: hidden;
  background: var(--line-soft);
}
.sms-success__timer span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: right;
  background: var(--emerald-500);
}
.sms-success.is-visible .sms-success__timer span {
  animation: success-timer 4s linear forwards;
}
@keyframes success-pop {
  0% {
    opacity: 0;
    transform: scale(0.45) rotate(-12deg);
  }
  70% {
    transform: scale(1.08) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes success-timer {
  to {
    transform: scaleX(0);
  }
}

/* ============================================================
   STATS
   ============================================================ */
.stats {
  padding: 28px 0;
  border-block: 1px solid var(--line);
  background: var(--surface);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat {
  text-align: center;
  padding: 12px;
}
.stat + .stat {
  border-inline-start: 1px solid var(--line-soft);
}
.stat__num {
  display: block;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: 700;
  color: var(--emerald-600);
  letter-spacing: -0.02em;
}
.stat__txt {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.6;
}
.stats__lead {
  max-width: 760px;
  margin: 28px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.9;
  color: var(--ink);
}
.stats__lead strong {
  color: var(--emerald-600);
  font-weight: 700;
}

/* ============================================================
   PROBLEM
   ============================================================ */
.problem {
  padding: 100px 0;
}
.problem .section-head p {
  text-align: justify;
  text-align-last: center;
}
.cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
  max-width: 940px;
  margin-inline: auto;
}
.cmp__col {
  padding: 30px;
  border-radius: var(--radius-lg);
}
.cmp__col h3 {
  font-size: 18px;
  margin-bottom: 18px;
}
.cmp__col ul {
  display: grid;
  gap: 12px;
}
.cmp__col li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--slate);
  font-size: 15px;
}
.cmp__col li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  font-weight: 700;
}
.cmp__col--bad {
  background: #f8fafc;
  border: 1px solid var(--line);
}
.cmp__col--bad h3 {
  color: var(--muted);
}
.cmp__col--bad li::before {
  width: 19px;
  height: 19px;
  content: "";
  background-color: #cbd5e1;
  -webkit-mask: center / contain no-repeat
    url("/account-assets/icons/solar-broken/close-circle-broken.svg");
  mask: center / contain no-repeat
    url("/account-assets/icons/solar-broken/close-circle-broken.svg");
}
.cmp__col--good {
  background: var(--dark);
  color: var(--on-dark-soft);
  border: 1px solid #334155;
}
.cmp__col--good h3 {
  color: #fff;
}
.cmp__col--good li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-inline-start: 0;
  color: var(--on-dark-soft);
}
.cmp__col--good li::before {
  display: none;
}
.cmp__benefit-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 2px;
  color: #fff;
}
.cmp__arrow {
  display: grid;
  place-items: center;
  color: var(--emerald-500);
}
.cmp__arrow svg {
  transform: scaleX(-1);
}

/* ============================================================
   FEATURES
   ============================================================ */
.features {
  padding: 100px 0;
  background: var(--surface);
  border-block: 1px solid var(--line);
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t);
}
.feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d4f3e3;
}
.feat__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--bg-tint);
  color: var(--emerald-600);
  border: 1px solid #d1fae5;
  margin-bottom: 18px;
  flex: none;
}
.feat__icon .ico {
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.feat h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.feat p {
  color: var(--muted);
  font-size: 15px;
}
.feat__platform-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 4px 10px 5px;
  border: 1px solid #e3d8ff;
  border-radius: 999px;
  background: #f7f3ff;
  color: #6f43a5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* full-width reliability banner */
.feat--full {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 24px;
}
.feat--full .feat__icon {
  margin-bottom: 0;
  width: 60px;
  height: 60px;
}
.feat--full .feat__full-text h3 {
  margin-bottom: 6px;
}
.feat--full .feat__full-text p {
  max-width: 760px;
}

/* ============================================================
   SOLUTION LANDING LINKS
   ============================================================ */
.solutions {
  padding: 90px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.solution-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 18px;
  padding: 24px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition:
    transform var(--t) var(--ease),
    border-color var(--t),
    box-shadow var(--t) var(--ease);
}
.solution-card:hover {
  transform: translateY(-3px);
  border-color: #b7e8d1;
  box-shadow: var(--shadow);
}
.solution-card strong {
  font-size: 18px;
}
.solution-card span {
  grid-column: 1;
  color: var(--muted);
  font-size: 14px;
}
.solution-card b {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--emerald-600);
  font-size: 22px;
}
.solution-card b svg {
  width: 24px;
  height: 24px;
}

/* ============================================================
   SHOWCASE (product screenshots) — bento + lightbox
   ============================================================ */
.showcase {
  padding: 100px 0;
  background: var(--bg);
}
.showcase-platform-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 18px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}
.showcase-platform-switch__option {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  transition:
    color var(--t) var(--ease),
    background var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.showcase-platform-switch__option:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.86);
}
.showcase-platform-switch__option.is-active {
  border-color: #bce8d5;
  background: var(--surface);
  color: var(--emerald-700);
  box-shadow: 0 6px 16px rgba(15, 118, 86, 0.1);
}
.showcase-platform-switch__option:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.2);
  outline-offset: 2px;
}
.showcase-platform-switch__option img {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
}
.showcase-platform-switch__option img[src*="basalam"] {
  height: 27px;
}
.showcase-platform-switch__option small {
  padding: 3px 7px 4px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-size: 10px;
  line-height: 1;
}
.showcase-panel[hidden] {
  display: none;
}
.showcase-panel__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}
.showcase-panel__head strong {
  color: var(--text);
  font-size: 16px;
}
.shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.shots--basalam .shot__viewport img {
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 640px) {
  .showcase-platform-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 4px;
  }
  .showcase-platform-switch__option {
    min-width: 0;
    justify-content: center;
    gap: 7px;
    padding-inline: 8px;
  }
  .showcase-platform-switch__option > span {
    display: none;
  }
  .showcase-panel__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}
/* the two "headline" tiles span the full row and show a wider crop */
.shot--feature,
.shot--wide {
  grid-column: 1 / -1;
}

.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.shot__btn {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.shot__btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: #a7e8cd;
}

/* fake browser/app chrome bar */
.shot__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid var(--line);
}
.shot__chrome .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.shot__chrome-title {
  margin-inline-start: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* viewport crops the tall screenshot from the top so detail stays crisp */
.shot__view {
  position: relative;
  display: block;
}
.shot__viewport {
  display: block;
  position: relative;
  height: 360px;
  overflow: hidden;
  background: #f1f5f9;
}
.shot--feature .shot__viewport,
.shot--wide .shot__viewport {
  height: 440px;
}
.shot__viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition:
    object-position 5.5s var(--ease),
    transform var(--t) var(--ease);
}
/* on hover, slowly pan down so visitors glimpse more of the page */
.shot__btn:hover .shot__viewport img {
  object-position: bottom center;
}

/* fade + "view full" pill */
.shot__view::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85));
  pointer-events: none;
}
.shot__zoom {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--emerald-700);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #d1fae5;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.shot__zoom svg {
  color: var(--emerald-600);
}
.shot__btn:hover .shot__zoom,
.shot__btn:focus-visible .shot__zoom {
  opacity: 1;
  transform: none;
}

.shot__cap {
  padding: 22px 18px 6px;
}
.shot__cap-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.shot__cap-desc {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

/* ---------- Image lightbox ---------- */
.imodal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.imodal[hidden] {
  display: none;
}
.imodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  animation: imodal-fade var(--t) var(--ease);
}
.imodal__close {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background var(--t) var(--ease);
}
.imodal__close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.imodal__close svg,
.vmodal__close svg {
  width: 26px;
  height: 26px;
  margin: auto;
}
.imodal__dialog {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  max-height: 90vh;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.6);
  animation: imodal-pop var(--t) var(--ease);
}
.imodal__scroll {
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.imodal__img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes imodal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes imodal-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .imodal__backdrop,
  .imodal__dialog {
    animation: none;
  }
}

/* ---------- Floating activation CTA ---------- */
.fab {
  position: fixed;
  z-index: 1100;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 8px; /* same radius as .btn (شروع کنید) */
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--emerald-600), var(--emerald-700));
  box-shadow: 0 14px 30px -10px rgba(4, 120, 87, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease),
    visibility var(--t) var(--ease);
}
.fab.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(4, 120, 87, 0.6);
}
.fab__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  animation: ping 2.4s var(--ease) infinite;
}

.support-fab {
  position: fixed;
  z-index: 1100;
  left: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: #0876a8;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 14px 30px -10px rgba(34, 158, 217, 0.62);
  transition:
    transform var(--t) var(--ease),
    background var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.support-fab:hover {
  background: #075f88;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(34, 158, 217, 0.72);
}
.support-fab svg {
  flex: none;
}
@media (max-width: 640px) {
  .fab {
    right: 14px;
    bottom: 14px;
    padding: 11px 15px;
    font-size: 14px;
  }
  .support-fab {
    left: 14px;
    bottom: 14px;
    width: 48px;
    padding: 0;
    justify-content: center;
  }
  .support-fab span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fab,
  .support-fab {
    transition: none;
  }
  .fab__pulse {
    animation: none;
  }
}

/* ---------- OTP login modal ---------- */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
}
.login-modal[hidden] {
  display: none;
}
.login-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
  animation: imodal-fade var(--t) var(--ease);
}
.login-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: clamp(24px, 5vw, 34px);
  background: var(--surface);
  border: 1px solid rgba(52, 211, 153, 0.42);
  border-radius: 18px;
  box-shadow: 0 32px 90px -24px rgba(15, 23, 42, 0.7);
  animation: imodal-pop var(--t) var(--ease);
  overscroll-behavior: contain;
}
.login-modal__dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--emerald-700), var(--emerald-400));
}
.login-modal__close {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-end: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font:
    400 27px/1 Arial,
    sans-serif;
  cursor: pointer;
  transition:
    background var(--t),
    color var(--t);
}
.login-modal__close:hover {
  color: var(--ink);
  background: var(--line-soft);
}
.login-modal__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 44px;
}
.login-modal__mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--bg-tint), #fff);
  border: 1px solid #c7ebd9;
  box-shadow: 0 12px 28px -18px rgba(5, 150, 105, 0.75);
}
.login-modal__mark img {
  width: 46px;
  height: 46px;
}
.login-modal__brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.login-modal__brand-copy strong {
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--ink);
}
.login-modal__brand-copy small {
  color: var(--muted);
  font-size: 12.5px;
}
.login-modal__intro {
  margin-top: 26px;
}
.login-modal__intro h2 {
  font-size: clamp(25px, 6vw, 32px);
}
.login-modal__intro p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
}
.login-modal__notice {
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid #a7f3d0;
  border-radius: 9px;
  color: #065f46;
  background: #ecfdf5;
  font-size: 13px;
  line-height: 1.8;
}
.login-modal__notice.is-error {
  color: #9f1239;
  background: #fff1f2;
  border-color: #fecdd3;
}
.login-modal__form {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}
.login-modal__form[hidden] {
  display: none;
}
.login-modal__form label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.login-modal__form input {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: 600 16px/1.5 var(--font-ui);
  outline: none;
  transition:
    border-color var(--t),
    box-shadow var(--t);
}
.login-modal__form input:focus {
  border-color: var(--emerald-600);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.login-modal__input-wrap {
  display: flex;
  align-items: center;
  min-height: 50px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition:
    border-color var(--t),
    box-shadow var(--t);
}
.login-modal__input-wrap:focus-within {
  border-color: var(--emerald-600);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.login-modal__input-wrap input {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  direction: ltr;
  text-align: left;
}
.login-modal__input-wrap input:focus {
  box-shadow: none;
}
.login-modal__submit {
  min-height: 50px;
  margin-top: 7px;
  font-size: 15px;
}
.login-modal__form[aria-busy="true"] {
  opacity: 0.72;
}
.login-modal__code {
  direction: ltr;
  text-align: center;
  letter-spacing: 0.45em;
  font-size: 22px !important;
}
.login-modal__change {
  justify-self: center;
  border: 0;
  padding: 5px 8px;
  background: transparent;
  color: var(--emerald-700);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.login-modal__alternative {
  margin-top: 18px;
}
.login-modal__separator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--muted);
  font-size: 12px;
}
.login-modal__separator::before,
.login-modal__separator::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}
.login-modal__basalam {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 10px 16px;
  border: 1px solid #f05a28;
  border-radius: 10px;
  background: #fff8f4;
  color: #a63a17;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    border-color var(--t),
    background var(--t),
    transform var(--t);
}
.login-modal__basalam:hover {
  border-color: #d94a1d;
  background: #fff1e9;
  color: #8f2f10;
  transform: translateY(-1px);
}
.login-modal__basalam:focus-visible {
  outline: 3px solid rgba(240, 90, 40, 0.2);
  outline-offset: 2px;
}
.login-modal__basalam-mark {
  display: inline-flex;
  width: 44px;
  height: 20px;
  flex: none;
  align-items: center;
  justify-content: center;
}
.login-modal__basalam-mark img {
  display: block;
  width: 44px;
  height: 20px;
  object-fit: contain;
}
.login-modal__terms {
  margin-top: 20px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: center;
}
.login-modal__terms a {
  color: var(--emerald-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .login-modal {
    padding: 12px;
    align-items: end;
  }
  .login-modal__dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 24px 20px;
    border-radius: 18px 18px 10px 10px;
  }
  .login-modal__brand-copy small {
    font-size: 11.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-modal__backdrop,
  .login-modal__dialog {
    animation: none;
  }
}

/* ============================================================
   FREE ANALYSIS MODAL — timed lead capture toward /free-analysis
   Sits above the login modal (z 1300) so a visitor who already
   opened login is never covered by it; the JS also suppresses it.
   ============================================================ */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 18px;
}
.lead-modal[hidden] {
  display: none;
}
.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.74);
  backdrop-filter: blur(6px);
  animation: imodal-fade var(--t) var(--ease);
}
.lead-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(500px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: clamp(26px, 5vw, 36px);
  background: var(--surface);
  border: 1px solid rgba(52, 211, 153, 0.42);
  border-radius: 18px;
  box-shadow: 0 32px 90px -24px rgba(15, 23, 42, 0.7);
  animation: imodal-pop var(--t) var(--ease);
  overscroll-behavior: contain;
}
/* The dialog only takes focus programmatically on open; Tab immediately
   moves to a real control, which keeps its own visible ring. */
.lead-modal__dialog:focus {
  outline: none;
}
.lead-modal__close {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-end: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font:
    400 27px/1 Arial,
    sans-serif;
  cursor: pointer;
  transition:
    background var(--t),
    color var(--t);
}
.lead-modal__close:hover {
  color: var(--ink);
  background: var(--line-soft);
}

/* --- brand lockup: نبض ←→ platforms --- */
/* Centred in the dialog. The row is ~216px wide inside a ~428px content
   box, so it clears the close button without needing side padding. */
.lead-modal__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.lead-modal__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 15px;
  background: linear-gradient(145deg, var(--bg-tint), #fff);
  border: 1px solid #c7ebd9;
  box-shadow: 0 12px 28px -18px rgba(5, 150, 105, 0.75);
}
.lead-modal__mark img {
  width: 42px;
  height: 42px;
}
.lead-modal__link {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--emerald-500);
}
.lead-modal__link svg {
  width: 20px;
  height: 20px;
}
.lead-modal__platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Same 56px square and radius as the نبض mark, so the three read as one
   set. The wordmarks are wide, so they are bounded by the box rather than
   given a fixed height — max-width settles their size and keeps the
   aspect ratio; place-items centres whatever comes out. */
.lead-modal__platform {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 15px;
}
.lead-modal__platform--woo {
  background: rgba(135, 62, 255, 0.07);
  border-color: rgba(135, 62, 255, 0.22);
}
.lead-modal__platform--basalam {
  background: #fff8f4;
  border-color: rgba(240, 90, 40, 0.24);
}
.lead-modal__platform-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* --- copy ---
   The header block is centred to sit under the centred brand row; the
   value points below stay start-aligned so their icons form a column. */
.lead-modal__eyebrow {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--emerald-700);
  text-align: center;
}
.lead-modal__dialog h2 {
  margin-top: 6px;
  font-size: clamp(20px, 3.4vw, 24px);
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}
.lead-modal__lead {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--slate);
  text-align: center;
}

/* --- value points --- */
.lead-modal__points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.lead-modal__points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
}
.lead-modal__points svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--emerald-600);
}

/* --- actions --- */
.lead-modal__cta {
  margin-top: 20px;
  text-decoration: none;
}
.lead-modal__cta svg {
  width: 18px;
  height: 18px;
}
.lead-modal__note {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .lead-modal {
    padding: 12px;
    align-items: end;
  }
  .lead-modal__dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    padding: 24px 20px;
    border-radius: 18px 18px 10px 10px;
  }
  .lead-modal__brand {
    gap: 8px;
  }
  .lead-modal__mark {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }
  .lead-modal__mark img {
    width: 36px;
    height: 36px;
  }
  /* keep the three marks square and matched at the smaller size */
  .lead-modal__platform {
    width: 48px;
    height: 48px;
    padding: 6px;
    border-radius: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lead-modal__backdrop,
  .lead-modal__dialog {
    animation: none;
  }
}

/* ============================================================
   ROI (dark band)
   ============================================================ */
.roi {
  padding: 100px 0;
  background: linear-gradient(160deg, var(--dark), var(--dark-2));
  color: var(--on-dark);
  overflow: hidden;
}
.roi__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.roi__copy h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  color: #fff;
}
.roi__copy p {
  color: var(--on-dark-muted);
  margin-top: 16px;
  font-size: 17px;
}
.roi__list {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.roi__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--on-dark-soft);
  font-size: 15px;
}
.roi__list svg {
  color: var(--emerald-400);
  flex: none;
  margin-top: 3px;
}

.roi__panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(110, 231, 183, 0.18);
  border-radius: var(--radius-lg);
  padding: 26px;
  backdrop-filter: blur(6px);
}
.roi__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}
.badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
}
.badge--ok {
  background: rgba(52, 211, 153, 0.16);
  color: var(--emerald-300);
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.roi__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}
.roi__metrics > div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.roi__m-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.roi__m-lbl {
  display: block;
  font-size: 13px;
  color: var(--on-dark-muted);
  margin-top: 4px;
}
.roi__revenue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(
    120deg,
    rgba(16, 185, 129, 0.18),
    rgba(5, 150, 105, 0.1)
  );
  border: 1px solid rgba(52, 211, 153, 0.28);
}
.roi__rev-lbl {
  color: var(--on-dark-soft);
  font-size: 14px;
  font-weight: 600;
}
.roi__rev-num {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.roi__rev-num em {
  font-size: 14px;
  font-style: normal;
  color: var(--on-dark-muted);
  font-weight: 600;
}
.roi__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 84px;
  margin-top: 22px;
}
.roi__chart i {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(
    180deg,
    var(--emerald-400),
    rgba(5, 150, 105, 0.35)
  );
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how {
  padding: 100px 0;
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.step__num {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--dark);
  color: var(--emerald-300);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 16px;
}
.step h3 {
  font-size: 17px;
  margin-bottom: 8px;
}
.step p {
  color: var(--muted);
  font-size: 14.5px;
}

/* ============================================================
   PRICING
   ============================================================ */
/* sits directly under .features, which is also white — one continuous band,
   so no top border (it would double up) and a tighter top pad */
.pricing {
  padding: 80px 0 100px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.offer {
  position: relative;
  max-width: 1000px;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 30px;
  overflow: hidden;
}
.offer__glow {
  position: absolute;
  inset-block-start: -140px;
  inset-inline-start: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(16, 185, 129, 0.14),
    transparent 68%
  );
}

.offer__head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.offer__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(120deg, var(--emerald-500), var(--emerald-700));
  border: 1px solid transparent;
  padding: 7px 16px;
  border-radius: 8px;
}
.offer__ribbon svg {
  flex: none;
}

.offer__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 26px;
  align-items: stretch;
}

/* ---- license side ---- */
.offer__main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 26px 24px;
}
.offer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--emerald-700);
  background: var(--bg-tint);
  border: 1px solid #c7ebd9;
  border-radius: 8px;
  padding: 6px 14px;
}
.offer__eyebrow svg {
  flex: none;
}

.offer__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 14px;
  margin: 20px 0 6px;
}
.offer__old {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 600;
}
.offer__old s {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--danger);
  font-variant-numeric: tabular-nums;
}
.offer__old em {
  font-size: 13px;
  font-style: normal;
}
.offer__new {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.offer__new b {
  font-size: clamp(34px, 6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.offer__new em {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  color: var(--slate);
}
.offer__save {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--emerald-600);
  padding: 5px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 16px -6px rgba(5, 150, 105, 0.6);
}
.offer__per {
  color: var(--muted);
  font-size: 14px;
}

.offer__cta {
  align-self: center;
  margin-top: 26px;
}

/* ---- gift side ---- */
.offer__gift {
  position: relative;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--dark), var(--dark-2));
  border: 1px solid #334155;
  border-radius: var(--radius-lg);
  color: var(--on-dark-soft);
  padding: 26px 24px;
}
.offer__gift-plus {
  position: absolute;
  inset-block-start: -15px;
  inset-inline-start: -15px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--emerald-500);
  color: #04130d;
  border: 3px solid var(--bg);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.offer__gift-ico {
  display: inline-flex;
  color: var(--emerald-300);
  margin-bottom: 14px;
}
.offer__gift-title {
  font-size: 18px;
  color: #fff;
}
.offer__gift-desc {
  font-size: 14px;
  color: var(--on-dark-muted);
  margin-top: 10px;
  line-height: 1.8;
}

.offer__gift-metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  margin: 20px 0 auto;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.offer__gift-ico-sm {
  display: inline-flex;
  color: var(--emerald-300);
}
.offer__gift-num {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.offer__gift-sub {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--on-dark-muted);
  line-height: 1.7;
}
.offer__gift-foot {
  font-size: 12.5px;
  color: #7c8ba1;
  margin-top: 16px;
}

/* ---- scarcity ---- */
.offer__seats {
  position: relative;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.offer__seats-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.offer__seats-lbl {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  font-size: 14.5px;
  color: var(--slate);
}
.offer__seats-lbl svg {
  flex: none;
  margin-top: 5px;
  color: var(--warn-ink);
}
.offer__seats-copy {
  line-height: 1.9;
}
.offer__seats-lbl b {
  color: var(--ink);
  font-weight: 700;
}
.offer__seats-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.offer__seats-bar {
  height: 9px;
  margin-top: 12px;
  background: var(--line-soft);
  border-radius: 8px;
  overflow: hidden;
}
.offer__seats-bar i {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--emerald-400), var(--emerald-600));
}
.offer__seats-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.8;
}
.offer__seats-note svg {
  flex: none;
  margin-top: 6px;
  color: var(--emerald-600);
}

@media (max-width: 860px) {
  .offer {
    padding: 24px;
  }
  .offer__grid {
    grid-template-columns: 1fr;
  }
  .offer__gift-plus {
    inset-inline-start: auto;
    inset-inline-end: 18px;
  }
}
@media (max-width: 560px) {
  .offer__cta {
    align-self: stretch;
  }
  .offer__seats-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .offer__seats-lbl {
    width: 100%;
  }
  .offer__seats-copy {
    max-width: none;
    line-height: 1.75;
  }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 100px 0;
}
.faq__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: start;
}
.accordion {
  display: grid;
  gap: 12px;
}
.ac {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color var(--t),
    box-shadow var(--t);
}
.ac[open] {
  border-color: #c7ebd9;
  box-shadow: var(--shadow-sm);
}
.ac summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 22px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ac summary::-webkit-details-marker {
  display: none;
}
.ac summary::after {
  flex: none;
  width: 22px;
  height: 22px;
  content: "";
  background-color: var(--emerald-600);
  -webkit-mask: center / contain no-repeat
    url("/account-assets/icons/solar-broken/add-circle-broken.svg");
  mask: center / contain no-repeat
    url("/account-assets/icons/solar-broken/add-circle-broken.svg");
  transition: transform var(--t) var(--ease);
}
.ac[open] summary::after {
  transform: rotate(45deg);
}
.ac p {
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 15px;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta-final {
  padding: 40px 0 100px;
}
.cta-final__box {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(160deg, var(--dark), var(--dark-2));
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 72px 32px;
  color: var(--on-dark);
}
.cta-final__glow {
  position: absolute;
  inset-block-start: -160px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 600px;
  height: 400px;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(16, 185, 129, 0.35),
    transparent 70%
  );
  filter: blur(6px);
}
.cta-final__box h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  color: #fff;
  position: relative;
}
.cta-final__box p {
  color: var(--on-dark-muted);
  font-size: 18px;
  margin-top: 16px;
  max-width: 560px;
  margin-inline: auto;
  position: relative;
}
.cta-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
  position: relative;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 56px 0 28px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer__brand p {
  color: var(--muted);
  font-size: 14px;
  margin-top: 14px;
  max-width: 260px;
}
.footer__enamad {
  margin-top: 16px;
}
.footer__enamad img {
  width: 88px;
  height: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
}
.footer__col h4 {
  font-size: 14px;
  margin-bottom: 14px;
  color: var(--ink);
}
.footer__col a,
.footer__link-button {
  display: block;
  color: var(--muted);
  font: 400 14px/1.75 var(--font-ui);
  padding: 5px 0;
  transition: color var(--t);
  text-align: start;
}
.footer__link-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.footer__col a:hover,
.footer__link-button:hover {
  color: var(--emerald-700);
}

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
}
.footer__network {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.footer__network a {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t);
}
.footer__network a:hover {
  color: var(--emerald-700);
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* محتوای اصلی بالای صفحه نباید منتظر JavaScript بماند؛ این کار LCP را کم می‌کند. */
.hero__copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .pulse__line,
  .eyebrow__dot,
  .float-card,
  .chip--go::after,
  .sms-success__icon,
  .sms-success__timer span {
    animation: none !important;
  }
  .pulse__line {
    stroke-dashoffset: 0;
  }
  .btn,
  .feat,
  .ac,
  .nav,
  .chip--go,
  .sms-success,
  .sms-success__dialog {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero__visual {
    max-width: 520px;
    margin-inline: auto;
    width: 100%;
  }
  .roi__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .faq__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  .nav__links,
  .nav__actions {
    display: none;
  }
  .nav__toggle {
    display: flex;
    position: relative;
    z-index: 100;
  }
  .mobile-menu {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    z-index: 95;
    height: 100dvh;
    width: min(82vw, 320px);
    padding: 84px 20px 24px;
    border-bottom: 0;
    border-inline-start: 1px solid var(--line);
    box-shadow: -14px 0 44px rgba(15, 23, 42, 0.16);
    transform: translateX(100%);
    visibility: hidden;
    transition:
      transform var(--t) var(--ease),
      visibility var(--t) var(--ease);
    overflow-y: auto;
  }
  .mobile-menu:not([hidden]) {
    transform: translateX(0);
    visibility: visible;
  }
  .stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .stat:nth-child(odd) {
    border-inline-start: 0;
  }
  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line-soft);
    padding-top: 22px;
  }
  .feat-grid {
    grid-template-columns: 1fr;
  }
  .solution-grid {
    grid-template-columns: 1fr;
  }
  .shots {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .shot__viewport,
  .shot--feature .shot__viewport,
  .shot--wide .shot__viewport {
    height: 300px;
  }
  .shot__zoom {
    opacity: 1;
    transform: none;
  }
  .feat--full {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .container {
    padding-inline: 18px;
  }
  .hero {
    padding: 56px 0 128px;
  }
  .hero__cta {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .hero__cta .btn {
    flex: 1 1 0;
    min-width: 0;
    --pad-x: 12px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }
  .problem,
  .features,
  .solutions,
  .showcase,
  .roi,
  .how,
  .pricing,
  .faq {
    padding: 72px 0;
  }
  .shot__viewport,
  .shot--feature .shot__viewport,
  .shot--wide .shot__viewport {
    height: 240px;
  }
  .imodal {
    padding: 14px;
  }
  .imodal__close {
    top: 10px;
    inset-inline-end: 10px;
  }
  .cmp {
    grid-template-columns: 1fr;
  }
  .cmp__arrow svg {
    transform: rotate(90deg);
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .stats__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .float-card {
    inset-inline: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    inset-block-end: -44px;
    width: min(240px, calc(100vw - 48px));
  }
  @keyframes float {
    0%,
    100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(-8px);
    }
  }
  .cta-final {
    padding: 32px 0 72px;
  }
  .cta-final__box {
    padding: 48px 22px;
    /* .container is width:100% — inset with width, never margin, or the box
       overhangs the viewport and iOS lets the page pan sideways. */
    width: calc(100% - 12px);
    margin-inline: auto;
  }
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.vmodal[hidden] {
  display: none;
}
.vmodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(4px);
}
.vmodal__dialog {
  position: relative;
  width: min(960px, 100%);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
}
.vmodal__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  background: #000;
}
.vmodal__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  transition: background var(--t);
}
.vmodal__close:hover {
  background: rgba(0, 0, 0, 0.85);
}

/* Consent is deliberately shared with the commercial and help pages so the
   first-party funnel only starts after an explicit choice. */
.consent {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 240;
  width: min(440px, calc(100% - 36px));
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.consent[hidden] { display: none; }
.consent p {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.consent-actions { display: flex; gap: 8px; }
.consent-actions button {
  min-height: 38px;
  padding-inline: 14px;
  border: 1px solid var(--primary);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.consent-accept { color: #fff; background: var(--primary); }
.consent-decline { color: var(--primary-hover); background: #fff; }

/* Every action keeps a visible boundary across the public site. */
button,
.btn,
.chip,
.fab,
.footer__link-button {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #94a3b8 !important;
}

/* Text-only actions are links in appearance, not boxed buttons. */
.footer__link-button,
.login-modal__change {
  border: 0 !important;
  box-shadow: none !important;
}

.btn--primary,
.chip--go,
.fab {
  border-color: #064e3b !important;
}

.btn--outline {
  border-color: #64748b !important;
}

.btn--on-dark,
.vmodal__close,
.imodal__close {
  border-color: rgba(255, 255, 255, 0.68) !important;
}

/* ============================================================
   NABZ GREEN PANEL SYSTEM — visual refresh
   Aligns nabz.business with the /free-analysis funnel page.
   Appended as an override layer (same technique acquisition.css
   uses) so the component CSS above stays untouched and any
   section not restyled here still inherits the new tokens.
   ============================================================ */

:root {
  /* ---- neutrals: zinc ink on a mint page, green-tinted hairlines ---- */
  --ink: #0a0a0a;
  --ink-2: #27272a;
  --slate: #52525b;
  --muted: #71717a;
  --line: #dcefe6;
  --line-soft: #eaf7f0;
  --surface: #ffffff;
  --surface-soft: #fbfffd;
  --bg: #f4fbf7;
  --bg-tint: #e9fbf2;
  --bg-wash: #f0fdf6;

  /* ---- emerald ---- */
  --primary: #059669;
  --primary-hover: #047857;
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* ---- emphasis panels replace the old slate/navy band ---- */
  --dark: #064e3b;
  --dark-2: #065f46;
  --dark-line: rgba(167, 243, 208, 0.22);
  /* Copy on the emerald panels is plain white — the old tinted greys and
     mint tints read as washed out against the deep green. */
  --on-dark: #ffffff;
  --on-dark-soft: #ffffff;
  --on-dark-muted: #ffffff;

  /* ---- accents: pulled toward the muted funnel palette ---- */
  --warn: #d9902f;
  --warn-ink: #7a6a3a;
  --warn-soft: #f7f5ef;
  --danger: #9f3a4a;
  --danger-soft: #f8eef0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 18px 44px rgba(5, 150, 105, 0.12);
  --shadow-lift: 0 18px 44px rgba(5, 150, 105, 0.12);

  --radius-sm: 8px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-pill: 999px;
}

html,
body {
  background: var(--bg);
}

body {
  color: var(--ink);
  font-size: 15px;
}

/* The funnel page sets letter-spacing to 0 everywhere — Pelak is already
   wide enough that negative tracking muddies Persian headings. */
h1,
h2,
h3,
h4,
.brand__name,
.stat__num,
.kpi__value {
  font-weight: 800;
  letter-spacing: 0;
}

:focus-visible {
  outline: 3px solid rgba(5, 150, 105, 0.42);
  outline-offset: 3px;
}

/* No gradient type on the funnel page — headings are one solid ink,
   with the emerald reserved for the accent word. */
.grad {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--primary-hover);
}

/* ---------- Nav: a floating rounded panel, not a full-bleed bar ---------- */
.nav {
  padding: 12px 0 0;
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.nav.is-scrolled {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.nav__inner {
  min-height: 64px;
  height: auto;
  padding: 0 18px;
  gap: 18px;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
  transition: box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.nav.is-scrolled .nav__inner {
  border-color: var(--line-strong, #bdebd2);
  box-shadow: var(--shadow);
}

.brand__mark {
  border-radius: var(--radius);
}

.brand__name {
  font-size: 18px;
}

.brand__tagline {
  color: var(--muted);
  font-size: 12px;
}

.nav__links a {
  border-radius: var(--radius-pill);
  color: var(--slate);
  font-size: 13.5px;
  font-weight: 600;
}

.nav__links a:hover {
  background: var(--bg-tint);
  color: var(--primary-hover);
}

.nav__toggle {
  border-color: var(--line);
  border-radius: var(--radius);
}

.mobile-menu {
  border-bottom-color: var(--line);
  background: var(--surface);
}

.mobile-menu a {
  border-radius: var(--radius);
  color: var(--slate);
}

.mobile-menu a:hover {
  background: var(--bg-tint);
  color: var(--primary-hover);
}

/* ---------- Buttons ---------- */
.btn {
  min-height: 44px;
  border-radius: var(--radius);
  font-weight: 700;
}

.btn--lg {
  min-height: 50px;
  --pad-x: 21px;
  font-size: 15px;
}

.btn--primary {
  background: var(--primary);
  border-color: var(--primary) !important;
  box-shadow: 0 10px 22px rgba(5, 150, 105, 0.22);
}

.btn--primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover) !important;
  box-shadow: 0 14px 28px rgba(5, 150, 105, 0.26);
}

.btn--outline {
  border-width: 1px;
  border-color: var(--line) !important;
  background: var(--surface);
  color: var(--primary-hover);
  padding: var(--pad-y) var(--pad-x);
}

.btn--outline:hover {
  border-color: var(--primary) !important;
  background: var(--bg-tint);
  color: var(--primary-hover);
}

.btn--ghost:hover {
  background: var(--bg-tint);
  color: var(--primary-hover);
}

/* ---------- Eyebrow / kicker: pill, the funnel page's chip shape ---------- */
.kicker,
.eyebrow,
.offer__eyebrow {
  margin-bottom: 16px;
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-tint);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

/* …except inside the offer head, where the eyebrow sits beside the ribbon and
   the two chips have to read as one pair: same box metrics, same icon size,
   no trailing margin to knock them off the shared centre line. */
.offer__head .offer__eyebrow {
  margin-bottom: 0;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.offer__head .offer__ribbon svg,
.offer__head .offer__eyebrow svg {
  width: 16px;
  height: 16px;
}

.eyebrow__dot {
  background: var(--primary);
}

.kicker--light {
  border-color: var(--dark-line);
  background: rgba(167, 243, 208, 0.14);
  color: var(--on-dark-muted);
}

/* ---------- Section rhythm ---------- */
.section-head {
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  line-height: 1.45;
}

.section-head p {
  margin-top: 14px;
  color: var(--slate);
  font-size: 16px;
  line-height: 2;
}

/* The old page alternated white and slate bands. The funnel page instead
   runs one continuous mint field and lets the panels carry the rhythm, so
   the bands become near-transparent and every card floats on the mint. */
.stats,
.features {
  border-block-color: var(--line);
  background: rgba(255, 255, 255, 0.55);
}

.problem,
.solutions,
.pricing,
.showcase,
.how,
.faq {
  background: transparent;
}

/* Tighter vertical rhythm — the funnel page breathes in ~60px steps,
   not the 100px the marketing page used. */
.problem,
.features,
.solutions,
.pricing,
.showcase,
.how,
.faq,
.roi {
  padding-block: 72px;
}

/* ---------- Cards ---------- */
.feat,
.solution-card,
.step,
.ac,
.shot,
.offer__main {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.feat:hover,
.solution-card:hover,
.shot:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lift);
}

/* Icon tiles: hairline + primary-soft fill + dark-primary glyph */
.feat__icon,
.solution-card__icon,
.step__num,
.float-card__icon,
.sms-success__icon {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-tint);
  color: var(--primary-hover);
}

/* The step number sat on the old navy chip. */
.step__num {
  background: var(--bg-tint) !important;
  color: var(--primary-hover) !important;
}

/* ---------- Hero panel ---------- */
.dash {
  border-color: var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.dash__bar {
  border-bottom-color: var(--line);
  background: var(--surface-soft);
}

/* macOS traffic lights read as three unrelated accent colours against a
   mono-green system — mute them to the panel palette. */
.dash .dot--r {
  background: #cfe4da;
}

.dash .dot--y {
  background: #aed9c6;
}

.dash .dot--g {
  background: var(--primary);
}

/* ---------- Screenshot frames ---------- */
.shot__chrome {
  border-bottom-color: var(--line);
  background: var(--surface-soft);
}

.shot__chrome .dot {
  background: #cfe4da;
}

/* ---------- Stats ---------- */
.stat + .stat {
  border-inline-start-color: var(--line);
}

.stat__num {
  color: var(--primary-hover);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0;
}

.stat__txt {
  color: var(--muted);
  font-size: 13px;
}

.stats__lead {
  border-top-color: var(--line);
  color: var(--ink);
  font-size: clamp(15px, 1.8vw, 17px);
}

.stats__lead strong {
  color: var(--primary-hover);
}

/* ---------- Emphasis panels (was the slate/navy band) ---------- */
.roi,
.cmp__col--good,
.offer__gift,
.cta-final__box {
  border-color: var(--dark-line) !important;
  background: linear-gradient(160deg, var(--dark), var(--dark-2));
  color: var(--on-dark-soft);
}

.cmp__col--good,
.offer__gift,
.cta-final__box {
  border-radius: var(--radius-xl);
}

.cmp__col--good h3,
.roi h2,
.cta-final__box h2,
.offer__gift h3 {
  color: #fff;
}

.cmp__col--good li::before {
  color: var(--on-dark-muted);
}

.cmp__col--bad {
  border-color: var(--line);
  background: var(--surface-soft);
}

.cmp__col--bad li::before {
  color: #c4d8ce;
}

.cmp__col {
  border-radius: var(--radius-xl);
}

.cmp__arrow {
  color: var(--primary);
}

/* ---------- Hero ---------- */
.hero {
  padding: 58px 0 42px;
}

.hero__title {
  margin-top: 18px;
  font-size: clamp(25px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
}

.hero__lede {
  max-width: 620px;
  margin-top: 16px;
  color: var(--slate);
  font-size: 16px;
  line-height: 2;
  text-align: start;
}

.hero__lede strong {
  color: var(--ink);
}

/* The trust row becomes the funnel page's signal chips. */
.hero__trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  flex-wrap: nowrap;
  gap: 8px;
}

.hero__trust > li {
  min-width: 0;
  justify-content: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--slate);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.footer {
  border-top-color: var(--line);
  background: rgba(255, 255, 255, 0.86);
}

.footer__col a:hover,
.footer__link-button:hover {
  color: var(--primary-hover);
}

.footer__bottom {
  border-top-color: var(--line);
}

.footer__enamad img {
  border-color: var(--line);
  border-radius: var(--radius);
}

/* ---------- Overlays ---------- */
.vmodal__backdrop,
.imodal__backdrop,
.omodal__backdrop {
  background: rgba(10, 10, 10, 0.38);
  backdrop-filter: blur(10px);
}

.vmodal__dialog,
.consent {
  border-radius: var(--radius-xl);
}

.consent {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

/* The trailing `border-color` !important block above this layer was tuned
   for the old slate palette; re-point it at the green system. */
.btn--primary,
.chip--go,
.fab {
  border-color: var(--primary) !important;
}

.btn--outline {
  border-color: var(--line) !important;
}

.btn--on-dark,
.vmodal__close,
.imodal__close {
  border-color: rgba(236, 253, 245, 0.6) !important;
}

@media (max-width: 700px) {
  .nav {
    padding-top: 8px;
  }

  .nav__inner {
    min-height: 60px;
    padding-inline: 13px;
    border-radius: 12px;
  }

  .hero {
    padding: 34px 0 28px;
  }

  .hero h1 {
    font-size: 25px;
  }

  .hero__trust {
    gap: 3px;
  }

  .hero__trust > li {
    gap: 3px;
    padding-inline: 3px;
    font-size: clamp(7.5px, 2.35vw, 10px);
    letter-spacing: -0.15px;
  }

  .hero__trust svg {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
  }
}

/* ---------- Hero platform badges ----------
   The funnel page shows each platform wordmark on a plain white card with
   a green hairline and a pill status chip — no per-brand purple/orange
   frames, which are the last off-system colours on the page. */
.hero__platform,
.hero__platform--available,
.hero__platform--soon {
  min-height: 44px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* The pill hugs its label: no min-height, so padding alone sizes the box.
   Pelak's Persian glyphs sit low in the em box, so the padding is split
   4.5/6.5 to land the label on the optical centre rather than the metric
   one — measured from a 3x render, not guessed. */
.hero__platform-state {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 11px;
  min-height: 0;
  justify-content: center;
  line-height: 1;
  padding: 4.5px 10px 6.5px;
}

.hero__platform-state--available {
  background: var(--bg-tint);
  color: var(--primary-hover);
}

/* "coming soon" uses the funnel page's desaturated amber, not brand orange. */
.hero__platform-state--soon {
  border-color: #e6e2d6;
  background: var(--warn-soft);
  color: var(--warn-ink);
}

@media (max-width: 700px) {
  .hero__platforms {
    width: 100%;
    gap: 6px;
  }

  .hero__platform,
  .hero__platform--available,
  .hero__platform--soon {
    min-height: 40px;
    gap: 6px;
    padding: 6px;
  }

  .hero__platform-logo--woo {
    height: 16px;
  }

  .hero__platform-logo--basalam {
    height: 18px;
  }

  .hero__platform-state {
    padding: 4px 6px 5px;
    font-size: 9px;
  }
}

/* ============================================================
   Copy on the emerald panels
   Every text node on the four green panels (the «با نبض» column,
   the gift card, the ROI band and the closing CTA) resolves to plain
   white. Some of these hardcode a slate grey that predates the green
   system and goes muddy on deep green, so they are named explicitly
   rather than left to the --on-dark-* tokens.
   ============================================================ */

.cmp__col--good,
.cmp__col--good h3,
.cmp__col--good li,
.roi,
.roi__copy h2,
.roi__copy p,
.roi__list li,
.roi__panel-head,
.roi__m-num,
.roi__m-lbl,
.roi__rev-lbl,
.roi__rev-num,
.roi__rev-num em,
.offer__gift,
.offer__gift-title,
.offer__gift-desc,
.offer__gift-num,
.offer__gift-sub,
.offer__gift-foot,
.cta-final__box,
.cta-final__box h2,
.cta-final__box p {
  color: #fff;
}

/* Icons on the emerald panels sit bare on the surface — no tile, no
   frame, no fill. */
.offer__gift-ico,
.offer__gift-ico-sm,
.roi__list svg,
.cmp__col--good li::before {
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}

.offer__gift-ico,
.offer__gift-ico-sm {
  padding: 0;
  border-radius: 0;
}

/* The inner sub-panels stay as faint white washes so the white copy keeps
   its contrast. */
.offer__gift-metric,
.roi__metrics > div,
.roi__panel {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
}

.roi__revenue {
  border-color: rgba(255, 255, 255, 0.22);
}

.badge--ok {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* The eyebrow inside a green panel inverts instead of using the light
   mint pill, which would disappear into the panel. */
.kicker--light {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn--on-dark {
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff;
}

.btn--on-dark:hover {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* The accent word inside a heading uses .grad, which resolves to dark
   emerald — unreadable on the deep green panels. Inside them it flips to
   a light mint so the accent still reads as an accent. */
.roi .grad,
.cmp__col--good .grad,
.offer__gift .grad,
.cta-final__box .grad {
  color: #6ee7b7;
}

/* The "+" badge joining the gift card to the price card. */
.offer__gift-plus {
  border-color: var(--surface);
  color: #fff;
}

/* ============================================================
   FREE ANALYSIS CTA — a brighter growth signal in nav + footer
   ============================================================ */
.free-analysis-cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  overflow: hidden;
  padding: 8px 12px;
  border: 1px solid rgba(4, 120, 87, 0.76);
  border-radius: var(--radius-pill);
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.3), transparent 36%),
    linear-gradient(135deg, #065f46 0%, #059669 55%, #10b981 100%);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.24);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.free-analysis-cta::before,
.footer__free-analysis::before {
  position: absolute;
  inset: -70% auto -70% -35%;
  z-index: -1;
  width: 26%;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: rotate(16deg);
  animation: free-analysis-shimmer 4.8s var(--ease) infinite;
}

.free-analysis-cta:hover {
  border-color: #34d399;
  box-shadow: 0 14px 30px rgba(5, 150, 105, 0.33);
  color: #fff;
  transform: translateY(-2px);
}

/* The header CTA sits on a white nav, so keep it light and compact instead
   of using the heavier green gradient used in the hero/footer CTAs. */
.free-analysis-cta--header {
  border-color: var(--line);
  background: var(--bg-tint);
  box-shadow: none;
  color: var(--primary-hover);
}

.free-analysis-cta--header:hover {
  border-color: var(--line-strong);
  background: #dff7eb;
  box-shadow: var(--shadow-sm);
  color: var(--primary-hover);
}

.free-analysis-cta--header .free-analysis-cta__spark {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--primary);
}

.free-analysis-cta--header .free-analysis-cta__arrow {
  color: var(--primary);
}

.free-analysis-cta--header,
.mobile-menu .free-analysis-cta--mobile {
  border-radius: var(--radius);
}

.free-analysis-cta:focus-visible,
.footer__free-analysis:focus-visible {
  outline: 3px solid rgba(52, 211, 153, 0.34);
  outline-offset: 3px;
}

.free-analysis-cta__spark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #d1fae5;
}

.free-analysis-cta__spark svg {
  width: 14px;
  height: 14px;
}

.free-analysis-cta__arrow {
  display: inline-flex;
  transition: transform var(--t) var(--ease);
}

.free-analysis-cta__arrow svg {
  width: 17px;
  height: 17px;
}

.free-analysis-cta:hover .free-analysis-cta__arrow,
.footer__free-analysis:hover .free-analysis-cta__arrow {
  transform: translateX(-3px);
}

.mobile-menu .free-analysis-cta--mobile {
  display: flex;
  width: 100%;
  min-height: 48px;
  margin: 8px 0 4px;
  padding: 11px 14px;
  border: 1px solid rgba(4, 120, 87, 0.76);
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
}

.mobile-menu .free-analysis-cta--mobile:hover {
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.3), transparent 36%),
    linear-gradient(135deg, #064e3b 0%, #047857 55%, #059669 100%);
  color: #fff;
}

.footer__col .footer__free-analysis {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  width: 100%;
  margin: 12px 0 10px;
  padding: 13px 14px;
  border: 1px solid #bdebd2;
  border-radius: 13px;
  background: var(--bg-tint);
  box-shadow: 0 8px 20px rgba(6, 95, 70, 0.09);
  color: var(--primary-hover);
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.footer__col .footer__free-analysis:hover {
  border-color: var(--primary);
  background: #dff7eb;
  box-shadow: 0 12px 26px rgba(6, 95, 70, 0.14);
  color: var(--primary-hover);
  transform: translateY(-2px);
}

.footer__free-analysis::before {
  display: none;
}

.footer__free-analysis-head {
  display: flex;
  align-items: center;
  gap: 7px;
}

.footer__free-analysis-head strong {
  color: #064e3b;
  font-size: 13px;
  font-weight: 800;
}

.footer__free-analysis .free-analysis-cta__spark {
  border-color: rgba(5, 150, 105, 0.2);
  background: #fff;
  color: var(--primary);
}

.footer__free-analysis-head .free-analysis-cta__arrow {
  margin-inline-start: auto;
  color: var(--primary);
}

.footer__col .footer__free-analysis small {
  color: #4b6b5d;
  font-size: 10.5px;
  line-height: 1.65;
}

@keyframes free-analysis-shimmer {
  0%,
  70% {
    left: -35%;
  }
  100% {
    left: 125%;
  }
}

@media (max-width: 1180px) and (min-width: 861px) {
  .nav__actions .js-video {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .free-analysis-cta::before,
  .footer__free-analysis::before {
    animation: none;
  }
}