/* ED Studio v3 — עיצוב האתר (הגרסה הסופית).
   סולם פונטים קבוע: 14/16/18/21/28/40/56/72. כותרות 700, letter-spacing 0.
   מרווחים: 4/8/16/24/40/64 (+ 96/160 לקצב אזורים). כל הכפתורים מרובעים (radius 0).
   תנועה: רק transform/opacity, 150–900ms (ותנועה שנשלטת בגלילה), מבוטלת ב-prefers-reduced-motion.
   התוכן גלוי ושלם בלי JS: מצב התנועה (html.motion) נוסף רק מ-site.js. */

@font-face {
  font-family: "Heebo";
  src: url("../fonts/heebo-hebrew.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo";
  src: url("../fonts/heebo-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  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 {
  --green: #023823; --green-2: #0F4A32; --green-3: #01261A;
  --cream: #F7EDE3; --cream-2: #EFE3D6; --white: #FFFFFF;
  --ink: #1C2621; --muted: #4E5F56; --link: #2E6B4E; --sage: #A9BFB2;
  --line: #D9C9B6; --line-2: #B9A892;
  --fs-14: .9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-21: 1.3125rem;
  --fs-28: 1.75rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --fs-72: 4.5rem;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px; --s6: 64px; --s7: 96px; --s8: 160px;
  --gutter: 20px; --max: 1240px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-ui: cubic-bezier(.23, 1, .32, 1);
  --header-h: 64px; --topbar-h: 36px;
  --shadow: 0 30px 60px -24px rgba(2, 40, 25, .45);
}
@media (min-width: 768px) { :root { --gutter: 40px; --header-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
@media (max-width: 899px) { html { scroll-padding-bottom: 80px; } }
body { margin: 0; font-family: "Heebo", system-ui, sans-serif; font-size: var(--fs-16); line-height: 1.7; color: var(--ink); background: var(--cream); overflow-x: clip; }
@media (min-width: 768px) { body { font-size: var(--fs-18); } }
::selection { background: var(--green); color: var(--cream); }
html { scrollbar-color: var(--green) var(--cream-2); accent-color: var(--green); caret-color: var(--green); }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: 0; line-height: 1.15; color: var(--green); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
button, a, [role="button"] { touch-action: manipulation; }
button, .btn, .menu-btn, .pick label { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible, .peak :focus-visible, .final :focus-visible, .site-footer :focus-visible, .marquee :focus-visible { outline-color: var(--cream); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- טיפוגרפיה ---------- */
.h1 { font-size: var(--fs-40); line-height: 1.1; }
.h2 { font-size: var(--fs-28); line-height: 1.2; }
.h2--xl { font-size: var(--fs-40); line-height: 1.1; }
.h3 { font-size: var(--fs-21); line-height: 1.3; }
.lead { font-size: var(--fs-18); line-height: 1.6; color: var(--ink); max-width: 34em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-14); font-weight: 500; color: var(--muted); margin-bottom: var(--s3); }
.eyebrow::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.p-second { margin-top: var(--s3); font-size: var(--fs-21); line-height: 1.3; font-weight: 700; color: var(--muted); }
@media (min-width: 768px) { .p-second { font-size: var(--fs-28); } }
@media (min-width: 768px) {
  .h1 { font-size: var(--fs-56); }
  .h2 { font-size: var(--fs-40); }
  .h2--xl { font-size: var(--fs-56); line-height: 1.08; }
  .h3 { font-size: var(--fs-28); }
  .lead { font-size: var(--fs-21); }
}
@media (min-width: 1200px) { .h1 { font-size: var(--fs-72); line-height: 1.04; } }

/* ---------- מחיר: צורה אחת בכל האתר ---------- */
.price { direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: baseline; gap: .14em; font-weight: 700; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price .cur { font-size: .6em; }

/* ---------- כפתורים (מרובעים תמיד) ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 2px solid var(--green); border-radius: 0; background: var(--green); color: var(--cream); font-weight: 700; font-size: var(--fs-16); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .18s var(--ease-ui), transform .12s var(--ease-ui); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-2); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-ui); }
.btn:focus-visible::before { transform: scaleX(1); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .25s var(--ease-ui); }
.btn:active { transform: scale(.98); }
.btn--light { background: var(--cream); border-color: var(--cream); color: var(--green); }
.btn--light::before { background: var(--white); }
.btn--ghost { background: transparent; color: var(--green); }
.btn--ghost::before { background: var(--cream-2); }
.btn--block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--green); text-decoration: none; position: relative; }
.link-arrow::after { content: ""; position: absolute; inset-inline: 0; bottom: 8px; height: 2px; background: currentColor; transform: scaleX(.3); transform-origin: right; transition: transform .3s var(--ease-ui); }
.link-arrow:focus-visible::after { transform: scaleX(1); }
.link-arrow svg { width: 20px; height: 20px; transition: transform .25s var(--ease-ui); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { transform: scaleX(1); }
  .btn:hover svg { transform: translateX(-3px); }
  .link-arrow:hover::after { transform: scaleX(1); }
  .link-arrow:hover svg { transform: translateX(-4px); }
}
.chip { display: block; padding: 8px var(--s3); border-radius: 0; background: var(--green); color: var(--cream); font-size: var(--fs-14); font-weight: 500; line-height: 1.4; }
.plan-visual--green .chip, .p-visual--green .chip { background: var(--cream); color: var(--green); }

/* ---------- דילוג ---------- */
.skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 200; background: var(--green); color: var(--cream); padding: 12px 18px; font-weight: 700; }
.skip:focus { top: 12px; }

/* ---------- כותרת עליונה (הפס העליון בתוך header) ---------- */
.site-header { position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 50; background: var(--cream); }
.topbar { height: var(--topbar-h); background: var(--green); color: var(--cream); font-size: var(--fs-14); }
.topbar p { height: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .dot { width: 4px; height: 4px; background: var(--sage); flex: none; }
.topbar .wide { display: none; }
@media (min-width: 768px) { .topbar .wide { display: inline; } }
.navbar { transition: background-color .2s ease; }
.site-header.is-scrolled .navbar { background: var(--cream-2); }
.navbar .container { height: var(--header-h); display: flex; align-items: center; gap: var(--s4); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--green); text-decoration: none; font-weight: 700; font-size: var(--fs-21); }
.brand svg { width: 40px; height: auto; }
.nav { margin-inline-start: auto; display: none; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; font-weight: 500; position: relative; }
.nav a::after { content: ""; position: absolute; inset-inline: 12px; bottom: 8px; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-ui); }
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current]::after { transform: scaleX(1); }
.header-cta { display: none; min-height: 48px; padding: 0 20px; }
.menu-btn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 12px; background: transparent; border: 2px solid var(--green); border-radius: 0; color: var(--green); font-weight: 700; cursor: pointer; }
.menu-btn .bars { width: 18px; height: 12px; position: relative; border-block: 2px solid currentColor; }
.menu-btn .bars::after { content: ""; position: absolute; inset-inline: 0; top: 3px; height: 2px; background: currentColor; }
.mobile-nav { background: var(--cream-2); padding-block: var(--s3) var(--s4); }
.mobile-nav ul { margin-bottom: var(--s3); }
.mobile-nav a:not(.btn) { display: flex; align-items: center; justify-content: space-between; min-height: 56px; color: var(--green); text-decoration: none; font-weight: 700; font-size: var(--fs-21); }
.mobile-nav a svg { width: 20px; }
@media (min-width: 900px) {
  .nav, .header-cta { display: inline-flex; }
  .menu-btn, .mobile-nav { display: none !important; }
}

/* ---------- אזורים ---------- */
.section { padding-block: var(--s6); position: relative; }
.section--alt { background: var(--cream-2); }
@media (min-width: 900px) {
  .section { padding-block: var(--s7); }
  .section--big { padding-block: var(--s8); }
}
.sec-head { margin-bottom: var(--s5); display: grid; gap: var(--s3); }
@media (min-width: 900px) { .sec-head { margin-bottom: var(--s6); } }

/* ---------- מכשירים (מוקאפים) ---------- */
.phone { position: relative; background: #0d110f; padding: 3.2%; border-radius: 16% / 7.4%; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08); }
.phone .scr { position: relative; overflow: hidden; border-radius: 12.5% / 5.8%; aspect-ratio: 390 / 844; background: #fff; }
.phone .scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone::before { content: ""; position: absolute; z-index: 2; top: 4.6%; left: 50%; width: 28%; height: 2.6%; margin-left: -14%; background: #0d110f; border-radius: 99px; }
.laptop .lid { background: #0d110f; padding: 2.2% 2.2% 3%; border-radius: 12px 12px 0 0; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12); }
.laptop .scr { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.laptop .scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.laptop .base { height: 12px; margin-inline: -7%; background: #A9ADA9; border-radius: 0 0 14px 14px; position: relative; }
.laptop .base::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; margin-left: -8%; height: 5px; background: #7c807d; border-radius: 0 0 8px 8px; }
@media (min-width: 900px) { .laptop .base { height: 18px; } }

/* ---------- מרקיז ---------- */
.marquee { background: var(--green); color: var(--cream); overflow: hidden; }
.marquee-inner { display: flex; align-items: center; }
.marquee-view { overflow: hidden; flex: 1; min-width: 0; padding-block: var(--s4); }
.marquee-track { display: flex; width: max-content; }
.marquee-list { display: flex; align-items: center; flex: none; }
.marquee-list li { display: inline-flex; align-items: center; gap: var(--s4); padding-inline-end: var(--s4); font-size: var(--fs-21); font-weight: 500; white-space: nowrap; }
.marquee-list li::after { content: ""; width: 8px; height: 8px; background: var(--sage); }
@media (min-width: 900px) { .marquee-list li { font-size: var(--fs-28); gap: var(--s5); padding-inline-end: var(--s5); } }
.marquee-toggle { flex: none; display: none; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; margin-inline: var(--s3); padding: 0 10px; background: transparent; color: var(--cream); border: 2px solid var(--sage); border-radius: 0; cursor: pointer; }
.marquee-toggle svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .motion .marquee-toggle { display: inline-flex; }
  .motion .marquee-track { animation: marquee 56s linear infinite; }
  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(50%); } }
/* בלי תנועה (או בלי JS): רשימה סטטית שלמה, בלי העותק הכפול */
html:not(.motion) .marquee-list[aria-hidden="true"] { display: none; }
html:not(.motion) .marquee-track, html:not(.motion) .marquee-list { width: auto; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; row-gap: 8px; }
html:not(.motion) .marquee-list li { white-space: normal; }
html:not(.motion) .marquee-view { padding-inline: var(--gutter); }
html:not(.motion) .marquee-list li { font-size: var(--fs-18); }

/* ---------- חבילות ---------- */
.plans { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .plans { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.plan { position: relative; display: flex; flex-direction: column; background: var(--white); color: var(--ink); transition: transform .3s var(--ease-ui); }
.plan::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: var(--shadow); opacity: 0; transition: opacity .3s var(--ease-ui); }
.plan-visual { position: relative; overflow: hidden; aspect-ratio: 16 / 11; background: var(--cream-2); }
.plan-visual--green { background: var(--green); }
.plan-visual .inner { position: absolute; inset: 0; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-6px); }
  .plan:hover::after { opacity: 1; }
  .plan:hover .plan-visual .inner { transform: translateY(-10px); }
}
.plan-visual .chip { position: absolute; bottom: 0; inset-inline: 0; z-index: 4; }
.fan { position: absolute; width: 34%; bottom: -26%; }
.fan:nth-child(1) { inset-inline-start: 33%; z-index: 3; bottom: -18%; }
.fan:nth-child(2) { inset-inline-start: 6%; transform: rotate(5deg); }
.fan:nth-child(3) { inset-inline-start: 60%; transform: rotate(-5deg); }
.plan-visual .laptop { position: absolute; top: 14%; inset-inline-end: -4%; width: 82%; }
.plan-visual .laptop .base { display: none; }
.plan-visual .phone.mini { position: absolute; bottom: -16%; inset-inline-start: 6%; width: 25%; z-index: 3; }
.plan-body { display: grid; gap: var(--s3); padding: var(--s4); flex: 1; align-content: start; }
@media (min-width: 900px) { .plan-body { padding: var(--s5); } }
.plan-name { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.plan .price { font-size: var(--fs-40); }
@media (min-width: 900px) { .plan .price { font-size: var(--fs-56); } }
.plan-days { font-weight: 700; color: var(--green); }
.plan-days small { display: block; font-weight: 400; font-size: var(--fs-14); color: var(--muted); }
.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.checks svg { width: 20px; height: 20px; margin-top: .3em; color: var(--green); }
.not-included { font-size: var(--fs-16); color: var(--ink); padding: var(--s3); background: var(--cream); }
.plan-actions { display: grid; gap: var(--s2); padding: 0 var(--s4) var(--s4); }
@media (min-width: 900px) { .plan-actions { padding: 0 var(--s5) var(--s5); } }
.plan-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s4); }
.plans-note { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); font-size: var(--fs-14); color: var(--muted); }
.plans-note span { display: inline-flex; align-items: center; gap: 8px; }


/* ---------- איך זה עובד (צד נדבק, צד גולל) ---------- */
.how-grid { display: grid; gap: var(--s5); }
.steps { position: relative; display: grid; }
.steps .rail { position: absolute; top: 24px; bottom: 24px; inset-inline-start: 21px; width: 6px; background: var(--cream); }
.steps .rail i { position: absolute; inset: 0; background: var(--green); transform-origin: top; transform: scaleY(var(--p, 1)); }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s3); padding-block: var(--s4); }
.step .node { position: relative; z-index: 1; justify-self: center; width: 20px; height: 20px; margin-top: 8px; background: var(--cream); outline: 4px solid var(--cream-2); transition: background-color .3s ease; }
.step.is-active .node { background: var(--green); }
.step p { color: var(--ink); margin-top: var(--s2); }
.how-bar { display: none; }
.how-active { display: none; }
@media (min-width: 900px) {
  .how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); align-items: start; }
  .how-aside { position: sticky; top: calc(var(--header-h) + 18vh); display: grid; gap: var(--s4); align-content: start; }
  .how-active { display: grid; gap: var(--s2); margin-top: var(--s4); }
  .how-count { display: flex; align-items: baseline; gap: 2px; font-size: clamp(64px, 9vw, 120px); font-weight: 800; line-height: .9; color: var(--green); font-variant-numeric: tabular-nums; }
  .how-count small { font-size: var(--fs-28); font-weight: 700; color: var(--muted); }
  .how-active-name { font-size: var(--fs-21); font-weight: 700; color: var(--ink); }
  .how-bar { display: block; margin-top: var(--s2); height: 6px; background: var(--cream); position: relative; max-width: 360px; }
  .how-bar i { position: absolute; inset: 0; background: var(--green); transform-origin: right; transform: scaleX(var(--p, 1)); }
  .step { min-height: 26vh; align-content: center; padding-block: var(--s5); grid-template-columns: 64px 1fr; gap: var(--s4); }
  .step .node { width: 24px; height: 24px; margin-top: 12px; }
  .steps .rail { inset-inline-start: 29px; top: 32px; bottom: 32px; }
}
html:not(.motion) .step .node { background: var(--green); }

