/* תובנות – כיוון: חם וחווייתי (warm-experience) + ה-DNA של אליהו
   צבעי המותג מהלוגו מחליפים את צבעי הכיוון. כל השאר נגזר מארבעת צבעי הבסיס. */
:root {
  /* ארבעת צבעי הבסיס. אפשר לשנות מאזור הניהול */
  --ink: #1A1A1A;      /* דיו: כותרות, טקסט, רקעים כהים */
  --blue: #0E4F52;     /* משני: טורקיז עמוק למקטעים כהים */
  --yellow: #00A9A6;   /* הדגשה ראשית: הטורקיז של הלוגו */
  --teal: #E07A5F;     /* הדגשה משנית: אלמוג חם מהכיוון, לפרטים קטנים */
  /* נגזרים */
  --accent-l: color-mix(in srgb, var(--yellow) 72%, #fff);
  --accent-d: color-mix(in srgb, var(--yellow) 62%, #000);
  --accent-soft: color-mix(in srgb, var(--yellow) 22%, #fff);
  --bg: #FEFAF0;
  --surface: #F6EFE3;
  --muted: color-mix(in srgb, var(--ink) 68%, #fff);
  --on-dark: color-mix(in srgb, var(--yellow) 12%, #fff);
  --line: color-mix(in srgb, var(--ink) 14%, var(--bg));
  --p-sand: #F8E9D2;
  --p-mint: color-mix(in srgb, var(--yellow) 16%, #fff);
  --p-sky: #E4EEF3;
  --p-lilac: #EFE6F0;
  --font-head: 'Rubik', sans-serif;
  --font-body: 'Heebo', sans-serif;
  --max: 1180px;
  --shadow-card: 0 18px 45px -22px color-mix(in srgb, var(--blue) 60%, transparent);
  --shadow-pop: 0 30px 60px -24px color-mix(in srgb, var(--blue) 70%, transparent);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  overflow-x: clip;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 800; line-height: 1.1; text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
ul, ol { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

.wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { position: relative; padding: 96px 0; }
.section--tight { padding-top: 24px; }
.section--surface { background: var(--surface); }

/* ---------- עיטור: כתמים אורגניים ---------- */
.deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 44% 56% 62% 38% / 48% 40% 60% 52%; filter: blur(2px); }
.blob--a { width: 460px; height: 420px; top: -120px; left: -160px; background: var(--accent-soft); opacity: .7; }
.blob--b { width: 300px; height: 280px; bottom: 40px; right: -120px; background: var(--p-sand); }
.blob--c { width: 380px; height: 340px; top: 60px; left: -200px; background: var(--p-mint); opacity: .8; }

/* ---------- כותרות ---------- */
.head { max-width: 680px; margin-bottom: 44px; }
.head--center { margin-inline: auto; text-align: center; }
.eyebrow { display: inline-block; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--accent-d); margin-bottom: 10px; }
.eyebrow--light { color: var(--accent-l); }
.title { font-size: clamp(34px, 5.2vw, 56px); letter-spacing: -.5px; color: var(--ink); }
.title--md { font-size: clamp(32px, 4.4vw, 48px); }
.title--light { color: #fff; }
/* הדגשה: מרקר טורקיז מאחורי המילים */
.title em, .hero__title em {
  font-style: normal;
  padding: 0 .12em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--yellow) 45%, transparent) 58%, color-mix(in srgb, var(--yellow) 45%, transparent) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.title--light em { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--yellow) 70%, transparent) 58%, color-mix(in srgb, var(--yellow) 70%, transparent) 92%, transparent 92%); }
.head__sub { margin-top: 14px; font-size: 19px; color: var(--muted); }

/* ---------- כפתורים ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  font-family: var(--font-body); font-size: 17px; font-weight: 800; line-height: 1.2;
  white-space: nowrap; transition: transform .2s, box-shadow .2s, background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--sm { min-height: 44px; padding: 9px 18px; font-size: 15px; }
.btn--lg { min-height: 56px; padding: 15px 28px; font-size: 18px; }
.btn--xl { min-height: 72px; padding: 18px 40px; font-size: clamp(24px, 3.4vw, 34px); font-family: var(--font-head); direction: ltr; }
.btn--accent { color: var(--ink); background: linear-gradient(135deg, var(--accent-l), var(--yellow)); box-shadow: 0 10px 24px color-mix(in srgb, var(--yellow) 40%, transparent); }
.btn--outline { color: var(--ink); border: 2px solid var(--ink); background: transparent; }
.btn--outline:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.btn--ink { color: #fff; background: var(--ink); box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 35%, transparent); }

/* ---------- תפריט צף ---------- */
.nav-wrap { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; padding: 0 14px; }
.nav {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 10px; padding-inline-start: 20px;
  border-radius: 999px; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--line);
  box-shadow: var(--shadow-card);
}
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__img { height: 40px; width: auto; max-width: 150px; object-fit: contain; }
.logo__text { font-family: var(--font-head); font-weight: 800; font-size: 24px; line-height: 1; display: flex; flex-direction: column; }
.logo__text small { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 3px; }
.logo--has-img .logo__text { display: none; }
.nav__links { display: none; gap: 26px; font-size: 16px; font-weight: 700; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--accent-d); }
.nav__actions { display: flex; align-items: center; gap: 8px; }
.nav__wa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink); background: var(--accent-soft); }
.nav__wa svg { width: 22px; height: 22px; }

/* ---------- פתיחה ---------- */
.hero { position: relative; overflow: hidden; padding: 120px 0 130px; }
.hero__grid { position: relative; display: grid; gap: 56px; align-items: center; }
.pill-tag { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 15px; font-weight: 700; }
.pill-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 25%, transparent); }
.hero__title { margin-top: 22px; font-size: clamp(44px, 7vw, 80px); line-height: 1.05; letter-spacing: -.7px; }
.hero__sub { margin-top: 20px; font-size: clamp(18px, 2vw, 21px); color: var(--muted); max-width: 36ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__actions .btn--outline span { direction: ltr; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: 15px; font-weight: 700; }
.hero__ticks li, .course-list li { display: flex; align-items: center; gap: 8px; }
.hero__ticks li::before, .course-list li::before { content: ""; width: 18px; height: 18px; flex: none; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008B88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

.hero__visual { position: relative; width: min(100%, 460px); margin: 0 auto; aspect-ratio: 1; }
.hero__ring { position: absolute; inset: -8%; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--yellow) 55%, transparent); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__blob { position: absolute; inset: 3% -6% -6% 5%; background: var(--yellow); border-radius: 44% 56% 56% 44% / 46% 56% 44% 54%; transform: rotate(8deg); }
.hero__circle { position: relative; z-index: 2; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 10px solid #fff; box-shadow: var(--shadow-pop); background: #333; }
.hero__circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); }
.float { position: absolute; z-index: 3; background: #fff; box-shadow: var(--shadow-card); }
.float--tag { top: 6%; left: -4%; padding: 9px 18px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.float--tag::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--teal); vertical-align: middle; }
.float--count { bottom: 14%; right: -3%; display: grid; place-items: center; align-content: center; width: 112px; height: 112px; border-radius: 50%; color: #fff; background: var(--ink); border: 4px solid #fff; font-size: 13px; font-weight: 700; line-height: 1.15; text-align: center; }
.float--count b { font-family: var(--font-head); font-size: 40px; line-height: 1; color: var(--accent-l); }
.float--note { bottom: 0; left: -6%; padding: 12px 20px; border-radius: 22px; font-size: 13px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; max-width: 230px; }
.float--note b { font-family: var(--font-head); font-size: 18px; line-height: 1.2; color: var(--ink); }

/* ---------- פס אמון ---------- */
.trust {
  position: relative; z-index: 5; margin-top: -64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px;
  padding: 26px 22px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-pop);
}
.trust li { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.trust b { display: block; font-family: var(--font-head); font-size: 18px; color: var(--ink); margin-bottom: 2px; }
.trust__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; color: var(--ink); background: var(--accent-soft); box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--yellow) 40%, transparent); }
.trust__icon svg { width: 24px; height: 24px; }

