/* ============================================================
   GlowNow — «Нить / The Thread»
   Colour tokens are AA-verified. Do not substitute brand cyan
   (#1FBCC4) for any text role: it is 2.19:1 on Paper.
   Text roles use --cyan-text / --clay-text.
   ============================================================ */

:root {
  /* fields */
  --paper:        #F6F9F9;
  --surface:      #FFFFFF;
  --ink:          #072429;
  --ink-soft:     #0D3339;

  /* text on light */
  --text:         #0B2429;   /* 15.28:1 on paper */
  --muted:        #4A5F63;   /*  6.38:1 on paper */
  --cyan-text:    #0F7176;   /*  5.44:1 on paper */
  --clay-text:    #B0523C;   /*  4.82:1 on paper */

  /* text on ink */
  --on-ink:       #E8F2F2;   /* 14.24:1 on ink */
  --on-ink-muted: #9DB6B8;   /*  7.59:1 on ink */
  --cyan-on-ink:  #3FD8DF;   /*  9.35:1 on ink */

  /* graphic-only brand colour */
  --cyan:         #1FBCC4;
  --mint:         #6BFBDA;
  --clay:         #D8654A;   /* large figures only (>=24px): 3.37:1 */

  --line:         #DCE7E7;
  --line-ink:     rgba(232, 242, 242, 0.16);

  --shadow-sm: 0 1px 2px rgba(7, 36, 41, 0.06), 0 4px 8px rgba(7, 36, 41, 0.04);
  --shadow-md: 0 2px 4px rgba(7, 36, 41, 0.05), 0 8px 20px rgba(7, 36, 41, 0.07);

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 10px;

  --shell: 1240px;
  --gutter: clamp(20px, 4vw, 40px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* z-scale */
  --z-thread: 1;
  --z-raised: 2;
  --z-bar: 40;
  --z-header: 50;
  --z-menu: 60;
  --z-skip: 100;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: Rubik, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* No single long word may force horizontal scroll, including at 200% zoom. */
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── Typography scale ───────────────────────────────────── */
h1 {
  margin: 0;
  font-size: clamp(2.5rem, 5.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h3 {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.lead {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  color: var(--muted);
}
.field-ink .lead { color: var(--on-ink-muted); }

/* Hebrew and Arabic must not inherit Latin display metrics. */
:lang(he) { letter-spacing: normal; }
:lang(he) h1 { line-height: 1.28; letter-spacing: normal; }
:lang(he) h2 { line-height: 1.3;  letter-spacing: normal; }
:lang(he) h3 { line-height: 1.4;  letter-spacing: normal; }
:lang(ar) { letter-spacing: normal; }
:lang(ar) h1 { line-height: 1.5; letter-spacing: normal; }
:lang(ar) h2 { line-height: 1.5; letter-spacing: normal; }
:lang(ar) h3 { line-height: 1.6; letter-spacing: normal; }
:lang(ar) body, :lang(ar) p, :lang(ar) li { line-height: 1.85; }
:lang(he) .kicker, :lang(ar) .kicker { text-transform: none; letter-spacing: normal; }

/* business figures: tabular within Rubik, never a fallback-prone mono */
.calc-figure, .calc-annual strong, .calc-panel input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Utilities ──────────────────────────────────────────── */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
/* em units resolve against each element's own size, so the display measure
   scales with the heading instead of being throttled by the body font. */
.measure { max-width: none; }
.measure h2 { max-width: 15em; }
.measure .lead, .measure > p { max-width: 34em; }
.measure .ticks { max-width: 32em; }
:lang(ar) .measure h2, :lang(he) .measure h2 { max-width: 17em; }

.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;
}
.skip-link {
  position: fixed; z-index: var(--z-skip);
  inset-block-start: 12px; inset-inline-start: 12px;
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: translateY(0); }

:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan-text);
  outline-offset: 2px;
  border-radius: 4px;
}
.field-ink :where(a, button, summary):focus-visible { outline-color: var(--mint); }

.section { padding-block: clamp(72px, 8vw, 104px); position: relative; }
.section.chapter { padding-block: clamp(96px, 11vw, 160px); }

/* ── The Thread ─────────────────────────────────────────────
   Signature, not scaffolding. A hairline in the outer gutter,
   present but quiet; it never occupies content width and is
   suppressed entirely below 1180px so mobile loses no space.  */
@media (min-width: 1180px) {
  main { position: relative; }
  main::before {
    content: "";
    position: absolute;
    z-index: var(--z-thread);
    inset-block: 0;
    inset-inline-start: max(calc((100% - var(--shell)) / 2 - 28px), 24px);
    width: 1px;
    background: linear-gradient(
      to bottom,
      transparent 0,
      rgba(31, 188, 196, 0.28) 6%,
      rgba(31, 188, 196, 0.28) 94%,
      transparent 100%
    );
    pointer-events: none;
  }
  /* the thread reads through the ink fields without inverting */
  .field-ink { --thread-node: var(--mint); }
}

/* nodes: the mark's spark, reused as the page's only bullet form */
.node {
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  background: var(--cyan);
  flex: 0 0 auto;
}
.node-live {
  background: #2FCF8B;
  box-shadow: 0 0 0 4px rgba(47, 207, 139, 0.16);
}

/* ── Kicker: exactly one on the page ────────────────────── */
.kicker {
  margin: 0 0 20px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan-text);
}
.kicker::before {
  content: "";
  display: inline-block;
  inline-size: 6px; block-size: 6px;
  border-radius: 50%;
  background: var(--cyan);
  margin-inline-end: 10px;
  vertical-align: 0.14em;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(246, 249, 249, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 28px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; }
.brand-full { width: 138px; height: 38px; }
.brand-mark { width: 34px; height: 34px; }
.main-nav { display: flex; align-items: center; gap: 20px; margin-inline: auto; }
.main-nav a {
  text-decoration: none; color: var(--muted);
  font-size: 0.9375rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding-inline: 6px;
  transition: color 160ms var(--ease-out);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.brand-mark { display: none; }

/* Existing user: recognised, not sold to. Deliberately not a button, so the
   header carries one clear action instead of three competing ones. */
.link-login {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding-inline: 10px;
  color: var(--text); font-size: 0.9375rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color 160ms var(--ease-out);
}

/* language control — a real labelled button, not a bare select */
.lang { position: relative; }
.lang-button {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding-inline: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
  font-weight: 600; font-size: 0.875rem;
  transition: border-color 160ms var(--ease-out);
}
.lang-caret { width: 10px; height: 6px; opacity: 0.6; }
.lang-menu {
  position: absolute; z-index: var(--z-menu);
  inset-block-start: calc(100% + 8px); inset-inline-end: 0;
  min-width: 190px; margin: 0; padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.lang-menu li {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 44px; padding: 10px 12px;
  border-radius: var(--r-sm); cursor: pointer;
}
.lang-menu li span { font-weight: 700; font-size: 0.875rem; min-width: 26px; }
.lang-menu li small { color: var(--muted); font-size: 0.875rem; }
.lang-menu li[aria-selected="true"] { background: rgba(31, 188, 196, 0.1); }

/* ── Buttons ────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding-inline: 26px;
  border: 1px solid transparent; border-radius: var(--r-md);
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 180ms var(--ease-out);
}
.button-small { min-height: 44px; padding-inline: 18px; font-size: 0.9375rem; }
.button-mint { background: var(--mint); color: var(--ink); }
.button:active { transform: scale(0.97); }

.link-quiet {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--cyan-text); font-weight: 600; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 calc(50% + 0.72em);
  transition: background-size 220ms var(--ease-out);
}
[dir="rtl"] .link-quiet { background-position: 100% calc(50% + 0.72em); }

@media (hover: hover) and (pointer: fine) {
  .main-nav a:hover { color: var(--text); }
  .link-login:hover { color: var(--cyan-text); }
  .footer-wa:hover { color: var(--cyan-text); }
  .lang-button:hover { border-color: var(--cyan); }
  .lang-menu li:hover { background: rgba(31, 188, 196, 0.1); }
  .button:hover { background: var(--cyan); color: var(--ink); }
  .button-mint:hover { background: var(--cyan); }
  .link-quiet:hover { background-size: 100% 1px; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding-block: clamp(48px, 7vw, 92px) clamp(64px, 8vw, 104px); overflow: clip; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4.5vw, 64px);
}
.hero h1 { max-width: 11em; }
.hero-copy { position: relative; z-index: var(--z-raised); min-width: 0; }
.hero-lead { margin: 24px 0 0; max-width: 54ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); color: var(--muted); }
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 28px; margin-block-start: 32px;
}
.hero-note { margin: 28px 0 0; max-width: 52ch; font-size: 0.9375rem; color: var(--muted); }
.facts {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin: 24px 0 0; padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted);
}
.facts li { display: flex; align-items: center; gap: 8px; }
.facts li::before {
  content: ""; inline-size: 5px; block-size: 5px;
  border-radius: 50%; background: var(--cyan);
}

/* hero stage: chat -> thread -> record. The product story, in one object. */
.hero-stage { position: relative; min-width: 0; }
.stage-inner { position: relative; z-index: var(--z-raised); max-width: 430px; }
.chat {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.chat-top {
  display: flex; align-items: center; gap: 10px;
  padding-block-end: 14px; margin-block-end: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.chat-top small { margin-inline-start: auto; color: var(--muted); font-size: 0.8125rem; }
.bubble {
  max-width: 86%;
  margin-block-start: 10px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.bubble-client {
  margin-inline-start: auto;
  background: #EEF2F3; color: #1F3238;
  border-end-end-radius: 4px;
}
.bubble-ai {
  background: #E3F7F7; color: #0B3B40;
  border-end-start-radius: 4px;
}

.stage-link { display: flex; flex-direction: column; align-items: center; }
.stage-link-line {
  inline-size: 1px; block-size: 34px;
  background: linear-gradient(to bottom, transparent, var(--cyan));
}
.stage-link .node { margin-block-start: -4px; }

.record {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.record-title {
  margin: 0 0 14px;
  font-size: 0.9375rem; font-weight: 600; color: var(--muted);
}
.record dl { margin: 0; display: grid; gap: 10px; }
.record dl > div {
  display: grid; grid-template-columns: minmax(0, 8ch) minmax(0, 1fr); gap: 14px;
  align-items: baseline;
  font-size: 0.9375rem;
}
:lang(ru) .record dl > div, :lang(ar) .record dl > div {
  grid-template-columns: minmax(0, 10ch) minmax(0, 1fr);
}
.record dt { margin: 0; min-width: 0; color: var(--muted); font-size: 0.9375rem; }
.record dd { margin: 0; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.record-chip {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding-block-start: 14px;
  border-top: 1px solid var(--line);
  color: var(--cyan-text); font-size: 0.875rem; font-weight: 600;
}
.record-chip::before {
  content: ""; inline-size: 8px; block-size: 8px;
  border-radius: 50%; background: var(--cyan); flex: 0 0 auto;
}

.glowy-hero {
  position: absolute; z-index: var(--z-thread);
  inline-size: clamp(300px, 30vw, 430px);
  inset-inline-end: -2%;
  inset-block-end: -4%;
  pointer-events: none;
}
@media (min-width: 1400px) {
  .glowy-hero { inset-inline-end: -10%; }
}
[dir="rtl"] .glowy-hero { scale: -1 1; }

/* ── Glowy B & C — emotion portraits ──────────────────────────
   Composition, cropping, layering and RTL behaviour are complete.
   Both slots are INERT until their asset exists: --glowy-src is unset, so
   background-image resolves to `none` — no request, no 404, no layout shift.

   To activate, add the file and set the property:
     .glowy-concerned { --glowy-src: url("/assets/mascot/glowy-concerned.webp"); }
     .glowy-surprised { --glowy-src: url("/assets/mascot/glowy-surprised.webp"); }

   Required assets (transparent WebP/PNG, upper body, ~900x1100, identity
   per docs/ASSET_MAP.md — same face, hair, age, build, suit, chest mark):
     glowy-concerned  light concern / attention   -> pain section
     glowy-surprised  mild surprise at the figure -> loss calculator          */
.glowy-portrait {
  position: absolute;
  z-index: 0;                       /* always behind copy, never over it */
  pointer-events: none;
  background-image: var(--glowy-src, none);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
/* Copy always wins the stacking order in these two sections, and the
   portraits bleed past the block edge without ever creating page scroll. */
#problem, .calc-section { overflow: clip; }
#problem > .shell, .calc-section > .shell { position: relative; z-index: var(--z-raised); }

/* B — large portrait beside the heading, cropped to head/torso and bled off
   the outer edge. Sits behind the copy and above the leak row. */
.glowy-concerned {
  --glowy-src: url("/assets/mascot/glowy-concerned.webp");
  inset-inline-end: min(calc((100% - var(--shell)) / -2 - 20px), -20px);
  /* ends at 58%: clears the leak row in every language (earliest is AR 59.7%) */
  inset-block-start: 2%;
  inset-block-end: 42%;
  inline-size: clamp(360px, 38vw, 560px);
  background-size: cover;
  background-position: top center;
  /* dissolve the crop edge into the field instead of guillotining the torso */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}
/* C — large portrait reacting to the figure, on the copy side, never over
   the panel, the inputs or the result. */
.glowy-surprised {
  --glowy-src: url("/assets/mascot/glowy-surprised.webp");
  inset-inline-start: min(calc((100% - var(--shell)) / -2 - 16px), -16px);
  inset-inline-start: min(calc((100% - var(--shell)) / -2 + 24px), -24px);
  inset-block-end: -34px;
  block-size: clamp(330px, 33vw, 460px);
  inline-size: clamp(320px, 33vw, 480px);
  background-size: cover;
  background-position: top center;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 74%, transparent 99%);
}

/* ── Problem: leaks ─────────────────────────────────────── */
.field-ink { background: var(--ink); color: var(--on-ink); }
.field-ink h2, .field-ink h3 { color: var(--on-ink); }

.leaks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 1px 0 0;
  list-style: none;
  background: var(--line-ink);
}
.leaks li {
  padding: 28px 24px 30px;
  background: var(--ink);
  border-top: 2px solid var(--clay);
}
.leaks h3 { margin-block-end: 8px; }
.leaks p { margin: 0; color: var(--on-ink-muted); font-size: 0.9375rem; }

/* ── How: the flow. The thread's one loud moment. ───────── */
.flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.flow-step { position: relative; padding: 34px 20px 4px; }
.flow-step::before {  /* the connecting line */
  content: "";
  position: absolute;
  inset-block-start: 5px;
  inset-inline-start: 0; inset-inline-end: 0;
  block-size: 1px;
  background: var(--cyan);
  opacity: 0.35;
}
.flow-step:first-child::before { inset-inline-start: 20px; }
.flow-step:last-child::before  { inset-inline-end: 20px; }
.flow-step::after {   /* the node */
  content: "";
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 20px;
  inline-size: 9px; block-size: 9px;
  border-radius: 50%;
  background: var(--cyan);
}
.flow-step h3 { margin-block-end: 8px; }
.flow-step p { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.flow-step:first-child { padding-inline-start: 20px; }

.flow-proof { margin: clamp(40px, 5vw, 64px) 0 0; display: flex; justify-content: center; }
/* The source captures carry empty space below the sheet; crop to content. */
.flow-proof img, .phone img {
  inline-size: min(288px, 74vw);
  object-fit: cover;
  object-position: top center;
  border-radius: 24px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
/* The booking sheet is a supporting detail in the flow: crop to the UI itself
   rather than padding it out to a device silhouette full of empty screen. */
.flow-proof img {
  aspect-ratio: 375 / 498;
  inline-size: min(304px, 78vw);
  border-radius: 14px;
}
/* The team view is a genuine full-screen capture, so it keeps device shape. */
.phone img { aspect-ratio: 375 / 648; }

/* ── Before / after ─────────────────────────────────────── */
.compare-section { background: var(--surface); }
.compare { margin-block-start: clamp(40px, 5vw, 64px); }
.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 48px);
}
.compare-row { padding-block: 18px; border-top: 1px solid var(--line); align-items: start; }
.compare-label { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 600; }
.compare-label-before { color: var(--clay-text); }
.compare-label-after  { color: var(--cyan-text); }
.compare-before, .compare-after { margin: 0; font-size: 1rem; }
.compare-before { color: var(--muted); }
.compare-after { display: flex; gap: 10px; }
.compare-after::before {
  content: ""; flex: 0 0 auto; margin-block-start: 0.55em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cyan);
}

/* ── Calculator: an instrument ──────────────────────────── */
.calc-section { padding-block-end: calc(clamp(72px, 8vw, 104px) + 140px); }
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.calc-copy .measure { max-width: none; }
.calc-panel {
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.field + .field { margin-block-start: 20px; }
.field label {
  display: block; margin-block-end: 10px;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted);
}
.stepper {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
  /* Numerals are LTR in every supported language, so the field and its
     controls keep one reading order: minus left, value, plus right. */
  direction: ltr;
}
.stepper:focus-within { border-color: var(--cyan-text); outline: 2px solid var(--cyan-text); outline-offset: 2px; }
.stepper input {
  min-width: 0; min-height: 56px;
  border: 0; background: transparent;
  text-align: center;
  font-size: 1.375rem; font-weight: 600;
  letter-spacing: 0.01em;
}
.stepper input:focus { outline: none; }
.step {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.25rem; color: var(--muted);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .step:hover { background: rgba(31, 188, 196, 0.12); color: var(--cyan-text); }
}
.step:active { background: rgba(31, 188, 196, 0.2); }

.calc-out { margin-block-start: 30px; padding-block-start: 26px; border-top: 1px solid var(--line); }
.calc-out-label { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.calc-figure {
  margin: 6px 0 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--clay-text);
  transition: opacity 180ms var(--ease-out);
}
.calc-figure[data-len="long"] { font-size: clamp(1.75rem, 3.4vw, 2.25rem); }
.calc-figure[data-len="xlong"] { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.calc-annual {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin-block-start: 14px; padding-block-start: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem; color: var(--muted);
}
.calc-annual strong { font-size: 1.25rem; font-weight: 600; color: var(--text); }
.calc-annual strong[data-len="long"]  { font-size: 1.0625rem; }
.calc-annual strong[data-len="xlong"] { font-size: 0.9375rem; }
/* Figures are never allowed to push the layout, whatever is pasted in. */
.calc-figure, .calc-annual strong { min-width: 0; overflow-wrap: anywhere; }
.calc-out, .calc-panel, .field, .stepper { min-width: 0; }
.calc-hint { margin: 12px 0 0; font-size: 0.9375rem; color: var(--clay-text); }
.calc-disclaimer {
  margin: 24px 0 0; padding-block-start: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Capabilities: a matrix, not eight cards ────────────── */
.matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 1px 0 0;
  list-style: none;
  background: var(--line);
}
.matrix li { padding: 26px 24px 30px; background: var(--paper); }
.matrix h3 { display: flex; gap: 10px; margin-block-end: 8px; }
.matrix h3::before {
  content: ""; flex: 0 0 auto; margin-block-start: 0.45em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cyan);
}
.matrix p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* ── Product proof ──────────────────────────────────────── */
.product-section { overflow: hidden; }
.product-eyebrow {
  margin: 0 0 16px;
  font-size: 1.0625rem; font-weight: 600; color: var(--cyan-on-ink);
}
.ticks { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 12px; color: var(--on-ink); }
.ticks li::before {
  content: ""; flex: 0 0 auto; margin-block-start: 0.55em;
  inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--mint);
}
.team-section .ticks li { color: var(--text); }
.team-section .ticks li::before { background: var(--cyan); }

.crm-shot { margin: clamp(44px, 5vw, 68px) 0 0; }
.crm-frame {
  width: min(100% - (var(--gutter) * 2), 1400px);
  margin-inline: auto;
  padding: 10px;
  background: rgba(232, 242, 242, 0.06);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-lg);
}
.crm-frame img { border-radius: 8px; width: 100%; }
.crm-shot figcaption {
  margin-block-start: 16px;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--on-ink-muted);
}

/* ── AI + team ──────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.phone { margin: 0; display: flex; justify-content: center; }

/* ── Onboarding ─────────────────────────────────────────── */
.setup-section { background: var(--surface); }
.setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 1px 0 0;
  list-style: none;
  background: var(--line);
  counter-reset: setup;
}
.setup li { padding: 26px 24px 30px; background: var(--surface); counter-increment: setup; }
.setup h3 { margin-block-end: 8px; }
.setup h3::before {
  content: counter(setup, decimal-leading-zero);
  display: block;
  margin-block-end: 12px;
  font-size: 0.8125rem; font-weight: 600; color: var(--cyan-text);
  font-variant-numeric: tabular-nums;
}
.setup p { margin: 0; color: var(--muted); font-size: 0.9375rem; }

/* ── Languages ──────────────────────────────────────────── */
.lang-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.lang-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  margin: 0; padding: 1px 0 0; list-style: none; background: var(--line);
}
.lang-list li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 22px 20px; background: var(--paper);
}
.lang-list span { font-size: 1.25rem; font-weight: 700; }
.lang-list small { color: var(--muted); font-size: 0.9375rem; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { margin-block-start: clamp(32px, 4vw, 48px); max-width: 78ch; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 14px;
  min-height: 44px; padding-block: 20px;
  cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; margin-inline-start: auto;
  inline-size: 11px; block-size: 11px;
  border-inline-end: 1.5px solid var(--cyan-text);
  border-block-end: 1.5px solid var(--cyan-text);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 200ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { margin: -4px 0 22px; max-width: 66ch; color: var(--muted); }

/* ── Final CTA ──────────────────────────────────────────── */
.final-section { overflow: hidden; }
.final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.66fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
}
.final-copy { position: relative; z-index: var(--z-raised); }
.final-copy .button { margin-block-start: 32px; }
.glowy-final {
  inline-size: min(580px, 100%);
  margin-inline-start: auto;
  margin-block-end: calc(clamp(96px, 11vw, 160px) * -1);
  align-self: end;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer { padding-block: 36px 40px; border-top: 1px solid var(--line); }
.footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
  font-size: 0.9375rem; color: var(--muted);
}
.footer-inner img { width: 122px; height: auto; }
.footer-wa {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;
  color: var(--text); font-weight: 600; text-decoration: none;
  transition: color 160ms var(--ease-out);
}
.footer-wa svg { flex: 0 0 auto; color: var(--cyan-text); }
.footer-wa-number { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.footer-inner p { margin: 0; }
.footer-wa { flex-grow: 1; }
.footer-copy { unicode-bidi: isolate; text-align: end; }

/* ── Mobile action bar (thumb zone) ─────────────────────── */
.mobile-bar {
  position: fixed; z-index: var(--z-bar);
  inset-inline: 0; inset-block-end: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 249, 249, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 240ms var(--ease-out);
}
.mobile-bar[data-visible="true"] { transform: translateY(0); }
.mobile-bar .button { width: 100%; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 640px; }
  .hero-stage { max-width: 560px; }
  .stage-inner { max-width: 100%; }
  .glowy-hero { inline-size: 240px; inset-inline-end: -4%; inset-block-end: -6%; }
  .calc-grid, .team-grid, .lang-grid { grid-template-columns: minmax(0, 1fr); }
  .final-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding-block: clamp(56px, 12vw, 72px); }
  .section.chapter { padding-block: clamp(72px, 15vw, 96px); }

  h1 { font-size: clamp(2rem, 9.2vw, 2.5rem); letter-spacing: -0.015em; }
  :lang(ar) h1 { font-size: clamp(1.875rem, 8.4vw, 2.25rem); }
  h2 { font-size: clamp(1.625rem, 6.4vw, 1.9rem); }
  .measure, .measure h2 { max-width: none; }

  /* Both platform entries stay in the mobile header. The wordmark yields to
     the official mark to buy the width — icon-only use it is made for. */
  /* Fits one row at normal size; reflows instead of overflowing at 200% text zoom. */
  .header-inner { min-height: 62px; gap: 8px; flex-wrap: wrap; row-gap: 6px; padding-block: 6px; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .brand-full { display: block; width: 114px; height: 31px; }
  .brand-mark { display: none; }
  .header-actions { margin-inline-start: auto; gap: 4px; }
  .lang-button { padding-inline: 9px; gap: 5px; font-size: 0.8125rem; }
  .link-login { padding-inline: 6px; font-size: 0.875rem; }
  .header-actions .button-small {
    min-height: 40px; padding-inline: 12px; font-size: 0.875rem;
  }

  /* ── Mobile hero: fewer elements so the product appears sooner ──
     Nothing is deleted from the site — the register button lives in the
     drawer, the calculator link in the navigation, and the note and fact
     row are re-stated by the sections further down. */
  .hero { padding-block: 24px 36px; }
  .hero-actions { display: grid; gap: 4px; margin-block-start: 20px; }
  .hero-actions .button { width: 100%; }
  .hero-actions .link-quiet { display: none; }   /* single CTA on mobile */
  .hero .kicker { margin-block-end: 14px; }
  .hero-lead { margin-block-start: 17px; }
  .hero-note { display: none; }
  .hero .facts { display: none; }
  .header-actions > .button-small { display: none; }  /* register: drawer only */

  /* Product proof enters the first screens; Glowy is not forced
     into the fold at a size where she would be cropped. */
  .hero-stage { margin-block-start: 24px; max-width: none; }
  /* Glowy leans in over the top corner of the product card. She sits
     BEHIND the card and bleeds off the inline edge, so she adds character
     without covering a single word and without changing hero height. */
  .glowy-hero {
    display: block;
    position: absolute;
    z-index: 1;                       /* .stage-inner is z-index 2 */
    inline-size: 126px;
    inset-inline-end: -34px;
    inset-block-start: -92px;
    inset-block-end: auto;
    pointer-events: none;
  }
  [dir="rtl"] .glowy-hero { inset-inline-end: -6px; transform: scaleX(-1); }
  /* a whisper of brand light so the corner is not a sterile white sheet */
  .hero-stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset-inline-end: -80px;
    inset-block-start: -140px;
    inline-size: 280px; block-size: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 188, 196, 0.22), rgba(31, 188, 196, 0) 66%);
    pointer-events: none;
  }
  .bubble { max-width: 92%; font-size: 0.9375rem; }

  .leaks li, .matrix li, .setup li { padding: 22px 18px 24px; }

  /* A short band at the foot of each section hosts a large head/shoulders
     crop that bleeds off the inline edge. Costs ~120px per section, not
     several hundred, and never displaces or covers content. */
  #problem { padding-block-end: calc(clamp(72px, 15vw, 96px) + 132px); }
  /* Band trimmed: she now rises from behind the card, so less room is needed
     below her, and the next section still opens on the natural pause. */
  .calc-section { padding-block-end: calc(clamp(56px, 12vw, 72px) + 130px); }

  .glowy-concerned {
    inset-inline-end: -12%;
    inset-block-start: auto; inset-block-end: -14px;
    inline-size: 250px; block-size: 190px;
    background-position: top center;
  }
  /* Larger render scale (face + shoulders, ~1.5x), lifted so her head rises
     from behind the lower edge of the calculator card. She stays behind the
     card in the stacking order, so nothing on it is ever obscured. */
  .glowy-surprised {
    inset-inline-start: auto; inset-inline-end: -13%;
    inset-block-start: auto; inset-block-end: -6px;
    inline-size: 350px; block-size: 236px;
    background-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 90%, transparent 100%);
  }

  .flow { gap: 0; }
  .flow-step {
    padding: 0;
    padding-block-end: 22px;
    padding-inline-start: 26px;   /* logical: mirrors correctly in RTL */
  }
  .flow-step:first-child { padding-inline-start: 26px; }
  .flow-step::before {   /* vertical thread on mobile — no width cost */
    inset-block: 6px 0;
    inset-inline-start: 3px; inset-inline-end: auto;
    inline-size: 1px; block-size: auto;
  }
  .flow-step:last-child::before { inset-block-end: auto; block-size: 0; }
  .flow-step::after { inset-block-start: 6px; inset-inline-start: 0; }

  /* Both states stay on screen together: one row = one pair. */
  .compare-head { display: none; }
  .compare-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 18px;
  }
  .compare-before, .compare-after { display: block; }
  .compare-before::before, .compare-after::before {
    content: attr(data-label);
    display: block;
    inline-size: auto; block-size: auto;
    margin: 0 0 3px;
    border-radius: 0; background: none;
    font-size: 0.8125rem; font-weight: 600;
  }
  .compare-before::before { color: var(--clay-text); }
  .compare-after::before { color: var(--cyan-text); }
  .compare-after { padding-inline-start: 16px; border-inline-start: 2px solid var(--cyan); }
  /* The key is set once; colour and the rule carry it for the rest. */
  .compare-row:not(:first-of-type) .compare-before::before,
  .compare-row:not(:first-of-type) .compare-after::before { content: none; }

  .stepper { grid-template-columns: 56px minmax(0, 1fr) 56px; }
  .stepper input { min-height: 60px; font-size: 1.5rem; }

  .lang-list { grid-template-columns: minmax(0, 1fr); }

  .final-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  /* Big on mobile, but cropped to head/torso so she costs height instead of
     stealing it: the frame is fixed and she bleeds past its lower edge. */
  .glowy-final {
    inline-size: 340px;
    max-inline-size: none;
    margin-inline: auto -24px;
    margin-block: 4px calc(clamp(72px, 15vw, 96px) * -1);
  }

  .footer-copy { margin-inline-start: 0 !important; width: 100%; }
  .site-footer { padding-block-end: 96px; }  /* clears the action bar */
}


