/* ===========================================================================
   123 אוטומציות — stylesheet

   Art direction "Deep Signal": full-bleed deep-violet blocks alternating with
   crisp white air. The rhythm is the design. Electric lime is the single
   accent, spent sparingly. Heebo throughout: 900 for display at tight tracking,
   500 for reading text (Hebrew needs more weight than a Latin-tuned scale).

   Token architecture is three-layer (primitive -> semantic -> component).
   Inverted sections flip the SEMANTIC layer through one `.on-dark` class
   rather than duplicating every rule.

   Logical properties throughout, so the layout mirrors between he (RTL) and
   en (LTR) without a second stylesheet.
   =========================================================================== */

/* The `hidden` attribute must actually hide.

   `[hidden]` is only a browser default of `display:none`, and it loses to any
   class that sets `display` - which is nearly every component here. The result
   is an element JavaScript believes is hidden, still laid out and still taking
   clicks. That is how the booking button became visible with no href, and how
   the advisor panel came to cover the page invisibly at z-index 96, swallowing
   taps on a phone.

   `!important` is deliberate: this has to beat component rules by design, and
   an element carrying `hidden` has no business being displayed by anything. */
[hidden] { display: none !important; }

/* Visible to assistive technology, not on screen. Used where a control is
   unmistakable by sight but has no text an assistive technology can read: a
   placeholder is not a label, it disappears on typing and is not announced
   as one. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ─────────────────── layer 1 · primitives (raw values) ─────────────────── */
:root{
  --violet-50:  #f2f1fe;
  --violet-100: #e6e4fd;
  --violet-200: #c9c5fa;
  --violet-300: #a39df8;
  --violet-500: #6d63f5;
  --violet-600: #4f46e5;   /* brand, sampled from the logo */
  --violet-700: #4038c4;
  --violet-800: #322a99;
  --violet-900: #211a63;

  --ink-950: #0d0a2b;      /* deep canvas */
  --ink-900: #150f3d;

  --lime-400: #d8ff6b;
  --lime-500: #c8ff4d;     /* accent */
  --lime-600: #a9e02a;

  --n-0:   #ffffff;
  --n-25:  #fcfcfd;
  --n-50:  #f8f8fb;
  --n-100: #f0f0f5;
  --n-200: #e4e4ec;
  --n-400: #9a99a8;
  --n-600: #5c5a6b;
  --n-900: #17161f;

  --green-600: #12783f;
  --green-500: #1c9d54;
  --red-600:   #c0392b;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-12:3rem;  --sp-16:4rem;

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --ease: cubic-bezier(.22,.75,.28,1);

  /* Heebo throughout. Hebrew needs more weight than a Latin-tuned scale, so
     body text runs at 500 rather than 400 and the whole scale sits larger. */
  --font-display:'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body:'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  --fs-display: clamp(2.8rem, 6.8vw, 5.8rem);
  --fs-h2:      clamp(2.15rem, 4.5vw, 3.6rem);
  --fs-h3:      1.42rem;
  --fs-body:    1.18rem;
  --fs-small:   .97rem;
  --fs-eyebrow: .88rem;
  --fs-numeral: clamp(3.2rem, 8vw, 7rem);

  --fw-body:    500;
  --fw-strong:  700;

  --shadow-sm: 0 1px 2px rgba(13,10,43,.06);
  --shadow-md: 0 2px 4px rgba(13,10,43,.05), 0 12px 32px -12px rgba(13,10,43,.16);
  --shadow-lg: 0 4px 8px rgba(13,10,43,.06), 0 28px 60px -24px rgba(13,10,43,.28);

  --wrap:1180px;
}

/* ─────────────────── layer 2 · semantic (purpose aliases) ─────────────── */
:root{
  --surface:        var(--n-0);
  --surface-alt:    var(--n-50);
  --surface-raised: var(--n-0);
  --text:           var(--n-900);
  --text-muted:     var(--n-600);
  --text-faint:     var(--n-400);
  --rule:           var(--n-200);
  --brand:          var(--violet-600);
  --accent:         var(--lime-500);
  --accent-ink:     var(--ink-950);   /* text that sits on the accent */
  --eyebrow-fg:     var(--violet-600);
  --focus:          var(--violet-600);
}

/* One class inverts the whole semantic layer for deep-violet blocks. */
.on-dark{
  --surface:        var(--ink-950);
  --surface-alt:    var(--ink-900);
  --surface-raised: rgba(255,255,255,.055);
  --text:           #ffffff;
  --text-muted:     #b9b4d8;
  --text-faint:     #8781ab;
  --rule:           rgba(255,255,255,.14);
  --eyebrow-fg:     var(--lime-500);
  --focus:          var(--lime-500);
  background:var(--surface);
  color:var(--text);
}

/* ─────────────────── layer 3 · component tokens ────────────────────────── */
:root{
  --btn-radius:      var(--r-sm);
  --btn-pad:         .9rem 1.7rem;
  --card-bg:         var(--surface-raised);
  --card-radius:     var(--r-lg);
  --card-border:     var(--rule);
  --field-bg:        var(--n-25);
  --field-border:    var(--n-200);
  --chip-bg:         var(--n-0);
}

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

html{
  scroll-behavior:smooth; scroll-padding-block-start:84px;
  -webkit-text-size-adjust:100%;
  /* No overflow-x:hidden here. On the root it computes overflow-y to `auto`,
     which turns html into a scroll container and silently kills
     `position:sticky` on the header — it scrolls away instead of pinning. */
}

body{
  margin:0;
  background:var(--surface);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:1.72;
  /* `clip` (not `hidden`) contains stray horizontal overflow WITHOUT creating
     a scroll container, so the sticky header keeps working. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  margin:0; font-family:var(--font-display); font-weight:800;
  line-height:1.08; letter-spacing:-.03em; color:var(--text);
}
h1{ font-size:var(--fs-display); font-weight:900; }
h2{ font-size:var(--fs-h2); font-weight:900; }
h3{ font-size:var(--fs-h3); font-weight:800; letter-spacing:-.025em; }
h4{ font-size:1.14rem; font-weight:800; }
h5{ margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video,canvas,iframe{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:3px; }
::selection{ background:var(--lime-500); color:var(--ink-950); }

.skip-link{
  position:fixed; inset-block-start:-100px; inset-inline-start:16px; z-index:200;
  background:var(--lime-500); color:var(--ink-950); padding:10px 18px;
  border-radius:0 0 8px 8px; font-weight:700; transition:inset-block-start .2s;
}
.skip-link:focus{ inset-block-start:0; }

.wrap{ width:min(var(--wrap),calc(100% - 2.75rem)); margin-inline:auto; }
.ico{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* The play triangle follows the reading direction. In Hebrew that means it
   points left AND sits to the left of the label, so `order` moves it to the
   inline-end of the button rather than leaving it at the start. */
[dir="rtl"] .ico-play{ transform:scaleX(-1); order:2; }

/* ── eyebrow ────────────────────────────────────────────────────────── */
/* A self-contained tag rather than text trailing a floating dash: the rule
   read as a stray hyphen and left the label looking undersized. */
.eyebrow{
  display:inline-flex; align-items:center;
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--eyebrow-fg);
  background:var(--violet-50); border:1px solid var(--violet-100);
  border-radius:var(--r-pill); padding:.42rem 1rem;
  margin-block-end:1.5rem; line-height:1.4;
}
.on-dark .eyebrow{
  color:var(--lime-500);
  background:rgba(200,255,77,.1); border-color:rgba(200,255,77,.26);
}

/* ── header ─────────────────────────────────────────────────────────── */
:root{ --hdr-h:72px; }

/* The header is transparent over the dark hero and only becomes a solid light
   bar once scrolled. A sticky header stays in normal flow, so the hero has to
   be pulled up underneath it (see .hero) — otherwise the white-on-transparent
   header text lands on the white page background and disappears. */
.hdr{
  position:sticky; inset-block-start:0; z-index:100;
  --hdr-fg:#ffffff; --hdr-muted:rgba(255,255,255,.78); --hdr-line:rgba(255,255,255,.2);
  color:var(--hdr-fg);
  /* the divider is a box-shadow, not a border: a border would add 1px of
     layout height and leave a hairline seam above the pulled-up hero */
  transition:background .3s,box-shadow .3s,color .3s;
}
.hdr.is-stuck{
  --hdr-fg:var(--n-900); --hdr-muted:var(--n-600); --hdr-line:var(--n-200);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--n-200);
}
.hdr-in{ display:flex; align-items:center; gap:1.2rem; min-height:var(--hdr-h); }

.brand{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; color:var(--hdr-fg,inherit); }
.brand-mark{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--violet-600); color:#fff; font-family:var(--font-display);
  font-weight:900; font-size:.85rem; letter-spacing:.02em; direction:ltr; flex:0 0 auto;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--font-display); font-weight:900; font-size:1.2rem; letter-spacing:-.03em; }
.brand-sub{ font-size:.76rem; color:var(--hdr-muted,var(--text-faint)); font-weight:500; }

