/* ============================================================
   פיקוס — עמוד נוכחות
   נבנה על Ofek Design System · קונספט "קו הרכס"
   כל ערכי הטוקנים הועתקו מ-ofek-design-system/tokens/*.css
   ============================================================ */

/* ---------- fonts.css ---------- */
@font-face {
  font-family: "Caesarea";
  src: url("../fonts/caesarea-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caesarea";
  src: url("../fonts/caesarea-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* colors.css — ליבת המותג */
  --ficus-navy:#15184F; --ficus-red:#E81C24; --ficus-ink:#1A1A1A;
  --ficus-aqua:#A8DADC; --ficus-pink:#FFD0E2; --ficus-grey:#D9D9D9;

  --navy-900:#0B0D2E; --navy-800:#10123C; --navy-700:#15184F;
  --navy-600:#22265F; --navy-500:#333770; --navy-400:#4B4F87;
  --navy-300:#6E729F; --navy-200:#9A9DBC; --navy-100:#C9CBDC; --navy-050:#EDEEF4;

  --aqua-700:#3E888C; --aqua-600:#5FA8AB; --aqua-500:#A8DADC;
  --red-700:#B0141A;  --red-600:#CE181F;  --red-500:#E81C24;
  --pink-500:#FFD0E2;

  --grey-900:#1A1A1A; --grey-700:#4A4A4A; --grey-500:#8A8A8A;
  --grey-300:#D9D9D9; --grey-100:#F2F2F3; --grey-050:#FAFAFB;

  /* semantic — light */
  --surface-page:#FFFFFF;
  --surface-card:#FFFFFF;
  --surface-card-quiet:var(--navy-050);
  --text-strong:var(--navy-700);
  --text-body:var(--grey-900);
  --text-muted:var(--grey-700);
  --text-faint:var(--grey-500);
  --border-hairline:rgba(21,24,79,.12);
  --border-strong:rgba(21,24,79,.28);
  --action-primary:var(--red-500);
  --action-primary-hover:var(--red-600);
  --action-primary-press:var(--red-700);
  --action-secondary:var(--navy-700);
  /* סטייה מתועדת: --focus-ring במערכת = aqua-500, שנותן 1.53:1 מול לבן.
     על משטח בהיר משמשת aqua-700 מאותה סקאלה (4.12:1) כדי לעבור 3:1. */
  --focus-ring:var(--aqua-700);

  /* typography.css */
  --font-display:"Caesarea","Assistant","Arial Hebrew",sans-serif;
  --font-body:"Assistant","Caesarea","Arial Hebrew",sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --type-hero:clamp(44px,6.2vw,88px);
  --type-h2:clamp(26px,2.8vw,40px);
  --type-h3:24px;
  --type-lead:20px; --type-body:17px; --type-small:15px;
  --type-caption:13px; --type-eyebrow:12px;
  --lh-display:1.06; --lh-heading:1.16; --lh-body:1.62;
  --ls-display:-0.015em; --ls-heading:-0.01em; --ls-eyebrow:0.16em;

  /* spacing.css */
  --brick:24px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --gutter:24px; --page-max:1240px; --measure:62ch;
  --section-y:clamp(64px,9vw,128px);

  /* radius.css */
  --radius-1:2px; --radius-3:8px; --radius-pill:999px;

  /* elevation.css */
  --shadow-0:none;
  --shadow-lift:0 10px 28px rgba(21,24,79,.12);

  /* motion.css */
  --ease-settle:cubic-bezier(.16,.84,.32,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;

  --tap-min:44px;

  /* גובה ההדר הדביק — מפצה על scroll-margin של העוגנים */
  --header-h:64px;

  /* מקום שמפנה הבאנר התחתון כדי שלא יכסה את סוף העמוד */
  --cookie-bar-space:96px;
}

/* breakpoints.css — override של אותם טוקנים, בלי מחלקות מיוחדות */
@media (max-width:768px){
  :root{
    --gutter:20px;
    --section-y:56px;
    --type-body:16px;
    --type-lead:18px;
    --header-h:56px;
    --cookie-bar-space:148px;
  }
}

/* colors.css — scope כהה. ההירו חי כאן. */
.ofek-dark{
  --surface-page:var(--navy-900);
  --surface-card-quiet:var(--navy-700);
  --text-strong:#FFFFFF;
  --text-body:rgba(255,255,255,.88);
  --text-muted:var(--navy-200);
  --text-faint:var(--navy-300);
  --border-hairline:rgba(255,255,255,.10);
  --border-strong:rgba(255,255,255,.24);
  --action-secondary:#FFFFFF;
  --focus-ring:var(--aqua-500); /* 12.4:1 מול navy-900 */
}

/* ---------- base.css ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
/* גלילה חלקה רק למי שלא ביקש פחות תנועה */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
/* יעדי העוגנים עוצרים מתחת להדר הדביק, לא מאחוריו */
#top,#what-we-do,#platform,#contact{
  scroll-margin-block-start:calc(var(--header-h) + var(--space-4));
}
[hidden]{ display:none !important; }
/* הכיוון נקבע ע"י dir על <html> בלבד — base.css של המערכת נועל direction:rtl
   ולכן לא הועתק לכאן. כל שאר הקובץ logical-only ומתהפך לבד. */
body{
  margin:0;
  background:var(--surface-page); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--type-body);
  line-height:var(--lh-body); font-weight:var(--fw-regular);
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
h1,h2{
  font-family:var(--font-display); font-weight:var(--fw-bold);
  color:var(--text-strong); line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading); margin:0;
}
p{ margin:0; }
img{ max-inline-size:100%; }
:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
::selection{ background:var(--aqua-500); color:var(--navy-700); }

/* ---------- פריסה ---------- */
.container{
  max-inline-size:var(--page-max);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
/* משטח נייר. סקשן שיושבים בו כרטיסים לבנים — כדי שהכרטיס ייקרא ככרטיס. */
.section--paper{ background:var(--grey-050); }

/* ---------- Eyebrow ---------- */
/* סטייה מתועדת: Eyebrow.jsx tone="muted" → --text-faint (grey-500),
   שנותן 3.46:1 מול לבן ו-2.53:1 מול ורוד. כאן --text-muted (8.9:1 / 6.6:1). */
.eyebrow{
  display:flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-body); font-size:var(--type-eyebrow);
  font-weight:var(--fw-semibold); letter-spacing:var(--ls-eyebrow);
  line-height:1; color:var(--text-muted);
}
.eyebrow::before{
  content:""; inline-size:24px; block-size:2px;
  background:currentColor; opacity:.6; flex:none;
}

/* ---------- SectionHeading ---------- */
.section-heading{
  display:flex; flex-direction:column; gap:var(--space-4);
  max-inline-size:640px; margin-block-end:var(--space-7);
}
.section-heading h2{ font-size:var(--type-h2); }

/* ---------- הדר האתר ---------- */
/* sticky ולא fixed — הוא תופס מקום בזרימה, ולכן לא מכסה תוכן בטעינה.
   שקוף-מטושטש עם hairline תחתון. בלי צל, בלי hide-on-scroll, בלי JS. */
.site-header{
  position:sticky; inset-block-start:0; z-index:100;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-block-end:1px solid var(--border-hairline);
}
/* דפדפן בלי backdrop-filter מקבל רקע אטום כמעט — קריאוּת לפני אפקט */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{ background:rgba(255,255,255,.95); }
}
.site-header__inner{
  display:flex; align-items:center; gap:var(--space-4);
  min-block-size:var(--header-h);
  padding-block:var(--space-2);
}
.site-header__logo{
  display:inline-flex; align-items:center; flex:none;
  min-block-size:var(--tap-min);
  transition:opacity var(--dur-2) var(--ease-standard);
}
.site-header__logo:hover{ opacity:.7; }
/* 22px גובה × יחס 2400/402 ≈ 131px רוחב */
.site-header__logo img{
  block-size:22px; inline-size:auto; display:block; aspect-ratio:2400/402;
}