/* ---------- מה כלול (תמונה + רשימה) ---------- */
.inc-grid { display: grid; gap: var(--s5); }
.inc-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; max-height: 520px; background: var(--green); }
.inc-media .plx { position: absolute; inset: -8% 0; }
.inc-media img { width: 100%; height: 100%; object-fit: cover; }
.included { display: grid; gap: var(--s2); }
.included li { display: grid; grid-template-columns: 40px 1fr; gap: var(--s3); padding: var(--s4); background: var(--cream-2); }
.included svg { width: 28px; height: 28px; color: var(--green); margin-top: 2px; }
.included strong { display: block; color: var(--green); font-size: var(--fs-18); }
.included span { color: var(--ink); }
@media (min-width: 900px) {
  .inc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s7); align-items: start; }
  .inc-media { max-height: none; position: sticky; top: calc(var(--header-h) + 40px); }
  .included strong { font-size: var(--fs-21); }
}

/* ---------- פס תמונה (נשימה) ---------- */
.band { position: relative; overflow: hidden; height: 440px; background: var(--green); }
.band .plx { position: absolute; inset: -14% 0; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.band-card { position: absolute; inset-inline: var(--gutter); bottom: var(--gutter); max-width: 520px; background: var(--green); color: var(--cream); padding: var(--s4); }
.band-card p { font-size: var(--fs-21); font-weight: 700; line-height: 1.35; }
@media (min-width: 900px) { .band { height: 76vh; max-height: 760px; min-height: 520px; } .band-card { inset-inline: auto; inset-inline-start: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); bottom: var(--s6); padding: var(--s5); } .band-card p { font-size: var(--fs-28); } }