.nav{ display:flex; gap:.1rem; margin-inline-start:auto; }
.nav a{
  position:relative; padding:.45rem .8rem; font-size:1.02rem; font-weight:600;
  color:var(--hdr-muted); transition:color .2s;
}
.nav a:hover,.nav a.is-active{ color:var(--hdr-fg); }
.nav a::after{
  content:''; position:absolute; inset-block-end:.12rem; inset-inline:.78rem;
  height:2px; border-radius:2px; background:var(--lime-500);
  transform:scaleX(0); transition:transform .3s var(--ease);
}
.nav a:hover::after,.nav a.is-active::after{ transform:scaleX(1); }

.hdr-actions{ display:flex; align-items:center; gap:.55rem; }
.nav + .hdr-actions{ margin-inline-start:.5rem; }

.lang{
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
  background:transparent; border:1px solid var(--hdr-line); color:var(--hdr-muted);
  padding:.4rem .74rem; border-radius:var(--r-xs); font-size:.86rem; font-weight:700;
  transition:color .2s,border-color .2s;
}
.lang:hover{ color:var(--hdr-fg); border-color:currentColor; }
.lang .ico{ width:14px; height:14px; }

.burger{ display:none; position:relative; width:40px; height:36px; background:transparent;
  border:1px solid var(--hdr-line); border-radius:var(--r-xs); cursor:pointer; padding:0; }
/* Bars are absolutely centred and offset from the middle, so the open state is
   simply "remove the offset" and both bars land on the exact same point. An
   earlier margin-based version guessed the gap and produced a chevron: the
   button is a fixed height, so row spacing was set by the box, not the margins. */
.burger span{
  position:absolute; left:50%; top:50%;
  width:17px; height:2px; background:var(--hdr-fg); border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s;
}
.burger span:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
.burger span:nth-child(2){ transform:translate(-50%,-50%); }
.burger span:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--btn-pad); border-radius:var(--btn-radius); cursor:pointer;
  font-family:var(--font-body); font-weight:700; font-size:1.07rem;
  border:1px solid transparent; white-space:nowrap;
  transition:transform .2s var(--ease),background .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btn-sm{ padding:.55rem 1.1rem; font-size:.96rem; }

/* accent = the primary action on dark ground */
.btn-accent{ background:var(--lime-500); color:var(--ink-950); }
.btn-accent:hover{ background:var(--lime-400); transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(200,255,77,.7); }

/* primary = the primary action on light ground */
.btn-primary{ background:var(--violet-600); color:#fff; }
.btn-primary:hover{ background:var(--violet-700); transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(79,70,229,.85); }
.hdr .btn-primary{ background:var(--lime-500); color:var(--ink-950); }
.hdr.is-stuck .btn-primary{ background:var(--violet-600); color:#fff; }

.btn-onDark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.28); color:#fff; }
.btn-onDark:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }

.btn-wa{ background:transparent; border-color:var(--green-500); color:var(--green-600); }
.btn-wa:hover{ background:var(--green-600); color:#fff; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* ── hero ───────────────────────────────────────────────────────────── */
#top{ display:block; height:0; }
.hero{
  position:relative; overflow:hidden;
  /* slide up under the sticky header so it reads as one full-bleed block */
  margin-block-start:calc(-1 * var(--hdr-h));
  padding-block:calc(clamp(4.5rem,10vw,8.5rem) + var(--hdr-h)) clamp(4rem,8vw,7rem);
  background:
    radial-gradient(120% 90% at 50% -10%, var(--violet-800) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
}
.hero-net{ position:absolute; inset:0; width:100%; height:100%; opacity:.75; pointer-events:none; }
.hero-glow{
  position:absolute; inset-block-start:-30%; inset-inline-start:50%;
  width:900px; height:640px; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(109,99,245,.5) 0%, transparent 62%);
  filter:blur(30px); pointer-events:none;
}
.hero-in{ position:relative; text-align:center; max-width:960px; }

.hero h1{ display:flex; flex-direction:column; gap:.12em; align-items:center; }
/* the accent line: white type over a solid lime rule, never a smear */
.mark{ position:relative; display:inline-block; padding-block-end:.1em; }
.mark::after{
  content:''; position:absolute; inset-block-end:0; inset-inline:0;
  height:7px; border-radius:4px; background:var(--lime-500);
}

.hero .lead{
  margin-block-start:1.7rem; margin-inline:auto; max-width:60ch;
  font-size:clamp(1.16rem,1.5vw,1.4rem); color:var(--text-muted);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start:2.3rem; justify-content:center; }
.hero-trust{
  margin-block-start:2.4rem; padding-block-start:1.4rem;
  border-block-start:1px solid var(--rule); display:inline-block;
  font-size:.96rem; color:var(--text-faint); font-weight:600;
}

/* ── product mockups ────────────────────────────────────────────────────
   These show the product instead of describing it. Everything is CSS + inline
   SVG — no images — so they stay sharp at any density and cost no requests.

   A mock sits inside `.on-dark`, where the semantic tokens are inverted, so
   each one re-flips them locally back to the light values. That keeps every
   child rule token-driven instead of hard-coding colours per element. */
.mock{
  --surface:var(--n-0); --surface-alt:var(--n-50);
  --text:var(--n-900); --text-muted:var(--n-600); --text-faint:var(--n-400);
  --rule:var(--n-200);
  position:relative;
  background:var(--surface); color:var(--text);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08);
  text-align:start;
}

.showcase{
  position:relative; margin-block-start:clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:minmax(0,1fr) 290px;
  align-items:end; gap:1.4rem;
}
.mock-note{
  margin-block-start:1rem; text-align:center;
  font-size:.81rem; color:var(--text-faint); letter-spacing:.04em;
}

