/* ==========================================================================
   Makovki - Design System
   3D measurement, scanning & visualization. RTL Hebrew.
   Built as a clean static prototype, structured to port to WordPress.
   ========================================================================== */

:root {
  /* Brand palette - laser-scan precision, warmed with violet + amber */
  --ink:        #0b1024;   /* deep navy-violet - dark sections */
  --ink-2:      #121734;   /* navy-violet surface */
  --ink-3:      #232a52;   /* lighter navy-violet / borders on dark */

  --cyan:       #21cfe6;   /* laser cyan - scan signature (used sparingly) */
  --cyan-deep:  #0ea5c4;
  --cyan-soft:  #e6fbff;

  --violet:     #7c5cff;   /* point-cloud violet - co-primary accent */
  --violet-deep:#5b3fd6;
  --violet-soft:#efeaff;

  --amber:      #ff8a4c;   /* warm friendly accent - touches */
  --amber-deep: #ef6a2c;
  --amber-soft: #fff2ea;

  --lime:       #7ee787;   /* point-cloud highlight (sparingly) */

  --bg:         #ffffff;
  --bg-soft:    #f6f6fc;   /* light section - faint violet warmth */
  --bg-soft-2:  #eeeff8;
  --line:       #e7e6f1;   /* light borders */
  --text:       #14152a;   /* body text */
  --text-2:     #565a70;   /* muted text */
  --text-3:     #888ba2;   /* faint */
  --white:      #ffffff;

  /* Signature gradients */
  --grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 100%);
  --grad-warm:  linear-gradient(120deg, var(--violet) 0%, var(--amber) 100%);

  /* Type */
  --font: "Heebo", "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* Rhythm */
  --container: 1200px;
  /* Header geometry — single source of truth so body content can align to it.
     --edge       = header side padding (logo hugs the right corner)
     --brand-block = brand width (~206px) + nav gaps up to the first menu link (64px)
     --menu-start = where the first menu item ("אודות") begins, from the right edge */
  --edge: clamp(24px, 3.2vw, 52px);
  --brand-block: 270px;
  --menu-start: calc(var(--edge) + var(--brand-block));
  --radius:    18px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --shadow:    0 10px 30px -12px rgba(20, 16, 60, .16);
  --shadow-lg: 0 34px 70px -24px rgba(24, 14, 60, .34);
  --shadow-cyan: 0 18px 44px -16px rgba(33, 207, 230, .40);
  --shadow-violet: 0 18px 44px -16px rgba(124, 92, 255, .45);
  --shadow-brand: 0 16px 40px -16px rgba(98, 96, 255, .42);
  --shadow-amber: 0 16px 40px -16px rgba(239, 106, 44, .40);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  font-size: 1.0625rem; /* =17px at root default; relative so the a11y text-size control scales everything */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

h1, h2, h3, h4 { line-height: 1.18; font-weight: 800; color: var(--ink); letter-spacing: 0; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

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

/* Desktop: anchor every content column's start (right edge, in RTL) to the same
   point where the first top-menu item ("אודות") begins, so body text starts
   directly under the menu. The header keeps its own centered/full-width rule
   above (higher specificity), so only page content is shifted — not the nav. */
@media (min-width: 1200px) {
  .container {
    max-width: min(var(--container), calc(100% - var(--menu-start) - var(--edge)));
    margin-inline-start: var(--menu-start);
    margin-inline-end: auto;
    padding-inline: 0;
  }
  /* Blog posts & legal pages are centred long-form reading templates (they carry
     an .article__wrap). Keep their classic centred column so the narrow reading
     measure stays balanced instead of being shoved under the menu. */
  body:has(.article__wrap) .container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
  }
}

.section { padding-block: clamp(60px, 9vw, 110px); }
.section--soft { background: var(--bg-soft); }
.section--ink {
  background:
    radial-gradient(90% 90% at 88% 6%, rgba(33,207,230,.10) 0%, transparent 46%),
    radial-gradient(115% 120% at 12% 0%, #2c2160 0%, var(--ink) 55%);
  color: #cdc9e4;
}
.section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  color: var(--violet-deep); text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--grad-brand); border-radius: 2px;
}
.section--ink .eyebrow { color: #b6a6ff; }
.lead { font-size: 1.15rem; color: var(--text-2); }
.section--ink .lead { color: #aebfd2; }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; }
.btn--primary { background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-violet); filter: saturate(1.08) brightness(1.04); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-2px); }
.btn--on-dark { background: rgba(255,255,255,.08); color: #fff; border: 1.5px solid rgba(255,255,255,.22); }
.btn--on-dark:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn--wa { background: #25d366; color: #04220f; }
.btn--wa:hover { background: #2ee06f; transform: translateY(-2px); }

/* Header WhatsApp icon button (sits to the right of the phone number in the CTA cluster) */
.nav__wa {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(37,211,102,.6);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.nav__wa svg { width: 24px; height: 24px; }
.nav__wa:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(37,211,102,.7); filter: brightness(1.05); }

/* Quick-call icon button - hidden on desktop (the phone-number button shows there),
   revealed on mobile where it replaces the "הצעת מחיר" button, next to WhatsApp. */
.nav__call {
  display: none; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--shadow-brand);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.nav__call svg { width: 23px; height: 23px; }
.nav__call:hover { transform: translateY(-2px); box-shadow: var(--shadow-violet); filter: brightness(1.05); }

/* ------------------------------ Header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s;
}
.site-header.scrolled { box-shadow: 0 6px 24px -16px rgba(16,40,70,.35); }
/* Full-width header: logo hugs the right corner, menu + CTA flow in from there */
.site-header .container { max-width: 100%; margin-inline: auto; padding-inline: var(--edge); }
.nav {
  display: flex; align-items: center; gap: 30px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 1.4rem; color: var(--ink); }
.brand__mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--grad-brand);
  display: grid; place-items: center; box-shadow: var(--shadow-brand);
}
.brand__mark svg { width: 22px; height: 22px; }
.brand small { display:block; font-size: .62rem; font-weight: 600; letter-spacing: .14em; color: var(--text-3); margin-top: 2px; }

.nav__menu { display: flex; align-items: center; gap: 4px; margin-inline-start: 20px; }
.nav__menu > li { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px;
  font-weight: 600; font-size: .98rem; color: var(--text);
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--violet-deep); background: var(--bg-soft); }
.nav__link svg { width: 14px; height: 14px; opacity: .6; transition: transform .25s; }
.has-drop:hover .nav__link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 280px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-drop:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 13px; border-radius: 10px; transition: background .18s;
}
.dropdown a:hover { background: var(--bg-soft); }
.dropdown .di-ic {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--cyan-soft); color: var(--cyan-deep);
  display: grid; place-items: center;
}
.dropdown .di-ic svg { width: 19px; height: 19px; }
.dropdown b { display: block; font-size: .95rem; color: var(--ink); font-weight: 700; }
.dropdown span { font-size: .82rem; color: var(--text-3); }

.nav__cta { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 10px; }
.nav__toggle span { display:block; width: 22px; height: 2px; background: var(--ink); margin: 5px auto; border-radius: 2px; transition: .3s; }