/* שני ה-auto מחלקים ביניהם את השטח הפנוי: לוגו — ניווט — פעולות.
   במובייל הניווט יורד, וה-auto של הפעולות דוחף אותן לקצה לבדו. */
.site-header__nav{
  display:flex; align-items:center; gap:var(--space-1);
  margin-inline-start:auto;
}
.site-header__nav a{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min); padding-inline:var(--space-3);
  font-family:var(--font-body); font-size:15px;
  font-weight:var(--fw-medium); letter-spacing:0;
  color:var(--text-strong); text-decoration:none;
  transition:opacity var(--dur-2) var(--ease-standard);
}
.site-header__nav a:hover{ opacity:.7; }

.site-header__actions{
  display:flex; align-items:center; gap:var(--space-2);
  margin-inline-start:auto; flex:none;
}
.site-header__call{
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-block-size:var(--tap-min); padding-inline:var(--space-3);
  font-family:var(--font-body); font-size:15px;
  font-weight:var(--fw-semibold);
  color:var(--text-strong); text-decoration:none;
  transition:opacity var(--dur-2) var(--ease-standard);
}
.site-header__call:hover{ opacity:.7; }
.site-header__call svg{ flex:none; }
/* הכפתור היחיד באזור ההדר שנושא אדום. קומפקטי, אבל 44px מגע נשמרים מ-.btn */
.site-header .btn{ padding:10px var(--space-5); font-size:15px; }