/* ---------- מי בונה ---------- */
.about-grid { display: grid; gap: var(--s5); }
.about-mark { display: grid; place-items: center; aspect-ratio: 1; background: var(--green); padding: 24%; max-width: 220px; }
@media (min-width: 900px) { .about-mark { max-width: 420px; } }
.about-mark svg { width: 100%; height: auto; color: var(--cream); }
.about-copy .lead { color: var(--ink); }
.about-copy p + p { margin-top: var(--s3); }
.sign { margin-top: var(--s5); display: flex; align-items: center; gap: var(--s3); }
.sign svg { width: 44px; color: var(--green); }
.sign b { display: block; font-size: var(--fs-21); color: var(--green); line-height: 1.3; }
.sign span { font-size: var(--fs-14); color: var(--muted); }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: center; } }

/* ---------- שאלות נפוצות ---------- */
.faq-layout { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .faq-layout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s6); align-items: start; } .faq-layout .sec-head { position: sticky; top: calc(var(--header-h) + 40px); } }
.faq { display: grid; gap: var(--s2); }
.faq details { background: var(--white); padding-inline: var(--s4); }
.section--alt .faq details { background: var(--cream); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 64px; padding-block: var(--s3); cursor: pointer; list-style: none; font-weight: 700; font-size: var(--fs-18); color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 32px; height: 32px; border: 2px solid var(--green); border-radius: 0; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--green); transition: transform .25s var(--ease-ui); }
.pm::after { transform: rotate(90deg); }
details[open] .pm::after { transform: rotate(0deg); }
.answer { padding-bottom: var(--s4); color: var(--ink); max-width: 40em; }
.answer p + p { margin-top: var(--s2); }
@media (min-width: 900px) { .faq summary { font-size: var(--fs-21); } }

/* ---------- סיום (נפתר ונשאר) ---------- */
.final { position: relative; overflow: hidden; background: var(--green); color: var(--cream); padding-block: var(--s7); }
.final-mark { position: absolute; inset-inline-end: -6%; bottom: -18%; width: 52%; max-width: 560px; color: var(--green-2); pointer-events: none; }
.final .container { position: relative; display: grid; gap: var(--s4); justify-items: start; }
.final h2 { color: var(--cream); font-size: var(--fs-40); line-height: 1.08; max-width: 14em; }
.final p { color: var(--cream); font-size: var(--fs-18); max-width: 32em; }
@media (min-width: 900px) { .final { padding-block: var(--s8); } .final h2 { font-size: var(--fs-72); } .final p { font-size: var(--fs-21); } }

/* ---------- פוטר ---------- */
.site-footer { background: var(--green-3); color: var(--cream); padding-block: var(--s6) var(--s4); font-size: var(--fs-16); }
.site-footer h2 { font-size: var(--fs-16); color: var(--sage); margin-bottom: var(--s2); font-weight: 700; }
.site-footer a, .site-footer .linklike { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); text-decoration: none; }
.site-footer a:hover, .site-footer .linklike:hover { text-decoration: underline; }
.footer-grid { display: grid; gap: var(--s5); }
.footer-brand svg { width: 56px; color: var(--cream); margin-bottom: var(--s3); }
.footer-brand p { color: var(--sage); max-width: 22em; }
.biz { font-style: normal; display: grid; gap: 6px; }
.footer-niches { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); margin-top: var(--s5); color: var(--sage); font-size: var(--fs-14); }
.footer-niches a { color: var(--cream); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); margin-top: var(--s6); color: var(--sage); font-size: var(--fs-14); }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: start; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ---------- פס וואטסאפ בנייד ---------- */
.mobile-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--cream-2); transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease-ui), visibility 0s .3s; }
.mobile-bar .btn { width: 100%; }
.mobile-bar.is-on { transform: none; visibility: visible; transition: transform .3s var(--ease-ui), visibility 0s; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* ---------- עוגיות ---------- */
.consent { position: fixed; z-index: 100; inset-inline: 10px; bottom: 10px; max-width: 460px; background: var(--white); color: var(--ink); border: 2px solid var(--green); padding: 10px 12px 12px; box-shadow: var(--shadow); }
.consent h2, .consent-title { font-size: var(--fs-14); margin-bottom: 1px; }
.consent p { font-size: var(--fs-13); line-height: 1.4; color: var(--muted); }
.consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: 8px; }
.consent .btn { min-height: 44px; padding: 0 12px; }
.consent .btn--reject { background: var(--white); color: var(--green); }
.consent .btn--reject::before { background: var(--cream-2); }
.consent .long { display: none; }
@media (min-width: 768px) { .consent { inset-inline: auto; inset-inline-start: 24px; bottom: 24px; padding: var(--s4); } .consent h2 { font-size: var(--fs-18); } .consent .long { display: inline; } }

