/* =========================================================
   יניב ואורי · "כתוביות פתיחה"
   השראה: פתיח הסרט Catch Me If You Can (Kuntzel + Deygas) – בלי הצבעים שלו.
   משטח צבע אחד וקו אופק שחור, קווים אנכיים דקים שעוברים דרך האותיות,
   דמויות קטנות "מוחתמות" שהולכות על האופק, והרבה מקום ריק.
   הצבעים: נייר קרם, דיו שחור ואדום הלוגו. החיתוך שחור/נייר נשאר מהגרסה הקודמת.
   הפונט: Plinko של פונטשוק (רישיון ל־3 אתרים בחודש, רשום ב־fonts/USAGE-LOG.md בסקיל העיצוב).
   פונט אחד לכל האתר: כותרות, טקסט רץ, וגם האזורים שהיו בסריף (--serif).
   קובץ משתנה אחד למשקלים 100 עד 800, וקובץ Black למשקל 900. יש בו לטינית, גרש וגרשיים ו־₪, ו־Heebo נשאר רק כגיבוי.
   החליף את FUP Hatzor ו־Frank Ruhl Libre (28.10.2026). קובצי Hatzor הוסרו מהאתר (11.11.2026), כי הרישיון שלהם הוא לשולחן עבודה בלבד.
   ========================================================= */