/* ---------- הירו ---------- */
/* בהיר. הלוקאפ הצבעוני על נייר לבן — הוא הלוגו בכל האתר.
   הפיצול לקוח מגרסה א׳ ב-homepage-variants: טקסט בצד ההתחלה, דימוי לגובה 4:5
   בצד הסיום. לבני הדגש שמאחורי התמונה שם לא הועתקו — שדה לבנים אחד למסך,
   והשדה הזה הוא קו הרכס. */
/* ההדר הדביק כבר תופס מקום מעל — ההירו לא צריך את מלוא הריווח העליון */
.hero{
  background:var(--surface-page);
  padding-block:clamp(32px,4.5vw,64px) var(--section-y);
  overflow:hidden;
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--space-9);
  align-items:center;
}
.hero__logo{ block-size:44px; inline-size:auto; display:block; aspect-ratio:2400/402; }
.hero__body{ display:flex; flex-direction:column; gap:var(--space-5); margin-block-start:var(--space-7); }
.hero h1{
  font-size:var(--type-hero);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  max-inline-size:14ch;
}
.hero__lead{
  font-size:var(--type-lead); line-height:var(--lh-body);
  color:var(--text-muted); max-inline-size:46ch;
}
/* חתוך בזווית ישרה, בלי מסגרת ובלי צל — כמו הפורטרט בגרסה א׳ */
.hero__media{ aspect-ratio:4/5; }
.hero__media img{
  inline-size:100%; block-size:100%;
  object-fit:cover; display:block;
}

/* ---------- כרטיסים ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);
}
.card{
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-3);
  overflow:hidden;
  transition:transform var(--dur-2) var(--ease-settle),
             box-shadow var(--dur-2) var(--ease-settle);
}
@media (hover:hover){
  .card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); }
}
/* דימוי 3:2, אותה זווית צילום בשלושתם — לפי "שלושת המהלכים" ב-homepage-variants.
   הוא נצמד לשוליים; הריפוד חי ב-__body. */
.card__media{ display:block; aspect-ratio:3/2; background:var(--grey-100); }
.card__media img{
  inline-size:100%; block-size:100%;
  object-fit:cover; display:block;
}
.card__body{ padding:var(--space-6); }
/* האייקון של המערכת: לבנה מלאה 8px */
.card__bullet{
  inline-size:8px; block-size:8px;
  background:var(--navy-700); display:block;
  margin-block-end:var(--space-4);
}
.card h3{
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--type-h3); line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading); color:var(--text-strong);
  margin:0 0 var(--space-3);
}
.card p{ color:var(--text-muted); max-inline-size:var(--measure); }

/* ---------- רצועת אמירה ---------- */
/* full-bleed עם שורת חתימה אחת. התמונה נשארת דקורטיבית (alt="") — היא הבמה,
   לא התוכן. */
.image-band{ position:relative; display:block; }
.image-band img{
  display:block;
  inline-size:100%;
  block-size:clamp(220px,32vw,420px);
  object-fit:cover;
}
/* Protection gradient — הגרדיאנט היחיד שהמערכת מתירה, וקיים רק כדי להחזיק
   לבן מעל תמונה. הרמה 82% נבחרה מהמקרה הגרוע ביותר: פיקסל לבן מתחת לצעיף
   נייבי-900 יוצא 11.3:1 מול טקסט לבן. המינימום ל-AA היה ~58%.
   הרצועה חיה רק בעמוד הבית, שהוא LTR — ולכן to right ולא כיוון לוגי. */