/* ------------------------------ Hero ------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(90% 80% at 14% 4%, rgba(33,207,230,.12) 0%, transparent 44%),
    radial-gradient(130% 120% at 80% -10%, #33256e 0%, var(--ink) 60%);
  color: #fff;
  padding-block: clamp(70px, 11vw, 130px);
}
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .9; pointer-events: none;
}
.hero__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(80% 80% at 70% 10%, #000 30%, transparent 75%);
}
.hero .container { position: relative; z-index: 2; }
.hero__inner { max-width: 760px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; margin-bottom: 26px;
  background: rgba(124,92,255,.16); border: 1px solid rgba(124,92,255,.34);
  color: #c9bcff; font-weight: 600; font-size: .9rem;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(126,231,135,.2); }
.hero h1 { color: #fff; margin-bottom: 22px; }
.hero h1 .hl {
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero__sub { font-size: 1.2rem; color: #b9cadd; max-width: 620px; margin-bottom: 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 38px; margin-top: 52px;
  padding-top: 34px; border-top: 1px solid rgba(255,255,255,.12);
}
.hero__stat .num { font-size: 2.1rem; font-weight: 900; color: #fff; line-height: 1; }
.hero__stat .num .u { color: var(--amber); font-size: 1.3rem; }
.hero__stat .lbl { font-size: .9rem; color: #91a6bd; margin-top: 7px; }

/* ------------------------------ Stat strip ------------------------------ */
.stat-strip { background: var(--ink-2); color: #fff; }
.stat-strip__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.08); border-radius: var(--radius); overflow: hidden;
}
.stat-strip__cell { background: var(--ink-2); padding: 30px 26px; text-align: center; }
.stat-strip__cell .num { font-size: 2.4rem; font-weight: 900; color: var(--cyan); }
.stat-strip__cell:nth-child(2) .num { color: #a99bff; }
.stat-strip__cell:nth-child(3) .num { color: var(--amber); }
.stat-strip__cell .lbl { color: #9fb3c9; font-size: .95rem; margin-top: 4px; }

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

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card__ic {
  width: 54px; height: 54px; border-radius: 14px; margin-bottom: 20px;
  background: linear-gradient(135deg, var(--cyan-soft), #d3f4fb);
  color: var(--cyan-deep); display: grid; place-items: center;
}
.card__ic svg { width: 27px; height: 27px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-2); font-size: .98rem; }
.card__link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  color: var(--cyan-deep); font-weight: 700; font-size: .95rem;
}
.card__link svg { width: 16px; height: 16px; transition: transform .25s; }
.card:hover .card__link svg { transform: translateX(-5px); }

/* Multi-hue accent rotation - breaks the mono-cyan rhythm across icon grids
   (cyan -> violet -> amber), threading purple + warm touches through the page. */
.grid > :nth-child(3n+2) .card__ic,
.deliverables > .deliv:nth-child(3n+2) .deliv__ic {
  background: linear-gradient(135deg, var(--violet-soft), #e2dbff);
  color: var(--violet-deep);
}
.grid > :nth-child(3n+2) .card__link,
.grid > :nth-child(3n+2) .deliv .abbr,
.deliverables > .deliv:nth-child(3n+2) .card__link,
.deliverables > .deliv:nth-child(3n+2) .abbr { color: var(--violet-deep); }
.grid > :nth-child(3n+3) .card__ic,
.deliverables > .deliv:nth-child(3n+3) .deliv__ic {
  background: linear-gradient(135deg, var(--amber-soft), #ffe1cd);
  color: var(--amber-deep);
}
.grid > :nth-child(3n+3) .card__link,
.grid > :nth-child(3n+3) .deliv .abbr,
.deliverables > .deliv:nth-child(3n+3) .card__link,
.deliverables > .deliv:nth-child(3n+3) .abbr { color: var(--amber-deep); }
.deliverables > .deliv:nth-child(3n+2)::before { background: linear-gradient(var(--violet), var(--violet-deep)); }
.deliverables > .deliv:nth-child(3n+3)::before { background: linear-gradient(var(--amber), var(--amber-deep)); }

/* Audience card (image-led) */
.aud-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 320px; display: flex; align-items: flex-end;
  color: #fff; padding: 28px;
  background: var(--ink-2);
}
.aud-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,18,32,.92) 8%, rgba(8,18,32,.25) 70%);
}
.aud-card__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; transition: transform .6s var(--ease); }
.aud-card:hover .aud-card__bg { transform: scale(1.07); }
.aud-card__body { position: relative; z-index: 2; }
.aud-card h3 { color: #fff; margin-bottom: 8px; }
.aud-card p { color: #c4d4e6; font-size: .95rem; margin-bottom: 14px; }
.aud-card .card__link { color: var(--cyan); }

/* ------------------------------ Device feature -------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse { direction: ltr; }
.split--reverse > * { direction: rtl; }
.media-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--ink);
  aspect-ratio: 4 / 3;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--scan { display: grid; place-items: center; }
.spec-list { display: grid; gap: 16px; margin-top: 28px; }
.spec {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 16px 18px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.section--ink .spec { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.spec__ic { width: 40px; height: 40px; border-radius: 10px; flex: none; background: var(--cyan-soft); color: var(--cyan-deep); display: grid; place-items: center; }
.section--ink .spec__ic { background: rgba(25,198,224,.16); color: var(--cyan); }
.spec__ic svg { width: 21px; height: 21px; }
.spec b { display: block; font-size: 1.05rem; color: var(--ink); }
.section--ink .spec b { color: #fff; }
.spec span { font-size: .92rem; color: var(--text-2); }
.section--ink .spec span { color: #a8bbd0; }

/* ------------------------------ Process --------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding: 30px 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.step__n {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  background: var(--ink); color: var(--cyan); display: grid; place-items: center;
  font-weight: 900; font-size: 1.2rem;
}
.step h4 { font-size: 1.12rem; margin-bottom: 8px; color: var(--ink); }
.step p { color: var(--text-2); font-size: .94rem; }
.steps > .step:nth-child(2) .step__n { background: var(--violet-deep); color: #fff; }
.steps > .step:nth-child(3) .step__n { background: var(--amber-deep); color: #fff; }

/* --- Process flow: laser connector that sweeps 1->4 (desktop, 4-in-a-row) --- */
.steps { position: relative; }
.steps__flow { display: none; }

@media (min-width: 1001px) {
  /* the rail threads over the card faces (z:2) but behind the number badges (z:3),
     so the cards stay un-indexed (no stacking context) and the badges float above it */
  .steps__flow {
    display: block;
    position: absolute;
    top: 53px;                 /* vertical center of the number badges (30px pad + 23px) */
    inset-inline: 6px;
    height: 3px;
    margin-top: -1.5px;
    z-index: 2;                /* over the card faces, connecting the badges into one rail */
    pointer-events: none;
    border-radius: 999px;
    background: linear-gradient(to left,
      var(--cyan) 0%, var(--violet-deep) 42%, var(--amber-deep) 74%, var(--cyan) 100%);
    opacity: .5;
  }
  /* the moving element - a glowing laser pulse travelling right -> left (1 -> 4) */
  .steps__pulse {
    position: absolute;
    top: 50%;
    right: -15%;
    width: 160px;
    height: 4px;
    margin-top: -2px;
    border-radius: 999px;
    background: linear-gradient(to left,
      rgba(33,207,230,0) 0%, rgba(124,92,255,.55) 45%, var(--cyan) 82%, #eafcff 100%);
    box-shadow: 0 0 16px 4px rgba(33,207,230,.75), 0 0 30px 9px rgba(124,92,255,.32);
    animation: stepsPulse 3.6s cubic-bezier(.55,.05,.55,.95) infinite;
    will-change: right, opacity;
  }
  /* number badges pop in sequence 1 -> 2 -> 3 -> 4, in time with the pulse */
  .steps > .step .step__n {
    position: relative;
    z-index: 3;                /* badges sit above the rail so it threads behind them */
    box-shadow: 0 6px 16px rgba(11,16,36,.10);
    will-change: box-shadow, transform;
  }
  .steps > .step:nth-child(1) .step__n { --glow: 33,207,230;  animation: stepBadge 3.6s ease-in-out infinite; }
  .steps > .step:nth-child(2) .step__n { --glow: 124,92,255;  animation: stepBadge 3.6s ease-in-out infinite .45s; }
  .steps > .step:nth-child(3) .step__n { --glow: 255,138,76;  animation: stepBadge 3.6s ease-in-out infinite .90s; }
  .steps > .step:nth-child(4) .step__n { --glow: 33,207,230;  animation: stepBadge 3.6s ease-in-out infinite 1.35s; }
}

@keyframes stepsPulse {
  0%   { right: -15%; opacity: 0; }
  12%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { right: 100%; opacity: 0; }
}
@keyframes stepBadge {
  0%, 10%, 100% { box-shadow: 0 6px 16px rgba(11,16,36,.10); transform: translateY(0); }
  18%           { box-shadow: 0 0 0 5px rgba(var(--glow), .16), 0 10px 22px rgba(var(--glow), .48); transform: translateY(-4px); }
  32%           { box-shadow: 0 6px 16px rgba(11,16,36,.10); transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .steps__pulse { display: none; }
  .steps > .step .step__n { animation: none; }
}

/* ------------------------------ Feature list ---------------------------- */
.checks { display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks .ck {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--cyan-soft); color: var(--cyan-deep); display: grid; place-items: center;
}
.section--ink .checks .ck { background: rgba(25,198,224,.16); color: var(--cyan); }
.checks .ck svg { width: 15px; height: 15px; }
.checks b { color: var(--ink); }
.section--ink .checks b { color: #fff; }
.checks span { color: var(--text-2); font-size: .96rem; }
.section--ink .checks span { color: #a8bbd0; }

/* ------------------------------ Testimonials ---------------------------- */
.quote {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow);
}
.quote__stars { color: var(--amber); margin-bottom: 14px; letter-spacing: 2px; }
.quote p { color: var(--text); font-size: 1.05rem; font-style: italic; }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.quote__av { width: 46px; height: 46px; border-radius: 50%; background: var(--amber-soft); display:grid; place-items:center; font-weight: 800; color: var(--amber-deep); }
.quote__by b { color: var(--ink); }
.quote__by span { font-size: .85rem; color: var(--text-3); display: block; }

/* ------------------------------ CTA band -------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band__box {
  background:
    radial-gradient(100% 120% at 12% 110%, rgba(124,92,255,.28) 0%, transparent 55%),
    radial-gradient(120% 140% at 85% -20%, #3a2668 0%, var(--ink) 55%);
  border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px);
  color: #fff; position: relative; overflow: hidden;
}
.cta-band__box::after {
  content: ""; position: absolute; inset-inline-end: -80px; bottom: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,76,.34), transparent 65%);
}
.cta-band h2 { color: #fff; margin-bottom: 14px; max-width: 620px; }
.cta-band p { color: #b9cadd; max-width: 560px; margin-bottom: 30px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; position: relative; z-index: 2; }

/* ------------------------------ Page hero (inner) ----------------------- */
.page-hero {
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(33,207,230,.10) 0%, transparent 46%),
    radial-gradient(130% 130% at 85% -20%, #33256e 0%, var(--ink) 60%);
  color: #fff; padding-block: clamp(56px, 8vw, 96px); position: relative; overflow: hidden;
}
.page-hero .hero__grid { opacity: .25; }
.page-hero .container { position: relative; z-index: 2; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: .88rem; color: #8ba1ba; margin-bottom: 18px; }
.crumbs a:hover { color: var(--cyan); }
.crumbs span { opacity: .5; }
.page-hero h1 { color: #fff; max-width: 760px; }
.page-hero p { color: #b9cadd; font-size: 1.15rem; max-width: 620px; margin-top: 16px; }

/* ------------------------------ Contact --------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem; color: var(--text);
  background: #fff; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124,92,255,.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.contact-info { display: grid; gap: 16px; align-content: start; }
.contact-info .ci {
  display: flex; gap: 16px; align-items: center; padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.contact-info .ci__ic { width: 48px; height: 48px; border-radius: 12px; flex:none; background: var(--cyan-soft); color: var(--cyan-deep); display:grid; place-items:center; }
.contact-info .ci__ic svg { width: 23px; height: 23px; }
.contact-info .ci small { color: var(--text-3); font-size: .85rem; }
.contact-info .ci b { display: block; color: var(--ink); font-size: 1.08rem; }

/* ------------------------------ Footer ---------------------------------- */
.site-footer { background: var(--ink); color: #9fb3c9; padding-top: 70px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; }
.site-footer .brand { color: #fff; margin-bottom: 18px; }
.footer-about p { color: #8fa5bd; font-size: .96rem; max-width: 320px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: #cfe0f0; transition: .25s; }
.footer-social a:hover { background: var(--violet); color: #fff; transform: translateY(-3px); }
.footer-social svg { width: 19px; height: 19px; }
.footer-col h4 { color: #fff; font-size: 1.02rem; margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: #9fb3c9; font-size: .95rem; transition: color .2s; }
.footer-col a:hover { color: var(--cyan); }
.footer-contact .fc { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 13px; font-size: .95rem; }
.footer-contact .fc svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 3px; }
.footer-contact .fc-addr { color: #9fb3c9; line-height: 1.45; }
.fc-waze { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 15px; border-radius: 10px; background: rgba(51,204,255,.08); color: #7fdcf0; border: 1px solid rgba(51,204,255,.28); font-size: .9rem; font-weight: 600; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.fc-waze svg { width: 16px; height: 16px; color: var(--cyan); }
.fc-waze:hover { background: rgba(51,204,255,.14); border-color: rgba(51,204,255,.5); color: #b6ecf7; transform: translateY(-1px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-block: 24px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; font-size: .88rem; color: #6f859d; }
.footer-bottom a:hover { color: var(--cyan); }
.footer-bottom__start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.footer-legal { display: inline-flex; align-items: center; gap: 10px; }
.footer-legal a { color: #8ba1ba; }
.footer-legal a:hover { color: var(--cyan); }
.footer-legal__sep { opacity: .4; }
.footer-bottom__mono { font-size: .88rem; color: #8ba1ba; }

/* ------------------------------ Reveal animation ------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================ Accessibility widget ======================= *
   Floating button pinned to the bottom-left corner (physical left, so it is
   unambiguous in the RTL layout). Opens a panel of visual-aid toggles that
   persist across pages via localStorage. Styled to match the site tokens.     */
.a11y { position: fixed; left: 22px; bottom: 22px; z-index: 95; direction: rtl; }

.a11y__fab {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--shadow-brand);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.a11y__fab svg { width: 30px; height: 30px; }
.a11y__fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--shadow-violet); filter: saturate(1.06); }
.a11y__fab:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.a11y__panel {
  position: absolute; bottom: calc(100% + 14px); left: 0;
  width: 320px; max-width: calc(100vw - 44px);
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 16px;
  transform-origin: bottom left;
  animation: a11yIn .22s var(--ease);
}
.a11y__panel[hidden] { display: none; }
@keyframes a11yIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

.a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.a11y__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.a11y__title svg { width: 22px; height: 22px; color: var(--violet-deep); }
.a11y__close {
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center; color: var(--text-2);
  background: var(--bg-soft); border: 1px solid var(--line); transition: background .2s, color .2s;
}
.a11y__close svg { width: 18px; height: 18px; }
.a11y__close:hover { background: var(--violet-soft); color: var(--violet-deep); }

.a11y__fontrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 12px;
}
.a11y__fontlbl { font-weight: 700; font-size: .95rem; }
.a11y__fontctl { display: inline-flex; align-items: center; gap: 8px; }
.a11y__fontval { min-width: 46px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--text-2); }
.a11y__fontbtn {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  display: inline-grid; place-items: center; line-height: 1;
  font-weight: 800; font-size: .95rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line);
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.a11y__fontbtn span { font-size: .78em; margin-inline-start: 1px; }
.a11y__fontbtn:hover { border-color: var(--violet); color: var(--violet-deep); }
.a11y__fontbtn:active { transform: scale(.94); }

.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y__opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  text-align: center; cursor: pointer; min-height: 84px; padding: 12px 8px;
  border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: #fff;
  color: var(--text); font-weight: 600; font-size: .84rem; line-height: 1.25;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s, transform .15s;
}
.a11y__opt svg { width: 24px; height: 24px; color: var(--violet-deep); transition: color .2s; }
.a11y__opt:hover { border-color: var(--violet); box-shadow: var(--shadow); transform: translateY(-2px); }
.a11y__opt[aria-pressed="true"] {
  border-color: transparent; background: var(--grad-brand); color: #fff;
  box-shadow: var(--shadow-brand);
}
.a11y__opt[aria-pressed="true"] svg { color: #fff; }

.a11y__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.a11y__reset {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-weight: 700; font-size: .86rem; color: var(--amber-deep);
  background: var(--amber-soft); border: 1px solid transparent; border-radius: 999px; padding: 8px 14px;
  transition: background .2s, filter .2s;
}
.a11y__reset svg { width: 16px; height: 16px; }
.a11y__reset:hover { filter: brightness(.97); background: #ffe6d6; }
.a11y__statement { font-weight: 700; font-size: .86rem; color: var(--violet-deep); text-decoration: underline; text-underline-offset: 3px; }
.a11y__statement:hover { color: var(--violet); }

@media (max-width: 560px) {
  .a11y { left: 16px; bottom: 16px; }
  .a11y__fab { width: 52px; height: 52px; }
  .a11y__fab svg { width: 27px; height: 27px; }
}

/* ---- Effects applied to <html> when the matching toggle is on ---- */
/* Text-size control drives the root font-size inline (JS); everything sized in rem scales with it. */

/* Grayscale + contrast are applied per top-level content block, never to the widget itself,
   so the fixed accessibility button keeps working (a filter on an ancestor would trap it). */
html.a11y-grayscale { --a11y-gray: grayscale(1); }
html.a11y-contrast  { --a11y-contrast: contrast(1.32); }
html:where(.a11y-grayscale, .a11y-contrast) body > *:not(.a11y):not(script) {
  filter: var(--a11y-gray, ) var(--a11y-contrast, );
}

html.a11y-links a {
  text-decoration: underline !important; text-underline-offset: 2px;
  outline: 2px solid #7c5cff !important; outline-offset: 2px;
  border-radius: 3px;
}

html.a11y-readable body, html.a11y-readable body :not(.a11y):not(.a11y *) {
  font-family: Arial, "Assistant", "Segoe UI", sans-serif !important;
  letter-spacing: .01em;
}

html.a11y-spacing body :where(p, li, a, span, h1, h2, h3, h4, h5, h6, blockquote, dd, dt) {
  line-height: 2 !important; letter-spacing: .04em !important; word-spacing: .12em !important;
}

html.a11y-noanim, html.a11y-noanim * , html.a11y-noanim *::before, html.a11y-noanim *::after {
  animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* ------------------------------ Utilities ------------------------------- */
.mt-0 { margin-top: 0; }
.text-center { text-align: center; }
.maxw-680 { max-width: 680px; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav__menu, .nav__cta .btn--ghost { display: none; }
  .nav__toggle { display: block; }
  .nav.open .nav__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 74px; inset-inline: 0; background: #fff;
    border-bottom: 1px solid var(--line); padding: 14px 18px; box-shadow: var(--shadow-lg);
  }
  /* Mobile accordion: a service's sub-menu is COLLAPSED until its main link is
     tapped once (JS adds .is-open). A second tap on the main link navigates. */
  .nav.open .nav__menu .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; min-width: 0;
    overflow: hidden; max-height: 0; padding: 0;
    transition: max-height .33s var(--ease), padding .33s var(--ease);
  }
  .nav.open .nav__menu .has-drop.is-open > .dropdown { max-height: 720px; padding: 4px 0 8px; }
  .nav.open .nav__menu .has-drop.is-open > .nav__link svg { transform: rotate(180deg); }
  .nav.open .nav__menu .has-drop > .nav__link svg { opacity: .9; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero__stats { gap: 26px; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .stat-strip__grid { grid-template-columns: repeat(2, 1fr); } /* 2x2 on mobile */
  /* Footer: brand + contact full width; the two service columns sit side by side
     (RTL -> "שירותי מדידות" on the right, "שירותים נוספים" on the left). */
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .footer-about, .footer-contact { grid-column: 1 / -1; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  body { font-size: 1rem; } /* =16px at root default; stays relative for the a11y text-size control */
}
/* ---- Mobile: vertical "laser" timeline for the 4 process steps.
   Desktop threads a horizontal rail through the badges (>=1001px); phones get the
   same idea rotated vertical - a gradient rail in a right gutter, badges on it. */
@media (max-width: 700px) {
  .steps { grid-template-columns: 1fr; gap: 14px; position: relative; }
  .steps::before {
    content: ""; position: absolute; z-index: 1; top: 38px; bottom: 38px;
    right: 34px; width: 3px; border-radius: 999px; pointer-events: none; opacity: .6;
    background: linear-gradient(to bottom,
      var(--cyan) 0%, var(--violet-deep) 42%, var(--amber-deep) 74%, var(--cyan) 100%);
  }
  .step { padding: 20px 70px 22px 20px; }   /* right gutter holds the rail + badge */
  .step__n {
    position: absolute; top: 18px; right: 13px; margin: 0; z-index: 2;
    width: 44px; height: 44px; box-shadow: 0 6px 16px rgba(11,16,36,.14);
  }
  .step h4 { margin-top: 2px; }
}

/* ---- Mobile: turn the "why / benefit" card grids into a 1-up auto slider.
   JS (initMobileSliders) wraps each #why .grid in .msl-viewport and appends
   .msl-dots. On phones the grid becomes a horizontal track; desktop is untouched. */
.msl-dots { display: none; }
@media (max-width: 560px) {
  .msl-viewport { overflow: hidden; position: relative; }
  #why .grid.grid-4 {
    display: flex; flex-wrap: nowrap; gap: 0;
    transition: transform .5s cubic-bezier(.6,.02,.3,1); will-change: transform;
  }
  #why .grid.grid-4 > .card {
    flex: 0 0 100%; min-width: 100%;
    opacity: 1 !important; transform: none !important;   /* neutralise reveal in the slider */
  }
  .msl-dots {
    display: flex; justify-content: center; gap: 8px; margin-top: 20px;
  }
  .msl-dots button {
    width: 8px; height: 8px; padding: 0; border: none; cursor: pointer;
    border-radius: 999px; background: var(--line);
    transition: width .3s var(--ease), background .3s var(--ease);
  }
  .msl-dots button.is-active { width: 24px; background: var(--grad-brand); }
}

/* ==========================================================================
   v2 - Premium layer (architect-first, real imagery)
   Appended overrides + new components. Later rules win the cascade.
   ========================================================================== */

/* ---- Type refinement ----
   Hebrew has no ascender/descender kerning to tighten - negative tracking makes
   letters collide (client feedback: "לרווח בין האותיות"). Keep headings at 0. */
h1 { letter-spacing: 0; }
h2 { letter-spacing: 0; }
.section { padding-block: clamp(64px, 9vw, 118px); }
#services { padding-block-start: clamp(40px, 6vw, 78px); }

/* ---- Brand logo (real wolf mark) ---- */
.brand__logo {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px;
}
.brand__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Footer sits on a dark background, so the dark wolf mark keeps a light chip */
.site-footer .brand__logo {
  background: rgba(255,255,255,.94);
  border-radius: 12px; padding: 4px; overflow: hidden;
  box-shadow: 0 6px 16px -8px rgba(10,26,50,.4);
}
.brand__txt { display: flex; flex-direction: column; line-height: 1.05; }
.brand__txt b { font-weight: 900; font-size: 1.32rem; color: var(--ink); }
.site-footer .brand__txt b { color: #fff; }
.brand__txt small { font-size: .6rem; font-weight: 700; letter-spacing: .13em; color: var(--cyan-deep); margin-top: 3px; text-transform: none; }

/* ---- Hero with real point-cloud image ---- */
.hero--real { padding-block: clamp(96px, 15vw, 176px); }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(1.05) contrast(1.04);
  transform: scale(1.04);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.12) translateY(-12px); } }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 90% at 86% 22%, rgba(124,92,255,.24) 0%, transparent 55%),
    linear-gradient(to left, rgba(11,10,32,.42) 0%, rgba(11,10,32,.72) 42%, rgba(11,10,32,.94) 78%, var(--ink) 100%),
    linear-gradient(to top, var(--ink) 2%, rgba(11,10,32,.1) 46%);
}
.hero__scan {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  mask-image: radial-gradient(120% 100% at 30% 40%, #000 40%, transparent 80%);
}
.hero__scan::before {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(33,207,230,.9), transparent);
  box-shadow: 0 0 24px 6px rgba(33,207,230,.5);
  animation: heroScan 6.5s cubic-bezier(.5,.1,.4,.9) infinite;
}
@keyframes heroScan {
  0% { top: -4%; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}
.hero--real .container { position: relative; z-index: 3; }
.hero--real .hero__canvas { z-index: 2; opacity: .5; }
.hero--real .hero__grid { z-index: 1; }
.hero__eyebrow-line { color: #c9bcff; font-weight: 700; letter-spacing: .04em; font-size: .9rem; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.hero__eyebrow-line::before { content:""; width: 30px; height: 2px; background: var(--grad-brand); }

/* ---- Page hero, scan variant: real point-cloud background integrated into the navy ----
   Used on inner service pages (e.g. שירותי מדידה). The scan image sits behind the copy
   as part of the background - no frame, feathered into --ink - with a right-biased scrim
   (RTL: copy on the right) so the headline always passes contrast, plus the shared laser
   scan sweep + point-cloud canvas layered over it. */
.page-hero--scan { padding-block: clamp(64px, 8.5vw, 112px); }
.page-hero--scan .hero__grid { z-index: 1; opacity: .14; }
/* mirror so the bright tower sits on the LEFT and the darker scan sky falls under the
   copy on the RIGHT (RTL) - keeps the headline/paragraph over the calmest area */
.page-hero--scan .hero__media { z-index: 0; transform: scaleX(-1); }
.page-hero--scan .hero__media img {
  /* frame the LIT half of the scan (plant + concrete pad). The source photo's top third is a
     pure-black scan sky; centring it vertically (was 48%) pulled that void across the hero. */
  object-position: 30% 64%;
  transform: scale(1.04);
  /* let the point cloud read crisp and vivid - it IS the hero (our actual scan output), not a faint backdrop.
     contrast BELOW 1 is the lift: it raises the pure-black sky off zero so the hero reads as a lit
     night scan instead of a black rectangle (brightness alone can't lift pure black - 0 x n = 0). */
  filter: saturate(1.16) contrast(.9) brightness(1.34);
  /* feather every edge so the scan floats in the navy instead of reading as a rectangle */
  -webkit-mask-image: radial-gradient(155% 145% at 36% 46%, #000 56%, transparent 100%);
          mask-image: radial-gradient(155% 145% at 36% 46%, #000 56%, transparent 100%);
  animation: heroDrift 30s ease-in-out infinite alternate;
}
.page-hero--scan .hero__scan { z-index: 2; }
.page-hero--scan .hero__canvas { z-index: 2; }
/* readability veil - an EVEN, rich-indigo (not murky-black) wash across the copy column,
   kept clear over the bright scan on the left, with a violet glow so the hero feels lit, not heavy */
.page-hero--scan .page-hero__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  /* the veil tints with a LIT indigo (#171b45), not near-black (#0b0e26): same readability,
     but the hero reads illuminated rather than murky - the client's "too dark" note. */
  background:
    radial-gradient(62% 84% at 82% 22%, rgba(124,92,255,.34) 0%, transparent 62%),
    radial-gradient(48% 62% at 96% 96%, rgba(33,207,230,.16) 0%, transparent 64%),
    /* atmospheric lift over the source photo's black night-sky corner, so it reads as depth
       around the scan rather than a dead void */
    radial-gradient(52% 66% at 6% 0%, rgba(86,224,245,.13) 0%, rgba(124,92,255,.1) 44%, transparent 76%),
    /* soft pocket behind the WHOLE copy block (eyebrow -> paragraph), not just the headline: the lit
       scan runs bright yellow handrails straight under the paragraph's leading edge, and measured
       contrast there fell to 2.8:1 without this. Feathered, so the left half stays fully lit. */
    radial-gradient(58% 76% at 62% 50%, rgba(14,17,48,.6) 0%, rgba(14,17,48,.34) 54%, transparent 84%),
    linear-gradient(to right,
      rgba(23,27,69,0) 0%, rgba(23,27,69,0) 24%,
      rgba(23,27,69,.26) 38%, rgba(23,27,69,.46) 50%, rgba(23,27,69,.55) 68%, rgba(23,27,69,.62) 100%),
    linear-gradient(to bottom, rgba(23,27,69,.14) 0%, rgba(23,27,69,0) 32%, rgba(23,27,69,0) 68%, rgba(23,27,69,.3) 100%);
}
.page-hero--scan .container { position: relative; z-index: 5; }
/* The scan hero is DARK, so its copy must be LIGHT. Both classes (.page-hero.page-hero--scan)
   raise specificity to (0,2,x) so these win over the later "Light page-hero" block
   (.page-hero h1{color:var(--ink)} etc.) that would otherwise force dark ink over the dark scan. */
.page-hero.page-hero--scan h1 {
  color: #fff;
  /* soft dark halo so the white line stays crisp even where it crosses the bright tower */
  text-shadow: 0 1px 3px rgba(6,8,26,.7), 0 2px 20px rgba(8,11,32,.6);
}
/* On the DARK scan hero the old warm gradient's amber end (#ff8a4c) read as a muddy,
   low-contrast brown over the navy - so the highlight uses a bright laser-scan gradient
   (light cyan -> light violet): both stops clear contrast against the navy. */
.page-hero.page-hero--scan h1 .hl {
  /* stops raised (was #56e0f5 -> #9f8bff) now that the scan behind them is lit: on the brighter
     backdrop the old mid-tone cyan read muddy next to the pure-white first line. */
  background: linear-gradient(100deg, #7ceeff 0%, #bcaaff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* ⚠️ the h1's text-shadow IS inherited here and paint order is background -> text-shadow -> glyph,
     so a dark shadow lands ON TOP of the clipped gradient and greys the letters out (this is what made
     the line render as muddy slate instead of cyan->violet). Kill it; the halo comes from filter,
     which applies to the composited result instead. */
  text-shadow: none;
  filter: drop-shadow(0 1px 3px rgba(6,8,26,.85)) drop-shadow(0 2px 16px rgba(6,8,26,.55));
}
/* brighten + protect the copy so it stays crisp over any part of the scan */
.page-hero.page-hero--scan p { color: #e6ecf9; text-shadow: 0 1px 14px rgba(8,11,32,.5); }
.page-hero.page-hero--scan .hero__eyebrow-line { color: #dccfff; }
.page-hero.page-hero--scan .crumbs { color: #bcc6e0; }
.page-hero.page-hero--scan .crumbs a { color: #dbe2f1; }
@media (max-width: 760px) {
  /* on the small screen the scan is a backdrop, not the star (as it is on desktop), but it must still
     be VISIBLE: frame the lit plant, lift the black sky (contrast<1) and keep only as much veil as the
     centred headline needs. The old .72 dim under a near-opaque .86 veil read as a black block. */
  .page-hero--scan .hero__media img {
    object-position: 46% 68%;
    filter: saturate(1.06) contrast(.92) brightness(1.04);
    /* at 390px the box is TALLER than the cover-scaled photo is deep, so cover crops horizontally only
       and the whole frame height - including the black sky - is on screen (object-position Y is a no-op
       here). Zooming past cover is what crops that sky away, so mobile gets its own drift keyframes. */
    animation: heroDriftScanMobile 32s ease-in-out infinite alternate;
  }
  .page-hero--scan .page-hero__scrim {
    background:
      radial-gradient(90% 54% at 50% 12%, rgba(124,92,255,.24) 0%, transparent 60%),
      linear-gradient(to bottom,
        rgba(23,27,69,.78) 0%, rgba(23,27,69,.74) 30%, rgba(23,27,69,.7) 46%,
        rgba(23,27,69,.63) 62%, rgba(23,27,69,.6) 74%, rgba(23,27,69,.74) 100%);
  }
}
/* negative translateY pulls the frame DOWN the photo (less sky at the top of the hero); the zoom
   leaves ~25% overflow top and bottom, so these offsets never expose the image edge */
@keyframes heroDriftScanMobile {
  from { transform: scale(1.5) translateY(-7%); }
  to   { transform: scale(1.58) translateY(-12%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero--scan .hero__media img { animation: none; }
  /* animation:none would drop the mobile zoom back to plain cover (black sky back in frame) */
  @media (max-width: 760px) { .page-hero--scan .hero__media img { transform: scale(1.52) translateY(-9%); } }
  .page-hero--scan .hero__scan::before { animation: none; opacity: 0; }
}

/* ---- Clients / trust strip ---- */
.clients { background: #fff; border-bottom: 1px solid var(--line); padding-block: 34px; }
.clients__head { text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--text-3); text-transform: uppercase; margin-bottom: 22px; }
.clients__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(26px, 5vw, 64px);
}
.clients__logo {
  height: 46px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter .3s, opacity .3s, transform .3s;
}
.clients__logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }

/* ---- Logo slider (auto-rotating client wall) ---- */
.logo-slider {
  position: relative; overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.logo-slider__track {
  display: flex; flex-wrap: nowrap; gap: 18px; width: max-content;
  will-change: transform;
  transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.logo-chip {
  flex: 0 0 auto; width: 176px; height: 88px;
  display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 6px; box-shadow: 0 1px 3px rgba(8, 17, 33, .05);
}
.logo-chip img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  opacity: .95; transition: opacity .35s, transform .35s;
}
.logo-chip:hover { border-color: var(--cyan); box-shadow: 0 6px 18px rgba(33, 207, 230, .16); }
.logo-chip:hover img { opacity: 1; transform: scale(1.04); }
@media (max-width: 560px) {
  .logo-chip { width: 142px; height: 74px; }
  .logo-slider__track { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-slider__track { transition: none; }
}

/* ---- Deliverables (survey products grid) ---- */
.deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.deliv {
  position: relative; display: block; padding: 26px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  overflow: hidden;
}
.deliv::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--cyan), var(--cyan-deep)); transform: scaleY(0); transform-origin: top;
  transition: transform .3s var(--ease);
}
.deliv:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.deliv:hover::before { transform: scaleY(1); }
.deliv__ic { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 16px; background: linear-gradient(135deg, var(--cyan-soft), #d3f4fb); color: var(--cyan-deep); display: grid; place-items: center; }
.deliv__ic svg { width: 24px; height: 24px; }
.deliv h3 { font-size: 1.18rem; margin-bottom: 7px; }
.deliv h3 .full { font-size: inherit; font-weight: inherit; color: inherit; }
.deliv .abbr { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--cyan-deep); display: block; margin-bottom: 4px; }
.deliv p { color: var(--text-2); font-size: .95rem; }

/* ---- Flip interaction: on hover the card rotates 180° to a matching back face ---- */
/* Base (touch / small screens, no flip): show the image FRONT as a static card, hide the back */
.deliv__back { display: none; }
.deliv__face--back { display: none; }
/* the flip tile itself carries no frame in the static state - the image front is the card */
.deliv:has(> .deliv__inner) { padding: 0; border: 0; background: transparent; overflow: visible; }
.deliv:has(> .deliv__inner)::before { display: none; }
.deliv__face--front {
  position: relative; min-height: 210px; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}

@media (hover: hover) and (pointer: fine) {
  /* Only the flip variant (image front that rotates to a back face) drops its frame on
     desktop. Simple text deliverables (no .deliv__inner) keep the base white card. */
  .deliv:has(> .deliv__inner) { background: transparent; border: 0; padding: 0; overflow: visible; perspective: 1400px; transition: none; }
  .deliv:has(> .deliv__inner)::before { display: none; }                    /* accent bar moves onto the faces */
  .deliv:has(> .deliv__inner):hover { transform: none; box-shadow: none; }
  .deliv__inner { position: relative; min-height: 330px; transform-style: preserve-3d; transition: transform .95s var(--ease); }
  .deliv:hover .deliv__inner { transform: rotateY(180deg); }
  .deliv__face {
    position: absolute; inset: 0; display: block;
    padding: 26px 24px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lg); overflow: hidden;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
  }
  .deliv__face::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(var(--cyan), var(--cyan-deep));
  }
  /* back face is a flex column so the "לפרטים" link can pin to the bottom */
  .deliv__face--back { transform: rotateY(180deg); display: flex; flex-direction: column; }
  .deliverables > .deliv:nth-child(3n+2) .deliv__face::before { background: linear-gradient(var(--violet), var(--violet-deep)); }
  .deliverables > .deliv:nth-child(3n+3) .deliv__face::before { background: linear-gradient(var(--amber), var(--amber-deep)); }
  /* pin the arrow + "לפרטים" to the BOTTOM of the card, aligned LEFT - identical on every card */
  .deliv__face--back .card__link { margin-top: auto; display: flex; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .deliv__inner { transition: none; }
  .deliv:hover .deliv__inner { transform: none; }
}
.deliv .card__link { margin-top: auto; }   /* flex column pushes it to the bottom of the back face */

/* ---- Image front face: a matching service photo with only the name overlaid ---- */
.deliv__face--front { padding: 0; }
.deliv__face--front::before { display: none; }                 /* no side accent bar over the image */
.deliv__img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.deliv__face--front::after {                                   /* scrim so the title stays legible */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(11,16,32,.92) 0%, rgba(11,16,32,.60) 26%,
    rgba(11,16,32,.16) 56%, rgba(11,16,32,0) 100%);
}
.deliv__face--front h3 {
  position: absolute; z-index: 2; inset-inline: 22px; bottom: 22px; margin: 0;
  color: #fff; font-size: 1.24rem; line-height: 1.32; text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.deliv__face--front h3 .full {
  display: block; font-size: .8em; font-weight: 600; opacity: .9; margin-top: 3px;
}
.deliv__face--front h3::before {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 3px; margin-bottom: 12px;
  background: var(--cyan);
}
.deliverables > .deliv:nth-child(3n+2) .deliv__face--front h3::before { background: var(--violet); }
.deliverables > .deliv:nth-child(3n+3) .deliv__face--front h3::before { background: var(--amber); }
.deliverables > .deliv .deliv__face--front .abbr {
  position: absolute; z-index: 2; top: 15px; inset-inline-start: 15px; margin: 0;
  color: #fff; background: rgba(17,22,38,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 5px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
}

/* ---- Service feature rows (alternating image + text) ---- */
.feature-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; }
.feature-row + .feature-row { margin-top: clamp(56px, 8vw, 100px); }
.feature-row--flip { direction: ltr; }
.feature-row--flip > * { direction: rtl; }
.feature-media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--ink-2); aspect-ratio: 16 / 11;
}
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.feature-media:hover img { transform: scale(1.05); }
.feature-media__frame { width: 100%; height: 100%; border: 0; display: block; }
/* interactive Matterport tour: fill the box, move the tag to the top-corner so it
   stays clear of Matterport's on-screen controls, and let clicks reach the tour */
.feature-media--tour .feature-media__tag {
  inset-block-start: 16px; inset-block-end: auto; pointer-events: none;
}
/* לוגו Matterport מוטבע בראש הנגן (הפרמטר brand=0 עובד רק בחשבון בתשלום):
   מגדילים את המסגרת ומזיזים אותה מעלה, כך שהפס העליון עם הלוגו נחתך מחוץ לתיבה
   וסרגל הכלים התחתון של הסיור נשאר גלוי במלואו. */
.feature-media__frame[src*="matterport"] {
  position: absolute; inset-inline: 0; top: -12%; height: 112%;
}
.feature-media__frame[src*="matterport"]:fullscreen { position: fixed; inset: 0; height: 100%; }
.feature-media__tag {
  position: absolute; inset-block-end: 16px; inset-inline-start: 16px; z-index: 2;
  background: rgba(8,17,33,.72); backdrop-filter: blur(6px); color: #fff;
  padding: 8px 15px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,.14);
}
/* the media box itself is a link to the live 3D model (reuses .tour-play for the
   play badge); the tag sits above the badge overlay and never eats the click */
.feature-media--link { display: block; text-decoration: none; }
.feature-media--link .feature-media__tag {
  z-index: 3; pointer-events: none; inset-block-start: 16px; inset-block-end: auto;
}
.feature-media--link:hover .tour-play b { transform: scale(1.09); background: var(--violet); }
/* auto-rotating visualization gallery: images stacked in the same box, crossfading */
.feature-media--gallery .viz-track { position: absolute; inset: 0; }
.feature-media--gallery .viz-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .9s var(--ease), transform .7s var(--ease);
}
.feature-media--gallery .viz-slide.is-active { opacity: 1; }
.viz-dots {
  position: absolute; inset-block-end: 16px; inset-inline: 0; z-index: 3;
  display: flex; justify-content: center; gap: 8px; pointer-events: none;
}
.viz-dots .viz-dot {
  pointer-events: auto; width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
  border-radius: 999px; background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px rgba(8,17,33,.25); transition: width .35s var(--ease), background .35s var(--ease);
}
.viz-dots .viz-dot.is-active { width: 22px; background: #fff; }
.feature-body .eyebrow { margin-bottom: 12px; }
.feature-body h2 { margin-bottom: 16px; }
.feature-body > p { color: var(--text-2); font-size: 1.08rem; margin-bottom: 22px; }
/* CTA link at the bottom of each feature row - aligned LEFT (end in RTL) */
.feature-body .card__link { display: flex; width: fit-content; margin-inline-start: auto; }
.pill-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: .88rem; font-weight: 600; color: var(--text); }
.pill svg { width: 14px; height: 14px; color: var(--cyan-deep); }
.section--ink .pill { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #dce7f2; }
.section--ink .pill svg { color: var(--cyan); }

/* ---- Technology showcase (real device) ---- */
.tech-show { position: relative; overflow: hidden; }
.tech-show .split { align-items: center; }
.device-stage { position: relative; display: grid; place-items: center; min-height: 380px; perspective: 1300px; }
.device-stage > * { grid-area: 1 / 1; }   /* stack in-flow children centered */
.device-stage::before {
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,207,230,.34), rgba(33,207,230,.05) 55%, transparent 70%);
  filter: blur(6px);
  animation: pulseGlow 5s ease-in-out infinite;
}
@keyframes pulseGlow { 0%,100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }

/* rotating LiDAR sweep - one laser beam scanning a full 360deg */
.device-sweep {
  z-index: 1; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(33,207,230,0) 262deg,
    rgba(33,207,230,.16) 318deg,
    rgba(33,207,230,.60) 347deg,
    rgba(198,249,255,1) 359deg,
    rgba(198,249,255,0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 29%, #000 45%, rgba(0,0,0,.45) 63%, transparent 80%);
          mask: radial-gradient(circle, transparent 29%, #000 45%, rgba(0,0,0,.45) 63%, transparent 80%);
  filter: blur(1px);
  animation: spin 4.2s linear infinite;
}

/* point cloud lighting up as the beam passes */
.device-cloud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.device-cloud i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%; margin: -3px;
  background: var(--cyan); box-shadow: 0 0 9px 1px rgba(33,207,230,.85);
  opacity: 0; animation: ptTwinkle 4.6s ease-in-out infinite;
}
@keyframes ptTwinkle {
  0%, 100% { opacity: 0; transform: scale(.35); }
  7%       { opacity: 1; transform: scale(1.15); }
  16%      { opacity: .85; transform: scale(1); }
  46%      { opacity: .12; transform: scale(.7); }
}
.device-cloud i:nth-child(1)  { top: 8%;  left: 50%; animation-delay: 0s; }
.device-cloud i:nth-child(2)  { top: 16%; left: 70%; animation-delay: .46s; }
.device-cloud i:nth-child(3)  { top: 40%; left: 84%; animation-delay: .92s; width: 5px; height: 5px; }
.device-cloud i:nth-child(4)  { top: 64%; left: 82%; animation-delay: 1.38s; }
.device-cloud i:nth-child(5)  { top: 82%; left: 66%; animation-delay: 1.84s; width: 5px; height: 5px; }
.device-cloud i:nth-child(6)  { top: 90%; left: 50%; animation-delay: 2.30s; }
.device-cloud i:nth-child(7)  { top: 82%; left: 34%; animation-delay: 2.76s; }
.device-cloud i:nth-child(8)  { top: 62%; left: 18%; animation-delay: 3.22s; width: 5px; height: 5px; }
.device-cloud i:nth-child(9)  { top: 38%; left: 16%; animation-delay: 3.68s; }
.device-cloud i:nth-child(10) { top: 16%; left: 32%; animation-delay: 4.14s; width: 5px; height: 5px; }

/* device gently rotates on a 3D turntable + floats (not static) */
.device-float { z-index: 2; transform-style: preserve-3d; will-change: transform;
  animation: deviceShowcase 9s ease-in-out infinite; }
@keyframes deviceShowcase {
  0%   { transform: rotateY(-13deg) translateY(0); }
  25%  { transform: rotateY(0deg)   translateY(-12px); }
  50%  { transform: rotateY(13deg)  translateY(0); }
  75%  { transform: rotateY(0deg)   translateY(-12px); }
  100% { transform: rotateY(-13deg) translateY(0); }
}
.device-stage img { position: relative; z-index: 2; max-width: 108%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.device-ring { position: absolute; z-index: 1; border: 1px solid rgba(33,207,230,.22); border-radius: 50%; pointer-events: none; }
.device-ring.r1 { width: 62%; aspect-ratio: 1; }
.device-ring.r2 { width: 86%; aspect-ratio: 1; border-style: dashed; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* respect reduced-motion: keep it a clean still */
@media (prefers-reduced-motion: reduce) {
  .device-stage::before, .device-ring.r2, .device-float { animation: none; }
  .device-float { transform: none; }
  .device-sweep, .device-cloud { display: none; }
}

/* ---- Format chips (CAD/Revit/SketchUp) ---- */
.formats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.format-chip {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; color: #fff; font-weight: 700;
}
.format-chip small { display: block; font-weight: 500; font-size: .78rem; color: #9db4cc; }
.format-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* ---- Scanner fleet (technology section - 4 scanners incl. drone) ---- */
/* No cards: transparent cutouts float directly on the dark section, each bobbing in its own rhythm. */
.fleet { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
.fleet__item {
  position: relative; z-index: 1; margin: 0; text-align: center;
  padding: 14px 10px 8px; background: none; border: 0; box-shadow: none;
}
/* soft colored halo behind each scanner so it lifts off the dark bg (esp. the darker drone) */
.fleet__item::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 40%;
  width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(33,207,230,.22), transparent 66%);
  filter: blur(7px); pointer-events: none;
}
.fleet__item:nth-child(2)::before { background: radial-gradient(circle, rgba(124,92,255,.24), transparent 66%); }
.fleet__item:nth-child(3)::before { background: radial-gradient(circle, rgba(255,138,76,.22), transparent 66%); }
.fleet__item:nth-child(4)::before { background: radial-gradient(circle, rgba(126,231,135,.28), transparent 66%); }
.fleet__item img {
  display: block; width: 100%; height: 150px; object-fit: contain; margin: 0 auto 14px;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.5));
  transition: filter .3s var(--ease); will-change: transform;
}
.fleet__item:hover img { filter: drop-shadow(0 22px 26px rgba(0,0,0,.55)) brightness(1.06); }
/* the drone is dark - lift it a touch so it reads on the dark bg like the white scanners */
.fleet__item:nth-child(4) img { filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)) brightness(1.12) contrast(1.04); }
.fleet__item:nth-child(4):hover img { filter: drop-shadow(0 22px 26px rgba(0,0,0,.55)) brightness(1.18) contrast(1.04); }
.fleet__item figcaption { font-weight: 800; color: #fff; font-size: 1.02rem; }
.fleet__item figcaption small { display: block; font-weight: 600; font-size: .78rem; color: #aebfd2; margin-top: 4px; line-height: 1.35; }
/* gentle, out-of-sync floating - each scanner drifts in its own area */
.fleet__item:nth-child(1) img { animation: fleetFloat1 5.6s ease-in-out infinite; }
.fleet__item:nth-child(2) img { animation: fleetFloat2 6.5s ease-in-out .5s infinite; }
.fleet__item:nth-child(3) img { animation: fleetFloat3 6.0s ease-in-out .9s infinite; }
.fleet__item:nth-child(4) img { animation: fleetFloat4 6.9s ease-in-out .2s infinite; }
@keyframes fleetFloat1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-11px) rotate(-1.6deg); } }
@keyframes fleetFloat2 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes fleetFloat3 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(1.4deg); } }
@keyframes fleetFloat4 { 0%,100% { transform: translate(0,0) rotate(0); } 33% { transform: translate(5px,-8px) rotate(1.6deg); } 66% { transform: translate(-5px,-14px) rotate(-1.6deg); } }
@media (prefers-reduced-motion: reduce) { .fleet__item img { animation: none !important; } }

/* ---- Outcome list (from one scan - what you get) ---- */
.outcome-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 900px; margin: clamp(40px, 5vw, 56px) auto 0; }
/* breathing room before the virtual-tour feature-row so it doesn't crowd the cards */
.outcome-list + .feature-row { margin-top: clamp(56px, 8vw, 100px); }
.outcome-list li {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid var(--line);
  border-radius: 15px; padding: 16px 18px; box-shadow: var(--shadow);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
/* hover: הכרטיס מתרומם, גוון מותג נשטף פנימה והאייקון קופץ קלות */
.outcome-list li > * { position: relative; z-index: 1; }
.outcome-list li::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(33,207,230,.13), rgba(124,92,255,.10) 55%, rgba(255,138,76,.10));
  transition: opacity .32s var(--ease);
}
.outcome-list li:hover { transform: translateY(-5px); box-shadow: 0 18px 36px rgba(16,20,51,.13); border-color: #bfe6f3; }
.outcome-list li:hover::before { opacity: 1; }
.outcome-list__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cyan-soft), #d3f4fb); color: var(--cyan-deep); transition: transform .38s var(--ease), box-shadow .38s var(--ease); }
.outcome-list li:hover .outcome-list__ic { transform: scale(1.12) rotate(-5deg); box-shadow: 0 8px 18px rgba(16,20,51,.12); }
@media (prefers-reduced-motion: reduce) {
  .outcome-list li:hover { transform: none; }
  .outcome-list li:hover .outcome-list__ic { transform: none; }
}
.outcome-list__ic svg { width: 23px; height: 23px; }
.outcome-list .t { font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.4; }
.outcome-list li:nth-child(2) .outcome-list__ic { background: linear-gradient(135deg, var(--violet-soft), #e2dbff); color: var(--violet-deep); }
.outcome-list li:nth-child(3) .outcome-list__ic { background: linear-gradient(135deg, var(--amber-soft), #ffe1d0); color: var(--amber-deep); }
.outcome-list li:nth-child(4) .outcome-list__ic { background: linear-gradient(135deg, #e6fae9, #d2f5d7); color: #2ba23a; }
@media (max-width: 640px) { .outcome-list { grid-template-columns: 1fr; } }

/* ---- About teaser ---- */
.about-teaser .split { align-items: center; }
.about-portrait { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; max-width: 420px; }
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait__badge {
  position: absolute; inset-block-end: 18px; inset-inline-start: 18px; inset-inline-end: 18px;
  background: rgba(8,17,33,.78); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 16px 18px; color: #fff;
}
.about-portrait__badge b { display: block; font-size: 1.05rem; }
.about-portrait__badge span { font-size: .86rem; color: #a8bccf; }
.sign { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.sign b { font-size: 1.05rem; color: var(--ink); }
.sign span { font-size: .9rem; color: var(--text-3); }

/* ---- Section tint ---- */
.section--tint { background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }

/* ---- Project gallery ---- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery__item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); background: var(--ink-2); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 26px 18px 14px; color: #fff; font-weight: 600; font-size: .92rem; background: linear-gradient(to top, rgba(8,17,33,.9), transparent); }

/* ==========================================================================
   Light hero (bright, cyan-on-light) - split layout
   ========================================================================== */
.hero--light {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #ffffff 0%, #f5f0fe 44%, #efe7fb 78%, #fdeee6 100%);
  color: var(--ink);
  padding-block: clamp(64px, 9vw, 104px);
  border-bottom: 1px solid #ece6f4;
}
.hero--light .hero__grid {
  position: absolute; inset: 0; z-index: 0; opacity: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(124,92,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(95% 85% at 25% 15%, #000 18%, transparent 80%);
}
.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 640px; height: 640px; border-radius: 50%;
  inset-inline-start: -180px; top: -240px;
  background: radial-gradient(circle, rgba(124,92,255,.22), transparent 64%);
  filter: blur(8px);
}
.hero--light .hero__glow--warm {
  inset-inline-start: auto; inset-inline-end: -200px; top: auto; bottom: -260px;
  background: radial-gradient(circle, rgba(255,138,76,.18), transparent 64%);
}
.hero--light .container { position: relative; z-index: 2; }
.hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.hero-copy { max-width: 620px; }
.hero--light h1 { color: var(--ink); margin-bottom: 22px; }
.hero--light h1 .hl {
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero--light .hero__sub { color: var(--text-2); font-size: 1.18rem; max-width: 560px; margin-bottom: 32px; }
.hero--light .hero__eyebrow-line { color: var(--violet-deep); }
.hero--light .btn--on-dark { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.hero--light .btn--on-dark:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-2px); }
.hero--light .hero__stats { border-top: 1px solid #e3daf0; margin-top: 38px; padding-top: 30px; }
.hero--light .hero__stat .num { color: var(--ink); }
.hero--light .hero__stat .num .u { color: var(--amber-deep); }
.hero--light .hero__stat .lbl { color: var(--text-3); }

.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; inset: 6% 6% -6% -6%; z-index: 0; border-radius: 30px;
  background:
    radial-gradient(circle at 72% 78%, rgba(255,138,76,.20), transparent 58%),
    radial-gradient(circle at 40% 30%, rgba(124,92,255,.30), transparent 62%);
  filter: blur(14px);
}
.hero-frame {
  position: relative; z-index: 1; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -34px rgba(12,42,74,.45);
  border: 4px solid #fff;
}
.hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(124,92,255,.12), transparent 46%); pointer-events: none; }
.hero-scanline { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.hero-scanline::before {
  content: ""; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(33,207,230,.95), transparent);
  box-shadow: 0 0 22px 5px rgba(33,207,230,.55);
  animation: heroScan 6s cubic-bezier(.5,.1,.4,.9) infinite;
}
.hero-chip {
  position: absolute; z-index: 3; inset-block-end: -22px; inset-inline-end: -16px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg); padding: 13px 18px 13px 16px;
  display: flex; align-items: center; gap: 12px;
}
.hero-chip__ic { width: 42px; height: 42px; border-radius: 12px; flex: none; background: var(--grad-brand); color: #fff; display: grid; place-items: center; }
.hero-chip__ic svg { width: 23px; height: 23px; }
.hero-chip b { display: block; font-size: 1.18rem; color: var(--ink); line-height: 1.05; }
.hero-chip span { font-size: .78rem; color: var(--text-3); }

/* ---- Stat strip: numbers render LTR (fixes "10+" flipping to "+10" in RTL) ---- */
.stat-strip__cell .num { direction: ltr; unicode-bidi: isolate; }

/* ---- Stat strip (light variant) - wide, low-profile capsule; delicate cyan numerals ---- */
.stat-strip--light { background: var(--bg-soft); color: var(--ink); border-block: 1px solid var(--line); }
.stat-strip--light .container { max-width: 1360px; margin-inline: auto; }   /* open the card wider than the page grid, centered (override the menu-start start-margin) */
.stat-strip--light .stat-strip__grid {
  background: var(--line);
  border-radius: 34px;
  box-shadow: 0 22px 54px -28px rgba(24,14,60,.34);
}
.stat-strip--light .stat-strip__cell { background: #fff; padding: 20px 26px; }   /* lower height */
/* every number in the same cyan as "2,337"; light weight, refined figures */
.stat-strip--light .stat-strip__cell .num,
.stat-strip--light .stat-strip__cell:nth-child(2) .num,
.stat-strip--light .stat-strip__cell:nth-child(3) .num {
  color: var(--cyan-deep);
  font-size: clamp(2.2rem, 3.6vw, 2.75rem);
  font-weight: 500;                 /* delicate, not bold */
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* labels in warm amber */
.stat-strip--light .stat-strip__cell .lbl {
  color: var(--amber-deep); font-weight: 600; font-size: .92rem; margin-top: 6px; letter-spacing: .005em;
}

/* ---- Light page-hero (inner pages, matches light home hero) ---- */
.page-hero {
  background: linear-gradient(155deg, #ffffff 0%, #f5f0fe 50%, #efe7fb 80%, #fdeee6 100%);
  color: var(--ink);
  border-bottom: 1px solid #ece6f4;
}
.page-hero .hero__canvas { display: none; }
.page-hero .hero__grid {
  opacity: 1;
  background-image:
    linear-gradient(rgba(124,92,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(92% 88% at 28% 12%, #000 18%, transparent 80%);
}
.page-hero h1 { color: var(--ink); }
.page-hero p { color: var(--text-2); }
.page-hero .crumbs { color: var(--text-3); }
.page-hero .crumbs a { color: var(--text-2); }
.page-hero .crumbs a:hover { color: var(--violet-deep); }
.page-hero .btn--on-dark { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.page-hero .btn--on-dark:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-2px); }

/* ---- Light CTA band (soft violet -> warm peach) ---- */
.cta-band__box {
  background: linear-gradient(135deg, #efe9fe 0%, #f6ecfb 46%, #fde9dd 100%);
  color: var(--ink); border: 1px solid #ecdcfb;
}
.cta-band__box::after { background: radial-gradient(circle, rgba(255,138,76,.26), transparent 62%); }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--text-2); }

/* ---- CTA band with Oded photo (service pages) ---- */
.cta-band__box--photo { min-height: 470px; padding-inline-end: clamp(150px, 33%, 410px); }
.cta-band__photo {
  position: absolute; inset-inline-end: clamp(0px, 2.4vw, 40px); bottom: 0;
  height: clamp(320px, 32vw, 440px); width: auto;
  object-position: bottom center;
  filter: drop-shadow(0 22px 34px rgba(30,16,70,.26));
  pointer-events: none; z-index: 1;
}
@media (max-width: 860px) {
  .cta-band__box--photo { min-height: 0; padding-inline-end: clamp(40px, 6vw, 72px); }
  .cta-band__photo { display: none; }
}

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; gap: 46px; }
  .hero-copy { max-width: 100%; }
  .hero-chip { inset-inline-end: 16px; }
}

/* ---- Deliverable panel (image-less feature-media replacement) ---- */
.deliv-panel {
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  background: radial-gradient(130% 130% at 85% -10%, #123a5e 0%, var(--ink) 62%);
  color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
  min-height: 300px; display: flex; flex-direction: column; justify-content: center;
}
.deliv-panel::after {
  content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,207,230,.28), transparent 65%);
}
.deliv-panel__ic { width: 58px; height: 58px; border-radius: 15px; background: rgba(33,207,230,.16); color: var(--cyan); display: grid; place-items: center; margin-bottom: 20px; }
.deliv-panel__ic svg { width: 30px; height: 30px; }
.deliv-panel h3 { color: #fff; font-size: 1.4rem; margin-bottom: 16px; }
.deliv-panel .checks .ck { background: rgba(33,207,230,.16); color: var(--cyan); }
.deliv-panel .checks b, .deliv-panel .checks span { color: #dce7f2; }

/* ---- Includes checklist (light bg) ---- */
.includes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 4px 0 24px; }
.includes li { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; color: var(--text); }
.includes .ck { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--cyan-soft); color: var(--cyan-deep); display: grid; place-items: center; margin-top: 2px; }
.includes .ck svg { width: 13px; height: 13px; }
.section--ink .includes li { color: #dce7f2; }
.section--ink .includes .ck { background: rgba(33,207,230,.16); color: var(--cyan); }
@media (max-width: 480px) { .includes { grid-template-columns: 1fr; } }

/* ==========================================================================
   Google reviews slider
   ========================================================================== */
/* Tighten the gap between the services section and the reviews section */
#measurement { padding-bottom: clamp(40px, 6vw, 74px); }
.section.reviews { padding-top: clamp(40px, 6vw, 74px); }

.google-badge {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 20px;
  padding: 10px 20px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow);
}
.google-badge__g { width: 22px; height: 22px; flex: none; }
.google-badge__score { font-weight: 800; color: var(--ink); font-size: 1.1rem; }
.google-badge__stars { color: #fbbc05; letter-spacing: 1px; }
.google-badge__txt { font-size: .86rem; color: var(--text-3); }
@media (max-width: 480px) { .google-badge__txt { display: none; } }

.reviews-slider { position: relative; margin-top: 6px; }
.reviews-viewport { overflow: hidden; }
.reviews-track { display: flex; gap: 22px; transition: transform .5s var(--ease); will-change: transform; }
.review-card {
  flex: 0 0 clamp(268px, 82vw, 358px); box-sizing: border-box;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px 26px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.review-card__top { display: flex; align-items: center; gap: 13px; }
.review-av { position: relative; width: 48px; height: 48px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.25rem; }
.review-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.review-card__who { flex: 1; min-width: 0; }
.review-card__who b { display: block; color: var(--ink); font-size: 1.04rem; line-height: 1.2; }
.review-card__who span { font-size: .82rem; color: var(--text-3); }
.review-card__g { width: 20px; height: 20px; flex: none; align-self: flex-start; }
.review-stars { color: #fbbc05; letter-spacing: 2px; font-size: 1.05rem; }
.review-text { color: var(--text); font-size: 1rem; line-height: 1.72; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }

/* side navigation arrows */
.rev-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.97); box-shadow: var(--shadow-lg);
  display: grid; place-items: center; color: var(--ink);
  transition: border-color .2s, color .2s, transform .2s;
}
.rev-nav:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-50%) scale(1.08); }
.rev-nav svg { width: 20px; height: 20px; }
.rev-prev { inset-inline-end: -10px; }
.rev-next { inset-inline-start: -10px; }
@media (max-width: 640px) { .rev-nav { width: 40px; height: 40px; } .rev-prev { inset-inline-end: -4px; } .rev-next { inset-inline-start: -4px; } }

/* ========================= Video testimonials (homepage) ========================= */
.vtest { background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); overflow: clip; padding-bottom: clamp(24px, 3.5vw, 44px); }
.vtest .section-head { margin-bottom: 42px; }

.vtest-slider { position: relative; }
.vtest-viewport { overflow: hidden; padding-block: 10px; }
.vtest-track { display: flex; gap: 24px; transition: transform .55s var(--ease); will-change: transform; }

.vtest-card {
  flex: 0 0 clamp(256px, 78vw, 340px); box-sizing: border-box;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; padding: 0; cursor: pointer;
  text-align: start; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
}
.vtest-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.vtest-card:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.vtest-card__media { position: relative; aspect-ratio: 16 / 9; background: #0b1024; overflow: hidden; }
.vtest-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--ease); }
.vtest-card:hover .vtest-card__media img { transform: scale(1.06); }
.vtest-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,16,36,0) 45%, rgba(11,16,36,.42) 100%);
}

.vtest-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.94); color: var(--violet-deep);
  box-shadow: 0 12px 32px -8px rgba(11,16,36,.55);
  transition: transform .28s var(--ease), background .28s, color .28s;
}
.vtest-play::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.vtest-play svg { width: 26px; height: 26px; margin-inline-start: 3px; }
.vtest-card:hover .vtest-play { transform: scale(1.12); background: #fff; color: var(--amber-deep); }

.vtest-card__cap { padding: 15px 18px 17px; display: flex; flex-direction: column; gap: 3px; }
.vtest-card__cap b { font-size: 1.05rem; color: var(--ink); line-height: 1.2; }
.vtest-card__cap span { font-size: .85rem; color: var(--text-3); }

/* side navigation arrows (mirror .rev-nav) */
.vt-nav {
  position: absolute; top: calc(50% - 22px); transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(255,255,255,.97); box-shadow: var(--shadow-lg);
  display: grid; place-items: center; color: var(--ink); cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.vt-nav:hover { border-color: var(--violet); color: var(--violet-deep); transform: translateY(-50%) scale(1.08); }
.vt-nav svg { width: 20px; height: 20px; }
.vt-prev { inset-inline-end: -10px; }
.vt-next { inset-inline-start: -10px; }

/* pagination dots */
.vtest-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.vt-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--bg-soft-2); transition: width .3s var(--ease), background .3s;
}
.vt-dot:hover { background: #c9c8dd; }
.vt-dot.is-active { width: 26px; border-radius: 5px; background: var(--grad-brand); }

@media (max-width: 640px) {
  .vt-nav { width: 40px; height: 40px; }
  .vt-prev { inset-inline-end: -4px; }
  .vt-next { inset-inline-start: -4px; }
}

/* ---- video lightbox (shared) ---- */
.vt-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; }
.vt-lightbox.is-open { display: grid; place-items: center; }
.vt-lightbox__bd { position: absolute; inset: 0; background: rgba(6,8,20,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vt-lightbox__stage { position: relative; z-index: 1; width: min(92vw, 900px); animation: vtPop .32s var(--ease); }
.vt-lightbox[data-orient="portrait"] .vt-lightbox__stage { width: min(92vw, 400px); }
.vt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); background: #000; }
.vt-lightbox[data-orient="portrait"] .vt-frame { aspect-ratio: 9 / 16; max-height: 84vh; margin-inline: auto; }
.vt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vt-close {
  position: absolute; top: -52px; inset-inline-end: 0; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center;
  transition: background .2s, transform .2s;
}
.vt-close:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }
.vt-close svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .vt-close { top: -50px; } }
@keyframes vtPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vt-lightbox__stage { animation: none; } .vtest-track { transition: none; } }

/* ---- Anchored section offset for sticky header ---- */
[id] { scroll-margin-top: 92px; }

/* ---- v2 Responsive ---- */
@media (max-width: 1000px) {
  .deliverables, .gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .feature-row, .tech-show .split, .about-teaser .split { grid-template-columns: 1fr; gap: 32px; }
  .feature-row--flip { direction: rtl; }
  .about-portrait { margin-inline: auto; }
  .device-stage { min-height: 300px; }
}
@media (max-width: 560px) {
  .deliverables, .gallery { grid-template-columns: 1fr; }
  .clients__row { gap: 22px 30px; }
  .clients__logo { height: 38px; }
  .brand__txt small { display: none; }
}

/* ---- v2 overflow guards + mobile header/hero fit ---- */
html { overflow-x: clip; }
.hero__inner, .hero__actions, .hero__stats { max-width: 100%; }
.btn { max-width: 100%; }
@media (max-width: 860px) {
  /* Mobile header: logo far LEFT with the two icon buttons (quick-call + WhatsApp)
     hugging it, and the hamburger pinned far RIGHT. The "הצעת מחיר" text button is
     dropped on mobile. RTL flex -> lowest order sits at the right edge, highest at
     the left; the auto margin on the CTA pushes the toggle out to the right. */
  .nav { gap: 10px; justify-content: flex-start; }
  .nav__toggle { order: 0; flex: none; }        /* far right */
  .nav__cta { order: 1; margin-inline-start: auto; gap: 9px; }  /* hugs the brand */
  .brand { order: 2; }                          /* far left */
  .nav__cta .btn--primary { display: none; }    /* drop the quote button on mobile */
  .nav__call { display: inline-grid; }          /* quick-call icon next to WhatsApp */
  .brand__logo { width: 42px; height: 42px; }
}
/* Narrow phones: trim header padding so the row stays comfortable. */
@media (max-width: 560px) {
  .site-header .container { padding-inline: 16px; }
  .nav { gap: 8px; }
}
@media (max-width: 400px) {
  .brand__txt b { font-size: 1.15rem; }
  .hero__stats { gap: 18px 24px; }
  .hero__stat .num { font-size: 1.8rem; }
  .site-header .container { padding-inline: 12px; }
}
/* Smallest phones (~320-360px): keep logo/icons/hamburger on one comfortable row. */
@media (max-width: 360px) {
  .site-header .container { padding-inline: 10px; }
  .nav { gap: 6px; }
  .nav__cta { gap: 7px; }
  .brand__txt b { font-size: 1.05rem; }
}

/* ---- Video portfolio (lightweight YouTube facade) ---- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.video-card { position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink-2); }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.video-card:hover img { transform: scale(1.06); }
.video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,17,33,.6), rgba(8,17,33,.05) 48%); pointer-events: none; }
.video-card__play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; z-index: 2; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: var(--shadow-lg); transition: transform .25s var(--ease), background .25s; }
.video-card__play svg { width: 24px; height: 24px; margin-inline-start: 3px; fill: var(--primary); }
.video-card:hover .video-card__play { transform: scale(1.1); background: #fff; }
.video-card__cap { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 30px 16px 13px; color: #fff; font-weight: 600; font-size: .95rem; text-align: start; }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video-card.is-playing::after, .video-card.is-playing .video-card__play, .video-card.is-playing .video-card__cap { display: none; }
/* הסרטון הראשי: רוחב מלא בראש הרשת, שאר הסרטונים באותו גודל מתחתיו */
.video-card--feature { grid-column: 1 / -1; aspect-ratio: 16/8; margin-bottom: 6px; }
.video-card--feature .video-card__play { width: 84px; height: 84px; }
.video-card--feature .video-card__play svg { width: 32px; height: 32px; }
.video-card--feature .video-card__cap { font-size: 1.15rem; font-weight: 800; padding: 40px 22px 18px; }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } .video-card--feature { aspect-ratio: 16/9; } }
@media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } .video-card--feature .video-card__play { width: 62px; height: 62px; } .video-card--feature .video-card__cap { font-size: 1rem; } }