@font-face { font-family: "Plinko"; src: url("../fonts/plinko-vf.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Plinko"; src: url("../fonts/plinko-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
/* Atletico (פונטשוק): לכותרות בלבד. צר ודחוס כמו כרזה, ולכן הכותרות יכולות להיות גדולות יותר */
@font-face { font-family: "Kissufim"; src: url("../fonts/kissufim-medium.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Atletico"; src: url("../fonts/atletico-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atletico"; src: url("../fonts/atletico-bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Heebo"; src: url("../fonts/heebo-hebrew-wght.woff2") format("woff2"); font-weight: 100 900; 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-wght.woff2") format("woff2"); font-weight: 100 900; 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 {
  --paper: #F2ECE0;
  --ink: #141210;
  --mustard: #E9A521;
  --teal: #2B5D58;
  --grey: #5C564D;
  --grey-ink: #B3ADA3;
  --red: #FF0F0F;
  --red-btn: #C40C0C; /* כהה מעט מ-#E00F0F כדי לעבור ניגודיות 4.5:1 עם טקסט בצבע נייר (ת"י 5568) */
  --red-ink: #C80E0E;
  --red-soft: #FF5A5A;

  --f: "Plinko", "Heebo", system-ui, "Segoe UI", Arial, sans-serif;
  --fd: "Atletico", "Plinko", "Heebo", system-ui, sans-serif;
  --serif: var(--f);
  --pad: clamp(18px, 4.6vw, 80px);
  --max: 1360px;
  --sec: clamp(120px, 14vw, 230px);
  --top-h: 74px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --snap: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font: 400 20px/1.7 var(--f); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* גרעין של סרט, כמו באתר השני של העסק: רעש שמהבהב קצת על כל המסך */
body::after { content: ""; position: fixed; inset: -50%; z-index: 95; pointer-events: none; opacity: .07; animation: grain .9s steps(5, end) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0%, 100% { transform: translate(0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 3px solid #141210; outline-offset: 3px; box-shadow: 0 0 0 6px #FFF8EE; } /* דו-גוני: נראה על כל רקע, גם על כרטיס אדום או טיל */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 12px; right: 12px; z-index: 200; padding: 10px 18px; background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transform: translateY(-180%); transition: transform .2s; }
.skip:focus { transform: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.sec { position: relative; padding-block: var(--sec); }
/* שני אזורים בהירים ברצף: בלי ריווח כפול ביניהם */
.sec:not(.ink) + .sec:not(.ink) { padding-top: calc(var(--sec) * .5); }
.ink { background: var(--ink); color: var(--paper); }
section.ink { z-index: 2; box-shadow: 0 0 70px -20px rgb(0 0 0 / .5); }
.red { background: var(--red-btn); color: #FFF8EE; }
.mustard { background: var(--mustard); color: var(--ink); }
.mustard .credit { color: var(--ink); }

/* ---------- טיפוגרפיה: כמו כתוביות של סרט ---------- */
.credit { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--grey); }
.credit::before { content: ""; width: 2px; height: 1.3em; background: currentColor; }
.ink .credit { color: var(--grey-ink); }
.red .credit { color: #FFF1E6; }
.title { margin-top: clamp(24px, 2.6vw, 40px); font-family: var(--fd); font-weight: 700; font-size: clamp(50px, 6.8vw, 124px); line-height: 1; letter-spacing: 0; text-wrap: balance; max-width: 18ch; }
.lead { margin-top: 22px; max-width: 46ch; font-size: clamp(19px, 1.45vw, 23px); line-height: 1.65; color: var(--grey); }
.ink .lead { color: var(--grey-ink); }
.red .lead { color: #FFF1E6; }
.lead + .lead { margin-top: 12px; }
/* כותרת של אזור: במרכז, כמו כרזה. הטקסט הארוך בתוך האזור נשאר מיושר לימין */
.head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(60px, 7.5vw, 120px); }
.head .title, .head .lead { margin-inline: auto; }

/* קווים שיוצאים מהאותיות: רק בפתיחה (main.js מוצא את הקווים הישרים בכותרת עם data-lines).
   קו לא עובר אף פעם דרך טקסט */
.ln { position: absolute; z-index: 1; display: block; background: currentColor; pointer-events: none; }
.ln--up { transform-origin: 50% 100%; }
.ln--down { transform-origin: 50% 0; }
.js .ln { transform: scaleY(0); transition: transform 1.1s var(--snap); }
.js .ln.is-on { transform: none; }

/* הכותרת נחשפת מימין לשמאל אחרי שהקו נוחת */
.slits { display: inline-block; }
.slits > span { display: block; }
.js .slits > span { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--snap) .35s; }
.js .is-in .slits > span, .js .slits.is-in > span { clip-path: inset(-20% -5% -20% -5%); }

/* הסריף רק בגודל קריאה: פסקאות פתיחה, המשפט שמתחת לציטוט, כותרות של כרטיסים והטקסט של השלבים.
   כל הטקסט הגדול בסאנס, וממנו יוצאים הקווים */
.lead, .reveal-q p, .cap__h, .form__h, .partner h3, .scene__h, .prose h2, .front .lead { font-family: var(--serif); }
.lead { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.6; }

/* ---------- כפתורים וקישורים ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 54px; padding: .7em 1.6em; border: 0; background: var(--ink); color: var(--paper); font: 700 18px/1.2 var(--f); text-decoration: none; cursor: pointer; }
.btn::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--red-btn); transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--snap); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn--red { background: var(--red-btn); color: #FFF8EE; }
.btn--red::before { background: var(--ink); }
.ink .btn { background: var(--paper); color: var(--ink); }
.ink .btn:hover, .ink .btn:focus-visible { color: #FFF8EE; }
.btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(-4px); }
.link { display: inline-flex; align-items: center; gap: .45em; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: 3px; }
.link svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.link:hover svg { transform: translateX(-5px); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- כותרת עליונה ---------- */
.top { position: sticky; z-index: 80; top: 0; background: var(--paper); border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 var(--paper), 0 5px 0 var(--ink); } /* קו כפול, כמו ראש של עיתון ישן */
.top__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--top-h); }
.top__nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.top__nav a { position: relative; display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--fd); font-size: 21px; font-weight: 700; text-decoration: none; padding-block: 6px; }
.top__no { font-family: var(--f); font-size: 11px; font-weight: 800; color: var(--red-btn); letter-spacing: .04em; }
.top__nav a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--snap); }
.top__nav a:hover::after, .top__nav a[aria-current="page"]::after { transform: scaleX(1); }
.brand { display: block; text-decoration: none; color: var(--ink); }
.brand svg { width: 100px; height: auto; }
.top__end { justify-self: end; }
.top__end .btn { min-height: 42px; padding: .45em 1.1em; font-size: 15px; box-shadow: 3px 3px 0 var(--red-btn); transform: rotate(-2deg); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.top__end .btn:hover, .top__end .btn:focus-visible { transform: rotate(0) translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink), 0 0 0 0 transparent; }
.top__menu { display: none; }
@media (max-width: 860px) {
  :root { --top-h: 62px; }
  .top__nav { display: none; }
  .brand svg { width: 82px; }
  .top__menu { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); font-family: var(--fd); font-weight: 700; font-size: 19px; cursor: pointer; }
  .top__menu:active { transform: rotate(0) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .top__menu i { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 var(--red-btn); }
  .top__end .btn { min-height: 40px; padding: .4em .9em; font-size: 14px; }
}
.menu { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; padding: 22px var(--pad) 40px; background: var(--ink); color: var(--paper); clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--snap), visibility 0s .55s; visibility: hidden; }
.menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .55s var(--snap); }
/* התפריט הפתוח: כמו תוכנייה של קולנוע ישן. מספרים, שמות גדולים ב-Atletico, החץ מהלוגו והדמויות על האופק */
.menu__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 3px solid var(--paper); box-shadow: 0 3px 0 var(--ink), 0 5px 0 var(--paper); }
.menu__kick { font-family: var(--fd); font-weight: 700; font-size: 26px; color: var(--mustard); }
.menu__close { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 2.5px solid var(--paper); background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--red-btn); transform: rotate(6deg); font-size: 20px; font-weight: 800; cursor: pointer; }
.menu ol { margin-top: 26px; display: grid; gap: 2px; }
.menu a { display: flex; align-items: center; gap: 14px; padding-block: 10px; border-bottom: 2px dashed #3A3631; font-family: var(--fd); font-weight: 700; font-size: clamp(42px, 12vw, 68px); line-height: 1.05; text-decoration: none; }
.menu__no { flex: none; width: 2.2em; font-family: var(--f); font-size: 15px; font-weight: 800; color: var(--mustard); letter-spacing: .04em; }
.menu__arrow { width: 22px; height: auto; margin-inline-start: auto; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.menu a:hover .menu__arrow, .menu a:focus-visible .menu__arrow, .menu a[aria-current="page"] .menu__arrow { opacity: 1; transform: none; }
.menu li { opacity: 0; transform: translateY(18px); transition: opacity .3s, transform .5s var(--snap); }
.menu.is-open li { opacity: 1; transform: none; transition-delay: calc(.18s + var(--i) * .06s); }
.menu .street { color: var(--paper); }
.menu__foot { margin-top: auto; padding-bottom: 76px; color: var(--grey-ink); font-size: 15px; }

.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s var(--ease); transition-delay: calc(var(--i, 0) * .09s); }
.js .rv.is-in { opacity: 1; transform: none; }

/* =========================================================
   דמויות "מוחתמות": הולכות בצעדים קופצניים, כמו באנימציה מצוירת
   ========================================================= */
.stamp { filter: url(#stamp); }
.walker { position: absolute; left: 0; bottom: var(--y, 0); width: var(--w, 22px); height: auto; color: inherit; will-change: transform; }
.walker svg { width: 100%; height: auto; overflow: visible; }
.walker { filter: url(#stamp-soft); } /* grain in screen pixels: fine on small figures */
.leg { transform-box: fill-box; transform-origin: 50% 0; }
.js .walker .leg-a { animation: stride .56s steps(1) infinite; }
.js .walker .leg-b { animation: stride .56s steps(1) infinite reverse; }
@keyframes stride { 0% { transform: rotate(13deg); } 50% { transform: rotate(-13deg); } }
.walker--back svg { transform: scaleX(-1); }
.js .walker--loop { animation: walk var(--t, 30s) linear var(--d, 0s) infinite; }
.js .walker--loop.walker--back { animation-name: walk-back; }
/* דמויות עם אופי (main.js): הן זזות לבד, והרגליים זזות רק כשהן הולכות או מטפסות */
.js .walker.doll { animation: none; }
.js .walker.doll:not(.is-walking) .leg { animation: none; }
.js .walker.doll.is-climbing .leg-a { animation-duration: .3s; }
.js .walker.doll.is-climbing .leg-b { animation-duration: .3s; }
@keyframes walk { from { transform: translateX(var(--from, -10vw)); } to { transform: translateX(var(--to, 110vw)); } }
@keyframes walk-back { from { transform: translateX(var(--to, 110vw)); } to { transform: translateX(var(--from, -10vw)); } }


/* =========================================================
   Hero · פוסטר אחד: הלוגו המקורי על החיתוך
   חצי דיו וחצי נייר מלמעלה עד למטה. הלוגו באמצע, על התפר, והקווים הם המשך של הקווים הישרים
   באותיות שלו: עולים מ־YANIV עד למעלה ויורדים מ־URI עד קו האופק שבתחתית. הכותרת והכפתורים
   מימין ללוגו על הנייר, העובדות משמאל לו על הדיו, והדמויות הולכות על האופק.
   ========================================================= */
.hero { --hz: 6px; --lw: clamp(320px, 38vw, 760px); --s: .5316; --gap: clamp(32px, 3.4vw, 64px); position: relative; background: var(--paper); }
.hero__poster { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - var(--top-h)); background: var(--paper); }
.hero__poster::before { content: ""; position: absolute; z-index: -1; inset: 0 50% 0 0; background: var(--ink); }
.js .hero__poster::before { animation: ink-in 1s var(--snap) both; }
@keyframes ink-in { from { transform: translateX(-100%); } to { transform: none; } }
.hero__sky { grid-area: 1 / 1 / 2 / 3; position: relative; overflow: hidden; }
.hero__sky::after { content: ""; position: absolute; z-index: 2; inset-inline: 0; bottom: 0; height: var(--hz); background: linear-gradient(to left, var(--ink) 50%, var(--paper) 50%); }
.js .hero__sky::after { animation: horizon 1s var(--snap) .2s both; }
@keyframes horizon { from { transform: scaleX(0); } to { transform: none; } }
.hero__logo { position: absolute; z-index: 1; top: 46%; left: calc(50% - var(--lw) * var(--s)); width: var(--lw); aspect-ratio: 1599 / 643; translate: 0 -50%; will-change: transform;
  transform: translate3d(0, calc(var(--hy, 0) * 1px), 0) perspective(1300px) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)); }
.hl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hl--paper { color: var(--ink); clip-path: inset(-100vh 0 -100vh var(--seam)); }
.hl--ink { color: var(--paper); clip-path: inset(-100vh calc(100% - var(--seam)) -100vh 0); }
.stem { transform-box: fill-box; }
.stem--up { transform-origin: 50% 100%; }
.stem--down { transform-origin: 50% 0; }
.hl__amp { transform-box: fill-box; transform-origin: 50% 100%; }
.js .hl > g > path { animation: logo-in .9s var(--ease) .35s both; }
.js .hl__amp { animation: amp-up 1s cubic-bezier(.3, 1.35, .5, 1) .75s both; }
.js .stem { animation: stem 1.3s var(--snap) var(--d, 1s) both; }
@keyframes logo-in { from { opacity: 0; transform: translateY(5%); } to { opacity: 1; transform: none; } }
@keyframes amp-up { from { opacity: 0; transform: translateY(14%) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes stem { from { transform: scaleY(0); } to { transform: none; } }
/* בפינה של הנייר, מעל האופק: שורה אחת וכפתור. כל השאר באתר */
/* משפט המפתח מתחת ללוגו, על כל הרוחב. הצבע מתהפך על התפר כמו בלוגו */
.hero__poster { grid-template-rows: 1fr auto auto; }
.hero__title { grid-column: 1 / 3; position: relative; z-index: 1; padding: clamp(18px, 2.2vw, 36px) var(--pad) 0; background: linear-gradient(to left, var(--paper) 50%, var(--ink) 50%); }
.ht { position: relative; }
.ht__layer { margin: 0; font-family: var(--fd); font-weight: 700; font-size: clamp(52px, 7.6vw, 170px); line-height: .95; letter-spacing: 0; text-align: center; }
.ht__l { display: inline; }
.ht__layer em { font-style: normal; color: var(--red); }
.ht__layer--paper { color: var(--ink); clip-path: inset(-50vh 0 -50vh 50%); }
.ht__layer--ink { position: absolute; inset: 0; color: var(--paper); clip-path: inset(-50vh 50% -50vh 0); }
.js .ht__layer { animation: fade-up 1s var(--ease) 1.2s both; }
.hero__copy { grid-area: 3 / 1; position: relative; z-index: 2; padding: clamp(16px, 1.8vw, 28px) var(--pad) clamp(28px, 3vw, 48px) var(--gap); color: var(--ink); }
.hero__copy h1 { margin-top: 22px; max-width: 9ch; font-weight: 900; font-size: clamp(40px, 3.9vw, 72px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.hero__copy h1 em { font-style: normal; color: var(--red-btn); }
.hero__copy .ctas { margin-top: 28px; }
.js .hero__copy > * { animation: fade-up .9s var(--ease) 1.5s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* הדמויות הולכות על האופק: שכבה אחת בשחור על צד הנייר, ושכבה זהה בקרם על צד הדיו */
.crowd { position: absolute; z-index: 2; inset-inline: 0; bottom: var(--hz); height: 70px; pointer-events: none; }
.crowd--paper { clip-path: inset(0 0 0 50%); color: var(--ink); }
.crowd--ink { clip-path: inset(0 50% 0 0); color: var(--paper); }
/* מסך צר: הלוגו בשמיים, והכותרת והעובדות מתחת לאופק */
/* =========================================================
   הפתיחה: הטלפון שמתחיל לצלצל
   הסצנה על האדום של החץ: בגלילה נכנסים לחץ שב־&, והאדום שלו הוא הרקע כאן. בלי JS או עם תנועה מופחתת:
   אחרי הפוסטר, הטלפון מצלצל והכרטיס לידו, על אדום. במצב רגיל: האזור נעצר, והגלילה מניעה הכל
   (main.js מעמיד את הטלפון, הכרטיסים והכרטיס)
   ========================================================= */
.cast { filter: drop-shadow(5px 7px 0 rgb(20 18 16 / .16)); user-select: none; -webkit-user-drag: none; }
.ring { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 110px); padding: clamp(70px, 8vw, 130px) var(--pad); background: var(--red); }
.ring__card { display: none; --bg: var(--paper); --fg: var(--ink); --tilt: -1.6deg; }
/* הטלפון: גוף נייר עם קו דיו וצל דיו, כמו המסגרות של הפרויקטים */
.ring__phone { grid-column: 2; grid-row: 1; justify-self: center; position: relative; width: min(290px, 70%); aspect-ratio: 49 / 100; container-type: inline-size; }
.ring__body { position: absolute; inset: 0; padding: 10cqw 4.5cqw 4.5cqw; border: 4px solid var(--ink); border-radius: 13cqw; background: var(--paper); box-shadow: 12px 12px 0 var(--ink); }
.ring__body::before { content: ""; position: absolute; top: 4cqw; left: 50%; width: 26%; height: 2.2cqw; border-radius: 2cqw; background: var(--ink); translate: -50% 0; }
.ring__screen { position: relative; height: 100%; overflow: hidden; padding: 9cqw 5cqw; border-radius: 8cqw; background: var(--ink); color: var(--paper); text-align: center; }
.ring__day { font-size: max(11px, 4.6cqw); font-weight: 700; color: var(--grey-ink); }
.ring__clock { font-size: 21cqw; font-weight: 800; line-height: 1.05; direction: ltr; }
.ring__quiet { margin-top: 26cqw; font-size: max(12px, 5cqw); color: var(--grey-ink); transition: opacity .3s ease; }
.ring__screen.has-notes .ring__quiet { opacity: 0; }
.ring__list { position: absolute; inset: 47cqw 5cqw auto; display: grid; gap: 3cqw; text-align: start; }
.ring__note { display: grid; grid-template-columns: 8cqw 1fr; gap: 0 3cqw; align-items: center; padding: 3cqw 3.4cqw; border-radius: 4cqw; background: var(--paper); color: var(--ink); --dot: var(--ink); }
.ring__note::before { content: ""; grid-row: span 2; width: 8cqw; aspect-ratio: 1; border-radius: 2.4cqw; background: var(--dot); }
.ring__note b { font-size: max(11px, 5.2cqw); line-height: 1.2; }
.ring__note small { font-size: max(10px, 3.9cqw); line-height: 1.3; color: var(--grey); }
.ring__note--teal { --dot: var(--teal); }
.ring__note--mustard { --dot: var(--mustard); }
.ring__note--red { --dot: var(--red); }
/* שיחה נכנסת: המסך מתמלא באדום מלמטה */
.ring__call { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 24cqw 6cqw 12cqw; background: var(--red-btn); color: #FFF8EE; transform: translateY(101%); transition: transform .6s var(--snap); }
.ring.is-ringing .ring__call { transform: none; }
.ring__in { font-size: max(11px, 4.8cqw); font-weight: 700; }
.ring__caller { margin-top: 3cqw; font-size: 12.5cqw; font-weight: 900; line-height: 1.05; }
.ring__btns { display: flex; gap: 22cqw; margin-top: auto; }
.ring__btns i { width: 17cqw; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.ring__btns i + i { background: var(--paper); }
/* מצלצל: גלים בצבע נייר יוצאים מהטלפון, והוא רועד */
.ring__waves { position: absolute; inset: -5%; pointer-events: none; }
.ring__waves i { position: absolute; inset: 0; border: 4px solid var(--paper); border-radius: 16cqw; opacity: 0; }
.js .ring.is-ringing .ring__waves i { animation: ring-wave 1.8s ease-out infinite; }
.js .ring.is-ringing .ring__waves i:nth-child(2) { animation-delay: .6s; }
.js .ring.is-ringing .ring__waves i:nth-child(3) { animation-delay: 1.2s; }
@keyframes ring-wave { from { opacity: .9; transform: scale(.95); } to { opacity: 0; transform: scale(1.25); } }
.js .ring.is-ringing .ring__body { animation: ring-shake 1.8s ease-in-out infinite; }
@keyframes ring-shake { 0%, 36%, 100% { transform: none; } 4%, 12%, 20%, 28% { transform: rotate(-3deg); } 8%, 16%, 24%, 32% { transform: rotate(3deg); } }
.ring__phone.is-buzz .ring__body { animation: ring-buzz .45s linear; }
@keyframes ring-buzz { 20% { transform: translateX(-5px) rotate(-1.5deg); } 40% { transform: translateX(5px) rotate(1.5deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* הכרטיס: המשפט והכפתור, נייר על האדום */
.final { grid-column: 1; grid-row: 1; justify-self: start; max-width: 560px; padding: clamp(28px, 3vw, 46px); background: var(--paper); color: var(--ink); rotate: -1deg; box-shadow: 14px 14px 0 var(--ink); }
.final__when { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.final__h { margin-top: 10px; font-family: var(--fd); font-weight: 700; font-size: clamp(54px, 5.8vw, 110px); line-height: .98; letter-spacing: 0; }
.f-line { display: block; overflow: hidden; }
.f-line > span { display: block; }
.final__p { margin-top: 16px; max-width: 34ch; font-family: var(--serif); font-size: clamp(17px, 1.25vw, 21px); line-height: 1.55; }
.final .btn { margin-top: 22px; }
/* מצב רגיל: במה נעוצה */
.hero.is-pinned { height: 300svh; } /* שתי גלילות: הטלפון מתמלא והמשפט עולה. בשלישית ממשיכים לאזור הבא */
.hero.is-pinned .hero__stage { position: sticky; top: var(--top-h); height: calc(100svh - var(--top-h)); overflow: hidden; background: var(--paper); }
/* באייפון, כשסרגל הדפדפן מתכווץ המסך גדל מעבר לבמה (svh). מתחת לבמה רואים את הרקע של ההירו, אז בסצנה האדומה הוא אדום */
.hero.is-pinned.is-red { background: var(--red); }
.hero.is-pinned .hero__poster { position: absolute; z-index: 2; inset: 0 0 auto; min-height: calc(100svh - var(--top-h)); }
/* הכדור האדום שנפתח מראש החץ ב־&: שכבה אדומה מעל הפוסטר, ו־main.js מנגן לה עיגול (clip-path) שנפתח מהנקודה של
   ראש החץ ברגע שמתחילים לגלול. בזמן הזה הלוגו לא נוטה לכיוון העכבר, כדי שהחץ יישאר בדיוק במרכז הכדור */
.hero__ball { display: none; }
.hero.is-pinned .hero__ball { display: block; position: absolute; z-index: 3; inset: 0; background: var(--red); clip-path: circle(0 at 50% 50%); visibility: hidden; pointer-events: none; }
.hero.is-zoom .hero__logo { transform: none; }
.hero.is-pinned .hero__copy { will-change: transform, opacity; }
.hero.is-pinned .ring { position: absolute; z-index: 1; inset: 0; display: block; padding: 0; }
.hero.is-pinned .ring__phone { position: absolute; z-index: 2; left: 0; top: 0; width: 200px; will-change: transform; }
.hero.is-pinned .ring__card { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; padding: 12px 12px 0; background: var(--bg); color: var(--fg); rotate: var(--tilt); visibility: hidden; will-change: transform; }
.ring__card[data-side="l"] { --tilt: 1.6deg; }
.ring__card--teal { --bg: var(--teal); --fg: #FFF8EE; }
.ring__card--mustard { --bg: var(--mustard); }
.ring__card--red { --bg: var(--ink); --fg: #FFF8EE; }
.ring__card--paper { box-shadow: inset 0 0 0 3px var(--ink); }
.ring__label { align-self: stretch; font-size: 14px; font-weight: 800; }
.ring__who { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transform-origin: 50% 100%; }
.ring__who--flip { scale: -1 1; }
.ring__card.is-on .ring__who { opacity: 1; animation: who-in .7s cubic-bezier(.25, .9, .35, 1) both; }
@keyframes who-in { 0% { opacity: 0; transform: translateY(35%) scale(.6); } 60% { opacity: 1; transform: translateY(-5%) scale(1.04, .96); } 100% { opacity: 1; transform: none; } }
/* ההודעה עפה מהכרטיס לטלפון */
.ring__fly { position: absolute; left: calc(50% - 20px); top: calc(45% - 14px); width: 40px; height: 28px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); opacity: 0; pointer-events: none; }
.ring__card--teal .ring__fly { background: var(--teal); }
.ring__card--mustard .ring__fly { background: var(--mustard); }
.ring__card--red .ring__fly { background: var(--ink); border-color: var(--paper); }
.ring__card.is-on .ring__fly { animation: ring-fly .7s cubic-bezier(.45, 0, .6, 1) .3s both; }
@keyframes ring-fly { 0% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; } 85% { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(.8) rotate(-8deg); } 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.4); } }
.hero.is-pinned .ring__note { opacity: 0; transform: translateY(-30%) scale(.9); transition: opacity .3s ease, transform .5s var(--snap); }
.hero.is-pinned .ring__note.is-on { opacity: 1; transform: none; transition-delay: .9s; }
.hero.is-pinned .final { position: absolute; z-index: 4; left: 0; top: 0; max-width: none; visibility: hidden; will-change: clip-path; }
.hero.is-pinned .f-line > span { transform: translateY(110%); will-change: transform; }
.hero.is-pinned .f-rest { opacity: 0; will-change: transform, opacity; }
@media (max-width: 860px) {
  .ring { grid-template-columns: 1fr; gap: 48px; }
  .ring__phone { grid-column: 1; width: min(62vw, 250px); }
  .final { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .final__h { font-size: clamp(38px, 10vw, 56px); }
  .ring__label { font-size: 12px; }
  .hero.is-pinned .ring__card { padding: 8px 8px 0; }
}

/* אותן דמויות בתחתית של אזורים נוספים, על קו אופק דק */
.street { position: absolute; z-index: 1; inset-inline: 0; bottom: 0; height: 60px; overflow-x: clip; overflow-y: visible; pointer-events: none; color: var(--ink); border-bottom: 4px solid currentColor; }
.ink .street { color: var(--paper); }
.street .walker { --w: 18px; }
.front__paper .street { inset-inline: 0; }
@media (max-width: 1279px) {
  .hero { --lw: min(84vw, 600px); --skyh: min(clamp(260px, 64vw, 480px), 46svh); }
  .hero__poster { grid-template-columns: 1fr; min-height: 0; }
  .hero__poster::before { bottom: auto; height: var(--skyh); }
  .hero__sky { grid-area: auto; height: var(--skyh); }
  .hero__logo { top: 50%; }
  .hero__copy { grid-area: auto; align-self: auto; padding: clamp(16px, 4vw, 40px) var(--pad) clamp(40px, 8vw, 72px); }
  .hero__copy .ctas { margin-top: 18px; }
  .hero__title { padding-top: 12px; padding-bottom: 6px; }
  .hero__poster { grid-template-rows: auto auto 1fr; }
  .hero__title { grid-column: auto; }
  .ht__layer { font-size: clamp(52px, 16.5vw, 140px); line-height: .92; }
  .ht__l, .ht__w { display: block; }
  .hero__copy h1 { max-width: 12ch; font-size: clamp(40px, 9vw, 64px); }
}
.poles { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.pole { position: absolute; top: 0; left: var(--x); width: var(--wd, 6px); height: var(--h); background: var(--c); transform-origin: top; will-change: transform; }
.js .pole { animation: pole-drop 1.1s var(--snap) var(--d) both, pole-sway var(--s, 9s) ease-in-out calc(var(--d) + 1.1s) infinite alternate; }
@keyframes pole-drop { from { transform: translateY(-101%); } to { transform: none; } }
@keyframes pole-sway { from { transform: none; } to { transform: translateY(var(--m, -40px)); } }
.strip-ground { position: relative; height: 70px; overflow: hidden; background: var(--ink); color: var(--paper); }
@media (min-width: 861px) { .strip-ground { display: none; } }

.talk__paper { position: relative; }
.talk__paper > .form, .front__paper > * { position: relative; z-index: 1; }

/* =========================================================
   הפרויקטים: חפיסה של כרטיסים צבעוניים גדולים, באותה שפה של כרטיסי השירותים.
   האתר של הלקוח נגלל בדפדפן ובטלפון יחד עם הגלילה (main.js). במחשב כל כרטיס נעצר על המסך, והבא עולה
   ומכסה אותו, והקודם מתרחק ומחשיך קצת. בטלפון: הכרטיסים אחד מתחת לשני, עם טלפון אחד גדול
   ========================================================= */
.fall-sec { padding-bottom: 0; }
.works { display: grid; gap: clamp(40px, 6vw, 90px); padding-inline: var(--pad); }
.work { --bg: var(--teal); --fg: #FFF8EE; --tilt: -.7deg; }
.work--mustard { --bg: var(--mustard); --fg: var(--ink); --tilt: .7deg; }
.work--red { --bg: var(--red-btn); --fg: #FFF8EE; }
.work__card { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "head stage" "body stage"; align-content: center; column-gap: clamp(28px, 3.4vw, 64px); padding: clamp(30px, 3.6vw, 64px); background: var(--bg); color: var(--fg); rotate: var(--tilt); transform-origin: 50% 0; }
.work__card::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: calc(var(--c, 0) * .55); pointer-events: none; }
.work__head { grid-area: head; align-self: end; }
.work__body { grid-area: body; align-self: start; }
.work__tag { font-size: 15px; font-weight: 700; }
.work__name { margin-top: clamp(14px, 1.6vw, 24px); font-family: var(--fd); font-weight: 700; font-size: clamp(48px, 5.4vw, 98px); line-height: 1; letter-spacing: 0; }
.work__field { margin-top: 10px; font-size: 16px; font-weight: 600; }
.work__big { margin-top: clamp(20px, 2.2vw, 32px); padding-top: 18px; border-top: 3px solid currentColor; font-weight: 800; font-size: clamp(30px, 2.6vw, 44px); line-height: 1.1; }
.work__big small { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; }
.work__line { margin-top: 16px; max-width: 32ch; font-family: var(--serif); font-size: clamp(18px, 1.3vw, 21px); line-height: 1.55; }
.work__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.work__chips li { padding: 5px 12px 6px; border: 2px solid currentColor; font-size: 14px; font-weight: 700; }
.work__more { margin-top: 24px; }
.work .link { border-bottom-color: currentColor; }
.works__end { display: flex; justify-content: center; padding: clamp(60px, 7vw, 110px) var(--pad) var(--sec); }
/* המסגרות: דפדפן ונייד שטוחים בקו דיו עבה וצל דיו, והאיש מצביע עליהם מהפינה */
.work__stage { grid-area: stage; position: relative; min-height: clamp(380px, 38vw, 620px); }
.mock { position: absolute; background: var(--paper); }
.mock--browser { top: 4%; left: 0; width: 84%; border: 4px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); }
.mock__screen { position: relative; overflow: hidden; background: #fff; }
.mock__page { display: block; width: 100%; height: auto; will-change: transform; }
.mock__bar { display: flex; align-items: center; gap: 7px; height: 34px; padding-inline: 12px; border-bottom: 3px solid var(--ink); background: var(--paper); direction: ltr; }
.mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.mock__bar i:first-child { background: var(--red); }
.mock__bar span { flex: 1; margin-inline: 12px 30px; padding: 3px 12px; border: 2px solid var(--ink); border-radius: 20px; font: 600 12.5px/1.2 var(--f); color: var(--ink); text-align: left; }
.mock--browser .mock__screen { aspect-ratio: 16 / 10; }
.mock--phone { left: 4%; bottom: 0; width: clamp(120px, 20%, 200px); padding: 9px; border-radius: 30px; background: var(--ink); box-shadow: 10px 10px 0 rgb(20 18 16 / .3); rotate: -3deg; }
.mock--phone .mock__screen { aspect-ratio: 390 / 844; border-radius: 21px; }
.mock__notch { position: absolute; z-index: 2; top: 16px; left: 50%; width: 34%; height: 8px; border-radius: 6px; background: var(--ink); translate: -50% 0; }
.work__guy { position: absolute; z-index: 2; right: -2%; bottom: 0; width: auto; height: 62%; scale: -1 1; transform-origin: 50% 100%; }
/* כניסה: הדפדפן נכנס מהצד, הטלפון עולה, והאיש מתיישר ומצביע */
.js .work__stage .mock--browser { opacity: 0; transform: translateX(-40px); transition: opacity .7s ease .1s, transform 1s var(--snap) .1s; }
.js .work__stage .mock--phone { opacity: 0; transform: translateY(70px); transition: opacity .7s ease .4s, transform 1s cubic-bezier(.3, 1.3, .5, 1) .4s; }
.js .work__stage .work__guy { opacity: 0; transform: translateY(30px) rotate(6deg); transition: opacity .5s ease .6s, transform .9s cubic-bezier(.3, 1.4, .5, 1) .6s; }
.js .work__stage.is-in :is(.mock--browser, .mock--phone, .work__guy) { opacity: 1; transform: none; }
/* במחשב: חפיסה. כל כרטיס נעצר מתחת לכותרת העליונה, והבא עולה ומכסה אותו */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .works { display: block; }
  .js .work { position: sticky; top: calc(var(--top-h) + 2.5svh); height: calc(95svh - var(--top-h)); }
  .js .work + .work { margin-top: 150svh; }
  .js .works::after { content: ""; display: block; height: 120svh; }
  .js .work__card { height: 100%; scale: calc(1 - var(--c, 0) * .06); }
  .js .work + .work .work__card { box-shadow: 0 -24px 60px -24px rgb(0 0 0 / .7); }
  .js .work__stage { min-height: 0; height: 100%; }
}
@media (max-width: 1100px) and (min-width: 901px) { .work__name { font-size: clamp(36px, 4vw, 52px); } .work__line { font-size: 18px; } .work__chips li { font-size: 13px; } }
/* בטלפון: הכרטיסים אחד מתחת לשני. בכל אחד: השם, טלפון אחד גדול שהאתר נגלל בו, ואז המילים */
@media (max-width: 900px) {
  .works { padding-inline: 14px; }
  .work__card { grid-template-columns: 1fr; grid-template-areas: "head" "stage" "body"; padding: 26px 20px 30px; }
  .work__stage { display: flex; justify-content: center; min-height: 0; margin-top: 24px; }
  .mock--browser, .work__guy { display: none; }
  .mock--phone { position: relative; inset: auto; width: min(64vw, 280px); padding: 9px; border-radius: 34px; rotate: none; }
  .mock--phone .mock__screen { border-radius: 26px; }
  .work__name { font-size: clamp(36px, 10vw, 52px); }
}

/* =========================================================
   שירותים: כרטיסים צבעוניים עם הדמות (מהאתר השני של העסק)
   אדום, חרדל, ירוק כהה, מסגרת, דיו. כל כרטיס נוטה קצת, הדמות מתנדנדת כל הזמן וקופצת כשמרחפים
   ========================================================= */
.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 2.6vw, 40px); }
.svc { position: relative; --bg: var(--ink); --fg: var(--paper); --tilt: -1.2deg; }
.svc:nth-child(even) { --tilt: 1deg; }
.svc:nth-child(3n + 2) { margin-top: clamp(16px, 2.4vw, 40px); }
.svc--red { --bg: var(--red-btn); --fg: #FFF8EE; }
.svc--mustard { --bg: var(--mustard); --fg: var(--ink); }
.svc--teal { --bg: var(--teal); --fg: #FFF8EE; }
.svc--line { --bg: var(--paper); --fg: var(--ink); }
.svc__a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 20px clamp(20px, 2vw, 28px) 24px; background: var(--bg); color: var(--fg); text-decoration: none; transform: rotate(var(--tilt)); transition: transform .45s var(--snap), box-shadow .45s var(--snap); }
.svc--line .svc__a { box-shadow: inset 0 0 0 3px var(--ink); }
.svc__top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; }
.svc__no { direction: ltr; unicode-bidi: isolate; } /* "מחלקה 04" יחד, ולא המילה בצד אחד והמספר בצד השני */
.svc__art { display: flex; align-items: flex-end; justify-content: center; height: clamp(200px, 17vw, 270px); margin: 12px 0 20px; }
.svc__fig { display: block; height: 100%; }
.svc__fig img { display: block; height: 100%; width: auto; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.js .svc.is-in .svc__fig { animation: bob 3.2s ease-in-out calc(var(--i) * -.55s) infinite alternate; transform-origin: 50% 100%; }
@keyframes bob { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(-8px) rotate(1.6deg); } }
.svc__t { font-family: var(--fd); font-weight: 700; font-size: clamp(32px, 2.8vw, 46px); line-height: 1.05; }
.svc__d { margin-top: 10px; font-size: 16.5px; line-height: 1.55; }
.svc__go { display: inline-flex; align-items: center; gap: .5em; margin-top: auto; padding-top: 22px; font-weight: 700; font-size: 15px; }
.svc__go svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.svc__a:hover, .svc__a:focus-within { transform: rotate(0) translateY(-8px); box-shadow: 12px 12px 0 var(--ink); }
.svc--ink .svc__a:hover, .svc--ink .svc__a:focus-within { box-shadow: 12px 12px 0 var(--red); }
.svc--line .svc__a:hover, .svc--line .svc__a:focus-within { box-shadow: inset 0 0 0 3px var(--ink), 12px 12px 0 var(--ink); }
.svc__a:hover .svc__fig img { transform: translateY(-10px) rotate(-3deg); }
.svc__a:hover .svc__go svg { transform: translateX(-5px); }
/* דמויות קטנות שהולכות על הקצה העליון של הכרטיס הראשון */
/* הדמויות הקטנות שעל הכרטיסים: main.js מעמיד אותן על הקצה העליון של הכרטיס ומקפיץ אותן לכרטיס הבא */
.hops { position: relative; }
.hops__crew { position: absolute; inset: 0; z-index: 3; color: var(--ink); pointer-events: none; }
.ink .hops__crew { color: var(--paper); }
.hops__crew .walker { top: 0; bottom: auto; }
.no-js .hops__crew, .hops__crew:not(.is-live) { display: none; }
@media (max-width: 1000px) { .svcs { grid-template-columns: repeat(2, 1fr); } .svc:nth-child(3n + 2) { margin-top: 0; } .svc:nth-child(even) { margin-top: clamp(16px, 3vw, 30px); } }
@media (max-width: 640px) { .svcs { grid-template-columns: 1fr; } .svc:nth-child(even) { margin-top: 0; } }

/* =========================================================
   סצנות: כל סיפור הצלחה הוא סצנה שטוחה על קו אופק
   ========================================================= */
.scene { display: grid; gap: 0; margin-bottom: clamp(60px, 8vw, 120px); }
.scene:last-child { margin-bottom: 0; }
.scene__stage { position: relative; overflow: hidden; aspect-ratio: 12 / 5; background: var(--paper); color: var(--ink); }
.ink .scene__stage { background: var(--paper); }
.scene__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene__no { position: absolute; top: 18px; right: 22px; font-size: 14px; font-weight: 700; letter-spacing: .14em; color: var(--grey); direction: ltr; }
.scene__big { position: absolute; top: 14%; right: 6%; max-width: 46%; font-weight: 900; font-size: clamp(40px, 6vw, 108px); line-height: 1.04; letter-spacing: -.03em; color: var(--ink); text-align: right; }
.scene__big small { display: block; margin-top: 12px; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 0; color: var(--grey); }
.scene__text { display: grid; gap: 24px 48px; padding-top: 30px; }
@media (min-width: 1000px) { .scene__text { grid-template-columns: 1fr 1fr; } }
.scene__h { font-weight: 800; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.scene__k { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 700; color: var(--red-soft); }
.scene__p { color: var(--grey-ink); }
.scene__p p + p { margin-top: 12px; }
.scene__facts { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #333; }
.scene__facts li { font-size: 14.5px; color: var(--grey-ink); }
.scene__facts b { display: block; font-weight: 800; font-size: 28px; line-height: 1.1; color: var(--paper); }
.scene__more { margin-top: 22px; }
.scene__logo { position: absolute; top: 16px; left: 18px; width: 92px; height: 54px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .8; }
/* תנועות הסצנה כשהיא נכנסת למסך (גם בתוך מודעה על חזית) */
.js :is(.scene, .ad) .drop { transform: translateY(-110%); transition: transform 1s var(--snap) var(--d, 0s); }
.js :is(.scene, .ad).is-in .drop { transform: none; }
.js :is(.scene, .ad) .rise { transform: translateY(110%); transition: transform .9s var(--snap) var(--d, 0s); }
.js :is(.scene, .ad).is-in .rise { transform: none; }
.js :is(.scene, .ad) .enter-r { transform: translateX(60vw); }
.js :is(.scene, .ad) .enter-l { transform: translateX(-60vw); }
.js :is(.scene, .ad).is-in :is(.enter-r, .enter-l) { animation: arrive 2.6s steps(14) var(--d, .4s) both; }
.js :is(.scene, .ad).is-in :is(.enter-r, .enter-l) .leg-a { animation: stride .4s steps(1) var(--d, .4s) 6; }
.js :is(.scene, .ad).is-in :is(.enter-r, .enter-l) .leg-b { animation: stride .4s steps(1) var(--d, .4s) 6 reverse; }
@keyframes arrive { to { transform: none; } }
.js :is(.scene, .ad) .swing { transform-box: fill-box; transform-origin: 50% 0; }
.js :is(.scene, .ad).is-in .swing { animation: swing 3.4s ease-in-out 1s infinite alternate; }
@keyframes swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.js .scene .big-in { clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--snap) .5s; }
.js .scene.is-in .big-in { clip-path: inset(-10%); }
@media (max-width: 700px) { .scene__stage { aspect-ratio: 4 / 3; } .scene__big { max-width: 70%; } .scene__logo { display: none; } }

/* =========================================================
   כתוביות (שירותים, ערכים): רשימה כמו כתוביות סיום
   ========================================================= */
.credits { border-top: 2px solid currentColor; }
.credits li { position: relative; isolation: isolate; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.credits__a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 30px; padding: clamp(18px, 2vw, 26px) 6px; text-decoration: none; }
@media (min-width: 900px) { .credits__a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) auto; } }
.credits__t { font-weight: 800; font-size: clamp(26px, 3.2vw, 52px); line-height: 1.15; letter-spacing: -.02em; }
.credits__d { color: var(--grey); font-size: 16.5px; line-height: 1.5; }
.ink .credits__d { color: var(--grey-ink); }
.credits__go { width: 46px; height: 32px; opacity: .25; transition: opacity .3s, transform .4s var(--ease); }
@media (max-width: 899px) { .credits__d { grid-column: 1 / -1; } .credits__go { grid-row: 1; grid-column: 2; } }
a.credits__a:hover .credits__go, a.credits__a:focus-visible .credits__go { opacity: 1; transform: translate(-10px, -6px); }
a.credits__a:hover .credits__t { color: var(--red); }
.ink a.credits__a:hover .credits__t { color: var(--red-soft); }
.credits li::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 6px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--snap); }
.credits li:hover::before, .credits li:focus-within::before { transform: scaleY(1); }
/* כשהפס האדום נכנס, הטקסט זז הצידה כדי שהפס לא יעלה עליו */
.credits__t, .credits__d { transition: transform .35s var(--snap), color .3s; }
.credits li:hover :is(.credits__t, .credits__d), .credits li:focus-within :is(.credits__t, .credits__d) { transform: translateX(-22px); }
.js .credits li { opacity: 0; transform: translateX(24px); transition: opacity .7s ease, transform .7s var(--snap); transition-delay: calc(var(--i, 0) * .07s); }
.js .credits.is-in li, .js .is-in .credits li { opacity: 1; transform: none; }

/* =========================================================
   איך זה עובד: כרטיס צבעוני לכל שלב, באותה שפה של כרטיסי השירותים (צבע, הטיה, ציור גדול).
   האיש הקטן הולך על הקצה העליון וקופץ מכרטיס לכרטיס. בטלפון: כרטיס נמוך, האייקון בצד
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(min(var(--n), 4), 1fr); gap: clamp(18px, 2.2vw, 34px); padding-top: 60px; }
.step { position: relative; --bg: var(--paper); --fg: var(--ink); --ic: var(--ink); --ic-a: var(--red); --tilt: 1.2deg; }
.step:nth-child(even) { --tilt: -1deg; margin-top: clamp(14px, 2vw, 34px); }
.step--red { --bg: var(--red-btn); --fg: #FFF8EE; --ic: #FFF8EE; --ic-a: var(--ink); }
.step--mustard { --bg: var(--mustard); --ic-a: var(--red); }
.step--teal { --bg: var(--teal); --fg: #FFF8EE; --ic: #FFF8EE; --ic-a: var(--mustard); }
.step__card { display: flex; flex-direction: column; height: 100%; padding: 20px clamp(18px, 1.8vw, 26px) 28px; background: var(--bg); color: var(--fg); transform: rotate(var(--tilt)); }
.step__top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; }
.step__no { direction: ltr; }
.step__art { display: flex; align-items: center; justify-content: center; height: clamp(120px, 10vw, 170px); margin: 16px 0 20px; color: var(--ic); }
.step__art .ic { width: auto; height: 80%; }
.step__art b { font-weight: 900; font-size: clamp(90px, 8vw, 140px); line-height: 1; letter-spacing: -.03em; direction: ltr; }
.js .step.is-in .step__art > * { animation: bob 3.2s ease-in-out calc(var(--i) * -.7s) infinite alternate; transform-origin: 50% 100%; }
.step__t { font-weight: 800; font-size: clamp(24px, 2vw, 32px); line-height: 1.15; }
.step__d { margin-top: 10px; font-size: 16.5px; line-height: 1.55; }
.route__note { margin-top: clamp(34px, 4vw, 54px); max-width: 60ch; color: var(--grey-ink); }
.route__note b { color: var(--paper); }
.ic { display: block; width: 100%; height: auto; }
.ic .ic-a { fill: var(--ic-a, var(--red)); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 18px; padding-top: 48px; }
  .step:nth-child(even) { margin-top: 0; }
  .step__card { display: grid; grid-template-columns: 58px 1fr; gap: 6px 16px; padding: 18px 18px 22px; }
  .step__top { grid-column: 1 / -1; margin-bottom: 4px; }
  .step__art { grid-row: 2 / span 2; align-items: flex-start; height: 58px; margin: 2px 0 0; }
  .step__art .ic { height: 100%; }
  .step__art b { font-size: 46px; }
  .step__t { font-size: 22px; }
  .step__d { margin-top: 2px; font-size: 16px; }
}

/* =========================================================
   המשפט: פסים אנכיים שמתרוממים אחד אחרי השני וחושפים אותו
   ========================================================= */
.reveal-q { position: relative; z-index: 3; padding-block: clamp(100px, 13vw, 200px); overflow: hidden; box-shadow: 0 0 80px -18px rgb(0 0 0 / .55); }
.reveal-q blockquote { position: relative; }
/* הציטוט לרוחב כל האזור, בכמה שפחות שורות */
.reveal-q q { position: relative; display: block; font-weight: 900; font-size: clamp(36px, 5.6vw, 84px); line-height: 1.12; letter-spacing: -.02em; quotes: none; }
/* מכונת כתיבה (מגרסה 4): המשפט מוקלד אחרי שהתריסים עולים. העותק השקוף שומר את המקום */
.js .typed__ghost { visibility: hidden; }
.typed__live { position: absolute; inset: 0; }
.caret { display: inline-block; width: .07em; height: .86em; margin-inline-start: .04em; vertical-align: -.06em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.reveal-q p { margin-top: 28px; max-width: 40ch; font-weight: 700; font-size: clamp(19px, 1.6vw, 25px); }
.reveal-q cite { display: block; margin-top: 18px; font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.blinds { position: absolute; z-index: 2; inset: 0; display: none; grid-template-columns: repeat(14, 1fr); pointer-events: none; }
.mustard .blinds i { background: var(--mustard); }
/* מדרגות בחרדל כהה, והדמות מטפסת עליהן כשהאזור נכנס למסך */
.stairs { position: absolute; z-index: 1; left: 0; bottom: 0; width: min(46vw, 640px); aspect-ratio: 3 / 2; container-type: size; pointer-events: none; }
.stairs svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #C88812; }
/* 19% מהרוחב. הרגל האחורית (18.6%, 98.5% מהתמונה) עומדת על הרצפה לפני המדרגה הראשונה, main.js מעלה אותו */
.stairs__man { position: absolute; left: 0; top: 0; width: 19cqw; transform-origin: 18.6% 98.5%; transform: translate(.17cqw, 43.5cqw); }
.stairs__man img { display: block; width: 100%; height: auto; }
.mustard .wrap { position: relative; z-index: 3; }
/* מ־900: הציטוט לרוחב, השורה שמתחתיו והחתימה בצד ימין ליד המדרגות, והריווח למטה גבוה מספיק
   כדי שהמדרגות יתחילו מתחת לציטוט */
@media (min-width: 900px) {
  .mustard blockquote, .mustard cite, .mustard .credit { margin-inline-end: 0; }
  .mustard .wrap > :not(blockquote), .mustard blockquote p { max-width: min(40ch, 52%); }
  .reveal-q.mustard { padding-bottom: max(clamp(100px, 13vw, 200px), calc(min(46vw, 640px) * 2 / 3 - 50px)); }
}
@media (max-width: 899px) { .reveal-q.mustard { display: flex; flex-direction: column; padding-bottom: 0; } .stairs { order: 2; position: relative; width: 100%; margin-top: 30px; } }
.js .blinds { display: grid; }
.blinds i { background: var(--red-btn); transform-origin: top; }
.blinds i:nth-child(odd) { transform-origin: bottom; }
.js .reveal-q.is-in .blinds i { animation: blind-up .8s var(--snap) calc(.15s + var(--k) * .06s) both; }
@keyframes blind-up { to { transform: scaleY(0); } }

/* =========================================================
   שני השותפים: נכנסים מהקצוות ונעצרים מול התפר
   ========================================================= */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; min-height: 460px; }
.duo__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 40px 20px 0; }
.duo__side--r { background: var(--paper); color: var(--ink); }
.duo__side--l { background: var(--red-btn); color: #FFF8EE; }
.duo__fig { width: clamp(70px, 9vw, 120px); margin-bottom: 0; }
.duo__fig svg { width: 100%; height: auto; overflow: visible; }
.duo__fig { filter: url(#stamp-soft); }
.duo__side--r .duo__fig svg { transform: scaleX(-1); } /* the two face each other across the cut */ /* the texture in screen pixels, so a big figure keeps a fine grain */
.duo__name { position: absolute; top: 30px; font-family: var(--fd); font-weight: 700; font-size: clamp(64px, 10vw, 180px); line-height: 1; letter-spacing: 0; }
.duo__side--r .duo__name { left: 20px; }
.duo__side--l .duo__name { right: 20px; }
/* קו אופק דק אחד לשני החצאים, כמו בפתיחה: דיו על הנייר ונייר על הדיו */
.duo__ground { height: 6px; width: calc(100% + 40px); margin-inline: -20px; }
.duo__side--r .duo__ground { background: var(--ink); }
.duo__side--l .duo__ground { background: #FFF8EE; }
.js .duo .duo__fig { transition: transform 2.4s steps(12); }
.js .duo .duo__side--r .duo__fig { transform: translateX(45vw); }
.js .duo .duo__side--l .duo__fig { transform: translateX(-45vw); }
.js .duo.is-in .duo__fig { transform: none; }
.js .duo.is-in .duo__fig .leg-a { animation: stride .4s steps(1) 6; }
.js .duo.is-in .duo__fig .leg-b { animation: stride .4s steps(1) 6 reverse; }
/* האיור של שני השותפים, על התפר בין הנייר לאדום */
.duo__pic { position: absolute; z-index: 1; left: 50%; bottom: 6px; height: 82%; width: auto; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.js .duo .duo__pic { opacity: 0; -webkit-transform: translate(-50%, 40px); transform: translate(-50%, 40px); transition: opacity .7s ease .3s, transform 1s cubic-bezier(.3, 1.3, .5, 1) .3s; }
.js .duo.is-in .duo__pic { opacity: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
/* לחיצה (או ריחוף עם עכבר) מחליפה את הקריקטורה בתמונה האמיתית, כמו פולרואיד שמתפתח.
   רק transform רגיל (לא translate/scale כמאפיינים נפרדים) ובלי :hover, כדי שיעבוד גם בדפדפן של סמסונג */
.duo__flip { aspect-ratio: 832 / 1240; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; }
.duo__flip img { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; max-width: none; pointer-events: none; }
.duo__car { -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: opacity .5s ease, -webkit-filter .5s ease, filter .5s ease, transform .6s ease; }
.duo__real { opacity: 0; -webkit-transform: translateX(-50%) scale(.97); transform: translateX(-50%) scale(.97); -webkit-filter: sepia(1) contrast(.55) brightness(1.5) blur(6px); filter: sepia(1) contrast(.55) brightness(1.5) blur(6px); transition: opacity .45s ease, transform .8s cubic-bezier(.3, 1.3, .5, 1), -webkit-filter 1.3s ease .1s, filter 1.3s ease .1s; }
.duo__flip.is-real .duo__car, .duo__flip.is-hover .duo__car { opacity: 0; -webkit-transform: translateX(-50%) scale(1.04); transform: translateX(-50%) scale(1.04); -webkit-filter: blur(6px); filter: blur(6px); }
.duo__flip.is-real .duo__real, .duo__flip.is-hover .duo__real { opacity: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-filter: none; filter: none; }
/* הבזק מצלמה ברגע ההחלפה */
.duo__flip::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -40%; right: -40%; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, #FFF8EE, rgba(255, 248, 238, 0)); }
.duo__flip.is-flash::after { -webkit-animation: duo-flash .55s ease-out; animation: duo-flash .55s ease-out; }
@-webkit-keyframes duo-flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
@keyframes duo-flash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
@supports not (aspect-ratio: 1 / 1) { .duo__flip { width: 40%; } }
.duo__flip:focus-visible { outline: 3px dashed var(--ink); outline-offset: 6px; }
.duo__hint { position: absolute; z-index: 3; bottom: 18px; left: 50%; -webkit-transform: translateX(-50%) rotate(-4deg); transform: translateX(-50%) rotate(-4deg); white-space: nowrap; padding: 6px 14px; font-weight: 800; font-size: 15px; line-height: 1.2; background: var(--mustard); color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .2s ease; }
.duo__flip.is-hover .duo__hint { -webkit-transform: translateX(-50%) rotate(2deg); transform: translateX(-50%) rotate(2deg); } /* למטה, על הרגליים, כדי לא להסתיר את השמות */
.duo__hint-b, .duo__flip.is-real .duo__hint-a { display: none; }
.duo__flip.is-real .duo__hint-b { display: inline; }
@media (prefers-reduced-motion: reduce) { .duo__car, .duo__real { transition: opacity .2s; } .duo__flip.is-flash::after { -webkit-animation: none; animation: none; } }
.duo__text { display: grid; gap: 24px 48px; margin-top: clamp(40px, 5vw, 70px); }
@media (min-width: 1000px) { .duo__text { grid-template-columns: 1.2fr .8fr; } }
.partners { display: grid; gap: 12px; }
.partner { padding: 16px 18px; border: 2px solid var(--ink); }
.partner h3 { font-weight: 800; font-size: 22px; }
.partner p { margin-top: 4px; color: var(--grey); font-size: 15.5px; }
mark[data-todo] { background: #FFE58A; color: var(--ink); padding-inline: .2em; }
@media (max-width: 700px) { .duo { min-height: 320px; } .duo__name { font-size: 48px; top: 20px; } }

/* ---------- לקוחות: שתי שורות שזזות ---------- */
.marquees { display: grid; gap: 16px; }
.marquee { --gap: clamp(30px, 4vw, 56px); direction: ltr; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 90s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: var(--gap); padding-right: var(--gap); }
.marquee__group img { width: auto; height: 52px; max-width: 148px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .7; mix-blend-mode: multiply; transition: opacity .3s, filter .3s; }
.marquee__group img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- שאלות ---------- */
.faq { display: grid; gap: 30px 60px; }
@media (min-width: 1000px) { .faq { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.qa { border-bottom: 1px solid var(--ink); }
.qa:first-child { border-top: 2px solid var(--ink); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; font-weight: 700; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.35; list-style: none; cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(var(--red), var(--red)) center / 100% 2px no-repeat, linear-gradient(var(--red), var(--red)) center / 2px 100% no-repeat; transition: transform .35s var(--snap); }
.qa[open] summary::after { transform: rotate(135deg); }
.qa summary:hover { color: var(--red-ink); }
.qa p { padding-bottom: 24px; max-width: 62ch; color: var(--grey); }
.js .qa[open] p { animation: fade-up .45s var(--ease); }

/* ---------- יצירת קשר: הסוף של הפתיח ---------- */
.talk { display: grid; }
@media (min-width: 1000px) { .talk { grid-template-columns: 1fr 1fr; } }
.talk__ink { position: relative; z-index: 1; overflow: hidden; box-shadow: -26px 0 50px -28px rgb(0 0 0 / .5); padding: var(--sec) var(--pad) calc(var(--sec) + 40px); background: var(--ink); color: var(--paper); }
/* הלוח הכהה: הכותרת הקטנה והפסקה באפור בהיר, אחרת הן כמעט לא נקראות על הדיו */
.talk__ink .credit, .talk__ink .lead { color: var(--grey-ink); }
.talk__paper { padding: var(--sec) var(--pad); }
/* האיש הקופץ: על הדיו החליפה השחורה נבלעת, אז מאחוריו שמש חרדל עם קרניים, כמו בכרזה ישנה */
.talk__fig { position: absolute; left: 11%; bottom: 9%; width: clamp(110px, 12vw, 180px); }
.talk__cast { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.talk__sun { position: absolute; left: 50%; top: 46%; width: 132%; padding-top: 132%; margin: -66% 0 0 -66%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(20, 18, 16, .13) 0 7deg, transparent 7deg 20deg), var(--mustard); box-shadow: 0 0 0 6px var(--ink), 0 0 0 8px var(--mustard); }
/* האיש באמת נופל: מגיע מלמעלה, מאיץ, נוחת על השמש בקפיצה קטנה ואז מתנדנד (main.js מוסיף is-fall כשהוא נראה) */
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-still).js .talk__fig:not(.is-fall) .talk__cast { opacity: 0; }
  .js .talk__fig.is-fall .talk__cast { animation: man-fall 1.7s both, bob 2.6s ease-in-out 1.75s infinite alternate; }
  .js .talk__fig.is-fall .talk__sun { animation: sun-hit .5s ease-out 1.05s both, sun-turn 40s linear 1.7s infinite; }
}
@keyframes man-fall {
  0% { opacity: 1; transform: translateY(-175%) rotate(-28deg); animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  62% { transform: translateY(0) rotate(6deg); animation-timing-function: cubic-bezier(0, .45, .5, 1); }
  76% { transform: translateY(-16%) rotate(-3deg); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
  88% { transform: translateY(0) rotate(2deg); animation-timing-function: ease-out; }
  94% { transform: translateY(-4%) rotate(-1deg); }
  100% { opacity: 1; transform: translateY(0) rotate(-1.2deg); }
}
@keyframes sun-hit { 0% { transform: scale(1); } 35% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes sun-turn { to { transform: rotate(360deg); } }
@media (max-width: 999px) { .talk__fig { width: 96px; left: 8%; bottom: 7%; } }
.talk__big { font-family: var(--fd); font-weight: 700; font-size: clamp(70px, 10.4vw, 180px); line-height: .98; letter-spacing: 0; }
.direct { margin-top: 30px; display: grid; gap: 6px; color: var(--grey-ink); }
.direct a { color: var(--paper); font-weight: 700; }
.form { display: grid; gap: 18px; max-width: 560px; }
.form__h { font-weight: 800; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.15; margin-bottom: 8px; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 700; font-size: 15px; }
.field > span i { font-style: normal; font-weight: 400; color: var(--grey); }
.field input { width: 100%; min-height: 56px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 0; background: #FBF8F2; color: var(--ink); font: 600 19px/1.4 var(--f); transition: box-shadow .2s; }
.field input:focus-visible { outline: 3px solid #141210; outline-offset: 2px; box-shadow: 6px 6px 0 var(--red); }
.field__err { display: none; font-size: 14px; font-weight: 700; color: var(--red-ink); }
.field.is-bad .field__err { display: block; }
.field.is-bad input { border-color: var(--red-ink); }
.form .btn { justify-self: start; margin-top: 4px; }
.form__fine { font-size: 14px; color: var(--grey); }
.form__ok { padding: 14px 16px; background: var(--ink); color: var(--paper); font-weight: 700; }

/* ---------- עמודים פנימיים: שער ---------- */
.front { position: relative; isolation: isolate; overflow: hidden; display: grid; }
@media (min-width: 900px) { .front { grid-template-columns: 1fr 32%; min-height: 58svh; } }
.front__paper { position: relative; z-index: 1; padding: clamp(40px, 6vw, 96px) var(--pad) clamp(44px, 6vw, 90px); }
.front__ink { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; min-height: 170px; background: var(--ink); color: var(--paper); }
.front__ink .poles { z-index: 0; }
.js .front__ink { animation: ink-from-left .9s var(--snap) both; }
@keyframes ink-from-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.front__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.front__crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--grey); }
.front__crumbs a { color: var(--grey); text-decoration: none; }
.front__crumbs a:hover { color: var(--ink); text-decoration: underline; }
.front h1 { margin-top: 22px; max-width: 17ch; font-weight: 800; font-size: clamp(40px, 5.4vw, 96px); line-height: 1.12; letter-spacing: -.03em; text-wrap: balance; }
.front__k { display: block; margin-bottom: 14px; font-size: 16px; font-weight: 700; letter-spacing: .02em; color: var(--red-ink); }
.front .lead { max-width: 56ch; }
@media (max-width: 899px) { .front__ink { order: -1; min-height: 140px; } }

.facts-bar { display: grid; gap: 0; border-block: 2px solid var(--ink); }
@media (min-width: 760px) { .facts-bar { grid-template-columns: repeat(3, 1fr); } }
.facts-bar div { padding: 16px 0; }
@media (min-width: 760px) { .facts-bar div + div { padding-inline-start: 22px; border-inline-start: 1px solid var(--ink); } }
@media (max-width: 759px) { .facts-bar div + div { border-top: 1px solid var(--ink); } }
.facts-bar dt { font-size: 14px; font-weight: 700; color: var(--grey); letter-spacing: .04em; }
.facts-bar dd { margin-top: 2px; font-weight: 800; font-size: 19px; }
.facts-bar a { text-decoration-color: var(--red); text-underline-offset: 4px; }

.lists { display: grid; }
@media (min-width: 900px) { .lists { grid-template-columns: 1fr 1fr; } }
.lists > div { padding: clamp(30px, 4vw, 60px) var(--pad); }
.lists h2 { font-weight: 800; font-size: clamp(28px, 2.8vw, 44px); margin-bottom: 16px; }
.lists li { display: flex; gap: 12px; padding-block: 11px; border-bottom: 1px solid currentColor; }
.lists li::before { content: ""; flex: none; width: 3px; height: 1.1em; margin-top: .3em; background: var(--red); }

.prose { max-width: 72ch; }
.prose h2 { margin: 2.2em 0 .6em; font-weight: 800; font-size: 26px; }
.prose p, .prose ul { margin-bottom: 1em; }
.prose ul { padding-inline-start: 1.2em; list-style: disc; }
.prose li + li { margin-top: .4em; }
.draft { margin-bottom: 2em; padding: 14px 18px; border-inline-start: 4px solid var(--red); background: #FBF8F2; }

/* ---------- כותרת תחתונה ---------- */
.foot { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding-block: 0 30px; }
.foot__grid { display: grid; gap: 34px 40px; padding-top: clamp(48px, 6vw, 80px); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.foot .brand { color: var(--paper); }
.foot .brand svg { width: 124px; }
.foot__line { margin-top: 14px; max-width: 30ch; color: var(--grey-ink); }
.foot__h { margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--grey-ink); }
.foot li + li { margin-top: 7px; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 50px; padding-top: 20px; border-top: 1px solid #2E2E2E; font-size: 14px; color: var(--grey-ink); }
.foot__bottom ul { display: flex; gap: 22px; }
.foot__bottom li + li { margin-top: 0; }
/* בטלפון: שטח לחיצה של כ־40 פיקסלים לכל קישור בפוטר ולמיילים ביצירת קשר */
@media (max-width: 899px) { .foot li + li { margin-top: 0; } .foot li a, .foot__bottom a, .direct a { display: inline-block; padding-block: 9px; } .direct { gap: 0; } }

.fab { display: none; }
@media (max-width: 860px) {
  .fab { position: fixed; z-index: 85; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: inline-flex; min-height: 50px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
}
.nf { font-weight: 900; font-size: clamp(120px, 22vw, 320px); line-height: .85; color: var(--red); }

/* ---------- תנועה מופחתת: הכל במקום ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv, .js .credits li { opacity: 1; transform: none; }
  .js .ln, .js .slits > span, .js :is(.scene, .ad) :is(.drop, .rise, .enter-r, .enter-l), .js .scene .big-in, .js .duo .duo__fig { transform: none; clip-path: none; }

  .blinds { display: none; }
  .walker--loop { transform: translateX(var(--rest, 30vw)); }
  .js .work__stage :is(.mock--browser, .mock--phone, .work__guy) { opacity: 1; transform: none; }
  .stairs__man { transform: translate(81.17cqw, 4.36cqw); }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { width: auto; }
  .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: 16px; padding-right: 0; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* ---------- נגישות: כפתור ותפריט בסגנון חותמת (main.js שומר את הבחירה בדפדפן) ---------- */
.a11y-btn { position: fixed; z-index: 86; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(5deg); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.a11y-btn::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(20, 18, 16, .5); pointer-events: none; }
.a11y-btn svg { width: 30px; height: 30px; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { transform: rotate(0) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.a11y-panel { position: fixed; z-index: 87; left: 18px; bottom: calc(86px + env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 36px)); max-height: calc(100svh - 120px); overflow: auto;
  padding: 20px 18px 18px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.a11y-panel[hidden] { display: none; }
.a11y-panel__t { margin: 0 0 4px; font-family: var(--fd); font-weight: 700; font-size: 34px; line-height: 1; }
.a11y-panel__sub { margin: 0 0 14px; font-size: 15px; color: var(--grey); }
.a11y-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.a11y-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; cursor: pointer; text-align: start;
  font: 700 17px/1.25 var(--f); color: var(--ink); background: transparent; border: 2px solid var(--ink); }
.a11y-opt::after { content: "כבוי" / ""; flex: none; padding: 2px 8px; font-size: 13px; border: 1.5px solid currentColor; }
.a11y-opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.a11y-opt[aria-pressed="true"]::after { content: "פועל" / ""; background: var(--mustard); color: var(--ink); border-color: var(--mustard); }
.a11y-opt--size::after { content: attr(data-level) / ""; }
.a11y-opt--size { background: transparent !important; color: var(--ink) !important; }
.a11y-panel__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; font-weight: 700; }
.a11y-panel__foot a { color: var(--ink); text-underline-offset: 4px; }
.a11y-reset, .a11y-close { min-height: 44px; padding: 4px 12px; cursor: pointer; font: 700 15px var(--f); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }
.a11y-close { position: absolute; left: 12px; top: 12px; min-width: 44px; padding: 0; font-size: 22px; line-height: 1; }
@media print { .a11y-btn, .a11y-panel { display: none !important; } }

/* האפשרויות עצמן: מחלקות על html */
html.a11y-text-1 body { zoom: 1.15; }
html.a11y-text-2 body { zoom: 1.3; }
html.a11y-contrast { --paper: #FFFFFF; --ink: #000000; --grey: #000000; --grey-ink: #FFFFFF; --red: #B00000; --red-btn: #B00000; --red-ink: #B00000; --red-soft: #FFFFFF; --mustard: #FFD200; }
html.a11y-contrast body::after { display: none; }
html.a11y-contrast :is(.ink, .menu, .talk__ink, .foot, .red) { --red: #FF6B6B; }
html.a11y-contrast .lead, html.a11y-contrast .credit { color: inherit; }
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px; }
html.a11y-links a:not(.btn):not(.wa-fab):not(.soc):not(.brand) { background: #FFE58A; color: #000 !important; }
html.a11y-font { --f: Arial, "Heebo", sans-serif; --fd: Arial, "Heebo", sans-serif; }
html.a11y-font body { letter-spacing: .01em; word-spacing: .08em; }
/* עצירת אנימציות: כמו תנועה מופחתת במערכת */
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
html.a11y-still.js .rv, html.a11y-still.js .credits li { opacity: 1; transform: none; }
html.a11y-still.js .ln, html.a11y-still.js .slits > span, html.a11y-still.js :is(.scene, .ad) :is(.drop, .rise, .enter-r, .enter-l), html.a11y-still.js .scene .big-in, html.a11y-still.js .duo .duo__fig { transform: none; clip-path: none; }

html.a11y-still .blinds { display: none; }
html.a11y-still .walker--loop { transform: translateX(var(--rest, 30vw)); }
html.a11y-still.js .work__stage :is(.mock--browser, .mock--phone, .work__guy) { opacity: 1; transform: none; }
html.a11y-still .stairs__man { transform: translate(81.17cqw, 4.36cqw); }
html.a11y-still .marquee { -webkit-mask-image: none; mask-image: none; }
html.a11y-still .marquee__track { width: auto; }
html.a11y-still .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: 16px; padding-right: 0; }
html.a11y-still .marquee__group[aria-hidden="true"] { display: none; }
@media print {
  .top, .fab, .menu, body::after, .blinds, .crowd, .poles { display: none !important; }
  body { background: #fff; }
}

/* ---------- למי זה: כתוביות ---------- */
.castx__list { list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; max-width: 980px; }
.castx__list li { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; align-items: baseline; gap: 12px 28px; padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); transition-delay: calc(var(--i) * .09s); }
.castx__role { font-size: 15px; font-weight: 500; color: var(--grey-ink); }
.castx__who { font-family: var(--fd); font-weight: 700; font-size: clamp(34px, 4.4vw, 70px); line-height: 1.05; letter-spacing: 0; }
.castx__dir .castx__who { color: var(--red); }
.castx__note b { display: block; margin-bottom: 8px; font-weight: 800; }
.castx__note { margin: clamp(28px, 3vw, 44px) 0 0; max-width: 56ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; }
@media (max-width: 600px) { .castx__list li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- בימוי / הפקה בכרטיסי הפרויקטים ---------- */
.work__credit { margin-top: 6px; font-size: 14px; font-weight: 500; }
.work__credit span { font-weight: 400; margin-inline-end: .45em; }
.work__credit span + span { margin-inline-start: 1.1em; }

/* ---------- הפירמידה: פסקה בפתיחה, סיפורי הצלחה, שלוש נקודות, וואטסאפ צף ---------- */
.hero__lead { margin-top: 14px; max-width: 36ch; font-size: clamp(18px, 1.4vw, 22px); line-height: 1.55; }
/* ביקורות: כמו ציטוטים על פוסטר של סרט. החץ מהלוגו במקום כוכבים */
.rvw__list { list-style: none; margin: clamp(34px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.rvw__item { padding: 8px clamp(18px, 2.4vw, 40px) 10px; text-align: center; transition-delay: calc(var(--i) * .1s); }
.rvw__item + .rvw__item { border-inline-start: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
@media (max-width: 760px) { .rvw__item + .rvw__item { border-inline-start: 0; border-top: 1px solid color-mix(in srgb, currentColor 28%, transparent); padding-top: 30px; margin-top: 22px; } }
.rv-rate { display: inline-flex; gap: 10px; direction: ltr; }
.rv-rate img { width: 22px; height: auto; }
.rvw__quote { margin: 18px 0 0; font-weight: 800; font-size: clamp(24px, 2.3vw, 36px); line-height: 1.18; letter-spacing: -.01em; }
.rvw__result { margin-top: 14px; color: var(--mustard); font-weight: 700; font-size: 16px; letter-spacing: .04em; }
.rvw__who { margin-top: 6px; color: var(--grey-ink); font-size: 15px; }
.todo { text-decoration: underline dashed color-mix(in srgb, var(--mustard) 70%, transparent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.pts__list { list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(24px, 3vw, 48px); }
.pts__list li { border-top: 3px solid var(--ink); padding-top: 18px; transition-delay: calc(var(--i) * .09s); }
.pts__n { display: flex; align-items: flex-end; gap: 10px; font-weight: 900; font-size: clamp(40px, 4vw, 64px); line-height: 1; color: var(--ink); }
.pts__arrow { width: clamp(26px, 2.4vw, 34px); height: auto; margin-bottom: .1em; }
.pts__list h3 { margin: 12px 0 8px; font-weight: 800; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.2; }
.pts__list p { margin: 0; font-size: 18px; line-height: 1.6; max-width: 36ch; }
.mock--empty .mock__screen { background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 8%, transparent) 0 10px, transparent 10px 20px); }
.foot__social { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 14px; }
.foot__social li + li { margin-top: 0; }
/* חותמות הרשתות: הצבע הרשמי של כל רשת, מסגרת נייר, צל מוזז וטבעת מקווקוות כמו בכפתור הוואטסאפ */
.soc { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; border: 2.5px solid var(--paper); box-shadow: 3px 3px 0 var(--paper); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.soc::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .65); pointer-events: none; }
.soc svg { width: 24px; height: 24px; filter: url(#stamp-soft); }
.soc--facebook { background: #1877F2; transform: rotate(-5deg); }
.soc--instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); transform: rotate(4deg); }
.soc--linkedin { background: #0A66C2; transform: rotate(-3deg); }
a.soc:hover, a.soc:focus-visible { transform: rotate(0) translate(-2px, -2px); box-shadow: 5px 5px 0 var(--paper); text-decoration: none; }
span.soc[data-todo] { opacity: .9; }
.wa-fab { position: fixed; z-index: 85; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: #25D366; color: #fff; border: 3px solid var(--ink); /* הירוק הרשמי של וואטסאפ, עם מסגרת וצל של חותמת */ box-shadow: 4px 4px 0 var(--ink); transform: rotate(-6deg);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.wa-fab::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, .7); }
.wa-fab svg { width: 30px; height: 30px; filter: url(#stamp-soft); }
/* הכפתור "מצלצל" כל כמה שניות, כמו הטלפון בפתיחה: רטט קצר וגל שנפתח. עוצר בריחוף, בתנועה מופחתת ובתפריט הנגישות */
.wa-fab::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #25D366; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .wa-fab { animation: wa-ring 7s ease-in-out 3s infinite; }
  .wa-fab::before { animation: wa-wave 7s ease-out 3s infinite; }
  .wa-fab:hover, .wa-fab:focus-visible { animation: none; }
}
@keyframes wa-ring { 0%, 9%, 100% { transform: rotate(-6deg); } 1.5% { transform: rotate(8deg); } 3% { transform: rotate(-16deg); } 4.5% { transform: rotate(6deg); } 6% { transform: rotate(-12deg); } }
@keyframes wa-wave { 0% { opacity: .9; transform: scale(1); } 12% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; transform: scale(1.7); } }
/* פתק נייר שמסביר מה הכפתור עושה. מופיע פעם אחת לכמה שניות (main.js) */
.wa-fab__tag { position: absolute; right: calc(100% + 14px); top: 50%; white-space: nowrap; padding: 6px 12px; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); opacity: 0; transform: translateY(-50%) translateX(8px) rotate(2deg); transition: opacity .3s, transform .4s cubic-bezier(.3, 1.5, .5, 1); pointer-events: none; }
.wa-fab.is-tag .wa-fab__tag { opacity: 1; transform: translateY(-50%) rotate(2deg); }
.wa-fab:hover, .wa-fab:focus-visible { transform: rotate(4deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.wa-fab:active { transform: rotate(0) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
/* בנייד, בדף הבית: הוואטסאפ מופיע מהרגע שהמסך נהיה אדום בפתיחה, ומשם עד סוף העמוד (כולל הפוטר). בשאר העמודים מיד.
   main.js מוסיף show-fab (בקשה של אורי, 12.11.2026) */
@media (max-width: 900px) {
  .js .wa-fab { opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
  .js body.show-fab .wa-fab { opacity: 1; pointer-events: auto; }
}
/* בנייד הכפתור בכרטיס הסיום של הפתיחה עובר לצד שמאל, כדי שהוואטסאפ (בפינה הימנית) לא יכסה אותו */
@media (max-width: 900px) { .final .btn { display: flex; width: fit-content; margin-inline-start: auto; } .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---------- דף הבית גרסה 2 (/v2/) ---------- */
.ht__h1 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.hero--v2 .ht__l { display: block; }
.hero--slow.is-pinned { height: 420svh; } /* סצנת הטלפון בקצב איטי יותר */
@media (max-width: 1279px) { .hero--v2 .ht__layer { font-size: clamp(44px, 12.6vw, 110px); } }
.ring__cap { position: absolute; z-index: 4; top: 5%; left: 50%; max-width: calc(100% - 32px); margin: 0; padding: 8px 20px; text-align: center; font-family: var(--fd); font-weight: 700; font-size: clamp(26px, 3.2vw, 52px); line-height: 1.05;
  background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--paper); -webkit-transform: translateX(-50%) rotate(-1.5deg); transform: translateX(-50%) rotate(-1.5deg); opacity: 0; visibility: hidden; pointer-events: none; }
.title--sm { font-size: clamp(38px, 4.4vw, 76px); }
.duo__full { grid-column: 1 / -1; display: grid; gap: 14px; max-width: 72ch; margin-inline: auto; text-align: center; }
.duo__full .lead { max-width: none; margin-top: 0; }
.rvw__vid { margin: 0 auto 18px; max-width: 300px; border: 3px solid var(--paper); box-shadow: 8px 8px 0 var(--red-btn); background: #000; }
.rvw__vid video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; }
.rvw__more { margin: 12px auto 0; max-width: 34ch; font-size: 17px; line-height: 1.6; color: var(--grey-ink); }
@media (max-width: 480px) { .top__menu { padding: 0 11px; font-size: 16px; gap: 6px; } .top__menu i { width: 15px; } }

/* מחשב עם מסך נמוך (לפטופ): הלוגו נשאר גדול ומרווח. מפנים מקום בכותרת בשורה אחת ובפסקה רחבה יותר */
@media (min-width: 1280px) and (max-height: 960px) {
  .hero .ht__l { display: inline; }
  .hero .ht__layer { font-size: clamp(48px, 5.2vw, 110px); }
  .hero__title { padding-top: 12px; }
  .hero__lead { max-width: 52ch; }
  .hero__copy { padding-top: 12px; padding-bottom: 24px; }
  .hero__copy .ctas { margin-top: 18px; }
}
/* בטלפון כפתור הנגישות עולה לפינה העליונה, מתחת להדר, כדי לא לשבת על הכפתורים בפתיחה */
@media (max-width: 860px) {
  .a11y-btn { top: calc(var(--top-h) + 12px); bottom: auto; left: 10px; width: 44px; height: 44px; }
  .a11y-btn svg { width: 24px; height: 24px; }
  .a11y-panel { top: calc(var(--top-h) + 66px); bottom: auto; left: 10px; max-height: calc(100svh - var(--top-h) - 80px); }
}

/* ---------- נעים להכיר: מכתב על נייר ---------- */
.letter { position: relative; max-width: 860px; margin: 0 auto; padding: clamp(36px, 5vw, 70px) clamp(24px, 5vw, 76px) clamp(30px, 4vw, 56px) clamp(24px, 5vw, 76px);
  background: #FBF7EE linear-gradient(to left, transparent calc(clamp(24px, 5vw, 76px) - 22px), rgba(196, 12, 12, .35) calc(clamp(24px, 5vw, 76px) - 22px) calc(clamp(24px, 5vw, 76px) - 20px), transparent 0) ;
  color: var(--ink); border: 2px solid var(--ink); box-shadow: 12px 12px 0 var(--ink); rotate: -.8deg; }
.letter > * { position: relative; }
.letter__stamp { position: absolute; top: 22px; left: 26px; display: grid; place-items: center; gap: 4px; width: 92px; height: 108px; padding: 10px 8px; background: var(--paper); border: 2px solid var(--ink);
  outline: 4px dotted #FBF7EE; outline-offset: -2px; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink); transform: rotate(4deg); }
.letter__stamp img { width: 40px; height: auto; }
.letter__stamp small { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.letter__post { position: absolute; top: 46px; left: 112px; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; border: 2.5px solid rgba(196, 12, 12, .75); color: rgba(196, 12, 12, .85);
  text-align: center; line-height: 1.1; transform: rotate(-14deg); box-shadow: inset 0 0 0 5px #FBF7EE, inset 0 0 0 6.5px rgba(196, 12, 12, .55); }
.letter__post b { font-family: var(--fd); font-weight: 700; font-size: 20px; }
.letter__post small { font-size: 11px; font-weight: 800; }
.letter__kick { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--grey); }
.letter__title { margin-top: 6px; max-width: 12ch; font-family: var(--fd); font-weight: 700; font-size: clamp(40px, 4.6vw, 76px); line-height: .98; }
.letter__hi { margin-top: clamp(26px, 3vw, 40px); font-family: "Kissufim", var(--f); font-weight: 500; font-size: clamp(40px, 4.2vw, 64px); line-height: 1; color: var(--red-btn); }
.letter__body { display: grid; gap: 0; margin-top: 10px; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.85; }
.letter__body p + p { margin-top: .8em; }
.letter__sign { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 40px); }
.letter__yours { font-size: clamp(18px, 1.35vw, 21px); }
.letter__names { font-family: "Kissufim", var(--f); font-weight: 500; font-size: clamp(38px, 3.8vw, 58px); line-height: 1; transform: rotate(-3deg); }
.letter__sign img { width: clamp(110px, 12vw, 160px); height: auto; margin-inline-start: auto; }
@media (max-width: 700px) {
  .letter { rotate: none; box-shadow: 7px 7px 0 var(--ink); padding-top: 140px; }
  .letter__body { line-height: 1.7; }
  .letter__stamp { top: 16px; left: 16px; width: 76px; height: 90px; }
  .letter__post { top: 30px; left: 96px; width: 88px; height: 88px; }
}

/* ---------- קיר ביקורות (כשיש סרטונים): סרטונים כמו פוסטרים, טקסטים כמו גזירי עיתון ---------- */
.rvw__list--wall { gap: clamp(28px, 3vw, 44px); align-items: start; }
.rvw__list--wall .rvw__item + .rvw__item { border-inline-start: 0; }
.rvw__list--wall .rvw__item { padding: 0; }
.rvw__list--wall .rvw__item--video .rvw__vid { max-width: none; }
.rvw__list--wall .rvw__item:not(.rvw__item--video) { padding: clamp(24px, 2.6vw, 38px); background: var(--paper); color: var(--ink); text-align: start; box-shadow: 10px 10px 0 var(--red-btn); rotate: 1.2deg; }
.rvw__list--wall .rvw__item:not(.rvw__item--video):nth-child(even) { rotate: -1.4deg; box-shadow: 10px 10px 0 var(--mustard); }
.rvw__list--wall .rvw__item:not(.rvw__item--video) .rvw__quote { font-family: var(--fd); font-weight: 700; font-size: clamp(32px, 2.8vw, 48px); line-height: 1.02; }
.rvw__list--wall .rvw__item:not(.rvw__item--video) .rvw__more { max-width: none; margin-inline: 0; color: var(--grey); font-size: 18px; }
.rvw__list--wall .rvw__item:not(.rvw__item--video) .rvw__who { font-weight: 800; color: var(--grey); }
.rvw__list--wall .rvw__item:not(.rvw__item--video) .rv-rate { justify-content: flex-start; }
@media (min-width: 1000px) {
  .rvw__list--wall { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.25fr); grid-auto-flow: row dense; }
  .rvw__list--wall .rvw__item--video { grid-column: span 1; grid-row: span 2; }
  .rvw__list--wall .rvw__item:not(.rvw__item--video) { grid-column: 3; }
  /* שלושה סרטונים ומעלה: הסרטונים בשורה אחת כמו שלושה פוסטרים, והטקסטים מתחת, שניים בשורה */
  .rvw__list--wall:has(.rvw__item--video:nth-child(3)) { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row; }
  .rvw__list--wall:has(.rvw__item--video:nth-child(3)) .rvw__item--video { grid-column: span 2; grid-row: auto; }
  .rvw__list--wall:has(.rvw__item--video:nth-child(3)) .rvw__item:not(.rvw__item--video) { grid-column: span 3; margin-top: 18px; }
  /* שלוש ביקורות טקסט: שלוש בשורה */
  .rvw__list--wall:has(.rvw__item--video:nth-child(3)):has(.rvw__item:not(.rvw__item--video) ~ .rvw__item:not(.rvw__item--video) ~ .rvw__item:not(.rvw__item--video)) .rvw__item:not(.rvw__item--video) { grid-column: span 2; }
}
@media (min-width: 700px) and (max-width: 999px) { .rvw__list--wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* פתיחה (דף הבית): במחשב הטקסט על הנייר מיושר לשמאל, אל התפר, והכפתורים מעבר לתפר, על הדיו */
@media (min-width: 1280px) {
  .hero--v2 .hero__copy { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding-inline: var(--pad); }
  .hero--v2 .hero__lead { grid-column: 1; justify-self: end; margin: 0; padding-inline-end: var(--gap); text-align: left; }
  .hero--v2 .hero__copy .ctas { grid-column: 2; justify-self: start; margin: 0; padding-inline-start: var(--gap); }
  .hero--v2 .ctas .link { color: var(--paper); }
  .hero--v2 .ctas .btn--red::before { background: var(--paper); }
  .hero--v2 .ctas .btn--red:hover, .hero--v2 .ctas .btn--red:focus-visible { color: var(--ink); }
}

/* ================= עמוד שירות: בניית אתרים לעסקים ================= */
/* פתיחה: H1 קטן כמו תווית אדומה, והשאלה הגדולה היא <p> בעיצוב הכותרת */
.front__tag { margin-top: 22px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--grey); }
.front .front__h1 { margin-top: 8px; max-width: none; font-family: var(--f); font-weight: 800; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; letter-spacing: .02em; color: var(--red-ink); }
.front__big { margin-top: 10px; max-width: 16ch; font-family: var(--fd); font-weight: 700; font-size: clamp(46px, 6vw, 108px); line-height: .98; text-wrap: balance; }
.front--svc .lead { margin-top: 22px; }
.front__ctas { margin-top: 30px; position: relative; z-index: 2; }
.front__cast { position: relative; z-index: 1; width: auto; height: min(78%, 460px); margin-bottom: 10px; }
.js .front__cast { animation: cast-up 1s cubic-bezier(.3, 1.3, .5, 1) .5s both; }
@keyframes cast-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@media (max-width: 899px) { .front--svc .front__ink { min-height: 220px; } .front__cast { height: 200px; } }

/* תקציר לגוגל ולמנועי AI: פס שקט, קו אדום בצד, כמו ציטוט */
.abstract { --sec: clamp(56px, 7vw, 100px); }
.abstract__box { max-width: 900px; margin-inline: auto; padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 44px); border-inline-start: 6px solid var(--red-btn); background: #FBF7EE; box-shadow: 8px 8px 0 var(--ink); }
.abstract__h { font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 3vw, 46px); line-height: 1.05; }
.abstract__box p { margin-top: 14px; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.8; }

.pts__list--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* סוגי אתרים: 3 ועוד 2 במחשב, כרטיסים כמו חותמות צבעוניות */
.kinds-sec { position: relative; }
.kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 34px); }
@media (min-width: 700px) { .kinds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kinds { grid-template-columns: repeat(6, 1fr); } .kind { grid-column: span 2; } .kind:nth-child(4) { grid-column: 2 / span 2; } }
.kind { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; }
.kind:nth-child(odd) { rotate: -.6deg; }
.kind:nth-child(even) { rotate: .6deg; }
.kind:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--ink); }
.kind--red { background: var(--red-btn); color: #FFF8EE; }
.kind--mustard { background: var(--mustard); color: var(--ink); }
.kind--teal { background: var(--teal); color: #FFF8EE; }
.kind--paper { background: #FBF7EE; color: var(--ink); }
.kind--ink { background: var(--ink); color: var(--paper); }
.kind__top { display: flex; justify-content: space-between; align-items: center; }
.kind__no { font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.kind__ic { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kind__t { font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 2.6vw, 42px); line-height: 1.02; }
.kind__d { font-size: 18px; line-height: 1.65; }

/* אוטומציות: רקע טיל, ותרשים זרימה שהליד עובר בו */
.auto { background: var(--teal); color: #FFF8EE; }
.auto .credit, .auto .lead { color: #FFF8EE; }
.auto__grid { display: grid; gap: clamp(34px, 4vw, 64px); align-items: center; }
@media (min-width: 1000px) { .auto__grid { grid-template-columns: 1.1fr .9fr; } }
.auto__text { display: grid; gap: 18px; }
.auto__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.auto__list li { padding: 12px 14px; background: rgba(20, 18, 16, .22); border-inline-start: 4px solid var(--mustard); font-size: 18px; line-height: 1.55; }
.auto__cta { margin-top: 8px; }
.auto__btn { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.auto__btn::before { background: var(--mustard); }
.auto__btn:hover, .auto__btn:focus-visible { color: var(--ink); }
.flow { margin: 0; padding: clamp(22px, 2.6vw, 36px); background: var(--ink); border: 3px solid #FFF8EE; box-shadow: 10px 10px 0 var(--mustard); rotate: -1deg; }
.flow__track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.flow__step { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #FFF8EE; color: var(--ink); border: 2px solid #FFF8EE; font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 2.2vw, 32px); line-height: 1; }
.flow__ic { flex: none; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.flow__arrow { display: grid; place-items: center; height: 26px; }
.flow__arrow img { width: 20px; height: auto; transform: rotate(180deg); }
/* הליד עובר שלב אחרי שלב: כל תחנה נדלקת באדום בתורה, בלולאה */
@media (prefers-reduced-motion: no-preference) {
  html:not(.a11y-still) .flow.is-in .flow__step { animation: flow-on 6s steps(1) infinite; animation-delay: calc(var(--i) * 1s); }
  html:not(.a11y-still) .flow.is-in .flow__arrow img { animation: flow-arrow 6s ease-in-out infinite; animation-delay: calc(var(--i) * 1s + .5s); }
}
@keyframes flow-on { 0% { background: var(--red-btn); color: #FFF8EE; border-color: var(--mustard); } 16%, 100% { background: #FFF8EE; color: var(--ink); border-color: #FFF8EE; } }
@keyframes flow-arrow { 0%, 12%, 100% { transform: rotate(180deg) translateY(0); } 6% { transform: rotate(180deg) translateY(-6px); } }

/* מוכן לגוגל ולמנועי AI */
.ai-ready__in { display: grid; gap: 34px; align-items: center; }
@media (min-width: 900px) { .ai-ready__in { grid-template-columns: 1.4fr 1fr; } }
.ai-ready__stamps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ai-ready__stamps li { padding: 10px 18px; border: 2px dashed var(--grey); border-radius: 999px; color: var(--grey); font-weight: 800; font-size: 18px; rotate: -3deg; }
.ai-ready__stamps li:nth-child(even) { rotate: 3deg; }

/* דוגמאות לאתרים (זמני, בדומיין הזמני בלבד) */
.sites { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.site-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 28px 22px; border: 2px dashed var(--grey-ink); }
.site-card .mock { position: relative; left: auto; bottom: auto; width: min(58%, 190px); margin-bottom: 14px; color: var(--paper); }
.site-card__t { font-family: var(--fd); font-weight: 700; font-size: 32px; line-height: 1; }
.site-card__m { font-weight: 700; color: var(--mustard); }
.site-card__d { color: var(--grey-ink); }
.site-card__go { margin-top: 8px; padding: 8px 16px; border: 2px solid currentColor; font-weight: 800; opacity: .55; }

/* חוות דעת (טקסט דמה, בדומיין הזמני בלבד) */
.wrevs { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(26px, 3vw, 44px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.wrev { position: relative; padding: 26px 26px 120px; background: #FBF7EE; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--red-btn); overflow: hidden; }
.wrev__q { display: block; font-family: var(--fd); font-size: 90px; line-height: .6; color: var(--red-btn); }
.wrev blockquote { margin: 10px 0 0; font-size: 18px; line-height: 1.65; }
.wrev__who { display: grid; gap: 2px; margin-top: 16px; color: var(--grey); font-size: 15px; }
.wrev__who b { color: var(--ink); font-size: 17px; }
.wrev__kind { margin-top: 4px; justify-self: start; padding: 2px 10px; border: 1.5px solid currentColor; font-weight: 700; font-size: 13px; }
.wrev__cast { position: absolute; left: 14px; bottom: -6px; height: 120px; width: auto; opacity: .9; }

.qa__q { margin: 0; font: inherit; }

/* ---- בניית אתרים, סבב 2 ---- */
/* פתיחה: השאלה הגדולה עוברת על כל הרוחב, גם מעל הדיו, והצבע שלה מתהפך על התפר (כמו בדף הבית) */
.front--svc .front__top { padding-bottom: 0; }
.front--svc .front__bottom { padding-top: 0; }
.front__titles { position: relative; z-index: 2; padding: 14px 0 0; }
.front__titles .front__big { margin: 0; max-width: none; padding-inline: var(--pad); font-size: clamp(50px, 9.4vw, 176px); line-height: .93; }
.front__big--ink { display: none; }
@media (min-width: 900px) {
  .front--svc { grid-template-columns: 1fr 32%; grid-template-rows: auto auto 1fr; }
  .front--svc .front__top { grid-area: 1 / 1; }
  .front--svc .front__ink { grid-area: 1 / 2 / 4 / 3; }
  .front__titles { grid-area: 2 / 1 / 3 / 3; }
  .front__titles .front__big { padding-inline-end: 4vw; color: var(--ink); clip-path: inset(-30% 0 -30% 32%); }
  .front__titles .front__big--ink { display: block; position: absolute; inset: 14px 0 auto 0; color: var(--paper); clip-path: inset(-30% 68% -30% 0); }
  .front--svc .front__bottom { grid-area: 3 / 1; }
  .front--svc .front__cast { height: min(52%, 380px); }
}

/* מה כולל השירות: פס חרדל עם נקודות הדפסה, השאלה ענקית מימין, התשובה ככרטיס נייר משמאל, ודמות שמציצה */
.abstract { position: relative; overflow: hidden; padding: clamp(70px, 9vw, 140px) var(--pad);
  background: radial-gradient(rgba(20, 18, 16, .16) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--mustard); color: var(--ink); border-block: 3px solid var(--ink); }
.abstract__in { position: relative; max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(30px, 4vw, 60px); align-items: center; }
@media (min-width: 1000px) { .abstract__in { grid-template-columns: .9fr 1.1fr; } }
.abstract__q { position: relative; }
.abstract__mark { position: absolute; z-index: 0; inset-inline-end: 0; top: -.3em; font-family: var(--fd); font-weight: 700; font-size: clamp(180px, 22vw, 360px); line-height: 1; color: var(--red-btn); opacity: .9; pointer-events: none; }
.abstract__h { position: relative; z-index: 1; font-family: var(--fd); font-weight: 700; font-size: clamp(46px, 5.6vw, 96px); line-height: .96; max-width: 11ch; }
.abstract__card { position: relative; padding: clamp(26px, 3vw, 44px); background: #FBF7EE; border: 3px solid var(--ink); border-inline-start-width: 10px; border-inline-start-color: var(--red-btn); box-shadow: 12px 12px 0 var(--ink); rotate: -1deg; }
.abstract__card p { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.8; }
.abstract__pin { position: absolute; top: -22px; inset-inline-end: 26px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.abstract__pin img { width: 22px; height: auto; }
.abstract__cast { position: absolute; left: clamp(0px, 2vw, 30px); bottom: calc(-1 * clamp(70px, 9vw, 140px)); height: clamp(120px, 14vw, 220px); width: auto; z-index: 1; }
@media (max-width: 999px) { .abstract__cast { display: none; } }

/* חותמות "AI": בשפה של המותג, כמו חותמות הרשתות והוואטסאפ */
.ai-ready__stamps { gap: clamp(14px, 2vw, 26px); }
.ai-stamp { display: grid; place-items: center; width: clamp(104px, 9vw, 136px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); position: relative; font-family: var(--fd); font-weight: 700; font-size: clamp(20px, 1.7vw, 26px); }
.ai-stamp::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed currentColor; opacity: .6; }
.ai-stamp--red { background: var(--red-btn); color: #FFF8EE; rotate: -8deg; }
.ai-stamp--mustard { background: var(--mustard); color: var(--ink); rotate: 5deg; }
.ai-stamp--teal { background: var(--teal); color: #FFF8EE; rotate: -4deg; }
.ai-stamp--ink { background: var(--ink); color: var(--paper); rotate: 7deg; }
.ai-ready__stamps li.ai-stamp { padding: 0; border-style: solid; border-color: var(--ink); color: inherit; font-size: clamp(20px, 1.7vw, 26px); }
.ai-stamp--red, .ai-stamp--teal { color: #FFF8EE !important; }
.ai-stamp--ink { color: var(--paper) !important; }

/* ---- בניית אתרים: עוד שש דוגמאות קטנות מתחת לשלוש הגדולות ---- */
.minis-wrap { max-width: var(--max); margin: 0 auto; padding: clamp(40px, 6vw, 90px) var(--pad) 0; }
.minis__k { margin-bottom: clamp(22px, 3vw, 36px); font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 3.2vw, 48px); line-height: 1; color: var(--paper); }
.minis { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 2.6vw, 38px); }
@media (min-width: 700px) { .minis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .minis { grid-template-columns: repeat(3, 1fr); } }
.mini { --bg: var(--mustard); --fg: var(--ink); display: flex; flex-direction: column; background: var(--bg); color: var(--fg); border: 3px solid var(--paper); box-shadow: 8px 8px 0 rgb(242 236 224 / .22); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; }
.mini:nth-child(odd) { rotate: -.5deg; }
.mini:nth-child(even) { rotate: .5deg; }
.mini--teal { --bg: var(--teal); --fg: #FFF8EE; }
.mini--red { --bg: var(--red-btn); --fg: #FFF8EE; }
.mini--paper { --bg: #FBF7EE; }
.mini__win { margin: 16px 16px 0; background: var(--paper); border: 3px solid var(--ink); }
.mini__bar { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: var(--ink); color: var(--paper); font-size: 11px; direction: ltr; }
.mini__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); opacity: .6; }
.mini__bar span { margin-inline-start: 6px; opacity: .75; }
.mini__screen { aspect-ratio: 16 / 10.5; overflow: hidden; container-type: inline-size; }
.mini__screen img { display: block; width: 100%; height: auto; transition: transform 3.2s cubic-bezier(.45, 0, .3, 1); }
/* כשמרחפים, האתר נגלל בתוך המסגרת כמו גלילה אמיתית */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mini:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 rgb(242 236 224 / .32); }
  html:not(.a11y-still) .mini:hover .mini__screen img { transform: translateY(calc(-100% + 65.625cqw)); }
}
.mini__body { position: relative; display: grid; gap: 6px; padding: 18px 20px 22px; }
.mini__no { position: absolute; inset-inline-end: 18px; top: 14px; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.mini__t { font-family: var(--fd); font-weight: 700; font-size: clamp(28px, 2.3vw, 36px); line-height: 1; }
.mini__k { font-size: 15px; font-weight: 700; }
.mini__chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mini__chips li { padding: 2px 10px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; }
.minis__hint { display: none; }
/* נייד: שורה אחת שמחליקים הצידה, כרטיס וחצי על המסך כדי שיהיה ברור שיש עוד */
@media (max-width: 699px) {
  .minis { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--pad)); padding: 6px var(--pad) 22px; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .minis::-webkit-scrollbar { display: none; }
  .mini { scroll-snap-align: start; rotate: none !important; }
  .minis__hint { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--paper); opacity: .7; }
}

/* חותמות ה-AI: ריבוע של 2×2, הטור השני יורד חצי חותמת, כמו חותמות שהוטבעו על דף (במקום 3 ועוד 1) */
.ai-ready__stamps { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; align-items: start; gap: clamp(16px, 2vw, 28px) clamp(18px, 2.4vw, 34px); padding-bottom: clamp(40px, 4.5vw, 70px); }
.ai-ready__stamps li.ai-stamp:nth-child(even) { translate: 0 clamp(40px, 4.5vw, 70px); }

/* ================= עמודי שירות חדשים (אוטומציות, חנות אינטרנטית), בשפה של עמוד בניית אתרים ================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.in-link { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.qa p a { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* כרטיסים ממוספרים: 3 בשורה במחשב, 2 בטאבלט, אחד בנייד */
.pts__list--3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .pts__list--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pts__list--3 { grid-template-columns: repeat(3, 1fr); } }

/* חותמות צבעוניות, שלוש בשורה */
@media (min-width: 1100px) { .kinds--3 { grid-template-columns: repeat(3, 1fr); } .kinds--3 .kind, .kinds--3 .kind:nth-child(4) { grid-column: auto; } }
.kind__mark { width: 30px; height: auto; }
.kind--red .kind__mark, .kind--teal .kind__mark, .kind--ink .kind__mark { filter: brightness(0) invert(1); }
.kind .in-link { text-decoration-color: currentColor; }

/* "מכירים את זה?": הכותרת מימין, הרשימה משמאל */
@media (min-width: 1000px) { .signs__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; } .signs__in .head { position: sticky; top: calc(var(--top-h) + 30px); display: block; } .signs__in .head .lead { margin-top: 22px; } }
.checks { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: flex; align-items: flex-start; gap: 16px; padding: 18px 22px; background: #FBF7EE; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; transition-delay: calc(var(--i) * .08s); }
.checks li:nth-child(odd) { rotate: -.4deg; }
.checks li:nth-child(even) { rotate: .4deg; }
.checks__mark { flex: none; width: 24px; height: auto; margin-top: .2em; }

/* טבלה אמיתית בסגנון כרטיס נייר */
.vtab-wrap { margin-top: clamp(26px, 3vw, 44px); }
.vtab { width: 100%; border-collapse: separate; border-spacing: 0; background: #FBF7EE; color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); font-size: 18px; line-height: 1.55; }
.auto .vtab { box-shadow: 10px 10px 0 var(--mustard); }
.vtab th, .vtab td { padding: 16px 20px; text-align: start; vertical-align: top; border-bottom: 1.5px solid rgb(20 18 16 / .18); }
.vtab tbody tr:last-child > * { border-bottom: 0; }
.vtab thead th { background: var(--ink); color: var(--paper); font-family: var(--fd); font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.05; }
.vtab thead th:last-child { background: var(--red-btn); color: #FFF8EE; }
.vtab tbody th { width: 24%; font-weight: 800; }
.vtab-after { margin-top: clamp(26px, 3vw, 40px); max-width: 60ch; }
.duo-text .lead { max-width: 64ch; }
@media (max-width: 699px) {
  .vtab, .vtab tbody, .vtab tr, .vtab th, .vtab td { display: block; width: auto; }
  .vtab { background: none; border: 0; box-shadow: none; }
  .vtab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vtab tbody { display: grid; gap: 18px; }
  .vtab tr { background: #FBF7EE; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
  .vtab tbody th { width: auto; background: var(--ink); color: var(--paper); font-family: var(--fd); font-size: 24px; line-height: 1.1; }
  .vtab td { border-bottom: 1.5px solid rgb(20 18 16 / .18); }
  .vtab td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--red-ink); }
  .vtab tr > :last-child { border-bottom: 0; }
}

/* גשר לעמוד אחר: פס אדום עם כפתור נייר */
.bridge { padding: clamp(50px, 6vw, 90px) var(--pad); background: var(--red-btn); color: #FFF8EE; border-block: 3px solid var(--ink); }
.bridge__in { max-width: var(--max); margin: 0 auto; display: grid; gap: 18px; align-items: center; }
@media (min-width: 1000px) { .bridge__in { grid-template-columns: auto 1fr auto; gap: clamp(30px, 4vw, 70px); } }
.bridge__h { font-family: var(--fd); font-weight: 700; font-size: clamp(40px, 4.4vw, 72px); line-height: .95; max-width: 9ch; }
.bridge__p { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.7; max-width: 52ch; }
.bridge__btn { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.bridge__btn::before { background: var(--mustard); }
.bridge__btn:hover, .bridge__btn:focus-visible { color: var(--ink); }

/* הירו של החנות: טלפון עם עמוד מוצר */
.pmock { position: relative; z-index: 1; margin: 0 0 18px; display: grid; place-items: end center; }
.pmock__phone { position: relative; width: clamp(170px, 15vw, 230px); padding: 10px; border-radius: 34px; background: var(--paper); box-shadow: 12px 12px 0 var(--red-btn); rotate: -4deg; }
.js .pmock__phone { animation: cast-up 1s cubic-bezier(.3, 1.3, .5, 1) .5s both; }
.pmock__notch { position: absolute; top: 16px; left: 50%; translate: -50% 0; width: 34%; height: 6px; border-radius: 6px; background: var(--ink); z-index: 1; }
.pmock__screen { display: flex; flex-direction: column; gap: 10px; padding: 34px 14px 16px; border-radius: 25px; background: #FBF7EE; border: 3px solid var(--ink); aspect-ratio: 9 / 18; }
.pmock__img { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(rgba(20, 18, 16, .2) 1.1px, transparent 1.5px) 0 0 / 9px 9px, var(--mustard); border: 2px solid var(--ink); color: var(--ink); }
.pmock__img svg { width: 70%; }
.pmock__line { height: 8px; width: 60%; background: var(--ink); opacity: .25; border-radius: 4px; }
.pmock__line--t { width: 80%; height: 12px; opacity: .85; }
.pmock__dots { display: flex; gap: 6px; }
.pmock__dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); background: var(--teal); }
.pmock__dots i:nth-child(2) { background: var(--red-btn); }
.pmock__dots i:nth-child(3) { background: var(--paper); }
.pmock__btn { margin-top: auto; padding: 10px 6px; background: var(--red-btn); color: #FFF8EE; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); text-align: center; font-weight: 800; font-size: 15px; }
@media (max-width: 899px) { .pmock__phone { width: 150px; padding: 8px; border-radius: 28px; } .pmock__screen { padding-top: 28px; gap: 8px; } }

/* חנות לדוגמה: טקסט ורשימה, ולצדם מחשב וטלפון */
.show__in { display: grid; gap: clamp(40px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .show__in { grid-template-columns: .95fr 1.05fr; } }
.show__text .lead { margin-top: 22px; }
.show__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.show__list li { padding: 12px 14px; border-inline-start: 4px solid var(--mustard); background: rgb(242 236 224 / .07); font-size: 18px; line-height: 1.55; }
.show__go { margin-top: 28px; }
.show__go .link { color: var(--paper); }
.show__stage { position: relative; padding-bottom: 60px; }
.show__win { width: 88%; background: var(--paper); border: 4px solid var(--paper); box-shadow: 14px 14px 0 var(--red-btn); rotate: 1deg; }
.show__screen { aspect-ratio: 16 / 10.5; overflow: hidden; container-type: inline-size; }
.show__screen img, .show__pscreen img { display: block; width: 100%; height: auto; transition: transform 4s cubic-bezier(.45, 0, .3, 1); }
.show__phone { position: absolute; left: 0; bottom: 0; width: clamp(120px, 24%, 190px); padding: 8px; border-radius: 28px; background: var(--ink); border: 3px solid var(--paper); box-shadow: 8px 8px 0 var(--mustard); rotate: -4deg; }
.show__notch { position: absolute; top: 14px; left: 50%; translate: -50% 0; width: 30%; height: 5px; border-radius: 5px; background: var(--ink); z-index: 1; }
.show__pscreen { aspect-ratio: 390 / 844; overflow: hidden; border-radius: 20px; container-type: inline-size; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.a11y-still) .show__stage:hover .show__screen img { transform: translateY(calc(-100% + 65.625cqw)); }
  html:not(.a11y-still) .show__stage:hover .show__pscreen img { transform: translateY(calc(-100% + 216.4cqw)); }
}

/* חיבורים: שמות בטקסט בלבד, בלי לוגואים */
.ints { list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.ints li { padding: 10px 16px; border: 2px dashed var(--grey); color: var(--grey); font-size: 16px; line-height: 1.5; }
.ints li b { color: var(--ink); }

/* מעבר מחנות ישנה: פס בהיר, מסך ישן → מסך חדש */
.move { padding: clamp(50px, 6vw, 90px) var(--pad); background: #FBF7EE; border-block: 3px solid var(--ink); }
.move__in { max-width: var(--max); margin: 0 auto; display: grid; gap: clamp(26px, 3vw, 50px); align-items: center; }
@media (min-width: 900px) { .move__in { grid-template-columns: auto 1fr; } }
.move__art { display: flex; align-items: center; gap: 14px; }
.move__art img { width: 34px; height: auto; transform: rotate(180deg); }
.move__scr { width: 92px; aspect-ratio: 4 / 3; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.move__scr--old { background: repeating-linear-gradient(-45deg, var(--paper) 0 6px, #d8d1c3 6px 8px); rotate: -4deg; }
.move__scr--new { background: linear-gradient(var(--ink) 0 18%, var(--mustard) 18%); rotate: 3deg; }
.move__h { margin-top: 10px; font-family: var(--fd); font-weight: 700; font-size: clamp(34px, 3.6vw, 60px); line-height: 1; }
.move__p { margin-top: 14px; max-width: 70ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.7; }

/* ---- 8 שירותים: לוח שירותים בתפריט העליון, ורשימה בתפריט הנייד ---- */
.top__drop { position: relative; display: inline-flex; }
.drop { position: absolute; z-index: 5; top: calc(100% + 14px); inset-inline-start: -18px; width: 330px; margin: 0; padding: 10px; list-style: none; background: var(--paper); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); rotate: -1deg; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .35s var(--snap), visibility 0s .35s; }
.drop::before { content: ""; position: absolute; inset: -18px 0 auto; height: 18px; } /* גשר לעכבר בין הקישור ללוח */
.top__drop:hover .drop, .top__drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .35s var(--snap); }
.drop a { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; font-family: var(--f); font-size: 17px; font-weight: 700; text-decoration: none; border-bottom: 1.5px dashed rgb(20 18 16 / .25); }
.drop li:last-child a { border-bottom: 0; }
.top__nav .drop a::after { display: none; }
.drop a:hover, .drop a:focus-visible { background: var(--ink); color: var(--paper); }
.drop__no { flex: none; font-size: 11px; font-weight: 800; color: var(--red-btn); letter-spacing: .04em; }
.drop a:hover .drop__no, .drop a:focus-visible .drop__no { color: var(--mustard); }
.menu { overflow-y: auto; }
.menu__svcs { list-style: none; margin: 6px 0 14px; padding: 0 0 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.menu .menu__svcs a { gap: 8px; padding-block: 8px; border-bottom: 1px dashed #3A3631; font-family: var(--f); font-size: 15px; font-weight: 700; line-height: 1.3; }
.menu__svcs__no { flex: none; font-size: 11px; font-weight: 800; color: var(--mustard); }
@media (max-width: 380px) { .menu__svcs { grid-template-columns: 1fr; } }

/* דף הבית ועמוד השירותים: 4 כרטיסים בשורה (8 שירותים = שתי שורות), 2 בטאבלט, אחד בנייד */
@media (min-width: 1101px) {
  .svcs { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2vw, 32px); }
  .svc:nth-child(3n + 2) { margin-top: 0; }
  .svc:nth-child(even) { margin-top: clamp(16px, 2vw, 32px); }
  .svc__art { height: clamp(180px, 14vw, 230px); }
  .svc__t { font-size: clamp(28px, 2.2vw, 38px); }
  .svc__d { font-size: 16px; }
}
@media (max-width: 1100px) and (min-width: 641px) { .svcs { grid-template-columns: repeat(2, 1fr); } .svc:nth-child(3n + 2) { margin-top: 0; } .svc:nth-child(even) { margin-top: clamp(16px, 3vw, 30px); } }

/* ---- עמודי שירות: פס מספרים, כרטיסי מסלולים, טקסט ורשימה ---- */
.stats { list-style: none; margin: clamp(30px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(26px, 3vw, 50px); }
@media (min-width: 700px) { .stats--2 { grid-template-columns: repeat(2, 1fr); } .stats--3 { grid-template-columns: repeat(3, 1fr); } .stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .stats--4 { grid-template-columns: repeat(4, 1fr); } }
.stats li { display: grid; gap: 10px; padding-top: 18px; border-top: 3px solid var(--mustard); transition-delay: calc(var(--i) * .1s); }
.stats__v { font-family: var(--fd); font-weight: 700; font-size: clamp(56px, 6vw, 104px); line-height: .9; color: var(--paper); }
.stats__l { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; color: var(--grey-ink); max-width: 28ch; }
.stats__after { margin-top: clamp(30px, 4vw, 54px); max-width: 70ch; }
.offers { list-style: none; margin: clamp(30px, 4vw, 50px) 0 0; padding: 0; display: grid; gap: clamp(22px, 2.6vw, 38px); }
@media (min-width: 800px) { .offers--2 { grid-template-columns: repeat(2, 1fr); } .offers--3, .offers--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .offers--3 { grid-template-columns: repeat(3, 1fr); } .offers--4 { grid-template-columns: repeat(4, 1fr); } }
.offer { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 38px); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); transition-delay: calc(var(--i) * .1s); }
.offer--ink { background: var(--ink); color: var(--paper); box-shadow: 10px 10px 0 var(--red-btn); }
.offer--paper { background: #FBF7EE; color: var(--ink); }
.offer--mustard { background: var(--mustard); color: var(--ink); }
.offer--teal { background: var(--teal); color: #FFF8EE; }
.offer--red { background: var(--red-btn); color: #FFF8EE; }
.offer__t { font-family: var(--fd); font-weight: 700; font-size: clamp(32px, 2.8vw, 46px); line-height: 1; }
.offer__d { font-size: 18px; line-height: 1.65; }
.offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.offer__list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.5; }
.offer__list li::before { content: ""; flex: none; width: 3px; height: 1.1em; margin-top: .25em; background: var(--red); }
.offer--ink .offer__list li::before, .offer--red .offer__list li::before { background: var(--mustard); }
.offer__go { margin-top: auto; padding-top: 10px; }
.offer--paper .btn, .offer--mustard .btn { background: var(--ink); color: var(--paper); }
.offer .in-link { text-decoration-color: currentColor; }
@media (min-width: 1000px) { .tl__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 90px); align-items: start; } .tl__in .head { display: block; position: sticky; top: calc(var(--top-h) + 30px); } }
.tl__body { display: grid; gap: 18px; }
.tl__body .checks { margin-top: 6px; }

/* ---- עמודי שירות (שלב 3): תוספות קטנות לכל עמוד ---- */
/* branding */
/* עמוד מיתוג (service-branding.mjs): מסגרות ריקות זמניות לסליידר העבודות ולסיפורי המיתוג (דומיין זמני בלבד) */
/* seo-geo */
/* עמוד קידום אתרים: כותרת H3 "SEO מול GEO" מעל טבלת ההשוואה, וגוף הסקשן ברוחב קריא */
.seo-geo__body { max-width: 980px; }
.seo-geo__h3 { margin: clamp(30px, 4vw, 54px) 0 0; font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 3vw, 48px); line-height: 1.05; }
/* social-content */
/* עמוד ניהול סושיאל: תוספות קטנות בלבד, על בסיס .show / .pmock / .pts הקיימים */

/* שורת הצילום מתחת לגריד "מה כולל", בטקסט קטן */
.sc-fine { margin: clamp(24px, 3vw, 40px) 0 0; font-size: 15px; line-height: 1.6; color: var(--grey-ink, inherit); }

/* מערכת האישורים: שלושה צעדים ממוספרים ליד איור כללי */
.sc-approve__steps li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.sc-approve__n { font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--mustard); }
.sc-approve__key { margin-top: 26px; font-size: clamp(20px, 1.6vw, 24px); }
.sc-approve__stage { display: grid; place-items: center; }
.sc-approve .pmock__phone { width: clamp(210px, 20vw, 280px); }
.sc-approve__short { width: 40%; }
.sc-approve__btns { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-approve__btns .pmock__btn { margin-top: 0; }
.sc-approve__btns .sc-approve__note { background: var(--paper); color: var(--ink); }
@media (max-width: 899px) { .sc-approve .pmock__phone { width: 180px; } }
/* strategy */
/* עמוד אסטרטגיה שיווקית: מסלול לארגונים על רקע דיו, רשימה בשתי עמודות בדסקטופ */
.strategy-org__h { margin: clamp(30px, 4vw, 50px) 0 0; font: 700 clamp(24px, 2.2vw, 32px)/1.3 var(--fd); }
.strategy-org .checks li { color: var(--ink); box-shadow: 6px 6px 0 var(--mustard); }
@media (min-width: 900px) { .strategy-org .checks { grid-template-columns: 1fr 1fr; column-gap: clamp(22px, 2.6vw, 38px); } }
.strategy-go { margin: clamp(26px, 3vw, 40px) 0 0; }
.strategy-org__note { margin: clamp(30px, 4vw, 50px) 0 0; font-size: 18px; color: var(--grey-ink); }
.strategy-more { margin-top: clamp(30px, 4vw, 50px); }
/* כרטיסי הרשימה תמיד על נייר, אז הטקסט תמיד בדיו, גם בפסים כהים או טורקיז */
.checks li { color: var(--ink); }
.ink .checks li, .auto .checks li { box-shadow: 6px 6px 0 var(--mustard); }
/* ארבע התחנות על רקע נייר: לתחנה הבהירה יש מסגרת דיו, כדי שלא תיעלם ברקע */
.sec:not(.ink) .step--paper .step__card { box-shadow: inset 0 0 0 3px var(--ink); }
.kinds-more { margin-top: clamp(30px, 3.4vw, 48px); max-width: 60ch; }

/* ---- טפסים ייעודיים ועמודי יזמים ושותפים ---- */
.field textarea, .field select { width: 100%; min-height: 56px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 0; background: #FBF8F2; color: var(--ink); font: 600 18px/1.5 var(--f); }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-position: 18px 50%, 24px 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field textarea:focus-visible, .field select:focus-visible { outline: 3px solid #141210; outline-offset: 2px; box-shadow: 6px 6px 0 var(--red); }
.field.is-bad textarea, .field.is-bad select { border-color: var(--red-ink); }
.apply__big { font-size: clamp(48px, 6vw, 104px); line-height: .95; }
@media (min-width: 900px) { .checks--2 { grid-template-columns: 1fr 1fr; } }
.checks a { color: inherit; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fit { display: grid; gap: clamp(22px, 2.6vw, 38px); margin-top: clamp(26px, 3vw, 44px); }
@media (min-width: 900px) { .fit { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.fit .checks { margin-top: 0; }
.fit__no { padding: clamp(22px, 2.6vw, 34px); background: var(--ink); color: var(--paper); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--grey); }
.fit__no h3 { font-family: var(--fd); font-weight: 700; font-size: clamp(28px, 2.4vw, 38px); line-height: 1; }
.fit__no ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.fit__no li { display: flex; gap: 12px; font-size: 18px; line-height: 1.55; color: var(--grey-ink); }
.fit__no li::before { content: "×"; flex: none; font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--grey-ink); }
.secret { padding: clamp(46px, 5.5vw, 80px) var(--pad); background: var(--ink); color: var(--paper); border-block: 3px solid var(--ink); }
.secret__in { max-width: var(--max); margin: 0 auto; display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .secret__in { grid-template-columns: auto 1fr; gap: clamp(30px, 4vw, 60px); } }
.secret__ic { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--mustard); color: var(--ink); border: 3px solid var(--paper); box-shadow: 5px 5px 0 var(--red-btn); }
.secret__ic svg { width: 34px; height: 34px; }
.secret__h { font-family: var(--fd); font-weight: 700; font-size: clamp(36px, 4vw, 66px); line-height: 1; }
.secret__p { margin-top: 12px; max-width: 60ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.7; color: var(--grey-ink); }
.go-row { margin-top: clamp(24px, 3vw, 40px); }
/* עמוד השירותים: האיור של יניב ואורי בפתיחה, ובריחוף או בלחיצה התמונה האמיתית (כמו בדף הבית) */
.front__flip { position: relative; z-index: 1; height: min(80%, 470px); margin-bottom: 10px; }
.js .front__flip { animation: cast-up 1s cubic-bezier(.3, 1.3, .5, 1) .5s both; }
@media (max-width: 899px) { .front__flip { height: 210px; } .front__flip .duo__hint { font-size: 13px; bottom: 8px; } }
/* כרטיס "בניית חנות אינטרנטית": הטלפון מעמוד החנות במקום דמות */
.svc__fig--phone { display: flex; align-items: flex-end; justify-content: center; }
.svc__fig--phone .pmock__phone { width: auto; height: 100%; aspect-ratio: 9 / 18.6; padding: 7px; border-radius: 22px; background: var(--paper); box-shadow: 8px 8px 0 var(--ink); rotate: -4deg; animation: none; }
.svc__fig--phone .pmock__notch { top: 12px; height: 4px; }
.svc__fig--phone .pmock__screen { height: 100%; aspect-ratio: auto; gap: 7px; padding: 22px 9px 10px; border-radius: 16px; }
.svc__fig--phone .pmock__line--t { height: 8px; }
.svc__fig--phone .pmock__line { height: 6px; }
.svc__fig--phone .pmock__dots i { width: 11px; height: 11px; }
.svc__fig--phone .pmock__btn { padding: 6px 4px; font-size: 12px; }
/* תפריט נייד: "שירותים" בשורה אחת עם פלוס שפותח את שמונת השירותים. הדמויות למטה בזרימה, לא מעל התוכן */
.menu li:has(.menu__more) { position: relative; }
.menu li:has(.menu__more) > a { padding-inline-end: 64px; }
.menu__more { position: absolute; top: 50%; inset-inline-end: 0; translate: 0 -50%; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border-radius: 50%; border: 2.5px solid var(--paper); background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--mustard); cursor: pointer; }
.menu li:has(.menu__more[aria-expanded="true"]) .menu__more { top: 36px; }
.menu__plus { position: relative; width: 18px; height: 18px; }
.menu__plus::before, .menu__plus::after { content: ""; position: absolute; inset: 7.5px 0 auto; height: 3px; background: currentColor; transition: transform .3s var(--snap); }
.menu__plus::after { transform: rotate(90deg); }
.menu__more[aria-expanded="true"] .menu__plus::after { transform: rotate(0); }
.menu li:has(.menu__more) .menu__arrow { display: none; }
.menu__drawer { padding: 4px 0 14px; }
.menu__drawer .menu__svcs { margin: 0; }
.menu .street { position: relative; inset: auto; flex: none; margin-top: auto; }
.menu ol { margin-bottom: 30px; }
/* קיר ההמלצות: ארבעה טקסטים = שניים בשורה, בשתי שורות */
@media (min-width: 1000px) {
  .rvw__list--wall:has(.rvw__item--video:nth-child(3)):has(.rvw__item:not(.rvw__item--video) ~ .rvw__item:not(.rvw__item--video) ~ .rvw__item:not(.rvw__item--video) ~ .rvw__item:not(.rvw__item--video)) .rvw__item:not(.rvw__item--video) { grid-column: span 3; }
}
/* תפריט עליון עם ארבעה פריטים: בלי שבירת שורות במחשבים צרים */
.top__nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1240px) { .top__nav { gap: 16px; } .top__nav a { font-size: 18px; } .top__no { display: none; } }
@media (min-width: 861px) and (max-width: 980px) { .top__nav { gap: 12px; } .top__nav a { font-size: 16.5px; } .top__end .btn { font-size: 14px; padding-inline: .8em; } }
/* הולכים גם באמצע עמודי השירות: קו אופק עם דמויות בתחתית של סקשן הכרטיסים */
.sec:has(> .street) { position: relative; }

/* ---- הפסקות ויזואליות בעמודי השירות (ניסוי בעמוד הקידום) ---- */
/* אינפוגרפיקה: פס אדום עם תוצאות חיפוש שבהן האתר מטפס למקום הראשון, ולצדן שיחה עם מנוע AI שממליץ עליכם */
.viz { padding: clamp(50px, 6vw, 90px) max(16px, env(safe-area-inset-right, 0px)) clamp(50px, 6vw, 90px) max(16px, env(safe-area-inset-left, 0px)); background: radial-gradient(rgba(20, 18, 16, .18) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--red-btn); border-block: 3px solid var(--ink); }
.viz__in { max-width: 1080px; margin: 0 auto; display: grid; gap: clamp(26px, 3vw, 44px); align-items: center; }
@media (min-width: 900px) { .viz__in { grid-template-columns: 1.15fr .85fr; } }
.serp, .chat { margin: 0; background: #FBF7EE; color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
.serp { rotate: -1deg; }
.chat { rotate: 1.2deg; box-shadow: 10px 10px 0 var(--mustard); }
.serp__bar { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 16px; }
.serp__bar svg { width: 20px; height: 20px; margin-inline-start: auto; }
.serp__g { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--fd); font-size: 18px; line-height: 1; }
.serp__list { --row: 62px; position: relative; list-style: none; margin: 0 14px 18px; padding: 0; height: calc(var(--row) * 5); }
.serp__r { position: absolute; inset-inline: 0; top: calc(var(--from) * var(--row)); height: calc(var(--row) - 10px); display: grid; align-content: center; justify-items: start; gap: 5px; padding: 0 14px; border-bottom: 1.5px dashed #D9D0BF; transition: top 1.1s cubic-bezier(.6, 0, .25, 1) .5s; }
.serp__url { width: 34%; height: 6px; background: var(--teal); opacity: .55; }
.serp__title { width: 72%; height: 11px; background: var(--ink); opacity: .75; }
.serp__line { width: 88%; height: 6px; background: var(--ink); opacity: .2; }
.serp__r--you { z-index: 1; grid-template-columns: auto 1fr; column-gap: 12px; background: var(--paper); border: 3px solid var(--red-btn); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink); }
.serp__r--you .serp__line { grid-column: 2; }
.serp__pos { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--red-btn); color: #FFF8EE; font-family: var(--fd); font-size: 24px; line-height: 1; opacity: 0; transform: scale(.4); transition: opacity .3s ease 1.5s, transform .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s; }
.serp__name { font-family: var(--fd); font-weight: 700; font-size: 26px; line-height: 1; color: var(--red-ink); }
.serp.is-in .serp__r { top: calc(var(--to) * var(--row)); }
.serp.is-in .serp__pos { opacity: 1; transform: none; }
.chat__head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.chat__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mustard); }
.chat__body { display: grid; gap: 14px; padding: 18px; }
.chat__q { justify-self: start; max-width: 85%; padding: 10px 14px; background: var(--teal); color: #FFF8EE; border-radius: 16px 16px 4px 16px; font-weight: 700; font-size: 17px; line-height: 1.4; }
.chat__a { position: relative; justify-self: end; width: 88%; min-height: 96px; padding: 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px 16px 16px 4px; }
.chat__typing { position: absolute; inset-inline-start: 16px; top: 16px; display: flex; gap: 6px; transition: opacity .3s ease 1.6s; }
.chat__typing i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .35; animation: chat-dot 1s ease-in-out infinite; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 50% { opacity: .9; transform: translateY(-3px); } }
.chat__ans { display: grid; gap: 8px; justify-items: start; opacity: 0; transform: translateY(8px); transition: opacity .5s ease 1.8s, transform .6s var(--snap) 1.8s; }
.chat__line { width: 100%; height: 7px; background: var(--ink); opacity: .22; }
.chat__line--s { width: 60%; }
.chat__you { padding: 4px 12px; background: var(--red-btn); color: #FFF8EE; font-family: var(--fd); font-weight: 700; font-size: 24px; line-height: 1.1; box-shadow: 3px 3px 0 var(--ink); }
.chat.is-in .chat__typing { opacity: 0; }
.chat.is-in .chat__ans { opacity: 1; transform: none; }
/* מי שביקש פחות תנועה: התמונה הסופית מיד */
@media (prefers-reduced-motion: reduce) { .serp__r { top: calc(var(--to) * var(--row)); transition: none; } .serp__pos, .chat__ans { opacity: 1; transform: none; transition: none; } .chat__typing { display: none; } }
html.a11y-still .serp__r { top: calc(var(--to) * var(--row)); transition: none; }
html.a11y-still .serp__pos, html.a11y-still .chat__ans { opacity: 1; transform: none; transition: none; }
html.a11y-still .chat__typing { display: none; }
@media (max-width: 520px) { .serp__list { --row: 54px; } .serp__name { font-size: 22px; } }

/* פס ציטוט: משפט חזק מתוך הטקסט, ענק, כמו שלט */
.bigq { padding: clamp(50px, 6vw, 96px) max(16px, env(safe-area-inset-right, 0px)) clamp(50px, 6vw, 96px) max(16px, env(safe-area-inset-left, 0px)); border-block: 3px solid var(--ink); }
.bigq--mustard { background: radial-gradient(rgba(20, 18, 16, .16) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--mustard); color: var(--ink); }
.bigq--ink { background: var(--ink); color: var(--paper); }
.bigq__in { position: relative; max-width: 1080px; margin: 0 auto; }
.bigq__mark { position: absolute; inset-inline-start: -.05em; top: -.35em; font-family: var(--fd); font-weight: 700; font-size: clamp(140px, 16vw, 260px); line-height: 1; color: var(--red-btn); opacity: .9; }
.bigq__t { position: relative; max-width: 21ch; padding-inline-start: clamp(56px, 8vw, 120px); font-family: var(--fd); font-weight: 700; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; text-wrap: balance; }

/* ---- אינפוגרפיקות לכל עמודי השירות (svc-viz.mjs) ---- */
.viz--teal { background: radial-gradient(rgba(0, 0, 0, .16) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--teal); }
.viz--mustard { background: radial-gradient(rgba(20, 18, 16, .16) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--mustard); }
.viz--ink { background: radial-gradient(rgba(242, 236, 224, .1) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--ink); }
.viz__in--single { grid-template-columns: 1fr !important; justify-items: center; }
.viz__in--single > figure { width: min(100%, 560px); }
.viz--mustard .flow { box-shadow: 10px 10px 0 var(--red-btn); }

/* קמפיינים: מודעה ומשפך */
.admock { margin: 0; display: grid; gap: 10px; padding: 14px; background: #FBF7EE; color: var(--ink); border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--mustard); rotate: -1.4deg; max-width: 360px; justify-self: center; width: 100%; }
.admock__head { display: flex; align-items: center; gap: 10px; }
.admock__av { width: 34px; height: 34px; border-radius: 50%; background: var(--red-btn); border: 2px solid var(--ink); }
.admock__who { display: grid; gap: 3px; }
.admock__who b { width: 90px; height: 9px; background: var(--ink); }
.admock__who i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--grey); }
.admock__img { aspect-ratio: 3 / 2; display: grid; place-items: end center; overflow: hidden; background: var(--mustard); color: var(--teal); border: 2px solid var(--ink); }
.admock__img svg { width: 100%; height: auto; }
.admock__line { height: 8px; width: 92%; background: var(--ink); opacity: .2; }
.admock__line--s { width: 60%; }
.admock__cta { justify-self: stretch; padding: 9px; text-align: center; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 15px; }
.funnel { position: relative; margin: 0; padding: 22px 18px; background: #FBF7EE; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); rotate: 1deg; overflow: hidden; }
.funnel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: center; }
.funnel__row { width: 100%; display: grid; justify-items: center; }
.funnel__row:nth-child(1) .funnel__bar { --w: 100%; background: var(--ink); color: var(--paper); }
.funnel__row:nth-child(2) .funnel__bar { --w: 78%; background: var(--teal); color: #FFF8EE; }
.funnel__row:nth-child(3) .funnel__bar { --w: 56%; background: var(--mustard); color: var(--ink); }
.funnel__row:nth-child(4) .funnel__bar { --w: 36%; background: var(--red-btn); color: #FFF8EE; }
.funnel__bar { width: var(--w); padding: 12px 8px; text-align: center; font-family: var(--fd); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; border: 2px solid var(--ink); transform: scaleX(.15); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1), opacity .3s ease; transition-delay: calc(.3s + var(--i) * .35s); }
.funnel.is-in .funnel__bar { transform: none; opacity: 1; }
.funnel__drop { position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red-btn); border: 2px solid var(--ink); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { html:not(.a11y-still) .funnel.is-in .funnel__drop { animation: funnel-drop 3.3s cubic-bezier(.5, 0, .7, 1) infinite; animation-delay: calc(1.8s + var(--d, 0s)); } }
@keyframes funnel-drop { 0% { opacity: 0; transform: translateY(0) scale(.8); } 10% { opacity: 1; } 85% { opacity: 1; transform: translateY(calc(var(--fall, 210px))) scale(1); } 100% { opacity: 0; transform: translateY(calc(var(--fall, 210px) + 20px)) scale(.6); } }

/* סושיאל: פיד ושבוע */
.feed { margin: 0; padding: 14px; background: #FBF7EE; border: 3px solid var(--paper); border-radius: 28px; box-shadow: 10px 10px 0 var(--red-btn); max-width: 340px; width: 100%; justify-self: center; rotate: -2deg; }
.feed__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.feed__av { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--red-btn); background: var(--mustard); }
.feed__name { width: 110px; height: 10px; background: var(--ink); }
.feed__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.feed__tile { aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--ink); transform: scale(.2); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; transition-delay: calc(.2s + var(--i) * .12s); }
.feed__tile svg { width: 40%; }
.feed__tile--red { background: var(--red-btn); color: #FFF8EE; } .feed__tile--paper { background: var(--paper); color: var(--ink); } .feed__tile--teal { background: var(--teal); color: #FFF8EE; } .feed__tile--mustard { background: var(--mustard); color: var(--ink); } .feed__tile--ink { background: var(--ink); color: var(--paper); }
.feed.is-in .feed__tile { transform: none; opacity: 1; }
.week { margin: 0; padding: 18px; background: #FBF7EE; border: 3px solid var(--paper); box-shadow: 10px 10px 0 var(--mustard); rotate: 1.4deg; }
.week__days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week__day { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 120px; padding: 8px 2px; border: 2px solid var(--ink); background: var(--paper); }
.week__day b { font-family: var(--fd); font-size: 26px; line-height: 1; }
.week__stamp { position: absolute; bottom: 12px; left: 50%; padding: 4px 6px; background: var(--red-btn); color: #FFF8EE; border: 2px solid var(--ink); font-weight: 800; font-size: 13px; transform: translateX(-50%) rotate(-10deg) scale(2.2); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; transition-delay: 1.4s; }
.week__day--post:nth-child(4) .week__stamp { transition-delay: 1.9s; }
.week.is-in .week__stamp { transform: translateX(-50%) rotate(-10deg); opacity: 1; }

/* אסטרטגיה: עמודות */
.bars { margin: 0; padding: 26px 22px 18px; background: #FBF7EE; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--red-btn); }
.bars__plot { height: 230px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: end; padding-top: 40px; }
.bars__col { position: relative; height: var(--h); background: var(--teal); border: 2px solid var(--ink); transform-origin: 50% 100%; transform: scaleY(0); transition: transform .9s cubic-bezier(.3, 1.2, .5, 1); transition-delay: calc(.2s + var(--i) * .15s); }
.bars__col--top { background: var(--red-btn); }
.bars__col--drain { background: repeating-linear-gradient(-45deg, var(--paper) 0 6px, #C9C0B0 6px 9px); }
.bars.is-in .bars__col { transform: none; }
.bars__tag { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; white-space: nowrap; padding: 3px 8px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 13px; opacity: 0; transition: opacity .3s ease 1.4s; }
.bars__tag--drain { background: var(--paper); color: var(--grey); border: 1.5px solid var(--grey); }
.bars.is-in .bars__tag { opacity: 1; }
.bars__axis { height: 3px; background: var(--ink); }

/* מיתוג: סקיצות */
.sketch { margin: 0; display: grid; gap: 22px; justify-items: center; }
.sketch__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 2vw, 22px); width: 100%; }
.sketch__card { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: #FBF7EE; color: var(--grey); border: 3px dashed var(--ink); transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), opacity .5s, background .4s, color .4s, border-color .4s, box-shadow .4s; transition-delay: 1s; }
.sketch__card svg { width: 58%; }
.sketch.is-in .sketch__card:not(.sketch__card--pick) { opacity: .35; transform: scale(.86); }
.sketch.is-in .sketch__card--pick { transform: scale(1.12) rotate(-2deg); background: var(--paper); color: var(--red-btn); border-style: solid; box-shadow: 8px 8px 0 var(--ink); }
.sketch__stamp { position: absolute; top: -12px; inset-inline-end: -10px; padding: 4px 10px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 13px; rotate: 8deg; opacity: 0; transition: opacity .3s ease 1.6s; }
.sketch.is-in .sketch__stamp { opacity: 1; }
.sketch__swatches { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.sketch__swatches li { width: 38px; height: 38px; border-radius: 50%; background: var(--c); border: 3px solid var(--paper); box-shadow: 3px 3px 0 var(--ink); transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.sketch__swatches li:nth-child(1) { transition-delay: 1.8s; } .sketch__swatches li:nth-child(2) { transition-delay: 1.95s; } .sketch__swatches li:nth-child(3) { transition-delay: 2.1s; } .sketch__swatches li:nth-child(4) { transition-delay: 2.25s; }
.sketch.is-in .sketch__swatches li { transform: none; }

/* פחות תנועה: מצב סופי מיד */
@media (prefers-reduced-motion: reduce) {
  .funnel__bar, .feed__tile, .bars__col { transform: none; opacity: 1; transition: none; }
  .week__stamp { transform: translateX(-50%) rotate(-10deg); opacity: 1; transition: none; }
  .bars__tag, .sketch__stamp { opacity: 1; transition: none; }
  .sketch__swatches li { transform: none; transition: none; }
}
html.a11y-still .funnel__bar, html.a11y-still .feed__tile, html.a11y-still .bars__col { transform: none; opacity: 1; transition: none; }
html.a11y-still .week__stamp { transform: translateX(-50%) rotate(-10deg); opacity: 1; }
html.a11y-still .bars__tag, html.a11y-still .sketch__stamp { opacity: 1; }
html.a11y-still .sketch__swatches li { transform: none; }
@media (max-width: 520px) { .week__day { min-height: 92px; } .week__day b { font-size: 20px; } .week__stamp { font-size: 11px; padding: 3px 4px; } .bars__plot { height: 180px; gap: 8px; } .bars__tag { font-size: 11px; } }
/* דוגמאות אמיתיות בבניית אתרים: קישור לאתר החי בכל כרטיס */
.mini__go { margin-top: 6px; }
.mini__go .link { color: inherit; font-size: 15px; }
.mini--red .mini__go .link, .mini--teal .mini__go .link { border-bottom-color: var(--mustard); }

/* ---- מיתוג: מדף ספרי המותג (service-branding.mjs, והסקריפט ב-main.js) ----
   כל ספר הוא חוברת קומיקס וינטג' בצבעי האתר: קו דיו עבה, צל קשיח, נקודות הדפסה, בועות דיבור ותיבות כיתוב.
   צבעי המותג עצמו מופיעים רק בעמוד הצבעים. במחשב: מדף, ולחיצה על שדרה פותחת כפולה שמדפדפים בה (דף מתהפך משמאל לימין).
   בנייד: ערימת ספרים שוכבים, והפתוח מראה עמוד אחד בכל פעם. בלי JS: כל העמודים פרוסים ברשת */
.book { --cv: var(--teal); --cvt: #FFF8EE; --dots: rgb(0 0 0 / .2); color: var(--ink); }
.book--red { --cv: var(--red-btn); }
.book--mustard { --cv: var(--mustard); --cvt: var(--ink); }
.book--ink { --cv: var(--ink); --dots: rgb(242 236 224 / .16); --cvt: var(--paper); }
.book--paper { --cv: #E6DCC8; --cvt: var(--ink); --dots: rgb(0 0 0 / .14); }
.shelf { --sp: 78px; --gap: 12px; --sh: 80; margin-top: clamp(30px, 4vw, 60px); display: grid; gap: 28px; }
.book, .book * { --halftone: radial-gradient(var(--dots) 1.3px, transparent 1.8px) 0 0 / 7px 7px; }
.book__spine, .book__nav { display: none; }
.book__open { padding: 14px; background: var(--halftone), var(--cv); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.spread { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.leaf { display: contents; }
.pg { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 40px; background: #FBF7EE; color: var(--ink); border: 3px solid var(--ink); }
/* תיבת כיתוב של קומיקס */
.pg__cap { align-self: flex-start; padding: 3px 14px 5px; background: var(--mustard); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); font-family: var(--fd); font-weight: 700; font-size: 24px; line-height: 1.1; }
.pg__no { position: absolute; bottom: 10px; inset-inline-end: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; }
/* בועת דיבור */
.bubble { position: relative; align-self: flex-start; max-width: 100%; padding: 10px 18px; background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 4px 4px 0 var(--ink); font-weight: 800; font-size: 18px; line-height: 1.3; }
.bubble::before, .bubble::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
.bubble::before { bottom: -18px; inset-inline-start: 26px; border-width: 18px 0 0 20px; border-top-color: var(--ink); }
.bubble::after { bottom: -11px; inset-inline-start: 30px; border-width: 12px 0 0 13px; border-top-color: #fff; }
/* שער: כריכה של חוברת, עם גיליון וחותמת */
.pg--title { justify-content: center; gap: 22px; padding-inline: 34px; background: var(--halftone), var(--cv); color: var(--cvt); }
.pg__issue { position: absolute; top: 16px; inset-inline-end: 16px; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #FBF7EE; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(8deg); font-size: 12px; font-weight: 800; line-height: 1; }
.pg__issue b { font-family: var(--fd); font-size: 32px; }
.book__t { font-family: var(--fd); font-weight: 700; font-size: clamp(52px, 5.4vw, 84px); line-height: .92; color: var(--cvt); text-shadow: 4px 4px 0 var(--ink); }
.book--mustard .book__t, .book--paper .book__t { text-shadow: 4px 4px 0 #FBF7EE; }
.pg--title .bubble { color: var(--ink); }
.pg__stamp { align-self: flex-start; margin-top: 4px; padding: 2px 12px; border: 3px solid currentColor; transform: rotate(-7deg); font-family: var(--fd); font-weight: 700; font-size: 26px; letter-spacing: .02em; opacity: .9; }
.pg__hint { position: absolute; bottom: 14px; inset-inline-start: 18px; font-size: 14px; font-weight: 800; }
/* לוגו בתוך פריים של קומיקס */
.pg--logo { background: var(--halftone), #FBF7EE; --dots: rgb(0 0 0 / .12); }
.pg__logo { flex: 1; display: grid; place-items: center; min-height: 180px; padding: 22px; background: #fff; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.pg__logo img { width: auto; height: auto; max-width: 86%; max-height: 200px; }
.pg__logo--s { flex: 0 0 auto; min-height: 0; width: 82%; padding: 18px; transform: rotate(-1.5deg); }
.pg__logo--s img { max-height: 90px; }
/* צבעים: כרטיסי צבע מודבקים */
.pal { flex: 1; min-height: 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px 14px; }
.pal li { flex: 0 1 calc(50% - 8px); display: flex; flex-direction: column; background: #fff; border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pal li:nth-child(odd) { transform: rotate(-2deg); }
.pal li:nth-child(even) { transform: rotate(1.5deg); }
.pal__sw { height: clamp(40px, 9cqh, 70px); background: var(--c); border-bottom: 2.5px solid var(--ink); }
.pal__hex { padding: 5px 8px; direction: ltr; text-align: center; font-size: 13px; font-weight: 800; }
/* האתר: חלון דפדפן עם צל קשיח */
.pg--site { justify-content: flex-start; }
.book__win { background: var(--paper); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); transform: rotate(-1deg); }
.book__bar { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: var(--ink); color: var(--paper); font-size: 11px; direction: ltr; }
.book__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); opacity: .6; }
.book__bar span { margin-inline-start: 6px; opacity: .75; }
.book__screen { aspect-ratio: 100 / var(--sh); overflow: hidden; container-type: inline-size; }
.book__screen img { width: 100%; height: auto; }
.pg--go { align-items: center; justify-content: center; text-align: center; gap: 30px; }
.pg--go .bubble { align-self: center; font-family: var(--fd); font-weight: 700; font-size: 28px; }
.pg--go .btn { box-shadow: 4px 4px 0 var(--ink); transform: rotate(-2deg); }
/* סוף: פיצוץ של קומיקס */
.pg--end { align-items: center; justify-content: center; gap: 26px; background: var(--halftone), var(--red-btn); --dots: rgb(0 0 0 / .22); }
.pg__boom { display: grid; place-items: center; width: 210px; height: 210px; background: var(--mustard); border: 3px solid var(--ink); clip-path: polygon(50% 0, 61% 18%, 82% 8%, 80% 30%, 100% 36%, 85% 52%, 98% 72%, 76% 74%, 72% 96%, 55% 82%, 38% 100%, 32% 78%, 8% 86%, 17% 64%, 0 50%, 18% 37%, 6% 16%, 30% 20%, 38% 2%);
  transform: rotate(-8deg); font-family: var(--fd); font-weight: 700; font-size: 54px; color: var(--ink); filter: drop-shadow(4px 4px 0 var(--ink)); }
.book--red .pg--end { background: var(--halftone), var(--ink); --dots: rgb(242 236 224 / .16); }
.pg--end .btn { background: #FBF7EE; color: var(--ink); box-shadow: 4px 4px 0 var(--ink); border: 2.5px solid var(--ink); }
.pg--end .btn:hover, .pg--end .btn:focus-visible { color: #FFF8EE; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.a11y-still) .pg.is-vis .book__screen img { animation: book-scroll 16s ease-in-out .8s infinite alternate; }
}
@keyframes book-scroll { 0%, 12% { transform: none; } 88%, 100% { transform: translateY(calc(-100% + var(--sh) * 1cqw)); } }

/* כפתורי הדפדוף: כמו כפתור התפריט באתר, גלולה עם צל קשיח */
.js .book__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; color: var(--cvt); }
.book__nav button { min-height: 44px; padding: 4px 18px; border: 2.5px solid var(--ink); border-radius: 999px; background: #FBF7EE; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: var(--fd); font-weight: 700; font-size: 20px; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.book__prev { transform: rotate(2deg); }
.book__next { transform: rotate(-2deg); }
.book__nav button:hover:not(:disabled) { transform: rotate(0) translate(-1px, -1px); background: var(--mustard); }
.book__nav button:disabled { opacity: .45; box-shadow: none; cursor: default; }
.book__nav button:focus-visible, .book__spine:focus-visible { outline: 3px solid var(--red-btn); outline-offset: 3px; }
.book__count { padding: 2px 12px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: 15px; direction: ltr; }

/* שדרה: צבע מהאתר, נקודות הדפסה, ותווית ספרייה מנייר */
.book__no { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FBF7EE; color: var(--ink); border: 2.5px solid var(--ink); font-weight: 800; font-size: 15px; }
.book__name { font-family: var(--fd); font-weight: 700; line-height: 1; white-space: nowrap; }

/* נייד: ערימה של ספרים שוכבים */
@media (max-width: 899px) {
  .js .shelf { gap: 8px; }
  .js .book__spine { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 0 14px; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; color: var(--cvt); text-align: start; background: var(--halftone), var(--cv); }
  .js .book__spine:focus-visible { outline-offset: -8px; }
  .book__name { font-size: 30px; }
  .js .book:nth-child(odd) .book__spine { transform: rotate(-.8deg); }
  .js .book:nth-child(even) .book__spine { transform: rotate(.6deg); }
  .js .book:nth-child(2) { margin-inline: 14px 0; }
  .js .book:nth-child(3) { margin-inline: 4px 10px; }
  .js .book:nth-child(4) { margin-inline: 16px 2px; }
  .js .book:nth-child(5) { margin-inline: 6px 12px; }
  .js .book.is-open { margin-inline: 0; }
  .js .book.is-open .book__spine { transform: none; box-shadow: none; }
  .js .book:not(.is-open) .book__open { display: none; }
  .js .book__open { border-top: 0; margin-bottom: 14px; }
  .js .spread { --sh: 118; grid-template-columns: none; }
  .js .spread .pg { grid-area: 1 / 1; min-height: 470px; }
  .js .spread .pg:not(.is-vis) { visibility: hidden; }
}

/* מחשב: מדף עם קרש דיו. השדרות בגבהים שונים, אחת נוטה, והספר הפתוח נפתח לרוחב המדף */
@media (min-width: 900px) {
  .js .shelf { --sh: 86; display: flex; gap: var(--gap); align-items: flex-end; height: 620px; padding-bottom: 0; container-type: inline-size; border-bottom: 14px solid var(--ink); box-shadow: 0 8px 0 var(--mustard), 0 11px 0 var(--ink); }
  .js .book { position: relative; flex: 0 0 var(--sp); height: var(--bh, 100%); transition: flex-grow .75s var(--snap), height .4s var(--ease), transform .3s cubic-bezier(.3, 1.5, .5, 1); }
  .js .book:nth-child(2) { --bh: 93%; }
  .js .book:nth-child(3) { --bh: 97%; }
  .js .book:nth-child(4) { --bh: 90%; }
  .js .book:nth-child(5) { --bh: 95%; }
  .js .book.is-open { flex-grow: 1; height: 100%; }
  .js .book:not(.is-open):hover { transform: translateY(-16px) rotate(-2deg); }
  .js .book__spine { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; width: var(--sp); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 22px; border: 3px solid var(--ink); box-shadow: 5px 0 0 var(--ink); cursor: pointer; color: var(--cvt);
    background: linear-gradient(var(--ink) 0 0) 0 74px / 100% 3px no-repeat, linear-gradient(var(--ink) 0 0) 0 calc(100% - 64px) / 100% 3px no-repeat, var(--halftone), var(--cv); }
  .js .book__spine:focus-visible { outline-offset: -9px; }
  .js .book.is-open .book__spine { cursor: default; box-shadow: none; }
  .book__name { flex: 1; display: flex; align-items: center; writing-mode: vertical-rl; font-size: 34px; }
  .js .book__open { position: absolute; inset-block: 0; inset-inline-start: calc(var(--sp) - 3px); width: calc(100cqw - 5 * var(--sp) - 4 * var(--gap) + 3px); display: flex; flex-direction: column; padding: 16px 18px 14px; visibility: hidden; transition: visibility 0s .75s; }
  .js .book.is-open .book__open { visibility: visible; transition: none; }
  .js .spread { position: relative; flex: 1; display: block; perspective: 2600px; cursor: pointer; }
  .js .spread::after { content: ""; position: absolute; inset-block: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--ink); z-index: 20; pointer-events: none; }
  .js .spread > .pg, .js .leaf { position: absolute; top: 0; bottom: 0; width: 50%; }
  .js .spread > .pg:first-child { right: 0; }
  .js .spread > .pg:last-child { left: 0; }
  .js .leaf { display: block; left: 0; transform-origin: right center; transform-style: preserve-3d; transition: transform .9s var(--snap); }
  .js .leaf.is-flipped { transform: rotateY(180deg); }
  .js .leaf.is-moving { z-index: 9 !important; }
  .js .leaf > .pg { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .js .leaf > .pg:last-child { transform: rotateY(180deg); }
  .js .pg { padding: 26px 28px 44px; }
}
@media (prefers-reduced-motion: reduce) { .js .leaf, .js .book { transition: none !important; } }
html.a11y-still .leaf { transition: none !important; }
html.a11y-still .book__screen img { animation: none; transform: none; }

/* ---- מדף ספרי המותג, הסצנה: פאנל קומיקס עם קרני שמש, שלט מתנדנד, דמויות שפורצות מהמסגרת,
   תווית ספרייה עם לוגו על כל שדרה, כריכה שנפתחת, פינה מקופלת, ומילת קומיקס בכל דפדוף ---- */
.lib { position: relative; margin-top: clamp(40px, 5vw, 70px); padding: 150px clamp(16px, 2.6vw, 40px) 46px; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  background: repeating-conic-gradient(from 0deg at 50% 108%, #F3DCA0 0 4deg, #FAF1DE 4deg 8deg); }
.lib::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgb(0 0 0 / .07) 1.3px, transparent 1.8px) 0 0 / 7px 7px; }
.lib::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 46px; border-top: 3px solid var(--ink); background: repeating-linear-gradient(90deg, #DDB866 0 88px, var(--ink) 88px 91px), #DDB866; }
.lib .shelf { position: relative; z-index: 1; margin-top: 0; }
/* שלט תלוי שמתנדנד */
.lib__sign { position: absolute; z-index: 2; top: -4px; left: 50%; translate: -50% 0; padding-top: 38px; transform-origin: 50% 0;
  background: linear-gradient(var(--ink) 0 0) 22% 0 / 3px 40px no-repeat, linear-gradient(var(--ink) 0 0) 78% 0 / 3px 40px no-repeat; }
.lib__sign p { padding: 8px 30px 12px; background: var(--red-btn); color: #FFF8EE; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-align: center; font-weight: 800; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.lib__sign b { display: block; font-family: var(--fd); font-weight: 700; font-size: clamp(34px, 3.4vw, 50px); line-height: 1; }
@media (prefers-reduced-motion: no-preference) { html:not(.a11y-still) .lib__sign { animation: sign-swing 3.4s ease-in-out infinite alternate; } }
@keyframes sign-swing { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
/* הדמויות: אחד מצביע על המדף מהרצפה, השני יושב על קצה הפאנל עם זכוכית מגדלת */
.lib__guy { position: absolute; z-index: 3; width: auto; pointer-events: none; }
.lib__guy--point { display: none; }
.lib__guy--lens { top: -86px; right: 18px; height: 110px; }

/* תווית ספרייה עם הלוגו על השדרה */
.book__label { flex: none; position: relative; display: block; background: #fff; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.book__label img { position: absolute; inset: 4px 6px; width: calc(100% - 12px); height: calc(100% - 8px); object-fit: contain; }
@media (max-width: 899px) {
  .book__label { width: 92px; height: 42px; margin-inline-start: auto; }
  .lib { padding: 118px 12px 40px; box-shadow: 7px 7px 0 var(--ink); }
  .lib__sign p { padding: 6px 20px 9px; font-size: 13px; }
}

/* שער: קרני קומיקס, ושם עם קו מתאר וצל תלת ממדי */
.pg--title { background: var(--halftone), repeating-conic-gradient(from 0deg at 50% 44%, var(--cv) 0 6deg, color-mix(in srgb, var(--cv), #000 14%) 6deg 12deg); }
.book--ink .pg--title { background: var(--halftone), repeating-conic-gradient(from 0deg at 50% 44%, var(--cv) 0 6deg, #2A2622 6deg 12deg); }
.pg--title { container-type: inline-size; }
.pg--title .book__t { font-size: min(88px, 25cqi); white-space: nowrap; color: #FFF8EE; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 3px 3px 0 var(--ink), 4px 4px 0 var(--ink), 5px 5px 0 var(--ink), 6px 6px 0 var(--ink), 7px 7px 0 var(--ink); }
.pg--title .pg__stamp { background: #FBF7EE; color: var(--red-btn); border-color: var(--red-btn); box-shadow: 3px 3px 0 var(--ink); opacity: 1; }
.pg--title .pg__hint { padding: 2px 10px; background: var(--ink); color: var(--paper); }
.pg__no { inset-inline-end: auto; left: 50%; translate: -50% 0; }

/* מילת קומיקס: קופצת בכל פתיחה ודפדוף (נוצרת ב-main.js) */
.book__open { position: relative; }
.bam { position: absolute; z-index: 40; top: 40%; left: 50%; translate: -50% -50%; isolation: isolate; padding: 6px 10px; color: var(--ink); font-family: var(--fd); font-weight: 700; font-size: clamp(40px, 4vw, 58px); line-height: 1; white-space: nowrap; pointer-events: none;
  filter: drop-shadow(5px 5px 0 var(--ink)); animation: bam .95s cubic-bezier(.3, 1.6, .5, 1) both; }
.bam::before { content: ""; position: absolute; z-index: -1; inset: -30px -44px; background: var(--mustard);
  clip-path: polygon(50% 0, 60% 20%, 80% 6%, 79% 28%, 100% 32%, 86% 50%, 100% 70%, 78% 72%, 76% 96%, 58% 80%, 42% 100%, 34% 78%, 10% 90%, 18% 64%, 0 52%, 16% 36%, 4% 12%, 30% 22%, 38% 0); }
@keyframes bam { 0% { scale: .2; opacity: 0; rotate: calc(var(--r, 0deg) - 25deg); } 25% { scale: 1.15; opacity: 1; rotate: var(--r, 0deg); } 70% { scale: 1; opacity: 1; } 100% { scale: 1.08; opacity: 0; } }

@media (min-width: 900px) {
  .lib { padding-inline-end: clamp(110px, 11vw, 170px); }
  .lib .shelf { --sp: 68px; }
  .lib__guy--point { display: block; left: -74px; bottom: 8px; height: clamp(300px, 29vw, 420px); }
  .lib__guy--lens { top: -132px; right: 70px; height: 172px; }
  .js .book__spine { justify-content: flex-start; padding-bottom: 16px; background: linear-gradient(var(--ink) 0 0) 0 70px / 100% 3px no-repeat, linear-gradient(var(--ink) 0 0) 0 77px / 100% 3px no-repeat, var(--halftone), var(--cv); }
  .js .book__no { margin-bottom: 26px; }
  .book__label { width: 52px; height: 126px; }
  .book__label img { inset: auto; left: 50%; top: 50%; width: 114px; height: 40px; translate: -50% -50%; rotate: 90deg; }
  /* פינה מקופלת בעמוד השמאלי: לוחצים עליה (או על העמוד) כדי לדפדף */
  .js .leaf:not(.is-flipped) > .pg:first-child::before, .js .spread > .pg--end::before { content: ""; position: absolute; z-index: 2; left: -3px; bottom: -3px; width: 48px; height: 48px;
    background: linear-gradient(45deg, var(--cv) 0 calc(50% - 1.5px), var(--ink) calc(50% - 1.5px) calc(50% + 1.5px), #E6DAC2 calc(50% + 1.5px));
    box-shadow: inset 0 3px 0 var(--ink), inset -3px 0 0 var(--ink); transition: width .25s var(--ease), height .25s var(--ease); }
  .js .spread > .pg--end::before { display: none; }
  .js .spread:hover .leaf:not(.is-flipped) > .pg:first-child::before { width: 66px; height: 66px; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js:not(.a11y-still) .book.is-open .book__open { animation: cover-open .85s var(--snap) both; transform-origin: right center; }
  html.js:not(.a11y-still) .leaf:not(.is-flipped) > .pg:first-child::before { animation: ear 4s ease-in-out 2s infinite; }
}
@keyframes cover-open { from { transform: perspective(2200px) rotateY(-75deg); } to { transform: none; } }
@keyframes ear { 0%, 84%, 100% { width: 48px; height: 48px; } 92% { width: 64px; height: 64px; } }
@media (min-width: 900px) and (max-width: 1180px) { .lib__guy--point { left: -40px; height: 270px; } }
html.a11y-still .bam { display: none; }

/* ---- מי אנחנו: הסיפור המצויר. שישה פאנלים של קומיקס עם דמויות האתר (about.mjs) ---- */
.saga { --dots: rgb(0 0 0 / .2); display: grid; gap: 22px; }
.panel { --bg: var(--mustard); --fg: var(--ink); --ts: 4px 4px 0 #FBF7EE; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 440px; padding: 26px 26px 250px;
  color: var(--fg); background: radial-gradient(var(--dots) 1.3px, transparent 1.8px) 0 0 / 7px 7px, var(--bg); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.panel:nth-child(odd) { rotate: -.6deg; }
.panel:nth-child(even) { rotate: .5deg; }
.panel--paper { --bg: #FBF7EE; --dots: rgb(0 0 0 / .1); }
.panel--red { --bg: var(--red-btn); --fg: #FFF8EE; --ts: 4px 4px 0 var(--ink); }
.panel--teal { --bg: var(--teal); --fg: #FFF8EE; --ts: 4px 4px 0 var(--ink); }
.panel--ink { --bg: var(--ink); --fg: #FFF8EE; --dots: rgb(242 236 224 / .14); --ts: 4px 4px 0 var(--red-btn);
  background: radial-gradient(circle at 20% 82%, #FBF7EE 0 31%, var(--ink) 31.3% 33%, transparent 33.3%), radial-gradient(var(--dots) 1.3px, transparent 1.8px) 0 0 / 7px 7px, var(--bg); }
.panel--sun { background: repeating-conic-gradient(from 0deg at 18% 100%, #F3DCA0 0 5deg, #FAF1DE 5deg 10deg); }
.panel__cap { padding: 3px 14px 5px; background: #FBF7EE; color: var(--ink); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); font-weight: 800; font-size: 15px; }
.panel--paper .panel__cap, .panel--sun .panel__cap { background: var(--mustard); }
.panel__t { position: relative; z-index: 1; font-family: var(--fd); font-weight: 700; font-size: clamp(42px, 4.2vw, 68px); line-height: .95; text-shadow: var(--ts); }
.panel__d { position: relative; z-index: 1; max-width: 34ch; font-size: clamp(18px, 1.3vw, 20px); font-weight: 600; line-height: 1.55; }
.panel__say { position: relative; z-index: 1; margin-top: 6px; font-family: var(--fd); font-weight: 700; font-size: clamp(24px, 2vw, 30px); color: var(--ink); }
.panel__art { position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: auto; height: 240px; pointer-events: none; }
.panel__art--duo-heads { height: auto; width: min(260px, 70%); bottom: 14px; }
.panel__art--megaphone { scale: -1 1; }
/* מילת קומיקס בפיצוץ */
.panel__fx { position: absolute; z-index: 2; top: 22px; left: 22px; isolation: isolate; padding: 4px 8px; font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 2.6vw, 42px); line-height: 1; color: var(--ink); rotate: -10deg; filter: drop-shadow(4px 4px 0 var(--ink)); }
.panel__fx::before { content: ""; position: absolute; z-index: -1; inset: -24px -34px; background: var(--mustard);
  clip-path: polygon(50% 0, 60% 20%, 80% 6%, 79% 28%, 100% 32%, 86% 50%, 100% 70%, 78% 72%, 76% 96%, 58% 80%, 42% 100%, 34% 78%, 10% 90%, 18% 64%, 0 52%, 16% 36%, 4% 12%, 30% 22%, 38% 0); }
.panel--mustard .panel__fx::before { background: #FBF7EE; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.a11y-still) .panel.rv .panel__fx { scale: 0; }
  html.js:not(.a11y-still) .panel.is-in .panel__fx { animation: fx-pop .6s .45s cubic-bezier(.3, 1.7, .5, 1) both; }
}
@keyframes fx-pop { from { scale: 0; rotate: -40deg; } to { scale: 1; rotate: -10deg; } }
html.a11y-still .panel__fx { scale: 1; }

/* מחשב: עמוד קומיקס, פאנלים ברוחבים מתחלפים והדמות בצד */
@media (min-width: 900px) {
  .saga { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .panel { grid-column: span 5; padding: 30px 32px; min-height: 460px; }
  .panel:nth-child(2), .panel:nth-child(3), .panel:nth-child(6) { grid-column: span 7; }
  .panel__t, .panel__d, .panel__say { max-width: 58%; }
  .panel__d { max-width: min(58%, 34ch); }
  .panel__art { left: 18px; translate: none; height: 82%; }
  .panel:nth-child(2) .panel__art, .panel:nth-child(3) .panel__art, .panel:nth-child(6) .panel__art { left: 40px; }
  .panel__art--duo-heads { height: auto; width: 40%; bottom: 26px; }
  .panel__fx { top: 26px; left: auto; right: auto; inset-inline-end: 40%; }
}

/* מי אנחנו: "שישה דברים שלא משתנים אצלנו" כקלפי קומיקס על הדיו. ראש צבעוני עם נקודות הדפסה ומספר ענק, גוף מנייר */
.rules { --dots: rgb(0 0 0 / .2); display: grid; gap: clamp(26px, 3vw, 40px); margin-top: clamp(10px, 2vw, 24px); }
@media (min-width: 700px) { .rules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rules { grid-template-columns: repeat(3, 1fr); } }
.rule { --bg: var(--red-btn); display: flex; flex-direction: column; background: #FBF7EE; color: var(--ink); border: 3px solid var(--paper); box-shadow: 8px 8px 0 rgb(242 236 224 / .22);
  transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; }
.rule:nth-child(odd) { rotate: -1deg; }
.rule:nth-child(even) { rotate: .8deg; }
.rule--mustard { --bg: var(--mustard); }
.rule--teal { --bg: var(--teal); }
.rule--paper { --bg: #E6DCC8; --dots: rgb(0 0 0 / .14); }
.rule__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 14px; border-bottom: 3px solid var(--ink);
  background: radial-gradient(var(--dots) 1.3px, transparent 1.8px) 0 0 / 7px 7px, var(--bg); }
.rule__no { font-family: var(--fd); font-weight: 700; font-size: clamp(60px, 5.4vw, 84px); line-height: .85; color: #FFF8EE; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 3px 3px 0 var(--ink), 4px 4px 0 var(--ink), 5px 5px 0 var(--ink), 6px 6px 0 var(--ink); }
.rule__mark { width: 54px; height: 54px; padding: 11px 12px; background: #FBF7EE; border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); rotate: 12deg; }
.rule__t { padding: 20px 22px 0; font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 2.4vw, 38px); line-height: 1; }
.rule__d { padding: 10px 22px 26px; font-size: 18px; line-height: 1.6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rule:hover { transform: translate(-4px, -4px); rotate: 0deg; box-shadow: 12px 12px 0 rgb(242 236 224 / .32); }
}

/* צור קשר: שלוש התחנות אחרי הפנייה, באותם פאנלים של הסיפור בעמוד "מי אנחנו". הדמות למטה, הטקסט למעלה */
.saga--3 .panel { padding-bottom: 290px; }
.saga--3 .panel__art { left: 50%; translate: -50% 0; height: 270px; }
.saga--3 .panel__art--lens { height: 250px; }
@media (min-width: 900px) {
  .saga--3 .panel, .saga--3 .panel:nth-child(2), .saga--3 .panel:nth-child(3) { grid-column: span 4; min-height: 600px; padding: 30px 30px 320px; }
  .saga--3 .panel__t, .saga--3 .panel__d, .saga--3 .panel__say { max-width: 100%; }
  .saga--3 .panel__art, .saga--3 .panel:nth-child(2) .panel__art, .saga--3 .panel:nth-child(3) .panel__art { left: 50%; translate: -50% 0; height: 300px; }
  .saga--3 .panel__fx { top: auto; bottom: 230px; inset-inline-end: 22px; }
}

/* תיקונים מבדיקת העלייה (11.11.2026) */
/* בעמוד הצבעים בספר צר: ארבע דוגמיות נכנסות מעל הכפתורים */
@media (min-width: 900px) { .js .pg--pal { container-type: size; } .js .pg--pal .pal { gap: 12px 12px; } }
/* בנייד, ספר שנפתח נעצר מעל כפתור הוואטסאפ הצף, כדי שלא יכסה את "הקודם" */
.book { scroll-margin-bottom: 96px; scroll-margin-top: calc(var(--top-h) + 12px); }
/* Escape סוגר את תפריט השירותים גם כשהפוקוס בתוכו */
.top__drop.is-shut .drop { opacity: 0; visibility: hidden; }
/* מלכודת לבוטים בטפסים: שדה שגולש לא רואה */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* תיבת ההסכמה לדיוור בטפסים */
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.check input { flex: none; appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 1px 0 0; border: 2px solid var(--ink); background: #FBF8F2; cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--ink); }
.check input:checked::after { content: ""; width: 12px; height: 7px; border: solid #FBF8F2; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.check input:focus-visible { outline: 3px solid #141210; outline-offset: 2px; box-shadow: 4px 4px 0 var(--red); }

/* ---- סיפורי הצלחה כחוברות קומיקס (stories.mjs): דוכן עם שלוש כריכות, וכל סיפור כגיליון ---- */
.cover, .issue { --cv: var(--teal); --cvt: #FFF8EE; --dots: rgb(0 0 0 / .2); }
.cover--red, .issue--red { --cv: var(--red-btn); }
.cover--mustard, .issue--mustard { --cv: var(--mustard); --cvt: var(--ink); }
.cover--teal, .issue--teal { --cv: var(--teal); }

/* הדוכן: פאנל עם קרני שמש, שלט, ומסילות של דוכן עיתונים */
.stand { position: relative; margin-top: clamp(40px, 5vw, 70px); padding: 130px clamp(16px, 3vw, 44px) 54px; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  background: radial-gradient(rgb(0 0 0 / .07) 1.3px, transparent 1.8px) 0 0 / 7px 7px, repeating-conic-gradient(from 0deg at 50% 108%, #F3DCA0 0 4deg, #FAF1DE 4deg 8deg); }
.stand::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 30px; border-top: 4px solid var(--ink); background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 46px), #DDB866; }
.stand__sign { position: absolute; z-index: 2; top: -4px; left: 50%; translate: -50% 0; padding-top: 34px; transform-origin: 50% 0;
  background: linear-gradient(var(--ink) 0 0) 22% 0 / 3px 36px no-repeat, linear-gradient(var(--ink) 0 0) 78% 0 / 3px 36px no-repeat; }
.stand__sign p { padding: 6px 28px 10px; background: var(--red-btn); color: #FFF8EE; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); text-align: center; font-weight: 800; font-size: 15px; line-height: 1.1; }
.stand__sign b { display: block; font-family: var(--fd); font-weight: 700; font-size: clamp(32px, 3vw, 46px); line-height: 1; }
@media (prefers-reduced-motion: no-preference) { html:not(.a11y-still) .stand__sign { animation: sign-swing 3.4s ease-in-out infinite alternate; } }

/* הכריכות */
.covers { position: relative; z-index: 1; display: grid; gap: clamp(26px, 3vw, 40px); }
@media (min-width: 760px) { .covers { grid-template-columns: repeat(3, 1fr); } .covers--2 { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin-inline: auto; } }
.cover { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 560px; padding: 22px 22px 220px; overflow: hidden; color: var(--cvt);
  background: radial-gradient(var(--dots) 1.3px, transparent 1.8px) 0 0 / 7px 7px, repeating-conic-gradient(from 0deg at 50% 70%, var(--cv) 0 6deg, color-mix(in srgb, var(--cv), #000 14%) 6deg 12deg);
  border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), box-shadow .25s; }
.cover:nth-child(1) { rotate: -1.4deg; }
.cover:nth-child(2) { rotate: .8deg; }
.cover:nth-child(3) { rotate: -.6deg; }
.cover::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--ink); pointer-events: none; }
.cover__issue { position: absolute; top: 16px; left: 16px; z-index: 2; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #FBF7EE; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); rotate: 8deg; font-size: 12px; font-weight: 800; line-height: 1; }
.cover__issue b { font-family: var(--fd); font-size: 30px; }
.cover__kick { position: relative; padding: 2px 10px 4px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 800; }
.cover__t { position: relative; z-index: 1; max-width: calc(100% - 70px); font-family: var(--fd); font-weight: 700; font-size: clamp(44px, 4vw, 62px); line-height: .92; }
.cover__a { color: #FFF8EE; text-decoration: none; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 3px 3px 0 var(--ink), 4px 4px 0 var(--ink), 5px 5px 0 var(--ink), 6px 6px 0 var(--ink); }
.cover__a::after { content: ""; position: absolute; inset: -400px; z-index: 3; } /* הכרטיס כולו לחיץ */
.cover:has(.cover__a:focus-visible) { outline: 4px solid var(--red-btn); outline-offset: 4px; }
.cover__a:focus-visible { outline: none; }
.cover__boom { position: relative; z-index: 1; display: grid; justify-items: center; gap: 2px; margin: 8px 0 4px; padding: 26px 30px; color: var(--ink); rotate: -5deg; isolation: isolate; filter: drop-shadow(4px 4px 0 var(--ink)); }
.cover__boom::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #FBF7EE;
  clip-path: polygon(50% 0, 60% 14%, 80% 4%, 80% 24%, 100% 28%, 88% 46%, 100% 66%, 80% 70%, 78% 94%, 60% 82%, 44% 100%, 34% 82%, 10% 92%, 16% 68%, 0 54%, 14% 38%, 4% 14%, 28% 18%, 38% 2%); }
.cover--mustard .cover__boom::before { background: #fff; }
.cover__boom b { font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; text-align: center; }
.cover__boom small { font-size: 12px; font-weight: 800; text-align: center; max-width: 16ch; }
.cover__say { position: relative; z-index: 1; color: var(--ink); font-size: 16px; }
.cover__cast { position: absolute; bottom: 0; left: 18px; height: 230px; width: auto; pointer-events: none; }
.cover__logo { position: absolute; bottom: 22px; right: 22px; z-index: 1; display: grid; place-items: center; width: 92px; height: 70px; padding: 8px; background: #fff; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); rotate: -4deg; }
.cover__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.cover__go { position: absolute; bottom: 104px; right: 22px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: #FBF7EE; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); font-family: var(--fd); font-weight: 700; font-size: 19px; }
.cover__go svg { width: 12px; height: 12px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cover:hover { transform: translate(-4px, -10px); rotate: 0deg; box-shadow: 14px 16px 0 var(--ink); }
}

/* הגיליון: כריכה ענקית בראש עמוד הסיפור */
.issue { position: relative; overflow: hidden; color: var(--cvt); border-bottom: 4px solid var(--ink);
  background: radial-gradient(var(--dots) 1.3px, transparent 1.8px) 0 0 / 7px 7px, repeating-conic-gradient(from 0deg at 22% 80%, var(--cv) 0 5deg, color-mix(in srgb, var(--cv), #000 14%) 5deg 10deg); }
.issue__in { position: relative; max-width: var(--max); margin: 0 auto; min-height: 640px; padding-block: clamp(110px, 12vw, 150px) 0; padding-inline: var(--pad); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.issue__crumbs { color: var(--cvt); }
.issue__crumbs a { color: inherit; }
.issue__no { position: absolute; top: clamp(100px, 11vw, 140px); left: var(--pad); width: 96px; height: 96px; }
.issue__no b { font-size: 40px; }
.issue__kick { padding: 3px 12px 5px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 800; }
.issue__t { max-width: 15ch; font-family: var(--fd); font-weight: 700; font-size: clamp(46px, 6.4vw, 104px); line-height: .92; color: #FFF8EE; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-wrap: balance;
  text-shadow: 1px 1px 0 var(--ink), 2px 2px 0 var(--ink), 3px 3px 0 var(--ink), 4px 4px 0 var(--ink), 5px 5px 0 var(--ink), 6px 6px 0 var(--ink), 7px 7px 0 var(--ink); }
.issue__boom { position: relative; display: grid; justify-items: center; gap: 2px; padding: 34px 40px; color: var(--ink); rotate: -6deg; isolation: isolate; filter: drop-shadow(5px 5px 0 var(--ink)); }
.issue__boom::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #FBF7EE;
  clip-path: polygon(50% 0, 60% 14%, 80% 4%, 80% 24%, 100% 28%, 88% 46%, 100% 66%, 80% 70%, 78% 94%, 60% 82%, 44% 100%, 34% 82%, 10% 92%, 16% 68%, 0 54%, 14% 38%, 4% 14%, 28% 18%, 38% 2%); }
.issue__boom b { font-family: var(--fd); font-weight: 700; font-size: clamp(40px, 4vw, 60px); line-height: 1; }
.issue__boom small { font-size: 14px; font-weight: 800; }
.issue__logo { position: static; rotate: -3deg; }
.issue__cast { position: absolute; bottom: 0; left: calc(var(--pad) + 40px); height: clamp(260px, 36vw, 470px); width: auto; pointer-events: none; }
.issue__facts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px 28px; align-self: stretch; margin: 26px calc(-1 * var(--pad)) 0; padding: 16px var(--pad) 18px; background: var(--ink); color: var(--paper); }
.issue__facts dt { font-size: 12px; font-weight: 800; color: var(--mustard); }
.issue__facts dd { margin: 0; font-weight: 700; }
.issue__facts a { color: inherit; }
@media (max-width: 759px) {
  .issue__in { min-height: 0; padding-bottom: 0; }
  .issue__cast { position: relative; left: auto; align-self: flex-end; height: 240px; margin-top: -60px; }
  .issue__no { top: 96px; width: 74px; height: 74px; }
  .issue__no b { font-size: 30px; }
  .issue__t { max-width: 100%; padding-inline-end: 70px; }
  .issue__kick { max-width: calc(100% - 92px); }
  .stand { padding-top: 110px; }
}

/* הפאנלים בסיפור: הפאנל של המספרים עם שלושה פיצוצים */
@media (min-width: 900px) {
  .saga--story .panel:nth-child(1), .saga--story .panel:nth-child(4) { grid-column: span 7; }
  .saga--story .panel:nth-child(2), .saga--story .panel:nth-child(3) { grid-column: span 5; }
}
.panel--stats { padding-bottom: 30px; min-height: 0; justify-content: center; }
.statburst { display: grid; gap: 16px; width: 100%; margin-top: 6px; }
.statburst li { display: flex; align-items: center; gap: 16px; }
.statburst b { flex: none; display: grid; place-items: center; min-width: 120px; padding: 18px 16px; background: var(--mustard); color: var(--ink); font-family: var(--fd); font-weight: 700; font-size: 30px; line-height: 1; rotate: calc(-6deg + var(--j) * 5deg);
  clip-path: polygon(50% 0, 62% 16%, 84% 6%, 82% 28%, 100% 34%, 88% 52%, 100% 70%, 80% 74%, 78% 96%, 60% 84%, 44% 100%, 34% 82%, 12% 92%, 16% 68%, 0 54%, 14% 36%, 4% 12%, 28% 18%, 38% 2%); }
.statburst span { font-weight: 700; font-size: 18px; }

/* האתר של הלקוח בחלון דפדפן */
.sitewin { --sh: 62; display: grid; justify-items: center; gap: 26px; max-width: 980px; margin: 0 auto; }
.sitewin .book__win { width: 100%; box-shadow: 10px 10px 0 var(--mustard); rotate: -.6deg; }
.sitewin .btn { background: var(--mustard); color: var(--ink); box-shadow: 4px 4px 0 var(--paper); }
@media (prefers-reduced-motion: no-preference) { html:not(.a11y-still) .sitewin.is-in .book__screen img { animation: book-scroll 22s ease-in-out 1s infinite alternate; } }
.chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; max-width: 58%; }
.chips li { padding: 3px 12px 5px; background: #FBF7EE; color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 14px; font-weight: 800; }
@media (max-width: 899px) { .chips { max-width: 100%; } }
.panel--stats .statburst span { color: #FFF8EE; }

/* כריכות: הלוגו כתווית מתחת לשם, וכפתור "לקריאת הסיפור" גדול וברור בתחתית (משוב של אורי) */
.cover { cursor: pointer; }
.cover__logo--top { position: relative; bottom: auto; right: auto; z-index: 1; width: auto; min-width: 96px; height: 62px; padding: 6px 12px; rotate: -3deg; }
.cover__go { bottom: 26px; right: 22px; z-index: 2; gap: 10px; padding: 12px 22px 14px; border-radius: 0; background: var(--ink); color: #FFF8EE; border: 3px solid var(--ink); box-shadow: 5px 5px 0 #FBF7EE; font-size: 24px; rotate: -2deg;
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s, background .2s; }
.cover__go svg { width: 14px; height: 14px; }
.cover:hover .cover__go, .cover:has(.cover__a:focus-visible) .cover__go { background: var(--red-btn); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 #FBF7EE; }
.cover--red:hover .cover__go, .cover--red:has(.cover__a:focus-visible) .cover__go { background: var(--ink); color: var(--mustard); }
.cover { padding-bottom: 250px; }
.cover__cast { height: 250px; }
.cover__logo--top img { height: 48px; width: auto; max-width: 150px; max-height: none; object-fit: contain; }

/* ביקורות וידאו: כפתור "לצפייה" בפינה העליונה, מעל הראש ורחוק מהכיתוב שבתחתית */
.rvw__vid { position: relative; }
.rvw__vid video:not([controls]) { cursor: pointer; }
.rvw__play { position: absolute; top: 15%; inset-inline-start: 13%; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 8px 14px; border: 2.5px solid var(--paper); background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--red-btn); font-family: var(--fd); font-weight: 700; font-size: 20px; line-height: 1; cursor: pointer; rotate: -2deg; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1), background .2s; }
.rvw__play svg { width: 18px; height: 18px; }
.rvw__play:hover { background: var(--red-btn); transform: translate(-2px, -2px); }
.rvw__play:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* כריכות סיפורי הצלחה: כל הכרטיס לחיץ (אורי, 11.11.2026). הכיסוי של הקישור היה כלוא בתוך הכותרת,
   ולכן הכפתור, הלוגו, הבועה והמספר ישבו מעליו ובלעו את הלחיצה */
.cover__t { position: static; z-index: auto; }
.cover__a::after { inset: 0; z-index: 5; }
/* ריחוף: הרמה קטנה בלי יישור הסיבוב, כדי שהכרטיס לא "יברח" מתחת לעכבר ויהבהב בקצוות */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cover:hover { transform: translate(-2px, -4px); box-shadow: 12px 13px 0 var(--ink); }
  .cover:nth-child(1):hover { rotate: -1.4deg; } .cover:nth-child(2):hover { rotate: .8deg; } .cover:nth-child(3):hover { rotate: -.6deg; }
}
/* הלוגו בכריכות ובראש עמוד הסיפור: המסגרת נצמדת ללוגו במקום ריבוע קבוע שהלוגו שוחה בתוכו (אורי, 11.11.2026) */
.cover__logo--top, .issue__logo { width: auto; min-width: 0; height: auto; padding: 8px 10px; line-height: 0; }
.cover__logo--top img { display: block; height: 52px; width: auto; max-width: 128px; object-fit: contain; }
.issue__logo img { display: block; height: 76px; width: auto; max-width: 200px; max-height: none; object-fit: contain; }
@media (max-width: 759px) {
  .issue__logo img { height: 60px; max-width: 170px; }
  .issue__cast { margin-top: -6px; }
}

/* פתיחת דף הבית בטלפון (אורי, 11.11.2026): באייפון עם שורת הכתובת למטה, הפסקה והכפתורים נפלו מתחת לשורה,
   ומי שגלל כדי לראות אותם קיבל מיד את המסך האדום. במסך מגע צר: אזור הלוגו קטן יותר ושמור מקום למטה לשורת הכתובת */
@media (max-width: 860px) and (pointer: coarse) {
  .hero { --skyh: clamp(130px, calc(100svh - var(--top-h) - 424px), min(110vw, 480px)); } /* ה־JS מחשב גובה מדויק לפי המסך */
  .hero.is-pinned .hero__stage, .hero.is-pinned .hero__poster { height: calc(var(--app-h, 100svh) - var(--top-h)); min-height: 0; }
  .hero.is-pinned .hero__poster { grid-template-rows: auto auto auto; align-content: start; }
  .hero__copy { padding-bottom: 12px; }
}

/* אזור מחוץ למסך: האנימציות שבו עוצרות (ה־JS מסמן is-off), כדי שהדף לא יצייר את עצמו מחדש בלי הפסקה */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* קל יותר למחשב (11.11.2026): שלוש אנימציות שרצו בלי הפסקה עברו ל־JS בקצב נמוך, באותו מראה */
/* גרעין: ה־JS מזיז אלמנט אמיתי 5 פעמים בשנייה */
.js body::after { display: none; }
.grain { position: fixed; inset: -50%; z-index: 95; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* וואטסאפ: צלצול אחד קצר כשה־JS מוסיף is-ring */
@media (prefers-reduced-motion: no-preference) {
  .js .wa-fab, .js .wa-fab::before { animation: none; }
  .js .wa-fab.is-ring { animation: wa-ring1 .63s ease-in-out; }
  .js .wa-fab.is-ring::before { animation: wa-wave1 .84s ease-out; }
}
@keyframes wa-ring1 { 0%, 100% { transform: rotate(-6deg); } 16.7% { transform: rotate(8deg); } 33.3% { transform: rotate(-16deg); } 50% { transform: rotate(6deg); } 66.7% { transform: rotate(-12deg); } }
@keyframes wa-wave1 { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
/* רגלי הדמויות שה־JS מזיז: מתחלפות לפי is-b */
.js .walker.doll .leg { animation: none; }
.js .walker.doll.is-walking .leg-a, .js .walker.doll.is-walking.is-b .leg-b { transform: rotate(13deg); }
.js .walker.doll.is-walking .leg-b, .js .walker.doll.is-walking.is-b .leg-a { transform: rotate(-13deg); }

/* תפריט במחשב בשני חלקים: 1 עד 3 מימין ללוגו, 4 עד 6 משמאלו. "בואו נדבר" נשאר רק בנייד (11.11.2026) */
.top__nav--end { justify-content: flex-end; }
@media (min-width: 861px) { .top__cta { display: none; } }

/* מספר אי-זוגי של ביקורות טקסט: האחרונה (הארוכה) לרוחב כל השורה, בלי חור לידה */
@media (min-width: 1000px) {
  .rvw__list--wall:has(.rvw__item--video:nth-child(3)) .rvw__item:not(.rvw__item--video):last-child:nth-child(even) { grid-column: 1 / -1 !important; }
}

/* ===== לקוחות ממליצים: מכתבים למערכת (12.11.2026) ===== */
.ed__tv { list-style: none; padding: 0; max-width: 900px; margin: 0 auto clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
.ed__set { background: var(--ink); padding: 14px 14px 12px; border-radius: 24px; box-shadow: 10px 10px 0 var(--mustard); }
.ed__set .rvw__vid { margin: 0; max-width: none; border: 3px solid #2c2824; border-radius: 14px; overflow: hidden; box-shadow: none; }
.ed__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--paper); padding: 10px 4px 0; font-size: 14px; line-height: 1.3; }
.ed__cap b { font-family: var(--fd); font-weight: 700; font-size: 22px; flex: none; }
.ed__cap span { text-align: end; opacity: .8; }
.ed__mast { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; border-top: 5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 10px 0 8px; margin-bottom: 34px; }
.ed__mast b { font-family: var(--fd); font-weight: 700; font-size: clamp(34px, 4.4vw, 56px); line-height: 1; }
.ed__mast span { font-size: 15px; color: var(--grey); }
.ed__cols { column-count: 3; column-gap: clamp(28px, 3.4vw, 48px); column-rule: 1.5px solid var(--ink); }
.ed__letter { break-inside: avoid; position: relative; margin: 0 0 38px; }
.ed__to { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: var(--grey); border-bottom: 1px dashed var(--grey); padding-bottom: 6px; margin: 0 0 12px; }
.ed__body { margin: 0; }
.ed__body p { margin: 0 0 10px; font-size: 18px; line-height: 1.65; }
.ed__body .ed__q { font-family: var(--fd); font-weight: 700; font-size: 25px; line-height: 1.08; }
.ed__sig { margin: 12px 0 0; font-weight: 800; font-size: 17px; }
.ed__sig small { display: block; font-weight: 500; font-size: 14px; color: var(--grey); }
.ed__stamp { position: absolute; bottom: 4px; inset-inline-end: 0; rotate: -9deg; border: 3px solid var(--red-ink); color: var(--red-ink); font-family: var(--fd); font-weight: 700; font-size: 18px; padding: 3px 10px 1px; border-radius: 6px; background: var(--paper); }
.ed__pull { break-inside: avoid; margin: 0 0 38px; background: var(--red-btn); color: var(--paper); padding: 22px 20px 18px; box-shadow: 8px 8px 0 var(--ink); }
.ed__pull p { margin: 0; font-family: var(--fd); font-weight: 700; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.02; }
.ed__pull small { display: block; margin-top: 12px; font-size: 14px; font-weight: 800; }
@media (max-width: 1080px) { .ed__cols { column-count: 2; } }
@media (max-width: 760px) {
  .ed__tv { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; margin-inline: -4px; max-width: none; }
  .ed__set { scroll-snap-align: start; }
  .ed__cols { column-count: 1; }
}

/* =========================================================
   באנר עוגיות (01-FIXES א2). מופיע רק כשיש מזהה GTM ב-config.mjs
   ========================================================= */
.consent { position: fixed; z-index: 95; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 520px; padding: 20px 22px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.consent[hidden] { display: none; }
.consent__h { font-weight: 900; font-size: 20px; margin-bottom: 6px; }
.consent p { font-size: 15px; line-height: 1.5; }
.consent p a { text-decoration: underline; }
.consent .check { margin-top: 10px; }
.consent__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.consent__no { background: none; border: 0; padding: 6px 2px; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; cursor: pointer; }
.foot__cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* =========================================================
   תיקונים 12.11.2026 (01-FIXES): כפתור "לכל הלקוחות הממליצים", טבלת "במה להתחיל", ציטוט בעמוד הסיפור, H1 ארוך בסיפור
   ========================================================= */
.rvw__all { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
.to-letters, .to-stories { text-align: center; }
.to-stories { margin-top: clamp(28px, 3vw, 44px); }
.goal { overflow-x: auto; border: 3px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); background: var(--paper); }
.goal__t { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 1.45; }
.goal__t th, .goal__t td { padding: 14px 18px; text-align: start; vertical-align: top; border-bottom: 1.5px solid rgb(20 18 16 / .18); }
.goal__t thead th { background: var(--ink); color: var(--paper); font-weight: 800; font-size: 15px; }
.goal__t tbody th { font-weight: 800; }
.goal__t tbody td:nth-child(2) { font-weight: 800; color: var(--red-btn); }
.goal__t tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 700px) {
  .goal { box-shadow: 6px 6px 0 var(--ink); }
  .goal__t thead { display: none; }
  .goal__t tr { display: block; padding: 14px 16px; border-bottom: 1.5px solid rgb(20 18 16 / .18); }
  .goal__t tbody tr:last-child { border-bottom: 0; }
  .goal__t th, .goal__t td { display: block; padding: 2px 0; border: 0; }
}
.sq { max-width: 760px; margin: clamp(40px, 5vw, 70px) auto 0; text-align: center; }
.sq__q { font-family: var(--fd); font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; }
.sq__who { margin-top: 12px; font-weight: 800; }
.sq__more { display: flex; justify-content: center; margin-top: 18px; }
.issue__t--h1 { max-width: 22ch; font-size: clamp(38px, 4.6vw, 76px); }
.issue__sub { max-width: 40ch; margin-top: 14px; font-weight: 700; color: var(--ink); }
/* כרטיס שירות: הקישור על שם השירות, והכרטיס כולו לחיץ דרכו (01-FIXES א4) */
.svc__link { color: inherit; text-decoration: none; }
.svc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc__a { cursor: pointer; }
.cover__t--long { font-size: clamp(30px, 2.5vw, 40px); line-height: 1; } /* הכותרות הארוכות בכריכות (01-FIXES ב4) */

/* =========================================================
   הסרטון של יניב ואורי: מדבקה בדף הבית וחלון נגן (12.11.2026)
   ========================================================= */
.film-tag { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 9px; background: var(--red-btn); color: #FFF8EE; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font: inherit; font-weight: 800; font-size: 16px; line-height: 1; white-space: nowrap; cursor: pointer; transform: rotate(-4deg); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .2s; }
.film-tag svg { width: 18px; height: 18px; flex: none; }
.film-tag small { font-size: 13px; font-weight: 700; opacity: .85; }
.film-tag small::before { content: "· "; }
.film-tag:hover, .film-tag:focus-visible { transform: rotate(0) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.film-tag:focus-visible { outline: 3px dashed var(--ink); outline-offset: 4px; }
.duo__filmrow { display: flex; justify-content: center; margin-top: 22px; }
.duo__film { background: var(--ink); }
.film { width: min(92vw, calc(88svh * 9 / 16)); max-width: none; max-height: 92svh; padding: 0; border: 4px solid var(--ink); background: var(--ink); overflow: visible; }
.film::backdrop { background: rgb(20 18 16 / .86); }
.film__v { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: calc(92svh - 8px); background: #000; }
.film__x { position: absolute; z-index: 2; top: -18px; inset-inline-end: -18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); font: inherit; font-weight: 900; font-size: 18px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
html.film-open { overflow: hidden; }
@media (max-width: 700px) {
  .film { width: 100vw; max-height: 100svh; height: 100svh; border: 0; }
  .film__v { height: 100%; max-height: 100svh; aspect-ratio: auto; object-fit: contain; }
  .film__x { top: calc(12px + env(safe-area-inset-top)); inset-inline-end: 12px; }
  .film-tag { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .film-tag { transition: none; } }

/* לקוחות ממליצים, חלק ב: "פגשנו באמצע הדרך" (כריכות כמו חלק א) */
.mids-sec { padding-top: 0; }
/* עמודי "באמצע הדרך": הטקסט בפאנלים ארוך, אז במחשב הוא בעמודה צרה יותר, כדי שהדמות לא תעלה עליו */
@media (min-width: 900px) {
  .saga--mid .panel:has(.panel__art) .panel__d, .saga--mid .panel:has(.panel__art) .panel__t { max-width: 54%; }
  .saga--mid .panel .panel__art, .saga--mid .panel:nth-child(2) .panel__art, .saga--mid .panel:nth-child(3) .panel__art { left: 18px; translate: none; height: 50%; max-width: 42%; object-fit: contain; object-position: bottom left; }
}