.image-band__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to right,
    rgba(11,13,46,.82) 0%,
    rgba(11,13,46,.82) 55%,
    rgba(11,13,46,0) 92%);
}
.image-band__inner{
  position:absolute; inset-block:0; inset-inline:0;
  display:flex; align-items:center;
}
/* Caesarea 500 — משקל הציטוטים של המערכת. לבן בלבד: אין כאן אדום ואין אקווה. */
.image-band__line{
  font-family:var(--font-display); font-weight:var(--fw-medium);
  font-size:clamp(22px,3.4vw,38px);
  line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading);
  color:#fff;
  max-inline-size:18ch;
  text-wrap:balance;
}

/* ---------- רצועת לקוחות ---------- */
/* לבן: השכן העליון הוא רצועת הדימוי הכהה והתחתון ורוד — אין שני רקעים זהים
   צמודים. הלוגואים מוצגים כמו שהם: בלי grayscale, בלי recolor, בלי אטימות.
   flex ולא grid כדי ששורה חלקית תתמרכז מעצמה. */
.clients{ background:var(--surface-page); }
.clients__grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--space-6) var(--space-5);
}
/* בסיס 6 עמודות: 6 פריטים + 5 מרווחים = 100% */
.clients__item{
  flex:0 0 calc((100% - 5 * var(--space-5)) / 6);
  display:flex; align-items:center; justify-content:center;
  min-block-size:56px;
}
/* גובה קבוע + רוחב אוטומטי; ה-max מונע מלוגו רחב חריג (תטרו, אמן העץ)
   לשבור את השורה, ו-contain שומר על היחס כשהוא נחתך. */
.clients__item img{
  block-size:48px; inline-size:auto;
  max-inline-size:100%;
  object-fit:contain; display:block;
}
/* לוגו ריבועי/גבוה נקרא גדול יותר באותו גובה — מדרגה אחת למטה, כדי
   שהמסה הוויזואלית תהיה אחידה ולא רק המספר. */
.clients__item--tall img{ block-size:40px; }

/* ---------- ציטוט ---------- */
.method{ background:var(--pink-500); }
.quote{
  margin:0; display:flex; flex-direction:column; gap:var(--space-5);
  padding-inline-start:var(--space-5);
  /* סטייה מתועדת: Quote.jsx קובע קו אדום. האדום שמור לכפתור וללבנה. */
  border-inline-start:3px solid var(--navy-700);
  max-inline-size:52ch;
}
.quote blockquote{
  margin:0; font-family:var(--font-display); font-weight:var(--fw-medium);
  font-size:var(--type-h3); line-height:1.4;
  letter-spacing:var(--ls-heading); color:var(--text-strong);
}
.method .eyebrow{ margin-block-end:var(--space-5); }

/* ---------- כפתורים ---------- */
/* Button.jsx: size lg · radius 2px · ls .04em · בלי bounce */
.btn{
  display:flex; inline-size:100%;
  align-items:center; justify-content:center; gap:var(--space-2);
  min-block-size:var(--tap-min);
  padding:17px 34px;
  font-family:var(--font-body); font-size:16px;
  font-weight:var(--fw-semibold); letter-spacing:.04em; line-height:1.1;
  border-radius:var(--radius-1); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-2) var(--ease-standard),
             transform var(--dur-1) var(--ease-standard);
}
.btn--primary{ background:var(--action-primary); color:#fff; } /* 4.54:1 */
.btn--primary:hover{ background:var(--action-primary-hover); }
.btn--primary:active{ background:var(--action-primary-press); transform:translateY(1px); }

/* סטייה מתועדת: variant outline במערכת = --border-strong (1.83:1 מול לבן).
   כאן מסגרת נייבי מלאה, כבקשת הבריף וכדי לעבור 3:1. */
.btn--secondary{
  background:transparent; color:var(--text-strong);
  border-color:var(--action-secondary);
}
.btn--secondary:hover{ background:var(--surface-card-quiet); }
.btn--secondary:active{ transform:translateY(1px); }
.btn--secondary svg{ flex:none; }

/* מדרג שלישי: פעולה אופציונלית. בלי מסגרת, בלי משקל ויזואלי. */
.btn--ghost{
  background:transparent; color:var(--action-secondary);
  border-color:transparent;
}
.btn--ghost:hover{ background:var(--surface-card-quiet); }
.btn--ghost:active{ transform:translateY(1px); }

/* כפתור שאינו ראשי — לא נמתח לרוחב מלא */
.btn--inline{ display:inline-flex; inline-size:auto; }

/* ---------- טופס ---------- */
.contact__card{
  max-inline-size:560px; margin-inline:auto;
  background:var(--surface-card);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-3);
  padding:var(--space-7);
}
.field{ margin-block-end:var(--space-5); }
.field label{
  display:block; margin-block-end:var(--space-2);
  font-size:var(--type-small); font-weight:var(--fw-semibold);
  color:var(--text-strong);
}
.field input{
  inline-size:100%; min-block-size:var(--tap-min);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border-strong);
  border-radius:var(--radius-1);
  background:var(--surface-card);
  font-family:var(--font-body); font-size:var(--type-body);
  line-height:1.4; color:var(--text-body);
  transition:border-color var(--dur-2) var(--ease-standard);
}
.field input:hover{ border-color:var(--navy-700); }

