/* ============================================================
   עמוד הבית בלבד. נטען אחרי style.css
   ============================================================ */
.hero{min-height:100vh;display:flex;align-items:center;padding:150px 0 110px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;width:100%}
/* ⚠️ היה כאן לוט כהה מתחת לעמודת הקופי. הוא נדרש כשהרקע היה כמעט שחור
   ואז לא נראה כלל. ברגע שהרקע הובהר הוא הפך לכתם כהה גלוי מאחורי הכותרת.
   הוסר. הקריאוּת מוחזקת עכשיו בצל טקסט דק בלבד, בלי שום שכבה מתחת.
   אל תחזירו לוטים כהים על הרקע הבהיר. */
.hero-copy{position:relative}
.hero h1{font-size:clamp(2.3rem,5.5vw,4.9rem);font-weight:100;letter-spacing:-.035em;color:var(--white);margin-bottom:26px;
  text-shadow:0 0 70px rgba(224,192,112,.28),0 1px 12px rgba(6,24,42,.42)}
.hero h1 b{font-weight:300;color:var(--gold);display:block;text-shadow:0 0 56px rgba(224,192,112,.5),0 1px 10px rgba(6,24,42,.34)}
.hero .lead{margin-bottom:42px;max-width:44ch;color:#DCE6F2;text-shadow:0 1px 10px rgba(6,24,42,.4)}
.hero .en{opacity:.85}
/* ⚠️ כל מנגנון .const (הטבעת, מפת הגוף, האאורה, הערוצים והנקודות)
   עבר ל-style.css ב-03.08.2026, כדי שגם עמודים פנימיים יוכלו להשתמש בו.
   כאן נשארו רק ההתאמות של ההירו בעמוד הבית. */

/* ===== מהו העיצוב האנושי · טקסט לצד גלגל הרייב =====
   התמונה נלקחה מהאתר הקיים של דביר. הרקע שלה לבן והצורה עגולה, ולכן הלוח
   עגול: הוא חותך את ארבע הפינות הלבנות ומשאיר דיסקה נקייה על החלל.
   מעגל החיתוך ברדיוס 50 אחוז רחב מהגלגל עצמו, אז שום תוכן לא נחתך. */
.hd-split{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.chart-plate{background:#fff;border-radius:50%;padding:0;margin:0;position:relative;
  aspect-ratio:1;overflow:hidden;
  box-shadow:0 0 0 1px rgba(224,192,112,.34),0 0 0 9px rgba(224,192,112,.05),
    0 30px 80px rgba(0,0,0,.5),0 0 100px rgba(79,216,206,.16)}
.chart-plate img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}

.duo{display:grid;grid-template-columns:1fr 1px 1fr;gap:58px;margin-top:62px}
.duo .divider{background:linear-gradient(180deg,transparent,rgba(79,216,206,.35),rgba(224,192,112,.35),transparent)}
.duo h3{margin-bottom:20px;font-size:1.68rem;font-weight:200}
.duo .a h3{color:var(--turq);text-shadow:0 0 32px rgba(79,216,206,.4)}
.duo .b h3{color:var(--gold);text-shadow:0 0 32px rgba(224,192,112,.4)}
.duo p{color:var(--muted);font-size:1.02rem}
.duo-close{margin-top:64px;font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:300;max-width:52ch;color:var(--text);line-height:1.6}

.gap{text-align:center}
.gap h2{margin:0 auto 40px;max-width:20ch}
.gap p{margin:0 auto 22px;color:var(--muted);text-align:start;max-width:60ch}
.gap .punch{font-family:var(--serif);color:var(--text);font-size:clamp(1.1rem,1.9vw,1.4rem);line-height:1.65;font-weight:300}

/* 03.08.2026: .chart-panel ו-.fields עברו ל-style.css יחד עם הטופס,
   שיצא מעמוד הבית אל reading.html#chart.
   .layer-grid ו-.layer נמחקו. ארבע השכבות כבר היו ב-human-design.html
   תחת "מה שמשנה את חיי היומיום", ולכן הרשת מעמוד הבית הייתה כפילות. */

.mut{text-align:center}
.mut h2{max-width:19ch;margin:0 auto 34px}
.mut p{margin:0 auto 20px;color:var(--muted)}
/* ל-.en יש text-align:right קבוע, כדי שיתיישר עם כותרת בעברית. בסקציה
   ממורכזת זה זורק אותו לקצה הימני. */
.mut .en{text-align:center}
/* הספרות היו קו מתאר בשקיפות .34, וזה נעלם ברגע שהרקע הובהר.
   עכשיו יש מילוי זהוב עדין מתחת לקו המתאר, קו עבה יותר, וזוהר חזק יותר. */
.mut .year{font-size:clamp(5rem,17vw,13rem);font-weight:100;
  color:rgba(224,192,112,.07);-webkit-text-stroke:1.5px rgba(224,192,112,.62);
  letter-spacing:.05em;line-height:1;margin-bottom:-.16em;
  filter:drop-shadow(0 0 46px rgba(224,192,112,.38)) drop-shadow(0 2px 10px rgba(4,14,28,.6))}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 0 rgba(79,216,206,.6),0 0 14px var(--turq);animation:pulse 3.4s ease-out infinite;margin-inline-end:11px;vertical-align:middle}
