/* ═══ KP site shell v3 — kp-v3.css · 07.10.2026 ═══
   מקור אמת יחיד לכל דפי האתר: tokens, resets, טיפוגרפיה, כפתורים, nav, footer, סרגל וואטסאפ,
   תווית סקשן, תנועה, דיאלוג, נגן אודיו, ובלוקים שחוזרים בדפי נחיתה (offers · data strip · who).
   שימוש: <link rel="stylesheet" href="kp-v3.css"> בכל דף (מתת-תיקייה כמו articles/: ../kp-v3.css).
   קישורי Google Fonts נשארים ב-<head> של כל דף. CSS ייחודי לדף יושב ב-<style> אחרי ה-link.
   אסור להגדיר :root נוסף בדף — הטוקנים מוגדרים רק כאן.

   פלטה נגזרת מהלוגו הרשמי (כחול-כהה + זהב + קרם). לא הסגול של ds-v1.
   ניגודיות שנמדדה (WCAG, python):
     --ink      על --bg   14.14:1   --ink      על --bg-2  12.96:1   --ink על --bg-3 14.70:1
     --ink-dim  על --bg    8.58:1   --ink-dim  על --bg-2   7.86:1
     --gold     על --bg    6.59:1   --gold     על --bg-2   6.04:1   --gold על --bg-3 6.85:1
     #FFFFFF    על #1FA37A 3.19:1   (נמוך מדי לטקסט כפתור 18px)  לכן:
     #FFFFFF    על --wa (#15855F) 4.61:1  — הכפתור הראשי; #1FA37A נשאר רק כ-hover-מסגרת/קו
   כיווניות: כל ערך פיזי מוכפל ב---dir (RTL = 1, LTR = -1). צללים: X=0 תמיד. */

/* ═══ tokens ═══ */
:root{
  --bg:#0C162F; --bg-2:#121E3D; --bg-3:#0A1226;
  --ink:#EDE3D7; --ink-dim:#B8B0C4;
  --gold:#B4996D; --gold-bright:#D8BE8A;
  --blue:#19A9E8; --violet:#6B3ED0;
  --wa:#15855F; --wa-bright:#1FA37A;
  --line:rgba(237,227,215,.14);
  --dir:1;
  --display:'Frank Ruhl Libre',Georgia,serif;
  --body:'Heebo',system-ui,sans-serif;
  --nav-h:72px;
}
[dir="ltr"]{--dir:-1}