/* ---------- Turnstile ---------- */
/* ה-iframe של Turnstile ברוחב קבוע (~300px). על מסך צר זה רחב מהכרטיס,
   ולכן הגלילה נספגת כאן ולא בעמוד. */
.cf-turnstile{
  margin-block:var(--space-5) var(--space-6);
  max-inline-size:100%;
  overflow-x:auto;
}
.cf-turnstile iframe{ max-inline-size:100%; }

/* ---------- מצבי טופס ---------- */
.form-error{
  margin-block-start:var(--space-4);
  font-size:var(--type-small); font-weight:var(--fw-semibold);
  color:var(--red-700); /* 7.1:1 מול לבן */
}

/* ---------- מצב תודה ---------- */
/* הלבנה של המותג, לא עיגול: מרקר בפינה ישרה, אקווה = "קרה משהו חי". */
.form-success{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--space-4); text-align:center;
  padding-block:var(--space-5);
}
.form-success__mark{
  inline-size:56px; block-size:56px; flex:none;
  background:var(--aqua-500);
  display:flex; align-items:center; justify-content:center;
}
/* וי בנוי משתי מסגרות פיזיות — לא מתהפך עם dir, ולא אימוג׳י */
.form-success__mark::after{
  content:"";
  width:13px; height:23px;
  border-right:3px solid var(--navy-700);   /* 10.8:1 מול אקווה */
  border-bottom:3px solid var(--navy-700);
  transform:rotate(45deg) translate(-1px,-2px);
}
.form-success__title{
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:var(--type-h3); line-height:var(--lh-heading);
  letter-spacing:var(--ls-heading); color:var(--text-strong);
}
.form-success__sub{ color:var(--text-muted); }
.form-success .btn{ margin-block-start:var(--space-3); }

.form-note{
  margin-block-start:var(--space-4);
  font-size:var(--type-small); color:var(--text-muted);
}
.or{
  display:flex; align-items:center; gap:var(--space-4);
  margin-block:var(--space-6);
  font-size:var(--type-small); font-weight:var(--fw-semibold);
  color:var(--text-muted);
}
.or::before,.or::after{
  content:""; flex:1; block-size:1px; background:var(--border-hairline);
}

/* ---------- פוטר ---------- */
.site-footer{
  border-block-start:1px solid var(--border-hairline);
  padding-block:var(--space-7);
}
.site-footer .container{
  display:flex; flex-direction:column; align-items:center; gap:var(--space-4);
  text-align:center;
}
.site-footer img{ block-size:28px; inline-size:auto; display:block; aspect-ratio:2400/402; }
.site-footer p{ font-size:var(--type-small); color:var(--text-muted); }

/* לינקים משפטיים — עברית, גם בעמוד האנגלי (הקהל שלהם ישראלי) */
.footer-links{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--space-1);
}
.footer-links a{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min); padding-inline:var(--space-3);
  font-size:var(--type-small); color:var(--text-muted); /* 9.0:1 מול לבן */
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:opacity var(--dur-2) var(--ease-standard);
}
.footer-links a:hover{ opacity:.7; }
.footer-links span{ font-size:var(--type-small); color:var(--text-muted); }