/* ---------- עמודי חבילה ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: var(--fs-14); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--line-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--link); }
.p-hero { padding-block: var(--s2) var(--s6); }
.p-hero-grid { display: grid; gap: var(--s5); align-items: center; }
.p-hero .lead { margin-top: var(--s4); }
.price-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); margin-top: var(--s5); padding: var(--s4); background: var(--white); }
.price-line .price { font-size: var(--fs-56); }
.price-line .lbl { display: block; font-size: var(--fs-14); color: var(--muted); margin-bottom: 6px; }
.price-line .days { font-size: var(--fs-21); font-weight: 700; color: var(--green); line-height: 1.2; }
.p-note { margin-top: var(--s3); font-size: var(--fs-14); color: var(--muted); max-width: 40em; }
.p-hero .actions { margin-top: var(--s5); }
.p-visual { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--cream-2); }
.p-visual--green { background: var(--green); }
.p-visual--sage { background: #D6E0D9; }
.p-visual .chip { position: absolute; bottom: 0; inset-inline: 0; z-index: 5; }
.p-visual .cap { position: absolute; bottom: var(--s3); inset-inline-end: var(--s3); z-index: 5; font-size: var(--fs-14); background: var(--cream); color: var(--green); padding: 2px 10px; font-weight: 500; }
.p-visual .layer { position: absolute; inset: 0; }
.p-visual .fan { width: 36%; bottom: -14%; }
.p-visual .fan:nth-child(1) { bottom: -6%; }
.p-visual .laptop { position: absolute; top: 16%; inset-inline-end: -10%; width: 96%; }
.p-visual .phone.mini { position: absolute; bottom: 7%; inset-inline-start: 7%; width: 30%; z-index: 3; }
@media (min-width: 900px) {
  .p-hero { padding-block: var(--s2) var(--s7); }
  .p-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s6); }
  .p-hero .h1 { font-size: var(--fs-56); line-height: 1.08; }
  .p-visual { aspect-ratio: 1 / 1; }
  .p-visual .laptop { top: 22%; }
}
.two-col { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--s5); } }
.box { background: var(--white); padding: var(--s4); }
.box--muted { background: var(--cream-2); }
.box h2 { margin-bottom: var(--s4); }
@media (min-width: 900px) { .box { padding: var(--s5); } }
.xlist { display: grid; gap: 10px; }
.xlist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink); }
.xlist li::before { content: ""; width: 12px; height: 2px; background: var(--muted); margin-top: .85em; }
.fit { display: grid; gap: var(--s2); }
.fit li { padding: var(--s4); background: var(--white); font-size: var(--fs-18); color: var(--ink); }
.section--alt .fit li { background: var(--cream); }
@media (min-width: 900px) {
  .fit li { font-size: var(--fs-21); }
  /* כותרת מעל, ואז שתי עמודות תוכן מאוזנות ברוחב מלא (בלי עמודה ריקה) */
  .fit-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); }
  .fit { grid-template-columns: 1fr 1fr; gap: var(--s3); }
}

/* ---------- עמודים משפטיים ---------- */
.prose { max-width: 760px; }
.prose h1 { font-size: var(--fs-40); margin-bottom: var(--s2); }
.prose h2 { font-size: var(--fs-21); margin: var(--s5) 0 var(--s2); }
.prose p, .prose ul { margin-bottom: var(--s3); }
.prose ul { list-style: disc; padding-inline-start: 1.4em; }
.prose li { margin-bottom: 6px; }
.prose .meta { color: var(--muted); font-size: var(--fs-14); }
.callout { background: var(--cream-2); border-inline-start: 6px solid var(--green); padding: var(--s3) var(--s4); margin-block: var(--s4); }
.callout p { margin: 0; }
@media (min-width: 768px) { .prose h1 { font-size: var(--fs-56); } .prose h2 { font-size: var(--fs-28); } }

/* ---------- תנועה: רק כש-site.js הדליק motion ואין העדפה להפחתה ---------- */
@media (prefers-reduced-motion: no-preference) {
  .motion .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .motion .reveal.is-in { opacity: 1; transform: none; }
  .motion .reveal-media img { transform: scale(1.08); transition: transform 1.2s var(--ease); }
  .motion .reveal-media.is-in img { transform: none; }
  [data-rate], [data-parallax] { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-delay: 0s !important; }
  .btn::before, .link-arrow::after, .nav a::after { transition: none; }
}

/* =====================================================================
   v3: הירו בשכבות, משפט שנדלק, שיא "משלד לחנות", עמודי חבילה
   ===================================================================== */

/* ---------- שורת פעולות ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }

/* ---------- קישור-חץ על רקע כהה ---------- */
.link-arrow--light { color: var(--cream); }

/* ---------- הירו: פלטה צילומית + מחשב + טלפון + טקסט, כל אחד בקצב אחר ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--green-3); color: var(--cream); }
.hero-plate { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hp-in { position: absolute; inset: -6% 0 -6%; }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* צל טקסט: רק איפה שהטקסט יושב (שכבה נפרדת, אחות של הטקסט) */
.hero-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(1, 26, 17, .86) 0%, rgba(1, 26, 17, .62) 34%, rgba(1, 26, 17, 0) 56%); }
.hero-inner { position: relative; display: grid; gap: var(--s5); padding-block: var(--s5) 0; }
.hero-title { color: var(--cream); font-size: var(--fs-40); line-height: 1.1; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-title .line > span { display: block; }
.hero-title .line + .line > span { color: var(--sage); }
.hero-lead { margin-top: var(--s4); font-size: var(--fs-18); line-height: 1.6; color: var(--cream); max-width: 32em; }
.hero .actions { margin-top: var(--s5); }
.hero-devices { position: relative; margin: 0; aspect-ratio: 10 / 8.4; }
.hd-laptop { position: absolute; z-index: 1; inset-inline-start: 4%; top: 6%; width: 92%; }
.hd-phone { position: absolute; z-index: 2; inset-inline-end: 2%; top: 30%; width: 30%; }
.hero-cap { position: absolute; inset-inline-start: 0; bottom: var(--s3); z-index: 3; font-size: var(--fs-14); color: var(--sage); }
.hero .laptop .lid, .hero .phone { box-shadow: 0 40px 60px -20px rgba(0, 10, 6, .7), 0 10px 18px -8px rgba(0, 10, 6, .5), inset 0 1px 0 rgba(255, 255, 255, .14); }
@media (min-width: 700px) {
  .hero-scrim { background: linear-gradient(to left, rgba(1, 26, 17, .78) 0%, rgba(1, 26, 17, .5) 38%, rgba(1, 26, 17, 0) 62%); }
}
@media (min-width: 900px) {
  .hero { min-height: min(calc(100svh - var(--header-h)), 900px); display: grid; }
  .hero-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--s4); padding-block: var(--s6); }
  .hero-title { font-size: var(--fs-56); line-height: 1.06; }
  .hero-lead { font-size: var(--fs-21); }
  .hero-devices { aspect-ratio: 10 / 7; align-self: center; margin-top: var(--s5); }
  .hero-devices { margin-inline-end: -6%; }
  .hd-laptop { inset-inline-start: 0; top: 0; width: 100%; }
  .hd-phone { inset-inline-end: -6%; top: 22%; width: 27%; }
  .hero-cap { bottom: auto; top: calc(100% + 4px); inset-inline-start: 4%; }
}


/* ---------- משפט שנדלק מילה אחרי מילה (שקט, טיפוגרפי) ---------- */
.why-grid { display: grid; gap: var(--s5); }
.why-statement { font-size: var(--fs-40); line-height: 1.1; }
.pillars { display: grid; gap: var(--s2); }
.pillar { display: grid; gap: var(--s2); padding: var(--s4); background: var(--cream-2); }
.pillar p { color: var(--ink); }
@media (min-width: 900px) {
  .why-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
  .why-statement { font-size: var(--fs-56); line-height: 1.08; position: sticky; top: calc(var(--header-h) + 56px); }
  .pillar { padding: var(--s5); }
}