/* ============================================================
   Mobile navigation — hamburger + drawer
   Desktop is untouched: both are display:none above 760px.
   ============================================================ */
.burger { display: none; }
.menu-backdrop, .mobile-menu { display: none; }

@media (max-width: 760px) {
  .burger {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 44px; block-size: 44px;
    padding: 0; margin-inline-start: 2px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface); cursor: pointer;
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
  }
  .burger-box {
    position: relative;
    inline-size: 18px; block-size: 12px;
    display: block;
  }
  .burger-box i {
    position: absolute; inset-inline: 0;
    block-size: 1.5px; border-radius: 2px;
    background: var(--text);
    transition: transform 260ms var(--ease-out), opacity 160ms var(--ease-out);
  }
  .burger-box i:nth-child(1) { inset-block-start: 0; }
  .burger-box i:nth-child(2) { inset-block-start: 5.25px; }
  .burger-box i:nth-child(3) { inset-block-start: 10.5px; }

  /* three lines fold into an X */
  .burger[aria-expanded="true"] .burger-box i:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger-box i:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] .burger-box i:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }
  .burger:active { transform: scale(0.96); }

  /* Login lives in the drawer on mobile; the header keeps brand, language,
     the single Register button and the hamburger. */
  .header-actions > .link-login { display: none; }

  /* the hidden attribute must beat the class, or the invisible backdrop
     would keep intercepting every tap on the page */
  .menu-backdrop[hidden], .mobile-menu[hidden] { display: none; }
  .menu-backdrop {
    display: block;
    position: fixed; inset: 0; z-index: 55;
    background: rgba(7, 36, 41, 0.44);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 280ms var(--ease-out);
  }
  .menu-backdrop[data-open="true"] { opacity: 1; }

  .mobile-menu {
    display: block;
    position: fixed; z-index: 58;
    inset-block: 0; inset-inline-end: 0;
    inline-size: min(320px, 86vw);
    background: var(--paper);
    border-inline-start: 1px solid var(--line);
    box-shadow: -18px 0 48px rgba(7, 36, 41, 0.14);
    transform: translateX(102%);
    transition: transform 300ms var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  [dir="rtl"] .mobile-menu {
    box-shadow: 18px 0 48px rgba(7, 36, 41, 0.14);
    transform: translateX(-102%);
  }
  .mobile-menu[data-open="true"] { transform: translateX(0); }

  .mobile-menu-inner {
    display: flex; flex-direction: column; gap: 2px;
    padding: calc(62px + 20px) 20px calc(24px + env(safe-area-inset-bottom));
  }
  .mobile-menu-inner > a {
    display: flex; align-items: center;
    min-height: 52px; padding-inline: 14px;
    border-radius: var(--r-md);
    text-decoration: none; color: var(--text);
    font-size: 1.0625rem; font-weight: 500;
    transition: background-color 160ms var(--ease-out);
  }
  .mobile-menu-inner > a:active { background: rgba(31, 188, 196, 0.12); }
  /* the CTA keeps its own palette; the generic link rule must not win */
  .mobile-menu-inner > a.button { color: var(--paper); }
  .mobile-menu-inner > a.button:active { background: var(--ink); }
  .mobile-menu-rule {
    block-size: 1px; background: var(--line);
    margin: 14px 14px 16px;
  }
  .mobile-menu-login { color: var(--cyan-text) !important; font-weight: 600 !important; }
  .mobile-menu-inner > .button { margin-block-start: 6px; width: 100%; }

  /* staggered entrance of the drawer items */
  .mobile-menu[data-open="true"] .mobile-menu-inner > * {
    animation: menuItemIn 340ms var(--ease-out) both;
  }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(1) { animation-delay: 60ms; }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(2) { animation-delay: 95ms; }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(3) { animation-delay: 130ms; }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(4) { animation-delay: 165ms; }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(5) { animation-delay: 190ms; }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(6) { animation-delay: 210ms; }
  .mobile-menu[data-open="true"] .mobile-menu-inner > *:nth-child(7) { animation-delay: 235ms; }
}
@keyframes menuItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* page must not scroll behind the open drawer */
body.menu-open { overflow: hidden; }
/* the burger becomes the X, so the header has to stay above the drawer
   and its backdrop — otherwise the close control is unreachable */
