/* =========================================================================
   Sagi Dahan — Landing page
   Design system + component styles
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts, self-hosted.
   They used to come from fonts.googleapis.com, which meant a render-blocking
   stylesheet on a third-party origin plus two extra connections before a
   single letter could paint — expensive on the cellular connection a visitor
   arrives on from an Instagram story. Both families ship as variable fonts,
   so one file per subset covers every weight the page uses.
   Heebo and Big Shoulders Stencil Display are both SIL Open Font License.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-hebrew.woff2) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/heebo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Big Shoulders Stencil Display';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/bigshoulders-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0B1220;
  --panel: #0E1018;
  --card: #141622;
  --border: #22283E;
  --border-2: #3a4160;
  --text: #F5F8FD;
  --muted: #98A2B3;
  --a: #3173EB;        /* accent — official brand blue */
  --btn: #3070E6;      /* accent darkened until white text clears AA; the editor recomputes it */
  --at: #8AA4FF;       /* accent tint (text on dark) */
  --wa: #0A7C3C;       /* whatsapp green — darkened to pass WCAG AA on white text (5.30:1) */
  --wa-hover: #0C8A3E;
  --danger: #E45A5A;

  /* Motion. The page had four near-identical "medium" durations —
     .25 / .28 / .3 / .32 — inside one cluster of components: differences no
     one can perceive, but enough that nothing ever finished together. The
     clearest symptom was the before/after switch, where the photo crossfaded
     in .28s while the thumb reporting on it slid in .32s, so the control
     always landed after the thing it was controlling — in a component
     DESIGN.md describes as "one state system". The 1px/2px/4px/20px distance
     scale is already disciplined and is left exactly as it is. */
  --dur-fast: .2s;      /* recolours, borders, anything that does not move */
  --dur-base: .28s;     /* things that physically move or change state */
  --dur-slow: .5s;      /* entrances */
  --ease-out: cubic-bezier(.22, .85, .35, 1);

  /* Motion borrowed from the lift itself, because symmetrical easing is what
     makes an interface read as machine-made. A rep is never symmetrical: the
     eccentric is lowered under control, the concentric is driven off the floor
     and only then settles. Every directional transition on this page picks one
     of the two, by which way the thing is actually going.

       --ease-ecc  lowering. Leaves gently, resists on the way down, arrives
                   without a bounce. Panels opening downward, dialogs landing,
                   anything that descends.
       --ease-con  driving up. Ninety per cent of the distance in the first
                   third, then a long settle. Entrances, anything that rises.

     Nobody will name this. They will notice the page does not feel typed. */
  --ease-ecc: cubic-bezier(.36, .02, .42, 1);
  --ease-con: cubic-bezier(.14, .92, .24, 1);
  --dur-ecc: .46s;      /* controlled. Longer on purpose */
  --dur-con: .34s;      /* driven. Shorter on purpose */

  --maxw: 1120px;
  --nav-h: 70px;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Heebo', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
a { color: inherit; }

::selection { background: color-mix(in srgb, var(--a) 35%, transparent); }
:focus-visible { outline: 2px solid var(--at); outline-offset: 3px; border-radius: 4px; }
/* A three-quarter-black backdrop and a 560px panel both appeared between one
   frame and the next. @starting-style gives the browser a state to come from;
   where it is unsupported the dialog simply appears as before. */
dialog::backdrop { background: rgba(4,5,9,.75); }
@media (prefers-reduced-motion: no-preference) {
  /* A dialog lands on the page. Eccentric. */
  dialog[open] { animation: sd-dialog-in var(--dur-ecc) var(--ease-ecc); }
  dialog[open]::backdrop { animation: sd-backdrop-in var(--dur-con) var(--ease-con); }
}
@keyframes sd-dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes sd-backdrop-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- layout helpers ---- */
.container { width: min(var(--maxw), 92vw); margin: 0 auto; }
.section { padding: clamp(72px, 9vw, 110px) 0; scroll-margin-top: var(--nav-h); }

/* =========================================================================
   Signature background — משטח הרמה
   The page's real complaint wasn't "too flat," it was "no form" — a vignette
   and a grain layer are still just a darker flat rectangle. This is an actual
   shape instead: a competition plate's rings and rim calibration marks, huge
   and mostly off-canvas, sitting fixed behind every section since they're all
   transparent above their own washes. Line art, not a blurred glow — no new
   "AI gradient blob" cliché. `--bgY` is written by app.js on scroll (a slow
   2D drift, a fraction of scroll speed) for real parallax depth; a plain
   translateY, never a 3D rotate, since that's the exact mechanism that turned
   the hero photo to grain on a real phone earlier — this file doesn't repeat it.
   ========================================================================= */
/* Clean ground, blue only.
   What was here was a drawing: a calibrated plate on a sleeve, with a collar
   and rings. Sagi asked for the drawing gone and light left in its place, so
   there are no shapes any more - three soft blue fields, fixed to the viewport,
   nothing with an edge you can name. Two of them breathe on a long cycle so
   the page is never completely still, and the whole layer is one element on
   the compositor. */
.bg-blue {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Both animated properties named, or the browser promotes for one and
     re-rasterises a full-viewport gradient for the other. */
  will-change: opacity, transform;
  background:
    radial-gradient(58% 42% at 78% 12%,  color-mix(in srgb, var(--a) 26%, transparent), transparent 70%),
    radial-gradient(46% 38% at 12% 48%,  color-mix(in srgb, var(--a) 17%, transparent), transparent 72%),
    radial-gradient(70% 50% at 60% 96%,  color-mix(in srgb, var(--a) 14%, transparent), transparent 74%);
  opacity: .5;
}


/* =========================================================================
   Scroll-linked motion, driven by CSS rather than by JavaScript
   Both of these used to be a scroll listener, a rAF gate and a style write per
   frame on the main thread. Expressed as a scroll timeline they run on the
   compositor, cost nothing on the main thread, and — because they are ordinary
   animations — the reduced-motion query and the accessibility panel's
   `html.acc-noanim * { animation: none }` already switch them off, with no
   second mechanism to keep in step. Browsers without support keep the JS path.
   ========================================================================= */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Same −0.06 rate the JS used, expressed as a distance over the document. */
    .progress {
      animation: sd-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}
/* The blue field drifts and breathes instead of a shape turning. Opacity and
   scale only, so it never touches layout. */
@keyframes sd-bgblue {
  0%, 100% { opacity: .42; transform: scale(1); }
  50%      { opacity: .62; transform: scale(1.05); }
}
@keyframes sd-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 700px) {
}

/* Second plane, closer and faster: a brushed-steel rake, not another ring.
   Rings are structure (geometry, calibration); this is material (the
   metal itself) — two different depth cues instead of one repeated.
   feTurbulence with a lopsided baseFrequency (fast on x, near-still on y)
   stretches noise into long streaks instead of isotropic grain; rotated so
   they rake at an angle rather than running flat with the viewport edge.
   --steelY moves faster than --bgY on the rings (initBgDrift, app.js) — the
   differential is what actually reads as "this plane is nearer," not the
   texture alone. */
/* Knurling, moved to where a hand actually lands.
   A barbell is not knurled end to end: it is cut where the grip goes and left
   smooth in between, so you can feel by touch where to hold it. The first pass
   here tiled the whole viewport, which looked like the object but was wrong
   about it. Now the texture appears only on the surfaces a visitor grips - the
   buttons, the form, the sticky bar - and the page between them is bare steel.
   The mask fades it out across the middle of each control for the same reason
   the bar is smooth there. */
