/* =========================================================
   המנגנון הייחודי — מערכת עיצוב
   גופן: Heebo (כמו בדף הקיים)
   פלטה: נגזרה מקובץ הלוגו — טרהקוטה #A86038, אפרסק #E8C8B8
   ========================================================= */

:root{
  --paper:#FFFFFF;
  /* גובה פס התפריט. ⚠️ נקודת אמת אחת: השער בדף הליווי
     מחשב את גובהו כ-100svh פחות הערך הזה (bridge.css).
     ערך מקודד קשיח בשני מקומות = שער שבור בשינוי הבא. */
  --hdr-h:6rem;
  --sand:#FAF6F2;
  --tint:#F5EBE3;
  --peach:#E8C8B8;
  --clay:#A55C34;
  --clay-2:#8A4B28;
  --ink:#1C1714;
  --ink-2:#5B5049;
  --line:#E7DED7;
  --dark:#241C17;

  --wrap:75rem;
  --measure:38rem;

  --fs-xs:.875rem;
  --fs-sm:1rem;
  --fs-base:1.125rem;
  --fs-lead:clamp(1.1875rem,2.2vw,1.5rem);
  --fs-h3:clamp(1.25rem,2.2vw,1.5rem);
  --fs-h2:clamp(1.75rem,4.2vw,3rem);
  --fs-h1:clamp(2.25rem,5.2vw,4rem);

  --gap:clamp(3rem,7vw,6rem);
  --radius:14px;
  --shadow:0 1px 2px rgba(28,23,20,.05), 0 12px 32px -18px rgba(28,23,20,.28);
}

*,*::before,*::after{box-sizing:border-box}
/* ⚠️ `scroll-padding-top` הוא החובה של כותרת דביקה: בלעדיו כל נחיתה
   על עוגן פנימי מצמידה את היעד לקצה העליון — והכותרת מכסה
   אותו. זה גם מה שהופך את `#main` לנחיתה שבה פס התפריט נעלם:
   `<main id="main">` מתחיל בדיוק בגובה הכותרת. */
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
     scroll-padding-top:var(--hdr-h)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important; transition:none!important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Heebo, "Segoe UI", system-ui, sans-serif;
  font-size:var(--fs-base);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--clay); outline-offset:3px; border-radius:4px}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.measure{max-width:var(--measure)}
.center{text-align:center; margin-inline:auto}

h1,h2,h3,h4{margin:0; line-height:1.14; font-weight:800; letter-spacing:-.015em}
h1{font-size:var(--fs-h1); line-height:1.06}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3); font-weight:700; line-height:1.3}
h4{font-size:1.0625rem; font-weight:700}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}

.eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.16em;
  color:var(--clay); margin:0 0 1rem; text-transform:none;
}
.lead{font-size:var(--fs-lead); line-height:1.62; color:var(--ink-2)}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-sm)}

/* ---------- כפתורים ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.5rem 1.75rem;
  font-size:var(--fs-sm); font-weight:700; text-decoration:none;
  border-radius:999px; border:2px solid transparent;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-primary{background:var(--clay); color:#fff}
.btn-primary:hover{background:var(--clay-2)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--clay); color:var(--clay)}
.btn-onDark{background:#fff; color:var(--ink)}
.btn-onDark:hover{background:var(--peach)}
.btn-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem; min-height:44px;
  font-weight:700; color:var(--clay); text-decoration:none;
}
.link-arrow::after{content:"←"; transition:transform .18s ease}
.link-arrow:hover::after{transform:translateX(-4px)}

/* ---------- כותרת האתר ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--hdr-h);
}
.brand{display:inline-flex; align-items:center; min-height:52px; text-decoration:none; flex:0 0 auto}
.brand img{height:52px; width:auto}
@media (min-width:64em){ .brand img{height:64px} }

.nav-toggle{
  margin-inline-start:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; padding:0;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  cursor:pointer; color:var(--ink);
}
.nav-toggle span{display:block; width:20px; height:2px; background:currentColor; position:relative}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; inset-inline:0; height:2px; background:currentColor;
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

.site-nav ul{list-style:none; margin:0; padding:0}
.site-nav a{
  display:flex; align-items:center; min-height:48px;
  text-decoration:none; font-size:var(--fs-sm); font-weight:500; color:var(--ink);
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--clay)}
.site-nav a[aria-current="page"]{font-weight:700}

.head-cta{display:none}

/* ⚠️ הסף הוא 72em ולא 64em. התפריט מונה **שמונה** פריטים, ובמסך של
   1024 הם לא נכנסים לצד הלוגו והכפתור — הם מתכווצים וכל תווית נשברת
   לשתי שורות. תפריט נפתח עדיף על שורה דחוסה. */