/* ---------- כרטיסי הטיפול (פסטל) ---------- */
.cards { display: grid; gap: 20px; }
.card { padding: 30px 26px; border-radius: 26px; box-shadow: var(--shadow-card); transition: transform .25s; }
.card:hover { transform: translateY(-4px); }
.card--sand { background: var(--p-sand); }
.card--mint { background: var(--p-mint); }
.card--sky { background: var(--p-sky); }
.card--lilac { background: var(--p-lilac); }
.card__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--ink); background: #fff; margin-bottom: 18px; }
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 24px; }
.card p { margin-top: 8px; color: color-mix(in srgb, var(--ink) 78%, #fff); }

/* ---------- הקורס (מקטע כהה) ---------- */
.course { position: relative; padding: 150px 0 160px; color: #fff; background: radial-gradient(900px 500px at 15% 20%, color-mix(in srgb, var(--blue) 80%, var(--yellow)) 0%, transparent 60%), var(--blue); overflow: hidden; }
.course__grid { display: grid; gap: 48px; align-items: center; }
.course__sub { margin-top: 16px; font-size: 19px; color: var(--on-dark); max-width: 42ch; }
.course__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.course__soon { font-size: 15px; color: var(--on-dark); }
.course__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.course__stats li { display: grid; gap: 6px; padding: 26px 16px; border-radius: 26px; text-align: center; background: color-mix(in srgb, #fff 8%, transparent); border: 1px solid color-mix(in srgb, #fff 16%, transparent); font-size: 15px; color: var(--on-dark); line-height: 1.3; }
.course__stats b { font-family: var(--font-head); font-weight: 800; font-size: clamp(38px, 5vw, 64px); line-height: 1; color: var(--accent-l); white-space: nowrap; direction: ltr; }
.wave { position: absolute; left: 0; width: 100%; height: 90px; }
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; }
.wave path { fill: var(--bg); }

/* ---------- עליי ---------- */
.about { display: grid; gap: 48px; align-items: center; }
.about__photo { position: relative; width: min(100%, 440px); margin: 0 auto; }
.about__blob { position: absolute; inset: 8% -6% -6% 8%; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; background: var(--p-sand); }
.about__photo img { position: relative; width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 30%; border-radius: 32px; box-shadow: var(--shadow-pop); }
.about__text { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 52ch; }

/* ---------- המלצות: כרטיסי פסטל מוטים בקשת ---------- */
.recs { display: grid; gap: 22px; }
.rec { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 34px 26px 26px; border-radius: 26px; box-shadow: var(--shadow-card); transition: transform .3s; }
.rec--1 { background: var(--p-sand); }
.rec--2 { background: var(--p-mint); }
.rec--3 { background: var(--p-lilac); }
.rec--4 { background: var(--p-sky); }
.rec__q { position: absolute; top: 4px; left: 22px; font-family: var(--font-head); font-size: 90px; line-height: 1; color: var(--teal); }
.rec blockquote { font-size: 18px; line-height: 1.65; }
.rec figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.rec figcaption b { display: block; font-family: var(--font-head); font-size: 17px; line-height: 1.3; }
.rec figcaption small { display: block; font-size: 14px; color: var(--muted); line-height: 1.4; }
.rec__tel { direction: rtl; }
.rec__tel:empty { display: none; }
.rec__init { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--accent-d); }

/* ---------- איך מתחילים + האיור: קו סבוך שנפתח לחץ ---------- */
.untangle { margin: -10px 0 26px; }
.untangle svg { width: 100%; height: auto; max-height: 120px; }
.untangle__line, .untangle__head { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.untangle__line { stroke: var(--ink); stroke-dasharray: 2000; stroke-dashoffset: 2000; transition: stroke-dashoffset 2.6s ease-in-out; }
.untangle__head { opacity: 0; transition: opacity .4s 2.4s; stroke: var(--yellow); stroke-width: 7; }
.untangle.in .untangle__line, .no-js-anim .untangle__line { stroke-dashoffset: 0; }
.untangle.in .untangle__head { opacity: 1; }
.steps { display: grid; gap: 20px; }
.step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 30px 28px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(56px, 8vw, 92px); line-height: .9; color: var(--yellow); }
.step h3 { font-size: clamp(22px, 2.6vw, 28px); }
.step p { margin-top: 6px; color: var(--muted); }

/* ---------- שאלות נפוצות ---------- */
.faq { max-width: 820px; }
.faq details { margin-top: 12px; padding: 20px 26px; border-radius: 22px; background: var(--surface); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 800; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-head); font-size: 28px; line-height: 1; color: var(--accent-d); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 12px; color: var(--muted); }

/* ---------- יצירת קשר ---------- */
.cta { position: relative; overflow: hidden; padding: 96px 0 150px; background: linear-gradient(135deg, var(--accent-l), var(--yellow)); }
.cta__outline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -58%); font-family: var(--font-head); font-weight: 800; font-size: clamp(100px, 19vw, 290px); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--ink) 12%, transparent); direction: ltr; pointer-events: none; }
.cta__grid { position: relative; display: grid; gap: 32px; align-items: center; }
.cta__title { font-size: clamp(42px, 6.4vw, 76px); }
.cta__sub { margin-top: 16px; font-size: 20px; font-weight: 500; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cta__info { display: grid; gap: 10px; margin-top: 24px; font-size: 17px; font-weight: 700; }
.cta__info li { display: flex; align-items: center; gap: 10px; }
.cta__info svg { width: 22px; height: 22px; flex: none; }
.cta__info a:hover { text-decoration: underline; }

.lead { display: grid; gap: 14px; padding: 30px 26px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 22%, transparent); }
.lead__title { font-size: 26px; margin-bottom: 4px; }
.lead__field { display: grid; gap: 6px; font-size: 15px; font-weight: 700; color: var(--muted); }
.lead__field input, .lead__field select, .lead__field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 2px solid var(--line); border-radius: 16px; background: #fff;
  font: inherit; font-size: 17px; font-weight: 500; color: var(--ink);
}
.lead__field textarea { min-height: 76px; resize: vertical; }
.lead__field input:focus, .lead__field select:focus, .lead__field textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 25%, transparent); }
.lead__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lead__submit { width: 100%; margin-top: 4px; }
.lead__submit:disabled { opacity: .6; }
.lead__msg { min-height: 1.4em; font-size: 15px; font-weight: 700; color: var(--accent-d); }
.lead__msg--bad { color: #B42318; }
.lead__done { padding: 28px 10px; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: 26px; }

/* ---------- כותרת תחתונה ---------- */
.wave--footer { bottom: -1px; height: 80px; }
.wave--footer path { fill: var(--ink); }
.footer { padding: 32px 0 110px; color: color-mix(in srgb, #fff 75%, var(--ink)); background: var(--ink); }
.footer__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.footer__logo { display: inline-block; padding: 10px 18px; border-radius: 20px; background: var(--bg); }
.footer__logo img { height: 52px; width: auto; }
.footer__line { margin-top: 12px; font-size: 15px; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; font-weight: 700; }
.footer__links a:hover { color: var(--accent-l); }
.footer__phone { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: #fff; direction: ltr; }
.footer__bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 14px; }
.footer__admin { opacity: .6; }
.footer__admin:hover { opacity: 1; }

/* ---------- וואטסאפ צף: עיגול טורקיז ---------- */
.wa-float { position: fixed; left: 18px; bottom: 18px; z-index: 60; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--ink); background: linear-gradient(135deg, var(--accent-l), var(--yellow)); box-shadow: 0 10px 26px color-mix(in srgb, var(--yellow) 45%, transparent); }
.wa-float svg { width: 28px; height: 28px; }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--yellow); opacity: .45; animation: pulse 2.6s ease-out infinite; z-index: -1; }
@keyframes pulse { from { transform: scale(1); opacity: .45; } to { transform: scale(1.7); opacity: 0; } }

/* ---------- דף הקורס ---------- */
.c-hero { position: relative; overflow: hidden; padding: 140px 0 120px; }
.c-hero__grid { position: relative; display: grid; gap: 40px; align-items: center; }
.c-hero__card { padding: 30px 26px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-pop); }
.c-hero__card h2 { font-size: 22px; margin-bottom: 14px; }
.course-list { display: grid; gap: 12px; font-size: 17px; font-weight: 500; }
.course-list li { align-items: flex-start; }
.course-list li::before { margin-top: 5px; }
.mix { display: grid; gap: 20px; }
.mix__card { padding: 34px 28px; border-radius: 28px; box-shadow: var(--shadow-card); }
.mix__card h3 { font-size: 26px; margin: 14px 0 8px; }
.mix__card p { color: color-mix(in srgb, var(--ink) 78%, #fff); }
.mix__big { font-family: var(--font-head); font-weight: 800; font-size: 60px; line-height: 1; color: var(--accent-d); }
.stages { display: grid; gap: 20px; }
.stage { display: grid; align-content: start; gap: 10px; padding: 30px 28px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); }
.stage__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stage__num { font-family: var(--font-head); font-weight: 800; font-size: 56px; line-height: .9; color: var(--yellow); }
.stage__tag { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; background: var(--p-mint); }
.stage__tag--live { background: var(--p-sand); }
.stage h3 { font-size: clamp(22px, 2.6vw, 26px); }
.stage p { color: var(--muted); }
@media (min-width: 720px) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mix.mix--3 { grid-template-columns: repeat(3, 1fr); } }

/* כשאזור הניהול פתוח במחשב, האתר זז ימינה כדי שיהיה גלוי */
@media (min-width: 1100px) {
  .adm-open .nav-wrap { left: 600px; }
  .adm-open .nav__links, .adm-open .wa-float { display: none; }
}