.grip { position: relative; }
.grip::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(62deg,  rgba(255,255,255,.55) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-62deg, rgba(255,255,255,.55) 0 1px, transparent 1px 6px);
  opacity: .11;
  -webkit-mask-image: linear-gradient(to left, #000 0 22%, transparent 38% 62%, #000 78% 100%);
  mask-image: linear-gradient(to left, #000 0 22%, transparent 38% 62%, #000 78% 100%);
}
/* On a card the grip is the whole face, not two ends: you hold a form by
   putting your thumbs anywhere on it. Fades from the edges inward instead. */
.grip--face::after {
  opacity: .04;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(120% 90% at 50% 50%, transparent 30%, #000 100%);
}


/* =========================================================================
   Section depth
   Past the hero, every section sat on one flat, identical dark rectangle —
   the same complaint the buttons and cards had, just at page scale. Each one
   now gets its own soft light instead: a faint wash entering from the top, a
   shadow pooling toward the bottom, so scrolling reads as moving through a
   row of individually-lit panels rather than one continuous flat backdrop.
   The hero keeps its own bespoke glow and is deliberately not touched here.
   One light, not per-effect defaults: the wash enters from 64% instead of
   dead-center, matching the hero glow's own bias and the rings/steel corner
   (both anchored top-right) — so every section reads as lit from the same
   place instead of each effect getting its own generic "light from above." */
.section, .cta { position: relative; }
.section::before, .cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 120% 55% at 64% 0%, rgba(255,255,255,.025), transparent 60%),
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,.22) 100%);
}
/* Lifts each section's real content above its own wash layer. */
.section > .container { position: relative; z-index: 1; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
[hidden] { display: none !important; }

.eyebrow {
  font-family: 'Heebo', sans-serif; font-weight: 700;
  font-size: .78rem; letter-spacing: .16em;
  color: var(--at); margin-bottom: 14px;
}
/* Hero-only distinction. The signature numeral face (Big Shoulders Stencil
   Display) was tried here first and reverted — it has no Hebrew glyphs, so
   every Hebrew letter silently fell back to Heebo anyway and nothing
   actually changed on screen. Heavier weight + wider tracking gets a real,
   visible difference instead. Every other section's eyebrow stays at the
   base weight — a one-off exception, not the new default. */
.hero .eyebrow { font-weight: 900; letter-spacing: .22em; }

/* Display type is the same family as body, set at Black. */
h1, .h2, .stat__num, .menu__link, .display {
  font-family: 'Heebo', system-ui, sans-serif;
  font-weight: 900;
}
.h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; line-height: 1.1; margin: 0 0 20px; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 560px; line-height: 1.7; margin: 0; }
.accent { color: var(--a); }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  text-decoration: none; cursor: pointer; border: none; font-family: inherit;
  transition: background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), transform .12s var(--ease-con), color var(--dur-fast);
}
.btn svg { flex-shrink: 0; }
/* The grip goes on the bars you can actually get two hands on: the full-width
   buttons and the sticky bar. A 140px pill is not a bar, and cutting one only
   put noise on it - the first attempt knurled every button on the page and it
   read as quilting, which is the opposite of the point. */
.btn-block, .sticky-wa .btn { position: relative; overflow: hidden; }
.btn-block::after, .sticky-wa .btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    repeating-linear-gradient(62deg,  rgba(255,255,255,.6) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-62deg, rgba(255,255,255,.6) 0 1px, transparent 1px 6px);
  /* Cut hard over a short zone rather than faintly over the whole face. On a
     real bar the knurl is about a hand wide at each end and the rest is bare;
     a wash across the middle is what made the first attempt read as quilting. */
  opacity: .075;
  -webkit-mask-image: linear-gradient(to left, #000 0 11%, transparent 25% 75%, #000 89% 100%);
  mask-image: linear-gradient(to left, #000 0 11%, transparent 25% 75%, #000 89% 100%);
}
.btn-outline.btn-block::after { opacity: .05; }

/* =========================================================================
   Button depth
   A flat fill reads as UI chrome, not as something with weight. The bevel
   here is a light model, not a color change: a hairline highlight at the top
   edge, a contained inner shade at the bottom, a tight contact shadow, and a
   soft colored lift underneath. Every inset shadow stays within a few px of
   the edge, so it never washes over the fill color the text sits on — the
   AA-checked button colors below are untouched by this pass. The ambient lift
   (the last, colored layer in each stack) now falls down-and-left instead of
   straight down — the same upper-right light the section washes and the
   rings/steel corner already use, so a button's shadow agrees with the page
   it's sitting on instead of assuming its own overhead light. */
.btn-wa {
  background: var(--wa); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -3px 4px -1px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.35),
    -5px 10px 22px -10px rgba(10,124,60,.6);
}
.btn-wa:hover {
  background: var(--wa-hover);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -3px 4px -1px rgba(0,0,0,.2),
    0 2px 3px rgba(0,0,0,.3),
    -6px 16px 32px -12px rgba(10,124,60,.65);
  transform: translateY(-1px);
}
.btn-wa:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.06); }

/* Button blue is 2% darker than the brand accent so white text clears WCAG AA
   (4.58:1 vs 4.39:1). The accent itself, --a, is untouched. */
.btn-primary {
  background: var(--btn); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -3px 4px -1px rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.35),
    -5px 10px 22px -10px color-mix(in srgb, var(--a) 55%, transparent);
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--a) 82%, white);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -3px 4px -1px rgba(0,0,0,.2),
    0 2px 3px rgba(0,0,0,.3),
    -6px 16px 32px -12px color-mix(in srgb, var(--a) 60%, transparent);
  transform: translateY(-1px);
}
.btn-primary:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.4), inset 0 -1px 0 rgba(255,255,255,.06); }

.btn-outline {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
  color: var(--text); border: 1.5px solid var(--border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-outline:hover {
  border-color: color-mix(in srgb, var(--a) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 14%, transparent), color-mix(in srgb, var(--a) 5%, transparent) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    -5px 14px 28px -16px color-mix(in srgb, var(--a) 45%, transparent);
  transform: translateY(-1px);
}
.btn-outline:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }

.btn-sm { padding: 13px 24px; font-size: .9rem; }
.btn-lg { padding: 17px 36px; font-size: 1.05rem; gap: 10px; }
.btn-block { width: 100%; }

.note { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }

/* =========================================================================
   Navigation
   ========================================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 14px 0;
  background: rgba(11,18,32,.82);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(34,40,62,.6);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.brand {
  display: inline-flex; align-items: center; gap: 9px; padding: 4px 14px 4px 10px;
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
  background: rgba(255,255,255,.04); font-size: .82rem; font-weight: 700;
  letter-spacing: .01em; text-decoration: none; color: var(--text);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.brand:hover {
  border-color: color-mix(in srgb, var(--a) 60%, transparent);
  background: color-mix(in srgb, var(--a) 12%, transparent);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--a) 45%, transparent);
}
.brand__dot { color: color-mix(in srgb, var(--a) 60%, transparent); }
.brand__role { font-size: .82rem; font-weight: 500; color: var(--muted); letter-spacing: .03em; }

.nav__links { display: flex; gap: 26px; align-items: center; }
.navlink { font-size: .86rem; color: var(--muted); transition: color .2s; padding: 6px 2px; text-decoration: none; }
.navlink:hover { color: var(--text); }

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

.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.burger:hover {
  border-color: color-mix(in srgb, var(--a) 55%, transparent);
  background: color-mix(in srgb, var(--a) 10%, transparent);
}
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); }
.burger span:last-child { width: 70%; }

/* mobile menu overlay */
.menu {
  position: fixed; inset: 0; z-index: 150; background: rgba(11,18,32,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; padding: 20px 6vw 40px;
}
.menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.menu__logo { height: 46px; width: auto; display: block; }
.menu__close {
  width: 44px; height: 44px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); color: var(--text); font-size: 1.1rem; cursor: pointer; line-height: 1;
  transition: border-color .2s, transform .2s;
}
.menu__close:hover { border-color: color-mix(in srgb, var(--a) 55%, transparent); transform: scale(1.08); }
.menu__links { display: flex; flex-direction: column; gap: 6px; }
.menu__link {
  font-size: 1.6rem; font-weight: 900; color: var(--text); text-decoration: none;
  padding: 12px 0; border-bottom: 1px solid rgba(34,40,62,.6);
}
.menu__ig { font-size: 1.05rem; font-weight: 700; color: var(--muted); text-decoration: none; padding: 16px 0 4px; }
.menu__cta { margin-top: auto; }

/* scroll progress + skip link */
/* Reading the page is loading the bar. The track is the bare sleeve you have
   not reached yet, the fill is what is already on it - which is also the only
   reason this strip is legible at all: on its own, a blue line growing from
   the right edge tells you nothing about how much is left. */
.progress-track {
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 109;
  background: rgba(143,160,188,.14); pointer-events: none;
}
/* Seven gaps for the seven sections, so the fill arrives as discrete plates
   rather than as a line creeping across. The segmentation is not decoration:
   one plate is one section, and the gap you are inside is the section you are
   reading. Punched over the fill instead of under it, because the fill is the
   thing that has to be cut. */
.progress-notches {
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 111; pointer-events: none;
  background: repeating-linear-gradient(to left,
    transparent 0 calc(100% / 7 - 3px),
    var(--bg) calc(100% / 7 - 3px) calc(100% / 7));
}
.progress {
  position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 110;
  background: var(--a); transform: scaleX(0); transform-origin: right; pointer-events: none;
}
.skip {
  position: absolute; top: -60px; right: 16px; z-index: 200; background: var(--a); color: #fff;
  min-height: 44px; padding: 0 18px; border-radius: 8px; font-weight: 700; font-size: .9rem;
  display: inline-flex; align-items: center;
  transition: top .2s; text-decoration: none;
}
.skip:focus { top: 12px; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  padding: 120px 0 64px; position: relative; overflow: hidden;
}
/* ===== עיצוב "חשוך ונקי" — רקע ההירו =====
   בלי ריבועים, בלי בועות, בלי צורות. רק העמקה עדינה לעבר הקצוות
   כדי שהמרכז ירגיש מואר, ורמז כחול קלוש בקצה העליון. */
.hero__glow-radial {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 55% 30%,
    transparent 30%, rgba(0,0,0,.38) 100%);
}
.hero__glow-orb {
  position: absolute; inset: 0 0 auto 0; height: 40%; width: auto;
  border-radius: 0; filter: none; animation: none; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--a) 7%, transparent), transparent 85%);
}
/* הגרגיריות עברה לשכבה גלובלית על כל הדף, אז השכבה המקומית מיותרת */
.hero__grid { display: none; }