body.menu-open .site-header { z-index: 60; }

/* ============================================================
   Motion layer
   Scoped to .motion, which JS adds only when it runs AND the user
   has not asked for reduced motion. Without JS the page renders
   fully visible and unanimated.
   Directional reveals mirror automatically: --dirx flips in RTL.
   ============================================================ */
:root { --dirx: 1; --ease-soft: cubic-bezier(0.22, 1, 0.30, 1); }
[dir="rtl"] { --dirx: -1; }

.motion [data-reveal] {
  opacity: 0;
  transition:
    opacity 680ms var(--ease-soft) calc(var(--i, 0) * 105ms),
    transform 760ms var(--ease-soft) calc(var(--i, 0) * 105ms);
  will-change: opacity, transform;
}
.motion [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

/* section headings lift further than body copy */
.motion [data-reveal="up"]      { transform: translateY(34px); }
/* copy sitting on the inline-start side slides in from that side */
.motion [data-reveal="start"]   { transform: translateX(calc(-42px * var(--dirx))); }
.motion [data-reveal="end"]     { transform: translateX(calc(42px * var(--dirx))); }
/* product visuals: settle forward rather than slide */
.motion [data-reveal="visual"]  { transform: translateY(26px) scale(0.945); }
/* card grids cascade */
.motion [data-reveal="card"]    { transform: translateY(28px) scale(0.965); }
.motion [data-reveal="row"]     { transform: translateY(22px); }

/* ── Hero intro ───────────────────────────────────────────── */
.motion .hero [data-hero] {
  opacity: 0;
  transition:
    opacity 700ms var(--ease-soft) calc(var(--d, 0) * 1ms),
    transform 820ms var(--ease-soft) calc(var(--d, 0) * 1ms);
}
.motion .hero [data-hero="lead"]    { transform: translateY(26px); }
.motion .hero [data-hero="head"]    { transform: translateY(38px); }
.motion .hero [data-hero="stage"]   { transform: translateY(30px) scale(0.97); }
.motion .hero [data-hero="record"]  { transform: translateY(24px) scale(0.96); }
.motion .hero.is-in [data-hero] { opacity: 1; transform: none; }

/* chat messages arrive from their own side, with a whisper of overshoot */
.motion .hero .bubble {
  opacity: 0;
  transition:
    opacity 460ms var(--ease-soft) calc(var(--d, 0) * 1ms),
    transform 620ms cubic-bezier(0.20, 1.16, 0.34, 1) calc(var(--d, 0) * 1ms);
}
.motion .hero .bubble-client { transform: translate(calc(26px * var(--dirx)), 16px); }
.motion .hero .bubble-ai     { transform: translate(calc(-26px * var(--dirx)), 16px); }
.motion .hero.is-in .bubble  { opacity: 1; transform: none; }

/* the thread node draws once the conversation has landed */
.motion .hero .stage-link { opacity: 0; transition: opacity 500ms var(--ease-soft) calc(var(--d, 0) * 1ms); }
.motion .hero.is-in .stage-link { opacity: 1; }

/* ── Glowy: alive, never bouncing ─────────────────────────── */
.motion .glowy-hero  { animation: glowyFloat 6.5s ease-in-out 1.4s infinite; }
/* mobile: she is introduced as part of the product demo, then breathes */
@media (max-width: 760px) {
  .motion .hero .glowy-hero {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    animation: none;
    transition:
      opacity 600ms var(--ease-soft) calc(var(--d, 0) * 1ms),
      transform 640ms var(--ease-soft) calc(var(--d, 0) * 1ms);
  }
  .motion .hero.is-in .glowy-hero {
    opacity: 1;
    transform: none;
    animation: glowySettle 6s ease-in-out infinite;
    animation-delay: calc((var(--d, 0) + 700) * 1ms);
  }
  @keyframes glowySettle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-6px) rotate(0.5deg); }
  }
  .motion .hero-stage::before {
    opacity: 0;
    transition: opacity 900ms var(--ease-soft) calc(var(--d, 0) * 1ms);
  }
  .motion .hero.is-in .hero-stage::before { opacity: 1; }

  /* ── Mobile dialogue: revealed by scroll, never by the load timeline ──
     The card, its header and Glowy are all visible immediately; only the
     messages and the CRM record wait for the reader to reach them. */
  .motion .hero .bubble {
    transition:
      opacity 480ms var(--ease-soft),
      transform 480ms var(--ease-soft);
  }
  .motion .hero .bubble-client { transform: translate(calc(14px * var(--dirx)), 14px); }
  .motion .hero .bubble-ai     { transform: translate(calc(-14px * var(--dirx)), 14px); }
  /* the hero's own load sequence must not switch these on */
  .motion .hero.is-in .bubble,
  .motion .hero.is-in .stage-link,
  .motion .hero.is-in [data-hero="record"].story { opacity: 0; }
  .motion .hero.is-in [data-hero="record"].story { transform: translateY(14px); }

  .motion .hero.is-in .bubble.msg-in { opacity: 1; transform: none; }
  .motion .hero.is-in .stage-link.msg-in { opacity: 1; }
  .motion .hero.is-in [data-hero="record"].story.msg-in { opacity: 1; transform: none; }
  .motion .hero [data-hero="record"].story { transition-duration: 520ms; }
}
.motion .glowy-final { animation: glowyFloat 7.5s ease-in-out 1s infinite; }
@keyframes glowyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(0.8deg); }
}