/* window chrome */
.mock-bar{
  display:flex; align-items:center; gap:.4rem;
  padding:.7rem 1rem; background:var(--surface-alt);
  border-block-end:1px solid var(--rule);
}
.dot{ width:8px; height:8px; border-radius:50%; }
.d1{ background:#e0655b; } .d2{ background:#e3b04b; } .d3{ background:#59a06a; }
.mock-title{ margin-inline-start:.6rem; font-size:.84rem; font-weight:700; color:var(--text-muted); }
.mock-live{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:.34rem;
  font-size:.65rem; font-weight:800; color:#12783f;
  background:rgba(28,157,84,.1); border-radius:var(--r-pill); padding:.14rem .5rem;
}
.mock-live i{ width:5px; height:5px; border-radius:50%; background:#1c9d54; animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.25;} }

.mock-body{ padding:1rem; display:grid; gap:.8rem; }
.mock-h{ display:block; font-size:.76rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-faint); margin-block-end:.5rem; }

/* KPI tiles */
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.kpi{ padding:.7rem .8rem; border:1px solid var(--rule); border-radius:var(--r-md); background:var(--surface-alt); }
.kpi-l{ display:block; font-size:.73rem; color:var(--text-faint); font-weight:600; }
.kpi-v{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:1.56rem; line-height:1.2; letter-spacing:-.03em; color:var(--text); direction:ltr;
}
.kpi-v small{ font-size:.6rem; font-weight:700; margin-inline-start:.15rem; color:var(--text-faint); }
.kpi-d{ font-size:.72rem; font-weight:800; color:#12783f; }

/* area chart */
.panel-chart,.panel-pipe{
  padding:.85rem .9rem; border:1px solid var(--rule);
  border-radius:var(--r-md); background:var(--surface);
}
.chart{ width:100%; height:76px; display:block; overflow:visible; }

/* pipeline bars */
.pipe{
  display:grid; grid-template-columns:1fr 84px 26px; align-items:center; gap:.6rem;
  font-size:.81rem; color:var(--text-muted); padding-block:.24rem;
}
.pipe i{ position:relative; display:block; height:6px; border-radius:3px; background:var(--n-100); }
.pipe i::after{
  content:''; position:absolute; inset-block:0; inset-inline-start:0;
  width:var(--w); border-radius:3px; background:var(--violet-600);
}
.pipe i.win::after{ background:var(--lime-600); }
.pipe b{ font-size:.83rem; font-weight:800; color:var(--text); text-align:end; direction:ltr; }

/* ── whatsapp: the AI agent talking to the owner ─────────────────────── */
.mock-wa{ margin-inline-start:-70px; z-index:2; align-self:end; }
.wa-top{
  display:flex; align-items:center; gap:.6rem;
  background:#075e54; color:#fff; padding:.65rem .8rem;
}
.wa-av{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--lime-500); color:var(--ink-950);
  font-family:var(--font-display); font-weight:900; font-size:.68rem; direction:ltr;
}
.wa-id{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.wa-id b{ font-size:.8rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wa-id em{ font-size:.62rem; font-style:normal; color:rgba(255,255,255,.72); }

.wa-body{
  background:#e6ddd4; padding:.7rem; display:flex; flex-direction:column; gap:.45rem;
  min-height:190px;
}
.bub{
  max-width:90%; padding:.5rem .62rem; border-radius:10px;
  font-size:.82rem; line-height:1.55; color:#111b21;
  box-shadow:0 1px 1px rgba(0,0,0,.13);
}
.bub.in{ background:#fff; margin-inline-end:auto; border-start-start-radius:3px; }
.bub.out{ background:#d9fdd3; margin-inline-start:auto; border-start-end-radius:3px; }
.bub-ico{ margin-inline-end:.25rem; }
.bub-t{ display:block; text-align:end; font-style:normal; font-size:.6rem; color:#667781; margin-block-start:.15rem; }
.wa-input{
  background:var(--surface); padding:.5rem .7rem;
  border-block-start:1px solid var(--rule);
}
.wa-input span{
  display:block; background:var(--surface-alt); border:1px solid var(--rule);
  border-radius:var(--r-pill); padding:.32rem .8rem; font-size:.7rem; color:var(--text-faint);
}

/* ── mini visuals inside the control cards (on dark) ─────────────────── */
/* The mini visuals appear on BOTH grounds (light domain cards, dark control
   cards), so every colour comes from the semantic layer. Only the fill is
   overridden for the inverted case. */
.mini{
  margin-block-start:1.15rem; padding:.8rem;
  background:var(--surface-alt); border:1px solid var(--rule); border-radius:var(--r-md);
}
.on-dark .mini{ background:rgba(0,0,0,.26); }
.mini svg{ width:100%; height:64px; display:block; }
.mini-row{ display:flex; gap:.5rem; margin-block-end:.6rem; }
.mini-chip{
  flex:1; padding:.4rem .55rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); border:1px solid var(--rule);
}
.mini-chip b{
  display:block; font-family:var(--font-display); font-weight:900; font-size:1rem;
  color:var(--text); direction:ltr; letter-spacing:-.02em;
}
.mini-chip span{ font-size:.62rem; color:var(--text-faint); }

.alert{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.55rem;
  padding:.52rem .55rem; border-radius:var(--r-sm); font-size:.83rem; color:var(--text-muted);
}
.alert + .alert{ margin-block-start:.3rem; }
.alert i{ width:7px; height:7px; border-radius:50%; background:var(--violet-300); }
.alert em{ font-style:normal; font-size:.62rem; color:var(--text-faint); }
.alert.hot{ background:rgba(200,255,77,.1); color:var(--text); }
.alert.hot i{ background:var(--lime-500); animation:pulse 1.8s infinite; }
.alert.warn i{ background:#e3b04b; }

.rep-h{ margin-block-end:.55rem; padding-block-end:.5rem; border-block-end:1px solid var(--rule); }
.rep-h b{ display:block; font-size:.78rem; font-weight:800; color:var(--text); }
.rep-h span{ font-size:.62rem; color:var(--text-faint); }
.rep{
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.55rem;
  font-size:.82rem; color:var(--text-muted); padding-block:.2rem;
}
.rep b{ font-weight:800; color:var(--text); direction:ltr; font-size:.76rem; }
.rep em{ font-style:normal; font-size:.64rem; font-weight:800; direction:ltr; }
.rep em.up{ color:var(--lime-600); }
.on-dark .rep em.up{ color:var(--lime-500); }

/* ── business domains ───────────────────────────────────────────────── */
.dom-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.dom-card{
  display:flex; flex-direction:column;
  padding:1.5rem 1.4rem;
  background:var(--n-0); border:1px solid var(--rule); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.dom-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet-200); }
.dom-head{ display:flex; align-items:center; gap:.65rem; margin-block-end:.6rem; }
.dom-ico{
  width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--violet-600); color:#fff;
}
.dom-ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dom-card > p{ color:var(--text-muted); font-size:1.03rem; }
.dom-card .mini{ margin-block-start:auto; }

/* lead-source bars */
.src{
  display:grid; grid-template-columns:1fr 56px 24px; align-items:center; gap:.5rem;
  font-size:.81rem; color:var(--text-muted); padding-block:.22rem;
}
.src i{ position:relative; display:block; height:6px; border-radius:3px; background:var(--n-100); }
.on-dark .src i{ background:rgba(255,255,255,.12); }
.src i::after{
  content:''; position:absolute; inset-block:0; inset-inline-start:0;
  width:var(--w); border-radius:3px; background:var(--violet-600);
}
.src i.win::after{ background:var(--lime-600); }
.src b{ font-size:.82rem; font-weight:800; color:var(--text); text-align:end; direction:ltr; }

.mini-foot{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-block-start:.6rem; padding-block-start:.55rem; border-block-start:1px solid var(--rule);
  font-size:.79rem; color:var(--text-faint);
}
.mini-foot b{ font-size:.82rem; font-weight:800; color:var(--text); direction:ltr; }
.mini-foot.two{ justify-content:flex-start; gap:1.6rem; }
.mini-foot.two span{ display:flex; flex-direction:column; }
.mini-foot.two b{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:-.02em; }
.mini-foot.two em{ font-style:normal; font-size:.66rem; color:var(--text-faint); }

/* sales toasts */
.toast{
  display:flex; align-items:center; gap:.55rem;
  padding:.55rem .6rem; border-radius:var(--r-sm);
  background:var(--n-0); border:1px solid var(--rule); font-size:.82rem;
}
.on-dark .toast{ background:rgba(255,255,255,.05); }
.toast + .toast{ margin-block-start:.4rem; }
.toast-ico{ flex:0 0 auto; }
.toast b{ display:block; font-weight:700; color:var(--text); }
.toast em{ font-style:normal; font-size:.66rem; color:var(--text-faint); direction:ltr; }
.win-toast{ border-color:var(--lime-600); background:rgba(200,255,77,.14); }

/* task / invoice rows */
.task{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .1rem; font-size:.82rem; color:var(--text-muted);
}
.task + .task{ border-block-start:1px solid var(--rule); }
.task .inv{ font-weight:800; color:var(--text); }
.pill{
  flex:0 0 auto; font-style:normal; font-size:.72rem; font-weight:800;
  padding:.14rem .5rem; border-radius:var(--r-pill); white-space:nowrap;
}
.pill.go{ background:var(--violet-50); color:var(--violet-700); }
.pill.ok{ background:rgba(28,157,84,.12); color:#12783f; }
.pill.wait{ background:var(--n-100); color:var(--text-muted); }
.pill.late{ background:rgba(192,57,43,.1); color:#c0392b; }
.on-dark .pill.go{ background:rgba(109,99,245,.22); color:var(--violet-200); }
.on-dark .pill.wait{ background:rgba(255,255,255,.1); color:var(--text-muted); }

/* ── sections ───────────────────────────────────────────────────────── */
.sec{ padding-block:clamp(3.8rem,7.5vw,7rem); position:relative; }
.sec-tight{ padding-block:clamp(2.6rem,5vw,4.5rem); }
.sec-alt{ background:var(--surface-alt); }
.sec-block{ }
.sec-head{ max-width:740px; margin-inline:auto; text-align:center; margin-block-end:clamp(2.4rem,4.5vw,3.8rem); }
.sec-lead{ margin-block-start:1.2rem; color:var(--text-muted); font-size:1.22rem; }
.ta-start{ text-align:start; }

/* ── the 1·2·3 promise ──────────────────────────────────────────────── */
/* One hairline spanning all three columns, with the numerals hanging beneath
   it. A per-item rule was tried first and rendered inconsistently under RTL
   (inset-inline + a fixed-angle gradient do not agree), so the sequence is
   drawn once on the container instead. */
.three{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.6vw,2.4rem);
  border-block-start:2px solid var(--violet-100); padding-block-start:2.2rem;
}
.three-item{ position:relative; }
.three-n{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:var(--fs-numeral); line-height:.85; letter-spacing:-.05em;
  color:var(--violet-600); direction:ltr;
  margin-block-end:.5rem;
}
.three-item h3{ margin-block-end:.6rem; }
.three-item p{ color:var(--text-muted); font-size:1.09rem; }

/* ── stats ──────────────────────────────────────────────────────────── */
.stats{ padding-block:0 clamp(3rem,6vw,5rem); }
.stats-in{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--rule);
}
.stat{ padding:2.1rem 1.3rem; text-align:center; border-inline-start:1px solid var(--rule); }
.stat:first-child{ border-inline-start:0; }
.stat .num{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.3rem,4.2vw,3.4rem); letter-spacing:-.045em; direction:ltr;
  color:var(--violet-600); line-height:1;
}
.stat span{ display:block; margin-block-start:.6rem; font-size:.96rem; color:var(--text-faint); font-weight:600; }

/* ── service cards ──────────────────────────────────────────────────── */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.card{
  position:relative; padding:1.9rem 1.7rem;
  background:var(--n-0); border:1px solid var(--rule); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet-200); }
/* the dashboards/alerts card is the pillar that closes the control objection */
.card-hi{ background:linear-gradient(165deg,var(--violet-50),var(--n-0) 60%); border-color:var(--violet-200); }
.card-ico{
  width:44px; height:44px; display:grid; place-items:center; margin-block-end:1.2rem;
  border-radius:var(--r-md); background:var(--violet-600);
}
.card-ico svg{ width:21px; height:21px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.card-hi .card-ico{ background:var(--lime-500); }
.card-hi .card-ico svg{ stroke:var(--ink-950); }
.card h3{ margin-block-end:.6rem; }
.card p{ color:var(--text-muted); font-size:1.06rem; }
.tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-block-start:1.2rem; }
.tags li{
  font-size:.83rem; font-weight:600; color:var(--text-faint);
  border:1px solid var(--rule); border-radius:var(--r-pill); padding:.2rem .68rem;
}

/* ── control block (on dark) ────────────────────────────────────────── */
.ctrl{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.ctrl-card{
  padding:1.9rem 1.7rem; border-radius:var(--card-radius);
  background:rgba(255,255,255,.055); border:1px solid var(--rule);
  transition:transform .3s var(--ease),background .3s,border-color .3s;
}
.ctrl-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.09); border-color:rgba(200,255,77,.45); }
.ctrl-ico{
  width:46px; height:46px; display:grid; place-items:center; margin-block-end:1.2rem;
  border-radius:var(--r-md); background:var(--lime-500);
}
.ctrl-ico svg{ width:22px; height:22px; fill:none; stroke:var(--ink-950); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ctrl-card h3{ margin-block-end:.6rem; }
.ctrl-card p{ color:var(--text-muted); font-size:1.06rem; }
.ctrl-foot{
  margin-block-start:clamp(2rem,3.5vw,3rem); text-align:center;
  font-family:var(--font-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.28rem,2.3vw,1.8rem); color:var(--lime-500);
}

/* ── platform marquee ───────────────────────────────────────────────── */
.marquee{
  display:flex; flex-direction:column; gap:.7rem; margin-block-start:1rem;
  /* rows are width:max-content, so this MUST clip or the document grows
     several thousand px wide (and in RTL opens scrolled away from content). */
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-row{ display:flex; gap:.7rem; width:max-content; animation:slide 52s linear infinite; direction:ltr; }
.marquee-rev{ animation-direction:reverse; animation-duration:64s; }
.marquee:hover .marquee-row{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.chip{
  display:inline-flex; align-items:center; gap:.5rem; flex:0 0 auto;
  padding:.6rem 1.15rem; border-radius:var(--r-pill);
  background:var(--chip-bg); border:1px solid var(--rule); color:var(--text-muted);
  font-weight:600; font-size:.99rem; white-space:nowrap;
  transition:color .25s,border-color .25s;
}
.chip:hover{ color:var(--text); border-color:var(--violet-300); }
.chip i{ width:6px; height:6px; border-radius:50%; background:var(--violet-600); flex:0 0 auto; }

/* ── engineering process (on dark) ──────────────────────────────────── */
.steps{ max-width:920px; margin-inline:auto; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:2rem; align-items:start;
  padding:2rem .5rem; border-block-end:1px solid var(--rule);
  transition:background .3s;
}
.step:first-child{ border-block-start:1px solid var(--rule); }
.step-n{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.2rem,3.6vw,3.2rem); line-height:.9; direction:ltr;
  color:rgba(255,255,255,.16); transition:color .3s var(--ease); min-width:2.2ch;
}
.step:hover .step-n{ color:var(--lime-500); }
.step-k{ font-size:.79rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint); margin-block-end:.4rem; }
.step-body h3{ margin-block-end:.65rem; }
.step-body > p:not(.step-k):not(.step-out){ color:var(--text-muted); font-size:1.07rem; max-width:60ch; }
.step-out{
  display:inline-block; margin-block-start:1rem;
  font-size:.87rem; font-weight:700; color:var(--lime-500);
  border-block-start:1px solid rgba(200,255,77,.3); padding-block-start:.5rem;
}

/* ── testimonials ───────────────────────────────────────────────────── */
.vids-wrap{ position:relative; display:flex; align-items:center; gap:.6rem; }
.vids{
  display:flex; gap:1.15rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-block:.4rem 1.3rem; padding-inline:.2rem;
  scrollbar-width:none; scroll-behavior:smooth; flex:1;
}
.vids::-webkit-scrollbar{ display:none; }
.vcard{
  flex:0 0 clamp(255px,26%,318px); scroll-snap-align:center;
  /* column layout + stretched row so that cards with a `work` line and cards
     without one still finish at the same height with their names aligned */
  display:flex; flex-direction:column;
  background:var(--n-0); border:1px solid var(--rule); border-radius:var(--card-radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.vcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--violet-200); }

/* Every card shares ONE 9:16 frame so the row never goes ragged. Landscape
   media is centred and letterboxed on the deep violet, which reads as a
   deliberate poster treatment rather than a mismatched card. */
.vframe{
  position:relative; aspect-ratio:9/16; background:var(--ink-950); overflow:hidden;
  display:grid; place-items:center;
}
.vframe video,.vframe .vthumb{ width:100%; height:100%; object-fit:cover; }
.vframe-embed{ width:100%; height:100%; border:0; }
/* Landscape source: sit at its true 16:9 inside the portrait frame instead of
   being cropped to fill it. Needs to outrank `.vframe .vthumb` above, hence
   the descendant selector — a bare `.vmedia-fit` loses on specificity and the
   thumbnail silently crops. */
.vframe .vmedia-fit{
  width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; align-self:center;
}

.vplay{
  position:absolute; inset:0; display:grid; place-items:center; cursor:pointer;
  border:0; background:linear-gradient(180deg,rgba(13,10,43,0),rgba(13,10,43,.45)); padding:0;
  transition:background .25s;
}
.vplay:hover{ background:linear-gradient(180deg,rgba(13,10,43,0),rgba(13,10,43,.25)); }
.vplay-ring{
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  background:var(--lime-500); box-shadow:0 10px 28px -8px rgba(13,10,43,.6);
  transition:transform .25s var(--ease);
}
.vplay:hover .vplay-ring{ transform:scale(1.09); }
.vplay-ring svg{ width:20px; height:20px; fill:var(--ink-950); margin-inline-start:3px; }
.vempty{
  position:absolute; inset:0; display:grid; place-items:center; gap:.6rem; align-content:center;
  color:var(--text-faint); font-size:.82rem; text-align:center; padding:1.5rem;
  background:var(--ink-900);
}
.vempty b{ display:block; font-family:var(--font-display); color:rgba(255,255,255,.2); font-size:2.4rem; font-weight:900; direction:ltr; }

.vmeta{ padding:1rem 1.1rem 1.15rem; flex:1; display:flex; flex-direction:column; }
.vquote{ color:var(--text-muted); font-size:.99rem; font-style:italic; margin-block-end:.7rem; }
.vquote:empty{ display:none; }
/* what was actually built for this client */
.vwork{
  font-size:.9rem; font-weight:700; color:var(--violet-600);
  padding-inline-start:.6rem; margin-block-end:.7rem;
  border-inline-start:3px solid var(--lime-500); line-height:1.5;
}
.vwork:empty{ display:none; }
.vwho{
  display:flex; align-items:center; gap:.6rem;
  margin-block-start:auto; padding-block-start:.8rem;
}
.vav{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--violet-600); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:.85rem;
}
.vname{ font-weight:700; font-size:1.03rem; line-height:1.3; }
.vrole{ font-size:.87rem; color:var(--text-faint); line-height:1.3; }
.vrole:empty{ display:none; }

.vnav{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:var(--n-0); border:1px solid var(--rule); color:var(--text);
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
  transition:background .2s,color .2s,border-color .2s;
}
.vnav:hover{ background:var(--violet-600); border-color:var(--violet-600); color:#fff; }
.vnav svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
[dir="rtl"] .vnav svg{ transform:scaleX(-1); }

.vdots{ display:flex; justify-content:center; gap:.4rem; margin-block-start:.4rem; }
.vdots button{
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--n-200); border:0; transition:width .3s var(--ease),background .3s;
}
.vdots button.is-on{ width:24px; border-radius:var(--r-pill); background:var(--violet-600); }

/* ── trusted-by strip ───────────────────────────────────────────────── */
.clients{ padding-block:clamp(2.2rem,4vw,3.2rem); border-block-end:1px solid var(--rule); }
.clients-t{
  text-align:center; font-size:.86rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-faint); margin-block-end:1.4rem;
}
.clients-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(1.2rem,3.5vw,3rem);
}
.client{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem;
  letter-spacing:-.02em; color:var(--n-600);
  opacity:.75; transition:opacity .25s,color .25s;
}
a.client:hover{ opacity:1; color:var(--violet-600); }
.client img{ height:34px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.7; transition:filter .25s,opacity .25s; }
.client img:hover{ filter:none; opacity:1; }