.hero__inner { position: relative; z-index: 1; }
.hero__grid-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 900; line-height: 1.05; margin: 0 0 24px; }
.hero__sub { color: var(--muted); font-size: 1.1rem; line-height: 1.75; margin: 0 0 36px; max-width: 480px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__stats {
  display: flex; gap: clamp(14px, 4vw, 32px); margin-top: 40px; padding-top: 32px;
  border-top: 1px solid var(--border); flex-wrap: wrap; row-gap: 20px;
}
/* Each number is stamped on a plate, the way a calibrated disc carries its own
   weight on its face. Same diameter for all three on purpose: a championship
   count and a kilo gain are not the same unit, and sizing the discs by the raw
   figure would draw a comparison between them that is not true. The plate is
   the frame; the number is what is cast into it. */
.hero__stats > div { text-align: center; }
.stat__num {
  position: relative;
  width: clamp(76px, 18vw, 94px); height: clamp(76px, 18vw, 94px);
  margin: 0 auto 10px;
  /* Flex rather than grid: the plus belongs on the same baseline as the
     digits it modifies, and grid made every span its own row, so "+21" read
     as a plus sign sitting on top of a 21. */
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  align-content: center;
  border-radius: 50%;
  border: 2px solid rgba(49,115,235,.5);
  font-size: clamp(1.35rem, 3vw, 1.7rem); font-weight: 900; line-height: 1;
}
/* The recessed face inside the rim. */
.stat__num::after {
  content: ''; position: absolute; inset: 9px;
  border-radius: 50%; border: 1px solid rgba(49,115,235,.22);
  pointer-events: none;
}
.stat__suf { flex: 0 0 100%; text-align: center; font-size: .5em; font-weight: 700; color: var(--muted); margin-top: 3px; }
.stat__pre { font-size: .72em; }
.stat__label { font-size: .78rem; color: var(--muted); line-height: 1.4; }
/* The "+" and unit text stay Heebo — only the digits switch face, so the
   number itself carries the signature and the surrounding text stays legible. */
.stat__pre, .stat__suf { font-family: 'Heebo', sans-serif; }
.stat__num .stat__digits, .tc-value {
  font-family: 'Big Shoulders Stencil Display', 'Heebo', sans-serif;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.hero__media { perspective: 1400px; max-width: 460px; width: 100%; margin: 0 auto; }
.hero__card {
  position: relative; border-radius: 22px; border: 1px solid var(--border); background: var(--card);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.55);
  transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
@media (prefers-reduced-motion: reduce) { .hero__card { transform: none; } }
.hero__card-img { position: relative; border-radius: 21px 21px 0 0; overflow: hidden; aspect-ratio: 4/5; }

/* =========================================================================
   Before / after
   A wipe divider was tried first and thrown out: the two photos are different
   poses in different rooms, so any split showed half a face against a wall of
   lockers. Instead each photo gets the whole frame — twice the size it had as
   a side-by-side pair on a phone — and the visitor swipes between them. --swap
   runs 0 (before) to 1 (after), so a drag cross-fades and a release snaps.
   Named .swap, not .ba: the story section already owns a .ba grid.
   ========================================================================= */
/* The whole card is the drag surface; .swap is the photo frame inside it. */
.hero__card[data-swap] { touch-action: pan-y; cursor: grab; }
.swap { position: absolute; inset: 0; overflow: hidden; }
.swap__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.swap__img--after { opacity: var(--swap, 0); transition: opacity var(--dur-base) var(--ease-out); }
/* Mid-drag the photo must track the finger exactly, so the easing comes off. */
html.swap-dragging .swap__img--after { transition: none; }
html.swap-dragging .hero__card[data-swap] { cursor: grabbing; }

/* The switch lives in the caption bar, not on the photo — floated over the
   picture it landed squarely on the part of the body the photo is there to
   show.
   A sliding thumb, not a background-color swap on click: it rides the same
   --swap value the drag already writes, so mid-drag it tracks the finger
   1:1 instead of only snapping at release — one state system for both the
   gesture and the click. RTL note: "לפני" is data-swap-set="0", first in
   source, which in a plain RTL flex row lands on the physical *right* — the
   thumb's own translateX(-100%) moves it physically *left* to "אחרי", which
   is the correct direction here (verified against the live button
   positions: before sits right of after). translateX is never RTL-aware on
   its own — the sign is chosen for this specific layout, not assumed. */
.swap__switch {
  position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 999px; flex-shrink: 0;
  background: rgba(6,9,16,.5); border: 1px solid rgba(255,255,255,.12);
}
.swap__thumb {
  position: absolute; z-index: 0; top: 4px; inset-inline-start: 4px;
  width: calc(50% - 6px); height: calc(100% - 8px); border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--text));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.1),
    0 1px 2px rgba(0,0,0,.3), 0 6px 14px -6px rgba(0,0,0,.5);
  transform: translateX(calc(var(--swap, 0) * -1 * (100% + 4px)));
  transition: transform var(--dur-base) var(--ease-out);
}
html.swap-dragging .swap__thumb { transition: none; }   /* tracks the finger, no lag */
.swap__opt {
  position: relative; z-index: 1; flex: 1 1 0; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px; cursor: pointer; text-align: center;
  font-family: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  background: transparent; color: var(--muted); transition: color var(--dur-base);
}
.swap__opt[aria-pressed="true"] { color: #0B1220; }
.swap__opt[aria-pressed="false"]:hover { color: var(--text); }
.swap__opt:focus-visible { outline: 3px solid var(--at); outline-offset: 2px; }

/* Scrim lives inside the image layer, so it tints the photo only and stops
   cleanly where the caption bar begins. */
.hero__card-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,18,32,0) 48%, rgba(11,18,32,.6) 100%),
    linear-gradient(160deg, color-mix(in srgb, var(--a) 12%, transparent), transparent 50%);
}
/* The caption is a real block under the photo, not an overlay floating on it. */
.hero__card-caption {
  border-top: 1px solid var(--border); border-radius: 0 0 21px 21px;
  padding: 10px 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}
.hero__tag-v { font-size: .88rem; font-weight: 700; }

/* =========================================================================
   Cards / grids
   ========================================================================= */
.grid { display: grid; gap: 20px; margin-top: 48px; }
/* The section used to be five identical cards on a cold navy ground, each
   opening with the same thin blue outline drawing. Nothing in it could only
   have come from this coach. It is rebuilt around type instead: one dominant
   cell that states the thing he actually does, three ordinary cards, and a
   full-width line in his own voice closing the section, all on the page's own
   navy. No stock icons, no invented numbers,
   no photographs — the page owns none, and pretending otherwise would show. */
.grid--features { grid-template-columns: 1fr; gap: 14px; }