/* ── Depth: a few px of drift as a visual crosses the viewport.
   Scroll-driven where supported, absent elsewhere. Never parallax. */
@supports (animation-timeline: view()) {
  @media (min-width: 761px) {
    .motion .crm-shot img, .motion .phone img, .motion .flow-proof img {
      animation: depthDrift linear both;
      animation-timeline: view();
      animation-range: entry 10% exit 90%;
    }
    @keyframes depthDrift { from { transform: translateY(14px); } to { transform: translateY(-14px); } }
  }
}

/* ── One-shot emphasis of the primary CTA once the hero has settled ── */
.motion .hero-actions .button.emphasise { animation: ctaPulse 900ms var(--ease-soft) 1; }
@keyframes ctaPulse {
  0%   { transform: none;             box-shadow: 0 0 0 0 rgba(31, 188, 196, 0); }
  45%  { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31, 188, 196, 0.30); }
  100% { transform: none;             box-shadow: 0 0 0 0 rgba(31, 188, 196, 0); }
}

/* ── Microinteractions ───────────────────────────────────── */
.button { transition: transform 210ms var(--ease-out), background-color 210ms var(--ease-out), box-shadow 210ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .leaks li, .matrix li, .setup li, .lang-list li {
    transition: transform 230ms var(--ease-soft), box-shadow 230ms var(--ease-soft);
  }
  .leaks li:hover, .matrix li:hover, .setup li:hover, .lang-list li:hover { transform: translateY(-4px); }
  .matrix li:hover, .setup li:hover, .lang-list li:hover { box-shadow: 0 10px 26px rgba(7, 36, 41, 0.09); }
  .leaks li:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }
  .button:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(7, 36, 41, 0.20); }
  .button-mint:hover { box-shadow: 0 10px 24px rgba(107, 251, 218, 0.28); }
  .crm-frame, .phone img, .flow-proof img { transition: transform 320ms var(--ease-soft); }
}
.button:active { transform: scale(0.97); box-shadow: none; }