/* ==========================================================================
   Cinematic video hero (bright, full-bleed video across the whole band) - home
   ========================================================================== */
.hero-v{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - 74px);
  display:flex; align-items:center;
  background:linear-gradient(150deg,#ffffff 0%,#f4effe 42%,#ede4fb 74%,#fdeee4 100%);
  color:var(--ink);
  padding-block:clamp(48px,7vw,90px);
}
.hero-v__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }

/* ambient blurred fill: a soft, full-bleed copy of the clip stretched edge-to-edge,
   so the WHOLE hero reads as one continuous cinematic screen (no empty side zones). */
.hero-v__fill{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
  transform:scale(1.2);
  filter:blur(40px) saturate(116%) brightness(1.03);
  opacity:.5;
}

/* crisp focal clip: a BIG, open shot that spans well past centre - עודד, the architect
   beside him and the 3D model all read clearly. Vertical-centred so the seated pair stays
   in frame; feathered on the right + top/bottom so it melts into the soft area and the copy. */
.hero-v__video{
  position:absolute; inset-block:0; left:0; height:100%;
  width:min(62%, 940px);
  object-fit:cover; object-position:52% 50%;
  -webkit-mask-image:
    linear-gradient(to right,  #000 0, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  #000 0, #000 84%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 5%, #000 93%, transparent 100%);
  mask-composite:intersect;
}
/* readability scrim on the text side (physical right, RTL): pushed right so the wider clip
   stays clear and open across the centre; strong only under the copy column. */
.hero-v__bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to left,
      rgba(250,249,254,.97) 0%, rgba(250,249,254,.95) 32%,
      rgba(250,249,254,.82) 46%, rgba(250,249,254,.5) 58%,
      rgba(250,249,254,.16) 68%, rgba(255,255,255,0) 78%),
    linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,0) 16%),
    linear-gradient(to top, rgba(243,236,251,.32), rgba(255,255,255,0) 18%);
}