@media (min-width: 560px) {
  .grid--features { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid--features > .card--wide { grid-column: span 2; }
}
/* Two per row after the big cell: a card that ends up alone on its row takes
   the whole row rather than leaving a hole. Positional, so it keeps holding
   when a card is added or taken away from the editor. Bounded on both sides —
   left open it also fired on the three-column layout and stretched the wrong
   card there. */
@media (min-width: 560px) and (max-width: 899px) {
  .grid--features > .card:nth-child(even):last-child { grid-column: span 2; }
}
@media (min-width: 900px) {
  .grid--features { grid-template-columns: repeat(3, 1fr); }
  /* The big cell takes two columns and both rows, two ordinary cards stack in
     the third, and the last one runs the full width underneath — so no row
     repeats the one above it. */
  .grid--features > .card--wide { grid-column: span 2; grid-row: span 2; }
  /* The big cell fills columns 1-2 of rows 1-2 and two cards stack beside it,
     so the ordinary cards start laying out three to a row from the fourth on.
     The last one closes its row instead of dangling: 4th, 7th, 10th take the
     whole row, 5th, 8th, 11th take two. Positional, so adding or removing a
     card from the editor cannot leave a hole. */
  .grid--features > .card:nth-child(3n+4):last-child { grid-column: span 3; }
  .grid--features > .card:nth-child(3n+5):last-child { grid-column: span 2; }
  /* A full-row strip with the title stacked over one short line left most of
     the cell empty. Side by side, the strip carries its own width. */
  .grid--features > .card:nth-child(3n+4):last-child {
    display: grid; grid-template-columns: minmax(180px, 240px) 1fr;
    align-items: center; gap: 0 44px;
  }
  .grid--features > .card:nth-child(3n+4):last-child .card__title { margin-bottom: 0; }
  .grid--features > .card:nth-child(3n+4):last-child .card__title::after { margin-top: 10px; }
}

.grid--testi { grid-template-columns: repeat(auto-fit, minmax(min(100%,260px), 1fr)); }
/* Dots belong to the phone carousel below and have nothing to show on desktop. */
.testi__dots { display: none; }

/* =========================================================================
   Card depth
   Same light model as the buttons: a hairline top highlight, a barely-lighter
   gradient top edge, and a soft ambient shadow underneath — so a panel reads
   as a plate sitting slightly off the page, not a rectangle with a border.
   The drop falls down-left, not straight down — same upper-right light as
   the buttons and the section washes now use. */
.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 100%, white 3%), var(--panel));
  border: 1px solid var(--border); border-radius: 16px; padding: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3), -8px 20px 40px -26px rgba(0,0,0,.55);
}
.card--hover { transition: border-color var(--dur-fast), transform var(--dur-base), box-shadow var(--dur-base); }
.card--hover:hover {
  border-color: color-mix(in srgb, var(--a) 60%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35),
    -10px 30px 54px -26px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--a) 12%, transparent);
}
.card--lift:hover { transform: translateY(-4px); }
/* A touch screen never hovers, so the lift and the border tint answer to the
   press instead. Without this the cards were inert on a phone. */
@media (hover: none) {
  .card--hover:active {
    border-color: color-mix(in srgb, var(--a) 60%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35),
      -10px 30px 54px -26px rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--a) 12%, transparent);
  }
  .card--lift:active { transform: translateY(-3px); }
  .testi:active {
    border-color: color-mix(in srgb, var(--a) 45%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35), -8px 26px 48px -26px rgba(0,0,0,.6);
  }
}

.card__title { font-size: 1rem; font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.card__text { font-size: .88rem; color: var(--muted); line-height: 1.65; }

/* =========================================================================
   Features section
   The section keeps the page's own navy and the brand blue — it is set apart
   by layout and type scale, not by a ground of its own. The only local token
   is a brighter body grey for the one cell that carries the section.
   ========================================================================= */
.section--feat { --muted-hi: #D3DCEA; }

.card--wide { display: flex; flex-direction: column; justify-content: flex-end; }
.section--feat .card--wide { padding: clamp(24px, 5vw, 48px); }
.section--feat .card--wide .card__title {
  font-size: clamp(2.15rem, 8vw, 4.05rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.02em; margin-bottom: 20px; text-wrap: balance;
}
.section--feat .card--wide .card__text {
  font-size: clamp(1rem, 3.4vw, 1.15rem); line-height: 1.7;
  color: var(--muted-hi); max-width: 36ch;
}

/* 13px was the reason the grey read as low contrast. */
.section--feat .card__title { font-size: 1.08rem; margin-bottom: 10px; text-wrap: balance; }
.section--feat .card__text { font-size: .95rem; line-height: 1.75; }

/* A short skewed stroke under each title, in the brand blue — a marker line,
   not another outline icon. It is the only drawn thing left in the section. */
.section--feat .card__title::after {
  content: ""; display: block; height: 3px; width: 30px; margin-top: 12px;
  background: var(--at); border-radius: 2px;
  transform: skewX(-14deg); transform-origin: right center;
}
.section--feat .card--wide .card__title::after { height: 4px; width: 56px; margin-top: 18px; }

/* His most human sentence, at the size it deserves, outside the card grid —
   the section ends on his voice because there is no photograph to end it on. */
.band {
  margin-top: clamp(30px, 5vw, 56px);
  padding: clamp(28px, 5vw, 44px) 0 0;
  border-top: 1px solid var(--border);
}
.band__title {
  margin: 0 0 12px; font-size: clamp(1.4rem, 5.2vw, 2.35rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.15; text-wrap: balance;
}
.band__text { margin: 0; font-size: clamp(1rem, 3.6vw, 1.2rem); color: var(--muted); line-height: 1.7; }

/* =========================================================================
   Image placeholder / swap
   ========================================================================= */
.slot { width: 100%; height: 100%; display: block; position: relative; }
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* form fields */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .8rem; color: var(--muted); font-weight: 500; }
/* A field set into a raised card should look pressed in, not sit flush with
   it — the opposite light direction from the card's own top highlight. */
.input {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
  color: var(--text); font-size: .95rem; font-family: inherit; width: 100%;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
  transition: border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.input:focus { border-color: var(--a); outline: none; }
/* =========================================================================
   Accordions (FAQ)
   ========================================================================= */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion--faq { max-width: 760px; margin: 48px 0 0; }
.acc { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color .2s; }
.acc:has(.acc__btn:hover) { border-color: color-mix(in srgb, var(--a) 40%, transparent); }
.acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 20px 24px; background: transparent; border: none; cursor: pointer; color: var(--text);
  font-family: inherit; text-align: right; transition: background .2s;
}
.acc__btn:hover { background: rgba(255,255,255,.03); }
.acc__q { font-size: .98rem; font-weight: 700; }
.acc__chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform var(--dur-base); stroke: var(--muted); }
.acc__btn[aria-expanded="true"] .acc__chevron { transform: rotate(180deg); }
/* An answer opens downward, which is a lowering, so it opens eccentric: under
   control, no bounce at the bottom. Closing is the way back up, and it snaps. */
.acc__panel { overflow: hidden; transition: max-height var(--dur-con) var(--ease-con); max-height: 0; }
/* The open state is the button's, not the panel's: the script drives the panel
   by inline max-height and only the trigger carries aria-expanded, so keying
   the eccentric curve off the panel's own attribute selected nothing. */
[data-acc][aria-expanded="true"] + .acc__panel {
  transition: max-height var(--dur-ecc) var(--ease-ecc);
}
.acc__panel[data-acc-open] { max-height: 400px; }
.acc__panel-inner { padding: 0 24px 20px; font-size: .9rem; color: var(--muted); line-height: 1.7; }

/* =========================================================================
   Testimonials
   ========================================================================= */
.testi {
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 100%, white 3%), var(--panel));
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.3), -8px 20px 40px -26px rgba(0,0,0,.55);
  transition: border-color .2s, box-shadow .2s;
}
/* No :hover rule existed here before — a mouse got zero feedback on a card
   that visibly plays video. Touch keeps the matching :active version below. */
.testi:hover {
  border-color: color-mix(in srgb, var(--a) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 4px rgba(0,0,0,.35), -8px 26px 48px -26px rgba(0,0,0,.6);
}
.testi__player { position: relative; }
.testi video { width: 100%; aspect-ratio: 9/16; object-fit: cover; display: block; background: var(--card); }

/* A poster frame with no play affordance reads as a broken image. This button
   sits on the poster and gets out of the way the moment playback starts. */
.testi__play {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(6,9,16,.15), rgba(6,9,16,.45));
  border: 0; cursor: pointer; color: #fff; padding: 0;
}
.testi__play svg {
  width: 30px; height: 30px; margin-inline-start: 4px;   /* optical centre of a triangle */
}
.testi__play::before {
  content: ""; position: absolute; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(11,18,32,.72); border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
  transition: transform var(--dur-base), background var(--dur-base);
}
.testi__play:hover::before { transform: scale(1.08); background: color-mix(in srgb, var(--a) 30%, rgba(11,18,32,.72)); }
.testi__play svg { position: relative; }
.testi__play[hidden] { display: none; }
.testi__play:focus-visible { outline: 3px solid var(--at); outline-offset: -6px; }
.testi__fallback {
  aspect-ratio: 9/16; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: var(--card); color: var(--muted); padding: 24px; text-align: center;
}
.testi__fallback svg { width: 32px; height: 32px; opacity: .5; }
.testi__fallback div { font-size: .82rem; line-height: 1.6; }
/* A poster frame plus a name gave a scanning visitor nothing to read — the whole
   proof sat behind a tap. One real line from each video carries the card on its
   own, marked with the same right-border accent as .story__punch. */