@media (max-width:71.99em){
  .site-nav{
    display:none;
    position:absolute; inset-inline:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem 1.25rem 1.5rem;
    box-shadow:var(--shadow);
  }
  .site-nav.open{display:block}
  .site-nav li + li{border-top:1px solid var(--line)}
  .site-nav a{min-height:54px; font-size:1.0625rem}
  .site-nav .m-cta{margin-top:1rem; border-top:0!important}
  .site-nav .m-cta a{
    justify-content:center; background:var(--clay); color:#fff;
    border-radius:999px; font-weight:700;
  }
}
@media (min-width:72em){
  .nav-toggle{display:none}
  .site-nav{margin-inline-start:auto}
  .site-nav ul{display:flex; align-items:center; gap:.9rem}
  /* תווית לא נשברת לעולם: ככה גלישה נעשית גלויה במקום להסתתר כשורה שנייה */
  .site-nav a{white-space:nowrap; font-size:.9375rem}
  .site-nav .m-cta{display:none}
  .site-head .wrap{width:min(100% - 2rem, 82rem)}
  .head-cta{display:inline-flex; gap:.75rem; align-items:center}
  /* ⚠️ `display:none` כאן ולא בשורה נפרדת לפני: שני כללים לאותו סלקטור
     באותו בלוק — האחרון מנצח. הצהרה מוקדמת של none נדרסה בשקט, והטלפון
     המשיך להופיע ב-72–84em ודחס את הכפתור לשלוש שורות. */
  .head-phone{
    display:none; align-items:center; min-height:44px;
    font-weight:700; text-decoration:none; font-size:var(--fs-sm); white-space:nowrap;
  }
  .head-phone:hover{color:var(--clay)}
}
/* רק במסך רחב באמת יש מקום גם לטלפון וגם לשמונה פריטים */
@media (min-width:84em){
  .site-nav ul{gap:1.3rem}
  .site-nav a{font-size:1rem}
  .head-phone{display:inline-flex}
}