/* ═══ resets + typography ═══ */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-weight:400;font-size:1.125rem;line-height:1.7;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:0;margin:0;color:var(--ink)}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
svg{display:block}
.num{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.lat{direction:ltr;unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
.skip{position:absolute;inset-inline-start:16px;top:-60px;background:var(--gold);color:var(--bg-3);padding:10px 16px;font-weight:700;border-radius:2px;z-index:100}
.skip:focus{top:12px}

/* ═══ layout: containers + section utilities ═══ */
section[id]{scroll-margin-top:var(--nav-h)}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:24px}
.wrap.wide{max-width:1320px}
.wrap.narrow{max-width:880px}
/* סקשן גנרי לדפים חדשים: ריווח אנכי אחיד + משטח. דף הבית משתמש בריווחים משלו (ראו ה-<style> שלו). */
.section{padding-block:clamp(72px,9vw,112px)}
.s-bg{background:var(--bg)}
.s-bg2{background:var(--bg-2)}
.s-bg3{background:var(--bg-3)}

/* ═══ section label: קו זהב 32px + טקסט, וכותרת h2 ═══ */
.lbl{display:flex;align-items:center;gap:12px;color:var(--gold);font-size:.875rem;font-weight:700;line-height:1.4}
.lbl::before{content:"";flex:0 0 32px;height:1px;background:var(--gold)}
.h2{font-size:clamp(30px,3.6vw,48px);line-height:1.2;margin-top:14px;max-width:16em}

/* ═══ buttons — pills ═══  (.btn.line = שם נוסף ל-.btn.ghost, המתאר של הזהב) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font-family:var(--body);font-weight:700;font-size:1.125rem;line-height:1.2;border:1px solid transparent;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s,transform .25s}
.btn.wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.btn.wa:hover{background:#13784F;border-color:var(--wa-bright)}
.btn.ghost,.btn.line{border-color:var(--gold);color:var(--gold-bright);background:transparent}
.btn.ghost:hover,.btn.line:hover{border-color:var(--gold-bright);background:rgba(180,153,109,.08)}
/* .btn.navy — "מאשר/ת" בבאנר העוגיות: מלא אבל כחול-כהה, לא ירוק (הירוק שמור לוואטסאפ). #fff על #24407A 10.05:1;
   המסגרת #6A86C2 נותנת לגלולה קצה נראה על --bg-2 (~4.3:1, 1.4.11) */
.btn.navy{background:#24407A;color:#fff;border-color:#6A86C2}
.btn.navy:hover{background:#2B4D8E;border-color:var(--gold-bright)}
.btn.sm{min-height:44px;padding:0 20px;font-size:1rem}
.btn:active{transform:translateY(1px)}
.ico{width:20px;height:20px;fill:currentColor}

/* ═══ nav — שקוף על ה-hero, אטום אחרי 40px (kp-v3.js מוסיף .scrolled) ═══ */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;background:transparent;border-bottom:1px solid transparent;transition:background-color .35s,border-color .35s}
.nav.scrolled{background:var(--bg);border-bottom-color:var(--line)}
.nav .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px}
.logo{display:inline-flex;align-items:baseline;gap:12px;min-height:44px}
.logo .kp{font-family:var(--display);font-weight:800;font-size:1.75rem;line-height:1.15;color:var(--ink)}
.logo .kp::after{content:"";display:block;height:2px;margin-top:2px;background:linear-gradient(to left,var(--blue),var(--violet))}
.logo .tag{font-size:.8125rem;color:var(--ink-dim);font-weight:300;line-height:1.3}
.links{display:flex;align-items:center;justify-content:flex-end;gap:6px 26px;grid-column:3}
.links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:400;font-size:1rem;transition:color .25s}
.links a:hover{color:var(--gold-bright)}
.links .lang{color:var(--ink-dim);font-weight:700;font-size:.875rem}
.links .tel .ico{width:18px;height:18px;fill:var(--gold)}
.links .tel-txt{font-weight:700}
@media (max-width:860px){
  .links .hide-m{display:none}
  .logo .tag{display:none}
  .links .tel-txt{display:none}
  .links .tel{min-width:44px;justify-content:center}
}

/* ═══ placeholder-media label (hero / .frame) ═══ */
.ph-lbl{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;color:var(--gold);border:1px solid rgba(180,153,109,.35);padding:7px 11px;border-radius:2px;background:rgba(10,18,38,.55)}
.ph-lbl::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--gold)}

/* ═══ motion: fade-up reveal (.rv + data-d; kp-v3.js מוסיף .in) ═══ */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}

/* ═══ offers — בלוקים אופקיים ממוספרים (מה אפשר לשלוח לי) ═══ */
.offers{margin-top:48px;border-top:1px solid var(--line)}
.offer{display:grid;grid-template-columns:88px 1fr auto;gap:12px 32px;align-items:start;padding-block:40px;border-bottom:1px solid var(--line)}
.offer .n{font-family:var(--display);font-weight:800;font-size:clamp(44px,5vw,64px);line-height:1.15;color:var(--gold);grid-row:1 / span 3}
.offer h3{font-size:clamp(22px,2.2vw,30px);line-height:1.25}
.offer .row{display:grid;grid-template-columns:5.5em 1fr;gap:8px 14px;color:var(--ink);max-width:62ch;font-weight:300}
.offer .row b{font-weight:700;color:var(--ink-dim)}
.offer .act{grid-column:3;grid-row:1 / span 3;align-self:center}
@media (max-width:760px){
  .offer{grid-template-columns:56px 1fr;gap:10px 18px;padding-block:32px}
  .offer .n{font-size:40px}
  .offer .act{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}
  .offer .row{grid-template-columns:1fr;gap:2px}
}
@media (max-width:640px){
  /* טלפון: המספר בשורה משלו מעל הכותרת, רווח 12px — אף פעם לא נוגע בכותרת */
  .offer{grid-template-columns:1fr;gap:12px 0}
  .offer .n{grid-row:auto}
  .offer .act{grid-column:1}
}