/* ---------- באנר עוגיות ---------- */
/* בר נמוך, לא חוסם. ה-scope הכהה נותן גם את טבעת הפוקוס הנכונה (אקווה). */
.cookie-bar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:200;
  background:var(--navy-900);
  border-block-start:1px solid var(--border-hairline);
  color:var(--text-body);
  padding:var(--space-4) var(--gutter);
}
.cookie-bar__inner{
  max-inline-size:var(--page-max); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4) var(--space-5); flex-wrap:wrap;
}
.cookie-bar p{
  font-size:var(--type-small); line-height:1.5;
  max-inline-size:var(--measure); margin:0;
}
.cookie-bar a{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min); padding-inline:var(--space-2);
  color:var(--text-strong); font-weight:var(--fw-semibold);
  text-decoration:underline; text-underline-offset:3px;
}
.cookie-bar a:hover{ opacity:.7; }
/* סטייה מתועדת: הבריף ביקש pill. במערכת רדיוס 999px שמור ל-Badge בלבד,
   ולכן זה כפתור outline לבן ברדיוס 2px כמו כל כפתור אחר. */
.cookie-bar__ok{
  flex:none; min-block-size:var(--tap-min);
  padding:10px var(--space-5);
  background:transparent; color:var(--text-strong);
  /* אותה סטייה כמו ב-btn--secondary: --border-strong (לבן 24%) נותן 1.9:1
     מול נייבי-900. לבן 60% נותן ~6.7:1 ועובר את 3:1 של גבול רכיב. */
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-1);
  font-family:var(--font-body); font-size:15px;
  font-weight:var(--fw-semibold); letter-spacing:.04em; line-height:1.1;
  cursor:pointer;
  transition:background var(--dur-2) var(--ease-standard),
             transform var(--dur-1) var(--ease-standard);
}
.cookie-bar__ok:hover{ background:rgba(255,255,255,.10); }
.cookie-bar__ok:active{ transform:translateY(1px); }

/* כשהבר פתוח — סוף העמוד מפנה לו מקום */
body.has-cookie-bar .site-footer{
  padding-block-end:calc(var(--space-7) + var(--cookie-bar-space));
}

/* ---------- עמודי מסמך (נגישות · פרטיות) ---------- */
/* בהיר עם hairline תחתון. הלוקאפ הצבעוני, כמו בכל שאר האתר. */
.doc-header{
  background:var(--surface-page);
  border-block-end:1px solid var(--border-hairline);
  padding-block:var(--space-5);
}
.doc-header__home{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min);
  transition:opacity var(--dur-2) var(--ease-standard);
}
.doc-header__home:hover{ opacity:.7; }
.doc-header__home img{
  block-size:26px; inline-size:auto; display:block; aspect-ratio:2400/402;
}

.doc{ padding-block:var(--section-y); }
.doc__body{ max-inline-size:var(--measure); }
.doc__body h1{ font-size:var(--type-h2); margin-block:var(--space-4) var(--space-5); }
.doc__body h2{
  font-size:var(--type-h3);
  margin-block:var(--space-7) var(--space-4);
}
.doc__body p{ color:var(--text-body); margin-block-end:var(--space-4); }
.doc__body ul{
  list-style:none; margin:0 0 var(--space-4); padding:0;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.doc__body li{ position:relative; padding-inline-start:var(--space-5); }
/* האייקון של המערכת: לבנה מלאה 8px */
.doc__body li::before{
  content:""; position:absolute;
  inset-inline-start:0; inset-block-start:.62em;
  inline-size:8px; block-size:8px; background:var(--navy-700);
}
.doc__body a{
  color:var(--text-strong); font-weight:var(--fw-semibold);
  text-decoration:underline; text-underline-offset:3px;
}
.doc__body a:hover{ opacity:.7; }
.doc__contact{
  background:var(--surface-card-quiet);
  border-inline-start:3px solid var(--aqua-700);
  padding:var(--space-5);
  margin-block-end:var(--space-4);
}
.doc__contact p:last-child{ margin-block-end:0; }
.doc__contact a{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min);
}
.doc__meta{
  margin-block-start:var(--space-7);
  padding-block-start:var(--space-5);
  border-block-start:1px solid var(--border-hairline);
}
.doc__meta p{ font-size:var(--type-small); color:var(--text-muted); }
.doc__meta p:last-child{ margin-block-end:0; }