.hero-v__inner{ position:relative; z-index:2; width:100%; display:flex; justify-content:flex-start; }
.hero-v__copy{ max-width:600px; }

.hero-v__eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--violet-deep); font-weight:700; letter-spacing:.02em; font-size:.92rem;
  margin-bottom:18px;
}
.hero-v__eyebrow::before{ content:""; width:30px; height:2px; background:var(--grad-brand); flex:none; }

.hero-v h1{
  color:var(--ink); font-size:clamp(2.2rem,4.4vw,3.7rem); line-height:1.1;
  letter-spacing:0; margin-bottom:22px; font-weight:800;
  text-shadow:0 1px 2px rgba(255,255,255,.7);
}
.hero-v h1 .hl{
  color:var(--violet-deep);
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; text-shadow:none;
}
.hero-v__sub{
  font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--text-2); max-width:540px;
  margin-bottom:34px; line-height:1.6; text-shadow:0 1px 2px rgba(255,255,255,.6);
}
.hero-v__actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-v .btn--on-dark{ background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow); backdrop-filter:none; }
.hero-v .btn--on-dark:hover{ background:#fff; border-color:var(--violet); color:var(--violet-deep); transform:translateY(-2px); }
.hero-v__stats{
  display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,46px);
  margin-top:clamp(30px,5vw,52px); padding-top:30px;
  border-top:1px solid #cfe3ec;
}
.hero-v__stat .num{ display:flex; align-items:baseline; justify-content:center; direction:ltr; font-size:clamp(1.7rem,2.6vw,2.15rem); font-weight:900; color:var(--ink); line-height:1; }
.hero-v__stat .num .u{ color:var(--amber-deep); font-size:.6em; font-weight:800; }
.hero-v__stat .num .u--area{ order:-1; margin-inline-end:5px; }   /* מ"ר מוצג משמאל למספר */
.hero-v__stat .num .u--deg{ align-self:flex-start; }              /* ° מוגבה כמקובל בסימון מעלות */
.hero-v__stat .num .u--min{ order:-1; margin-inline-end:5px; unicode-bidi:plaintext; }    /* דק' מוצג משמאל למספר; plaintext מבודד ל-RTL כדי שהגרש יופיע אחרי ק */
.hero-v__stat .lbl{ font-size:.88rem; color:var(--text-2); margin-top:8px; max-width:172px; text-align:center; }