/* ── team ───────────────────────────────────────────────────────────── */
/* Cap the track so a single member renders as one properly-proportioned card
   rather than stretching across the full row. */
.team-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,330px));
  justify-content:center; gap:1.15rem; max-width:900px; margin-inline:auto;
}
.team-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:2rem 1.6rem; background:var(--n-0);
  border:1px solid var(--rule); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.team-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet-200); }
.team-pic{
  width:96px; height:96px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  margin-block-end:1.1rem; display:grid; place-items:center;
}
.team-pic img{ width:100%; height:100%; object-fit:cover; }
.team-pic.is-mono{
  background:linear-gradient(150deg,var(--violet-600),var(--violet-800));
  color:#fff; font-family:var(--font-display); font-weight:900; font-size:2.4rem;
}
.team-name{ font-family:var(--font-display); font-weight:800; font-size:1.24rem; letter-spacing:-.02em; }
.team-role{
  font-size:.9rem; font-weight:700; color:var(--violet-600);
  letter-spacing:.04em; text-transform:uppercase; margin-block:.25rem .8rem;
}
.team-bio{ color:var(--text-muted); font-size:1rem; }
.team-li{
  display:inline-flex; align-items:center; gap:.4rem; margin-block-start:1.1rem;
  font-size:.9rem; font-weight:700; color:var(--text-muted); transition:color .2s;
}
.team-li:hover{ color:#0a66c2; }
.team-li svg{ width:18px; height:18px; }

/* ── footer legal row ───────────────────────────────────────────────── */
.ftr-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.ftr-legal a{ transition:color .2s; }
.ftr-legal a:hover{ color:#fff; }

/* ── google reviews ─────────────────────────────────────────────────── */
.g-mark{ width:18px; height:18px; flex:0 0 auto; }

.stars{ display:inline-flex; gap:2px; }
.star{ width:17px; height:17px; fill:var(--n-200); flex:0 0 auto; }
.star.on{ fill:#fbbc05; }
.on-dark .star{ fill:rgba(255,255,255,.2); }

.rev-summary{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:.7rem 1rem; margin-block-end:clamp(1.8rem,3.5vw,2.6rem);
  padding:1rem 1.4rem; border:1px solid var(--rule); border-radius:var(--r-pill);
  background:var(--n-0); width:fit-content; margin-inline:auto;
  box-shadow:var(--shadow-sm);
}
.rev-summary .g-mark{ width:22px; height:22px; }
.rev-score{
  font-family:var(--font-display); font-weight:900; font-size:1.5rem;
  letter-spacing:-.03em; direction:ltr; color:var(--text);
}
.rev-count{ font-size:.95rem; color:var(--text-muted); font-weight:600; }
.rev-link{ font-size:.95rem; font-weight:700; color:var(--violet-600); }
.rev-link:hover{ text-decoration:underline; }

/* stretch, not start: equal-height cards to match every other grid on the page */
.rev-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem; }
.rev-card{
  display:flex; flex-direction:column;
  padding:1.5rem 1.4rem; background:var(--n-0);
  border:1px solid var(--rule); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.rev-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet-200); }
.rev-head{ display:flex; align-items:center; gap:.7rem; margin-block-end:.75rem; }
.rev-head .g-mark{ margin-inline-start:auto; }
.rev-av{
  width:38px; height:38px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--violet-600); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:1rem;
}
.rev-name{ display:block; font-size:1.02rem; font-weight:700; line-height:1.3; }
.rev-date{ display:block; font-size:.85rem; color:var(--text-faint); line-height:1.3; }
.rev-stars{ margin-block-end:.7rem; }
/* pre-line so a reviewer's own paragraph breaks survive. The text is shown
   verbatim, and that includes how they chose to break it up. */