/* ═══ data strip — מספרים זהב ענקיים על --bg-3 ═══ */
.data{padding-block:112px;background:var(--bg-3);border-block:1px solid var(--line)}
.data-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px 48px;align-items:end}
.stat .cap{font-size:1rem;color:var(--ink-dim);line-height:1.5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:3em}
.stat .big{font-family:var(--display);font-weight:800;font-size:clamp(56px,9vw,120px);line-height:1.15;color:var(--gold);margin-top:8px}
.stat .big .u{font-size:.42em;font-weight:800;margin-inline-start:.08em}
.stat .sub-cap{margin-top:6px;font-size:1rem;color:var(--ink)}
.arr{width:18px;height:18px;flex:0 0 auto;transform:scaleX(var(--dir));fill:none;stroke:var(--gold);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.data-src{grid-column:1 / -1;margin-top:8px;padding-top:22px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-dim);font-weight:300}
@media (max-width:860px){.data-grid{grid-template-columns:1fr;gap:34px}.stat .cap{min-height:0}.data{padding-block:80px}}

/* ═══ who — מסגרת מדיה 4:5 + טקסט + שורת עובדות ═══ */
.who{padding-block:120px 112px;background:var(--bg)}
.who-grid{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:56px 80px;align-items:center}
.frame{position:relative;aspect-ratio:4/5;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  background:
    radial-gradient(70% 55% at calc(50% + var(--dir) * -20%) 25%, rgba(180,153,109,.22), rgba(180,153,109,0) 70%),
    linear-gradient(to bottom, var(--bg-3), var(--bg-2))}
.frame::before{content:"";position:absolute;inset:14px;border:1px solid rgba(180,153,109,.22);border-radius:2px}
.frame .ph-lbl{inset-inline-start:50%;top:50%;transform:translate(calc(var(--dir) * 50%),-50%)}
.who .name{font-size:clamp(30px,3.4vw,46px);line-height:1.2;margin-top:12px}
.who .role{margin-top:6px;color:var(--ink-dim);font-size:1.0625rem}
.quote{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.1vw,30px);line-height:1.4;margin-top:30px;color:var(--gold-bright);padding-inline-start:20px;border-inline-start:2px solid var(--gold)}
.who .txt{margin-top:26px;font-weight:300;max-width:60ch}
.facts{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:34px;padding-top:22px;border-top:1px solid var(--gold);font-size:.9375rem;color:var(--ink)}
.facts li{padding-inline-end:14px;margin-inline-end:14px;border-inline-end:1px solid var(--line);line-height:1.4}
.facts li:last-child{border:0;margin:0;padding:0}
.facts b{font-family:var(--display);font-weight:800;color:var(--gold);font-size:1.25em;line-height:1.15}
@media (max-width:860px){.who-grid{grid-template-columns:1fr}.frame{max-width:420px}.who{padding-block:88px}}

/* ═══ article audio player — כפתור + progress + זמן ═══ */
.player{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.player .pb{width:40px;height:40px;border-radius:999px;border:1px solid var(--gold);background:transparent;color:var(--gold-bright);display:grid;place-items:center;cursor:not-allowed;opacity:.55}
.player .pb svg{width:12px;height:12px;fill:currentColor;transform:scaleX(var(--dir))}
.player .track{height:2px;background:var(--line);position:relative}
.player .track span{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:var(--gold)}
.player .t{font-size:.8125rem;color:var(--ink-dim)}

/* ═══ footer ═══ */
.foot{padding-block:64px 40px;background:var(--bg-3);border-top:1px solid var(--line);color:var(--ink-dim);font-size:1rem}
.foot .top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.foot .top a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);font-weight:700;transition:color .25s}
.foot .top a:hover{color:var(--gold-bright)}
.foot .top .ico{width:18px;height:18px;fill:var(--gold)}
.foot .places{margin-top:22px}
.foot .priv{margin-top:8px;font-size:.875rem;font-weight:300;max-width:60ch}
.foot .langs{margin-top:26px;display:flex;gap:26px}
.foot .langs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-dim)}
.foot .langs a:hover{color:var(--gold-bright)}
/* legal — "הגדרות עוגיות" (כפתור: פותח את הבאנר) · מדיניות פרטיות · הצהרת נגישות. --ink-dim על --bg-3 8.91:1 */
.foot .legal{margin-top:10px;display:flex;flex-wrap:wrap;gap:0 26px;font-size:.875rem}
.foot .legal a,.foot .legal button{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink-dim);font:inherit;font-size:.875rem;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(180,153,109,.55);transition:color .25s}
.foot .legal a:hover,.foot .legal button:hover{color:var(--gold-bright)}
.foot .copy{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:.875rem;font-weight:300}