/* --- "עבודה על ה-TEMPLATE שלכם" - שורת דגל מונפשת מתחת למספרים --- */
.hero-tpl{
  position:relative; display:inline-flex; align-items:center; gap:12px; overflow:hidden;
  margin-top:clamp(18px,2.2vw,26px); padding:12px 22px; border-radius:999px;
  background:var(--grad-brand); color:#fff;
  font-weight:800; font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.2;
  transform-origin:center; will-change:transform;
  animation:tplBreath 3.8s ease-in-out infinite;
}
.hero-tpl__ic{
  flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:rgba(255,255,255,.22);
}
.hero-tpl__ic svg{ width:18px; height:18px; }
.hero-tpl__t b{ font-weight:900; letter-spacing:.04em; }
/* ברק שעובר על הדגל, מסונכרן עם הזום */
.hero-tpl::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); pointer-events:none;
  animation:tplSheen 3.8s ease-in-out infinite;
}
@keyframes tplBreath{
  0%,100%{ transform:scale(1);     box-shadow:0 8px 20px rgba(33,207,230,.22), 0 2px 8px rgba(16,20,51,.10); }
  50%    { transform:scale(1.055); box-shadow:0 16px 34px rgba(33,207,230,.38), 0 4px 12px rgba(16,20,51,.14); }
}
@keyframes tplSheen{
  0%,55%{ left:-45%; } 90%,100%{ left:130%; }
}
@media (prefers-reduced-motion:reduce){
  .hero-tpl{ animation:none; box-shadow:0 10px 24px rgba(33,207,230,.26); }
  .hero-tpl::after{ display:none; }
}

/* scroll cue */
.hero-v__cue{
  position:absolute; z-index:2; inset-inline:0; bottom:20px; margin-inline:auto;
  width:25px; height:40px; border:2px solid rgba(16,40,70,.28); border-radius:14px;
  display:grid; place-items:start center; padding-top:7px;
}
.hero-v__cue span{ width:4px; height:8px; border-radius:3px; background:var(--violet-deep); animation:heroCue 1.8s var(--ease,ease) infinite; }
@keyframes heroCue{ 0%{ transform:translateY(0); opacity:0 } 30%{ opacity:1 } 70%{ transform:translateY(11px); opacity:0 } 100%{ opacity:0 } }

/* motion off -> show poster still */
@media (prefers-reduced-motion:reduce){
  .hero-v__fill,.hero-v__video{ display:none; }
  .hero-v__cue span{ animation:none; }
  .hero-v__bg{ background:42% 26%/cover no-repeat url(real/hero-poster.jpg); }
}

/* mobile: video fills the screen; text over a bright bottom veil */
@media (max-width:860px){
  .hero-v{ min-height:calc(100svh - 64px); align-items:flex-end; padding-block:0; }
  .hero-v__fill{ display:none; }
  .hero-v__video{
    position:absolute; inset:0; width:100%; height:100%;
    aspect-ratio:auto; max-width:none; left:0;
    object-fit:cover; object-position:50% 28%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 99%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,transparent 0,#000 4%,#000 99%);
    mask-composite:add;
  }
  /* lighter veil, pulled toward the bottom: the clip breathes across the top ~half
     while the copy zone keeps just enough tint for the dark headline + gray stats. */
  .hero-v__bg::after{
    background:linear-gradient(to top,
      rgba(250,249,254,.9) 0%, rgba(250,249,254,.72) 28%, rgba(250,249,254,.4) 46%,
      rgba(249,244,252,.16) 62%, rgba(255,255,255,0) 78%);
  }
  /* keep the dark headline crisp now that more of the bright clip shows through */
  .hero-v h1{ text-shadow:0 1px 2px rgba(255,255,255,.95), 0 2px 16px rgba(255,255,255,.6); }
  .hero-v__inner{ justify-content:center; }
  .hero-v__copy{ text-align:center; max-width:560px; padding-bottom:clamp(36px,9vw,64px); }
  .hero-v__eyebrow{ display:none; }   /* mobile: hide the laser eyebrow, keep the rest of the hero */
  .hero-v__sub{ margin-inline:auto; }
  .hero-v__actions{ display:none; }   /* mobile: drop the hero CTA buttons entirely */
  /* paragraph is lifted out of the hero (JS -> .hero-sub-dock); hide it while it
     still sits in the hero copy so the video keeps the full stage (no pre-JS flash) */
  .hero-v__copy .hero-v__sub{ display:none; }
  /* three stats stay on ONE row, numbers aligned on the same baseline */
  .hero-v__stats{ flex-wrap:nowrap; justify-content:center; align-items:flex-start; gap:10px; }
  .hero-v__stat{ flex:1 1 0; min-width:0; }
  .hero-v__stat .num{ font-size:clamp(1.35rem,6vw,1.9rem); }
  .hero-v__stat .lbl{ margin-inline:auto; max-width:none; font-size:.72rem; line-height:1.35; margin-top:6px; }
  .hero-tpl{ margin-top:16px; padding:9px 16px; gap:9px; font-size:.98rem; }
  .hero-tpl__ic{ width:27px; height:27px; border-radius:8px; }
  .hero-tpl__ic svg{ width:15px; height:15px; }
  .hero-v__cue{ display:none; }
}

/* Dock that receives the hero paragraph on mobile (built by initHeroLift). */
.hero-sub-dock{ display:none; }
@media (max-width:860px){
  .hero-sub-dock{ display:block; padding-block:22px 2px; }
  .hero-sub-dock .hero-v__sub{
    display:block; text-align:center; margin:0 auto; max-width:600px;
    text-shadow:none; color:var(--text-2);
  }
}

/* Desktop: align the hero copy's RIGHT edge to the start (the "א") of "אודות"
   in the nav. The header is a full-width bar - the logo hugs the right corner at
   clamp(24px,3.2vw,52px), and "אודות" begins 270px further in
   (brand 206 + flex gap 30 + nav__menu margin 20 + nav__link padding 14).
   So we drop the centred 1200px grid for the hero and anchor the copy the same
   fixed distance from the viewport's right edge, so its whole content column -
   eyebrow, H1, sub, buttons and stats - starts exactly on that vertical line. */
@media (min-width:861px){
  .hero-v .hero-v__inner{
    max-width:100%;
    /* This element also carries the .container class, whose >=1200px rule adds
       margin-inline-start:var(--menu-start). The hero anchors its copy with its OWN
       padding below, so cancel that inherited margin - otherwise the offset is applied
       twice and the copy lands ~--menu-start too far from the "א" of "אודות". */
    margin-inline:0;
    /* RTL: inline-start is the RIGHT edge - the side the copy hugs (justify-content:flex-start).
       Uses the same shared --menu-start / --edge tokens as the rest of the site content. */
    padding-inline-start:var(--menu-start);
    padding-inline-end:var(--edge);
  }
}

/* ==========================================================================
   Knowledge center / blog (מרכז הידע - מידע מקצועי)
   ========================================================================== */
.post-filter { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.pf-btn {
  font-family:inherit; font-weight:600; font-size:.98rem; cursor:pointer;
  padding:10px 24px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; color:var(--text-2);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.pf-btn:hover { border-color:var(--cyan); color:var(--cyan-deep); transform:translateY(-1px); }
.pf-btn.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }

.post-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.post-card.is-hidden { display:none; }
.post-card {
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.post-card__media { position:relative; display:block; aspect-ratio:16/11; overflow:hidden; background:var(--bg-soft-2); }
.post-card__media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .post-card__media img { transform:scale(1.06); }
.post-card__cat {
  position:absolute; inset-block-start:12px; inset-inline-start:12px;
  background:rgba(8,17,33,.82); color:#fff; font-size:.78rem; font-weight:600;
  padding:5px 13px; border-radius:999px; backdrop-filter:blur(4px);
}
.post-card__body { padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.post-card__meta { font-size:.82rem; color:var(--text-3); margin-bottom:9px; }
.post-card__body h3 { font-size:1.12rem; line-height:1.42; margin:0 0 10px; }
.post-card__body h3 a { color:var(--ink); }
.post-card__body h3 a:hover { color:var(--cyan-deep); }
.post-card__body p { font-size:.94rem; color:var(--text-2); line-height:1.65; margin:0 0 16px; flex:1; }
.post-card__link { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:.92rem; color:var(--cyan-deep); }
.post-card__link svg { width:17px; height:17px; }
.post-empty { text-align:center; color:var(--text-2); font-size:1.05rem; padding:40px 0; }

.post-pager { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:48px; }
.pg-btn {
  min-width:46px; height:46px; padding:0 10px; border-radius:13px;
  border:1.5px solid var(--line); background:#fff; color:var(--text-2);
  font-family:inherit; font-weight:700; font-size:1rem;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.pg-btn:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan-deep); }
.pg-btn.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }
.pg-btn:disabled { opacity:.4; cursor:not-allowed; }
.pg-arrow svg { width:18px; height:18px; }

@media (max-width: 860px){ .post-grid { grid-template-columns:repeat(2, 1fr); gap:18px; } }
@media (max-width: 480px){ .post-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   Architectural measurement page - flagship components
   ========================================================================== */

/* ---- Scan-to-BIM flow (3 nodes + connectors, on dark) ---- */
.flow { display: flex; align-items: stretch; gap: 8px; margin-top: 44px; }
.flow__node {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
.flow__node:hover { transform: translateY(-5px); border-color: rgba(33,207,230,.42); box-shadow: var(--shadow-lg); }
.flow__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-3); }
.flow__img img { width: 100%; height: 100%; object-fit: cover; }
.flow__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,17,33,.55), transparent 55%); }
.flow__body { padding: 22px 22px 26px; }
.flow__step { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; color: var(--cyan); }
.flow__step .n { width: 26px; height: 26px; border-radius: 8px; background: rgba(33,207,230,.16); display: grid; place-items: center; color: var(--cyan); font-weight: 900; }
.flow__node h3 { color: #fff; font-size: 1.16rem; margin-bottom: 8px; }
.flow__node p { color: #a8bbd0; font-size: .95rem; }
.flow__arrow { flex: none; display: grid; place-items: center; color: var(--cyan); opacity: .85; }
.flow__arrow svg { width: 26px; height: 26px; }
@media (max-width: 800px) {
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(-90deg); padding: 2px 0; }
}

/* ---- FAQ accordion (native <details>, no JS) ---- */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 12px; }
.faq__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; transition: box-shadow .25s var(--ease), border-color .25s;
}
.faq__item[open] { border-color: #cfe6ef; box-shadow: var(--shadow); }
.faq__q {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 20px 24px; font-weight: 700; font-size: 1.06rem; color: var(--ink);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q .chev {
  margin-inline-start: auto; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--cyan-soft); color: var(--cyan-deep); display: grid; place-items: center;
  transition: transform .3s var(--ease), background .25s;
}
.faq__q .chev svg { width: 15px; height: 15px; }

/* ==========================================================================
   Contact page - single above-the-fold split (info panel + form card)
   ========================================================================== */
.contact-hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - 74px);
  display: flex; align-items: safe center;
  padding-block: clamp(22px, 3.4vh, 52px);
  background: linear-gradient(155deg, #ffffff 0%, #f5f0fe 46%, #efe7fb 78%, #fdeee6 100%);
  border-bottom: 1px solid #ece6f4;
}
.contact-hero .hero__grid {
  position: absolute; inset: 0; opacity: 1; z-index: 0;
  background-image:
    linear-gradient(rgba(124,92,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,.06) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(92% 88% at 22% 8%, #000 16%, transparent 82%);
}
.contact-hero__blob {
  position: absolute; z-index: 0; border-radius: 50%; filter: blur(46px);
  pointer-events: none; will-change: transform;
}
.contact-hero__blob--a {
  width: 380px; height: 380px; top: -90px; inset-inline-start: -80px;
  background: radial-gradient(circle, rgba(33,207,230,.30), transparent 68%);
  animation: cblob 15s ease-in-out infinite;
}
.contact-hero__blob--b {
  width: 320px; height: 320px; bottom: -70px; inset-inline-end: -60px;
  background: radial-gradient(circle, rgba(124,92,255,.28), transparent 66%);
  animation: cblob 18s ease-in-out infinite reverse;
}
@keyframes cblob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(26px, 30px) scale(1.12); }
}
.contact-hero .container { position: relative; z-index: 2; width: 100%; }
.contact-hero__wrap {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 30px; align-items: stretch;
}

/* ---- Left: dark brand/info panel ---- */
.contact-panel {
  display: flex; border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(120% 90% at 90% -10%, #33256e 0%, transparent 55%),
    linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 60%);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.contact-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(33,207,230,.05), transparent 40%);
}
.contact-panel__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(22px, 2.4vw, 34px);
}
.contact-panel .crumbs { color: #8aa0bb; margin-bottom: 12px; }
.contact-panel .crumbs a { color: #b4c6da; }
.contact-panel .crumbs a:hover { color: var(--cyan); }
.contact-panel .eyebrow { color: #8fe6f4; margin-bottom: 10px; }
.contact-panel .eyebrow::before { background: var(--cyan); }
.contact-panel h1 {
  color: #fff; font-size: clamp(1.7rem, 2.5vw, 2.35rem); line-height: 1.12; margin-bottom: 10px;
}
.contact-panel__lead {
  color: #b6cade; font-size: 1rem; line-height: 1.5; max-width: 40ch; margin-bottom: 14px;
}

/* Oded photo - grows to fill the panel height, but never below the floor:
   the source is a 3:4 portrait, and letting flex squeeze it into a short strip
   cropped everything except a band across his forehead. */
.contact-photo {
  position: relative; flex: 1; min-height: clamp(300px, 24vw, 400px);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 50px -22px rgba(0,0,0,.6);
}
.contact-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;
  transition: transform 1.2s var(--ease);
}
.contact-photo:hover img { transform: scale(1.045); }
/* scrim only where the badge sits - high enough for legible text, low enough
   to leave his face alone */
.contact-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 54%, rgba(8,17,36,.5) 78%, rgba(8,17,36,.86) 100%);
}
.contact-photo__scan {
  content: ""; position: absolute; inset-inline: 0; top: 0; z-index: 3; height: 30%;
  background: linear-gradient(180deg, transparent, rgba(33,207,230,.34) 60%, rgba(126,231,135,.2) 100%);
  mix-blend-mode: screen; pointer-events: none;
  animation: cscan 4.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes cscan {
  0%   { transform: translateY(-120%); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}
.contact-photo__badge {
  position: absolute; z-index: 4; inset-inline: 14px; bottom: 14px;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 13px;
  background: rgba(12,18,38,.62); border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(9px);
}
.contact-photo__badge b { display: block; color: #fff; font-size: 1rem; line-height: 1.2; }
.contact-photo__badge small { display: block; color: #a9c0d6; font-size: .8rem; }
.contact-photo__dot {
  flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--lime);
  box-shadow: 0 0 0 0 rgba(126,231,135,.6); animation: cpulse 2.2s ease-out infinite;
}
@keyframes cpulse {
  0%   { box-shadow: 0 0 0 0 rgba(126,231,135,.6); }
  70%  { box-shadow: 0 0 0 9px rgba(126,231,135,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,231,135,0); }
}

/* Contact method links */
.contact-methods { display: grid; gap: 7px; }
.contact-methods .cm {
  display: flex; align-items: center; gap: 12px; padding: 9px 13px;
  border-radius: 13px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .22s var(--ease), border-color .22s, transform .22s var(--ease);
}
.contact-methods .cm:hover {
  background: rgba(255,255,255,.1); border-color: rgba(33,207,230,.4); transform: translateX(-4px);
}
.contact-methods .cm__ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(33,207,230,.16); color: var(--cyan);
}
.contact-methods .cm__ic svg { width: 20px; height: 20px; }
.contact-methods .cm--wa .cm__ic { background: rgba(37,211,102,.18); color: #34e07a; }
.contact-methods .cm__txt small { display: block; color: #93aac2; font-size: .78rem; line-height: 1.3; }
.contact-methods .cm__txt b { display: block; color: #fff; font-size: 1rem; line-height: 1.25; }

/* ---- Right: form card ---- */
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column;
}
.contact-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.contact-card__head h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0; }
.contact-card__avail {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; color: #1c7a3c;
  background: #e9fbef; border: 1px solid #b6ecc6; border-radius: 999px; padding: 6px 13px;
}
.contact-card__avail i {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: cpulse 2.2s ease-out infinite;
}
/* מחוץ לשעות המענה - נחזור לזמינות בזמן X */
.contact-card__avail--off {
  color: #9a5b00; background: #fff6e6; border-color: #f6d79a;
}
.contact-card__avail--off i { display: none; }
.contact-card__avail svg { width: 15px; height: 15px; flex: none; }
/* Compact fields so the whole form clears the fold */
.contact-card .field { margin-bottom: 13px; }
.contact-card .field label {
  margin-bottom: 5px; font-size: .9rem; display: flex; align-items: baseline; gap: 6px;
}
.contact-card .field__opt { color: var(--text-3); font-weight: 400; font-size: .82rem; }
.contact-card .field input,
.contact-card .field select,
.contact-card .field textarea { padding: 11px 14px; border-radius: 10px; font-size: .98rem; }
.contact-card .field textarea { min-height: 74px; }
.contact-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Email address reads left-to-right */
.contact-card #email { direction: ltr; text-align: left; }
/* Privacy-policy consent checkbox */
.consent {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 2px 0 12px; cursor: pointer;
  font-size: .84rem; line-height: 1.5; color: var(--text-2);
}
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: 1px; flex: none;
  border: 2px solid var(--cyan-deep); border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(14,165,196,.12);
  background: #fff; cursor: pointer; position: relative;
  transition: border-color .2s, background .2s;
}
.consent input:checked { background: var(--grad-brand); border-color: transparent; }
.consent input:checked::after {
  content: ""; position: absolute; inset: 0;
  background: no-repeat center / 62% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
}
.consent input:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 2px; }
.consent a { color: var(--cyan-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--violet); }
.consent .req { color: #e5484d; font-weight: 700; }
.contact-form__submit {
  width: 100%; margin-top: 4px; position: relative; overflow: hidden;
}
.contact-form__submit::after {
  content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg); animation: csheen 3.6s ease-in-out infinite;
}
@keyframes csheen {
  0%, 62% { inset-inline-start: -60%; }
  100%    { inset-inline-start: 130%; }
}
.contact-form__note {
  display: flex; align-items: center; gap: 8px; margin-top: 13px;
  font-size: .82rem; color: var(--text-3);
}
.contact-form__note svg { width: 15px; height: 15px; color: var(--cyan-deep); flex: none; }
#form-ok {
  display: none; align-items: center; gap: 11px; padding: 18px 18px;
  background: #e9fbef; border: 1px solid #b6ecc6; border-radius: 12px;
  color: #1c7a3c; font-weight: 700; line-height: 1.4;
}
#form-ok svg { flex: none; }
#form-ok small { font-weight: 500; color: #3f9a5c; font-size: .82rem; }