.testi__quote {
  margin: 16px 18px 16px 0; padding: 2px 14px 2px 0;
  border-right: 2px solid var(--a);
  font-size: .92rem; line-height: 1.7; font-weight: 500; color: var(--text);
}
/* A testimonial with no video to play. The words are the whole card, so they
   take the room the player would have had and the name stays pinned to the
   bottom, in line with the cards that do carry a video. */
.testi--said { display: flex; flex-direction: column; }
/* The quote never grows — the accent rule down its side is drawn to the height
   of the words, and a stretched box would run the line past the end of the
   sentence. Instead the auto margins centre it in whatever height the grid
   hands the card, so a short testimonial next to a tall video does not leave a
   pit of empty panel under it. */
.testi--said .testi__quote {
  margin-top: auto; margin-bottom: auto;
  padding-top: 26px; padding-bottom: 26px;
  font-size: 1rem; flex: 0 0 auto;
}
.testi--said .testi__meta { margin-top: 0; }

.testi__meta { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.testi__meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wa); flex-shrink: 0; }
.testi__name { font-size: .88rem; font-weight: 700; }
.testi__role { font-size: .78rem; color: var(--muted); }

/* Mid-page conversion point. The visitor has just watched real people vouch —
   until now the only way to act was to scroll past everything to the footer. */
.midcta { margin-top: clamp(38px, 6vw, 56px); text-align: center; }
.midcta__text { margin: 0 0 18px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.midcta__note { margin: 14px 0 0; font-size: .8rem; color: var(--muted); }

/* =========================================================================
   How it works — three steps
   ========================================================================= */
.grid--steps { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--steps { grid-template-columns: repeat(3, 1fr); } }
/* The step number keeps the tinted tile on purpose: here the number is the
   content, not a picture of it, and the tile is what makes it read as a step.
   The digit
   stays in Heebo — the stencil numeral font belongs to stats and badges only. */
.card__step {
  width: 40px; height: 40px; border-radius: 10px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--a) 15%, transparent); color: var(--a);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 900; line-height: 1;
}

/* =========================================================================
   Pricing — two plans
   Third place on the page where a number is the content (hero stats,
   testimonial values, and now the price), so the digits take the signature
   numeral face. The shekel sign and "לחודש" stay Heebo, same split as
   .stat__pre / .stat__suf. Cards align to the start edge with the heading and
   cap at 760px: two plans do not need the full container width.
   ========================================================================= */
.grid--price { grid-template-columns: 1fr; gap: 16px; max-width: 760px; }
@media (min-width: 640px) { .grid--price { grid-template-columns: repeat(2, 1fr); } }
.price { display: flex; flex-direction: column; padding: clamp(24px, 4vw, 34px); }
.price__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.price__name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.price__badge {
  flex-shrink: 0; padding: 6px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; line-height: 1;
  color: var(--at); background: color-mix(in srgb, var(--a) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
}
.price__amount { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; line-height: 1; }
.price__digits {
  font-family: 'Big Shoulders Stencil Display', 'Heebo', sans-serif;
  font-weight: 800; font-size: clamp(3.4rem, 9vw, 4.6rem); letter-spacing: .02em;
}
.price__cur { font-size: 1.5rem; font-weight: 700; }
.price__per { font-size: .95rem; font-weight: 700; color: var(--muted); }
.price__text { margin: 0 0 22px; font-size: .95rem; line-height: 1.7; color: var(--muted); flex: 1; }
.price .btn { justify-content: center; }
/* The deal card is the one lit spot in the section: its border rests where
   the other cards only go on hover. */
.price--deal { border-color: color-mix(in srgb, var(--a) 55%, transparent); }
.price__note { margin: 22px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.65; max-width: 760px; }

/* =========================================================================
   Final CTA
   ========================================================================= */
.cta { padding: clamp(90px, 12vw, 150px) 0; position: relative; overflow: hidden; }
.cta__glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 130% 85% at 50% 55%, transparent 35%, rgba(0,0,0,.32) 100%);
}
.cta__inner { width: min(760px, 92vw); margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.cta h2 { font-size: clamp(2.2rem, 5.5vw, 3.8rem); font-weight: 900; line-height: 1.1; margin: 0 0 20px; }
.cta__sub { color: var(--muted); font-size: 1.1rem; line-height: 1.75; margin: 0 auto 40px; max-width: 520px; }
.cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta .btn-lg:hover { transform: translateY(-2px); }
/* Same bevel as every other button, just a bigger ambient glow — this is the
   page's single highest-stakes click, it should carry the most presence. */
.btn-wa.btn-lg:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -3px 4px -1px rgba(0,0,0,.2),
    0 2px 4px rgba(0,0,0,.32),
    0 22px 44px -14px rgba(10,124,60,.68);
}
.cta__note { margin: 18px 0 0; font-size: .8rem; color: var(--muted); }

/* Risk reversal, built only from things already true elsewhere on the page —
   the fit call, the single written price, the written engagement terms. The
   visitor's stated fear is repeating a purchase that did not work, and nothing
   above the form addressed it. No guarantee is claimed here, because none exists. */
.assure {
  list-style: none; margin: 30px auto 0; padding: 0;
  max-width: 520px; text-align: start;
  display: flex; flex-direction: column; gap: 10px;
}
.assure li {
  position: relative; padding-inline-start: 26px;
  font-size: .88rem; line-height: 1.6; color: var(--muted);
}
.assure li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .45em;
  /* physical sides on purpose: a check mark keeps its shape in RTL, only its
     position flips (handled by inset-inline-start above) */
  width: 13px; height: 7px; border-left: 2px solid var(--a);
  border-bottom: 2px solid var(--a); transform: rotate(-45deg);
}

/* =========================================================================
   Footer
   ========================================================================= */
.footer { border-top: 1px solid var(--border); padding: 40px 0; padding-bottom: 32px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.footer__brand { color: var(--muted); font-weight: 500; font-size: .85rem; margin-top: 12px; }
.footer__copy { font-size: .78rem; color: var(--muted); margin-top: 6px; }
.footer__nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.footer__link { padding: 6px 2px; font-size: .8rem; color: var(--muted); text-decoration: none; transition: color .2s; background: none; border: none; font-family: inherit; cursor: pointer; }
.footer__link:hover { color: var(--text); }
.footer__social {
  width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted); transition: color .2s, border-color .2s;
}
.footer__social svg { width: 17px; height: 17px; }
.footer__social--ig:hover { color: var(--text); border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.footer__social--wa:hover { color: var(--wa); border-color: rgba(10,124,60,.55); }

/* =========================================================================
   Dialogs
   ========================================================================= */
.dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 18px; padding: 0; max-width: min(560px, 92vw); width: 100%; }
.dialog__inner { padding: 28px 28px 24px; }
.dialog__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.dialog__head h2 { font-size: 1.15rem; font-weight: 900; margin: 0; }
.dialog__close {
  width: 44px; height: 44px; border-radius: 50%; background: var(--card); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; line-height: 1; transition: border-color .2s, transform .2s;
}
.dialog__close:hover { border-color: color-mix(in srgb, var(--a) 55%, transparent); transform: scale(1.08); }
.dialog__body { font-size: .88rem; color: var(--muted); line-height: 1.75; display: flex; flex-direction: column; gap: 10px; }
.dialog__body p { margin: 0; }

/* =========================================================================
   Sticky mobile WhatsApp bar
   ========================================================================= */
.sticky-wa {
  position: fixed; inset: auto 0 0 0; z-index: 90;
  padding: 12px 5vw calc(12px + env(safe-area-inset-bottom));
  background: rgba(11,18,32,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  /* The single most commercially important element on the page, and the only
     one that had nothing to do with the rest of it. The top edge is now the
     sleeve seen in section - two hairlines with the gap between them - and the
     ends carry the collars that hold a plate on. The green does not move. */
  border-top: none;
}
.sticky-wa::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 4px, var(--border) 4px 5px);
}
.sticky-wa::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 11px; pointer-events: none;
  background:
    linear-gradient(to right, rgba(143,160,188,.5) 0 2px, transparent 2px) left top / 12px 11px no-repeat,
    linear-gradient(to left,  rgba(143,160,188,.5) 0 2px, transparent 2px) right top / 12px 11px no-repeat;
}
.sticky-wa .btn { padding: 15px 24px; font-size: .95rem; width: 100%; }
/* It used to appear mid-scroll between two frames. It rises from under the
   fold instead — the same .28s the rest of the page uses. `hidden` still
   removes it outright, so nothing here can leave it half-visible. */
@media (prefers-reduced-motion: no-preference) {
  .sticky-wa:not([hidden]) { animation: sd-sticky-in var(--dur-base) ease-out; }
}
@keyframes sd-sticky-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   Reveal animation
   ========================================================================= */
/* hidden state applies only once JS has tagged the root with .js —
   without JS the content stays fully visible (progressive enhancement) */