/* ---------- שיא: משלד לחנות (מהלך החתימה) ---------- */
.peak { position: relative; isolation: isolate; background: var(--green); color: var(--cream); }
.peak h2, .peak h3 { color: var(--cream); }
.peak-drift { display: none; }
.peak-stage { padding-block: var(--s6); }
.peak-head { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.peak-title { font-size: var(--fs-40); line-height: 1.06; }
.peak-head p { color: var(--cream); max-width: 32em; }
.peak-body { display: grid; gap: var(--s5); }
.peak-device { position: relative; padding-bottom: 12%; }
.peak-device .laptop { width: 92%; margin-inline-start: auto; }
.peak-device .phone { position: absolute; inset-inline-start: 0; bottom: 0; width: 27%; z-index: 3; }
.wire { position: absolute; inset: 0; z-index: 2; background: var(--cream); opacity: 0; }
.wire svg { width: 100%; height: 100%; overflow: visible; }
.wire .g { transform-box: view-box; }
.shot { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
.shot-in { position: absolute; inset: 0; }
.shot-in img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot-edge { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 2px; background: var(--sage); opacity: 0; }
.build-steps { display: grid; gap: var(--s1); }
.build-steps li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); padding: var(--s3); background: var(--green-2); color: var(--cream); }
.build-steps li::before { content: ""; width: 12px; height: 12px; margin-top: .55em; background: var(--sage); transition: background-color .3s ease; }
.build-steps b { display: block; }
.build-steps span { color: var(--sage); font-size: var(--fs-16); }
.peak-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); }
.peak-foot small { color: var(--sage); font-size: var(--fs-14); }
@media (min-width: 900px) {
  .peak-stage { padding-block: var(--s7); }
  .peak-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: var(--s6); }
  .peak-title { font-size: var(--fs-56); }
  .peak-body { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); align-items: end; gap: var(--s6); }
  .peak-device .laptop { width: 88%; }
  .peak-device .phone { width: 21%; }
}
@media (min-width: 1200px) { .peak-title { font-size: var(--fs-72); line-height: 1.02; } }

/* ---------- עמודי חבילה: ויזואל שונה לכל עמוד ---------- */
.p-visual--paper { background: var(--cream-2); }
.tall-phone { position: absolute; width: 50%; max-width: 300px; inset-inline-start: 50%; top: 9%; transform: translateX(50%); }
.tall-phone .scr { aspect-ratio: 390 / 844; }
.tall-phone .long { position: absolute; inset: 0 0 auto; }
.tall-phone .long img { width: 100%; height: auto; object-fit: initial; }
.p-visual--room { background: #CFD8CF; }
.room { position: absolute; inset: 0; overflow: hidden; }
.room .plx { position: absolute; inset: -6% 0; }
.room img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.browser { position: absolute; top: 18%; inset-inline-end: 6%; width: 82%; background: var(--white); box-shadow: 0 30px 50px -20px rgba(2, 40, 25, .5); }
.browser .bar { display: flex; align-items: center; gap: 6px; height: 24px; padding-inline: 10px; background: var(--cream-2); }
.browser .bar i { width: 8px; height: 8px; background: var(--line-2); }
.browser .bar span { flex: 1; height: 10px; margin-inline-start: 8px; background: var(--white); max-width: 50%; }
.browser .scr { aspect-ratio: 16 / 10; overflow: hidden; }
.browser .scr img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.p-visual--room .phone.mini { bottom: 6%; inset-inline-start: 8%; width: 24%; }

/* ---------- מצב תנועה (נדלק רק מ-site.js, ורק בלי העדפה להפחתה) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* כניסת הירו מתוזמרת: פלטה, כותרת, משנה, מחשב, טלפון */
  .motion .hero-plate img { opacity: 0; transform: scale(1.04); }
  .motion .hero-title .line > span { transform: translateY(105%); }
  .motion .hero-in { opacity: 0; transform: translateY(16px); }
  .motion .hd-laptop .enter { opacity: 0; transform: translateY(60px) scale(.97); }
  .motion .hd-phone .enter { opacity: 0; transform: translateY(110px); }
  .motion.is-ready .hero-plate img { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .9s var(--ease); }
  .motion.is-ready .hero-title .line > span { transform: none; transition: transform .9s var(--ease) .15s; }
  .motion.is-ready .hero-title .line:nth-child(2) > span { transition-delay: .25s; }
  .motion.is-ready .hero-in { opacity: 1; transform: none; transition: opacity .7s var(--ease) .45s, transform .8s var(--ease) .45s; }
  .motion.is-ready .hd-laptop .enter { opacity: 1; transform: none; transition: opacity .8s var(--ease) .35s, transform .9s var(--ease) .35s; }
  .motion.is-ready .hd-phone .enter { opacity: 1; transform: none; transition: opacity .8s var(--ease) .6s, transform .9s var(--ease) .6s; }

  /* המשפט נדלק לפי הגלילה (רק opacity) */
  .motion [data-words] .w { opacity: var(--o, .55); transition: opacity .25s linear; }

  /* השיא: נדבק, מעבר צבע מקרם לירוק, שלד שנמתח, ניגוב של החנות, טלפון שעולה */
  .motion .peak { height: 300vh; }
  .motion .peak-drift { display: block; position: absolute; inset: 0; z-index: -1; background: var(--cream); opacity: var(--drift, 1); }
  .motion .peak-stage { position: sticky; top: var(--header-h); min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: var(--s5); opacity: calc(1 - var(--drift, 1)); }
  .motion .wire { opacity: var(--wire, 1); }
  .motion .wire .g { transform: scale(var(--gx, 0), 1); opacity: var(--go, 0); }
  .motion .wire .g1 { --gx: var(--g1); --go: var(--g1); transform-origin: 100% 0; }
  .motion .wire .g2 { transform: scale(1, var(--g2, 0)); opacity: var(--g2, 0); transform-origin: 50% 0; }
  .motion .wire .g3 { --gx: var(--g3); --go: var(--g3); transform-origin: 100% 100%; }
  .motion .shot { transform: translateX(calc((1 - var(--shot, 0)) * -100%)); }
  .motion .shot-in { transform: translateX(calc((1 - var(--shot, 0)) * 100%)); }
  .motion .shot-edge { opacity: calc(var(--shot, 0) * (1 - var(--shot, 0)) * 4); }
  .motion .peak-device .laptop { transform: scale(var(--lap, .94)); transform-origin: 50% 100%; }
  .motion .peak-device .phone { opacity: var(--ph, 0); transform: translateY(calc((1 - var(--ph, 0)) * 80px)); }
  .motion .build-steps li { transition: color .3s ease, background-color .3s ease; color: var(--sage); }
  .motion .build-steps li.is-on { background: var(--cream); color: var(--green); }
  .motion .build-steps li.is-on span { color: var(--green); }
  .motion .build-steps li.is-on::before { background: var(--green); }

  /* עמוד דף נחיתה: הטלפון גולל את הדף כולו */
  .motion [data-long] { transform: translateY(var(--long, 0%)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .motion .peak { height: 240vh; }
  .motion .peak-stage { padding-block: var(--s4); }
  .motion .peak-head { margin-bottom: var(--s4); }
  .motion .peak-head p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .motion .peak-body { gap: var(--s4); }
  .motion .build-steps li { padding-block: 10px; }
  .motion .build-steps span { display: none; }
  .motion .peak-foot { margin-top: var(--s3); }
  .motion .peak-foot small { display: none; }
}

/* ---------- הירו: שורת ההמשך של הכותרת ---------- */
.hero-second { margin-top: var(--s2); font-size: var(--fs-28); line-height: 1.2; font-weight: 700; color: var(--sage); }
.hero-second .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.hero-second .line > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .motion .hero-second .line > span { transform: translateY(105%); }
  .motion.is-ready .hero-second .line > span { transform: none; transition: transform .9s var(--ease) .28s; }
}

/* ---------- הסיום: כותבים את ההודעה ---------- */
.final-grid { display: grid; gap: var(--s5); align-items: center; }
.final .final-copy { display: grid; gap: var(--s3); justify-items: start; }
.composer { display: grid; gap: var(--s3); width: 100%; max-width: 560px; }
.pick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.pick legend { width: 100%; margin-bottom: var(--s2); padding: 0; font-weight: 700; color: var(--cream); font-size: var(--fs-18); }
.pick label { position: relative; display: inline-flex; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s3); background: var(--green-2); color: var(--cream); font-weight: 700; border-radius: 0; transition: background-color .18s ease, color .18s ease, transform .12s var(--ease-ui); }
.pick input:checked + span { background: var(--cream); color: var(--green); }
.pick input:focus-visible + span { outline: 3px solid var(--cream); outline-offset: 3px; }
.pick label:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .pick input:not(:checked) + span:hover { background: #1B5A3F; } }
.bubble { background: var(--cream); color: var(--ink); padding: var(--s3) var(--s4); }
.bubble p { font-size: var(--fs-16); line-height: 1.5; color: var(--ink); }
.bubble.is-new p { animation: msg-in .35s var(--ease-ui); }
@keyframes msg-in { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .final-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s7); } }