/* ═══ sticky WhatsApp bar — מובייל בלבד, אטום, בלי blur (kp-v3.js מוסיף .on כש-#cta-hero יוצא מהמסך) ═══ */
body.mbar-on{padding-bottom:76px}
.mbar{position:fixed;bottom:0;inset-inline:0;z-index:40;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--bg-3);box-shadow:0 -1px 0 var(--line),0 -14px 28px -18px rgba(0,0,0,.65);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.mbar .btn{width:100%}
.mbar.on{transform:none}
@media (max-width:760px){.mbar{display:block}}

/* ═══ cookie consent banner (#kp-consent, .ck) — bottom sheet על --bg-2, קו זהב דק למעלה (09.10.2026).
   kp-v3.js מוריד את hidden ומוסיף .on. שני כפתורים שווים: .btn.navy "מאשר/ת" + .btn.ghost "רק חיוניות" (אותו רוחב, grid).
   במובייל יושב מעל סרגל הוואטסאפ הדביק (body.mbar-on → bottom = גובה הסרגל), לא מכסה אותו.
   z-index 45: מעל הסרגל (40), מתחת ל-nav (50); <dialog> מודאלי יושב ב-top layer מעל הכול.
   ניגודיות: --ink על --bg-2 12.96:1 · קישור --gold-bright על --bg-2 9.11:1 · #fff על navy 10.05:1 · --gold-bright על --bg-2 (ghost) 9.11:1 */
.ck{position:fixed;bottom:0;inset-inline:0;z-index:45;background:var(--bg-2);color:var(--ink);border-top:1px solid var(--gold);box-shadow:0 -1px 0 var(--line),0 -18px 40px -22px rgba(0,0,0,.7);padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.ck[hidden]{display:none}
.ck.on{transform:none}
.ck:focus{outline:none}
.ck:focus-visible{outline:2px solid var(--gold-bright);outline-offset:-4px}
.ck .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;padding-block:18px}
.ck .txt{flex:1 1 420px;max-width:64ch;font-size:.9375rem;line-height:1.55;font-weight:300}
.ck .txt a{color:var(--gold-bright);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(216,190,138,.55);white-space:nowrap}
.ck .txt a:hover{color:var(--ink)}
.ck .act{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:0 0 auto;min-width:320px}
.ck .act .btn{min-height:48px;padding:0 18px;font-size:1rem;white-space:nowrap}
@media (max-width:760px){
  .ck .wrap{padding-block:16px;gap:12px}
  .ck .txt{flex-basis:100%;font-size:.875rem}
  .ck .act{width:100%;min-width:0}
  body.mbar-on .ck{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){.ck .act{grid-template-columns:1fr}}

/* ═══ dialog (.vdlg) — נפתח מכל [aria-haspopup="dialog"][aria-controls] ═══ */
.vdlg{border:1px solid var(--line);border-radius:2px;padding:0;background:var(--bg-2);color:var(--ink);width:min(92vw,960px);max-width:none;box-shadow:0 1px 0 rgba(237,227,215,.05) inset,0 28px 70px -30px rgba(0,0,0,.75)}
.vdlg::backdrop{background:rgba(6,10,24,.82)}
.vdlg .in-{padding:18px 18px 22px}
.vdlg .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.vdlg h2{font-size:1.25rem;line-height:1.3}
.vdlg .x{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .25s,color .25s}
.vdlg .x:hover{border-color:var(--gold);color:var(--gold-bright)}
.vdlg .x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round}
.vdlg .screen{aspect-ratio:16/9;display:grid;place-items:center;border:1px solid var(--line);border-radius:2px;background:linear-gradient(to bottom, var(--bg-3), var(--bg));color:var(--gold);font-weight:700;font-size:1rem}

/* ═══ reduced motion — הכול כבוי; דפים מוסיפים כאן את ההחרגות של האנימציות שלהם ═══ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1!important;transform:none!important}
}