/* --reveal-delay נקבע ב-JS על ההירו ועל פסקאות הסיפור, כדי שהם ייכנסו
   במדרגות במקום בבת אחת. בכל שאר הדף הוא נשאר 0 והאלמנט נכנס מיד כשהוא נראה. */
/* Everything on this page enters by rising, so everything enters concentric. */
.reveal {
  transition: opacity var(--dur-con) var(--ease-con), transform var(--dur-con) var(--ease-con);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal:not(.in) { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .nav__links { display: none; }
  /* On a phone the sticky bar at the bottom is the WhatsApp CTA. Keeping a
     second green button up here put two identical calls to action on screen at
     once and ate 39% of the bar; the row is now brand + burger, nothing else. */
  .nav__actions .btn-wa { display: none; }

  /* Phone hero order. The transformation photo used to start 709px down, below
     the fold on every phone — the strongest proof on the page, unseen. Here it
     moves directly under the headline. `display: contents` lifts the text
     column's children into the same flex flow, which is what makes it possible
     to slot the photo between the headline and the paragraph without touching
     the desktop two-column grid. */
  .hero { padding: 100px 0 56px; }
  .hero__grid-cols { display: flex; flex-direction: column; gap: 0; }
  .hero__grid-cols > div:first-child { display: contents; }
  .hero .eyebrow  { order: 1; }
  .hero h1        { order: 2; margin-bottom: 22px; }
  .hero__media    { order: 3; margin-bottom: 28px; }
  .hero__sub      { order: 4; margin-bottom: 28px; max-width: none; }
  .hero__cta      { order: 5; }
  .hero .note     { order: 6; }
  .hero__stats    { order: 7; }
  /* The copy column is display:contents on a phone, so every child of it is
     ordered by hand. A new one with no order lands at zero, which is why the
     scroll cue first appeared above the eyebrow. */
  .hero .scrollcue { order: 8; }

  /* Testimonials as a swipe carousel. Stacked, the three portrait videos ran
     2,448px — 2.9 phone screens of scrolling to reach the third. One card per
     screen with the next one peeking says "there is more" without anything
     having to move on its own. */
  .grid--testi {
    /* Each card keeps its own height. Stretching them to match would make a
       written testimonial as tall as a portrait video and leave most of it
       empty, which reads as a card that failed to load. */
    display: flex; align-items: flex-start; gap: 14px;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-inline: calc(50% - 50vw); padding-inline: 6vw 18vw; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .grid--testi::-webkit-scrollbar { display: none; }
  .testi { flex: 0 0 76vw; scroll-snap-align: center; }

  .testi__dots { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
  .testi__dot {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .testi__dot::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--border-2); transition: background .2s, transform .2s;
  }
  .testi__dot[aria-current="true"]::before { background: var(--a); transform: scale(1.35); }
  .testi__dot:focus-visible { outline: 3px solid var(--at); outline-offset: -4px; border-radius: 50%; }
}

/* =========================================================================
   Phone type scale
   The fluid clamps both bottom out on a phone, which left the headline at
   41.6px and every section heading at 32px — near enough that the page read
   as one flat level of shouting. Section headings step down here so the
   hero stays the loudest thing on the screen, and the section padding comes
   in: at 72px top and bottom across six sections it was spending a full
   screen of scroll on empty space.
   ========================================================================= */
@media (max-width: 600px) {
  .section { padding: 56px 0; }
  .cta { padding: 68px 0; }
  .h2 { font-size: 1.8rem; line-height: 1.14; margin-bottom: 12px; }
  .cta h2 { font-size: 1.9rem; line-height: 1.16; }
  .lead { font-size: 1rem; line-height: 1.65; }
  .eyebrow { font-size: .74rem; margin-bottom: 10px; }
  .grid { margin-top: 34px; }
  .hero__sub { font-size: 1.05rem; line-height: 1.7; }
  /* A marker band that wraps mid-phrase draws two disconnected boxes and
     strands the full stop on its own line. The phrase moves as one instead —
     it is 10 characters, so it can never be wider than the line. */
  .mk { white-space: nowrap; }
}
@media (min-width: 901px) {
  .burger { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__glow-orb { animation: none; }
  * { scroll-behavior: auto; }
}

/* scroll-spy active nav link */
.navlink.is-active { color: var(--text); }
.navlink.is-active::after {
  content: ""; display: block; height: 2px; margin-top: 4px; border-radius: 2px;
  background: var(--a);
}

/* button press micro-interaction */
/* A loaded bar whips: the ends hold, the middle gives. The button flattens
   under the press by the same fraction it widens, then comes back on the
   concentric curve. Two per cent, a tenth of a second. */
.btn:active { transform: translateY(1px) scale(1.012, .962); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }

/* brand logo images */
.brand__logo { height: 38px; width: auto; display: block; }
.footer__logo { height: 74px; width: auto; display: block; }

/* ---- lead form (תחזור אליי) ---- */
.lead-form {
  margin: 44px auto 0; max-width: 460px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, white 3%), var(--card));
  border: 1px solid var(--border); border-radius: 20px; padding: 28px 26px; text-align: right;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 4px rgba(0,0,0,.3), -12px 34px 64px -30px rgba(0,0,0,.6);
}
.lead-form__title { font-weight: 900; font-size: 1.12rem; margin-bottom: 18px; text-align: center; }
.lead-form .field { margin-bottom: 14px; }
/* The trap field: present in the DOM for scripts, absent for everyone else.
   Not display:none, which some bots skip on purpose. */
.lead-form .field--trap { position: absolute; inset-inline-start: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.field__label { display: block; font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
/* An optional field has to say so in the label itself. A visitor who cannot
   tell which fields are required fills none of them or all of them, and on a
   lead form the first of those is the expensive outcome. */
.field__opt { font-weight: 400; opacity: .72; }
/* Two questions before the name. Radio inputs styled as pills, so a thumb
   can answer each with one tap. The honest note under the goal shows only
   when someone picks the thing this coaching is not for. */
.choice { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 8px; font-size: .8rem; color: var(--muted); font-weight: 500; }
.choice__row { display: flex; gap: 8px; flex-wrap: wrap; }
.choice__opt { position: relative; flex: 1 1 auto; margin: 0; }
.choice__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.choice__opt span {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
  color: var(--muted); font-size: .9rem; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
  transition: border-color .2s, color .2s, background-color .2s;
}
.choice__opt input:checked + span { border-color: var(--a); color: var(--text); background: rgba(49,115,235,.14); }
.choice__opt input:focus-visible + span { outline: 3px solid var(--at); outline-offset: 2px; }
@media (hover: hover) { .choice__opt input:not(:checked):hover + span { border-color: var(--border-2); color: var(--text); } }
.lead-form__honest { font-size: .85rem; color: var(--at); line-height: 1.6; margin: 10px 0 0; }
.lead-form__submit { justify-content: center; margin-top: 4px; }
.lead-form__note { font-size: .78rem; color: var(--muted); margin: 14px 0 0; line-height: 1.65; text-align: center; }
.lead-form__err { color: #FF9B9B; font-size: .85rem; font-weight: 700; margin: 12px 0 0; text-align: center; }
.linklike {
  background: none; border: none; padding: 0; color: var(--at); text-decoration: underline;
  cursor: pointer; font-size: inherit; font-family: inherit; font-weight: inherit;
}

/* ---- footer disclaimer ---- */
.footer__disclaimer {
  max-width: 760px; margin: 22px auto 0; padding-top: 18px;
  border-top: 1px solid var(--border); font-size: .78rem; color: var(--muted);
  line-height: 1.75; text-align: center; opacity: .9;
}

/* ---- accessibility widget ---- */
/* =========================================================================
   Cookie notice — a transparency bar, not a consent wall. It blocks nothing
   and sets nothing; the only thing stored is that you have seen it.
   ========================================================================= */
.cookiebar {
  position: fixed; inset: auto 0 0 0; z-index: 350;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 20px;
  padding: 16px clamp(16px, 4vw, 28px) calc(16px + env(safe-area-inset-bottom));
  background: rgba(14,16,24,.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}
.cookiebar__text { margin: 0; font-size: .85rem; color: var(--muted); max-width: 620px; line-height: 1.55; }
.cookiebar__actions { display: flex; gap: 10px; flex-wrap: wrap; }
/* While the bar is up it owns the bottom edge, so nothing stacks on top of it. */
html.cookiebar-open .sticky-wa { display: none; }
html.cookiebar-open .a11y-widget { bottom: 150px; }
@media (max-width: 600px) {
  .cookiebar { flex-direction: column; align-items: stretch; text-align: center; }
  .cookiebar__actions { justify-content: center; }
  html.cookiebar-open .a11y-widget { bottom: 190px; }
}

/* Legal dialogs: sub-headings and the "last updated" line. */
.dialog__body h3 { font-size: .98rem; font-weight: 700; margin: 26px 0 8px; color: var(--text); }
.dialog__body h3:first-of-type { margin-top: 18px; }
.dialog__meta { font-size: .78rem; color: var(--muted); margin: 0 0 4px; }
.dialog__body [data-fill] { color: var(--at); }

/* The cookie notice pushes this button 132px up the screen. It used to
   teleport — a control jumping across the viewport with no input from the
   person watching it. */
.a11y-widget {
  position: fixed; bottom: 18px; left: 18px; z-index: 300; display: none;
  transition: bottom var(--dur-base) ease-out;
}
@media (prefers-reduced-motion: reduce) { .a11y-widget { transition: none; } }
.js .a11y-widget { display: block; }
/* The control is the one thing on the page that must be recognised before it
   is read. The dial drawn here before was this brand's own glyph and nobody
   else's — and that was the problem: a visitor looking for accessibility scans
   for the standing figure in a circle, the way they scan for a shopping cart.
   Convention beats invention on this one button. The chrome still carries the
   page's own light: inset highlight and shade, a contact shadow, and the
   ambient lift falling down-left like every other raised control here. */
.a11y-widget__btn {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--at) 85%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--card) 100%, white 6%) 0%, var(--card) 60%, #0A0F1B 100%);
  color: var(--at); cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -3px 6px -2px rgba(0,0,0,.5),
    0 1px 2px rgba(0,0,0,.45),
    -6px 14px 30px -12px color-mix(in srgb, var(--a) 60%, transparent);
  transition: transform .2s, box-shadow .2s, border-color .2s, color .2s;
}
.a11y-widget__btn:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--at); color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -3px 6px -2px rgba(0,0,0,.45),
    0 2px 3px rgba(0,0,0,.4),
    -8px 20px 40px -14px color-mix(in srgb, var(--a) 70%, transparent);
}
.a11y-widget__btn:active { transform: translateY(0) scale(.96); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.a11y-widget__btn:focus-visible { outline: 2px solid var(--at); outline-offset: 3px; }
.a11y-widget__btn[aria-expanded="true"] { border-color: var(--at); color: #fff; }
.a11y-widget__glyph { display: block; }

.a11y-widget__panel {
  position: absolute; bottom: 66px; left: 0; width: 264px; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 8px;
  max-height: min(72vh, 540px); overflow-y: auto;
}
.a11y-widget__panel[hidden] { display: none; }
/* The panel is taller than a phone and scrolls. A close button at the bottom
   of a scrolling panel is a close button you cannot see, so it rides in the
   header and the header stays put. */
.a11y-widget__head {
  position: sticky; top: -14px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 900; font-size: 1rem; padding: 10px 4px 8px; text-align: right;
  margin: -14px -4px 0; background: var(--card);
  border-bottom: 1px solid var(--border);
}
.a11y-widget__x {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -6px -8px 0;
  background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 10px;
  transition: color .2s, background .2s;
}
.a11y-widget__x:hover { color: var(--text); background: var(--panel); }
.a11y-widget__x:focus-visible { outline: 2px solid var(--at); outline-offset: 2px; }
.a11y-widget__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  text-align: right; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
/* The pressed state was carried by colour alone. A word says it outright, so
   it survives greyscale, high-contrast mode and a screenshot. */
.a11y-widget__state {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); flex: 0 0 auto;
}
.a11y-widget__opt[aria-pressed="true"] .a11y-widget__state { color: var(--at); }
.a11y-widget__opt--action { justify-content: center; }
.a11y-widget__hint {
  margin: 0; padding: 2px 4px; font-size: .8rem; line-height: 1.65; color: var(--muted);
}

/* Sliders. The value is an <output> next to its own label, so the number is
   announced with the control instead of only being drawn beside it. */
.a11y-range { display: flex; flex-direction: column; gap: 2px; padding: 4px 4px 0; }
.a11y-range__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .84rem; font-weight: 700; cursor: pointer;
}
.a11y-range__val { font-size: .78rem; font-weight: 700; color: var(--at); font-variant-numeric: tabular-nums; }
/* The visible track is 6px, but a finger needs 44. The input keeps the full
   touch height and only paints a thin track inside it. */