@keyframes pulse{70%{box-shadow:0 0 0 15px rgba(79,216,206,0),0 0 14px var(--turq)}100%{box-shadow:0 0 0 0 rgba(79,216,206,0),0 0 14px var(--turq)}}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px;text-align:start}
.offer{padding:38px 34px;display:flex;flex-direction:column}
.offer .fmt{font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--turq);display:block;margin-bottom:16px;text-shadow:0 0 18px rgba(79,216,206,.45)}
.offer h3{color:var(--white);font-size:1.32rem;font-weight:300;margin-bottom:13px}
.offer p{color:var(--muted);font-size:.95rem;margin-bottom:20px;max-width:none}
.offer .meta2{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.offer .meta2 span{font-size:.77rem;color:#A6B4CA;background:rgba(255,255,255,.035);border:1px solid rgba(224,192,112,.11);padding:5px 12px;border-radius:3px;font-variant-numeric:tabular-nums}
.offer .prow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;margin-top:auto;border-block-start:1px solid var(--line)}

.path-intro{color:var(--ink-soft);font-size:1.06rem;margin-top:26px;max-width:58ch}
.tracks{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:54px}
.track{background:#fff;border:1px solid rgba(14,23,38,.07);border-radius:5px;padding:36px 34px;
  box-shadow:0 2px 4px rgba(14,23,38,.03),0 14px 34px rgba(14,23,38,.055);transition:box-shadow .45s,transform .45s}
.track:hover{box-shadow:0 4px 8px rgba(14,23,38,.05),0 20px 46px rgba(14,23,38,.10);transform:translateY(-3px)}
.kind{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:12px}
.track h3{font-size:1.34rem;font-weight:400;color:var(--ink);margin-bottom:10px}
.track > p{color:var(--ink-soft);font-size:.95rem;margin-bottom:22px}
.plist{list-style:none;border-block-start:1px solid rgba(14,23,38,.08)}
.plist li{padding:13px 0;border-block-end:1px solid rgba(14,23,38,.06);font-size:.93rem;color:var(--ink-soft);line-height:1.6;position:relative;padding-inline-start:16px}
.plist li::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:22px;width:5px;height:5px;border-radius:50%;background:rgba(168,129,58,.55)}
.plist b{color:var(--ink);font-weight:500;font-size:.96rem}
.note{font-size:.85rem;color:#6B7A90;margin-top:20px;line-height:1.7}
.track .go{display:inline-block;margin-top:20px;color:var(--teal);font-size:.9rem}
.track .go:hover{color:var(--bronze)}
.track-c{margin-top:20px;background:#fff;border:1px solid rgba(168,129,58,.26);border-radius:5px;padding:40px 38px 32px;box-shadow:0 2px 4px rgba(14,23,38,.03),0 18px 46px rgba(14,23,38,.07)}
.path{list-style:none;position:relative;margin-top:36px}
.path::before{content:'';position:absolute;inset-block:26px;inset-inline-start:23px;width:1px;background:linear-gradient(180deg,rgba(168,129,58,.12),rgba(168,129,58,.48) 12%,rgba(168,129,58,.48) 88%,rgba(168,129,58,.12))}
.step{position:relative;padding-inline-start:80px;padding-block:11px}
.dotn{position:absolute;inset-inline-start:0;inset-block-start:22px;width:47px;height:47px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.84rem;font-weight:400;font-variant-numeric:tabular-nums;background:#fff;border:1px solid rgba(168,129,58,.34);color:var(--bronze);box-shadow:0 0 0 7px #fff,0 6px 22px rgba(14,23,38,.09);z-index:1}
.card{background:#FBFAF7;border:1px solid rgba(14,23,38,.06);border-radius:5px;padding:28px 32px;transition:box-shadow .45s,transform .45s,border-color .45s}
.step:hover .card{box-shadow:0 4px 8px rgba(14,23,38,.05),0 20px 46px rgba(14,23,38,.10);transform:translateY(-3px);border-color:rgba(168,129,58,.28)}
.card-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:9px}
.card-h h3{font-size:1.28rem;font-weight:400;color:var(--ink);line-height:1.3}
.card p{color:var(--ink-soft);font-size:.97rem;line-height:1.7;margin-bottom:14px}
.meta{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.meta span{font-size:.78rem;color:#6B7A90;background:rgba(14,23,38,.04);padding:5px 12px;border-radius:3px;font-variant-numeric:tabular-nums}
.card .go{color:var(--teal);font-size:.9rem}
.card .go:hover{color:var(--bronze)}
.gate{font-size:.76rem;color:var(--bronze);background:rgba(168,129,58,.08);border:1px solid rgba(168,129,58,.2);padding:5px 12px;border-radius:3px}
.total{margin-top:30px;padding-top:24px;border-block-start:1px solid rgba(168,129,58,.26);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:baseline}
.total b{color:var(--ink);font-weight:400;font-size:1rem}
.total small{display:block;color:#6B7A90;font-size:.84rem;margin-top:4px}
.total .go{color:var(--teal);font-size:.92rem}

.close{text-align:center;position:relative;overflow:hidden}
.close::after{content:'';position:absolute;inset-block-end:-42vw;inset-inline:0;margin:auto;width:110vw;height:80vw;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(224,192,112,.17),rgba(79,216,206,.07) 38%,transparent 66%);filter:blur(60px)}
.close h2{max-width:22ch;margin:0 auto;position:relative}
/* p גלובלי מוגבל ל-66ch. בלי מרווח אוטומטי הבלוק נצמד לקצה ההתחלה, שב-RTL
   הוא ימין, והטקסט המרוכז בתוכו נראה כאילו זז ימינה. */
.close p{margin-inline:auto}
.close .alt{margin-top:40px;color:var(--muted);font-size:.94rem;position:relative}
.close .alt a{color:var(--turq);border-block-end:1px solid var(--turq-dim)}

@media(max-width:960px){
  .hero{min-height:auto;padding:130px 0 100px}
  .hero-grid{grid-template-columns:1fr;gap:12px;text-align:center}
  .hero .lead{margin-inline:auto}
  .hero .cta-row{justify-content:center}
  /* ‎.en מוגדר גלובלית ‎text-align:right‎ כדי שהלועזית תיצמד לתחילת הכותרת
     העברית שמתחתיה. בהירו של המובייל הכל מרכזי, ולכן הוא נשאר הדבר היחיד
     שנצמד לימין. כאן הוא חוזר למרכז, מתחת לעיגול. (03.08.2026) */
  .hero-copy .en{text-align:center}
  .const{order:-1;max-width:420px;margin:0 auto 10px;width:100%}
  .duo{grid-template-columns:1fr;gap:42px}
  .duo .divider{display:none}
  /* המפה יורדת מתחת לטקסט, ולא מעליו, כי הטקסט הוא שמסביר אותה */
  .hd-split{grid-template-columns:1fr;gap:44px}
  /* ⚠️ הריפוד חייב להישאר סימטרי. קודם הוא היה ‎16px 16px 12px‎, וארבעת
     הפיקסלים החסרים למטה דחפו את המנדלה כלפי מטה והשאירו יותר לבן
     בחלק העליון של הלוח. במקביל תוקן גם קובץ ‎mandala.webp‎ עצמו,
     שבו העיגול ישב 19 פיקסל מתחת למרכז הקנבס. (10.08.2026) */
  .chart-plate{max-width:520px;margin-inline:auto;padding:16px}
  .tracks,.offer-grid{grid-template-columns:1fr}
  .track-c{padding:30px 22px 24px}
  .step{padding-inline-start:60px}
  .card{padding:22px 20px}
  .dotn{width:40px;height:40px;font-size:.78rem}
  .path::before{inset-inline-start:20px}
  .offer{padding:28px 24px}
  .offer .prow{flex-direction:column;align-items:stretch;gap:14px}
}

/* ===== מובייל לעמוד הבית ===== */
@media(max-width:640px){
  .hero{padding:112px 0 84px}
  .hero h1{font-size:clamp(2rem,9vw,2.9rem);margin-bottom:20px}
  .hero .lead{font-size:1rem;margin-bottom:32px}
  .const{max-width:320px;margin:0 auto 4px}
  .scroll-cue{display:none}
  .duo{gap:34px;margin-top:44px}
  .duo h3{font-size:1.4rem}
  .duo-close{margin-top:44px}
  .mut .year{font-size:4.4rem;margin-bottom:-.1em}
  .path-intro{font-size:1rem}
  .total{flex-direction:column;align-items:flex-start;gap:12px}
  .offer .prow{padding-top:18px}
  .offer .prow .entry{width:100%;justify-content:center}
}