@media (prefers-reduced-motion: reduce) {
  .contact-photo__scan, .contact-hero__blob, .contact-photo__dot,
  .contact-card__avail i, .contact-form__submit::after { animation: none; }
  .contact-photo__scan { display: none; }
}

@media (max-width: 900px) {
  .contact-hero { min-height: 0; padding-block: 30px; }
  .contact-hero__wrap { grid-template-columns: 1fr; gap: 20px; }
  .contact-photo { min-height: clamp(300px, 72vw, 400px); }
  .contact-card .field-row { grid-template-columns: 1fr; gap: 0; }
}

.faq__item[open] .faq__q .chev { transform: rotate(180deg); background: var(--violet); color: #fff; }
.faq__a { padding: 0 24px 22px; color: var(--text-2); font-size: 1rem; line-height: 1.75; }
.faq__a b { color: var(--ink); }

/* ---- Trust chips row (under hero clients strip) ---- */
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; margin-top: 26px; }
.trust-chip { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--text-2); padding-inline: 18px; }
.trust-chip svg { width: 18px; height: 18px; color: var(--cyan-deep); flex: none; }
.trust-chip + .trust-chip { border-inline-start: 1px solid var(--line); }
@media (max-width: 620px) { .trust-chip { padding-inline: 12px; } .trust-chip + .trust-chip { border-inline-start: none; } }

/* ---- Deliverable card format tag ---- */
.deliv__fmt { display: inline-block; margin-top: 14px; font-size: .74rem; font-weight: 700; letter-spacing: .03em; color: var(--cyan-deep); background: var(--cyan-soft); padding: 5px 11px; border-radius: 999px; }

/* ---- Benefit card: cyan icon on light (value section) ---- */
.benefit { text-align: start; }
.benefit .card__ic { margin-bottom: 18px; }

/* ==========================================================================
   Knowledge-center ARTICLE (single post) - prose + supporting components
   ========================================================================== */

/* ---- Post hero (light gradient, with meta + category) ----
   The page-hero is LIGHT (see "Light page-hero" block), so the post copy must be
   dark ink. Keeping the old #fff title here made the headline nearly unreadable. */
.post-hero { padding-block: clamp(52px, 7vw, 84px); }
.post-hero .hero__inner { max-width: 820px; }
.post-hero .post-cat {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  color: #06333c; background: var(--cyan); padding: 6px 15px; border-radius: 999px;
  margin-bottom: 18px; box-shadow: 0 6px 16px -8px rgba(14,165,196,.6);
}
.post-hero h1 { color: var(--ink); letter-spacing: 0; }
.post-hero .post-metaline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  margin-top: 22px; color: var(--text-2); font-size: .92rem; font-weight: 500;
}
.post-hero .post-metaline span { display: inline-flex; align-items: center; gap: 7px; }
.post-hero .post-metaline svg { width: 16px; height: 16px; opacity: .75; color: var(--violet-deep); }
.post-hero .post-metaline .dot { width: 4px; height: 4px; border-radius: 50%; background: #b9b6cc; }
.post-hero .post-author { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 600; }
.post-hero .post-author img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(124,92,255,.28); }
/* narrow screens: the meta line wraps, and a separator dot would be left orphaned at line end */
@media (max-width: 560px) {
  .post-hero .post-metaline { gap: 6px 14px; }
  .post-hero .post-metaline .dot { display: none; }
}

/* ---- Article shell ---- */
.article { padding-block: clamp(46px, 6vw, 72px); }
.article__wrap { max-width: 820px; margin-inline: auto; }
.article__lead {
  font-size: 1.28rem; line-height: 1.65; color: var(--ink); font-weight: 500;
  margin-bottom: 32px; padding-inline-start: 20px; border-inline-start: 4px solid var(--cyan);
}

/* ---- Lead / inline figures ---- */
.figure { margin: 34px 0; }
.figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); display: block; }
.figure figcaption { margin-top: 12px; font-size: .88rem; color: var(--text-3); text-align: center; }
.figure--wide { margin-inline: calc(50% - 50vw); max-width: 100vw; }
@media (min-width: 1000px){ .figure--bleed img { width: min(1040px, 92vw); margin-inline: auto; } }

/* ---- Prose typography ---- */
.prose { font-size: 1.09rem; line-height: 1.85; color: var(--text-2); }
.prose > * + * { margin-top: 1.15em; }
.prose p { color: #3c4159; }
.prose h2 {
  font-size: clamp(1.42rem, 2.7vw, 1.95rem); color: var(--ink);
  margin-top: 1.7em; margin-bottom: .15em; scroll-margin-top: 100px;
}
.prose h2::before {
  content: ""; display: block; width: 40px; height: 3px; border-radius: 3px;
  background: var(--grad-brand); margin-bottom: 16px;
}
.prose h3 { font-size: 1.24rem; color: var(--ink); margin-top: 1.35em; margin-bottom: .1em; }
.prose a { color: var(--violet-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--cyan-deep); }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose ul, .prose ol { padding-inline-start: 4px; }
.prose ul li, .prose ol li { position: relative; padding-inline-start: 30px; margin-top: .6em; color: #3c4159; }
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: .62em;
  width: 9px; height: 9px; border-radius: 3px; background: var(--grad-brand);
}
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before {
  content: counter(li); position: absolute; inset-inline-start: 0; top: .05em;
  width: 22px; height: 22px; border-radius: 7px; background: var(--violet-soft); color: var(--violet-deep);
  font-size: .8rem; font-weight: 800; display: grid; place-items: center;
}
.prose blockquote {
  margin: 30px 0; padding: 20px 24px; border-radius: var(--radius-sm);
  background: var(--cyan-soft); border-inline-start: 4px solid var(--cyan-deep);
  font-size: 1.12rem; color: var(--ink); font-weight: 500; line-height: 1.6;
}

/* ---- Key-facts callout (the anchor numbers) ---- */
.keyfacts {
  margin: 38px 0; padding: 26px 28px; border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124,92,255,.09), transparent 55%),
    var(--bg-soft);
  border: 1px solid var(--line);
}
.keyfacts__t { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); font-size: 1.02rem; margin-bottom: 16px; }
.keyfacts__t svg { width: 20px; height: 20px; color: var(--cyan-deep); }
.keyfacts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.keyfacts__item .n { font-size: 1.7rem; font-weight: 900; color: var(--violet-deep); line-height: 1; letter-spacing: -.02em; }
.keyfacts__item .n .u { font-size: .9rem; font-weight: 700; color: var(--text-2); }
.keyfacts__item .l { font-size: .84rem; color: var(--text-2); margin-top: 6px; }
@media (max-width: 620px){ .keyfacts__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } }

/* ---- Tip / note callout ---- */
.callout {
  display: flex; gap: 15px; margin: 30px 0; padding: 20px 22px;
  border-radius: var(--radius-sm); background: var(--violet-soft); border: 1px solid #e0d8ff;
}
.callout__ic { flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--violet); color: #fff; display: grid; place-items: center; }
.callout__ic svg { width: 21px; height: 21px; }
.callout b { color: var(--ink); display: block; margin-bottom: 3px; }
.callout p { color: #4a4368; font-size: 1rem; margin: 0; }

/* ---- Inline CTA strip inside prose ---- */
.inline-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin: 40px 0; padding: 24px 28px; border-radius: var(--radius);
  background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-brand);
}
.inline-cta b { font-size: 1.14rem; color: #fff; display: block; }
.inline-cta span { color: rgba(255,255,255,.9); font-size: .96rem; }
.inline-cta .btn { background: #fff; color: var(--violet-deep); box-shadow: none; flex: none; }
.inline-cta .btn:hover { transform: translateY(-2px); background: #fff; filter: brightness(1); }

/* ---- Post tags ---- */
.post-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.post-tags .tag {
  font-size: .86rem; font-weight: 600; color: var(--text-2);
  background: var(--bg-soft); border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px;
  transition: color .2s, border-color .2s, background .2s;
}
.post-tags .tag::before { content: "#"; color: var(--cyan-deep); margin-inline-end: 3px; font-weight: 800; }
.post-tags .tag:hover { color: var(--violet-deep); border-color: var(--violet); background: #fff; }

/* ---- Author box ---- */
.author-box {
  display: flex; gap: 18px; align-items: center; margin-top: 30px;
  padding: 22px 24px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line);
}
.author-box img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.author-box b { color: var(--ink); font-size: 1.06rem; }
.author-box .role { color: var(--cyan-deep); font-weight: 600; font-size: .9rem; margin-bottom: 5px; }
.author-box p { color: var(--text-2); font-size: .95rem; margin: 0; }

/* ---- Related posts ---- */
.related .post-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px){ .related .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .related .post-grid { grid-template-columns: 1fr; } }

/* ---- Listing card tag row ---- */
.post-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; margin-bottom: 12px; }
.post-card__tags span { font-size: .72rem; font-weight: 600; color: var(--violet-deep); background: var(--violet-soft); padding: 3px 9px; border-radius: 999px; }

/* ------------------------------ Legal pages (privacy / accessibility) --- */
.legal-updated {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px;
  font-size: .9rem; font-weight: 600; color: var(--text-2);
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 999px;
}
.legal-updated svg { width: 16px; height: 16px; color: var(--violet-deep); }
.legal-toc {
  margin: 0 0 38px; padding: 24px 28px; border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124,92,255,.08), transparent 55%),
    var(--bg-soft);
  border: 1px solid var(--line);
}
.legal-toc__t { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); font-size: 1.02rem; margin-bottom: 16px; }
.legal-toc__t svg { width: 20px; height: 20px; color: var(--cyan-deep); }
.legal-toc ol { counter-reset: toc; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; align-items: baseline; gap: 11px; padding: 6px 0; color: #3c4159; font-size: .99rem; line-height: 1.4; }
.legal-toc a::before {
  content: counter(toc); flex: none; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px;
  background: var(--violet-soft); color: var(--violet-deep); font-size: .78rem; font-weight: 800;
  display: inline-grid; place-items: center;
}
.legal-toc a:hover { color: var(--violet-deep); }
@media (max-width: 620px){ .legal-toc ol { grid-template-columns: 1fr; } }

/* ==========================================================================
   Virtual tour theater (shared) - live Matterport embed + project selector
   Used by the tour service pages (tour-apartments / hotels / retail / holy-sites)
   ========================================================================== */
.tour-stage{
  max-width: 1080px; margin-inline: auto;
  background: radial-gradient(120% 150% at 15% 0%, #2c2160 0%, var(--ink) 56%);
  border: 1px solid rgba(124,92,255,.28);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(124,92,255,.10);
}
.tour-stage__bar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding: 6px 8px 14px; color:#fff; }
.tour-live{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-weight:800; font-size:.8rem; letter-spacing:.03em;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  padding:7px 13px; border-radius:999px;
}
.tour-live i{ width:9px;height:9px;border-radius:50%; background:#ff5470; animation: tourpulse 1.8s infinite; }
@keyframes tourpulse{
  0%{box-shadow:0 0 0 0 rgba(255,84,112,.55)} 70%{box-shadow:0 0 0 9px rgba(255,84,112,0)} 100%{box-shadow:0 0 0 0 rgba(255,84,112,0)}
}
.tour-meta{ display:flex; flex-direction:column; line-height:1.28; min-width:0; }
.tour-meta b{ color:#fff; font-size:1.02rem; font-weight:800; }
.tour-meta span{ color:#aebfd2; font-size:.85rem; }
.tour-open{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  color:#cfe9ff; font-weight:700; font-size:.86rem;
  border:1px solid rgba(255,255,255,.16); padding:8px 13px; border-radius:999px;
  transition: color .2s, border-color .2s, background .2s;
}
.tour-open:hover{ color:#fff; border-color: rgba(124,92,255,.6); background: rgba(124,92,255,.14); }
.tour-open svg{ width:15px;height:15px; }
.tour-frame{ position:relative; aspect-ratio:16/9; border-radius:16px; overflow:hidden; background:#05070f; }
.tour-frame::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.tour-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.tour-hints{
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center;
  padding:14px 8px 4px; color:#9fb2c8; font-size:.82rem; font-weight:600;
}
.tour-hints span{ display:inline-flex; align-items:center; gap:7px; }
.tour-hints svg{ width:15px;height:15px; stroke:var(--cyan); }
.tour-pick{ text-align:center; max-width:1080px; margin: 34px auto 18px; }
.tour-pick span{ color:var(--violet-deep); font-weight:800; letter-spacing:.02em; font-size:.9rem; text-transform:uppercase; }
.tour-pick p{ color:var(--text-2); margin-top:6px; }
.tour-tabs{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap:18px;
  max-width:1080px; margin-inline:auto;
}
.tour-tab{
  position:relative; text-align:right; overflow:hidden; cursor:pointer;
  background:var(--white); border:1.5px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); font-family: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.tour-tab:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tour-tab.is-active{ border-color: var(--violet); box-shadow: var(--shadow-violet); }
.tour-tab__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background: var(--ink-2); }
.tour-tab__img img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s var(--ease); }
.tour-tab:hover .tour-tab__img img{ transform: scale(1.06); }
.tour-tab__ov{
  position:absolute; inset:0; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(11,16,36,0) 34%, rgba(11,16,36,.5) 100%);
}
.tour-tab__ov b{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.94); box-shadow: var(--shadow);
  transition: background .25s, transform .25s;
}
.tour-tab:hover .tour-tab__ov b{ transform: scale(1.08); }
.tour-tab.is-active .tour-tab__ov b{ background: var(--violet); }
.tour-tab__ov svg{ width:18px; height:18px; fill:var(--violet); margin-inline-start:3px; }
.tour-tab.is-active .tour-tab__ov svg{ fill:#fff; }
.tour-tab__now{
  position:absolute; top:10px; inset-inline-end:10px; z-index:2; display:none;
  align-items:center; gap:6px; font-size:.72rem; font-weight:800; letter-spacing:.03em;
  color:#fff; background: rgba(124,92,255,.92); padding:5px 10px; border-radius:999px;
}
.tour-tab__now i{ width:7px;height:7px;border-radius:50%; background:#fff; animation: tourpulse 1.8s infinite; }
.tour-tab.is-active .tour-tab__now{ display:inline-flex; }
.tour-tab__cap{ padding:12px 15px 15px; }
.tour-tab__cap b{ display:block; color:var(--ink); font-weight:800; font-size:1rem; }
.tour-tab__cap span{ display:block; color:var(--text-2); font-size:.85rem; margin-top:3px; }

/* ---- Tour hero: the live Matterport theater sits INSIDE the page hero ----
   Split layout - copy + CTAs on the right (RTL), the live tour on the left -
   so the interactive siur is visible the instant the page loads.
   Used on tour-apartments (and re-usable on the other tour pages). */
.page-hero--tour{ padding-block: clamp(34px, 5vw, 66px); }
.page-hero--tour .crumbs{ margin-bottom: 22px; }
/* the interactive tour reads best with room to breathe: on wide desktops let this
   hero stretch into the empty left gutter (up to 1440) while the copy stays anchored
   under the menu on the right, so both the theater AND the text column get wider. */
@media (min-width: 1200px){
  .page-hero--tour .container{ max-width: min(1440px, calc(100% - var(--menu-start) - var(--edge))); }
}
.hero-tour{
  display:grid;
  grid-template-columns: minmax(0, .66fr) minmax(0, 1.5fr);
  gap: clamp(24px, 3.2vw, 46px);
  align-items:center;
}
.hero-tour__copy{ max-width: 560px; }
.hero-tour__copy h1{ margin:0; color:var(--ink); }
.hero-tour__copy .hl{
  background: var(--grad-warm); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-tour__lead{ color:var(--text-2); font-size:1.12rem; line-height:1.65; margin-top:16px; }
.hero-tour__copy .hero__actions{ margin-top:26px; }
.hero-tour__copy .btn--on-dark svg{ width:17px; height:17px; }

.hero-tour__stage{ position:relative; min-width:0; }
/* soft violet glow behind the theater so it reads as a lit screen on the navy */
.hero-tour__stage::before{
  content:""; position:absolute; inset:-9% -6% -13%; z-index:0; pointer-events:none;
  background: radial-gradient(58% 60% at 50% 32%, rgba(124,92,255,.30), transparent 72%);
  filter: blur(30px);
}
.hero-tour__stage .tour-stage{ position:relative; z-index:1; max-width:none; margin:0; }
.hero-tour__stage .tour-frame{ aspect-ratio:16/10.6; }
.hero-tour__stage .tour-hints{ padding-bottom:2px; }
/* the live theater is the star of this hero - pull the whole hero up so the tour
   starts higher (less empty space above it), and keep the copy centered beside it */
@media (min-width: 981px){
  .hero-tour__stage{ margin-top: clamp(-56px, -3vw, -30px); }
}

@media (max-width: 980px){
  .hero-tour{ grid-template-columns:1fr; gap:22px; }
  .hero-tour__copy{ max-width:none; }
  .hero-tour__stage{ order:-1; }                 /* tour first - immediately on entry */
  .hero-tour__stage .tour-frame{ aspect-ratio:16/9; }
}
@media (max-width: 620px){
  .hero-tour__lead{ font-size:1.04rem; }
}

/* ==========================================================================
   About page - the person behind Makovki + trust / authority
   Self-healing photo slots (placeholder shows until a real file is dropped in),
   magazine photo collage, personal fact chips, and a personal quote band.
   ========================================================================== */

/* ---- Self-healing photo slot: placeholder layer + image on top ---------- */
.photo-slot {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--violet-soft) 0%, var(--cyan-soft) 100%);
  box-shadow: var(--shadow);
  min-height: 120px;
}
.photo-slot__ph {
  position: absolute; inset: 10px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; text-align: center; padding: 14px;
  border: 2px dashed rgba(124,92,255,.35); border-radius: 12px;
  color: var(--violet-deep);
}
.photo-slot__ph svg { width: 32px; height: 32px; opacity: .55; }
.photo-slot__ph b { font-size: .84rem; font-weight: 800; color: var(--text-2); line-height: 1.4; }
.photo-slot__ph small { font-size: .72rem; color: var(--text-3); font-weight: 600; }
.photo-slot > img {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.photo-slot:hover > img { transform: scale(1.05); }
.photo-slot__tag {
  position: absolute; z-index: 3; inset-inline-start: 12px; inset-block-end: 12px;
  background: rgba(8,17,33,.74); backdrop-filter: blur(6px);
  color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
}

/* ---- Magazine collage for the personal photos -------------------------- */
.person-collage {
  display: grid;
  grid-template-columns: 1.25fr .85fr .85fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  aspect-ratio: 15/11;
}
.person-collage .photo-slot:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.person-collage .photo-slot:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; }
.person-collage .photo-slot:nth-child(3) { grid-column: 2; grid-row: 2; }
.person-collage .photo-slot:nth-child(4) { grid-column: 3; grid-row: 2; }

/* ---- Personal fact chips (married, father, dog, city ...) --------------- */
.person-facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.person-fact {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 17px; border-radius: 15px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.person-fact svg { width: 22px; height: 22px; color: var(--violet-deep); flex: none; }
.person-fact b { display: block; color: var(--ink); font-size: .96rem; font-weight: 800; line-height: 1.25; }
.person-fact small { display: block; color: var(--text-3); font-size: .76rem; font-weight: 600; }

/* ---- Personal quote band (dark, with round portrait) ------------------- */
.pquote {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(24px, 4vw, 52px);
  background:
    radial-gradient(90% 130% at 92% -10%, rgba(124,92,255,.30), transparent 55%),
    linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 56px);
  color: #fff; box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.pquote::after {
  content: ""; position: absolute; inset-inline-start: -70px; bottom: -70px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(33,207,230,.22), transparent 65%); pointer-events: none;
}
.pquote__photo {
  width: clamp(140px, 20vw, 210px); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; object-position: center 18%;
  border: 4px solid rgba(255,255,255,.14); box-shadow: var(--shadow-lg);
}
.pquote__body { position: relative; z-index: 2; }
.pquote__mark {
  display: block; font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem; line-height: .5; color: var(--cyan); margin-bottom: 10px;
}
.pquote blockquote {
  font-size: clamp(1.14rem, 2.1vw, 1.55rem); font-weight: 600; line-height: 1.5; color: #f4f7fb;
}
.pquote cite {
  display: flex; align-items: center; gap: 12px; margin-top: 22px; font-style: normal; color: #a8bccf;
}
.pquote cite b { color: #fff; font-size: 1.02rem; display: block; }
.pquote cite span { font-size: .86rem; }
.pquote cite::before { content: ""; width: 30px; height: 2px; background: var(--cyan); flex: none; border-radius: 2px; }

/* ---- Values on light (about) - reuse card look, violet-warm icons ------- */
.value-card { text-align: right; }
.value-card .card__ic { background: var(--violet-soft); color: var(--violet-deep); }

@media (max-width: 860px) {
  .person-collage { aspect-ratio: 4/3; }
  .pquote { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .pquote__photo { margin-inline: auto; }
  .pquote cite { justify-content: center; }
}
@media (max-width: 560px) {
  .person-collage {
    grid-template-columns: 1fr 1fr; grid-template-rows: 1.3fr 1fr; aspect-ratio: 1/1; gap: 10px;
  }
  .person-collage .photo-slot:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
  .person-collage .photo-slot:nth-child(2) { grid-column: 1; grid-row: 2; }
  .person-collage .photo-slot:nth-child(3) { grid-column: 2; grid-row: 2; }
  .person-collage .photo-slot:nth-child(4) { display: none; }
}

/* ============================================================
   TOUR HERO - image preview variant (sibling tour pages)
   ============================================================ */
.tour-live--demo i{ background: var(--cyan); }
.tour-frame--img{ display:block; cursor:pointer; text-decoration:none; }
.tour-frame--img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition: transform .7s var(--ease); }
.tour-frame--img:hover img{ transform: scale(1.05); }
.tour-play{ position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; }
.tour-play::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 52%, rgba(8,17,33,.12), rgba(8,17,33,.5)); }
.tour-play b{
  position:relative; width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background: rgba(124,92,255,.92); box-shadow: 0 14px 36px rgba(124,92,255,.5); border:2px solid rgba(255,255,255,.6);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.tour-frame--img:hover .tour-play b{ transform: scale(1.09); background: var(--violet); }
.tour-play svg{ width:34px; height:34px; fill:#fff; margin-inline-start:4px; }
.tour-play__cap{
  position:absolute; inset-inline:0; bottom:0; z-index:2; padding:16px 18px 14px; color:#fff; font-weight:700; font-size:.9rem;
  background: linear-gradient(to top, rgba(5,7,15,.82), rgba(5,7,15,0));
}

/* ---- hub: services grid (main virtual-tour page) ---- */
.tour-hub{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.tour-hub__card{
  position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:20px;
  background:var(--bg); border:1px solid var(--line); box-shadow: var(--shadow);
  text-decoration:none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tour-hub__card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--violet); }
.tour-hub__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--ink-2); }
.tour-hub__media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease); }
.tour-hub__card:hover .tour-hub__media img{ transform: scale(1.06); }
.tour-hub__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(8,17,33,.5), rgba(8,17,33,0) 55%); }
.tour-hub__tag{
  position:absolute; top:12px; inset-inline-start:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; background: rgba(124,92,255,.94); color:#fff; font-size:.78rem; font-weight:700;
}
/* תווית "סיור אמיתי" עם שם הפרויקט, בתחתית תמונת הכרטיס */
.tour-hub__real{
  position:absolute; z-index:2; inset-block-end:12px; inset-inline-start:12px;
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px;
  background:rgba(8,17,33,.62); backdrop-filter:blur(4px);
  color:#fff; font-size:.78rem; font-weight:700; letter-spacing:.01em;
}
.tour-hub__real i{ width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:none; box-shadow:0 0 0 0 rgba(33,207,230,.55); animation:tourDot 2s ease-out infinite; }
@keyframes tourDot{ 70%{ box-shadow:0 0 0 7px rgba(33,207,230,0); } 100%{ box-shadow:0 0 0 0 rgba(33,207,230,0); } }
@media (prefers-reduced-motion:reduce){ .tour-hub__real i{ animation:none; } }
.tour-hub__body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.tour-hub__body h3{ margin:0; color:var(--ink); font-size:1.28rem; font-weight:800; }
.tour-hub__body p{ margin:0; color:var(--text-2); line-height:1.6; flex:1; }
.tour-hub__go{ display:inline-flex; align-items:center; gap:7px; color:var(--violet-deep); font-weight:800; margin-top:4px; }
.tour-hub__go svg{ width:17px; height:17px; transition: transform .3s var(--ease); }
.tour-hub__card:hover .tour-hub__go svg{ transform: translateX(-5px); }
@media (max-width:760px){ .tour-hub{ grid-template-columns:1fr; } }

