/* ===========================================================================
   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.
   =========================================================================== */

/* ─────────────────── 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); }

/* ── 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; }
.rev-text{ color:var(--text-muted); font-size:1.03rem; }

/* ── 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); }
.wa-float svg{ width:26px; height:26px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── 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); }
  .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; }
  .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; }

  /* 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; }
}