/* ---------- תנועה ---------- */
/* דברים לא קופצים. הם מתיישבים. fade + 10px. */
.js .reveal{
  opacity:0; transform:translateY(10px);
  transition:opacity var(--dur-3) var(--ease-settle),
             transform var(--dur-3) var(--ease-settle);
  transition-delay:calc(var(--i,0) * 40ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  :root{ --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; }
  .js .reveal{ opacity:1; transform:none; transition:none; transition-delay:0ms; }
  .card:hover{ transform:none; }
}

/* ---------- סקשן הפלטפורמה ---------- */
/* לבן, כפי שנתבקש במקור: השכן העליון ורוד והתחתון נייר — אין שני רקעים זהים צמודים.
   הסקשן חייב להישאר בהיר כי הוא נושא את הלוקאפ הצבעוני (FICUS בנייבי). */
/* הלוקאפ הצבעוני — אותו נכס שמופיע בקונסול של גוגל. צנוע, מעל ה-eyebrow. */
.platform__logo{
  block-size:36px; inline-size:auto; display:block;
  aspect-ratio:2400/402;
  margin-block-end:var(--space-5);
}
.platform .section-heading{ margin-block-end:var(--space-5); }
.platform__body{
  color:var(--text-muted); /* 8.9:1 מול לבן */
  max-inline-size:var(--measure);
}
/* שורת לינקים — אותה שפה של footer-links, בגוף העמוד */
.platform__links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-1);
  margin-block-start:var(--space-5);
  font-size:var(--type-small); color:var(--text-muted);
}
.platform__links-label{ padding-inline-end:var(--space-2); }
.platform__links a{
  display:inline-flex; align-items:center;
  min-block-size:var(--tap-min); padding-inline:var(--space-3);
  color:var(--text-muted);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:opacity var(--dur-2) var(--ease-standard);
}
.platform__links a:hover{ opacity:.7; }

/* ---------- רספונסיביות ---------- */
/* 6 → 4 → 3 עמודות ברצועת הלקוחות */
@media (max-width:1024px){
  .clients__item{ flex-basis:calc((100% - 3 * var(--space-5)) / 4); }
}

@media (max-width:768px){
  .cards{ grid-template-columns:minmax(0,1fr); }

  /* ההדר נשאר שורה אחת: לוגו + חיוג + Talk to us. אין המבורגר —
     העמוד קצר, והעוגנים נגישים בגלילה. */
  .site-header__nav{ display:none; }
  .site-header__inner{ gap:var(--space-3); padding-block:var(--space-1); }
  .site-header__logo img{ block-size:20px; }
  .site-header__call{ padding-inline:var(--space-2); }
  .site-header .btn{ padding:10px var(--space-4); font-size:14px; }

  .clients__grid{ gap:var(--space-5) var(--space-4); }
  .clients__item{
    flex-basis:calc((100% - 2 * var(--space-4)) / 3);
    min-block-size:44px;
  }
  /* 32px ולא 36 — בתא של ~110px ברוחב מסך 375 גם הלוגו הרחב ביותר
     (תטרו, יחס 4.17) עדיין לא נתקל ב-max ונשאר בגובה המלא. */
  .clients__item img{ block-size:32px; }
  .clients__item--tall img{ block-size:28px; }
  .hero__logo{ block-size:32px; }
  .hero h1{ max-inline-size:none; }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
  /* במסך צר השורה תופסת חלק גדול מהרוחב — המישור הכהה נמתח בהתאם,
     אחרת סוף השורה יוצא מהצעיף. */
  .image-band__veil{
    background:linear-gradient(to right,
      rgba(11,13,46,.82) 0%,
      rgba(11,13,46,.82) 82%,
      rgba(11,13,46,0) 100%);
  }
  /* 4:5 ברוחב מלא היה דוחף את כל העמוד מתחת לקיפול. חיתוך מרכזי ל-4:3. */
  .hero__media{ aspect-ratio:4/3; }
  .contact__card{ padding:var(--space-6) var(--space-5); }
  .btn{ padding:14px 22px; font-size:15px; }
  .platform__logo{ block-size:30px; }

  /* הבר נשאר שתי שורות לכל היותר: טקסט מעל, כפתור מתחת בקצה */
  .cookie-bar{ padding-block:var(--space-3); }
  .cookie-bar__inner{ gap:var(--space-2) var(--space-4); }
  .cookie-bar__ok{ margin-inline-start:auto; }
  .doc-header__home img{ block-size:22px; }
}

/* מסך צר במיוחד — כפתור החיוג מצטמצם לאייקון. ה-aria-label על הקישור
   שומר על ההכרזה לקורא מסך, ושטח המגע נשאר 44px. */
@media (max-width:400px){
  .site-header__call-label{ display:none; }
  .site-header__call{ min-inline-size:var(--tap-min); justify-content:center; }
  .site-header__logo img{ block-size:18px; }
}