/* ==========================================================================
   Visualizations hero - split copy + live showcase of real Makovki renders.
   The stage crossfades through 5 authentic project renders (auto + thumbs),
   turning the hero itself into proof of the work.
   ========================================================================== */
.page-hero--viz { padding-block: clamp(30px, 5vw, 60px); overflow: hidden; }
.page-hero--viz .crumbs { margin-bottom: 20px; }
.viz-hero {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: clamp(26px, 3.4vw, 52px);
  align-items: center;
}
.viz-hero__copy { max-width: 560px; }
.viz-hero__copy .eyebrow { margin-bottom: 14px; }
.viz-hero__copy h1 { margin: 0; color: var(--ink); }
.viz-hero__copy h1 .hl {
  background: var(--grad-warm); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.viz-hero__copy p { color: var(--text-2); font-size: 1.15rem; margin-top: 16px; max-width: 520px; }
.viz-hero__tags {
  display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px;
}
.viz-hero__tags li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  color: var(--text-2); font-size: .86rem; font-weight: 700;
  box-shadow: 0 4px 14px -8px rgba(20,16,60,.14);
}
.viz-hero__tags li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad-brand);
}

/* ---- Showcase stage ---- */
.viz-hero__stage { position: relative; min-width: 0; }
.viz-hero__stage::before {
  content: ""; position: absolute; inset: -8% -6% 4%; z-index: 0; pointer-events: none;
  background: radial-gradient(56% 58% at 50% 34%, rgba(124,92,255,.30), transparent 72%);
  filter: blur(34px);
}
.viz-show { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
.viz-show__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg);
  overflow: hidden; background: #05070f;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(124,92,255,.14);
}
.viz-show__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.05); transition: opacity .9s var(--ease);
}
.viz-show__img.is-active { opacity: 1; animation: vizKen 6.5s var(--ease) forwards; }
@keyframes vizKen { from { transform: scale(1.05); } to { transform: scale(1); } }

.viz-show__badge {
  position: absolute; z-index: 3; top: 14px; inset-inline-start: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(8,17,33,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .005em;
}
.viz-show__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(33,207,230,.6); animation: vizDot 2.4s ease-in-out infinite;
}
@keyframes vizDot {
  0%,100% { box-shadow: 0 0 0 0 rgba(33,207,230,.55); }
  55%     { box-shadow: 0 0 0 7px rgba(33,207,230,0); }
}
.viz-show__cap {
  position: absolute; z-index: 3; inset-inline: 0; bottom: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 34px 18px 15px;
  background: linear-gradient(to top, rgba(3,6,17,.86) 0%, rgba(3,6,17,.5) 46%, transparent 100%);
  color: #fff; font-size: .96rem; font-weight: 600;
}
.viz-show__cap svg { width: 18px; height: 18px; color: var(--cyan); flex: none; }
.viz-show__cap span { transition: opacity .5s var(--ease); }