@media (max-width: 599px) {
  .hero .actions { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .hero .actions .link-arrow { align-self: flex-start; }
}

/* =====================================================================
   סבב תיקונים 2 (במאי אמנות + נגישות + בקשות איתן). גובר על הכללים שלמעלה.
   ===================================================================== */
:root { --header-h: 64px; }
@media (min-width: 768px) { :root { --header-h: 76px; } }
.site-header { top: 0; }
@media (max-width: 599px) { :root { --gutter: 16px; } }
/* גובה הבאנר נמדד ב-consent.js ונכתב ל---consent-h; 190px הוא גיבוי אם אין JS.
   המרווח בתחתית ה-body נותן לאן לגלול, אחרת קישורי הפוטר האחרונים נשארים מתחת לבאנר. */
html.consent-open { scroll-padding-bottom: calc(var(--consent-h, 190px) + 32px); }
html.consent-open body { padding-bottom: calc(var(--consent-h, 190px) + 32px); }

/* ---- טיפוגרפיה: כותרת ראשית אחת גדולה בבירור, כותרות אזור קטנות ממנה ---- */
.hero-title { font-size: 3rem; line-height: 1.02; text-wrap: balance; }
@media (min-width: 700px) { .hero-title { font-size: 4rem; } }
@media (min-width: 1200px) { .hero-title { font-size: 5.5rem; line-height: .98; } }
.h2--xl, .why-statement, .peak-title, .final h2 { text-wrap: balance; }
@media (min-width: 1200px) { .peak-title { font-size: var(--fs-56); line-height: 1.06; } }
@media (min-width: 900px) { .final h2 { font-size: var(--fs-56); } }

/* ---- הירו: מוקאפ כ-60% מהרוחב במחשב, ובמסך הראשון בנייד ---- */
.hero-inner { padding-block: var(--s4) 0; gap: var(--s4); }
.hero-lead { margin-top: var(--s3); font-size: var(--fs-16); }
.hero .actions { margin-top: var(--s4); }
.hero-devices { aspect-ratio: 10 / 7.2; }
.hd-laptop { inset-inline-start: 2%; top: 4%; width: 86%; }
.hd-phone { inset-inline-end: 0; top: 24%; width: 28%; }
@media (max-width: 599px) {
  .hero .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
  .hero .actions .btn { flex: 1 1 100%; }
}
@media (min-width: 700px) { .hero-lead { font-size: var(--fs-18); } }
@media (min-width: 900px) {
  .hero { min-height: min(calc(100svh - var(--header-h)), 860px); }
  .hero-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); padding-block: var(--s6); gap: var(--s5); }
  .hero-lead { font-size: var(--fs-21); max-width: 24em; }
  .hero .actions { margin-top: var(--s5); }
  .hero-devices { margin: 0; margin-inline-end: -4%; aspect-ratio: 10 / 7.4; align-self: center; }
  .hd-laptop { inset-inline-start: 0; top: 2%; width: 92%; }
  .hd-phone { inset-inline-end: -2%; top: 26%; width: 25%; }
}

/* ---- "שלושה דברים": משפט ושלוש כרטיסים (בלי קווים דקים, הפרדה ברווח ובגוון) ---- */
.why-grid { grid-template-columns: 1fr !important; gap: var(--s5); }
.why-statement { position: static !important; max-width: 16ch; }
.pillars { gap: var(--s3); }
.pillar { background: var(--cream-2); padding: var(--s5); border: 0; }
.pillar .h3 { font-size: var(--fs-21); }
@media (min-width: 900px) {
  .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .pillar { padding: var(--s5); border: 0; }
  .pillar + .pillar { border: 0; padding: var(--s5); }
  .pillar:first-child { padding: var(--s5); }
}
@media (prefers-reduced-motion: no-preference) { .motion [data-words] .w { opacity: var(--o, .55); } }

/* ---- השיא ---- */
.wire { background: #FFFFFF; }
.build-steps span { max-width: 24ch; display: block; }
.peak-side { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .motion .peak.is-static { height: auto; }
  .motion .peak.is-static .peak-stage { position: relative; top: 0; min-height: 0; opacity: 1; }
  .motion .peak.is-static .peak-drift { display: none; }
}

/* ---- השיא: הבמה הדבוקה נכנסת תמיד לגובה המסך (100svh - כותרת) בכל גובה לפטופ ----
   גובה הלפטופ ≈ 0.66×רוחבו (מסך 16/10 + מסגרת + בסיס). כדי שהבמה תיכנס לגובה החלון
   מגבילים את *רוחב* הלפטופ לפי הגובה הפנוי (vh), כך אין "מסלול חלופי" מקפץ בשום גובה. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .motion .peak-stage {
    height: calc(100svh - var(--header-h)) !important;
    min-height: 0 !important;
    padding-block: clamp(14px, 3.5vh, 36px);
    box-sizing: border-box;
    overflow: hidden;
    justify-content: flex-start;
  }
  .motion .peak-stage > .container { width: 100%; max-height: 100%; }
  .motion .peak-head { margin-bottom: clamp(10px, 2.2vh, 24px); }
  .motion .peak-device { padding-bottom: 0; }
  /* הגובה הפנוי למוקאפ ≈ גובה הבמה פחות הכותרת (~190px). רוחב = גובה / 0.66 */
  .motion .peak-device .laptop {
    width: min(88%, calc((100svh - var(--header-h) - 200px) / 0.66));
  }
}
/* מסך נמוך במיוחד (<=640px גובה): מקצרים עוד */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (max-height: 640px) {
  .motion .peak-device .laptop { width: min(80%, calc((100svh - var(--header-h) - 150px) / 0.66)); }
  .motion .peak-head p { font-size: var(--fs-14); max-width: 46em; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .motion .peak-title { font-size: var(--fs-28); }
  .motion .peak-device { padding-bottom: 18%; }
  .motion .peak-device .laptop { width: 96%; }
  .motion .peak-device .phone { width: 32%; }
  .motion .build-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .motion .build-steps li { grid-template-columns: 1fr; gap: 6px; padding: 10px; font-size: var(--fs-16); }
  .motion .build-steps li::before { margin-top: 0; }
}

/* ---- מה יש בכל אתר: רשת כרטיסים (בלי קווים דקים, הפרדה ברווח ובגוון) ---- */
.inc-grid { grid-template-columns: 1fr; }
.included { gap: var(--s3); }
.included li { background: var(--cream-2); padding: var(--s4); border: 0; }
.inc-phones { margin: var(--s5) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 420px; }
.inc-phones figcaption { grid-column: 1 / -1; font-size: var(--fs-14); color: var(--muted); }
@media (min-width: 900px) {
  .inc-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: start; }
  .included { grid-template-columns: 1fr 1fr; column-gap: var(--s3); row-gap: var(--s3); }
}