.rev-text{ color:var(--text-muted); font-size:1.03rem; white-space:pre-line; }

/* ── how it feels afterwards ────────────────────────────────────────────
   Deliberately NOT another icon-and-card grid: this beat is emotional, so it
   is carried typographically, with a lime rule standing in for the icon. */
.feel-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.6rem) clamp(1.6rem,3.5vw,3rem);
}
.feel{ padding-block-start:1.1rem; border-block-start:2px solid rgba(200,255,77,.35); }
.feel b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.24rem,1.95vw,1.52rem); letter-spacing:-.025em;
  color:var(--lime-500); margin-block-end:.5rem;
}
.feel p{ color:var(--text-muted); font-size:1.07rem; }

/* ── about ──────────────────────────────────────────────────────────── */
.about-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,4rem); align-items:start; }
.about-copy p{ color:var(--text-muted); margin-block-start:1.15rem; }
.about-copy h2 + p{ margin-block-start:1.5rem; font-size:1.28rem; color:var(--text); }
.values{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.value{
  padding:1.4rem 1.3rem; border-radius:var(--r-md);
  background:var(--n-0); border:1px solid var(--rule);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.value:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.value h4{ font-size:1.12rem; margin-block-end:.45rem; }
.value h4::before{
  content:''; display:inline-block; width:14px; height:3px; border-radius:2px;
  background:var(--lime-500); margin-inline-end:.5rem; vertical-align:middle;
}
.value p{ font-size:.99rem; color:var(--text-faint); }

/* ── cta band ───────────────────────────────────────────────────────── */
.cta-band{
  text-align:center; padding:clamp(2.4rem,5vw,3.8rem) 1.6rem; border-radius:var(--r-xl);
  background:
    radial-gradient(100% 140% at 50% 0%, var(--violet-700) 0%, transparent 70%),
    linear-gradient(180deg,var(--ink-900),var(--ink-950));
  color:#fff; margin-block-end:clamp(2.6rem,4.5vw,4rem);
  box-shadow:var(--shadow-lg);
}
.cta-band h3{ font-size:clamp(1.4rem,2.9vw,2.25rem); color:#fff; font-weight:900; }
.cta-band p{ margin-block-start:.9rem; color:#b9b4d8; max-width:56ch; margin-inline:auto; }

/* ── contact ────────────────────────────────────────────────────────── */
.contact-in{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,4.5vw,4rem); align-items:start; }
.cinfo{ display:grid; gap:0; margin-block-start:2.2rem; border-block-start:1px solid var(--rule); }
.cinfo li{ display:flex; align-items:center; gap:.9rem; padding-block:1rem; border-block-end:1px solid var(--rule); }
.cinfo-ico{
  width:40px; height:40px; border-radius:var(--r-md); flex:0 0 auto; display:grid; place-items:center;
  background:var(--violet-50); border:1px solid var(--violet-100);
}
.cinfo-ico svg{ width:18px; height:18px; fill:none; stroke:var(--violet-600); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.cinfo-ico.wa{ background:rgba(28,157,84,.09); border-color:rgba(28,157,84,.24); }
.cinfo-ico.wa svg{ stroke:var(--green-600); }
.cinfo b{ display:block; font-size:.8rem; color:var(--text-faint); font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.cinfo a,.cinfo div span{ font-size:1.09rem; font-weight:700; color:var(--text); transition:color .2s; }
.cinfo a:hover{ color:var(--violet-600); }

.form{
  display:grid; gap:1.05rem; padding:clamp(1.6rem,2.6vw,2.3rem);
  background:var(--n-0); border:1px solid var(--rule); border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
.field{ display:grid; gap:.4rem; }
.field > span{ font-size:.87rem; font-weight:700; color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase; }
.field input,.field select,.field textarea{
  width:100%; padding:.75rem .9rem; border-radius:var(--r-sm);
  background:var(--field-bg); border:1px solid var(--field-border);
  font-size:1.06rem; font-family:inherit;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:108px; }
.field select{ cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-faint) 50%),linear-gradient(135deg,var(--text-faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 1.3rem,calc(100% - 15px) 1.3rem;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
[dir="rtl"] .field select{ background-position:20px 1.3rem,15px 1.3rem; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--violet-600); background:var(--n-0);
  box-shadow:0 0 0 3px var(--violet-50);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-faint); }
.field.is-bad input,.field.is-bad textarea{ border-color:var(--red-600); }

/* honeypot — visually hidden without pushing the layout sideways in RTL */
.hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
     clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.f-actions{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-block-start:.3rem; }
.or{ color:var(--text-faint); font-size:.93rem; }
.form-msg{ font-size:.99rem; font-weight:700; min-height:1.2em; }
.form-msg.ok{ color:var(--green-600); }
.form-msg.bad{ color:var(--red-600); }
.privacy{ font-size:.87rem; color:var(--text-faint); }
button[disabled]{ opacity:.55; cursor:progress; }

/* ── footer (on dark) ───────────────────────────────────────────────── */
.ftr{ padding-block:clamp(3rem,5vw,4rem) 1.5rem; }
.ftr-in{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:2rem; }
.ftr-brand p{ margin-block-start:1.1rem; color:var(--text-faint); font-size:.99rem; max-width:36ch; }
.ftr-col h5{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-500); margin-block-end:1rem; font-weight:700; }
.ftr-col a{ display:block; font-size:1rem; color:var(--text-muted); padding-block:.26rem; transition:color .2s; }
.ftr-col a:hover{ color:#fff; }
.ftr-bot{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-block-start:2.6rem; padding-block-start:1.4rem; border-block-start:1px solid var(--rule);
  font-size:.91rem; color:var(--text-faint);
}
.ftr-bot a:hover{ color:#fff; }

/* ── whatsapp float ─────────────────────────────────────────────────── */
.wa-float{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:90;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-500); color:#fff;
  box-shadow:0 12px 28px -8px rgba(28,157,84,.6);
  transition:transform .25s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }

/* ── mini discovery drawer ──────────────────────────────────────────────
   Slides in from the inline-end edge, which is the LEFT in the Hebrew RTL
   layout and the right in English. Off-screen sign has to flip with the
   direction because transforms are physical, not logical. */
/* No dimming on desktop: this is a widget beside the page, not a modal over
   it. The visitor should still be able to read the section that prompted them
   to open it. The scrim comes back on a phone, where it IS effectively full
   screen and the page behind is unusable anyway. */
.disc-scrim{ display:none; }

/* Anchored above the AI pill, which sits above the WhatsApp bubble: three
   things stacked on the same inline edge, which is the LEFT in Hebrew. */
.disc{
  position:fixed; inset-block-end:150px; inset-inline-end:22px; z-index:96;
  width:min(400px, calc(100vw - 44px));
  height:min(72vh, 620px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border-radius:1.25rem;
  box-shadow:0 24px 60px -12px rgba(12,10,29,.45), 0 0 0 1px var(--line);
  /* grows out of the launcher it came from, so the corner it scales from has
     to follow the layout direction */
  transform-origin:bottom right;
  transform:translateY(12px) scale(.96); opacity:0;
  transition:transform .26s var(--ease), opacity .2s var(--ease);
}
[dir="rtl"] .disc{ transform-origin:bottom left; }
.disc.is-open{ transform:none; opacity:1; }

.disc-head{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.15rem 1.25rem 1rem; background:var(--violet-600); color:#fff;
}
.disc-headtxt h2{ font-size:1.15rem; margin:0; color:#fff; }
.disc-sub{ margin:.25rem 0 0; font-size:.9rem; opacity:.85; }
.disc-x{
  margin-inline-start:auto; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.14); color:#fff;
  border:0; cursor:pointer; flex:none;
}
.disc-x:hover{ background:rgba(255,255,255,.25); }
.disc-x svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

.disc-prog{ position:relative; height:3px; background:var(--line); }
.disc-bar{ position:absolute; inset-block:0; inset-inline-start:0; width:0;
           background:var(--accent); transition:width .4s var(--ease); }
.disc-step{
  position:absolute; inset-inline-end:.75rem; inset-block-start:.5rem;
  font-size:.72rem; color:var(--text-muted); letter-spacing:.02em;
}

.disc-body{
  flex:1; overflow-y:auto; padding:1.5rem 1.25rem 1rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.disc-msg{ max-width:88%; padding:.7rem .95rem; border-radius:1rem; font-size:.97rem; line-height:1.55; }
.disc-msg.is-bot{ align-self:flex-start; background:var(--surface-2); border-end-start-radius:.3rem; }
.disc-msg.is-me{ align-self:flex-end; background:var(--violet-600); color:#fff; border-end-end-radius:.3rem; }
.disc-why{ margin:.3rem 0 0; font-size:.83rem; color:var(--text-muted); }
.disc-msg.is-me .disc-why{ color:rgba(255,255,255,.75); }

/* three dots while the model is thinking */
.disc-typing{ align-self:flex-start; display:flex; gap:.3rem; padding:.8rem .95rem; }
.disc-typing i{ width:7px; height:7px; border-radius:50%; background:var(--text-muted);
                animation:discDot 1.1s infinite ease-in-out; }
.disc-typing i:nth-child(2){ animation-delay:.15s; }
.disc-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes discDot{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

.disc-form{
  display:flex; gap:.6rem; align-items:flex-end;
  padding:.85rem 1.25rem 1.1rem; border-block-start:1px solid var(--line);
}
.disc-form textarea{
  flex:1; resize:none; border:1px solid var(--line); border-radius:.9rem;
  padding:.65rem .8rem; font:inherit; font-size:.97rem; background:var(--surface);
  color:var(--text); max-height:140px;
}
.disc-form textarea:focus{ outline:2px solid var(--violet-600); outline-offset:1px; }
.disc-send{
  width:44px; height:44px; flex:none; border:0; border-radius:50%; cursor:pointer;
  background:var(--violet-600); color:#fff; display:grid; place-items:center;
}
.disc-send:hover:not(:disabled){ background:var(--violet-700); }
.disc-send:disabled{ opacity:.45; cursor:default; }
.disc-send svg{ width:19px; height:19px; fill:currentColor; }
[dir="rtl"] .disc-send svg{ transform:scaleX(-1); }

/* the finished analysis, rendered into the same scroll area */
.disc-final{ border-block-start:1px solid var(--line); padding-block-start:1rem; }
.disc-final h3{ font-size:1.05rem; margin:0 0 .5rem; }
.disc-final h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em;
                color:var(--text-muted); margin:1rem 0 .35rem; }
.disc-final ul{ margin:0; padding-inline-start:1.1rem; display:grid; gap:.3rem; font-size:.95rem; }
.disc-final p{ font-size:.96rem; line-height:1.6; margin:0; }
.disc-stat{ display:flex; gap:1.2rem; margin-block-start:.9rem; flex-wrap:wrap; }
.disc-stat b{ display:block; font-size:1.25rem; }
.disc-stat span{ font-size:.8rem; color:var(--text-muted); }

.disc-mail{ margin-block-start:1.2rem; padding:1rem; border-radius:1rem; background:var(--surface-2); }
.disc-mail p{ margin:0 0 .7rem; font-size:.93rem; }
.disc-mail input{
  width:100%; border:1px solid var(--line); border-radius:.8rem;
  padding:.6rem .8rem; font:inherit; background:var(--surface); color:var(--text);
}
.disc-mail .btn{ margin-block-start:.6rem; width:100%; }
.disc-note{ font-size:.82rem; color:var(--text-muted); margin-block-start:.6rem; }

/* On a phone the widget is effectively the whole screen, so it behaves like a
   sheet: full width, dimmed page behind, and anchored just above the bubbles
   rather than floating in the middle of nowhere. */
@media (max-width:560px){
  .disc-scrim{
    display:block; position:fixed; inset:0; z-index:95;
    background:rgba(12,10,29,.5); opacity:0; transition:opacity .3s var(--ease);
  }
  .disc-scrim.is-open{ opacity:1; }
  .disc{
    inset-inline:12px; inset-block-end:84px; width:auto;
    height:min(76vh, 560px);
  }
}

/* AI advisor shortcut, stacked above the WhatsApp bubble. Violet against the
   WhatsApp green so the two read as different offers rather than a pair. */
.ai-float{
  position:fixed; inset-block-end:88px; inset-inline-end:22px; z-index:90;
  display:flex; align-items:center; gap:.6rem;
  height:54px; padding-inline:1.15rem; border-radius:var(--r-pill);
  background:var(--violet-600); color:#fff; font-weight:800; font-size:.98rem;
  box-shadow:0 14px 30px -10px rgba(79,70,229,.75);
  transition:transform .25s var(--ease),background .25s;
}
.ai-float:hover{ background:var(--violet-700); transform:translateY(-2px); color:#fff; }
.ai-float-ico{ display:grid; place-items:center; }
/* the sparkle is a filled mark, unlike the stroked icons elsewhere */
.ai-float svg{ width:22px; height:22px; fill:currentColor; }
.wa-float svg{ width:26px; height:26px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── legal pages (accessibility, privacy) ───────────────────────────── */
.legal-hdr{
  background:var(--ink-950); color:#fff;
  padding-block:1.1rem; border-block-end:1px solid rgba(255,255,255,.12);
}
.legal-hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.legal-back{ font-size:.95rem; font-weight:700; color:var(--lime-500); }
.legal-back:hover{ text-decoration:underline; }
.legal{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(2rem,4.2vw,3rem); margin-block-end:.6rem; }
.legal h2{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-block:2.4rem .8rem; }
.legal h3{ font-size:1.15rem; margin-block:1.4rem .5rem; }
.legal p{ color:var(--text-muted); margin-block-end:1rem; }
.legal ul{ list-style:disc; padding-inline-start:1.3rem; margin-block-end:1rem; color:var(--text-muted); }
.legal li{ margin-block-end:.5rem; }
.legal a{ color:var(--violet-600); font-weight:600; }
.legal a:hover{ text-decoration:underline; }
.legal-meta{
  font-size:.92rem; color:var(--text-faint);
  padding-block-end:1.4rem; margin-block-end:1.4rem; border-block-end:1px solid var(--rule);
}
.legal-en{
  margin-block-start:clamp(3rem,6vw,5rem); padding-block-start:2rem;
  border-block-start:2px solid var(--violet-100); direction:ltr; text-align:start;
}

/* ── systems map ────────────────────────────────────────────────────── */
.stack-pick{ display:grid; gap:1.1rem; margin-block-end:2rem; }
.pick-group h3{
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); margin-block-end:.55rem;
}
.pick-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pick{
  font:inherit; font-size:.92rem; font-weight:600; cursor:pointer;
  padding:.42rem .9rem; border-radius:var(--r-pill);
  background:var(--n-0); color:var(--text-muted);
  border:1px solid var(--rule);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.pick:hover{ border-color:var(--violet-300); color:var(--text); }
.pick.is-on{
  background:var(--violet-600); border-color:var(--violet-600); color:#fff; font-weight:700;
}
.pick.is-on:hover{ background:var(--violet-700); transform:translateY(-1px); }

.stack-maps{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }
.stack-map{
  margin:0; padding:1.2rem; border-radius:var(--card-radius);
  background:var(--n-0); border:1px solid var(--rule); box-shadow:var(--shadow-sm);
}
.stack-map.is-after{
  background:linear-gradient(165deg,var(--violet-50),var(--n-0) 65%);
  border-color:var(--violet-200);
}
.stack-map figcaption{ text-align:center; margin-block-end:.5rem; }
.stack-map figcaption b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.12rem; letter-spacing:-.02em; color:var(--text);
}
.stack-map.is-after figcaption b{ color:var(--violet-600); }
.stack-map figcaption span{ display:block; font-size:.88rem; color:var(--text-faint); }
/* the SVG carries its own labels, so it must not inherit the page direction */
.stack-map svg{ display:block; width:100%; height:auto; direction:ltr; }
.stack-map svg text{ font-family:var(--font-display); }

.stack-count{
  margin-block-start:1.4rem; text-align:center;
  font-family:var(--font-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.05rem,2vw,1.4rem); color:var(--text);
}
.stack-actions{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-block-start:1.2rem; }
.stack-empty{ text-align:center; color:var(--text-faint); font-size:1rem; }

/* ── self-serve tools: ROI calculator + AI advisor ──────────────────── */
.tools-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.15rem; align-items:start; }
/* With the advisor switched off there is only one panel, and a two-column grid
   would strand it against half a page of nothing. */
.tools-grid.is-single{ grid-template-columns:minmax(0,min(100%,620px)); justify-content:center; }
.tool{
  padding:1.9rem 1.7rem; background:var(--n-0);
  border:1px solid var(--rule); border-radius:var(--card-radius);
  box-shadow:var(--shadow-sm);
}
.tool-head{ display:flex; align-items:flex-start; gap:.9rem; margin-block-end:1.5rem; }
.tool-ico{
  flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center;
  border-radius:var(--r-md); background:var(--violet-600);
}
.tool-ico svg{ width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.tool-ico.is-ai{ background:var(--lime-500); }
.tool-ico.is-ai svg{ stroke:var(--ink-950); }
.tool-head h3{ margin:0; }
.tool-head p{ margin:.25rem 0 0; color:var(--text-muted); font-size:.99rem; }

/* shared field shell for both panels */
.rfield{ display:grid; gap:.5rem; margin-block-end:1.1rem; }
.rfield-l{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; }
.rfield-l > span{ font-size:.87rem; font-weight:700; color:var(--text-muted); letter-spacing:.04em; }
.rfield-l b{
  font-family:var(--font-display); font-weight:900; font-size:1.15rem;
  color:var(--violet-600); direction:ltr; letter-spacing:-.02em;
}
.rfield input[type="text"],.rfield input[type="tel"],.rfield input[type="email"],.rfield textarea{
  width:100%; padding:.75rem .9rem; border-radius:var(--r-sm);
  background:var(--field-bg); border:1px solid var(--field-border);
  font-size:1.06rem; font-family:inherit;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.rfield textarea{ resize:vertical; min-height:104px; }
.rfield input:focus,.rfield textarea:focus{
  outline:none; border-color:var(--violet-600); background:var(--n-0);
  box-shadow:0 0 0 3px var(--violet-50);
}
.rfield input::placeholder,.rfield textarea::placeholder{ color:var(--text-faint); }
/* accent-color handles the track and thumb in every current engine, so the
   slider stays native (and keyboard-operable) instead of being rebuilt */
.rfield input[type="range"]{
  width:100%; accent-color:var(--violet-600); cursor:pointer; height:1.4rem; margin:0;
}

/* ROI results */
.roi-out{
  margin-block-start:.4rem; padding:1.3rem 1.2rem;
  background:linear-gradient(165deg,var(--violet-50),var(--n-0) 70%);
  border:1px solid var(--violet-200); border-radius:var(--r-lg);
}
.roi-big{ text-align:center; }
.roi-big > span{ display:block; font-size:.93rem; font-weight:600; color:var(--text-muted); }
.roi-big b{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(2.1rem,4.6vw,3rem); letter-spacing:-.045em; line-height:1.08;
  color:var(--violet-600); direction:ltr; margin-block:.2rem;
}
.roi-big em{ font-style:normal; font-size:.93rem; font-weight:600; color:var(--text-faint); }
.roi-split{
  display:grid; grid-template-columns:1fr 1fr; gap:.9rem;
  margin-block-start:1.2rem; padding-block-start:1.1rem; border-block-start:1px solid var(--violet-200);
}
.roi-split div{ text-align:center; }
.roi-split b{
  display:block; font-family:var(--font-display); font-weight:900; font-size:1.28rem;
  letter-spacing:-.03em; color:var(--text); direction:ltr;
}
.roi-split span{ display:block; margin-block-start:.3rem; font-size:.85rem; color:var(--text-faint); font-weight:600; }
.roi-note{ margin-block-start:1rem; font-size:.83rem; line-height:1.6; color:var(--text-faint); }
.roi-cta{ margin-block-start:1.2rem; width:100%; justify-content:center; }

/* AI advisor */
.ai-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.ai-privacy{ margin-block-start:.9rem; font-size:.83rem; line-height:1.6; color:var(--text-faint); }
.ai-out{ margin-block-start:1.2rem; }
.ai-msg{ font-size:1rem; font-weight:600; }
.ai-out.bad .ai-msg{ color:var(--red-600); }
.ai-out.is-loading .ai-msg{ color:var(--text-faint); }
.ai-out.is-result{
  padding:1.3rem 1.2rem; border:1px solid var(--violet-200); border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--violet-50),var(--n-0) 70%);
}
.ai-summary{ font-size:1.08rem; font-weight:600; line-height:1.65; color:var(--text); }
.ai-block{ margin-block-start:1.25rem; }
.ai-block h4{
  font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet-600); margin-block-end:.5rem;
}
.ai-block ul{ display:grid; gap:.45rem; }
.ai-block li{ position:relative; padding-inline-start:1.1rem; font-size:1rem; line-height:1.6; color:var(--text-muted); }
.ai-block li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  width:6px; height:6px; border-radius:50%; background:var(--lime-600);
}
.ai-block p{ font-size:1rem; line-height:1.65; color:var(--text-muted); }
.ai-caveat p{ color:var(--text-faint); }
.ai-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.ai-chips span{
  font-size:.85rem; font-weight:700; color:var(--violet-700);
  background:var(--n-0); border:1px solid var(--violet-200);
  border-radius:var(--r-pill); padding:.25rem .75rem;
}
.ai-stats{ display:flex; flex-wrap:wrap; gap:.8rem; margin-block-start:1.25rem; }
.ai-stats div{
  flex:1 1 130px; padding:.8rem .9rem; text-align:center;
  background:var(--n-0); border:1px solid var(--rule); border-radius:var(--r-md);
}
.ai-stats b{
  display:block; font-family:var(--font-display); font-weight:900; font-size:1.35rem;
  letter-spacing:-.03em; color:var(--violet-600); direction:ltr;
}
.ai-stats span{ display:block; margin-block-start:.25rem; font-size:.82rem; color:var(--text-faint); font-weight:600; }
.ai-again{
  display:block; margin-block-start:.9rem; background:none; border:0; padding:0;
  font:inherit; font-size:.92rem; font-weight:700; color:var(--text-faint);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.ai-again:hover{ color:var(--violet-600); }
.ai-disc{ margin-block-start:.8rem; font-size:.8rem; line-height:1.6; color:var(--text-faint); }

/* the qualifying hand-off that follows the advice */
.ai-next{
  margin-block-start:1.5rem; padding-block-start:1.3rem;
  border-block-start:1px solid var(--violet-200);
}
.ai-next h4{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  letter-spacing:-.02em; color:var(--text);
}
.ai-next-sub{ margin-block:.4rem 1.1rem; font-size:.97rem; line-height:1.6; color:var(--text-muted); }
.ai-next-form .rfield{ margin-block-end:.85rem; }
.ai-next-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin-block-start:.2rem; }
.ai-next-msg{ margin-block-start:.8rem; font-size:.95rem; font-weight:700; min-height:1.2em; }
.ai-next-msg.ok{ color:var(--green-600); }
.ai-next-msg.bad{ color:var(--red-600); }
/* details captured: booking becomes the one remaining action */
.ai-booknow{
  margin-block-start:1rem; padding:1.1rem 1.2rem; text-align:center;
  background:var(--n-0); border:1px solid var(--violet-200); border-radius:var(--r-lg);
}
.ai-booknow p{ margin-block-end:.9rem; font-size:.99rem; line-height:1.6; color:var(--text-muted); }
.ai-booknow .btn{ width:100%; justify-content:center; }

/* ── inline slot picker ─────────────────────────────────────────────── */
.slots{
  margin-block-end:1.6rem; padding:1.3rem 1.2rem;
  background:linear-gradient(165deg,var(--violet-50),var(--n-0) 70%);
  border:1px solid var(--violet-200); border-radius:var(--r-lg);
}
.slots h4{
  font-family:var(--font-display); font-weight:800; font-size:1.1rem;
  letter-spacing:-.02em; color:var(--text); margin-block-end:.9rem;
}
.slot-day{ margin-block-end:.9rem; }
.slot-day > b{ display:block; font-size:.86rem; font-weight:700; color:var(--text-faint); margin-block-end:.4rem; }
.slot-row{ display:flex; flex-wrap:wrap; gap:.4rem; }
.slot{
  font:inherit; font-size:.95rem; font-weight:700; cursor:pointer; direction:ltr;
  padding:.45rem .95rem; border-radius:var(--r-pill);
  background:var(--n-0); color:var(--violet-700); border:1px solid var(--violet-200);
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease);
}
.slot:hover{ background:var(--violet-600); border-color:var(--violet-600); color:#fff; transform:translateY(-2px); }
.slots-form .rfield{ margin-block-end:.8rem; }
.slots-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.slots-msg{ margin-block-start:.7rem; font-size:.95rem; font-weight:600; color:var(--text-muted); }
.slots-msg.bad{ color:var(--red-600); }
.slots-ok{ text-align:center; }
.slots-ok b{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:1.3rem; letter-spacing:-.02em; color:var(--green-600);
}
.slots-ok p{ margin-block:.5rem 1rem; color:var(--text-muted); }

/* ── booking ────────────────────────────────────────────────────────── */
.btn-onLight{ background:var(--n-0); border-color:var(--rule); color:var(--text); }
.btn-onLight:hover{ border-color:var(--violet-600); color:var(--violet-600); transform:translateY(-2px); }

.book-card{
  display:flex; align-items:center; gap:1rem;
  margin-block-end:1.6rem; padding:1.15rem 1.3rem;
  background:linear-gradient(165deg,var(--violet-50),var(--n-0) 70%);
  border:1px solid var(--violet-200); border-radius:var(--r-lg);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.book-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--violet-600); }
.book-ico{
  flex:0 0 auto; width:44px; height:44px; display:grid; place-items:center;
  border-radius:var(--r-md); background:var(--violet-600);
}
.book-ico svg{ width:21px; height:21px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.book-txt{ flex:1 1 auto; display:block; }
.book-txt b{ display:block; font-weight:800; color:var(--text); }
.book-txt em{ display:block; margin-block-start:.2rem; font-style:normal; font-size:.93rem; line-height:1.55; color:var(--text-muted); }
.book-go{ flex:0 0 auto; color:var(--violet-600); }
.book-go svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
[dir="rtl"] .book-go{ transform:scaleX(-1); }

/* ── reveal ─────────────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease) var(--d,0ms),transform .65s var(--ease) var(--d,0ms); }
.reveal.is-in{ opacity:1; transform:none; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .about-in,.contact-in{ grid-template-columns:1fr; }
  .grid-3,.ctrl,.dom-grid,.feel-grid,.rev-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-in{ grid-template-columns:repeat(2,1fr); }
  .tools-grid{ grid-template-columns:1fr; }
  .stat:nth-child(3){ border-inline-start:0; }
  .stat:nth-child(n+3){ border-block-start:1px solid var(--rule); }
  .ftr-in{ grid-template-columns:1fr 1fr; }
  .three{ grid-template-columns:1fr; gap:1.6rem; }
  /* stop the phone overlapping once there is no room for it to sit beside */
  .showcase{ grid-template-columns:minmax(0,1fr) 250px; gap:1rem; }
  .mock-wa{ margin-inline-start:-40px; }
}

@media (max-width:820px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset-block-start:72px; inset-inline:0;
    flex-direction:column; gap:0; padding:.6rem 1.4rem 1.4rem;
    background:var(--n-0); border-block-end:1px solid var(--n-200);
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .25s,transform .25s var(--ease);
    max-height:calc(100dvh - 72px); overflow-y:auto;
    box-shadow:var(--shadow-md);
  }
  .nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
  /* the panel is always light, regardless of the header's state over the hero */
  .nav a{ padding:.85rem .2rem; font-size:1rem; color:var(--n-900); border-block-end:1px solid var(--n-100); }
  .nav a::after{ display:none; }
  /* Must outrank `.nav + .hdr-actions` from the desktop rules, or the auto
     margin loses on specificity and the burger sits mid-bar instead of at the
     inline-end. */
  .hdr .nav + .hdr-actions,
  .hdr .hdr-actions{ margin-inline-start:auto; }
  .hdr-actions .btn-primary{ display:none; }
}

@media (max-width:640px){
  .wrap{ width:calc(100% - 2.2rem); }
  .grid-3,.ctrl,.dom-grid,.feel-grid,.rev-grid{ grid-template-columns:1fr; }
  /* two 420px maps side by side stop being readable well before this */
  .stack-maps{ grid-template-columns:1fr; }
  .tool{ padding:1.5rem 1.2rem; }
  .roi-split{ grid-template-columns:1fr; gap:1rem; }
  .ai-next-actions .btn{ flex:1 1 100%; justify-content:center; }
  .rev-summary{ border-radius:var(--r-lg); }
  .stats-in{ grid-template-columns:1fr 1fr; }
  .f-row{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; }
  .ftr-in{ grid-template-columns:1fr; gap:1.7rem; }
  .step{ gap:1.1rem; padding:1.7rem .2rem; }
  .brand-sub{ display:none; }
  .vids-wrap .vnav{ display:none; }
  .vcard{ flex-basis:78%; }
  .hero-cta .btn{ flex:1 1 100%; }
  .wa-float{ width:50px; height:50px; inset-block-end:16px; inset-inline-end:16px; }
  /* the advisor pill collapses to a circle so the two bubbles stack cleanly
     and neither crowds the content on a narrow screen */
  .ai-float-txt{ display:none; }
  .ai-float{ inset-block-end:76px; inset-inline-end:16px; width:50px; height:50px;
             padding-inline:0; justify-content:center; }

  /* mockups stack; the phone sits under the dashboard at full width */
  .showcase{ grid-template-columns:1fr; gap:1.2rem; }
  .mock-wa{ margin-inline-start:0; max-width:330px; justify-self:center; width:100%; }
  .kpis{ grid-template-columns:1fr; gap:.5rem; }
  .kpi{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.5rem; }
  .kpi-l{ font-size:.7rem; }
  .kpi-v{ font-size:1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .vids{ scroll-behavior:auto; }
}

/* ── accessibility menu ─────────────────────────────────────────────────
   Opposite inline edge from the WhatsApp bubble and the advisor, so the two
   groups never collide. */
.a11y-fab{
  position:fixed; inset-block-end:22px; inset-inline-start:22px; z-index:97;
  width:48px; height:48px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  background:var(--ink-950); color:#fff;
  box-shadow:0 10px 26px -8px rgba(12,10,29,.55);
  transition:transform .2s var(--ease), background .2s;
}
.a11y-fab:hover{ transform:scale(1.06); }
.a11y-fab svg{ width:26px; height:26px; fill:currentColor; }

.a11y-panel{
  position:fixed; inset-block-end:80px; inset-inline-start:22px; z-index:97;
  width:min(230px, calc(100vw - 44px));
  display:flex; flex-direction:column; gap:.3rem;
  padding:.6rem; border-radius:1rem;
  background:var(--surface); box-shadow:0 20px 44px -14px rgba(12,10,29,.45), 0 0 0 1px var(--line);
}
.a11y-panel button,
.a11y-panel a{
  display:block; width:100%; text-align:start; cursor:pointer;
  padding:.55rem .7rem; border:0; border-radius:.6rem;
  background:transparent; color:var(--text); font:inherit; font-size:.95rem;
  text-decoration:none;
}
.a11y-panel button:hover,
.a11y-panel a:hover{ background:var(--surface-2); }
.a11y-panel a{ margin-block-start:.2rem; border-block-start:1px solid var(--line); border-radius:0 0 .6rem .6rem; }

/* Text scaling. Applied to the root so anything sized in rem follows; the
   browser's own zoom remains the fuller answer and is mentioned in the
   statement. */
html.a11y-text-1{ font-size:112.5%; }
html.a11y-text-2{ font-size:125%; }
html.a11y-text-3{ font-size:137.5%; }

/* High contrast: pushes the SEMANTIC layer to its limits rather than
   restyling components one by one, which is what that layer is for. */
html.a11y-contrast{
  --text:#000; --text-muted:#1a1a1a; --surface:#fff; --surface-2:#fff;
  --line:#000; --violet-600:#2a219c; --violet-700:#1b1470;
}
html.a11y-contrast body{ background:#fff; }
html.a11y-contrast .on-dark{ --text:#fff; --text-muted:#f0f0f0; --surface:#000; --surface-2:#000; --line:#fff; }
html.a11y-contrast .on-dark, html.a11y-contrast .sec.on-dark{ background:#000 !important; color:#fff; }
html.a11y-contrast .btn-primary{ background:#2a219c; color:#fff; }

html.a11y-links a{ text-decoration:underline !important; text-underline-offset:3px; }

/* Honour the request even where a component animates by default. */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after{
  animation-duration:.001ms !important; animation-iteration-count:1 !important;
  transition-duration:.001ms !important; scroll-behavior:auto !important;
}

@media (max-width:560px){
  .a11y-fab{ inset-block-end:16px; inset-inline-start:16px; width:44px; height:44px; }
  .a11y-panel{ inset-block-end:70px; inset-inline-start:16px; }
}

/* The golden-circle lines under the hero heading. Weight steps DOWN from the
   belief to the method to the product: the reader should feel the argument
   narrowing, not three paragraphs of equal shouting. */
.hero-how{
  max-width:56ch; margin-block-start:.9rem;
  font-size:clamp(1rem,1.6vw,1.1rem); line-height:1.75; color:var(--text-muted);
}
.hero-what{
  max-width:56ch; margin-block-start:.7rem;
  font-size:clamp(.97rem,1.5vw,1.05rem); line-height:1.7; color:var(--text-muted);
}
.hero .hero-how, .hero .hero-what{ opacity:.92; }

/* The meeting offer at the end of the advisor conversation. */
.disc-book{ margin-block-start:1rem; padding-block-start:1rem; border-block-start:1px solid var(--line); }
.disc-book p{ margin:0 0 .7rem; font-size:.93rem; }
.disc-book .btn{ width:100%; }
.slots-form textarea{
  width:100%; resize:vertical; min-height:72px;
  border:1px solid var(--line); border-radius:.7rem; padding:.55rem .7rem;
  font:inherit; font-size:.95rem; background:var(--surface); color:var(--text);
}