/* ==========================================================================
   YP Athletic Center — דף נחיתה (עברית / RTL)
   מבוסס על העיצוב המקורי של "Armoured Landing.dc.html" — אותה שפה עיצובית.
   ========================================================================== */

/* ---------- פונטים: פעמון ---------- */
@font-face {
  font-family: 'Paamon Black';
  src: url('paamon-black-aaa.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: 'Paamon Light';
  src: url('paamon-light-aaa.woff2') format('woff2');
  font-weight: 300 400;
  font-display: swap;
}

:root {
  --pink:        #e51a52;
  --pink-bright: #ff2d63;
  --pink-deep:   #c40e44;
  --pink-hover:  #b00d3f;
  --maroon:      #8f0a31;
  --maroon-2:    #5c0a22;
  --ink:         #12101a;
  --ink-2:       #16141d;
  --ink-3:       #0d0b13;
  --ink-text:    #1b1722;
  --gray-text:   #4a4552;
  --gray-mute:   #8b8592;
  --gray-soft:   #b3adba;

  /* פעמון שחור לכותרות מודגשות, פעמון לייט לכל השאר.
     Anton/Barlow נשארים כגיבוי לאותיות לטיניות (YP וכו'). */
  --f-display: 'Paamon Black', 'Anton', sans-serif;
  --f-body:    'Paamon Light', 'Barlow', sans-serif;
  --f-cond:    'Paamon Light', 'Barlow Condensed', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { margin: 0; padding: 0; background: #ffffff; }

body {
  font-family: var(--f-body);
  color: var(--ink-text);
}

img { display: block; max-width: 100%; }

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-hover); }

.page {
  width: 100%;
  min-width: 1280px;
  overflow: hidden;
  background: #ffffff;
}

/* ---------- כפתורים ---------- */
.btn {
  display: inline-block;
  font-family: var(--f-cond);
  letter-spacing: 1px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--dark {
  background: var(--ink-3);
  color: #ffffff;
  font-size: 15px;
  padding: 12px 54px;
  border: 1px solid rgba(255,255,255,0.35);
}
.btn--dark:hover { background: var(--pink); color: #ffffff; border-color: var(--pink); }

.btn--sm { font-size: 13px; letter-spacing: 0.5px; padding: 6px 22px; }

.btn--ghost {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.5);
  color: #ffffff;
}
.btn--ghost:hover { background: var(--pink); color: #ffffff; border-color: var(--pink); }

.btn--white {
  background: #ffffff;
  color: var(--pink-deep);
  padding: 6px 26px;
}
.btn--white:hover { background: var(--ink-2); color: #ffffff; }

/* ---------- מעוינים דקורטיביים ---------- */
.diamond {
  position: absolute;
  transform: rotate(45deg);
  display: block;
}
.diamond--pink { border: 8px solid var(--pink); }
.diamond--dark { border: 22px solid var(--ink-2); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  height: 760px;
  /* padding עליון לפינוי מקום ל-Header הקבוע; padding (ולא margin על ילד)
     מונע margin-collapse שיצר פס לבן מעל ההירו. box-sizing:border-box → הגובה נשמר */
  padding-top: 96px;
  /* מעל המקטע הלבן — כדי שהחץ הוורוד והמתאמן שגולשים למטה ייראו על הרקע הלבן */
  z-index: 1;
  /* מידות המתאמן — משמשות גם לחישוב מיקום ההשתקפות */
  --athlete-w: 680px;   /* רוחב התמונה */
  --athlete-drop: 220px; /* כמה התמונה גולשת מתחת להירו */
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.3) contrast(1.1);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(18,16,26,0.55) 0%,
    rgba(64,8,28,0.65) 55%,
    rgba(18,16,26,0.9) 100%);
}
.hero__chevron {
  position: absolute;
  /* גולש 150px מתחת להירו — חוד החץ יוצא אל המשטח הלבן */
  inset: 0 0 -150px 0;
  background: linear-gradient(120deg, #ff2d63 0%, #c40e44 55%, #8f0a31 100%);
  clip-path: polygon(0 10%, 50% 61.8%, 100% 10%, 100% 43.4%, 50% 98.5%, 0 43.4%);
  /* אטום לגמרי — כדי שהחוד שגולש אל הלבן יהיה באותו גוון בדיוק וייראה כחלק אחד עם החץ */
  opacity: 1;
  /* צל רך לחץ — בולט במיוחד היכן שהחוד נכנס אל המשטח הלבן, ונותן עומק */
  filter: drop-shadow(0 16px 26px rgba(120, 6, 38, 0.42));
}
.hero__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(60deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 45%);
  clip-path: polygon(0 12%, 50% 74%, 100% 12%, 100% 22%, 50% 86%, 0 22%);
}

/* ==========================================================================
   ניווט פרימיום — Header קבוע + Overlay אדום מלא מסך
   ========================================================================== */

/* --- Header קבוע: לוגו + המבורגר, mix-blend-difference לקריאות מעל כל רקע --- */
.site-header {
  /* absolute (ולא fixed) — ה-Header גולל יחד עם העמוד ומופיע רק למעלה,
     כך שהלוגו הלבן לא נבלע מעל המקטעים הלבנים בזמן גלילה */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* row-reverse: מהפך את הסדר הוויזואלי בלבד — הלוגו עובר לשמאל וכפתור התפריט לימין */
  flex-direction: row-reverse;
  /* ללא רקע — ה-Header פשוט צף מעל תוכן העמוד */
  padding: 10px 20px;
}
.site-header__brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
/* הלוגו בצבעיו המקוריים (לבן + אדום). צל עדין לשמירה על קריאות מעל כל רקע */
.site-header__logo {
  height: 64px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.site-header__menu {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #ffffff;
}
.site-header__menu-label {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.site-header__menu-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.site-header__menu-bars span {
  display: block;
  width: 28px;
  height: 2px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- Overlay מלא מסך — clip-path מתגלגל מלמטה למעלה --- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #DC2626;
  display: flex;
  flex-direction: column;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear .5s;
}
.nav-overlay.is-open {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-overlay.is-closing {
  visibility: visible;
  transition: clip-path .5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-overlay__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}
.nav-overlay__brand {
  display: flex;
  align-items: center;
  line-height: 0;
}
/* על רקע אדום מלא הופכים את הלוגו ללבן אחיד — כדי שגם ה-YP האדום שבו יישאר קריא */
.nav-overlay__logo {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.nav-overlay__close {
  display: flex;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #ffffff;
}

/* --- קישורים — כניסה מדורגת (stagger) --- */
.nav-overlay__nav {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(2px, 0.8vh, 10px);
  padding: 6px 20px;
  overflow-y: auto;
}
.nav-overlay__link {
  font-family: var(--f-display);
  /* מתכווץ לפי גובה המסך כדי שכל הקטגוריות ייכנסו בלי גלילה */
  font-size: clamp(26px, 5.4vh, 40px);
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(40px);
  transition: color .3s ease, letter-spacing .3s ease;
}
.nav-overlay.is-open .nav-overlay__link {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.15s),
    transform .5s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0.15s),
    color .3s ease,
    letter-spacing .3s ease;
}
/* בזמן הסגירה הקישורים נשארים גלויים — ה-clip-path "מגלגל" אותם החוצה */
.nav-overlay.is-closing .nav-overlay__link {
  opacity: 1;
  transform: none;
}
.nav-overlay__link:hover {
  color: #000000;
  letter-spacing: 0.05em;
}

/* --- שורת פוטר: טלפון, אינסטגרם, מיקום --- */
.nav-overlay__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  padding: 32px 20px;
  font-family: var(--f-body);
  font-size: 14px;
  color: rgba(255,255,255,0.9);
}
.nav-overlay__footer a {
  color: rgba(255,255,255,0.9);
  transition: color .3s ease;
}
.nav-overlay__footer a:hover { color: #000000; }
.nav-overlay__sep { opacity: 0.5; }

@media (min-width: 768px) {
  .site-header { padding: 10px 40px; }
  .site-header__logo { height: 78px; }
  .nav-overlay__logo { height: 56px; }
  .site-header__menu-label { font-size: 14px; }
  .nav-overlay__top { padding: 12px 40px; }
  .nav-overlay__nav { gap: clamp(3px, 1.1vh, 12px); }
  .nav-overlay__link { font-size: clamp(30px, 5.8vh, 56px); }
  .nav-overlay__footer { padding: 28px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-overlay.is-open,
  .nav-overlay.is-closing,
  .nav-overlay.is-open .nav-overlay__link { transition: none; }
}

/* ---------- טקסט ראשי ---------- */
.hero__copy {
  position: relative;
  isolation: isolate;
  /* מעל המתאמן — שהכפתור לא יוסתר על ידי הראש */
  z-index: 4;
  text-align: center;
  margin-top: 46px;
}
/* מגן כהה רך מאחורי הטקסט — משפר קריאות מעל השברון הוורוד בכל גודל מסך */
.hero__copy::before {
  content: '';
  position: absolute;
  inset: -40px -6vw -30px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(65% 72% at 50% 42%, rgba(8,6,12,0.62) 0%, rgba(8,6,12,0.28) 45%, rgba(8,6,12,0) 78%);
}
.hero__eyebrow {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 30px;
  color: #ffffff;
  letter-spacing: 1px;
}
.hero__title {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 128px;
  line-height: 1;
  letter-spacing: 0;
  /* צבע גיבוי לדפדפנים שלא תומכים בגרדיאנט על טקסט */
  color: #f9a825;
  /* אותו גרדיאנט זהב כמו במקטע "מרימים את הרף" למטה */
  background-image: linear-gradient(165deg, #ffd35c 0%, #f9a825 45%, #a85f05 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* אותו צל כמו קודם, אבל כ-drop-shadow: text-shadow היה נצבע מעל הגרדיאנט */
  filter:
    drop-shadow(0 4px 0 rgba(0,0,0,0.4))
    drop-shadow(0 12px 34px rgba(0,0,0,0.6));
}
.hero__lede {
  max-width: 560px;
  margin: 18px auto 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.9);
}
.hero__copy .btn { margin-top: 24px; }

/* ---------- דמות ההירו ---------- */
.hero__athlete {
  position: absolute;
  left: 50%;
  /* נמוך — הראש מציץ רק קצת מעל הכפתור; הידיים נכנסות אל המשטח הלבן */
  bottom: calc(-1 * var(--athlete-drop));
  transform: translateX(-50%);
  width: var(--athlete-w);
  z-index: 3;
  /* שתי שכבות צל: צל קרוב וחד יותר לתחושת נפח, וצל רחב ורך לעומק מעל הרקע */
  filter:
    drop-shadow(0 14px 16px rgba(0,0,0,0.42))
    drop-shadow(0 42px 46px rgba(0,0,0,0.34));
}

/* ---------- השתקפות המתאמן על ה"רצפה" הלבנה ----------
   עותק הפוך של אותה תמונה בדיוק (התמונה לא נחתכה כלל).
   בתמונה המקורית יש שוליים שקופים מתחת לדמות, ולכן המיקום מחושב כך
   שקו ה"רצפה" (תחתית האגרופים והידיות) של ההשתקפות נצמד לתחתית הדמות. */
.hero__athlete-reflection {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * (var(--athlete-drop) + var(--athlete-w) * 0.4533));
  width: var(--athlete-w);
  transform: translateX(-50%) scaleY(-1);
  z-index: 2;
  pointer-events: none;
  filter: blur(1.4px);
  /* המסכה נכתבת במרחב המקומי (לפני ההיפוך): 84% = קו הרצפה.
     לכן ההשתקפות חזקה בצמוד לדמות ודוהה ככל שמתרחקים ממנה כלפי מטה. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 45%,
    rgba(0,0,0,0.08) 60%,
    rgba(0,0,0,0.28) 74%,
    rgba(0,0,0,0.42) 84%,
    rgba(0,0,0,0.42) 100%);
  mask-image: linear-gradient(to bottom,
    transparent 45%,
    rgba(0,0,0,0.08) 60%,
    rgba(0,0,0,0.28) 74%,
    rgba(0,0,0,0.42) 84%,
    rgba(0,0,0,0.42) 100%);
}

/* ==========================================================================
   צור קשר — כותרת + טופס
   ========================================================================== */
.consult {
  position: relative;
  background: #ffffff;
  padding: 380px 0 70px;
}
.consult__d1 { right: 6%;  top: 34%; width: 70px; height: 70px; border-width: 12px; }
.consult__d2 { right: 11%; top: 56%; width: 34px; height: 34px; border-width: 7px; }
.consult__d3 { left: -40px; top: 46%; width: 130px; height: 130px; }
.consult__d4 { left: 8%;  top: 26%; width: 40px; height: 40px; }

.consult__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
}
.consult__figure { width: 150px; filter: grayscale(1); }
.consult__headings { text-align: center; padding-bottom: 6px; }
.consult__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--f-cond);
  font-size: 22px;
  color: var(--ink-text);
}
.consult__rule {
  width: 70px;
  height: 2px;
  background: var(--ink-text);
  display: inline-block;
}
.consult__title {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 74px;
  line-height: 1.05;
  color: var(--pink);
  letter-spacing: 0;
}
.consult__sub {
  text-align: center;
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 300;
  color: var(--gray-text);
  letter-spacing: 0.2px;
}
.consult__sub a { font-weight: 600; }

/* ---------- טופס יצירת קשר ---------- */
.contact-form {
  position: relative;
  max-width: 640px;
  margin: 34px auto 0;
  background: #ffffff;
  border: 1px solid #f0e9ec;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(22,20,29,0.12), 0 4px 14px rgba(229,26,82,0.06);
  padding: 30px 34px;
  z-index: 2;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field { display: block; margin-bottom: 16px; }
.field__label {
  display: block;
  font-family: var(--f-cond);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--gray-text);
  margin-bottom: 6px;
}
.field__input {
  width: 100%;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink-text);
  background: #faf8f9;
  border: 1px solid #e9e2e6;
  border-radius: 12px;
  padding: 12px 16px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field__input::placeholder { color: var(--gray-soft); }
.field__input:focus {
  border-color: var(--pink);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(229,26,82,0.12);
}
.field__input--area { resize: vertical; min-height: 84px; }
.contact-form__submit {
  width: 100%;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 13px 54px;
}
.contact-form__success {
  margin: 6px 0 0;
  text-align: center;
  font-family: var(--f-cond);
  font-size: 20px;
  color: var(--pink);
}

/* ==========================================================================
   כרטיסי האימונים
   ========================================================================== */
.programs {
  display: flex;
  justify-content: center;
  gap: 34px;
  padding: 40px 40px 60px;
}
.card {
  position: relative;
  width: 370px;
  height: 230px;
  background: #ffffff;
  overflow: visible;
}
.card--dark { border: 9px solid var(--ink-2); }
.card--pink {
  border: 9px solid var(--pink);
  background: linear-gradient(180deg, #ffffff, #ffe6ee);
  box-shadow: 0 18px 40px rgba(229,26,82,0.25);
}
.card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__label {
  position: absolute;
  right: -30px;
  bottom: 20px;
  z-index: 2;
  text-align: right;
}
.card__label-main {
  display: block;
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1.1;
  text-shadow: 2px 2px 0 #ffffff, -2px -2px 0 #ffffff, 2px -2px 0 #ffffff, -2px 2px 0 #ffffff;
}
.card__label-main--dark { color: var(--ink-2); }
.card__label-main--pink { color: var(--pink); }
.card__label-sub {
  display: block;
  font-family: var(--f-cond);
  font-size: 17px;
  color: var(--ink-2);
  margin-right: 4px;
  text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
}

/* ==========================================================================
   באנר — חייגו / הצטרפו
   ========================================================================== */
.banner {
  position: relative;
  display: flex;
  margin: 0 40px 70px;
  height: 130px;
}
.banner__half {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.banner__half--dark { background: var(--ink-2); }
.banner__half--pink { background: linear-gradient(100deg, #5c0a22, #c40e44); }
.banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}
.banner__bg--lum { opacity: 0.3; mix-blend-mode: luminosity; }
.banner__tint--dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(143,10,49,0.75), rgba(22,20,29,0.85));
}
.banner__kicker {
  position: relative;
  margin: 0;
  font-family: var(--f-cond);
  font-size: 16px;
  color: #ffffff;
}
.banner__title {
  position: relative;
  margin: -6px 0 0;
  font-family: var(--f-display);
  font-size: 30px;
  color: #ffffff;
}
.banner .btn { position: relative; }

/* תג מרכזי */
.banner__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) rotate(45deg);
  width: 74px;
  height: 74px;
  background: var(--ink-2);
  border: 5px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.banner__play {
  transform: rotate(-45deg);
  display: flex;
  gap: 3px;
}
.tri { width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.tri--left  { border-right: 14px solid #ffffff; }
.tri--right { border-left: 14px solid #ffffff; }

/* ==========================================================================
   שעות ומיקום
   ========================================================================== */
.location {
  position: relative;
  display: flex;
  margin: 0 40px 70px;
  min-height: 480px;
  box-shadow: 0 24px 60px rgba(22,20,29,0.18);
}
.location__info {
  position: relative;
  flex: 0 0 46%;
  background: var(--ink-2);
  color: #ffffff;
  padding: 44px 52px;
  overflow: hidden;
}
.location__info::after {
  content: '';
  position: absolute;
  left: -70px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border: 26px solid rgba(229,26,82,0.25);
  transform: rotate(45deg);
}
.location__kicker {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 16px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
}
.location__title {
  margin: 2px 0 12px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  color: var(--pink);
}
.location__status {
  display: inline-block;
  font-family: var(--f-cond);
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 4px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.location__status.is-open   { background: rgba(46,204,113,0.15); color: #2ecc71; border: 1px solid rgba(46,204,113,0.5); }
.location__status.is-closed { background: rgba(229,26,82,0.15);  color: #ff6b93; border: 1px solid rgba(229,26,82,0.5); }

.hours {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  position: relative;
  z-index: 1;
}
.hours__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
  padding: 6px 0;
}
.hours__dots {
  flex: 1;
  border-bottom: 1px dotted rgba(255,255,255,0.25);
}
.hours__time { font-weight: 400; }
.hours__row.is-today {
  color: #ffffff;
  font-weight: 600;
}
.hours__row.is-today > span:first-child::after {
  content: ' •';
  color: var(--pink);
}

.location__details { position: relative; z-index: 1; }
.location__line {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
}
.location__line strong { font-weight: 600; color: #ffffff; }
.location__line a { color: #ff6b93; }
.location__line a:hover { color: #ffffff; }
.location__pluscode { color: rgba(255,255,255,0.5); font-size: 13px; }
.location__nav-btn { margin-top: 12px; position: relative; z-index: 1; }

.location__map {
  flex: 1;
  background: #e8e2e6;
}
.location__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  filter: grayscale(0.25) contrast(1.05);
}

/* ==========================================================================
   מרימים את הרף (חזרה)
   ========================================================================== */
.repeat {
  position: relative;
  padding: 30px 0 40px;
}
.repeat__d {
  top: -10px;
  left: 4%;
  width: 44px;
  height: 44px;
  border-width: 9px;
}
.repeat__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}
.repeat__img {
  width: 300px;
  margin-left: 0;
  position: relative;
  z-index: 1;
  border: 9px solid var(--ink-2);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.repeat__copy { position: relative; z-index: 2; text-align: center; padding-bottom: 10px; }
.repeat__eyebrow {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 24px;
  color: var(--pink);
  letter-spacing: 2px;
}
.repeat__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 88px;
  line-height: 1.05;
  letter-spacing: 0;
  /* צבע גיבוי לדפדפנים שלא תומכים בגרדיאנט על טקסט */
  color: #b8700a;
  /* גרדיאנט זהב: מתחיל בהיר למעלה ומתכהה כלפי מטה */
  background-image: linear-gradient(165deg, #ffd35c 0%, #f9a825 45%, #a85f05 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* drop-shadow ולא text-shadow: text-shadow היה נצבע מעל הגרדיאנט ומלכלך את האותיות */
  filter: drop-shadow(0 3px 4px rgba(120, 74, 4, 0.22));
}
/* פס קטן מתחת לכותרת — באותו גרדיאנט זהב */
.repeat__title::after {
  content: "";
  display: block;
  width: 96px;
  height: 6px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, #ffd35c, #a85f05);
  border-radius: 3px;
}

/* ==========================================================================
   רצועת אינסטגרם
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 210px;
}
.gallery__cell { overflow: hidden; }
.gallery__cell--dark   { background: var(--ink-2); }
.gallery__cell--darker { background: var(--ink-3); }
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.is-gray { filter: grayscale(1) contrast(1.05); }

.gallery__cell--insta {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #eee7ea;
  transition: background .2s ease;
}
.gallery__cell--insta:hover { background: #fff5f8; }
.gallery__label {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--gray-mute);
}
.gallery__mark {
  width: 64px;
  height: 64px;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink-2);
}
.gallery__mark-img {
  width: 142%;
  height: 142%;
  max-width: none;
  object-fit: cover;
  transform: rotate(-45deg);
  flex-shrink: 0;
}
.gallery__handle {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-style: italic;
  font-size: 12px;
  color: var(--gray-soft);
}

/* ==========================================================================
   פוטר
   ========================================================================== */
.footer {
  position: relative;
  display: flex;
  min-height: 210px;
}
.footer__half {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* החצי הראשון (כהה) מוצג פיזית מימין ב-RTL — הריפוד המוגדל פונה למרכז */
.footer__half--dark { background: var(--ink-2); padding: 34px 34px 34px 120px; }
.footer__logo { height: 76px; width: auto; display: block; margin-bottom: 6px; object-fit: contain; }
.footer__half--pink {
  background: linear-gradient(100deg, #e51a52, #c40e44);
  padding: 34px 120px 34px 34px;
  gap: 12px;
}
.footer__kicker {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 15px;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7);
}
.footer__half--pink .footer__kicker { color: rgba(255,255,255,0.85); }
.footer__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 34px;
  color: #ffffff;
}
.footer__half--dark .btn { margin-top: 6px; background: transparent; }
.footer__half--dark .btn:hover { background: #ffffff; color: var(--ink-2); border-color: #ffffff; }

.footer__social { display: flex; gap: 18px; margin-top: 4px; }
.social {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  transition: background .2s ease, color .2s ease;
}
.social:hover { background: #ffffff; color: var(--pink-deep); }
.ig-glyph {
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ig-dot { width: 5px; height: 5px; border: 2px solid #ffffff; border-radius: 50%; }
.social--ig:hover .ig-glyph { border-color: var(--pink-deep); }
.social--ig:hover .ig-dot { border-color: var(--pink-deep); }

/* תג מרכזי — בקרוב */
.footer__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-54%) rotate(45deg);
  width: 150px;
  height: 150px;
  background: #ffffff;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  overflow: hidden;
}
.footer__badge-inner { transform: rotate(-45deg); text-align: center; }
.footer__badge-imgs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.footer__badge-imgs img { width: 46px; height: 46px; object-fit: cover; }
.footer__badge-text {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.footer__badge-soon {
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--pink);
}

/* ---------- שורת זכויות ---------- */
.legal {
  background: #ffffff;
  text-align: center;
  padding: 14px 0;
  font-family: var(--f-cond);
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--gray-mute);
}

/* ==========================================================================
   רספונסיביות — העיצוב הוא קנבס 1280px; מתחת לזה הפריסה נערמת בצורה נעימה.
   ========================================================================== */
@media (max-width: 1280px) {
  .page { min-width: 0; }

  .hero__title { font-size: clamp(64px, 12vw, 128px); }
  /* המשתנים מתעדכנים והשתקפות מתמקמת אוטומטית לפי אותה נוסחה */
  .hero { --athlete-w: 58vw; --athlete-drop: 19vw; }
  .hero__chevron { inset: 0 0 -11vw 0; }

  .consult { padding: 34vw 24px 60px; }
  .consult__title { font-size: 9vw; }
  .consult__d3 { left: -20px; }

  .programs { flex-wrap: wrap; }

  .location { flex-direction: column; }
  .location__info { flex: none; }
  .location__map iframe { min-height: 340px; }

  /* בטווח הביניים נערום את מקטע "מרימים את הרף" כדי שהכותרת לא תשב על התמונה */
  .repeat__inner { flex-direction: column; gap: 22px; }
  .repeat__title { font-size: 64px; }
  .repeat__img { width: 320px; margin-left: 0; }
}

@media (max-width: 760px) {
  .hero { height: auto; padding-bottom: 40vw; }
  .hero__chevron { opacity: 0.72; }
  .hero__eyebrow { font-size: 22px; }
  .hero__title { font-size: 17vw; }
  .hero__lede { padding: 0 20px; }

  .consult__figure { display: none; }
  .contact-form { margin-inline: 20px; padding: 22px 20px; }
  .contact-form__row { grid-template-columns: 1fr; gap: 0; }

  .banner { flex-direction: column; height: auto; }
  .banner__half { padding: 34px 20px; min-height: 130px; }
  .banner__badge { display: none; }

  .location { margin: 0 20px 50px; }
  .location__info { padding: 32px 24px; }

  .repeat__inner { flex-direction: column; gap: 20px; }
  .repeat__img { width: 60vw; margin-left: 0; }

  .gallery { grid-template-columns: repeat(2, 1fr); height: auto; grid-auto-rows: 160px; }
  .gallery__cell--insta { grid-column: span 2; padding: 24px 0; }

  .footer { flex-direction: column; }
  .footer__half--dark { padding: 40px 24px; }
  .footer__half--pink { padding: 40px 24px; }
  .footer__badge { position: static; transform: rotate(45deg); margin: -30px auto 20px; }
}

/* ==========================================================================
   אנימציות והנפשות
   - חשיפה בגלילה (data-animate -> in-view)
   - כניסה בטעינת/רענון העמוד (ההירו נחשף מיד)
   - תנועות רקע עדינות (מעוינים צפים, פעימת CTA, זום בתמונות)
   מכובד prefers-reduced-motion: מי שביקש פחות תנועה יראה הכל סטטי ומלא.
   ========================================================================== */

/* פס התקדמות גלילה עליון — scaleX עם origin-right (גדל מימין לשמאל, RTL) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #DC2626;
  z-index: 70;
  transform: scaleX(0);
  transform-origin: right;
}

@media (prefers-reduced-motion: no-preference) {
  /* מצב התחלתי מוסתר — רק כאשר JS פעיל (html.js), כדי שללא JS הכל יוצג */
  html.js [data-animate] {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .8s ease, transform .85s cubic-bezier(.2,.75,.25,1);
    transition-delay: var(--delay, 0s);
    will-change: opacity, transform;
  }
  html.js [data-animate="zoom"]  { transform: scale(.9); }
  html.js [data-animate="fade"]  { transform: translateY(14px); }
  html.js [data-animate="right"] { transform: translateX(60px); }
  html.js [data-animate="left"]  { transform: translateX(-60px); }
  html.js [data-animate].in-view {
    opacity: 1;
    transform: none;
  }

  /* מעוינים דקורטיביים צפים */
  .diamond, .location__info::after {
    animation: floatDiamond 6s ease-in-out infinite;
  }
  .consult__d2 { animation-duration: 5s; }
  .consult__d3 { animation-duration: 7.5s; }
  .consult__d4 { animation-duration: 4.5s; }
  @keyframes floatDiamond {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50%      { transform: rotate(45deg) translate(0, -12px); }
  }

  /* פעימה עדינה סביב כפתור ה-CTA הראשי */
  .hero__copy .btn { animation: ctaPulse 2.8s ease-in-out infinite; }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(229,26,82,0); }
    50%      { box-shadow: 0 0 0 7px rgba(229,26,82,0.14); }
  }

  /* ריחוף על ההירו — עלייה וירידה איטית */
  .hero__athlete { animation: heroFloat 5.5s ease-in-out infinite; }
  @keyframes heroFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-14px); }
  }

  /* ההשתקפות מרחפת בדיוק באותו כיוון כמו הדמות — עולה ויורדת יחד איתה.
     ה-translateY בא אחרי ה-scaleY(-1) ולכן הסימן הפוך: +14px = תזוזה חזותית מעלה. */
  .hero__athlete-reflection {
    animation: heroFloatRef 5.5s ease-in-out infinite, reflectIn .9s ease .5s both;
  }
  @keyframes heroFloatRef {
    0%, 100% { transform: translateX(-50%) scaleY(-1) translateY(0); }
    50%      { transform: translateX(-50%) scaleY(-1) translateY(14px); }
  }
  @keyframes reflectIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* זום בתמונות בעת ריחוף */
  .card__photo { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
  .card:hover .card__photo { transform: scale(1.07); }
  .gallery__img { transition: transform .7s ease, filter .5s ease; }
  .gallery__cell:hover .gallery__img { transform: scale(1.09); }
  .gallery__cell:hover .gallery__img.is-gray { filter: grayscale(0) contrast(1.05); }

  /* בליץ נצנוץ שעובר על השברון של ההירו */
  .hero__sheen { animation: sheenShift 7s ease-in-out infinite; }
  @keyframes sheenShift {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
  }
}

/* ==========================================================================
   מסלולי מנוי
   ========================================================================== */
.btn--pink {
  background: var(--pink);
  color: #ffffff;
  border: 1px solid var(--pink);
  font-size: 15px;
  padding: 12px 40px;
}
.btn--pink:hover { background: var(--pink-hover); border-color: var(--pink-hover); color: #ffffff; }

.pricing {
  position: relative;
  background: #ffffff;
  padding: 74px 40px 84px;
  text-align: center;
}
.pricing__head { margin-bottom: 46px; }
.pricing__kicker {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 22px;
  color: var(--ink-text);
}
.pricing__title {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 66px;
  line-height: 1;
  color: var(--pink);
}
.pricing__grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}
.plan {
  position: relative;
  width: 330px;
  background: #ffffff;
  border: 3px solid var(--ink-2);
  border-radius: 18px;
  padding: 38px 30px 34px;
  text-align: right;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(22,20,29,0.16); }
.plan--featured {
  border-color: var(--pink);
  background: linear-gradient(180deg, #ffffff, #fff5f8);
  box-shadow: 0 26px 60px rgba(229,26,82,0.22);
  transform: translateY(-10px);
}
.plan--featured:hover { transform: translateY(-16px); }
.plan__badge {
  position: absolute;
  top: -15px;
  right: 50%;
  transform: translateX(50%);
  background: var(--pink);
  color: #ffffff;
  font-family: var(--f-cond);
  font-size: 14px;
  letter-spacing: .5px;
  padding: 5px 20px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan__name {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--ink-2);
}
.plan--featured .plan__name { color: var(--pink); }
.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  margin: 10px 0 2px;
}
.plan__amount {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--ink-text);
}
.plan__per { font-family: var(--f-cond); font-size: 16px; color: var(--gray-text); }
.plan__note { margin: 0 0 18px; font-size: 13px; color: var(--gray-mute); }
.plan__features {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  flex: 1;
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 300;
  color: var(--gray-text);
  padding: 9px 0;
  border-bottom: 1px solid #f0eaed;
}
.plan__features li::before {
  content: '✓';
  color: var(--pink);
  font-weight: 700;
  line-height: 1.3;
}
.plan .btn { width: 100%; text-align: center; }

/* ==========================================================================
   כפתור וואטסאפ צף
   ========================================================================== */
.wa-float {
  position: fixed;
  inset-block-end: 22px;
  inset-inline-start: 22px;
  z-index: 40;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(37,211,102,0.45);
  transition: transform .25s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 34px; height: 34px; fill: #ffffff; }

@media (prefers-reduced-motion: no-preference) {
  .wa-float::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37,211,102,0.5);
    animation: waPulse 2.2s infinite;
  }
  @keyframes waPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
}

/* כפתור "אימון ניסיון" צף — בפינה הנגדית לוואטסאפ */
.cta-float {
  position: fixed;
  inset-block-end: 24px;
  inset-inline-end: 22px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff2d63, #c40e44);
  color: #ffffff;
  font-family: var(--f-cond);
  font-size: 16px;
  letter-spacing: 0.4px;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(229,26,82,0.45);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, box-shadow .25s ease;
}
.cta-float.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cta-float:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 36px rgba(229,26,82,0.6); }
.cta-float svg { width: 22px; height: 22px; color: #ffffff; flex-shrink: 0; }

@media (max-width: 760px) {
  .pricing { padding: 56px 20px 64px; }
  .pricing__title { font-size: 48px; }
  .wa-float { width: 54px; height: 54px; inset-block-end: 16px; inset-inline-start: 16px; }
  .wa-float svg { width: 30px; height: 30px; }
  .cta-float { inset-block-end: 18px; inset-inline-end: 16px; padding: 11px 15px; font-size: 14px; gap: 7px; }
  .cta-float svg { width: 19px; height: 19px; }
}

/* ==========================================================================
   כותרת מקטע גנרית (kicker + title) — לשימוש חוזר
   ========================================================================== */
.section-head { text-align: center; }
.section-head__kicker {
  margin: 0;
  font-family: var(--f-cond);
  font-size: 22px;
  color: var(--ink-text);
}
.section-head__title {
  margin: 4px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 62px;
  line-height: 1;
  color: var(--pink);
}

/* ==========================================================================
   מתקנים — סאונה / פילאטיס / חדר שיזוף
   ========================================================================== */
.amenities {
  background: #f7f4f6;
  padding: 74px 40px 80px;
}
.amenities .section-head { margin-bottom: 46px; }
.amenities__grid {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.amenity {
  position: relative;
  width: 320px;
  background: #ffffff;
  border-radius: 18px;
  padding: 0 0 34px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(22,20,29,0.08);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.amenity:hover { transform: translateY(-10px); box-shadow: 0 34px 60px rgba(22,20,29,0.18); }
.amenity__media {
  position: relative;
  height: 210px;
  overflow: hidden;
  margin-bottom: 54px;
}
.amenity__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .5s ease;
}
.amenity__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,16,26,0) 45%, rgba(18,16,26,0.42));
  transition: opacity .4s ease;
}
.amenity:hover .amenity__img { transform: scale(1.09); filter: saturate(1.08); }
.amenity__icon {
  position: absolute;
  /* ממוקם ביחס לכרטיס (ולא ל-media) כדי שלא ייחתך ע"י ה-overflow של ה-media.
     גובה ה-media הוא 210px — המעוין ממורכז על הגבול בין התמונה למלבן הלבן */
  top: 210px;
  margin-top: -34px;
  inset-inline-start: 50%;
  width: 68px;
  height: 68px;
  margin-inline-start: -34px;
  background: linear-gradient(135deg, #ff2d63, #c40e44);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #ffffff;
  box-shadow: 0 12px 26px rgba(229,26,82,0.35);
  transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
  z-index: 2;
}
.amenity:hover .amenity__icon {
  transform: rotate(225deg) scale(1.08);
  box-shadow: 0 16px 34px rgba(229,26,82,0.5);
}
.amenity__icon svg {
  width: 34px;
  height: 34px;
  transform: rotate(-45deg);
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.amenity:hover .amenity__icon svg { transform: rotate(-225deg); }
.amenity__body { padding: 0 30px; }
.amenity__title {
  margin: 0 0 8px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 30px;
  color: var(--ink-2);
}
.amenity__text {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--gray-text);
}

/* ==========================================================================
   בר השייקים והחלבון (Super Effect)
   ========================================================================== */
.protein {
  position: relative;
  overflow: hidden;
  background: radial-gradient(130% 150% at 12% 0%, #40081c 0%, #16141d 55%, #0d0b13 100%);
  padding: 84px 40px;
}
.protein__d1 { position: absolute; top: 40px; left: 8%; width: 40px; height: 40px; border: 8px solid rgba(229,26,82,0.5); transform: rotate(45deg); }
.protein__d2 { position: absolute; bottom: 44px; left: 32%; width: 24px; height: 24px; border: 6px solid rgba(255,255,255,0.2); transform: rotate(45deg); }
.protein__inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  direction: ltr;              /* פריסה קבועה; הטקסט עצמו נשאר RTL */
  display: flex;
  align-items: center;
}
.protein__img {
  position: relative;
  z-index: 2;
  width: 46%;
  max-width: 520px;
  margin-right: -7%;           /* גורם לתמונה לחפוף מעט על הטקסט */
  filter: drop-shadow(0 30px 44px rgba(0,0,0,0.6));
  animation: proteinFloat 6s ease-in-out infinite;
}
@keyframes proteinFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -14px; }
}
.protein__copy {
  position: relative;
  z-index: 1;
  direction: rtl;
  flex: 1;
  text-align: right;
  color: #ffffff;
  padding-inline-start: 3%;
}
.protein__kicker { margin: 0; font-family: var(--f-cond); font-size: 22px; color: #ff6b93; }
.protein__title {
  margin: 6px 0 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 72px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.protein__title span { color: var(--pink); }
.protein__text {
  max-width: 440px;
  margin: 16px 0 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
}
.protein__price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 10px 24px;
}
.protein__price b { font-family: var(--f-display); font-weight: 400; font-size: 30px; color: #ffffff; }
.protein__price span { font-family: var(--f-cond); font-size: 15px; color: rgba(255,255,255,0.8); }
.protein__cta { margin-top: 24px; }

/* ==========================================================================
   ביקורות (פייסבוק)
   ========================================================================== */
.reviews {
  background: #ffffff;
  padding: 74px 40px 84px;
}
.reviews .section-head { margin-bottom: 46px; }
.reviews__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.review {
  width: 340px;
  background: #ffffff;
  border: 1px solid #eee7ea;
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 14px 34px rgba(22,20,29,0.07);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.review:hover { transform: translateY(-5px); box-shadow: 0 24px 46px rgba(22,20,29,0.13); }
.review__stars { color: var(--pink); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.review__text {
  margin: 0 0 20px;
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-text);
  flex: 1;
}
.review__author { display: flex; align-items: center; gap: 12px; }
.review__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff2d63, #c40e44);
  color: #ffffff;
  font-family: var(--f-display);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review__name { margin: 0; font-family: var(--f-cond); font-size: 17px; color: var(--ink-2); }
.review__date { margin: 2px 0 0; font-size: 12.5px; color: var(--gray-mute); }
.review__fb {
  margin-inline-start: auto;
  width: 22px;
  height: 22px;
  fill: #1877f2;
  flex-shrink: 0;
}

/* ==========================================================================
   שאלות ותשובות
   ========================================================================== */
.faq {
  background: #f7f4f6;
  padding: 74px 40px 88px;
}
.faq .section-head { margin-bottom: 40px; }
.faq__list { max-width: 780px; margin: 0 auto; }
.faq__item {
  background: #ffffff;
  border: 1px solid #eee7ea;
  border-radius: 14px;
  margin-bottom: 14px;
  transition: box-shadow .3s ease, border-color .3s ease;
}
.faq__item[open] { box-shadow: 0 16px 34px rgba(22,20,29,0.1); border-color: #f4d1de; }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--f-cond);
  font-size: 20px;
  color: var(--ink-2);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: 0 0 24px; width: 24px; height: 24px; }
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--pink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.faq__icon::before { inset-inline: 2px; height: 3px; top: 50%; margin-top: -1.5px; }
.faq__icon::after  { inset-block: 2px; width: 3px; left: 50%; margin-left: -1.5px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--gray-text);
}
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: faqIn .35s ease; }
  @keyframes faqIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- רספונסיביות למקטעים החדשים ---------- */
@media (max-width: 1000px) {
  .protein__inner { flex-direction: column; direction: rtl; }
  .protein__img { width: 70%; max-width: 420px; margin-right: 0; margin-bottom: 10px; }
  .protein__copy { text-align: center; padding-inline-start: 0; }
  .protein__price, .protein__title, .protein__text { margin-inline: auto; }
  .protein__text { margin-top: 16px; }
}
@media (max-width: 760px) {
  .amenities, .reviews, .faq { padding: 56px 20px 64px; }
  .section-head__title { font-size: 44px; }
  .protein { padding: 60px 20px; }
  .protein__title { font-size: 52px; }
}