.a11y-range__input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  background: transparent; cursor: pointer; margin: 0;
}
.a11y-range__input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: var(--border-2);
}
.a11y-range__input::-moz-range-track { height: 6px; border-radius: 999px; background: var(--border-2); }
.a11y-range__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 999px;
  background: var(--btn); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.a11y-range__input::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--btn); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.a11y-range__input:focus-visible { outline: 2px solid var(--at); outline-offset: 4px; border-radius: 6px; }
.a11y-widget__opt:hover { border-color: var(--a); }
.a11y-widget__opt[aria-pressed="true"] { border-color: var(--a); background: color-mix(in srgb, var(--a) 24%, var(--panel)); }
.a11y-widget__opt--action { background: transparent; }
.a11y-widget__link {
  background: none; border: none; color: var(--at); text-decoration: underline;
  font-size: .82rem; font-family: inherit; cursor: pointer; padding: 4px; text-align: center;
  min-height: 44px;
}
/* Clear of the sticky WhatsApp bar, and of the iPhone home indicator under it. */
@media (max-width: 900px) {
  .a11y-widget { bottom: calc(88px + env(safe-area-inset-bottom)); left: 14px; }
}

/* ---- accessibility modes (toggled on <html> by the widget) ---- */
html.acc-contrast { --bg: #000208; --panel: #04060C; --card: #0A0E18; --border: #55608A; --text: #FFFFFF; --muted: #DDE4F2; --at: #BCCBFF; }
html.acc-bigtext { font-size: 118%; }
html.acc-grayscale body > * { filter: grayscale(1); }
html.acc-links a, html.acc-links .footer__link, html.acc-links .linklike, html.acc-links .navlink {
  text-decoration: underline !important; background: rgba(138,164,255,.16);
  outline: 1px solid rgba(138,164,255,.5); outline-offset: 1px;
}
html.acc-font body, html.acc-font body * { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !important; }
html.acc-noanim *, html.acc-noanim *::before, html.acc-noanim *::after { animation: none !important; transition: none !important; }
html.acc-noanim { scroll-behavior: auto; }
html.acc-noanim .reveal { opacity: 1 !important; transform: none !important; }
.lead-form__sub { font-size: .88rem; color: var(--muted); line-height: 1.7; margin: 0 0 18px; text-align: center; }

/* testimonial fallback (shown until the video file is in place) */
.testi__topic { font-size: .86rem; line-height: 1.7; color: var(--text); font-weight: 700; }
.testi__topic span { color: var(--muted); font-weight: 500; }
.testi__soon {
  font-size: .74rem; color: var(--at); margin-top: 4px;
  border: 1px solid color-mix(in srgb, var(--at) 35%, transparent);
  border-radius: 999px; padding: 4px 12px;
}

/* =========================================================================
   Editorial highlight layer. Three marks that sit on top of existing type
   without touching its size or weight, so a long headline can be scanned in
   one pass. box-decoration-break keeps the marker intact when a phrase wraps
   across lines, which it will in RTL at narrow widths.
   ========================================================================= */

/* 1 — marker: a translucent band behind the words, never on the glyphs */
.mk {
  background: color-mix(in srgb, var(--a) 18%, transparent);
  padding: 2px 6px; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* 2 — rule: a thick line under the words, drawn clear of the descenders */
.mk-u {
  text-decoration: underline;
  text-decoration-color: var(--a);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}

/* 3 — glow: reserved for the single most important phrase on the screen.
   Two shadows, one tight and one wide, so the halo has a core and a falloff. */
.mk-g {
  color: var(--a);
  text-shadow: 0 0 12px color-mix(in srgb, var(--a) 60%, transparent),
               0 0 24px color-mix(in srgb, var(--a) 30%, transparent);
}
@media (prefers-reduced-motion: reduce) { .mk-g { text-shadow: 0 0 10px color-mix(in srgb, var(--a) 45%, transparent); } }

/* headline accent: an underline that draws itself right to left when scrolled into view */
.ul-wrap { position: relative; display: inline-block; }
.ul-svg { position: absolute; right: 0; bottom: -.16em; width: 100%; height: 8px; overflow: visible; }
.ul-path {
  /* Chalk, not print. The rule under the headline was a clean two-pixel line,
     which is the single most machine-made mark on the page. Chalk is the most
     human material in the sport: you clap it on before a heavy set and it does
     not go on evenly. A displacement map roughens the stroke so its edges
     break up the way a chalked line does, and the weight goes up because a
     chalk mark is wider and softer than a drawn one. */
  stroke: currentColor; stroke-width: 3.8; fill: none; stroke-linecap: round;
  opacity: .95;
  filter: url(#sd-chalk) drop-shadow(0 0 3px color-mix(in srgb, var(--a) 30%, transparent));
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 700ms cubic-bezier(.16, 1, .3, 1);
}
.ul-wrap.is-drawn .ul-path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .ul-path { transition: none; stroke-dashoffset: 0; }
}

/* =========================================================================
   Story — single narrow column + before/after pair
   ========================================================================= */
.story { max-width: 720px; }
.story .h2 { margin-bottom: 10px; }
.story__lead { font-size: 1.35rem; font-weight: 900; margin: 0 0 28px; }
.story__body { display: flex; flex-direction: column; gap: 18px; }
.story__body p { margin: 0; color: var(--muted); line-height: 1.85; font-size: .97rem; }
.story__punch {
  color: var(--text) !important; font-weight: 700; line-height: 1.75 !important;
  border-right: 3px solid var(--a); padding: 4px 18px 4px 0; margin-top: 6px !important;
}

.ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 3vw, 34px); margin: 34px 0; }
/* Side by side on a 375px screen left each portrait about 165px wide — too small
   to carry the one comparison the whole page rests on. Below 600px they stack at
   full width instead; the 45 / 66 badges keep the before-after reading intact. */