/* Mobile keeps the same language at shorter distances. */
@media (max-width: 760px) {
  .motion [data-reveal="up"]     { transform: translateY(24px); }
  .motion [data-reveal="start"]  { transform: translateX(calc(-24px * var(--dirx))); }
  .motion [data-reveal="end"]    { transform: translateX(calc(24px * var(--dirx))); }
  .motion [data-reveal="visual"] { transform: translateY(20px) scale(0.965); }
  .motion [data-reveal="card"]   { transform: translateY(20px) scale(0.975); }
  .motion .hero [data-hero="head"] { transform: translateY(28px); }
  .motion .glowy-final { animation-duration: 8s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .mobile-bar { transition: none; }
  /* decorative motion off; content stays visible and functional */
  .motion [data-reveal],
  .motion .hero [data-hero],
  .motion .hero .bubble,
  .motion .hero.is-in .bubble,
  .motion .hero.is-in .stage-link,
  .motion .hero.is-in [data-hero="record"].story,
  .motion .hero .stage-link { opacity: 1 !important; transform: none !important; }
  .motion .glowy-hero, .motion .glowy-final,
  .motion .hero-actions .button.emphasise,
  .motion .crm-shot img, .motion .phone img, .motion .flow-proof img { animation: none !important; }
  .leaks li:hover, .matrix li:hover, .setup li:hover,
  .lang-list li:hover, .button:hover { transform: none !important; box-shadow: none !important; }
}