/* ---------- סקשנים ---------- */
section{padding-block:var(--gap)}
.band-sand{background:var(--sand)}
.band-tint{background:var(--tint)}
.band-dark{background:var(--dark); color:#fff}
.band-dark h1,.band-dark h2,.band-dark h3{color:#fff}
.band-dark .eyebrow{color:var(--peach)}
.band-dark .lead,.band-dark .muted{color:#DFD2C8}
.band-dark :focus-visible{outline-color:var(--peach)}

.sec-head{max-width:46rem; margin-bottom:2.5rem}
.sec-head p{margin-top:1rem}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(2.5rem,6vw,4.5rem) var(--gap); position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-block-start:-10%; inset-inline-start:-14%;
  width:min(46vw,34rem); aspect-ratio:284/402;
  background:url("img/fingerprint.webp") no-repeat center/contain;
  opacity:.28;
}
.hero > .wrap{position:relative; z-index:1}
@media (max-width:59.99em){ .hero::before{width:64vw; opacity:.2; inset-block-start:auto; inset-block-end:-6%} }
.hero-grid{display:grid; gap:2.5rem; align-items:center}
@media (min-width:60em){
  .hero-grid{grid-template-columns:1.15fr .85fr; gap:4.5rem}
}
.hero h1 em{font-style:normal; color:var(--clay)}
.hero .lead{margin-top:1.5rem}
.hero-media{position:relative}
.hero-media img{
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  aspect-ratio:7/5; object-fit:cover; width:100%;
}
.hero-media figcaption{
  margin-top:.75rem; font-size:var(--fs-xs); color:var(--ink-2);
}

/* ---------- רצועת לקוחות ---------- */
.logos{display:flex; flex-wrap:wrap; align-items:center; gap:1.75rem 3.25rem; justify-content:center}
.logos img{height:38px; width:auto; opacity:.92}
@media (min-width:48em){ .logos img{height:46px} }
.logos img[alt="Lightricks"]{height:24px}
.logos img[alt="בנק דיסקונט"]{height:52px}
.logos img[alt="Philip Morris International"]{height:44px}
@media (min-width:48em){ .logos img[alt="Lightricks"]{height:28px} .logos img[alt="בנק דיסקונט"]{height:62px} .logos img[alt="Philip Morris International"]{height:52px} }
.logos li{list-style:none}
.logos-note{margin-top:1.5rem; text-align:center; font-size:var(--fs-xs); color:var(--ink-2)}

/* ---------- כרטיסי תחומים ---------- */
.cards{display:grid; gap:1.25rem; list-style:none; margin:0; padding:0}
@media (min-width:40em){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (min-width:64em){ .cards.c4{grid-template-columns:repeat(4,1fr)} .cards.c3{grid-template-columns:repeat(3,1fr)} }

.card{
  display:flex; flex-direction:column; gap:.75rem;
  padding:1.75rem 1.5rem 1.5rem;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:inherit; height:100%;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover{border-color:var(--clay); transform:translateY(-3px); box-shadow:var(--shadow)}
.card .num{font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; color:var(--clay)}
.card p{font-size:var(--fs-sm); color:var(--ink-2); margin:0}
.card .go{margin-top:auto; padding-top:.75rem; font-weight:700; color:var(--clay); font-size:var(--fs-sm)}
.card .go::after{content:" ←"}

/* ---------- רשימת סדנאות ---------- */
.wlist{list-style:none; margin:0; padding:0}
.wlist li{border-top:1px solid var(--line)}
.wlist li:last-child{border-bottom:1px solid var(--line)}
.wlist a{
  display:grid; gap:.35rem; padding-block:1.5rem; text-decoration:none;
  transition:background-color .16s ease;
}
.wlist a:hover{background:var(--sand)}
.wlist h3{margin:0}
.wlist p{margin:0; font-size:var(--fs-sm); color:var(--ink-2)}
.wlist .meta{font-size:var(--fs-xs); font-weight:700; color:var(--clay); letter-spacing:.1em}
@media (min-width:52em){
  .wlist a{grid-template-columns:minmax(0,18rem) 1fr auto; gap:2rem; align-items:baseline}
  .wlist .go{color:var(--clay); font-weight:700; font-size:var(--fs-sm); white-space:nowrap}
  .wlist .go::after{content:" ←"}
}

/* ---------- נקודות / רשימות ---------- */
.ticks{list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.85rem}
.ticks li{position:relative; padding-inline-start:1.75rem}
.ticks li::before{
  content:""; position:absolute; inset-inline-start:0; top:.7em;
  width:9px; height:9px; border-radius:50%; background:var(--clay);
}
.band-dark .ticks li::before{background:var(--peach)}

.steps{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:2rem}
@media (min-width:52em){ .steps{grid-template-columns:repeat(3,1fr); gap:2.5rem} }
.steps li{counter-increment:s}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
  color:var(--clay); margin-bottom:.5rem;
}
.steps h3{margin-bottom:.4rem}
.steps p{font-size:var(--fs-sm); color:var(--ink-2); margin:0}

/* ---------- המלצות ---------- */
.quotes{list-style:none; margin:0; padding:0; display:grid; gap:1.25rem}
@media (min-width:56em){ .quotes{grid-template-columns:repeat(3,1fr)} }
.quote{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.75rem 1.5rem; height:100%;
  display:flex; flex-direction:column;
}
.quote blockquote{margin:0 0 1.25rem; font-size:var(--fs-sm); line-height:1.8}
.quote footer{margin-top:auto; padding-top:.5rem; border-top:1px solid var(--line)}
.quote cite{font-style:normal; font-weight:700; display:block; font-size:var(--fs-sm)}
.quote .role{font-size:var(--fs-xs); color:var(--ink-2)}

/* ---------- שני טורים ---------- */
.split{display:grid; gap:2.5rem; align-items:start}
@media (min-width:60em){
  .split{grid-template-columns:1fr 1fr; gap:4rem}
  .split.wide-start{grid-template-columns:1.2fr .8fr}
  .split.wide-end{grid-template-columns:.8fr 1.2fr}
}
.split img{border-radius:var(--radius); box-shadow:var(--shadow)}

/* ---------- פס קריאה לפעולה ---------- */
.cta-band{background:var(--dark); color:#fff}
.cta-band h2{color:#fff; max-width:20ch}
.cta-band p{color:#DFD2C8; margin-top:1rem}
.cta-ways{list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:1rem 2rem}
.cta-ways a{
  display:inline-flex; align-items:center; min-height:48px;
  font-weight:700; text-decoration:none; color:#fff; border-bottom:2px solid transparent;
}
.cta-ways a:hover{border-bottom-color:var(--peach); color:var(--peach)}
.cta-band :focus-visible{outline-color:var(--peach)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding-block:1.25rem;
  font-weight:700; font-size:var(--fs-h3); line-height:1.35;
  display:flex; gap:1rem; align-items:flex-start; min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-inline-start:auto; color:var(--clay); font-weight:700; flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .a{padding-bottom:1.5rem; max-width:var(--measure); color:var(--ink-2)}

/* ---------- פוטר ---------- */
.site-foot{background:var(--sand); border-top:1px solid var(--line); padding-block:3rem 2rem}
.foot-grid{display:grid; gap:2rem}
@media (min-width:52em){ .foot-grid{grid-template-columns:1.2fr 1fr 1fr} }
.site-foot h3{margin-bottom:.75rem; font-size:1.0625rem; font-weight:700}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li a{
  display:inline-flex; align-items:center; min-height:44px;
  text-decoration:none; font-size:var(--fs-sm); color:var(--ink-2);
}
.site-foot li a:hover{color:var(--clay)}
.site-foot .brand img{height:58px}
.foot-bottom{
  margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--ink-2);
  display:flex; flex-wrap:wrap; gap:.25rem 1.5rem; justify-content:space-between;
  align-items:center;
}
.foot-bottom a{display:inline-flex; align-items:center; min-height:44px}

/* ---------- כותרת עמוד פנימי ---------- */
.page-head{padding-block:clamp(2.5rem,5vw,4rem) clamp(2rem,4vw,3rem); background:var(--sand); border-bottom:1px solid var(--line)}
.crumbs{font-size:var(--fs-xs); color:var(--ink-2); margin:0 0 1rem}
.crumbs a{color:var(--ink-2); text-decoration:none; display:inline-block; padding-block:.7rem; margin-block:-.7rem}
.crumbs a:hover{color:var(--clay)}
.page-head .lead{margin-top:1.25rem}

.skip{
  position:absolute; top:0; inset-inline-start:0; z-index:100;
  background:var(--clay); color:#fff; padding:.75rem 1.25rem;
  border-radius:0 0 8px 0; transform:translateY(-120%);
}
.skip:focus{transform:none}