/* ============================================================
   SHWADRON.AI · שפת המודעות (אוקטובר 2026)
   ------------------------------------------------------------
   שכבה מעל shw-2026.css שמעבירה את האתר לשפה של מודעות הדפוס
   והסטטוס: אזור עליון כחול עם מרקם נייר וזרקור, גל לבן, כותרת
   לבנה עבה, הדמותג בפוזה שמתאימה לדף, ומתחת אזורים לבנים עם
   טקסט בכחול מותג ודגשים בטורקיז.
   הדמות היא הדמותג האמיתי בלבד (assets/public/brand/character-*).
   ============================================================ */

:root{
  --bg:#FFFFFF;
  --bg-2:#F2F6FB;
  --card:#FFFFFF;
  --line:#D5DEEA;
  --line-soft:#E4EAF2;
  --ink:#1E3A69;          /* כחול כהה לטקסט */
  --ink-2:#3B5482;
  --muted:#56657E;
  --dim:#8090A8;
  --accent:#1F7F70;       /* טורקיז כהה לקישורים ולטקסט, עובר ניגודיות על לבן */
  --accent-ink:#0B1F3A;
  --brand-blue:#4369AA;   /* הכחול של המודעות */
  --brand-teal:#5FC3B1;   /* הטורקיז של המודעות, לכפתורים ולמשטחים */
  --ad-blue:#4A7DB5;
  --light-bg:#F2F6FB;
  /* שכבת הכהיה מעל תמונת הרקע הכחולה.
     התמונה bg-blue.jpg מכסה את הצבע שמתחתיה (center/cover), ולכן הרקע
     שהגולש באמת רואה הוא #6288B4 ולא #4A7DB5. על גוון כזה אפילו לבן
     מלא נותן 3.68 בלבד, כלומר שום צבע טקסט לא יכול לעבור את AA, והיה
     חייב להיות כאן בסיס כהה יותר. 32% מכהים אותו ל-#476A92, שם לבן
     נותן 5.61 והגוון של המותג נשמר. */
  /* 0.44 ולא 0.32. ב-0.32 הממוצע של התמונה עבר, אבל הפיקסלים הבהירים
     של הגרדיאנט שבתוכה לא: .lead ירד ל-3.86 ושורת העובדות ל-4.33.
     נמדד בדגימת הפיקסל הצבוע בפועל, 33 נקודות לכל אלמנט, והגרועה
     נלקחת. 0.42 הוא המינימום שמעביר הכול, 0.44 משאיר מרווח. */
  --blue-veil:linear-gradient(rgba(13,42,74,.44),rgba(13,42,74,.44));
}

body{background:var(--bg);color:var(--ink)}
a{color:var(--ink)}
a:hover{color:var(--accent)}
::selection{background:var(--brand-teal);color:var(--accent-ink)}

/* ── כותרות: עבות ועגולות כמו במודעות, לא דחוסות ─────────────── */
.display,h1,h2,h3{font-family:'Heebo',sans-serif;font-weight:800;letter-spacing:-.02em}
h1,.h-hero,h1[style*="--fit"]{font-size:clamp(44px,6.6vw,96px);line-height:1.02}
@media (max-width:600px){h1[style*="--fit-m"],h1[style*="--fit"]{font-size:clamp(40px,11vw,60px)}}
h2,.h-sec{font-size:clamp(34px,4.8vw,64px);line-height:1.08;color:var(--brand-blue)}
.h-sm{font-size:clamp(30px,4.2vw,54px);line-height:1.08}
.on-accent{color:var(--brand-blue)}