/* ---- מי בונה: כותרת + סמל/חתימה (מקום לתמונה אמיתית) ---- */
.about-grid { grid-template-columns: 1fr; }
.about-aside { display: grid; gap: var(--s4); }
.about-portrait { margin: 0; display: grid; gap: var(--s3); }
.about-portrait-mark { width: 100%; max-width: 300px; aspect-ratio: 1; background: var(--green); color: var(--cream); padding: 26%; box-sizing: border-box; }
.about-portrait figcaption { font-size: var(--fs-16); color: var(--muted); font-weight: 700; }
.about-quote { font-size: var(--fs-28); line-height: 1.25; font-weight: 700; color: var(--green); margin-bottom: var(--s4); max-width: 22ch; }
.about-copy > p:not(.about-quote):not(.sign) { max-width: 36em; }
.sign { display: grid; gap: 2px; margin-top: var(--s5); }
.sign b { font-size: var(--fs-21); }
.sign span { font-size: var(--fs-16); color: var(--muted); }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s7); align-items: center; }
  .about-quote { font-size: var(--fs-40); line-height: 1.15; }
  .about-portrait-mark { max-width: 340px; }
}

/* ---- שאלות נפוצות: כרטיסים (בלי קווים דקים, הפרדה ברווח ובגוון) ---- */
.faq { gap: var(--s2); border: 0; }
.faq details { background: var(--white); padding-inline: var(--s4); border: 0; }
.section--alt .faq details { background: var(--cream); }

/* ---- יעדי לחיצה ---- */
.tap { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a { min-width: 44px; justify-content: center; }
.site-footer a, .site-footer .linklike { min-height: 44px; }

/* ---- בחירת סוג העסק: מסגרת גלויה לכפתורים שלא נבחרו (1.4.11) ---- */
.pick span { border: 2px solid var(--sage); }
.pick input:checked + span { border-color: var(--cream); }

/* ---- באנר עוגיות: חלון פינה 360px, אישור ודחייה זהים ---- */
.consent-title { font-weight: 700; color: var(--green); font-size: var(--fs-16); margin-bottom: 2px; }
.consent p { color: var(--ink); }
.consent .btn--reject { background: var(--green); color: var(--cream); }
.consent .btn--reject::before { background: var(--green-2); }
@media (min-width: 768px) { .consent { max-width: 360px; padding: var(--s3) var(--s4) var(--s4); } .consent .long { display: none; } }

/* ---- פס וואטסאפ: רק בטלפון ---- */
@media (min-width: 700px) { .mobile-bar { display: none !important; } }

/* ---- עמודי חבילה: מוקאפ רחב בראש העמוד ---- */
.p-hero-grid { align-items: start; }
.p-visual { aspect-ratio: 4 / 5; }
.p-visual--paper { aspect-ratio: 4 / 4.6; }
.tall-phone { width: 54%; top: 5%; }
.p-visual--green .browser--wide { top: 7%; inset-inline-end: 5%; width: 86%; }
.browser .scr--long { position: relative; aspect-ratio: 16 / 13; overflow: hidden; }
.browser .scr--long .long { position: absolute; inset: 0 0 auto; }
.browser .scr--long .long img { width: 100%; height: auto; object-fit: initial; }
.p-visual--green .phone.mini { position: absolute; z-index: 3; bottom: 9%; inset-inline-start: 5%; width: 26%; }
.p-visual--room .browser { top: 12%; width: 86%; }
@media (min-width: 900px) {
  .p-hero-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s6); }
  .p-visual, .p-visual--paper { aspect-ratio: auto; height: min(72vh, 680px); }
  .tall-phone { width: auto; height: 90%; top: 5%; aspect-ratio: 390 / 844; }
  .p-visual--green .browser--wide { width: 80%; }
  .browser .scr--long { aspect-ratio: 16 / 10; }
}
@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr; align-items: start; row-gap: 0; padding-block: var(--s5) var(--s5); }
  .hero-copy { display: contents; }
  .hero-title { grid-column: 1 / -1; grid-row: 1; max-width: 15ch; }
  .hero-lead { grid-column: 1; grid-row: 2; margin-top: var(--s5); }
  .hero .actions { grid-column: 1; grid-row: 3; align-self: start; }
  .hero-devices { grid-column: 2; grid-row: 2 / 4; margin-top: var(--s4); }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s4); }
  .footer-brand, .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
}