/* ---------- הופעה בגלילה ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- טאבלט ומחשב ---------- */
@media (min-width: 720px) {
  .trust { grid-template-columns: repeat(4, 1fr); padding: 30px 32px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .recs { grid-template-columns: repeat(2, 1fr); }
  .mix { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .nav__links { display: flex; }
  .hero { padding: 160px 0 150px; }
  .hero__grid { grid-template-columns: 1.2fr 1fr; gap: 64px; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .course__grid { grid-template-columns: 1.15fr 1fr; gap: 56px; }
  .about { grid-template-columns: 1fr 1.2fr; gap: 72px; }
  .recs { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 18px; }
  .rec--1 { transform: rotate(3deg) translateY(28px); }
  .rec--2 { transform: rotate(1deg); }
  .rec--3 { transform: rotate(-1deg); }
  .rec--4 { transform: rotate(-3deg) translateY(28px); }
  .rec:hover { transform: rotate(0) translateY(-6px); }
  .recs { padding-bottom: 28px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { grid-template-columns: 1fr; gap: 12px; padding: 34px 30px; }
  .cta__grid { grid-template-columns: 1.1fr 1fr; gap: 56px; }
  .c-hero { padding: 170px 0 130px; }
  .c-hero__grid { grid-template-columns: 1.2fr 1fr; gap: 64px; }
  .footer { padding-bottom: 36px; }
}

/* ---------- טלפון ---------- */
@media (max-width: 719px) {
  .nav { padding: 6px 8px; padding-inline-start: 14px; }
  .logo__img { height: 34px; max-width: 120px; }
  .hero { padding-top: 104px; }
  .hero__visual { width: min(84%, 360px); }
  .float--tag { left: -6%; top: 0; font-size: 14px; }
  .float--count { width: 92px; height: 92px; right: -6%; font-size: 12px; }
  .float--count b { font-size: 32px; }
  .float--note { left: -6%; bottom: -6%; max-width: 200px; padding: 10px 16px; }
  .float--note b { font-size: 16px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .course__stats li { padding: 20px 8px; font-size: 14px; }
  .step { grid-template-columns: 1fr; gap: 8px; padding: 26px 22px; }
  .cta__actions .btn { width: 100%; }
  .lead { padding: 24px 20px; }
  .untangle { display: none; }
}
@media (max-width: 559px) {
  .trust { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- מי שביקש פחות תנועה ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__ring, .wa-float::before { animation: none; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .untangle__line { stroke-dashoffset: 0; transition: none; }
  .untangle__head { opacity: 1; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* =========================================================
   גרסה 2: פתיחה רגועה, קצב מתחלף, נגיעות עומק
   ========================================================= */

/* פתיחה */
.h2 { position: relative; overflow: hidden; padding: 116px 0 70px; }
.h2__grid { position: relative; display: grid; gap: 48px; align-items: center; }
.h2__ask { display: inline-block; font-size: 19px; font-weight: 700; color: var(--accent-d); }
.h2 .hero__title { margin-top: 12px; font-size: clamp(44px, 7vw, 86px); }
.h2__visual { position: relative; }
.h2__photo { position: relative; border-radius: 36px; overflow: hidden; box-shadow: var(--shadow-pop); aspect-ratio: 5 / 4; background: var(--surface); }
.h2__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; transform: scaleX(-1) scale(1.06); }
.h2 .float--tag { top: auto; bottom: 22px; left: auto; right: 22px; }

/* הסמל של הלוגו בתלת מימד עדין */
.rings { position: absolute; z-index: 4; left: -18px; bottom: -48px; width: 170px; aspect-ratio: 1; perspective: 700px; pointer-events: none; }
.rings__stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 12deg)) rotateY(var(--ry, -16deg)); transition: transform .5s cubic-bezier(.2,.7,.2,1); animation: bob 7s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -8px; } }
.rings__l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rings__l circle { fill: none; stroke: var(--ink); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 84 16; }
.rings__l--1 { transform: translateZ(0); }
.rings__l--2 { transform: translateZ(26px); }
.rings__l--3 { transform: translateZ(52px); }
.rings__l--arrow { transform: translateZ(84px); }
.rings__l--arrow path { fill: none; stroke: var(--yellow); stroke-width: 18; stroke-linecap: round; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .25)); }
.rings__l--arrow .rings__head { fill: var(--yellow); stroke-width: 8; stroke-linejoin: round; }
.rings::before { content: ""; position: absolute; inset: -4%; border-radius: 50%; background: #fff; box-shadow: var(--shadow-pop); }

/* שורת אמון */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 26px; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.proof li { display: grid; gap: 2px; padding: 18px 20px; font-size: 14px; line-height: 1.4; color: var(--muted); border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line); }
.proof b { font-family: var(--font-head); font-size: 18px; color: var(--ink); }
.proof b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }

/* רצועה רצה */
.ticker-wrap { overflow: hidden; padding: 64px 0 10px; }
.ticker { margin-inline: -3%; background: var(--blue); transform: rotate(-1.6deg); box-shadow: var(--shadow-card); }
.ticker__track { display: flex; width: max-content; animation: tick 40s linear infinite; }
.ticker__track span { display: flex; align-items: center; gap: 22px; padding: 18px 0; padding-inline-start: 22px; font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; white-space: nowrap; }
.ticker__track span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* הגישה: שאלות ותשובות */
.qa { display: grid; gap: 20px; }
.qa__card { position: relative; padding: 34px 30px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); transition: transform .3s; }
.qa__card:hover { transform: translateY(-4px); }
.qa__card--dark { background: var(--ink); color: #fff; }
.qa__card--dark p { color: color-mix(in srgb, #fff 78%, var(--ink)) !important; }
.qa__num { display: block; font-family: var(--font-head); font-weight: 800; font-size: 64px; line-height: 1; color: var(--yellow); margin-bottom: 14px; }
.qa__card h3 { font-size: clamp(22px, 2.6vw, 28px); }
.qa__card p { margin-top: 10px; font-size: 18px; color: var(--muted); }
.untangle { margin: 50px 0 6px; }
.bigquote { text-align: center; font-family: var(--font-head); font-weight: 800; font-size: clamp(38px, 6.4vw, 84px); line-height: 1.1; letter-spacing: -.5px; }
.bigquote em { font-style: normal; display: block; color: var(--accent-d); }

/* למי זה מתאים */
.section--surface { padding-top: 120px; }
.wave--in { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; }
.wave--in path { fill: var(--bg); }
.fit { display: grid; gap: 20px; max-width: 980px; margin: 0 auto; }
.fit__yes, .fit__no { padding: 34px 30px; border-radius: 28px; }
.fit__yes { background: #fff; box-shadow: var(--shadow-pop); border: 2px solid color-mix(in srgb, var(--yellow) 50%, transparent); }
.fit__no { background: color-mix(in srgb, var(--surface) 50%, var(--bg)); border: 2px dashed var(--line); }
.fit h3 { font-size: 24px; margin-bottom: 16px; }
.fit__list { display: grid; gap: 12px; font-size: 18px; }
.fit__list li { display: flex; align-items: flex-start; gap: 12px; }
.fit__list li::before { content: ""; flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--yellow) no-repeat center/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.fit__list--no li { color: var(--muted); }
.fit__list--no li::before { background: var(--line) no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* חמש המלצות */
.rec--5 { background: color-mix(in srgb, var(--teal) 16%, #fff); }

/* מצבים: מקטע כהה */
.states { padding: 150px 0 160px; }
.chips-dark { display: flex; flex-wrap: wrap; gap: 12px; }
.chips-dark li { padding: 14px 22px; border-radius: 999px; font-size: 18px; font-weight: 500; color: #fff; background: color-mix(in srgb, #fff 9%, transparent); border: 1px solid color-mix(in srgb, #fff 20%, transparent); transition: background-color .2s, transform .2s; }
.chips-dark li:hover { background: color-mix(in srgb, var(--yellow) 30%, transparent); transform: translateY(-2px); }
.states__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 36px; color: var(--on-dark); font-size: 16px; }

/* עליי */
.about__years { position: absolute; z-index: 2; bottom: -22px; right: -14px; display: grid; place-items: center; align-content: center; width: 124px; height: 124px; border-radius: 50%; background: var(--ink); color: #fff; border: 5px solid var(--bg); font-size: 13px; font-weight: 700; line-height: 1.1; text-align: center; box-shadow: var(--shadow-pop); }
.about__years b { font-family: var(--font-head); font-size: 46px; line-height: 1; color: var(--accent-l); }
.about__sub { margin-top: 26px; font-size: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chips li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); font-size: 15px; font-weight: 700; }
.about__small { margin-top: 12px; font-size: 15px; color: var(--muted); }

/* כרטיס הקורס */
.promo { display: grid; gap: 14px; align-items: center; padding: 30px 28px; border-radius: 30px; background: linear-gradient(135deg, var(--p-sand), color-mix(in srgb, var(--yellow) 18%, #fff)); box-shadow: var(--shadow-card); transition: transform .3s, box-shadow .3s; }
.promo:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.promo__tag { justify-self: start; padding: 4px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.promo__body { display: grid; gap: 4px; }
.promo__eyebrow { font-size: 15px; font-weight: 700; color: var(--accent-d); }
.promo__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.15; }
.promo__text { color: var(--muted); }
.promo__go { font-weight: 800; color: var(--ink); }

/* יצירת קשר */
.cta__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cta__chips li { padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, #fff 55%, transparent); font-size: 15px; font-weight: 800; }

@media (min-width: 640px) {
  .proof { grid-template-columns: repeat(4, 1fr); }
  .proof li { border-top: 0; }
  .proof li:first-child { border-inline-start: 0; }
}
@media (max-width: 639px) {
  .proof li:nth-child(odd) { border-inline-start: 0; }
  .proof li:nth-child(-n+2) { border-top: 0; }
}
@media (min-width: 760px) {
  .qa, .fit { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .h2 { padding: 150px 0 80px; }
  .h2__grid { grid-template-columns: 1fr 1.05fr; gap: 64px; }
  .rings { width: 200px; left: -40px; bottom: -60px; }
  .qa__card--dark { transform: translateY(40px); }
  .qa__card--dark:hover { transform: translateY(36px); }
  .untangle { margin-top: 90px; }
  .recs--5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .recs--5 .rec--1 { transform: rotate(4deg) translateY(44px); }
  .recs--5 .rec--2 { transform: rotate(2deg) translateY(12px); }
  .recs--5 .rec--3 { transform: none; }
  .recs--5 .rec--4 { transform: rotate(-2deg) translateY(12px); }
  .recs--5 .rec--5 { transform: rotate(-4deg) translateY(44px); }
  .recs--5 .rec { padding: 34px 20px 22px; }
  .recs--5 .rec:hover { transform: rotate(0) translateY(-6px); z-index: 2; }
  .recs--5 blockquote { font-size: 17px; }
  .promo { grid-template-columns: auto 1fr auto; gap: 28px; padding: 34px 40px; }
}
@media (max-width: 719px) {
  .h2 { padding-top: 100px; }
  .rings { width: 120px; left: -4px; bottom: -40px; }
  .h2 .float--tag { right: 14px; bottom: 14px; }
  .about__years { width: 100px; height: 100px; right: 0; }
  .about__years b { font-size: 36px; }
  .chips-dark li { font-size: 16px; padding: 12px 18px; }
  .untangle { display: block; margin: 36px -10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rings__stage, .ticker__track { animation: none; transition: none; }
  .qa__card:hover, .promo:hover, .chips-dark li:hover { transform: none; }
}

/* =========================================================
   גרסה 3: פתיחה על כל המסך, מסגרת מצבים, יצירת קשר רגועה
   ========================================================= */
.rings { display: none; }

/* פתיחה על כל המסך */
.h3 { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 90px; }
.h3__bg { position: absolute; inset: 0; }
.h3__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 60%; }
.h3__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgb(254 250 240 / .9) 0%, rgb(254 250 240 / .72) 34%, rgb(254 250 240 / 0) 62%); }
.h3__inner { position: relative; z-index: 1; width: 100%; }
.h3__text { max-width: 600px; }
.h3 .h2__ask { font-size: 19px; }
.h3 .hero__title { margin-top: 12px; font-size: clamp(46px, 7vw, 92px); }
.h3 .hero__sub { color: color-mix(in srgb, var(--ink) 80%, #fff); }
.h3__note { margin-top: 16px; font-size: 15px; font-weight: 700; color: color-mix(in srgb, var(--ink) 70%, #fff); }
.h3__note::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--yellow); vertical-align: middle; }
.h3__scroll { position: absolute; z-index: 1; bottom: 26px; left: 50%; translate: -50% 0; width: 30px; height: 48px; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--ink) 45%, transparent); }
.h3__scroll span { position: absolute; top: 9px; left: 50%; width: 4px; height: 9px; margin-left: -2px; border-radius: 4px; background: var(--ink); animation: wheel 2.2s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 80% { opacity: 0; transform: translateY(14px); } 100% { opacity: 0; } }
/* שורת האמון עולה על תחתית הפתיחה */
.h3 + .wrap .proof { position: relative; z-index: 3; margin-top: -46px; }

/* מצבים: מסגרת מתוחמת */
.frame { position: relative; max-width: 1040px; margin: 0 auto; padding: 44px 40px 34px; border-radius: 32px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.frame::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 6px; background: linear-gradient(90deg, var(--blue), var(--yellow)); }
.frame__head { text-align: center; margin-bottom: 30px; }
.frame__list { counter-reset: st; display: grid; border-top: 1px solid var(--line); }
.frame__list li { counter-increment: st; display: flex; align-items: center; gap: 18px; padding: 18px 6px; border-bottom: 1px solid var(--line); font-size: 18px; transition: background-color .2s; }
.frame__list li:hover { background: color-mix(in srgb, var(--yellow) 6%, #fff); }
.frame__list li::before { content: counter(st, decimal-leading-zero); flex: none; width: 46px; font-family: var(--font-head); font-weight: 800; font-size: 22px; color: var(--accent-d); }
.frame__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 20px 24px; border-radius: 20px; background: var(--surface); font-size: 17px; font-weight: 500; }

/* יצירת קשר רגועה */
.calm { padding: 40px 0 100px; }
.calm__card { display: grid; gap: 0; max-width: 1120px; padding: 0; border-radius: 36px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.calm__info { padding: 44px 36px; }
.calm__sub { margin-top: 12px; font-size: 18px; color: var(--muted); max-width: 44ch; }
.calm__rows { display: grid; gap: 4px; margin-top: 26px; }
.calm__rows li { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.calm__rows li:last-child { border-bottom: 0; }
.calm__rows small { display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
.calm__rows a { font-size: 18px; font-weight: 700; }
.calm__rows a:hover { color: var(--accent-d); }
.calm__ic { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--accent-d); border: 1px solid var(--line); }
.calm__ic svg { width: 21px; height: 21px; }
.calm__terms { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--muted); }
.calm__terms li { display: flex; align-items: center; gap: 8px; }
.calm__terms li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.calm__form { margin: 0; border-radius: 0; box-shadow: none; background: #fff; padding: 44px 36px; border-top: 1px solid var(--line); }
.calm__form .lead__title { font-size: 24px; }

/* כותרת תחתונה רגועה */
.foot { padding: 56px 0 100px; background: #F3ECE1; border-top: 1px solid var(--line); color: var(--muted); }
.foot__grid { display: grid; gap: 32px; }
.foot__brand img { height: 56px; width: auto; }
.foot__brand p { margin-top: 12px; font-size: 15px; }
.foot__col { display: grid; gap: 8px; align-content: start; font-size: 16px; }
.foot__col b { font-family: var(--font-head); font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.foot__col a:hover { color: var(--accent-d); }
.foot__bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }

@media (min-width: 900px) {
  .calm__card { grid-template-columns: 1.1fr 1fr; }
  .calm__info { padding: 56px 56px; }
  .calm__form { padding: 56px 48px; border-top: 0; border-inline-start: 1px solid var(--line); }
  .frame__list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .foot { padding-bottom: 40px; }
}
@media (max-width: 719px) {
  .h3 { align-items: flex-start; min-height: 92svh; padding-top: 104px; }
  .h3__bg img { object-position: 22% 100%; }
  .h3__bg::after { background: linear-gradient(to bottom, rgb(254 250 240 / .94) 0%, rgb(254 250 240 / .8) 52%, rgb(254 250 240 / 0) 80%); }
  .h3__scroll { display: none; }
  .frame { padding: 34px 20px 22px; }
  .frame__list li { font-size: 17px; gap: 12px; }
  .frame__list li::before { width: 34px; font-size: 18px; }
  .frame__foot .btn { width: 100%; }
  .calm__info, .calm__form { padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .h3__scroll span { animation: none; }
}

/* =========================================================
   גרסה 4: המלצות על רקע עז, מסגרת מצבים נוכחת, יותר צבע בסוף
   ========================================================= */

/* המלצות: רצועה בטורקיז עמוק */
.recs-band { background: radial-gradient(900px 500px at 85% 0%, color-mix(in srgb, var(--blue) 70%, var(--yellow)) 0%, transparent 65%), var(--blue); color: #fff; padding: 110px 0 130px; }
.recs-band .head { margin-bottom: 56px; }
.recs-band .title--light em { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--yellow) 80%, transparent) 58%, color-mix(in srgb, var(--yellow) 80%, transparent) 92%, transparent 92%); }
.recs-band .rec { background: #fff; color: var(--ink); box-shadow: 0 30px 60px -28px rgb(0 0 0 / .6); }
.recs-band .rec--3 { background: var(--yellow); }
.recs-band .rec__q { color: var(--yellow); font-size: 96px; top: 0; }
.recs-band .rec--3 .rec__q { color: var(--ink); }
.recs-band .rec__init { background: var(--blue); color: #fff; }
.recs-band .rec--3 .rec__init { background: var(--ink); color: var(--accent-l); }
.recs-band .rec--3 figcaption small { color: color-mix(in srgb, var(--ink) 75%, var(--yellow)); }
.recs-band .rec { border-top: 5px solid var(--yellow); }
.recs-band .rec--3 { border-top-color: var(--ink); }

/* באילו מצבים פונים: מסגרת נוכחת */
#states { padding: 110px 0; }
.frame { padding: 0; max-width: 1100px; border: 2px solid var(--ink); border-radius: 32px; box-shadow: 16px 16px 0 0 var(--yellow); display: grid; overflow: hidden; }
.frame::before { display: none; }
.frame__head { margin: 0; padding: 40px 32px; text-align: right; background: var(--ink); color: #fff; }
.frame__head .eyebrow { color: var(--accent-l); }
.frame__head .title { color: #fff; font-size: clamp(34px, 4.2vw, 50px); }
.frame__head .title em { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--yellow) 75%, transparent) 58%, color-mix(in srgb, var(--yellow) 75%, transparent) 92%, transparent 92%); }
.frame__list { border-top: 0; padding: 14px 32px; background: #fff; grid-template-columns: 1fr !important; }
.frame__list li { padding: 17px 4px; font-size: 19px; font-weight: 500; }
.frame__list li:last-child { border-bottom: 0; }
.frame__list li::before { width: 52px; font-size: 26px; color: var(--yellow); }
.frame__foot { margin: 0; border-radius: 0; padding: 24px 32px; background: color-mix(in srgb, var(--yellow) 16%, #fff); border-top: 2px solid var(--ink); font-weight: 700; }

/* יצירת קשר: צד הפרטים בצבע */
.calm__card { border: 0; box-shadow: var(--shadow-pop); }
.calm__info { background: var(--blue); color: #fff; }
.calm__info .eyebrow { color: var(--accent-l); }
.calm__info .title { color: #fff; }
.calm__info .title em { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--yellow) 75%, transparent) 58%, color-mix(in srgb, var(--yellow) 75%, transparent) 92%, transparent 92%); }
.calm__sub { color: var(--on-dark); }
.calm__rows li { border-bottom-color: rgb(255 255 255 / .14); }
.calm__rows small { color: color-mix(in srgb, #fff 65%, var(--blue)); }
.calm__rows a { color: #fff; }
.calm__rows a:hover { color: var(--accent-l); }
.calm__ic { background: var(--yellow); color: var(--ink); border: 0; }
.calm__terms { color: var(--on-dark); }
.calm__terms li::before { background: var(--accent-l); }
.calm__form { border-inline-start: 0 !important; }
.calm__form .lead__submit { background: var(--blue); }

/* כותרת תחתונה: נגיעה של צבע */
.foot { background: color-mix(in srgb, var(--yellow) 10%, var(--bg)); border-top: 0; position: relative; }
.foot::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 6px; background: linear-gradient(90deg, var(--blue), var(--yellow)); }
.foot__col b { color: var(--blue); }

@media (min-width: 900px) {
  .frame { grid-template-columns: 0.85fr 1.4fr; grid-template-rows: 1fr auto; }
  .frame__head { grid-row: 1 / span 2; padding: 56px 44px; display: flex; flex-direction: column; justify-content: center; }
  .frame__list { padding: 18px 44px; }
  .frame__foot { padding: 24px 44px; }
}
@media (max-width: 719px) {
  .frame { box-shadow: 8px 8px 0 0 var(--yellow); margin-inline-end: 8px; }
  .frame__head { padding: 30px 22px; }
  .frame__list { padding: 6px 20px; }
  .frame__list li { font-size: 17px; }
  .frame__list li::before { width: 38px; font-size: 21px; }
  .frame__foot { padding: 20px; }
  .recs-band { padding: 80px 0 90px; }
}

/* גרסה 5: מקטע "למי זה מתאים" עם רקע מודגש וקצה חד */
.fit-band { position: relative; padding: 150px 0 120px; background: color-mix(in srgb, var(--yellow) 22%, var(--bg)); clip-path: polygon(0 60px, 100% 0, 100% 100%, 0 100%); margin-top: -10px; }
.fit-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--blue) 22%, transparent) 1.4px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.fit-band::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 66px; background: var(--blue); clip-path: polygon(0 60px, 100% 0, 100% 6px, 0 66px); }
.fit-band .wrap { position: relative; }
.fit-band .fit__no { background: rgb(255 255 255 / .55); border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.fit-band .fit__yes { border-color: var(--blue); }
.fit-band .eyebrow { color: var(--blue); }
@media (max-width: 719px) {
  .fit-band { padding: 110px 0 90px; clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); }
  .fit-band::after { height: 40px; clip-path: polygon(0 34px, 100% 0, 100% 6px, 0 40px); }
}

/* =========================================================
   גרסה 6: המלצות בציטוט מתחלף, כרטיס קורס בולט, כותרת תחתונה קטנה
   ========================================================= */

/* המלצות: ציטוט אחד גדול עם עיטור ברקע */
.spot { position: relative; overflow: hidden; padding: 110px 0 120px; background: var(--bg); }
.spot__bg { position: absolute; inset: 0; pointer-events: none; }
.spot__bg svg { position: absolute; width: 520px; height: 520px; fill: none; stroke: color-mix(in srgb, var(--yellow) 45%, transparent); stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.spot__bg svg:first-child { top: -170px; right: -170px; animation: spin 90s linear infinite; }
.spot__bg svg:last-child { bottom: -200px; left: -160px; stroke: color-mix(in srgb, var(--blue) 30%, transparent); animation: spin 120s linear infinite reverse; }
.spot__bg::before { content: ""; position: absolute; left: 50%; top: 52%; width: 760px; height: 420px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--yellow) 16%, transparent), transparent); }
.spot__bg::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--blue) 16%, transparent) 1.3px, transparent 1.5px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 75%); mask-image: radial-gradient(ellipse at center, transparent 30%, #000 75%); }
.spot .wrap { position: relative; }
.spot__box { position: relative; max-width: 920px; margin: 0 auto; text-align: center; outline: none; }
.spot__mark { font-family: var(--font-head); font-weight: 800; font-size: 170px; line-height: .6; height: 86px; color: var(--yellow); }
.spot__quote { min-height: 4.2em; font-family: var(--font-head); font-weight: 700; font-size: clamp(25px, 3.4vw, 40px); line-height: 1.38; transition: opacity .3s; }
.spot__who { margin-top: 22px; transition: opacity .3s; }
.spot__who b { display: block; font-family: var(--font-head); font-size: 22px; }
.spot__who span { color: var(--muted); }
.spot__bars { display: flex; gap: 8px; max-width: 360px; margin: 20px auto 0; }
.spot__bars button { flex: 1; height: 5px; padding: 0; border: 0; border-radius: 5px; background: var(--line); overflow: hidden; cursor: pointer; position: relative; }
.spot__bars button::before { content: ""; position: absolute; inset: -10px 0; }
.spot__bars i { display: block; height: 100%; width: 0; background: var(--yellow); border-radius: 5px; }
.spot__bars .done i { width: 100%; background: var(--blue); }
.spot__bars .now i { animation: barfill var(--dur, 1.8s) linear forwards; }
.spot__box.paused .spot__bars .now i { animation-play-state: paused; }
@keyframes barfill { from { width: 0; } to { width: 100%; } }
.spot__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.spot__tabs button { font: inherit; font-size: 15px; font-weight: 700; min-height: 44px; padding: 9px 18px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.spot__tabs button:hover { border-color: var(--yellow); }
.spot__tabs button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.spot__pause { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--muted); opacity: 0; transition: opacity .2s; }
.spot__box.paused .spot__pause { opacity: 1; }

/* כרטיס הקורס: עומק קבוע, ועוד יותר במעבר עכבר */
.promo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 45%, transparent), 0 26px 60px -24px color-mix(in srgb, var(--blue) 75%, transparent), 0 0 46px -8px color-mix(in srgb, var(--yellow) 45%, transparent); }
.promo:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--yellow), 0 36px 80px -26px color-mix(in srgb, var(--blue) 85%, transparent), 0 0 70px -6px color-mix(in srgb, var(--yellow) 70%, transparent); }

/* כותרת תחתונה קומפקטית */
.mini { padding: 18px 0 92px; background: color-mix(in srgb, var(--yellow) 10%, var(--bg)); border-top: 4px solid var(--blue); font-size: 14px; color: var(--muted); }
.mini__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.mini__row img { height: 34px; width: auto; }
.mini__links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 700; color: var(--ink); }
.mini__links a:hover { color: var(--accent-d); }
@media (min-width: 900px) { .mini { padding-bottom: 18px; } }
@media (max-width: 719px) {
  .spot { padding: 80px 0 90px; }
  .spot__bg svg { width: 320px; height: 320px; }
  .spot__mark { font-size: 130px; height: 66px; }
  .spot__quote { min-height: 6em; }
  .mini__row { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .spot__bg svg { animation: none; }
}

/* =========================================================
   גרסה 7: טבעות בתלת מימד, מצבים עולים למעלה, שרשור בשלבים, עציץ
   ========================================================= */

/* טבעות הרקע של ההמלצות: מסלולים בעומק */
.spot__bg { perspective: 900px; }
.spot__bg svg { transform-style: preserve-3d; }
.spot__bg svg:first-child { animation: orbitA 26s linear infinite; }
.spot__bg svg:last-child { animation: orbitB 32s linear infinite; }
@keyframes orbitA { from { transform: rotateX(58deg) rotateY(-14deg) rotateZ(0deg); } to { transform: rotateX(58deg) rotateY(-14deg) rotateZ(360deg); } }
@keyframes orbitB { from { transform: rotateX(-52deg) rotateY(18deg) rotateZ(360deg); } to { transform: rotateX(-52deg) rotateY(18deg) rotateZ(0deg); } }
.spot__bg svg circle:nth-child(2) { stroke-dasharray: 2 12; }
.spot__bg svg circle:nth-child(3) { stroke-width: 2.5; stroke-dasharray: 1 16; }
.spot { padding-bottom: 150px; }

/* "אתה מזהה את עצמך כאן?" עולה ונכנס לתחתית ההמלצות */
#states { position: relative; z-index: 3; margin-top: -120px; padding-top: 0; }

/* שלושת השלבים: שרשור */
.chain { position: relative; display: none; grid-template-columns: repeat(3, 1fr); margin: 6px 0 22px; --p: 0%; }
.chain__line { position: absolute; top: 50%; inset-inline: 16.66%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--line); overflow: hidden; }
.chain__line i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); background: linear-gradient(90deg, var(--yellow), var(--blue)); border-radius: 4px; transition: width .9s cubic-bezier(.6,0,.2,1); }
.chain__node { position: relative; justify-self: center; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--line); font-family: var(--font-head); font-weight: 800; color: var(--muted); transition: all .5s; }
.chain__node.is-past { border-color: var(--blue); color: var(--blue); }
.chain__node.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in srgb, var(--yellow) 22%, transparent), 0 10px 26px -6px color-mix(in srgb, var(--yellow) 70%, transparent); }
.steps--3d { perspective: 1100px; }
.steps--3d .step, .js .steps--3d .step.rv.in { transform-origin: 50% 100%; transform: rotateX(10deg) translateZ(-18px); opacity: .62; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s, box-shadow .5s; }
.steps--3d .step.is-past, .js .steps--3d .step.rv.in.is-past { opacity: .8; }
.steps--3d .step.is-on, .js .steps--3d .step.rv.in.is-on { transform: rotateX(0) translateZ(26px) translateY(-6px); opacity: 1; box-shadow: 0 30px 60px -26px color-mix(in srgb, var(--blue) 80%, transparent), 0 0 0 2px color-mix(in srgb, var(--yellow) 60%, transparent); }
.steps--3d .step .step__num { transition: color .5s; color: color-mix(in srgb, var(--yellow) 45%, #fff); }
.steps--3d .step.is-on .step__num { color: var(--yellow); }
@media (min-width: 1000px) { .chain { display: grid; } }

/* כרטיס הקורס: בלי קו טורקיז, רק הילה */
.promo { box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--blue) 75%, transparent), 0 0 52px -6px color-mix(in srgb, var(--yellow) 55%, transparent); }
.promo:hover { box-shadow: 0 36px 80px -26px color-mix(in srgb, var(--blue) 85%, transparent), 0 0 90px 0 color-mix(in srgb, var(--yellow) 75%, transparent); }

/* עציץ ביצירת קשר */
.calm__info { position: relative; overflow: hidden; }
.calm__info > *:not(.calm__plant) { position: relative; z-index: 1; }
.calm__plant { position: absolute; z-index: 0; left: 14px; bottom: 0; width: 150px; height: auto; opacity: .95; pointer-events: none; }
.calm__branch path { fill: none; stroke: color-mix(in srgb, #fff 55%, var(--blue)); stroke-width: 2; stroke-linecap: round; }
.calm__leaves circle { fill: #D9DE8A; }
.calm__vase { fill: #F1E8DA; }
.calm__plate { fill: color-mix(in srgb, #000 25%, var(--blue)); }
.calm__branch { transform-origin: 90px 170px; animation: sway 7s ease-in-out infinite; }
.calm__leaves { transform-origin: 90px 170px; animation: sway 7s ease-in-out infinite; }
@keyframes sway { 50% { transform: rotate(-2.2deg); } }
@media (max-width: 899px) { .calm__plant { width: 110px; left: 8px; opacity: .55; } }

@media (max-width: 719px) {
  #states { margin-top: -80px; }
  .spot { padding-bottom: 120px; }
  .steps--3d .step, .js .steps--3d .step.rv.in { transform: none; opacity: .7; }
  .steps--3d .step.is-on, .js .steps--3d .step.rv.in.is-on { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spot__bg svg, .calm__branch, .calm__leaves { animation: none; }
  .steps--3d .step, .js .steps--3d .step.rv.in { transform: none; opacity: 1; }
}

/* =========================================================
   גרסה 8: רקע שקט להמלצות, מרווח למצבים, שלבים ברצף, קורס עם הנפשה, תמונת עציץ
   ========================================================= */

/* המלצות: בלי טבעות. רק הילה רכה ורשת נקודות, בלי תנועה */
.spot__bg svg { display: none; }
.spot { padding-bottom: 120px; }

/* "אתה מזהה את עצמך כאן?" עם מרווח */
#states { margin-top: 0; padding-top: 30px; padding-bottom: 110px; }

/* שלבים: מצב סיום, כל השלושה דולקים ושטוחים */
#process.steps-done .steps--3d .step, #process.steps-done .js .steps--3d .step.rv.in, .js #process.steps-done .steps--3d .step.rv.in { transform: none; opacity: 1; box-shadow: var(--shadow-card); }
#process.steps-done .step .step__num { color: var(--yellow); }

/* כרטיס הקורס: צל רגיל, ובמעבר עכבר הנפשה */
.promo { position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.promo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform: skewX(-18deg); pointer-events: none; }
.promo:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); }
.promo:hover::after { animation: shine 1s ease forwards; }
@keyframes shine { to { left: 130%; } }
.promo__go { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.promo:hover .promo__go { transform: translateX(-10px); }
.promo__tag { transition: transform .35s; }
.promo:hover .promo__tag { animation: nudge .6s ease; }
@keyframes nudge { 30% { transform: rotate(-6deg) scale(1.08); } 60% { transform: rotate(4deg) scale(1.04); } }
.promo__title { transition: color .3s; }
.promo:hover .promo__title { color: var(--blue); }

/* תמונת העציץ ביצירת קשר */
.calm__photo { min-height: 260px; background: #EADFCF; }
.calm__photo img { display: block; width: 100%; height: 100%; max-height: 360px; object-fit: cover; object-position: 50% 30%; }
@media (min-width: 1100px) {
  .calm__card { grid-template-columns: 1.1fr 1fr .7fr; max-width: 1240px; }
  .calm__photo img { max-height: none; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .calm__photo { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  #states { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo:hover::after, .promo:hover .promo__tag { animation: none; }
}

/* =========================================================
   גרסה 9: פס מונפש, עציץ בין הטורקיז ללבן
   ========================================================= */

/* פס ההדגשה תחת "את עצמך כאן?" נמתח פנימה */
.frame__head .title em {
  background: linear-gradient(color-mix(in srgb, var(--yellow) 80%, transparent), color-mix(in srgb, var(--yellow) 80%, transparent)) no-repeat;
  background-position: 100% 88%;
  background-size: 0% 32%;
  transition: background-size 1.1s cubic-bezier(.65,0,.25,1) .45s;
}
.frame.in .frame__head .title em, html:not(.js) .frame__head .title em { background-size: 100% 32%; }

/* יצירת קשר: חוזרים לשני חלקים, והעציץ עומד על הקו ביניהם */
.calm__card { position: relative; }
.calm__photo { display: none; }
.calm__plant-img { position: relative; z-index: 2; display: block; width: 150px; height: auto; margin: -150px 0 -40px 18px; justify-self: end; pointer-events: none; filter: drop-shadow(0 18px 22px rgb(0 0 0 / .22)); }
@media (min-width: 900px) {
  .calm__card { grid-template-columns: 1.1fr 1fr; max-width: 1120px; overflow: visible; }
  .calm__info { border-radius: 0 36px 36px 0; }
  .calm__form { border-radius: 36px 0 0 36px; }
  .calm__plant-img { position: absolute; margin: 0; width: 210px; bottom: -6px; left: 47.6%; translate: -50% 0; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .calm__plant-img { width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame__head .title em { transition: none; background-size: 100% 32%; }
}
.calm__info { order: 1; } .calm__plant-img { order: 2; } .calm__form { order: 3; }
@media (max-width: 899px) {
  .calm__plant-img { width: 130px; margin: -120px 0 -78px 14px; }
  .calm__form { padding-top: 40px; }
}
@media (min-width: 900px) {
  .calm__info { padding-inline-end: 120px; }
  .calm__form { padding-inline-start: 110px; }
}
@media (max-width: 899px) {
  .calm__plant-img { width: 120px; margin: -168px 0 0 12px; }
  .calm__info { padding-bottom: 40px; }
  .calm__form { padding-top: 32px; }
}

/* =========================================================
   גרסה 10: יצירת קשר - טורקיז מעל הטופס, ותמונת העציץ משמאל לשניהם
   ========================================================= */
.calm__plant-img { display: none !important; }
.calm__card { display: grid; grid-template-columns: 1fr; overflow: hidden; max-width: 1180px; }
.calm__info, .calm__form { border-radius: 0 !important; }
.calm__info { order: 1; padding-inline-end: 36px; padding-bottom: 40px; }
.calm__form { order: 2; padding: 40px 36px 44px; border: 0 !important; }
.calm__side { order: 3; position: relative; min-height: 280px; background: #EADFCF; }
.calm__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }

@media (min-width: 900px) {
  .calm__card { grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; overflow: hidden; }
  .calm__info { grid-column: 1; grid-row: 1; padding: 48px 52px 40px; }
  .calm__form { grid-column: 1; grid-row: 2; padding: 40px 52px 48px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; align-content: start; }
  .calm__form .lead__title, .calm__form .lead__field:nth-of-type(4), .calm__form .lead__submit, .calm__form .lead__msg, .calm__form .lead__done { grid-column: 1 / -1; }
  .calm__side { grid-column: 2; grid-row: 1 / span 2; min-height: 0; }
  .calm__rows { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .calm__rows li:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 899px) {
  .calm__side { min-height: 300px; }
}
.calm__card { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
@media (min-width: 900px) { .calm__info .calm__sub { max-width: 60ch; } .calm__rows { margin-top: 20px; } }

/* =========================================================
   גרסה 11: "אתה מזהה את עצמך כאן?" - כותרת בצד ורשימה בכרטיס
   ========================================================= */
.who { background: color-mix(in srgb, var(--yellow) 10%, var(--bg)); padding: 110px 0; margin-top: 0 !important; }
.who__grid { display: grid; gap: 34px; align-items: start; max-width: 1120px; }
.who__side p { margin-top: 14px; font-size: 18px; color: var(--muted); max-width: 36ch; }
.who__side .btn { margin-top: 24px; }

/* פס ההדגשה נמתח פנימה */
.draw .title em {
  background: linear-gradient(color-mix(in srgb, var(--yellow) 55%, transparent), color-mix(in srgb, var(--yellow) 55%, transparent)) no-repeat;
  background-position: 100% 88%; background-size: 0% 32%;
  transition: background-size 1.1s cubic-bezier(.65,0,.25,1) .45s;
}
.draw.in .title em, html:not(.js) .draw .title em { background-size: 100% 32%; }

/* הכרטיס: לבן, רך, עם עלה-כתם עדין מאחור */
.who__card { position: relative; }
.who__card::before { content: ""; position: absolute; z-index: 0; width: 220px; height: 220px; top: -40px; left: -40px; border-radius: 44% 56% 62% 38% / 48% 40% 60% 52%; background: color-mix(in srgb, var(--yellow) 22%, transparent); }
.who__card::after { content: ""; position: absolute; z-index: 0; width: 160px; height: 160px; bottom: -36px; right: -30px; border-radius: 56% 44% 38% 62% / 40% 52% 48% 60%; background: var(--p-sand); }
.who__list { position: relative; z-index: 1; display: grid; gap: 6px; padding: 18px; border-radius: 32px; background: #fff; box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--blue) 55%, transparent); }
.who__list li { display: flex; align-items: center; gap: 16px; padding: 15px 16px; border-radius: 20px; font-size: 18px; font-weight: 500; line-height: 1.45; transition: background-color .25s, transform .25s; }
.who__list li:nth-child(odd) { background: color-mix(in srgb, var(--yellow) 6%, #fff); }
.who__list li:hover { background: color-mix(in srgb, var(--yellow) 14%, #fff); transform: translateX(-4px); }
.who__list li::before {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 12px;
  background: var(--blue) no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--blue) 80%, transparent);
}

@media (min-width: 1000px) {
  .who__grid { grid-template-columns: .85fr 1.3fr; gap: 64px; }
  .who__side { position: sticky; top: 130px; }
}
@media (max-width: 719px) {
  .who { padding: 80px 0; }
  .who__list { padding: 10px; }
  .who__list li { font-size: 17px; padding: 13px 12px; gap: 12px; }
  .who__list li::before { width: 30px; height: 30px; border-radius: 10px; background-size: 14px; }
  .who__card::before { width: 150px; height: 150px; left: -24px; }
  .who__card::after { right: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .draw .title em { transition: none; background-size: 100% 32%; }
  .who__list li:hover { transform: none; }
}
#states.who { padding: 110px 0; margin-top: 0; }
@media (max-width: 719px) { #states.who { padding: 80px 0; } }
.who { overflow-x: clip; }

/* גרסה 12: כתמים אסימטריים בטורקיז בלבד, וגל קטן על הווים */
.who__card::before { width: 240px; height: 200px; top: -46px; left: -44px; border-radius: 62% 38% 54% 46% / 44% 58% 42% 56%; background: color-mix(in srgb, var(--yellow) 24%, transparent); }
.who__card::after { width: 190px; height: 150px; bottom: -40px; right: -34px; border-radius: 38% 62% 44% 56% / 58% 40% 60% 42%; background: color-mix(in srgb, var(--blue) 18%, transparent); }

.who__list li::before { animation: tickwave 3.2s ease-in-out infinite; }
.who__list li:nth-child(2)::before { animation-delay: .18s; }
.who__list li:nth-child(3)::before { animation-delay: .36s; }
.who__list li:nth-child(4)::before { animation-delay: .54s; }
.who__list li:nth-child(5)::before { animation-delay: .72s; }
.who__list li:nth-child(6)::before { animation-delay: .9s; }
.who__list li:nth-child(7)::before { animation-delay: 1.08s; }
.who__list li:nth-child(8)::before { animation-delay: 1.26s; }
@keyframes tickwave { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-3px) rotate(-6deg); } 40% { transform: translateY(1px) rotate(3deg); } }
@media (max-width: 719px) {
  .who__card::before { width: 160px; height: 140px; left: -24px; top: -30px; }
  .who__card::after { width: 130px; height: 110px; right: -18px; bottom: -26px; }
}
@media (prefers-reduced-motion: reduce) { .who__list li::before { animation: none; } }

/* גרסה 13: הווים שקטים, וכרטיס אסימטרי אחד מאחור שקצותיו נעים בעדינות */
.who__list li::before { animation: none !important; }
.who__card::after { display: none; }
.who__card::before {
  width: auto; height: auto; inset: -22px 26px 30px -26px; top: -22px; left: -26px;
  border-radius: 46px 30px 52px 28px / 34px 48px 30px 50px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--yellow) 34%, #fff) 0%, color-mix(in srgb, var(--yellow) 18%, #D9DEDF) 55%, #CFD6D8 100%);
  transform: rotate(-2.5deg);
  animation: backmorph 9s ease-in-out infinite;
}
@keyframes backmorph {
  0%, 100% { border-radius: 46px 30px 52px 28px / 34px 48px 30px 50px; transform: rotate(-2.5deg); }
  33% { border-radius: 30px 50px 34px 48px / 48px 30px 50px 32px; transform: rotate(-2deg) translate(2px, -2px); }
  66% { border-radius: 52px 34px 40px 36px / 30px 44px 46px 30px; transform: rotate(-3deg) translate(-2px, 1px); }
}
@media (max-width: 719px) {
  .who__card::before { inset: -14px 14px 22px -12px; top: -14px; left: -12px; }
}
@media (prefers-reduced-motion: reduce) { .who__card::before { animation: none; } }

/* =========================================================
   גרסה 14
   ========================================================= */

/* "אתה מזהה" - אותו רקע מנוקד כמו "חכם, מודע", והקו באלכסון הפוך */
#states.who { position: relative; padding: 150px 0 120px; background: color-mix(in srgb, var(--yellow) 22%, var(--bg)); clip-path: polygon(0 0, 100% 60px, 100% 100%, 0 100%); }
#states.who::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--blue) 22%, transparent) 1.4px, transparent 1.6px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
#states.who::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 66px; background: var(--blue); clip-path: polygon(0 0, 100% 60px, 100% 66px, 0 6px); pointer-events: none; }
#states.who .wrap { position: relative; z-index: 1; }
#states.who .eyebrow { color: var(--blue); }

/* שלבים: עומק ושרשור גם בטלפון */
.chain { display: grid; }
@media (max-width: 999px) {
  .chain { margin: 0 0 18px; }
  .chain__node { width: 36px; height: 36px; font-size: 15px; border-width: 2px; }
  .chain__node.is-on { transform: scale(1.15); box-shadow: 0 0 0 6px color-mix(in srgb, var(--yellow) 22%, transparent); }
  .chain__line { height: 3px; margin-top: -1.5px; }
  .steps--3d { perspective: 700px; gap: 14px; }
  .steps--3d .step, .js .steps--3d .step.rv.in { transform-origin: 50% 100%; transform: rotateX(16deg) translateZ(-14px); opacity: .62; padding: 20px 20px; gap: 6px; }
  .steps--3d .step.is-past, .js .steps--3d .step.rv.in.is-past { opacity: .8; }
  .steps--3d .step.is-on, .js .steps--3d .step.rv.in.is-on { transform: rotateX(0) translateZ(18px) translateY(-3px); opacity: 1; }
  .js #process.steps-done .steps--3d .step.rv.in { transform: none; opacity: 1; }
  .step__num { font-size: 44px; }
  .step h3 { font-size: 21px; }
  .step p { font-size: 16px; margin-top: 4px; }
}

/* יצירת קשר: כל השורה לחיצה, והאייקון אסימטרי ונושם */
.calm__rows li { padding: 0; }
.calm__row { display: flex; align-items: center; gap: 16px; padding: 12px 0; color: #fff; }
.calm__row b { display: block; font-size: 18px; font-weight: 700; }
.calm__row:hover b { color: var(--accent-l); }
.calm__ic { border-radius: 58% 42% 50% 50% / 46% 56% 44% 54%; animation: icmorph 6s ease-in-out infinite; transition: transform .25s; }
.calm__rows li:nth-child(2) .calm__ic { animation-delay: -1.5s; }
.calm__rows li:nth-child(3) .calm__ic { animation-delay: -3s; }
.calm__rows li:nth-child(4) .calm__ic { animation-delay: -4.5s; }
.calm__row:hover .calm__ic { transform: scale(1.1) rotate(-6deg); }
@keyframes icmorph {
  0%, 100% { border-radius: 58% 42% 50% 50% / 46% 56% 44% 54%; }
  33% { border-radius: 44% 56% 42% 58% / 56% 44% 58% 42%; }
  66% { border-radius: 52% 48% 60% 40% / 42% 52% 48% 58%; }
}
@media (max-width: 719px) {
  #states.who { padding: 110px 0 90px; clip-path: polygon(0 0, 100% 34px, 100% 100%, 0 100%); }
  #states.who::after { height: 40px; clip-path: polygon(0 0, 100% 34px, 100% 40px, 0 6px); }
}
@media (prefers-reduced-motion: reduce) { .calm__ic { animation: none; } }

/* גרסה 15: הילה אחידה סביב כל כרטיס יצירת הקשר */
.calm__card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 10%, transparent), 0 0 60px -12px color-mix(in srgb, var(--blue) 45%, transparent), 0 0 120px -30px color-mix(in srgb, var(--yellow) 45%, transparent) !important; }
.calm { padding-top: 70px; padding-bottom: 120px; }

/* =========================================================
   גרסה 16
   ========================================================= */

/* מעבר מדורג מהטורקיז של "אתה מזהה" ללבן של "קצת עליי" */
#states.who { background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 22%, var(--bg)) 0%, color-mix(in srgb, var(--yellow) 22%, var(--bg)) 55%, color-mix(in srgb, var(--yellow) 10%, var(--bg)) 80%, var(--bg) 100%); padding-bottom: 170px; }

/* אייקוני יצירת קשר: עיגול רגיל, ונקודת אור עדינה שעוברת עליהם */
.calm__ic { border-radius: 50% !important; animation: none !important; position: relative; overflow: hidden; }
.calm__ic svg { position: relative; z-index: 1; }
.calm__ic::after { content: ""; position: absolute; width: 60%; height: 60%; top: -30%; left: -30%; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .75), rgb(255 255 255 / 0) 70%); opacity: 0; animation: glint 5s ease-in-out infinite; }
.calm__rows li:nth-child(2) .calm__ic::after { animation-delay: 1.2s; }
.calm__rows li:nth-child(3) .calm__ic::after { animation-delay: 2.4s; }
.calm__rows li:nth-child(4) .calm__ic::after { animation-delay: 3.6s; }
@keyframes glint { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 40% { transform: translate(160%, 160%); opacity: 0; } 100% { transform: translate(160%, 160%); opacity: 0; } }

/* שלבים: יותר מרווח בין ציר הזמן לכרטיסים במחשב */
@media (min-width: 1000px) { .chain { margin: 6px 0 52px; } }

/* שלבים בטלפון: ציר אנכי לאורך הכרטיסים */
.timeline { position: relative; }
@media (max-width: 999px) {
  .timeline { padding-inline-start: 50px; }
  .chain { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 36px; margin: 0; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); row-gap: 14px; }
  .chain__node { align-self: center; }
  .chain__line { top: 16.66%; bottom: 16.66%; inset-inline: auto; inset-inline-start: 50%; width: 3px; height: auto; margin: 0 -1.5px 0 0; }
  .chain__line i { inset-inline: 0; inset-block-start: 0; inset-block-end: auto; width: 100%; height: var(--p); background: linear-gradient(180deg, var(--yellow), var(--blue)); transition: height .9s cubic-bezier(.6,0,.2,1); }
}
@media (prefers-reduced-motion: reduce) { .calm__ic::after { animation: none; } }

/* גרסה 17: "קצת עליי" קרוב יותר, ונצנוץ עדין בכפתור השליחה */
#states.who { padding-bottom: 120px; }
#about { padding-top: 56px; }
@media (max-width: 719px) { #states.who { padding-bottom: 90px; } #about { padding-top: 44px; } }

.calm__form .lead__submit { position: relative; overflow: hidden; isolation: isolate; }
.calm__form .lead__submit > span { position: static; }
.calm__form .lead__submit::before,
.calm__form .lead__submit::after,
.calm__form .lead__submit > span::before {
  content: ""; position: absolute; z-index: -1; width: 46px; height: 46px; top: -30px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 70%);
  opacity: 0; pointer-events: none; animation: btnglint 6s ease-in-out infinite;
}
.calm__form .lead__submit::before { right: 16%; }
.calm__form .lead__submit::after { right: 48%; animation-delay: 2s; }
.calm__form .lead__submit > span::before { right: 80%; animation-delay: 4s; }
@keyframes btnglint { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 34% { transform: translate(-40px, 70px); opacity: 0; } 100% { transform: translate(-40px, 70px); opacity: 0; } }
@media (max-width: 719px) {
  .calm__form .lead__submit::before { right: 22%; }
  .calm__form .lead__submit::after { right: 66%; animation-delay: 3s; }
  .calm__form .lead__submit > span::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .calm__form .lead__submit::before, .calm__form .lead__submit::after, .calm__form .lead__submit > span::before { animation: none; }
}

/* גרסה 18: בלי נצנוץ קבוע בכפתור השליחה, רק פס אור חלש במעבר עכבר */
.calm__form .lead__submit::before, .calm__form .lead__submit > span::before { content: none !important; animation: none !important; display: none !important; }
.calm__form .lead__submit::after {
  content: ""; animation: none; opacity: 1; z-index: -1;
  top: 0; bottom: 0; right: auto; left: -60%; width: 40%; height: auto; border-radius: 0;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .22), transparent);
  transform: skewX(-18deg);
}
.calm__form .lead__submit:hover::after { animation: shine 1s ease forwards; }

/* =========================================================
   גרסה 19: מרכז הלמידה
   ========================================================= */

/* כפתור בתפריט */
.btn--line { color: var(--ink); border: 2px solid color-mix(in srgb, var(--blue) 45%, transparent); background: #fff; }
.btn--line:hover { border-color: var(--blue); color: var(--blue); }
.nav__learn svg { width: 18px; height: 18px; }
.nav__learn-short { display: none; }
@media (max-width: 719px) {
  .nav__wa { display: none; }
  .nav__learn { padding: 8px 12px; gap: 6px; }
  .nav__learn-long { display: none; }
  .nav__learn-short { display: inline; }
  .nav__actions .btn--accent { padding: 9px 14px; }
}
@media (max-width: 359px) { .nav__learn svg { display: none; } }

/* כפתור עם פס אור במעבר עכבר */
.btn--sweep { position: relative; overflow: hidden; isolation: isolate; }
.btn--sweep::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .22), transparent); transform: skewX(-18deg); pointer-events: none; }
.btn--sweep:hover::after { animation: shine 1s ease forwards; }

/* המקטע */
.learn { padding: 100px 0 110px; }
.lc { display: grid; gap: 18px; }
.lc__card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 28px 26px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-card); color: var(--ink); transition: transform .3s, box-shadow .3s; }
.lc__card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .5), transparent); transform: skewX(-18deg); pointer-events: none; }
.lc__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); }
.lc__card:hover::after { animation: shine 1s ease forwards; }
.lc__card:hover .lc__title { color: var(--blue); }
.lc__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--accent-soft); color: var(--blue); margin-bottom: 6px; }
.lc__ic svg { width: 24px; height: 24px; }
.lc__tag { position: absolute; top: 22px; left: 22px; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, #fff); color: var(--blue); font-size: 13px; font-weight: 700; }
.lc__title { font-family: var(--font-head); font-weight: 800; font-size: 22px; line-height: 1.25; transition: color .3s; }
.lc__text { color: var(--muted); font-size: 16px; }
.lc__card--book { background: color-mix(in srgb, var(--yellow) 10%, #fff); }

/* הכרטיס המרכזי: הקורס ההיברידי */
.lc__card--main { justify-content: flex-end; min-height: 280px; padding: 34px 32px; color: #fff; background: radial-gradient(500px 300px at 85% 0%, color-mix(in srgb, var(--blue) 65%, var(--yellow)) 0%, transparent 70%), var(--blue); }
.lc__card--main::after { background: linear-gradient(100deg, transparent, rgb(255 255 255 / .22), transparent); }
.lc__card--main .lc__tag { background: var(--yellow); color: var(--ink); }
.lc__card--main .lc__kind { font-size: 14px; font-weight: 700; color: var(--accent-l); }
.lc__card--main .lc__title { font-size: clamp(28px, 3vw, 36px); }
.lc__card--main:hover .lc__title { color: var(--accent-l); }
.lc__card--main .lc__text { color: var(--on-dark); font-size: 17px; max-width: 36ch; }
.lc__go { margin-top: 10px; font-weight: 800; transition: transform .35s; display: inline-block; }
.lc__card--main:hover .lc__go { transform: translateX(-8px); }
.lc__cta { display: flex; justify-content: center; margin-top: 40px; }

@media (min-width: 720px) { .lc { grid-template-columns: 1fr 1fr; } .lc__card--main { grid-column: 1 / -1; } }
@media (min-width: 1000px) {
  .lc { grid-template-columns: 1.25fr 1fr 1fr; }
  .lc__card--main { grid-column: 1; grid-row: 1 / span 2; min-height: 0; }
}
@media (max-width: 719px) { .learn { padding: 80px 0 90px; } .lc__card { padding: 24px 22px; } }
@media (prefers-reduced-motion: reduce) { .lc__card:hover::after, .btn--sweep:hover::after { animation: none; } .lc__card:hover { transform: none; } }
@media (max-width: 719px) {
  .nav__actions { gap: 6px; }
  .nav__actions .btn--accent { padding: 8px 12px; font-size: 14px; }
  .nav__learn { padding: 7px 10px; font-size: 14px; }
}
.lc__card--main .lc__tag { position: static; align-self: flex-start; margin-bottom: 8px; }

/* =========================================================
   גרסה 20: מרכז הלמידה בסגנון "בית מדרש" - כהה, זהב, קשתות
   ========================================================= */
@font-face { font-family: "Talent"; src: url("assets/fonts/talent-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Talent"; src: url("assets/fonts/talent-black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
.gate { --g-ink: #0A2426; --g-gold: #C9A45C; --g-text: #F3EBDD; --g-muted: color-mix(in srgb, #F3EBDD 68%, #0A2426); --g-line: color-mix(in srgb, #C9A45C 32%, transparent);
  position: relative; margin-top: 230px; padding: 0 0 120px; background: var(--g-ink); color: var(--g-text); }
.gate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(900px 420px at 50% 0%, color-mix(in srgb, var(--yellow) 16%, transparent), transparent 70%); }
.gate .wrap { position: relative; z-index: 1; }

/* הקשת: פתח שנכנסים דרכו */
.gate__arch { position: absolute; left: 50%; bottom: calc(100% - 1px); width: min(980px, 90%); height: 230px; translate: -50% 0; background: var(--g-ink); border-radius: 999px 999px 0 0 / 230px 230px 0 0; overflow: hidden; }
.js .gate__arch.rv { opacity: 1; transform: none; }
.gate__glow { position: absolute; inset: 0; background: radial-gradient(60% 90% at 50% 100%, color-mix(in srgb, var(--yellow) 30%, transparent), transparent 70%); opacity: .25; transition: opacity 1.6s ease .2s; }
.gate__line { position: absolute; inset: 16px 16px -2px; border: 1px solid var(--g-gold); border-bottom: 0; border-radius: 999px 999px 0 0 / 214px 214px 0 0; opacity: 0; transform: scale(.96); transform-origin: 50% 100%; transition: opacity 1.2s ease .3s, transform 1.4s cubic-bezier(.2,.7,.2,1) .3s; }
.gate__arch.in .gate__glow { opacity: 1; }
.gate__arch.in .gate__line { opacity: .7; transform: none; }

/* הכותרת יושבת בתוך הקשת */
.gate__head { margin-top: -150px; margin-bottom: 54px; position: relative; z-index: 2; }
.gate .eyebrow { color: var(--g-gold); letter-spacing: .06em; }
.gate .eyebrow::before, .gate .eyebrow::after { content: "◆"; font-size: 9px; margin: 0 10px; vertical-align: middle; opacity: .8; }
.gate .title { font-family: "Talent", var(--font-head); font-weight: 900; color: var(--g-text); font-size: clamp(40px, 6vw, 68px); }
.gate .title em { background: none; color: var(--g-gold); padding: 0; }
.gate .head__sub { color: var(--g-muted); }

/* הכרטיסים: קשתות עם אותיות */
.gate .lc__ic { display: none; }
.gate .lc__card { align-items: center; text-align: center; padding: 34px 24px 28px; border-radius: 999px 999px 12px 12px / 110px 110px 12px 12px; border: 1px solid var(--g-line); background: linear-gradient(180deg, color-mix(in srgb, var(--g-gold) 10%, transparent), color-mix(in srgb, #fff 2%, transparent) 70%); box-shadow: none; color: var(--g-text); }
.gate .lc__card::after { background: linear-gradient(100deg, transparent, rgb(201 164 92 / .18), transparent); }
.gate .lc__card:hover { transform: translateY(-6px); border-color: var(--g-gold); box-shadow: 0 24px 50px -26px rgb(0 0 0 / .8), 0 0 40px -14px rgb(201 164 92 / .45); }
.gate .lc__card:hover .lc__title { color: var(--g-gold); }
.gate .lc__letter { display: block; font-family: "Talent", var(--font-head); font-weight: 900; font-size: 54px; line-height: 1; color: var(--g-gold); margin-bottom: 4px; }
.gate .lc__tag { position: static; align-self: center; margin-bottom: 4px; background: transparent; border: 1px solid var(--g-line); color: var(--g-gold); }
.gate .lc__title { font-family: "Talent", var(--font-head); font-weight: 700; font-size: 24px; color: var(--g-text); }
.gate .lc__text { color: var(--g-muted); }
.gate .lc__card--book { background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 75%); }

/* הכרטיס המרכזי */
.gate .lc__card--main { justify-content: center; border-radius: 999px 999px 14px 14px / 190px 190px 14px 14px; border-color: color-mix(in srgb, var(--g-gold) 60%, transparent); background: radial-gradient(70% 60% at 50% 18%, color-mix(in srgb, var(--yellow) 26%, transparent), transparent 70%), linear-gradient(180deg, #0E4F52, #0B3436); padding: 56px 32px 36px; }
.gate .lc__card--main .lc__letter { font-size: 76px; }
.gate .lc__card--main .lc__tag { background: var(--g-gold); color: var(--g-ink); border-color: var(--g-gold); }
.gate .lc__card--main .lc__kind { color: var(--g-gold); }
.gate .lc__card--main .lc__title { font-size: clamp(30px, 3.2vw, 40px); font-weight: 900; }
.gate .lc__card--main .lc__text { color: color-mix(in srgb, #F3EBDD 80%, #0E4F52); max-width: 32ch; }
.gate .lc__go { color: var(--g-gold); }

/* כפתור זהב */
.btn--gold { color: var(--g-ink, #0A2426); background: #C9A45C; border-radius: 10px; box-shadow: 0 12px 30px -12px rgb(201 164 92 / .6); }
.btn--gold:hover { background: #D6B36C; }
.gate .lc__cta { margin-top: 48px; }

@media (max-width: 719px) {
  .gate { margin-top: 140px; padding-bottom: 90px; }
  .gate__arch { width: 94%; height: 140px; border-radius: 999px 999px 0 0 / 140px 140px 0 0; }
  .gate__line { inset: 10px 10px -2px; border-radius: 999px 999px 0 0 / 130px 130px 0 0; }
  .gate__head { margin-top: -90px; margin-bottom: 36px; }
  .gate .lc__card { border-radius: 999px 999px 12px 12px / 80px 80px 12px 12px; }
  .gate .lc__card--main { border-radius: 999px 999px 12px 12px / 120px 120px 12px 12px; padding: 44px 22px 30px; }
  .gate .lc__card--main .lc__letter { font-size: 60px; }
}
@media (prefers-reduced-motion: reduce) { .gate__glow, .gate__line { transition: none; opacity: 1; transform: none; } }
.gate > .wrap { display: flow-root; }

/* =========================================================
   גרסה 21: מרכז הלמידה משתלב - צבע אחד רציף, אור אחד רציף, מעבר רך החוצה
   ========================================================= */
.gate { --g-ink: #0C3A3D; background: var(--g-ink); padding-bottom: 210px; }
.gate__arch { background: var(--g-ink); }

/* אור אחד: חציו בתוך הקשת וחציו במקטע, באותו מרכז ובאותה מידה, כך שאין תפר */
.gate__glow { background: radial-gradient(460px 280px at 50% 100%, color-mix(in srgb, var(--yellow) 30%, transparent), transparent 100%); opacity: .35; }
.gate::after { background: radial-gradient(460px 280px at 50% 0%, color-mix(in srgb, var(--yellow) 30%, transparent), transparent 100%); opacity: .35; transition: opacity 1.6s ease .2s; inset: 0 0 auto 0; height: 300px; }
.gate:has(.gate__arch.in)::after { opacity: 1; }

/* מעבר רך מהכהה לבהיר בתחתית, כמו בשאר האתר */
.gate::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--g-ink) 55%, var(--bg)) 55%, var(--bg)); pointer-events: none; z-index: 0; }

/* שפת האתר בתוך המקטע: מרקר טורקיז בכותרת, כפתור טורקיז */
.gate .title em { color: var(--g-text); background: linear-gradient(transparent 58%, color-mix(in srgb, var(--yellow) 70%, transparent) 58%, color-mix(in srgb, var(--yellow) 70%, transparent) 92%, transparent 92%); padding: 0 .12em; }
.gate .btn--gold { color: var(--ink); background: linear-gradient(135deg, var(--accent-l), var(--yellow)); border-radius: 999px; box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--yellow) 70%, transparent); }
.gate .btn--gold:hover { background: linear-gradient(135deg, var(--accent-l), var(--yellow)); }
.gate .lc__card { border-color: color-mix(in srgb, var(--yellow) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--yellow) 10%, transparent), color-mix(in srgb, #fff 3%, transparent) 70%); }
.gate .lc__card:hover { border-color: var(--g-gold); }
.gate .lc__card--main { background: radial-gradient(70% 60% at 50% 18%, color-mix(in srgb, var(--yellow) 28%, transparent), transparent 70%), linear-gradient(180deg, #0E4F52, #0B3E41); }
@media (max-width: 719px) {
  .gate { padding-bottom: 170px; }
  .gate__glow { background: radial-gradient(240px 160px at 50% 100%, color-mix(in srgb, var(--yellow) 30%, transparent), transparent 100%); }
  .gate::after { background: radial-gradient(240px 160px at 50% 0%, color-mix(in srgb, var(--yellow) 30%, transparent), transparent 100%); height: 180px; }
  .gate::before { height: 130px; }
}
@media (prefers-reduced-motion: reduce) { .gate::after { transition: none; opacity: 1; } }

/* גרסה 22: מעבר ארוך ורך מהכהה של מרכז הלמידה לבהיר */
.gate { padding-bottom: 340px; }
.gate::before {
  height: 360px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 0%, transparent) 0%,
    color-mix(in srgb, var(--bg) 3%, transparent) 12%,
    color-mix(in srgb, var(--bg) 9%, transparent) 24%,
    color-mix(in srgb, var(--bg) 19%, transparent) 36%,
    color-mix(in srgb, var(--bg) 33%, transparent) 48%,
    color-mix(in srgb, var(--bg) 50%, transparent) 60%,
    color-mix(in srgb, var(--bg) 68%, transparent) 72%,
    color-mix(in srgb, var(--bg) 84%, transparent) 84%,
    color-mix(in srgb, var(--bg) 95%, transparent) 93%,
    var(--bg) 100%);
}
#faq { padding-top: 0; }
@media (max-width: 719px) {
  .gate { padding-bottom: 260px; }
  .gate::before { height: 270px; }
}
.gate::before { bottom: -2px; } .gate { margin-bottom: -2px; }

/* גרסה 23: מעבר טבעי - מהטורקיז העמוק, דרך הטורקיז הבהיר של האתר, אל השמנת. והשאלות עולות לתוך המעבר */
.gate { padding-bottom: 430px; }
.gate::before {
  bottom: -2px; height: 560px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--g-ink) 100%, transparent) 0%,
    color-mix(in srgb, var(--g-ink) 96%, #DCEFEC) 10%,
    color-mix(in srgb, var(--g-ink) 86%, #DCEFEC) 20%,
    color-mix(in srgb, var(--g-ink) 70%, #DCEFEC) 30%,
    color-mix(in srgb, var(--g-ink) 50%, #DCEFEC) 40%,
    color-mix(in srgb, var(--g-ink) 30%, #DCEFEC) 50%,
    color-mix(in srgb, var(--g-ink) 15%, #DCEFEC) 60%,
    color-mix(in srgb, #DCEFEC 70%, var(--bg)) 72%,
    color-mix(in srgb, #DCEFEC 35%, var(--bg)) 85%,
    color-mix(in srgb, #DCEFEC 10%, var(--bg)) 94%,
    var(--bg) 100%);
}
/* השאלות הנפוצות מתחילות כבר בתוך החלק הבהיר של המעבר */
#faq { position: relative; z-index: 2; margin-top: -250px; padding-top: 0; }
@media (max-width: 719px) {
  .gate { padding-bottom: 330px; }
  .gate::before { height: 430px; }
  #faq { margin-top: -180px; }
}

/* =========================================================
   גרסה 24: הרקע מתבהר כבר מאזור הכרטיסים, והשאלות על שמנת נקייה
   ========================================================= */
.gate::before { display: none; }
.gate {
  padding-bottom: 150px; margin-bottom: 0;
  background: linear-gradient(180deg,
    var(--g-ink) 0%,
    var(--g-ink) 26%,
    color-mix(in srgb, var(--g-ink) 92%, #DCEFEC) 36%,
    color-mix(in srgb, var(--g-ink) 78%, #DCEFEC) 46%,
    color-mix(in srgb, var(--g-ink) 58%, #DCEFEC) 56%,
    color-mix(in srgb, var(--g-ink) 36%, #DCEFEC) 66%,
    color-mix(in srgb, var(--g-ink) 16%, #DCEFEC) 76%,
    color-mix(in srgb, #DCEFEC 60%, var(--bg)) 87%,
    color-mix(in srgb, #DCEFEC 20%, var(--bg)) 95%,
    var(--bg) 100%);
}
/* הכרטיסים מקבלים רקע מלא משלהם, כדי שיישארו קריאים גם כשהרקע מתבהר */
.gate .lc__card { background: linear-gradient(180deg, #125455, #0C4043); border-color: color-mix(in srgb, var(--g-gold) 45%, transparent); box-shadow: 0 26px 50px -30px rgb(6 40 42 / .7); }
.gate .lc__card--book { background: linear-gradient(180deg, #145B5B, #0D4447); }
.gate .lc__card--main { box-shadow: 0 30px 60px -30px rgb(6 40 42 / .8); }
/* השאלות חוזרות להתחיל על שמנת נקייה */
#faq { margin-top: 0; padding-top: 70px; }
@media (max-width: 719px) {
  .gate { padding-bottom: 110px; }
  #faq { margin-top: 0; padding-top: 50px; }
}

/* =========================================================
   גרסה 25: שאלות קרובות יותר, פס אור אוטומטי, ועומק במעבר עכבר
   ========================================================= */
.gate { padding-bottom: 90px; }
#faq { padding-top: 24px; }
@media (max-width: 719px) { .gate { padding-bottom: 70px; } #faq { padding-top: 16px; } }

/* פס האור עובר לבד, כל כמה שניות, כל כרטיס בזמן אחר */
.gate .lc__card::after { animation: shineAuto 10s ease-in-out infinite; }
.gate .lc__card:nth-child(2)::after { animation-delay: 2s; }
.gate .lc__card:nth-child(3)::after { animation-delay: 4s; }
.gate .lc__card:nth-child(4)::after { animation-delay: 6s; }
.gate .lc__card:nth-child(5)::after { animation-delay: 8s; }
.gate .lc__card:hover::after { animation: shineAuto 10s ease-in-out infinite; }
.gate .lc__card:nth-child(2):hover::after { animation-delay: 2s; }
.gate .lc__card:nth-child(3):hover::after { animation-delay: 4s; }
.gate .lc__card:nth-child(4):hover::after { animation-delay: 6s; }
.gate .lc__card:nth-child(5):hover::after { animation-delay: 8s; }
@keyframes shineAuto { 0%, 82% { left: -60%; } 96%, 100% { left: 130%; } }

/* במעבר עכבר: הכרטיס יוצא קדימה בעומק */
.gate .lc { perspective: 1200px; }
.gate .lc__card { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .4s; }
.gate .lc__card:hover { transform: translateY(-10px) rotateX(7deg) scale(1.025); border-color: var(--g-gold); box-shadow: 0 40px 70px -30px rgb(4 30 32 / .9), 0 0 0 1px color-mix(in srgb, var(--g-gold) 50%, transparent), 0 0 50px -12px rgb(201 164 92 / .45); }
.gate .lc__letter { transition: transform .5s cubic-bezier(.2,.7,.2,1), text-shadow .5s; }
.gate .lc__card:hover .lc__letter { transform: translateY(-4px) scale(1.12); text-shadow: 0 8px 22px rgb(201 164 92 / .45); }
@media (prefers-reduced-motion: reduce) {
  .gate .lc__card::after, .gate .lc__card:hover::after { animation: none; }
  .gate .lc__card:hover { transform: none; }
  .gate .lc__card:hover .lc__letter { transform: none; }
}