@media (max-width: 599px) {
  .ba { grid-template-columns: 1fr; gap: 16px; }
}

/* tilt cards (before / after) */
.tc-perspective { perspective: 1000px; }
.tc-wrapper {
  position: relative; aspect-ratio: 3 / 4;
  transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.tc-image-layer {
  position: absolute; inset: 0; margin: 0;
  border-radius: 16px; overflow: hidden; transform: translateZ(0);
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.tc-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* זוהר שרודף אחרי הסמן. יושב בתוך השכבה החתוכה, כך שהוא נעצר בפינות המעוגלות.
   --mx/--my/--g נכתבים ב-JS על אלמנט ה-[data-tilt] ויורשים לכאן. */
.tc-glow {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--g, 0);
  background: radial-gradient(250px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--a) 35%, transparent),
              color-mix(in srgb, var(--a) 0%, transparent) 70%);
  transition: opacity var(--dur-base) ease-out;
}
.tc-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(6,9,16,.92) 0%, rgba(6,9,16,.55) 18%, rgba(6,9,16,0) 42%);
}
/* sibling of the image layer, so the rounded corners never clip it as it lifts forward */
.tc-badge-layer {
  position: absolute; right: 22px; bottom: 18px;
  transform: translateZ(40px); pointer-events: none;
  display: flex; align-items: baseline; gap: 10px;
}
.tc-value {
  font-size: clamp(1.5rem, 4vw, 2.75rem); line-height: 1;
  color: var(--text); text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.tc-label { font-size: clamp(.68rem, 1.4vw, .94rem); font-weight: 400; color: rgba(245,248,253,.62); }

@media (prefers-reduced-motion: reduce) {
  .tc-wrapper { transform: none; }
}
@media (max-width: 520px) {
  .tc-badge-layer { right: 12px; bottom: 11px; gap: 7px; }
}


/* ---- מסך אישור אחרי שליחת הטופס ---- */
.lead-done { text-align: center; padding: 6px 0 2px; }
/* The tick is the whole reassurance. It draws itself once so the state change
   is felt rather than only read, and it is decorative - the sentence under it
   carries the same information for anyone who never sees it. */
.lead-done__check {
  width: 52px; height: 52px; margin: 4px auto 16px; border-radius: 50%;
  display: grid; place-items: center;
  /* --wa is darkened for white-on-green buttons and is far too dark to read
     as a glyph on this card. The tick needs the lighter end of the same hue. */
  color: #3ED17E;
  background: rgba(62, 209, 126, .12);
  border: 1px solid rgba(62, 209, 126, .32);
}
.lead-done__check svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .lead-done__check svg path { stroke-dasharray: 26; stroke-dashoffset: 26; animation: lead-tick .42s var(--ease-out, ease-out) .06s forwards; }
  .lead-done__check { animation: lead-pop .34s var(--ease-out, ease-out) both; }
}
@keyframes lead-tick { to { stroke-dashoffset: 0; } }
@keyframes lead-pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lead-done__title { font-weight: 900; font-size: 1.25rem; margin-bottom: 8px; letter-spacing: -.01em; }
.lead-done__sub { color: var(--muted); font-size: .9rem; line-height: 1.7; margin: 0 0 14px; }
.lead-done__sub { margin-bottom: 18px; }
/* The WhatsApp button carries a whole sentence in the delivered state, so it
   has to be allowed to wrap instead of forcing the card wider than the phone. */
.lead-done .btn-wa { white-space: normal; line-height: 1.45; padding-top: 13px; padding-bottom: 13px; }
.lead-done__fine { color: var(--muted); font-size: .78rem; margin: 12px 0 0; opacity: .85; }

/* ---- ביצועים ונגישות מגע (סבב CRO) ---- */

/* הדפדפן מדלג על רינדור סקשנים שנמצאים מחוץ למסך.
   contain-intrinsic-size נותן לו גובה משוער כדי שסרגל הגלילה לא יקפוץ. */
.section, .cta {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* ההירו תמיד מרונדר — הוא מעל הקיפול */
.hero { content-visibility: visible; }

/* אזורי מגע של 44px בפוטר ובקישורי הדיאלוגים, לפי הנחיות המגע של אפל וגוגל */
.footer__link { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.footer__social { width: 44px; height: 44px; }
.linklike { min-height: 44px; }

/* ===== גרגיריות גלובלית =====
   שכבה קבועה מעל כל הדף. זה מה שמונע מרקע כהה וחלק להיראות
   כמו קובץ ריק, ומה ששובר את מראה המעבר-צבע הסטרילי.
   נוצרת בתוך הדפדפן: אפס בקשות רשת, אפס בייטים. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .38; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* sd-edit:start — נכתב ממצב העריכה באתר, אל תערוך ידנית */
:root {
  --a: #0059ff;
  --at: #73a4ff;
  --btn: #0059ff;
  --bg: #0B1220;
}
/* sd-edit:end */

/* =========================================================================
   Motion patterns lifted from explain.co.il, rebuilt in this page's own
   language rather than copied.

   What they actually run is small and disciplined: an infinite logo marquee, a
   two-second pulse on a scroll cue, a five-second glow, and a single reveal
   transition on opacity and transform. No animation library at all - their
   bundle has no GSAP, no Lottie, no ScrollTrigger. The three below are drawn
   from the barbell instead of from their brand, and each switches off with the
   page's two motion switches. The marquee is deliberately not among them: it
   was built and then cut, because a strip of words sliding past on a loop asks
   for attention every second it is on screen and never repays it.
   ========================================================================= */

/* ---- 2. the scroll cue ----
   Theirs is a chevron under the hero on a two-second opacity pulse. The hero
   here is a full screen tall on a phone and ends on a photo, so the same cue
   does the same job: it says the page continues. */
.scrollcue {
  display: grid; place-items: center; gap: 6px;
  margin: 26px auto 0; color: var(--muted);
  font-size: .72rem; letter-spacing: .08em; font-weight: 700;
}
.scrollcue svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .scrollcue { animation: sd-cue 2.2s ease-in-out infinite; }
}
@keyframes sd-cue {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(4px); }
}

/* ---- 3. the slow glow ----
   Theirs breathes behind the hero art on a five-second curve. Here it sits
   behind the photo, in the brand blue, and never moves - only its size and
   opacity change, so it stays on the compositor. */
.hero__media { position: relative; }
.hero__media::before {
  content: ''; position: absolute; inset: -12% -8%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--a) 30%, transparent), transparent 72%);
  filter: blur(28px); pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__media::before { animation: sd-glow 5s ease-in-out infinite; }
}
@keyframes sd-glow {
  0%, 100% { opacity: .5;  transform: scale(.94); }
  50%      { opacity: .85; transform: scale(1.04); }
}

/* ---- 4. the eyebrow rule ----
   A short line beside the small label above a section heading. Structure, not
   decoration: it marks where a new section starts without another heading. */
/* The page already had .eyebrow, set up for the one in the hero. Redefining it
   here would have silently restyled that line too, so the rule is added rather
   than the type reset: same size, same spacing, one line beside it. */
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow::after {
  content: ''; height: 1px; width: 46px; flex: none;
  background: linear-gradient(to left, color-mix(in srgb, var(--a) 70%, transparent), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .bg-blue { animation: sd-bgblue 14s ease-in-out infinite; }
}