/* ---- סבב תנועה: כפתור ההירו גלוי מיד, זמנים קצרים יותר, גילוי נאות תמיד גלוי ---- */
html { scroll-padding-bottom: 24px; }
@media (max-width: 699px) { html { scroll-padding-bottom: 96px; } }
@media (prefers-reduced-motion: no-preference) {
  .motion .hero .actions { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion.is-ready .hero-title .line > span { transition: transform .6s var(--ease) .1s; }
  .motion.is-ready .hero-lead { transition: opacity .45s var(--ease) .25s, transform .5s var(--ease) .25s; }
  .motion.is-ready .hero-plate img { transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
  .motion.is-ready .hd-laptop .enter { transition: opacity .5s var(--ease) .2s, transform .6s var(--ease) .2s; }
  .motion.is-ready .hd-phone .enter { transition: opacity .5s var(--ease) .32s, transform .6s var(--ease) .32s; }
  .motion .reveal { transition: opacity .45s var(--ease), transform .5s var(--ease); transition-delay: calc(min(var(--i, 0), 3) * 60ms); }
  .motion .reveal-media img { transition: transform .8s var(--ease); }
  .motion .peak.is-near .peak-device .laptop, .motion .peak.is-near .peak-device .phone, .motion .peak.is-near .shot, .motion .peak.is-near .shot-in { will-change: transform, opacity; }
  .faq details[open] .answer { animation: ans-in .22s var(--ease-ui); }
  @keyframes ans-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .motion .peak-head p { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .motion .build-steps span { display: block; font-size: var(--fs-14); }
  .motion .peak-foot small { display: block; }
  .motion .peak.is-static .peak-stage { padding-bottom: 96px; }
}
.motion .peak.is-static { height: auto !important; }
.motion .peak.is-static .peak-stage { position: relative !important; top: 0; min-height: 0; opacity: 1 !important; }
.motion .peak.is-static .peak-drift { display: none !important; }
@media (prefers-reduced-motion: reduce) { .plan:hover { transform: none !important; } .plan:hover .plan-visual .inner { transform: none !important; } }
.html-still .plan:hover { transform: none; }

/* ---- קומפוזיציית מובייל: קצרה, ישירה וללא גלילה נעולה ---- */
@media (max-width: 699px) {
  .section, .section--big { padding-block: 52px; }
  .sec-head { gap: 12px; margin-bottom: 28px; }
  .h2--xl, .why-statement, .peak-title, .final h2 { font-size: 2rem; line-height: 1.08; }

  .hero-inner { gap: 20px; padding-block: 26px 0; }
  .hero-title { max-width: 11ch; font-size: 2.25rem; line-height: 1.04; }
  .hero-lead { max-width: 34ch; margin-top: 16px; line-height: 1.55; }
  .hero .actions { margin-top: 20px; }
  .hero .actions .btn { min-height: 50px; }
  /* מחזירים את קומפוזיציית השעון המקורית בכניסה. */
  .hero-devices { aspect-ratio: 10 / 8.4; }
  .hd-laptop { inset-inline-start: 4%; top: 6%; width: 92%; }
  .hd-phone { inset-inline-end: 2%; top: 30%; width: 30%; }

  .home-packages { padding-top: 52px; }
  .plans { gap: 16px; }
  .plan-visual { aspect-ratio: 16 / 8.7; }
  .plan-body { gap: 12px; padding: 20px; }
  .plan .price { font-size: 2.25rem; }
  .plan-days small { margin-top: 4px; line-height: 1.45; }
  .plan-actions { padding: 0 20px 20px; }
  .plan-links { gap: 0 16px; }
  .plans-note { margin-top: 20px; }

  .why-grid { gap: 24px; }
  .why-statement { max-width: 12ch; }
  .pillars { gap: 8px; }
  .pillar { padding: 18px; background: var(--cream-2); border: 0; }

  .motion .peak { height: auto !important; }
  .motion .peak-stage { position: relative !important; top: 0; min-height: 0; padding-block: 52px !important; opacity: 1 !important; }
  .motion .peak-drift, .motion .wire { display: none !important; }
  .motion .shot, .motion .shot-in { transform: none !important; }
  .motion .peak-device .laptop, .motion .peak-device .phone { transform: none !important; opacity: 1 !important; }
  .peak-head { margin-bottom: 24px; }
  .peak-body { gap: 24px; }
  .peak-device { padding-bottom: 14%; }
  .build-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .build-steps li { grid-template-columns: 1fr; gap: 6px; padding: 10px; }
  .build-steps li::before { margin-top: 0; }
  .build-steps span, .peak-foot small { display: none !important; }

  .how-grid { gap: 24px; }
  .step { grid-template-columns: 36px 1fr; gap: 12px; padding-block: 16px; }
  .steps .rail { inset-inline-start: 15px; top: 20px; bottom: 20px; width: 5px; }
  .step .node { width: 18px; height: 18px; margin-top: 6px; }

  .inc-grid { gap: 24px; }
  .inc-phones { display: none; }
  .included { gap: 8px; }
  .included li { padding: 16px; background: var(--cream-2); border: 0; }

  .about-quote { font-size: 1.5rem; }
  .faq-layout .sec-head { margin-bottom: 20px; }
  .final { padding-block: 56px calc(56px + env(safe-area-inset-bottom, 0px)); }
  .final-grid { gap: 28px; }
  .pick { display: grid; grid-template-columns: 1fr 1fr; }
  .pick label, .pick span { width: 100%; }
  .pick span { justify-content: center; text-align: center; padding-inline: 10px; }
  .bubble { padding: 14px 16px; }
}

/* ---- כפתור נגישות ---- */
.a11y-btn { position: fixed; z-index: 90; inset-inline-end: 16px; bottom: 16px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 2px solid var(--cream); border-radius: 0; background: var(--green); color: var(--cream); cursor: pointer; transition: transform .12s var(--ease-ui); }
.a11y-btn svg { width: 26px; height: 26px; }
.a11y-btn:active { transform: scale(.97); }
.a11y-btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
@media (max-width: 699px) { .a11y-btn { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }
html.consent-open .a11y-btn { visibility: hidden; }
.a11y-panel { position: fixed; z-index: 91; inset-inline-end: 16px; bottom: 72px; width: min(320px, calc(100vw - 32px)); max-height: calc(100svh - 160px); overflow: auto; display: grid; gap: 6px; padding: var(--s3); background: var(--white); color: var(--ink); border: 2px solid var(--green); box-shadow: 0 20px 40px -16px rgba(2, 40, 25, .45); }
@media (max-width: 699px) { .a11y-panel { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); } }
.a11y-panel[hidden] { display: none !important; }
.a11y-title { font-weight: 700; color: var(--green); font-size: var(--fs-18); margin-bottom: 4px; }
.a11y-panel button, .a11y-link { min-height: 44px; padding: 0 12px; border: 2px solid var(--green); border-radius: 0; background: var(--white); color: var(--green); font: inherit; font-weight: 700; font-size: var(--fs-16); text-align: start; cursor: pointer; display: flex; align-items: center; text-decoration: none; }
.a11y-panel button[aria-pressed="true"] { background: var(--green); color: var(--cream); }
.a11y-panel button:focus-visible, .a11y-link:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.a11y-size { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.a11y-size button { justify-content: center; text-align: center; }
.a11y-reset { justify-content: center; background: var(--cream-2) !important; }
.a11y-link { border: 0; text-decoration: underline; padding: 0 4px; }
/* מצבי נגישות */
html.a11y-contrast { --cream: #FFFFFF; --cream-2: #FFFFFF; --ink: #000000; --muted: #000000; --link: #00261A; --sage: #FFFFFF; --line-2: #000000; }
html.a11y-contrast body { background: #FFFFFF; }
html.a11y-contrast .hero-scrim { background: rgba(0, 0, 0, .82); }
html.a11y-gray main, html.a11y-gray .site-header, html.a11y-gray .site-footer { filter: grayscale(1); }
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; outline: 2px dashed currentColor; outline-offset: 2px; }
html.a11y-font body, html.a11y-font button, html.a11y-font input { font-family: Arial, "Heebo", sans-serif !important; letter-spacing: .02em; word-spacing: .06em; line-height: 1.8; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M3 2l7 19 2.5-7.5L20 11z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, auto !important; }

/* ---------- טיפוגרפיה v3.2: כותרות קלות ומרווחות (Heebo משתנה, בהשראת renee ו-LAPEDERA) ---------- */
h1, h2 { font-weight: 400; }
.hero-title, .h1, .p-hero .h1, .prose h1 { font-weight: 300; letter-spacing: .01em; line-height: 1.1; }
.h2, .h2--xl, .final h2 { font-weight: 400; letter-spacing: .01em; }
.h3, h3 { font-weight: 500; letter-spacing: .005em; }
.p-second { font-weight: 300; }
.lead { font-weight: 300; }
.eyebrow { font-weight: 500; letter-spacing: .02em; }
.how-count { font-weight: 300; letter-spacing: 0; }
.band-card p { font-weight: 400; }
.faq summary { font-weight: 500; }
@media (min-width: 1200px) { .h1, .hero-title { line-height: 1.06; } .final h2 { line-height: 1.06; } }

/* ---------- "מי בונה": תמונה אמיתית של איתן (רחבה, בלי חיתוך) ---------- */
.about-wide { grid-column: 1 / -1; margin-inline: auto; width: 100%; max-width: 1000px; }
.about-portrait-img { display: block; width: 100%; }
.about-portrait-img img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; }
.about-wide figcaption { text-align: start; }