/* ---- Thumbnail rail ---- */
.viz-show__thumbs { display: flex; gap: 10px; }
.viz-thumb {
  flex: 1 1 0; min-width: 0; aspect-ratio: 16 / 10; position: relative;
  border-radius: 11px; overflow: hidden; background: var(--ink-2);
  border: 2px solid transparent; opacity: .55;
  transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.viz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viz-thumb:hover { opacity: .85; transform: translateY(-2px); }
.viz-thumb.is-active { opacity: 1; border-color: var(--violet); box-shadow: var(--shadow-violet); }

@media (max-width: 980px) {
  .viz-hero { grid-template-columns: 1fr; gap: 26px; }
  .viz-hero__copy { max-width: none; }
  .viz-hero__copy p { max-width: none; }
}
@media (max-width: 520px) {
  .viz-show__thumbs { gap: 7px; }
  .viz-show__cap { font-size: .88rem; padding: 30px 14px 12px; }
  .viz-show__badge { font-size: .72rem; top: 10px; inset-inline-start: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .viz-show__img.is-active { animation: none; transform: scale(1); }
  .viz-show__dot { animation: none; }
}

/* ===========================================================================
   ROUND 2 FIXES (client feedback) - USP strip, speed comparison
   =========================================================================== */

/* --- USP strip: 6 key selling points, directly under the hero --- */
.usp-strip { padding-block: clamp(26px, 3.4vw, 40px); background: var(--violet-soft, #efeaff); border-bottom: 1px solid #e7e0fb; }
.usp-grid {
  list-style: none; margin-inline: auto; margin-block: 0; padding: 0; max-width: 1180px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.usp {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #fff; border: 1px solid #ece5fb; border-radius: 14px;
  padding: 13px 15px; box-shadow: 0 2px 10px rgba(46,26,110,.05);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.usp:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d8ccf7; }
.usp__ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--grad-brand); color: #fff;
}
.usp__ic svg { width: 21px; height: 21px; }
.usp__t { font-weight: 700; font-size: .95rem; line-height: 1.3; color: var(--ink); }
/* rotate the accent colours so the strip reads as multi-colour (cyan -> violet -> amber) */
.usp:nth-child(3n+2) .usp__ic { background: var(--grad-warm); }
.usp:nth-child(3n+3) .usp__ic { background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%); }
@media (max-width: 1100px) { .usp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .usp { padding: 11px 12px; justify-content: flex-start; } .usp__t { font-size: .87rem; } .usp__ic { width: 36px; height: 36px; } }
@media (max-width: 400px)  { .usp-grid { grid-template-columns: 1fr; } }

/* --- Speed comparison: "מבחן ה-100 מ"ר" ------------------------------------
   Two race lanes on a dark blueprint field: the traditional lane crawls forward
   in discrete steps (Stop & Go), the Makovki lane runs through in one glowing
   sweep. Both animations key off the shared .reveal -> .in mechanism. */
.speed-test { position: relative; overflow: hidden; }
/* faint graph paper: fine 26px squares over heavier 130px majors, faded at the edges */
.speed-test::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(126,190,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,190,255,.055) 1px, transparent 1px),
    linear-gradient(rgba(126,190,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,190,255,.09) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px, 130px 130px, 130px 130px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 45%, #000 28%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 45%, #000 28%, transparent 100%);
}
.speed-test .container { position: relative; z-index: 1; }

.lanes { max-width: 1000px; margin-inline: auto; display: grid; gap: clamp(26px, 3.6vw, 42px); }
.lane__title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: clamp(.94rem, 1.5vw, 1.05rem); }
.lane__title svg { flex: none; width: 20px; height: 20px; }
.lane--old .lane__title { color: #a7b0cd; }
.lane--new .lane__title { color: #eef1ff; }
.lane--new .lane__title svg { color: var(--cyan); }

.lane__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; margin-top: 13px; }
.lane__badge {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px;
  min-width: 116px; padding: 9px 15px; border-radius: 999px; text-align: center;
}
.lane__badge b { font-size: 1.3rem; font-weight: 900; line-height: 1; direction: ltr; }
.lane__badge i { font-style: normal; font-size: .74rem; font-weight: 700; opacity: .82; }
.lane--old .lane__badge { background: #222a48; border: 1px solid #3a4269; color: #c2cae4; }
.lane--new .lane__badge {
  background: linear-gradient(150deg, #102341 0%, #0c1a36 100%);
  border: 1px solid rgba(33,207,230,.6); color: #eafcff;
  box-shadow: 0 0 22px -4px rgba(33,207,230,.55), 0 12px 34px -14px rgba(33,207,230,.7), inset 0 0 24px rgba(33,207,230,.15);
}
.lane--new .lane__badge b { color: var(--cyan); }

/* the track tucks under the badge so the fill appears to leave it. The track is
   deliberately NOT overflow:hidden - the fast lane's glow has to spill past it;
   the fill clips its own sweep instead. */
.lane__track {
  position: relative; height: 20px; border-radius: 999px;
  margin-inline-end: -18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.lane__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 999px; overflow: hidden; }
/* traditional: solid grey broken by the gaps of every tripod stop */
.lane--old .lane__fill { background: repeating-linear-gradient(90deg, #737d9f 0 30px, transparent 30px 38px); }
/* Makovki: one continuous violet-to-cyan run, cyan hottest at the start */
.lane--new .lane__fill {
  background: linear-gradient(90deg, var(--violet) 0%, #34b6ec 55%, var(--cyan) 100%);
  box-shadow: 0 0 16px rgba(33,207,230,.75), 0 0 40px rgba(33,207,230,.35), 0 0 60px rgba(124,92,255,.4);
}
.lane--new .lane__fill::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.lane__note { margin-top: 11px; font-size: .95rem; line-height: 1.5; color: #9ba5c4; }
.lane--new .lane__note { color: #c3cbe8; }

.lanes.in .lane--old .lane__fill { animation: laneFill 2.7s steps(13, end) .3s forwards; }
.lanes.in .lane--new .lane__fill { animation: laneFill .8s cubic-bezier(.22,1,.36,1) .3s forwards; }
.lanes.in .lane--new .lane__fill::after { animation: laneSweep 2.6s 1.2s linear infinite; }
@keyframes laneFill { from { width: 0; } to { width: 100%; } }
@keyframes laneSweep { from { transform: translateX(-130%); } to { transform: translateX(430%); } }

.speed-benefits { list-style: none; margin: clamp(30px,4vw,46px) auto 0; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.6vw,18px); }
.speed-benefit {
  display: grid; justify-items: center; gap: 11px; text-align: center; padding: 22px 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(33,207,230,.075) 0%, rgba(124,92,255,.05) 100%);
  border: 1px solid rgba(33,207,230,.26);
  box-shadow: inset 0 0 26px rgba(33,207,230,.05), 0 14px 34px -22px rgba(33,207,230,.55);
}
.speed-benefit__ic {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(33,207,230,.12); border: 1px solid rgba(33,207,230,.34);
}
.speed-benefit__ic svg { width: 22px; height: 22px; color: var(--cyan); }
.speed-benefit b { font-size: .98rem; font-weight: 800; line-height: 1.35; color: #edf1ff; }

@media (max-width: 720px) {
  .lane__badge { min-width: 96px; padding: 8px 12px; }
  .lane__badge b { font-size: 1.12rem; }
  .lane__track { height: 17px; }
  .speed-benefits { grid-template-columns: 1fr; }
  .speed-benefit { grid-template-columns: auto minmax(0,1fr); justify-items: start; text-align: start; gap: 13px; padding: 15px 17px; }
  .speed-benefit__ic { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .lanes.in .lane__fill { animation: none; width: 100%; }
  .lanes.in .lane--new .lane__fill::after { animation: none; opacity: 0; }
}

/* note under the format chips in the dark technology section */
.formats-note { margin-top: 14px; font-size: .92rem; line-height: 1.55; color: #c7cfe6; max-width: 520px; }


/* ===========================================================================
   ROUND 3 FIXES (client feedback 2026-07) - emphasized/animated WHY-US,
   gradient headline helper, viz format cards as links
   =========================================================================== */

/* gradient-emphasized headline (client: "אולי מודגש, אולי animated יותר") */
.hl-grad{
  background: linear-gradient(100deg, var(--cyan-deep, #0ea5c4) 0%, var(--violet, #7c5cff) 55%, #ef6a2c 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* staggered slide-in for the checks list + a soft pulse on the check icons
   (keys off the shared .reveal -> .in mechanism from makovki.js) */
.why-us-anim .reveal:not(.in) .checks li{ opacity: 0; transform: translateX(18px); }
.why-us-anim .reveal.in .checks li{ opacity: 0; transform: translateX(18px); animation: whyIn .55s var(--ease, ease) forwards; }
.why-us-anim .reveal.in .checks li:nth-child(1){ animation-delay: .05s; }
.why-us-anim .reveal.in .checks li:nth-child(2){ animation-delay: .2s; }
.why-us-anim .reveal.in .checks li:nth-child(3){ animation-delay: .35s; }
.why-us-anim .reveal.in .checks li:nth-child(4){ animation-delay: .5s; }
@keyframes whyIn{ to{ opacity: 1; transform: none; } }
.why-us-anim .reveal.in .checks .ck{ animation: ckPulse 2.6s ease-in-out infinite; }
.why-us-anim .reveal.in .checks li:nth-child(2) .ck{ animation-delay: .4s; }
.why-us-anim .reveal.in .checks li:nth-child(3) .ck{ animation-delay: .8s; }
.why-us-anim .reveal.in .checks li:nth-child(4) .ck{ animation-delay: 1.2s; }
@keyframes ckPulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce){
  .why-us-anim .checks li{ opacity: 1 !important; transform: none !important; animation: none !important; }
  .why-us-anim .checks .ck{ animation: none !important; }
}

/* viz format cards are now links to example galleries - keep card look, add affordance */
a.card{ text-decoration: none; }
a.card .card__go{
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  color: var(--violet, #7c5cff); font-weight: 700; font-size: .92rem;
}
a.card .card__go svg{ width: 15px; height: 15px; transition: transform .25s var(--ease, ease); }
a.card:hover .card__go svg{ transform: translateX(-4px); }

/* ==========================================================================
   ROUND 4 FIXES (client notes, 08/2026)
   ========================================================================== */

/* ---- Integration: raw point cloud -> your workspace ---- */
.integ-sec { background: linear-gradient(180deg, #fbfaff 0%, #ffffff 60%); }
.integ {
  display: grid; align-items: center; gap: 26px;
  grid-template-columns: minmax(0, .92fr) auto minmax(0, 1.05fr);
  margin-top: 8px;
}
.integ__src { position: relative; margin: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 18px 44px rgba(16, 20, 45, .14); }
.integ__src img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.integ__src figcaption {
  position: absolute; inset-inline: 14px; bottom: 14px; padding: 11px 14px;
  border-radius: 13px; background: rgba(10, 14, 32, .74); backdrop-filter: blur(7px);
  color: #fff; display: grid; gap: 2px;
}
.integ__src figcaption b { font-size: .98rem; }
.integ__src figcaption span { font-size: .82rem; color: #c3cbe4; }

.integ__hub {
  position: relative; display: grid; place-items: center; gap: 2px; text-align: center;
  padding: 24px 26px; border-radius: 18px; flex: none;
  background: linear-gradient(150deg, #131a3b, #221a52);
  color: #fff; box-shadow: 0 16px 40px rgba(40, 24, 110, .32);
}
.integ__hub b { font-size: 1.35rem; font-weight: 900; letter-spacing: 0; position: relative; z-index: 2; }
.integ__hub small { font-size: .8rem; color: #b9b2e8; font-weight: 600; position: relative; z-index: 2; }
.integ__hub-glow {
  position: absolute; inset: -5px; border-radius: 22px; z-index: 0; pointer-events: none;
  background: var(--grad-warm, linear-gradient(135deg, #7c5cff, #ff8a4c)); filter: blur(12px); opacity: .5;
}
/* connector rails, RTL-safe (drawn with logical insets) */
.integ__hub::before, .integ__hub::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 2px;
  background: linear-gradient(90deg, var(--cyan, #21cfe6), var(--violet, #7c5cff));
}
.integ__hub::before { inset-inline-end: 100%; }
.integ__hub::after  { inset-inline-start: 100%; }

.integ__out { display: grid; gap: 12px; }
.integ__card {
  position: relative; padding: 16px 18px; border-radius: 15px;
  background: #fff; border: 1px solid rgba(23, 27, 60, .09);
  box-shadow: 0 8px 22px rgba(20, 24, 55, .06);
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}
.integ__card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20, 24, 55, .12); }
.integ__card h3 { font-size: 1.08rem; margin-bottom: 4px; }
.integ__card p { font-size: .93rem; color: var(--text-2, #55597a); margin: 0; }
.integ__badge {
  position: absolute; top: 14px; inset-inline-end: 16px;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  color: var(--cyan-deep, #0f8fa5); background: var(--cyan-soft, #e6fbff);
  padding: 4px 9px; border-radius: 999px;
}
.integ__card:nth-child(2) .integ__badge { color: var(--violet-deep, #5b3fd6); background: var(--violet-soft, #efeaff); }
.integ__card:nth-child(3) .integ__badge { color: var(--amber-deep, #ef6a2c); background: var(--amber-soft, #fff2ea); }
.integ__note {
  max-width: 880px; margin: 28px auto 0; text-align: center;
  font-size: 1rem; line-height: 1.7; color: var(--text-2, #55597a);
}
.integ__note b { color: var(--ink, #101433); }

@media (max-width: 900px) {
  .integ { grid-template-columns: 1fr; gap: 18px; }
  .integ__src img { min-height: 200px; }
  .integ__hub { justify-self: center; padding: 18px 30px; }
  .integ__hub::before, .integ__hub::after { inset-inline: auto; left: 50%; transform: translateX(-50%); width: 2px; height: 18px; }
  .integ__hub::before { top: auto; bottom: 100%; }
  .integ__hub::after  { top: 100%; }
}

/* ---- Fit-to-Place: problem vs solution ---- */
.fitplace__grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fitplace__col {
  padding: 22px; border-radius: 20px; background: #fff;
  border: 1px solid rgba(23, 27, 60, .09); box-shadow: 0 10px 30px rgba(20, 24, 55, .07);
}
.fitplace__col--problem { border-color: rgba(239, 106, 44, .28); background: linear-gradient(180deg, #fff8f4 0%, #fff 55%); }
.fitplace__col--solution { border-color: rgba(33, 207, 230, .3); background: linear-gradient(180deg, #f2fdff 0%, #fff 55%); }
.fitplace__tag {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  color: var(--amber-deep, #ef6a2c); background: var(--amber-soft, #fff2ea);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.fitplace__tag--ok { color: var(--cyan-deep, #0f8fa5); background: var(--cyan-soft, #e6fbff); }
.fitplace__fig { margin: 0 0 16px; border-radius: 14px; overflow: hidden; background: #0b1024; }
.fitplace__fig img { display: block; width: 100%; height: 230px; object-fit: cover; }
.fitplace__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fitplace__list li {
  position: relative; padding-inline-start: 22px;
  font-size: .96rem; line-height: 1.6; color: var(--text-2, #55597a);
}
.fitplace__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--amber, #ff8a4c);
}
.fitplace__col--solution .fitplace__list li::before { background: var(--cyan, #21cfe6); }
.fitplace__list li:last-child { font-weight: 700; color: var(--ink, #101433); }

@media (max-width: 820px) {
  .fitplace__grid { grid-template-columns: 1fr; }
  .fitplace__fig img { height: 190px; }
}

/* ---- Examples page: section jump-nav ---- */
.ex-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* הערת ט.ל.ח בעמודי המדיניות */
.legal-tlh {
  margin-top: 26px; padding: 14px 18px; border-radius: 12px;
  background: var(--bg-soft, #f6f4fd); border: 1px solid var(--line);
  font-size: .92rem; color: var(--text-2); line-height: 1.6;
}
.legal-tlh strong { color: var(--ink); letter-spacing: .04em; }

/* --- Examples: קיר הסיורים (Matterport + NavVis) --- */
.tourwall { margin-top: clamp(34px, 4.5vw, 54px); }
.tourwall__title {
  font-size: clamp(1.25rem, 2.1vw, 1.6rem); color: var(--ink); margin: 0 0 6px;
  padding-inline-start: 14px; border-inline-start: 4px solid var(--cyan); line-height: 1.3;
}
.tourwall__title--nv { border-inline-start-color: var(--violet); margin-top: clamp(40px, 5vw, 64px); }
.tourwall__sub { color: var(--text-2); font-size: .98rem; margin: 0 0 22px; max-width: 760px; }
.tourwall__sub b { color: var(--ink); background: var(--cyan-soft); padding: 1px 7px; border-radius: 6px; }
.tourwall__group {
  display: flex; align-items: center; gap: 12px;
  font-size: 1.02rem; font-weight: 800; color: var(--violet-deep); margin: 26px 0 12px;
}
.tourwall__group::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* flex ולא grid: שורה אחרונה חלקית נשארת ממורכזת ולא נצמדת לצד */
.tourwall__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.tourwall__grid > * { flex: 0 1 calc((100% - 36px) / 3); }   /* 36 ולא 32: מרווח ביטחון מעיגול תת-פיקסלי שדוחף כרטיס לשורה הבאה */
.tour-card {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--ink-2); text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tour-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tour-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tour-card:hover img { transform: scale(1.06); }
.tour-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,17,33,.72), rgba(8,17,33,.06) 55%);
}
.tour-card__play {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--violet-deep); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.tour-card__play svg { width: 21px; height: 21px; }
.tour-card:hover .tour-card__play { transform: scale(1.12); background: var(--cyan); color: #fff; }
.tour-card__cap {
  position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 30px 15px 12px;
  color: #fff; font-weight: 700; font-size: .95rem; text-align: start; line-height: 1.35;
}
.tour-card__cap i { display: block; font-style: normal; font-weight: 500; font-size: .82rem; color: #cfe0ee; margin-top: 3px; }
.tour-card iframe { position: absolute; inset: 0; width: 100%; height: 112%; top: -12%; border: 0; z-index: 3; }
.tour-card.is-live::after, .tour-card.is-live .tour-card__play, .tour-card.is-live .tour-card__cap { display: none; }
.tour-card.is-live { cursor: default; transform: none; }
@media (max-width: 900px) { .tourwall__grid { gap: 12px; } .tourwall__grid > * { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 560px) { .tourwall__grid > * { flex-basis: 100%; } }

/* ההירו של examples בהיר -> הצ'יפים לבנים עם טקסט כהה (ניגודיות מלאה) */
.ex-nav__pill {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  font-size: .95rem; font-weight: 800; color: var(--ink); text-decoration: none;
  background: #fff; border: 1px solid #ded3f5; box-shadow: 0 2px 10px rgba(46, 26, 110, .07);
  transition: background .25s var(--ease, ease), border-color .25s var(--ease, ease),
              transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease), color .25s var(--ease, ease);
}
.ex-nav__pill:hover, .ex-nav__pill:focus-visible {
  background: var(--grad-brand); border-color: transparent; color: #fff;
  transform: translateY(-2px); box-shadow: 0 10px 22px rgba(33, 207, 230, .28);
}

/* ---- Reviews: full wall page + "see all" slider card ---- */
.review-stars__off { color: #d9dbe4; }

.review-card--all {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
  background: linear-gradient(150deg, #f4f0ff, #eafcff);
  border-color: rgba(124, 92, 255, .28);
}
.review-card--all b { font-size: 1.28rem; font-weight: 900; color: var(--ink, #101433); }
.review-card--all p { font-size: .95rem; line-height: 1.6; color: var(--text-2, #55597a); margin: 0; }
.review-card--all .btn { align-self: flex-start; margin-top: 6px; }

.rev-hero__badge {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 26px;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(180, 200, 255, .28);
}
.rev-hero__badge .google-badge__g { width: 24px; height: 24px; flex: none; }
.rev-hero__score { font-size: 1.3rem; font-weight: 900; color: #fff; }
.rev-hero__stars { color: #fbbc05; letter-spacing: 1px; }
.rev-hero__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #8fe6ff; font-weight: 700; font-size: .92rem; text-decoration: none;
}
.rev-hero__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease, ease); }
.rev-hero__link:hover svg { transform: translateX(-3px); }

.rev-wall-sec { background: linear-gradient(180deg, #fbfaff 0%, #fff 40%); }
.rev-wall { columns: 3 300px; column-gap: 20px; }
.rev-wall .review-card {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  width: 100%; margin: 0 0 20px; display: block;
}
@media (max-width: 700px) { .rev-wall { columns: 1; } }

/* ==========================================================================
   Scanner toolkit strip - LIGHT sections (the .fleet block above is dark-only:
   it floats transparent cutouts on the ink background with coloured halos, which
   collapses on white). Here each device sits on its own tinted plate instead,
   and mix-blend-mode:multiply drops the white studio background of the product
   shots (rtc360 / drone) into the plate so they read as cutouts too.
   ========================================================================== */
.kit { margin-top: clamp(46px, 5.4vw, 72px); }
.kit__head { max-width: 800px; }
.kit__head h3 { font-size: clamp(1.42rem, 2.3vw, 1.94rem); margin: 8px 0 12px; }
.kit__head p { margin: 0; color: var(--text-2); font-size: 1.02rem; line-height: 1.75; }

.kit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(24px, 3vw, 32px); }
.kit-card {
  margin: 0; padding: 16px 14px 18px; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.kit-card:hover { transform: translateY(-6px); border-color: rgba(124, 92, 255, .32); box-shadow: var(--shadow-lg); }
.kit-card__plate {
  position: relative; display: grid; place-items: center; height: 138px; overflow: hidden;
  border-radius: var(--radius-sm); background: linear-gradient(158deg, #f5f2ff 0%, #eafaff 100%);
}
.kit-card:nth-child(2) .kit-card__plate { background: linear-gradient(158deg, #eafaff 0%, #f1f4ff 100%); }
.kit-card:nth-child(3) .kit-card__plate { background: linear-gradient(158deg, #f6f3ff 0%, #fff2ea 100%); }
.kit-card:nth-child(4) .kit-card__plate { background: linear-gradient(158deg, #eefaf1 0%, #eafaff 100%); }
.kit-card__plate img {
  width: auto; max-width: 84%; height: 112px; object-fit: contain;
  mix-blend-mode: multiply;                    /* kills the white studio bg of the product shots */
  transition: transform .35s var(--ease);
}
.kit-card:hover .kit-card__plate img { transform: scale(1.05); }
/* the drone shot is a wide 1:1 with a lot of empty sky - let it fill more of the plate
   so it reads at the same visual weight as the three tall scanners next to it */
.kit-card:nth-child(4) .kit-card__plate img { max-width: 100%; height: 128px; }
.kit-card__use {
  position: absolute; inset-inline-start: 10px; top: 10px;
  padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .86);
  font-size: .72rem; font-weight: 800; color: var(--violet-deep); letter-spacing: .01em;
}
.kit-card figcaption { margin-top: 14px; }
.kit-card figcaption b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.kit-card figcaption span { display: block; margin-top: 5px; font-size: .84rem; font-weight: 600; line-height: 1.5; color: var(--text-2); }

/* the three things the toolkit buys the client: their template, the tour, the speed */
.kit-perks { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 0; padding: 0; }
.kit-perk {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px 17px;
  border-radius: var(--radius); border: 1px solid rgba(124, 92, 255, .18);
  background: linear-gradient(150deg, #f5f1ff 0%, #eafcff 100%);
}
.kit-perk__ic {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; background: #fff; color: var(--violet-deep); box-shadow: var(--shadow);
}
.kit-perk__ic svg { width: 21px; height: 21px; }
.kit-perk b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.kit-perk p { margin: 0; font-size: .92rem; line-height: 1.62; color: var(--text-2); }
.kit-perk a {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  font-size: .89rem; font-weight: 700; color: var(--violet-deep); text-decoration: none;
}
.kit-perk a svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.kit-perk a:hover svg { transform: translateX(-3px); }

@media (max-width: 1000px) {
  .kit__grid { grid-template-columns: repeat(2, 1fr); }
  .kit-perks { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .kit__grid { gap: 12px; }
  .kit-card { padding: 12px 10px 14px; }
  /* narrow cards: the badge would sit on top of the device, so reserve a strip for it */
  .kit-card__plate { height: 118px; padding-top: 22px; }
  .kit-card__use { top: 7px; inset-inline-start: 7px; padding: 3px 8px; font-size: .66rem; }
  .kit-card__plate img { height: 82px; }
  .kit-card:nth-child(4) .kit-card__plate img { height: 92px; }
  .kit-card figcaption b { font-size: .94rem; }
  .kit-card figcaption span { font-size: .78rem; }
  .kit-perk { padding: 15px 14px; gap: 12px; }
  .kit-perk__ic { width: 38px; height: 38px; }
}

/* ===========================================================================
   Back to top - mobile only. The desktop header is sticky, so the button
   would be redundant there; on a phone the pages are long and the nav is
   folded into the burger.
   Sits bottom-right: the accessibility FAB owns bottom-left.
   =========================================================================== */
.to-top {
  position: fixed; right: 16px; bottom: 18px; z-index: 94;
  display: none; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 6px 20px -6px rgba(11,16,36,.34);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.is-in { opacity: 1; visibility: visible; transform: none; }
.to-top:active { transform: scale(.93); }

@media (max-width: 860px) { .to-top { display: grid; } }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .01s linear; }
  .to-top:active { transform: none; }
}

/* ===========================================================================
   Thank-you page hero (thank-you.html)
   Centred and calm: the visitor already converted, so the job here is
   reassurance plus one fast lane to reach us.
   =========================================================================== */
.ty-hero {
  position: relative; overflow: hidden;
  padding-block: clamp(52px, 7vw, 92px);
  background:
    radial-gradient(90% 80% at 15% 0%, rgba(33,207,230,.10) 0%, transparent 48%),
    linear-gradient(155deg, #ffffff 0%, #f5f0fe 50%, #efe7fb 80%, #fdeee6 100%);
  border-bottom: 1px solid #ece6f4;
}
.ty-hero .hero__grid { opacity: .5; }
.ty-hero .container { position: relative; z-index: 2; }
.ty-hero__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.ty-hero h1 { color: var(--ink); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.15; }
.ty-hero__lead {
  color: var(--text-2); font-size: 1.12rem; line-height: 1.65;
  margin-top: 14px; margin-inline: auto; max-width: 58ch;
}
.ty-hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px;
}
.ty-hero__note { color: var(--text-2); font-size: .9rem; margin-top: 20px; opacity: .85; }

/* the check mark: draws itself once, then sits still */
.ty-mark {
  width: 74px; height: 74px; margin: 0 auto 22px; display: grid; place-items: center;
  border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--cyan-deep), var(--violet));
  box-shadow: 0 14px 34px -12px rgba(91,63,214,.55);
}
.ty-mark svg { width: 36px; height: 36px; }
.ty-mark svg path {
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: tymark .5s .15s cubic-bezier(.6,0,.35,1) forwards;
}
@keyframes tymark { to { stroke-dashoffset: 0; } }

@media (max-width: 560px) {
  .ty-mark { width: 64px; height: 64px; margin-bottom: 18px; }
  .ty-mark svg { width: 31px; height: 31px; }
  .ty-hero__actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ty-mark svg path { animation: none; stroke-dashoffset: 0; }
}

/* ===========================================================================
   Human sitemap (sitemap.html) - a plain, scannable index. Deliberately
   typographic rather than card-based: the point is finding a link fast.
   =========================================================================== */
.smap {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px;
  align-items: start;
}
.smap__col--wide { grid-column: 1 / -1; }
.smap__h {
  font-size: 1.06rem; font-weight: 800; color: var(--ink);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 2px solid var(--line); position: relative;
}
.smap__h::after {
  content: ""; position: absolute; bottom: -2px; inset-inline-start: 0;
  width: 46px; height: 2px; background: var(--cyan-deep);
}
.smap ul { display: grid; gap: 2px; }
.smap__two { grid-template-columns: repeat(2, 1fr); gap: 2px 26px; }
.smap li { list-style: none; }
.smap a {
  display: block; padding: 7px 0; color: var(--text-2);
  font-size: .97rem; line-height: 1.45;
  border-bottom: 1px solid transparent; transition: color .2s, padding-inline-start .2s;
}
.smap a:hover { color: var(--violet-deep); padding-inline-start: 5px; }
.smap a b { font-weight: 700; color: var(--ink); }
.smap a:hover b { color: var(--violet-deep); }

@media (max-width: 900px) {
  .smap { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 620px) {
  .smap { grid-template-columns: 1fr; gap: 22px; }
  .smap__two { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Cookie consent bar - full width, pinned to the bottom, shown once.
   While it is open the accessibility FAB and the back-to-top button are
   lifted above it so nothing ends up buried under the bar.
   =========================================================================== */
.ck {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 120;
  background: rgba(11, 16, 36, .97);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 -14px 40px -18px rgba(0,0,0,.75);
  transform: translateY(102%);
  transition: transform .42s var(--ease);
}
.ck.is-in { transform: none; }
.ck__inner {
  position: relative;
  width: min(1180px, 100% - 32px); margin-inline: auto;
  display: flex; align-items: center; gap: 18px;
  padding: 16px 0 17px;
}

.ck__ic {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px; color: var(--amber);
  background: rgba(255,138,76,.12); border: 1px solid rgba(255,138,76,.3);
}
.ck__ic svg { width: 23px; height: 23px; }

.ck__copy { flex: 1; min-width: 0; padding-inline-end: 26px; }
.ck__title { display: block; color: #fff; font-size: .98rem; font-weight: 700; margin-bottom: 3px; }
.ck__text  { color: #b6cade; font-size: .87rem; line-height: 1.6; margin: 0; }
.ck__text a { color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ck__text a:hover { color: #8fe6f4; }

.ck__actions { flex: none; display: flex; align-items: center; gap: 10px; }
.ck__btn {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 10px 20px; border-radius: 11px;
  font-family: inherit; font-size: .89rem; font-weight: 700;
  transition: transform .18s var(--ease), background .2s, border-color .2s, box-shadow .2s;
}
.ck__btn svg { width: 15px; height: 15px; }
.ck__btn--primary {
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--cyan-deep), var(--violet));
  box-shadow: 0 8px 22px -10px rgba(124,92,255,.8);
}
.ck__btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px -10px rgba(124,92,255,.9); }
.ck__btn:active { transform: scale(.97); }

.ck__x {
  position: absolute; top: -4px; inset-inline-end: -6px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 9px; color: #8ba1ba; background: rgba(255,255,255,.05);
  transition: color .2s, background .2s;
}
.ck__x svg { width: 15px; height: 15px; }
.ck__x:hover { color: #fff; background: rgba(255,255,255,.13); }

/* keep the floating controls clear of the bar while it is open */
body.ck-open .a11y   { bottom: calc(22px + var(--ck-h, 96px)); }
body.ck-open .to-top { bottom: calc(18px + var(--ck-h, 96px)); }
.a11y, .to-top { transition: bottom .42s var(--ease); }

@media (max-width: 900px) {
  .ck__inner { flex-wrap: wrap; gap: 12px 14px; padding: 15px 0 16px; }
  .ck__copy { flex: 1 1 100%; order: 2; padding-inline-end: 0; }
  .ck__ic { order: 1; width: 38px; height: 38px; border-radius: 11px; }
  .ck__ic svg { width: 20px; height: 20px; }
  .ck__actions { order: 3; flex: 1 1 100%; }
  .ck__btn { flex: 1; justify-content: center; padding-inline: 12px; }
  body.ck-open .a11y { bottom: calc(16px + var(--ck-h, 150px)); }
}
@media (max-width: 560px) {
  .ck__text { font-size: .83rem; }
  .ck__title { font-size: .93rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ck, .a11y, .to-top { transition: none; }
}