/* ── כפתורים ───────────────────────────────────────────────── */
.btn-primary{background:var(--brand-teal);color:var(--accent-ink)}
.btn-primary:hover{background:#4FB3A1;color:var(--accent-ink)}
.btn-light{background:#fff;color:var(--brand-blue)}
.btn-light:hover{background:#EAF2FF;color:var(--brand-blue)}
.btn-ghost{color:var(--ink);border:1.5px solid var(--brand-blue)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ── כותרת האתר ───────────────────────────────────────────── */
.site-head{background:rgba(255,255,255,.94);border-bottom:1px solid var(--line-soft)}
.site-head a{color:var(--ink)}
.site-head img[src*="white"]{filter:brightness(0) saturate(100%) invert(36%) sepia(39%) saturate(800%) hue-rotate(185deg) brightness(92%)}

/* התפריט הנפתח במובייל. shw-2026.css בנה אותו לכותרת כהה, ומאז
   הכותרת הפכה לבנה אבל הלוח נשאר שחור, כך שהקישורים בכחול הכהה
   היו כמעט בלתי קריאים עליו. כאן הוא מקבל את אותו משטח כמו
   הכותרת: לבן אטום, עם אותם צבעי טקסט. */
.nav-panel{background:#fff;border-top:1px solid var(--line)}
.nav-panel .site-nav a{color:var(--ink-2);border-bottom-color:var(--line-soft)}
.nav-panel .site-nav a:hover{color:var(--accent)}
.nav-panel .site-nav a.nav-x{color:var(--ink)}

/* ── מקטעים ───────────────────────────────────────────────── */
.sec{border-top:1px solid var(--line-soft)}
.sec-2{background:var(--bg-2)}
.ticks li::before{color:var(--accent)}
.eyebrow{color:var(--accent)}

/* ── האזור העליון: כחול נייר, זרקור, גל לבן, דמותג ───────────── */
#top{position:relative;overflow:hidden;
  background:var(--blue-veil),var(--ad-blue) url("../public/brand/bg-blue.jpg") center/cover no-repeat;
  padding-bottom:clamp(110px,11vw,160px)!important;
  /* muted ו-dim הועלו מ-#D3E0F0 ומ-#C4D4EA: גם אחרי ההכהיה הם נתנו
     4.19 ו-3.73, מתחת ל-4.5. אלה גוונים דהויים של לבן ולא צבעי מותג,
     ולכן הם אלה שזזים ולא הכחול. */
  --ink:#FFFFFF;--ink-2:#E8F0FA;--muted:#E4EDF8;--dim:#E4EDF8;--accent:#D2F7EF;--line:rgba(255,255,255,.28);--line-soft:rgba(255,255,255,.18)}
#top h1,#top .h-hero{color:#fff;text-shadow:0 4px 18px rgba(20,45,90,.18)}
#top .on-accent{color:#E2FBF5}
#top a:not(.btn){color:#fff}
#top .eyebrow,#top p.eyebrow{color:#fff;opacity:.95}
#top .ticks li::before{color:#BFF3E8}
#top .btn-ghost{color:#fff;border-color:rgba(255,255,255,.75)}
#top .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
#top .figures{border-color:rgba(255,255,255,.25)}
#top .fig{color:#fff}
#top .fig-label{color:#E8F0FA}
#top p[style*="border:1px solid #2A2A2F"]{border-color:rgba(255,255,255,.4)!important;color:#fff!important}
#top p[style*="border:1px solid #2A2A2F"] b,#top p[style*="border:1px solid #2A2A2F"] a{color:#fff!important}
#top .guarantee{color:#fff}
/* שורת המחיר בהירו. היא הטקסט שהכי משפיע על ההחלטה והיא הייתה 17px
   רגיל, כלומר קטנה מהפסקה שמעליה. כאן היא מקבלת גודל ומשקל שתואמים
   את תפקידה, והחלק של התשלומים נשאר משני בתוכה. */
#top .buy-pmt{color:#fff;font-size:clamp(21px,2.4vw,26px);font-weight:800;letter-spacing:-.01em}
#top .buy-pmt > span + span{font-size:.68em;letter-spacing:0}
#top .hero-proof blockquote,#top .hero-proof figcaption{color:#fff}

/* הגל הלבן בתחתית האזור העליון, עולה ימינה כמו במודעות */
#top svg.arc{display:none}
#top::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:-1px;height:clamp(70px,9vw,140px);pointer-events:none;
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 118 Q720 70 1440 8 L1440 140 Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* הדמותג: במחשב בצד שמאל של האזור העליון, הרגליים נוגעות בגל */
.hero-char{display:block;align-self:center;height:clamp(260px,62vw,380px);width:auto;
  filter:drop-shadow(0 22px 28px rgba(15,40,85,.30));margin-top:8px}
@media (min-width:1000px){
  #top .wrap.stack>*:not(.hero-char):not(.figures){max-width:min(640px,58%)}
  #top .figures{grid-template-columns:repeat(4,minmax(0,1fr));position:relative;z-index:3}
  .hero-char{position:absolute;z-index:2;left:max(24px,calc((100vw - var(--wrap))/2 + 8px));
    top:clamp(96px,9vw,130px);height:min(640px,70vh);margin:0}
}

/* הדמותג עם הגביע צר מהאחרים במקור (420x900 מול 610 ו-693), ולכן הוא
   נרשם צר בהרבה ומשאיר את ההירו של עמוד הסיפורים ריק למראה. כאן הוא
   מקבל גובה גדול יותר, כך שהמסה הוויזואלית דומה לשאר העמודים והרגליים
   מתקרבות לגל. */
@media (min-width:1000px){
  .hero-char[src*="character-trophy"]{height:min(770px,76vh)}
}

/* ── שורת העובדות בקיפול של דף הבית ──────────────────────────
   מה מוכרים, בכמה, מתי, ופריט הוכחה אחד. קודם לא היה בקיפול אף
   אחד מהארבעה. */
.hero-facts{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px;
  font-size:clamp(16px,1.6vw,19px);color:#fff;margin:0}
.hero-facts b{font-weight:800}
.hero-facts span[aria-hidden]{opacity:.55;padding-inline:8px}

/* מרווח הדוק יותר בהירו בלבד. ברירת המחדל של .stack היא 56px, וביחד
   עם פס הפרומו שמעל (48px) היא דוחפת את הכפתור הראשי אל מתחת לקו
   הקיפול ב-1280x800. שאר המקטעים בדף נשארים כפי שהם. */
#top .wrap.stack{gap:clamp(22px,3vw,40px)}
/* כל עוד באנר העוגיות מוצג הוא מכסה את תחתית הקיפול, ולכן ההירו
   מתהדק עוד קצת כדי שהכפתור הראשי יישאר מעליו. consent.js מוסיף
   ומסיר את המחלקה. בלי ג׳אווהסקריפט אין באנר ואין גם הידוק. */
/* ההידוק חל רק על דפים שבהם הכפתור הראשי אמור לשבת בתוך הקיפול, ולכן
   הוא מסומן ידנית ב-data-consent-lift. גם שני דפי הזום מסומנים כך:
   אחרי שההירו שלהם הודק, הכפתור שלהם נכנס אל תוך הקיפול, ובלי ההידוק
   הזה הבאנר היה יושב בדיוק עליו. */
/* important כי שני הדפים מגדירים padding-top בסגנון שורה, בדיוק כמו
   ש-padding-bottom של #top כבר מוגדר כאן */
.has-consent-banner #top[data-consent-lift]{padding-top:clamp(10px,1.1vw,16px)!important}
.has-consent-banner #top[data-consent-lift] .wrap.stack{gap:clamp(12px,1.4vw,18px)}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
/* הוובינר כקישור ולא ככפתור: נוכח, בלי להתחרות על המבט */
.hero-alt{color:#fff;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;font-size:16px;opacity:.92}
.hero-alt:hover{opacity:1}

/* ── שורת הטאגליין לפני הפוטר ─────────────────────────────── */
.brand-tag{text-align:center;padding:48px 24px 8px;font-family:'Heebo',sans-serif;font-weight:800;
  font-size:clamp(22px,3vw,32px);line-height:1.3}
.brand-tag .t{color:var(--brand-teal)}
.brand-tag .b{color:var(--brand-blue)}

/* הכותרת הדביקה והפס התחתון בנייד, בהירים גם בגלילה */
.site-head.is-stuck{background:rgba(255,255,255,.97);border-bottom-color:var(--line-soft)}
.dock{background:rgba(255,255,255,.97)!important;border-top:1px solid var(--line-soft)!important}
.dock .dock-price{color:var(--ink)}

/* לוגואים של לקוחות: הקבצים לבנים (נבנו לרקע כהה), על לבן מציגים אותם כצללית אפורה אחידה */
.logos img{filter:brightness(0);opacity:.5}

/* כרטיס השידור החי: היה שחור, עכשיו כחול המודעות עם טקסט לבן */
#live div[style*="#0F1312"]{background:var(--blue-veil),var(--ad-blue) url("../public/brand/bg-blue.jpg") center/cover no-repeat!important;
  border-color:transparent!important;--ink:#fff;--ink-2:#E8F0FA;--muted:#D3E0F0;--line:rgba(255,255,255,.3);--accent:#D2F7EF;color:#fff}
#live div[style*="#0F1312"] h2,#live div[style*="#0F1312"] h3,#live div[style*="#0F1312"] .on-accent{color:#fff}
#live div[style*="#0F1312"] p,#live div[style*="#0F1312"] span{color:inherit}
#live div[style*="#0F1312"] .btn-primary{background:#fff;color:var(--brand-blue)}

/* התפר שמתחת לגל: כשהמקטע הבא אפור, הגל נצבע באותו אפור ובלי קו מפריד */
#top + .sec{border-top:0}
#top:has(+ .light)::after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 118 Q720 70 1440 8 L1440 140 Z' fill='%23E9F0F9'/%3E%3C/svg%3E")}

/* קופסת החבילה של צבא הסוכנים, ליד כרטיס הקנייה */
.bonus-box{border:2px solid var(--brand-teal);border-radius:18px;padding:22px 22px 12px;background:#F2FBF9}
.bonus-box .card-kicker{color:var(--accent);margin:0 0 6px}
.bonus-title{font-family:'Heebo',sans-serif;font-weight:800;font-size:clamp(20px,2.2vw,24px);line-height:1.3;color:var(--brand-blue);margin:0 0 12px}
.bonus-box .ticks{font-size:16px}
.bonus-box .ticks b{color:var(--ink)}

/* הטיזר של המוח השני: מקטע משלו מתחת לגל, הכותרת בשפת המודעות */
#teaser .teaser{margin-top:0}
.teaser-h{font-family:'Heebo',sans-serif;font-weight:800;font-size:clamp(36px,4.2vw,56px);line-height:1.05;letter-spacing:-.02em;color:var(--brand-blue)}
.teaser-punch{border-inline-start-color:var(--brand-teal)}
.teaser .video-frame{border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(30,58,105,.18)}

/* ── פחות חיוור: טקסט כהה יותר, גבולות ברורים, קופסאות עם נוכחות ── */
:root{--muted:#3F4E68;--ink-2:#2B4370;--line:#BFCDE0;--line-soft:#D7E0EC;--light-muted:#3F4E68}
.body,.small,.lead{color:var(--muted)}
.lead{color:var(--ink-2)}
.card,.biz-note,.buy-card,.cta-box,.tbl-wrap{border:1.5px solid var(--line);box-shadow:0 10px 30px rgba(30,58,105,.08);background:#fff}
.biz-note,.card{border-inline-start:5px solid var(--brand-teal)}
.card-title{color:var(--brand-blue)}
.rule-top{border-top:3px solid var(--brand-blue)}
.sec-2,.light{background:#E9F0F9}
h2 .ghost,.ghost{color:var(--brand-teal)}

/* טקסט בתוך קופסה ממלא את כל הרוחב, לא נעצר באמצע */
.card .body,.biz-note .body,.buy-card .body,.cta-box p,.rule-top .body,.qa details>p,[class*="card"] p{max-width:none}

/* שורת הסמכות בהירו של העסקים */
.authority{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:16px;padding:12px 16px;width:fit-content;max-width:100%}
.authority img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #fff;flex:none}
.authority p{margin:0;font-size:15px;line-height:1.5;color:#fff}
.authority b{font-size:17px}


/* ── לבן ואפור לסירוגין: כל מקטע אחרי ההירו מתחלף, אף פעם לא שני לבנים ברצף ── */
main>section.sec{background:#fff;border-top:0}
main>section.sec:nth-of-type(even){background:#E6EEF8}
main>section.sec:nth-of-type(even) .card,main>section.sec:nth-of-type(even) .biz-note,main>section.sec:nth-of-type(even) .gift-form:not(.callback .gift-form){background:#fff}
/* המקטע שמיד אחרי ההירו תמיד אפור, אז הגל נצבע באפור */
#top::after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140 L0 118 Q720 70 1440 8 L1440 140 Z' fill='%23E6EEF8'/%3E%3C/svg%3E")!important}
.site-foot{background:#1E3A69;color:#E8F0FA;border-top:0}
.site-foot a{color:#fff}

/* טופסים על רקע בהיר: תוויות כהות ושדות עם גבול ברור (gift.css נבנה לרקע כהה) */
main .gift-fields label,main .gift-form label{color:var(--ink);font-weight:700}
main .gift-fields input,main .gift-form input[type="text"],.gift-form input[type="tel"],.gift-form input[type="email"],.gift-form input:not([type]),.gift-form select{
  background:#fff;color:var(--ink);border:1.5px solid #9FB1CB;border-radius:12px}
.gift-fields input::placeholder{color:#7D8BA3}
main .gift-consent{color:var(--muted)}
main #top .gift-fields label,main #live div[style*="#0F1312"] .gift-fields label,#top .gift-consent,#live div[style*="#0F1312"] .gift-consent{color:#fff}

/* הדמותג לא נכנס לטקסט: מקסימום 40% מרוחב התוכן, והטקסט עד 58% */
@media (min-width:1000px){
  .hero-char{max-width:calc(min(100vw, var(--wrap)) * .38);object-fit:contain;object-position:bottom}
}

/* בלי גלילה לרוחב בשום רוחב מסך */
html{overflow-x:clip}

/* שיחת ההיכרות בעסקים: טופס מימין, כרטיס כחול "מה קורה בשיחה" משמאל */
.contact-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.contact-main .gift-form{max-width:none}
.contact-aside{background:var(--blue-veil),var(--ad-blue) url("../public/brand/bg-blue.jpg") center/cover no-repeat;color:#fff;border-radius:24px;
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:18px;box-shadow:0 18px 40px rgba(30,58,105,.22);position:sticky;top:100px}
.contact-aside .eyebrow{color:#D2F7EF;margin:0}
.contact-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:14px}
.contact-steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:12px;font-size:16px;line-height:1.55;color:#EAF2FF}
.contact-steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--brand-teal);color:var(--accent-ink);
  font-weight:800;display:grid;place-items:center}
.contact-steps b{color:#fff}
.contact-who{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.3);padding-top:16px}
.contact-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #fff;flex:none}
.contact-who p,.contact-nda{margin:0;font-size:15px;line-height:1.5;color:#EAF2FF}
.contact-who b{color:#fff;font-size:16px}
.gift-form label>span{display:block}

/* ── מעבר עיצוב (25.10) ─────────────────────────────────────── */
/* גופן אחד למותג: Heebo עבה גם בשמות המסלולים ובמספרים, כמו במודעות */
.card-name,.step-n,.lesson-n{font-family:'Heebo',sans-serif;font-weight:800;letter-spacing:-.02em}
.card-name{color:var(--brand-blue)}
.step-n,.lesson-n{color:var(--brand-teal)}
/* השורה השנייה בכותרות תמיד בטורקיז, גם במקטעים האפורים */
.light .ghost,.sec-2 .ghost,main>section.sec:nth-of-type(even) .ghost{color:var(--brand-teal)}
/* הפס הטורקיז בצד נשאר רק לקופסאות מידע, לא לכרטיסי המסלולים */
.card{border-inline-start-width:1.5px;border-inline-start-color:var(--line)}
/* מקטע שכולו פס מספרים לא צריך גובה של מקטע שלם */
main>section.sec:has(> .wrap > .figures:only-child),main>section.sec:has(> .wrap.figures){padding-block:clamp(32px,4vw,52px)}
/* טקסט קריא יותר בעמודות */
.rule-top .body,.rule-top p{font-size:17px;color:var(--ink-2)}
.rule-top{border-top-color:var(--brand-teal)}

/* ── נפילת שורות ── */
h1,h2,h3,.h-sm,.teaser-h,.bonus-title,.card-title,.founder-quote{text-wrap:balance}
p,li,blockquote,figcaption,dd,summary{text-wrap:pretty}
/* צירופים שאסור לשבור באמצע */
#top p.body b,.buy-pmt,.js-price-total,.fig,.card-price,.dock-price b,.stock b{white-space:nowrap}
/* פס המספרים באמצע הדף: רצועה כחולה כמו המודעות, עם מספרים לבנים */
main>section.sec:has(> .wrap.figures){background:var(--blue-veil),var(--ad-blue) url("../public/brand/bg-blue.jpg") center/cover no-repeat!important}
main>section.sec:has(> .wrap.figures) .fig{color:#fff}
main>section.sec:has(> .wrap.figures) .fig-label{color:#E8F0FA}
/* שם המסלול. היה כאן white-space:nowrap, ובמסכים רחבים הגופן הגיע
   ל-42px בזמן שהכרטיס נותן 305 פיקסל, אז שמות כמו ״קורס הדרכה והטמעה״
   (367 פיקסל) גלשו אל מחוץ למסגרת הכרטיס. עכשיו הם נשברים לשורה שנייה
   במקום לחרוג, והגופן נגזר גם מרוחב הכרטיס ולא רק מרוחב המסך. */
.card-name{font-size:clamp(28px,2.6vw,38px)!important;line-height:1.1;
  white-space:normal;overflow-wrap:break-word;text-wrap:balance}

/* תמונת דמותג בכותרת של מקטע: כותרת מימין, תמונה משמאל */
.sec-head-art{display:grid;gap:12px;align-items:center}
.sec-art{display:block;width:min(300px,72vw);height:auto;justify-self:center;filter:drop-shadow(0 18px 24px rgba(15,40,85,.18))}
@media (min-width:800px){
  .sec-head-art{grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,64px)}
  .sec-art{width:clamp(260px,26vw,360px);margin-block:-24px -8px}
}