/* =====================================================
   BBRAND MEDIA  –  MAIN STYLESHEET  v3
   Design: App-like · Bordeaux gradient · Heebo
   Palette: #3D0C1A (darkest) → #6D1F32 (main) → #9B3356 (light)
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;800;900&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* =====================================================
   ACCESSIBILITY – WCAG 2.1 / תקן ישראלי 5568
===================================================== */

/* Skip to content */
.skip-link {
  position: absolute;
  top: -100px;
  right: 0;
  background: #6D1F32;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0 0 12px 12px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 99999;
  transition: top .2s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Focus visible – ניראות מוקד לכל אלמנט אינטראקטיבי */
*:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #fff !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 5px rgba(255,255,255,.3) !important;
}

/* High contrast mode */
body.high-contrast {
  filter: contrast(1.8) grayscale(.15);
}
body.acc-links a {
  text-decoration: underline !important;
  outline: 2px solid yellow !important;
  outline-offset: 2px;
}
body.acc-no-anim *, body.acc-no-anim *::before, body.acc-no-anim *::after {
  animation: none !important;
  transition: none !important;
}

:root {
  --bd:         #6D1F32;   /* bordeaux main  */
  --bd-d:       #3D0C1A;   /* darkest        */
  --bd-dm:      #4A1422;   /* dark mid       */
  --bd-l:       #8B2942;   /* light          */
  --bd-xl:      #9B3356;   /* lightest       */
  --nude:       #F0D8DF;
  --nude-l:     #F8EEF1;
  --white:      #ffffff;
  --text-on-dark: rgba(255,255,255,.88);
  --text-muted:   rgba(255,255,255,.55);
  --text-dark:    #2B1B1F;
  --text-dark-m:  #5A3D47;
  --text-dark-s:  #8A6572;
  --border-dark:  rgba(255,255,255,.12);
  --border-light: #E8D4D9;
  --radius:     18px;
  --radius-sm:  12px;
  --tr:         all .3s cubic-bezier(.4,0,.2,1);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.25);
  --shadow-card:  0 4px 20px rgba(61,12,26,.15);
  --shadow-h:     0 12px 40px rgba(61,12,26,.28);

  /* The one unified background gradient used across ALL sections */
  --page-bg: linear-gradient(160deg, var(--bd-d) 0%, var(--bd-dm) 25%, var(--bd) 60%, var(--bd-xl) 100%);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Heebo', sans-serif;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text-on-dark);
  overflow-x: hidden;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =====================================================
   REVEAL ANIMATION
===================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* =====================================================
   NAVBAR
===================================================== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 18px 0;
  transition: var(--tr);
}
.navbar.scrolled {
  background: rgba(61,12,26,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 24px rgba(0,0,0,.3);
  padding: 12px 0;
}

.nav-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Logo */
.nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
  letter-spacing: -.4px;
  cursor: default;
}
.logo-bb { color: #fff; }
.logo-m  { color: var(--nude); opacity: .85; }

.nav-links {
  display: flex;
  gap: 24px;
  margin-right: auto;
}
.nav-links a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover { color: #fff; }

.nav-actions { display: flex; align-items: center; gap: 10px; }

.btn-nav-client {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  padding: 8px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-size: .83rem;
  font-weight: 600;
  transition: var(--tr);
}
.btn-nav-client:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.55);
}

.btn-nav-admin {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.45);
  text-decoration: none;
  font-size: .78rem;
  transition: var(--tr);
  flex-shrink: 0;
}
.btn-nav-admin:hover { background: rgba(255,255,255,.16); color: #fff; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-right: auto;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transition: var(--tr);
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(61,12,26,.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 12px 24px 28px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu.open { display: flex; }

.mob-link {
  padding: 14px 0;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  font-size: .97rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mob-link:last-of-type { border-bottom: none; }
.mob-link:hover { color: #fff; }

.mob-cta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  border-radius: 13px;
  padding: 13px 16px;
  text-decoration: none;
  font-weight: 700;
  font-size: .93rem;
  transition: var(--tr);
}
.mob-cta:hover { background: rgba(255,255,255,.2); }

.mob-admin {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.55);
  border-radius: 13px;
  padding: 11px 16px;
  text-decoration: none;
  font-weight: 600;
  font-size: .85rem;
  transition: var(--tr);
}
.mob-admin:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }

/* =====================================================
   SECTION WRAPPERS
   All sections share the same page gradient.
   section-dark = slightly darker glass overlay
   section-mid  = lighter glass overlay
===================================================== */
.section-dark {
  padding: 100px 0;
  text-align: center;
  position: relative;
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.12);
  pointer-events: none;
}
.section-dark > * { position: relative; z-index: 1; }

.section-mid {
  padding: 100px 0;
  text-align: center;
  position: relative;
}

/* =====================================================
   SECTION TYPOGRAPHY HELPERS
===================================================== */
.sec-label {
  display: inline-block;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: var(--nude);
  padding: 5px 18px;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sec-label-sm {
  display: inline-block;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.75);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sec-title {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 2.7rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.25;
  letter-spacing: -.5px;
}
.sec-title-lg {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.25;
  text-align: right;
  letter-spacing: -.5px;
}
.sec-accent { color: var(--nude); }

.sec-sub {
  font-size: .97rem;
  color: rgba(255,255,255,.65);
  max-width: 580px;
  margin: 0 auto 52px;
  line-height: 1.78;
}
.sec-sub-dark {
  font-size: .97rem;
  color: rgba(255,255,255,.65);
  max-width: 580px;
  margin: 0 auto 52px;
  line-height: 1.78;
  text-align: center;
}

.sec-cta { text-align: center; margin-top: 52px; }

/* =====================================================
   BUTTONS
===================================================== */
.btn-white-burg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--bd);
  padding: 14px 32px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 700;
  font-size: .93rem;
  transition: var(--tr);
  border: none;
  cursor: pointer;
}
.btn-white-burg:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255,255,255,.2);
}

.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #fff;
  padding: 14px 26px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 700;
  font-size: .93rem;
  transition: var(--tr);
  margin-top: 10px;
}
.btn-wa:hover { background: #1da851; transform: translateY(-2px); }

/* =====================================================
   HERO V2  –  תמונה מלאה ברקע, טקסט למעלה, כפתור למטה
===================================================== */
.hero-v2 {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh; /* dynamic viewport – מונע בעיות עם כתובת הדפדפן */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  direction: rtl;
  background: #060208;
}

/* תמונה ברקע – דמות שלמה בחלק התחתון */
.hv2-bg-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* גובה אדפטיבי: בטלפונים קטנים נשתמש בערך קבוע, בגדולים 80% */
  height: clamp(460px, 78%, 85%);
  object-fit: contain;
  object-position: bottom center;
  z-index: 0;
}

/* שכבת הדרגה – שחור למעלה, fade לבורדו, שקוף באמצע, שחור למטה */
.hv2-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      #060208 0%,
      rgba(6,2,8,.95) 15%,
      rgba(6,2,8,.55) 28%,
      rgba(40,8,20,.2) 40%,
      transparent 50%,
      transparent 62%,
      rgba(6,2,8,.70) 78%,
      rgba(6,2,8,.97) 90%,
      #060208 100%);
  pointer-events: none;
}

/* טקסט עליון */
.hv2-top-text {
  position: relative;
  z-index: 2;
  padding: 90px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}

/* badge עליון */
.hv2-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(109,31,50,.35);
  border: 1px solid rgba(155,51,86,.55);
  color: #EED9DE;
  font-size: .78rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 30px;
  margin-bottom: 18px;
  letter-spacing: .3px;
  font-family: 'Heebo', sans-serif;
}
.hv2-badge i { color: #EED9DE; }

/* כותרת ראשית */
.hv2-title {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: -.5px;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}

/* הדגשת מילים – בלוק בורדו */
.hv2-mark {
  display: inline-block;
  background: linear-gradient(135deg, #6D1F32 0%, #9B3356 100%);
  color: #fff;
  padding: 4px 18px 7px;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(109,31,50,.6);
  line-height: 1.3;
}

/* תת-כותרת */
.hv2-subtitle {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(.9rem, 2.2vw, 1.08rem);
  font-weight: 400;
  color: rgba(255,255,255,.78);
  line-height: 1.8;
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.hv2-subtitle strong { color: #EED9DE; font-weight: 700; }

/* שורת 90 יום – מודגשת בנפרד */
.hv2-subtitle-days {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 700;
  color: #fff;
  margin: 10px 0 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hv2-subtitle-days .hv2-mark {
  font-size: inherit;
  padding: 4px 18px 6px;
}

/* הדגשת מילים קטנה */
.hv2-mark-sm {
  display: inline;
  background: linear-gradient(135deg, #6D1F32, #9B3356);
  color: #fff;
  padding: 2px 10px 3px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

/* אזור תחתון – כפתורים וסטטים */
.hv2-bottom {
  position: relative;
  z-index: 2;
  padding: 0 24px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

/* כפתור CTA גדול */
.hv2-cta-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #4A1422;
  padding: 18px 0;
  width: 100%;
  border-radius: 16px;
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  transition: all .25s;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.hv2-cta-main:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(255,255,255,.12);
}
.hv2-cta-sub {
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  margin: 8px 0 14px;
  font-family: 'Heebo', sans-serif;
}

/* כפתורים משניים */
.hv2-secondary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.hv2-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  padding: 9px 18px;
  border-radius: 12px;
  text-decoration: none;
  font-family: 'Heebo', sans-serif;
  font-weight: 600;
  font-size: .86rem;
  transition: all .22s;
}
.hv2-ghost-btn:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.45);
  transform: translateY(-2px);
}

/* סטטיסטיקות */
.hv2-stats {
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
  width: 100%;
  justify-content: center;
}
.hv2-stat { text-align: center; padding: 0 18px; }
.hv2-stat-n {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
  color: #EED9DE;
  line-height: 1;
  font-family: 'Heebo', sans-serif;
}
.hv2-stat-l {
  display: block;
  font-size: .7rem;
  color: rgba(255,255,255,.48);
  margin-top: 4px;
  font-family: 'Heebo', sans-serif;
}
.hv2-stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.15);
}

@media (max-width: 480px) {
  .hv2-top-text { padding-top: 72px; }
  .hv2-title { font-size: 1.65rem; }
  .hv2-cta-main { font-size: .95rem; padding: 14px 0; }
  .hv2-stat { padding: 0 10px; }
  .hv2-ghost-btn { font-size: .78rem; padding: 7px 11px; }
  /* טלפון קטן – תמונה גדולה יותר יחסית */
  .hv2-bg-img { height: clamp(400px, 82%, 90%); }
}

/* טלפונים קטנים מאוד (iPhone SE, Galaxy A) */
@media (max-width: 380px) {
  .hv2-top-text { padding-top: 60px; }
  .hv2-title { font-size: 1.5rem; }
  .hv2-badge { font-size: .72rem; padding: 5px 14px; margin-bottom: 12px; }
  .hv2-bottom { padding-bottom: 24px; }
  .hv2-bg-img { height: clamp(360px, 80%, 88%); }
}

/* מסכים נמוכים (גובה < 700px) – מונע לחץ על התמונה */
@media (max-height: 700px) and (max-width: 899px) {
  .hero-v2 { min-height: 100dvh; }
  .hv2-bg-img { height: clamp(340px, 75%, 82%); }
  .hv2-top-text { padding-top: 56px; padding-bottom: 8px; }
  .hv2-bottom { padding-bottom: 18px; }
  .hv2-subtitle { display: none; } /* מסתיר תת-כותרת כדי לפנות מקום לתמונה */
  .hv2-subtitle-days { margin-top: 6px; }
  .hv2-stat-l { display: none; } /* מסתיר תוויות סטטיסטיקה */
}

/* =====================================================
   HERO V2 – DESKTOP (מסך גדול 900px+)
===================================================== */
@media (min-width: 900px) {

  /* הסקשן כולו – position relative כדי שהתמונה absolute תעבוד */
  .hero-v2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 0;
  }

  /* תמונה בצד שמאל – absolute, מלאה */
  .hv2-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: auto;
    width: 58%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: none;
  }

  /* fade מהתמונה לכיוון הטקסט (מימין) */
  .hv2-overlay {
    background:
      linear-gradient(to left,
        #060208 0%,
        #060208 30%,
        rgba(6,2,8,.85) 45%,
        rgba(6,2,8,.3) 60%,
        transparent 75%);
  }

  /* טקסט עליון – צד ימין, מיושר ימין */
  .hv2-top-text {
    position: relative;
    z-index: 2;
    width: 46%;
    margin-left: auto;
    margin-right: 0;
    padding: 0 80px 20px 20px;
    align-items: flex-end;
    text-align: right;
    flex: 0 0 auto;
    max-width: none;
  }

  /* כפתורים – מיד אחרי הטקסט, צד ימין */
  .hv2-bottom {
    position: relative;
    z-index: 2;
    width: 46%;
    margin-left: auto;
    margin-right: 0;
    padding: 0 80px 0 20px;
    align-items: flex-end;
    text-align: right;
    flex: 0 0 auto;
    max-width: none;
  }

  /* ביטול spacers */
  .hero-v2::before,
  .hero-v2::after { display: none; content: none; }

  .hv2-title         { font-size: clamp(2.2rem, 2.8vw, 3.2rem); text-align: right; }
  .hv2-subtitle      { text-align: right; }
  .hv2-subtitle-days { text-align: right; }
  .hv2-badge         { align-self: flex-end; }
  .hv2-cta-main      { max-width: 380px; width: 100%; }
  .hv2-secondary     { justify-content: flex-end; }
  .hv2-stats         { justify-content: flex-end; }
  .hv2-cta-sub       { text-align: right; }
}

/* =====================================================
   HERO (OLD - kept for other selectors)
===================================================== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 110px 0 70px;
}

/* Ambient orbs – pure CSS, no border/line artefacts */
.hero-bg-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
}
.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #9B3356 0%, transparent 70%);
  top: -120px;
  left: -100px;
}
.orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #3D0C1A 0%, transparent 70%);
  bottom: -80px;
  right: 10%;
}
.orb-3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, #6D1F32 0%, transparent 70%);
  top: 40%;
  left: 50%;
  opacity: .2;
}

.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 340px 280px;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hero text */
.hero-text { max-width: 580px; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--nude);
  padding: 7px 18px;
  border-radius: 24px;
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.pill-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,.5);
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Giant logo title */
.hero-logo-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.4rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1.0;
  margin-bottom: 28px;
  letter-spacing: -2px;
}
.hlh-b {
  color: #fff;
  text-shadow: 0 2px 40px rgba(255,255,255,.18);
}
.hlh-media {
  color: var(--nude);
  opacity: .88;
  font-style: italic;
  font-size: .87em;
}

/* ── לוגו קטן מעל הכותרת ── */
.hero-brand-small {
  font-family: 'Heebo', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  margin-bottom: 16px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.hero-brand-small .hlh-b  { color: rgba(255,255,255,.65); }
.hero-brand-small .hlh-media {
  color: var(--nude);
  opacity: .75;
  font-style: normal;
  font-size: 1em;
  letter-spacing: 2px;
}

/* ── כותרת שיווקית – סגנון מיתר ── */
.hero-big-msg {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.hero-big-sub {
  font-family: 'Heebo', sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 300;
  color: var(--nude);
  opacity: .92;
  margin-bottom: 32px;
  line-height: 1.7;
  letter-spacing: .3px;
}

.hero-tagline {
  font-size: .92rem;
  color: rgba(255,255,255,.6);
  margin-bottom: 18px;
  font-weight: 400;
  letter-spacing: .4px;
}

.hero-desc {
  font-family: 'Heebo', sans-serif;
  font-size: .98rem;
  color: rgba(255,255,255,.68);
  line-height: 1.9;
  margin-bottom: 36px;
  font-weight: 400;
}
.hero-desc strong { color: #fff; font-weight: 600; }

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.btn-cta-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--bd);
  padding: 14px 30px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  transition: var(--tr);
}
.btn-cta-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,255,255,.22);
}

.btn-cta-glass {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.32);
  color: #fff;
  padding: 13px 26px;
  border-radius: 13px;
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
  transition: var(--tr);
}
.btn-cta-glass:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-2px);
}

/* Stats */
.hero-stats {
  display: flex;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.hstat { text-align: center; padding: 0 20px; }
.hstat:first-child { padding-right: 0; }
.hstat-n {
  display: block;
  font-family: 'Heebo', sans-serif;
  font-size: 1.95rem;
  color: var(--nude);
  font-weight: 900;
  line-height: 1;
}
.hstat-l {
  display: block;
  font-size: .73rem;
  color: rgba(255,255,255,.55);
  margin-top: 5px;
  white-space: nowrap;
}
.hstat-sep {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}

/* Scroll hint */
.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.scroll-circle {
  width: 26px;
  height: 40px;
  border-radius: 13px;
  border: 2px solid rgba(255,255,255,.28);
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.scroll-dot {
  width: 4px;
  height: 8px;
  background: rgba(255,255,255,.55);
  border-radius: 2px;
  animation: scrollDown 2s infinite;
}
@keyframes scrollDown {
  0%   { transform: translateY(0); opacity: 1; }
  80%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* =====================================================
   PHONE MOCKUP  –  Realistic iPhone build
   Strategy: iphone-frame = the titanium/glass shell
             iphone-screen = white screen area, sits INSIDE the frame
             Dynamic Island floats at the TOP of the screen area
             No raw dark padding visible anywhere
===================================================== */
.hero-phone-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Outer titanium frame ---- */
.iphone-frame {
  width: 258px;
  /* frame colour = very dark bordeaux, matches the page, NOT pure black */
  background: linear-gradient(160deg, #2a0810 0%, #1a040a 60%, #22060d 100%);
  border-radius: 46px;
  /* layered borders: subtle highlight on top, dark edge below */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.06),
    0 0 0 3px rgba(0,0,0,.55),
    0 36px 80px rgba(0,0,0,.6),
    0 8px 24px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.1);
  position: relative;
  z-index: 2;
  padding: 12px 10px 14px;
  animation: floatPhone 5s ease-in-out infinite;
}

@keyframes floatPhone {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-14px) rotate(.4deg); }
}

/* Side buttons – pure decorative */
.iphone-btn-vol-up,
.iphone-btn-vol-dn,
.iphone-btn-power {
  position: absolute;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  border-radius: 2px;
  z-index: 5;
}
.iphone-btn-vol-up {
  width: 3px;
  height: 28px;
  right: -4px;
  top: 90px;
}
.iphone-btn-vol-dn {
  width: 3px;
  height: 28px;
  right: -4px;
  top: 126px;
}
.iphone-btn-power {
  width: 3px;
  height: 40px;
  left: -4px;
  top: 110px;
}

/* ---- White screen area ---- */
.iphone-screen {
  background: #ffffff;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  /* exact height – no dark space below content */
  height: 490px;
  display: flex;
  flex-direction: column;
  direction: rtl;
  text-align: right;
}

/* ---- Dynamic Island ---- */
.iphone-island {
  width: 96px;
  height: 28px;
  /* Same colour as the outer frame so it looks like a cutout */
  background: linear-gradient(160deg, #2a0810, #1a040a);
  border-radius: 0 0 20px 20px;
  margin: 0 auto 0;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

/* ---- Status bar (sits below island) ---- */
.iphone-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 2px;
  flex-shrink: 0;
}
.isb-time {
  font-size: .62rem;
  font-weight: 800;
  color: #1a0810;
  letter-spacing: -.3px;
}
.isb-right {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #1a0810;
}

/* Home indicator bar */
.iphone-home-bar {
  width: 100px;
  height: 4px;
  background: #1a0810;
  border-radius: 3px;
  margin: auto auto 8px;
  opacity: .15;
  flex-shrink: 0;
}

/* ---- App content wrapper scrolls if needed ---- */
.app-header {
  background: linear-gradient(135deg, var(--bd-dm), var(--bd-l));
  padding: 12px 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-greeting {
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
}
.app-sub {
  font-size: .63rem;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}
.app-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nude);
  color: var(--bd);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stats row */
.app-stats-row {
  display: flex;
  margin: 10px 12px 8px;
  background: #f9f0f2;
  border-radius: 12px;
  overflow: hidden;
}
.app-stat-pill {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  direction: rtl;
}
.asp-mid {
  border-left: 1px solid #e8d4d9;
  border-right: 1px solid #e8d4d9;
}
.asp-n {
  font-size: .9rem;
  font-weight: 800;
  color: var(--bd);
  line-height: 1;
  display: block;
}
.asp-l {
  font-size: .58rem;
  color: #8a6572;
  margin-top: 2px;
  display: block;
}

/* Section label */
.app-section-lbl {
  padding: 2px 14px 6px;
  font-size: .64rem;
  font-weight: 700;
  color: #8a6572;
  letter-spacing: .4px;
  text-align: right;
}

/* Content items */
.app-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid #f0e0e4;
}
.app-item:last-of-type { border-bottom: none; }
.app-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-item-info { flex: 1; min-width: 0; }
.app-item-title {
  font-size: .7rem;
  font-weight: 700;
  color: #2b1b1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-item-sub {
  font-size: .6rem;
  color: #8a6572;
  margin-top: 1px;
}
.app-chip {
  background: #f0e0e4;
  color: var(--bd);
  border-radius: 7px;
  padding: 3px 8px;
  font-size: .6rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.chip-pend { background: #fef3c7; color: #92400e; }
.chip-ok   { background: #d1fae5; color: #065f46; }

/* Upcoming shoot */
.app-upcoming {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 0;
  background: #f9f0f2;
  border-radius: 10px;
  padding: 8px 10px;
}
.app-up-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--bd-dm), var(--bd-l));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: #fff;
  flex-shrink: 0;
}
.app-up-title { font-size: .63rem; color: #8a6572; }
.app-up-date  { font-size: .7rem; font-weight: 700; color: #2b1b1f; margin-top: 1px; }

/* App nav bar */
.app-nav-bar {
  display: flex;
  justify-content: space-around;
  padding: 8px 0 6px;
  border-top: 1px solid #f0e0e4;
  margin-top: 8px;
  background: #fff;
}
.anb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #c4a0ab;
  font-size: .58rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 8px;
}
.anb-item i { font-size: .76rem; }
.anb-active { color: var(--bd); }

/* Old classes kept as no-ops for safety */
.phone-shell, .phone-screen, .phone-island { display: none; }

/* Glow under phone */
.phone-glow {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 70px;
  background: rgba(155,51,86,.6);
  filter: blur(28px);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

/* =====================================================
   GLASS CARDS (used in Transparency & Testimonials)
===================================================== */
.glass-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: right;
  transition: var(--tr);
  position: relative;
}
.glass-card:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.glass-feat {
  border: 1.5px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.1);
}
.gc-feat-badge {
  position: absolute;
  top: -11px;
  right: 20px;
  background: #fff;
  color: var(--bd);
  font-size: .67rem;
  font-weight: 800;
  padding: 4px 16px;
  border-radius: 20px;
  letter-spacing: .4px;
}

.gc-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: var(--nude);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 16px;
}
.glass-card h3 {
  font-family: 'Heebo', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.glass-card p {
  font-size: .86rem;
  color: rgba(255,255,255,.65);
  line-height: 1.75;
  margin-bottom: 14px;
}

/* Tags inside glass cards */
.gc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gtag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .3px;
}
.gtag-grey { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }
.gtag-warn { background: rgba(251,191,36,.15); color: #fde68a; }
.gtag-ok   { background: rgba(52,211,153,.15); color: #6ee7b7; }
.gtag-pub  { background: rgba(167,139,250,.15); color: #c4b5fd; }

/* =====================================================
   TRANSPARENCY GRID
===================================================== */
.trans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: right;
}

/* =====================================================
   ABOUT
===================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  text-align: right;
}

.about-p {
  color: rgba(255,255,255,.7);
  line-height: 1.85;
  margin-bottom: 14px;
  font-size: .97rem;
}

.about-checks {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ac-row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .92rem;
  color: rgba(255,255,255,.85);
}
.ac-dot {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  color: var(--nude);
  flex-shrink: 0;
}

/* About number cards */
.about-nums-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.an-pill {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  padding: 26px 20px;
  text-align: center;
  transition: var(--tr);
}
.an-pill:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-3px);
}
.an-pill-burg {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.25);
}
.an-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: var(--nude);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  margin: 0 auto 10px;
}
.an-n {
  font-family: 'Heebo', sans-serif;
  font-size: 1.85rem;
  font-weight: 900;
  color: var(--nude);
  line-height: 1;
}
.an-l {
  font-size: .74rem;
  color: rgba(255,255,255,.55);
  margin-top: 5px;
  font-weight: 600;
}

/* =====================================================
   SERVICES / PACKAGES
===================================================== */
.pkgs-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  max-width: 820px;
  margin: 0 auto;
}
.pkg-vat {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  margin-top: 5px;
  font-weight: 500;
}

.pkg-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--tr);
  text-align: right;
  position: relative;
}
.pkg-card:hover {
  background: rgba(255,255,255,.11);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.pkg-pop {
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
}
.pkg-ribbon-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--bd);
  font-size: .64rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  letter-spacing: .4px;
  z-index: 2;
}

.pkg-top {
  background: rgba(0,0,0,.2);
  padding: 32px 24px 24px;
}
.pkg-badge-sm {
  display: inline-block;
  background: rgba(255,255,255,.12);
  color: var(--nude);
  font-size: .66rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.pkg-name {
  font-family: 'Heebo', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
}
.pkg-price {
  font-family: 'Heebo', sans-serif;
  font-size: 2.3rem;
  font-weight: 900;
  color: var(--nude);
  line-height: 1;
}
.pp-sym { font-size: 1.2rem; vertical-align: super; }
.pp-per {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  font-family: 'Heebo', sans-serif;
  font-weight: 400;
  margin-right: 4px;
}
.pkg-price-txt {
  font-family: 'Heebo', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--nude);
  margin-top: 8px;
}

.pkg-feats {
  list-style: none;
  padding: 20px 24px;
  margin-bottom: 0;
}
.pkg-feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: .87rem;
  color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pkg-feats li:last-child { border-bottom: none; }
.pkg-feats i { color: var(--nude); font-size: .75rem; flex-shrink: 0; }
.feat-highlight {
  color: #fff !important;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 8px 10px !important;
  border: 1px solid rgba(255,255,255,.2);
  margin: 2px 0;
}
.feat-highlight i { color: #fbbf24 !important; }

.pkg-btn-ghost {
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  padding: 12px;
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 11px;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  text-align: center;
  transition: var(--tr);
  cursor: pointer;
}
.pkg-btn-ghost:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.pkg-btn-solid {
  display: block;
  width: calc(100% - 48px);
  margin: 0 24px 24px;
  padding: 12px;
  background: #fff;
  color: var(--bd);
  border: none;
  border-radius: 11px;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  text-decoration: none;
  text-align: center;
  transition: var(--tr);
  cursor: pointer;
}
.pkg-btn-solid:hover {
  background: var(--nude);
  transform: translateY(-1px);
}

/* =====================================================
   PROCESS
===================================================== */
/* =====================================================
   PROCESS TIMELINE
===================================================== */
/* proc-timeline = עטיפה כללית */
.proc-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

/* שורה אחת (3 שלבים + 2 קווים) */
.proc-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: 100%;
}

/* ── קו חיבור ── */
.pi-connector {
  flex: 1;
  max-width: 60px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.28),
    rgba(255,255,255,.08));
  margin-top: 26px;   /* מיישר לאמצע האייקון */
  flex-shrink: 1;
}

/* קו אנכי בין שתי שורות */
.pi-row-connector {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.pi-row-connector::before {
  content: '';
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.1),
    rgba(255,255,255,.25),
    rgba(255,255,255,.1));
  display: block;
}

/* ── שלב ── */
.proc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: clamp(90px, 22vw, 140px);
  text-align: center;
  transition: transform .25s ease;
  padding: 0 4px;
}
.proc-item:hover { transform: translateY(-4px); }

/* ── אייקון ── */
.pi-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--nude);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background .25s, color .25s;
  flex-shrink: 0;
}
.proc-item:hover .pi-icon {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ── מספר ── */
.pi-num {
  font-size: .58rem;
  font-weight: 800;
  color: rgba(255,255,255,.28);
  letter-spacing: 1.5px;
  margin-top: -2px;
}

/* ── טקסט ── */
.pi-text h3 {
  font-size: .83rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
  line-height: 1.3;
}
.pi-text p {
  font-size: .71rem;
  color: rgba(255,255,255,.52);
  line-height: 1.4;
}

/* =====================================================
   TESTIMONIALS GRID
===================================================== */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: right;
}
.tc-stars {
  color: #fbbf24;
  font-size: .82rem;
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
}
.tc-text {
  font-size: .88rem;
  line-height: 1.8;
  color: rgba(255,255,255,.7);
  margin-bottom: 20px;
  font-style: italic;
}
.tc-who { display: flex; align-items: center; gap: 12px; }
.tc-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: var(--nude);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tc-who strong {
  display: block;
  font-size: .9rem;
  color: #fff;
  font-family: 'Heebo', sans-serif;
}
.tc-who span { font-size: .75rem; color: rgba(255,255,255,.5); }

/* =====================================================
   CONTACT
===================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
  text-align: right;
}

.contact-desc {
  color: rgba(255,255,255,.65);
  line-height: 1.78;
  margin-bottom: 28px;
  font-size: .97rem;
}

.cways { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.cway {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: rgba(255,255,255,.85);
  transition: color .2s;
}
.cway:hover { color: #fff; }
.cway-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.ci-wa   { background: rgba(37,211,102,.18); color: #4ade80; }
.ci-mail { background: rgba(255,255,255,.1); color: var(--nude); }
.ci-ig   { background: rgba(225,48,108,.18); color: #f9a8d4; }
.cway-lbl { font-size: .73rem; color: rgba(255,255,255,.5); font-weight: 600; }
.cway-val { font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9); }

/* Contact form */
.contact-form-box {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 36px;
}

/* contact quiz CTA box */
.contact-quiz-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px;
  gap: 14px;
  height: 100%;
  justify-content: center;
}
.cqc-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6D1F32, #9B3356);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 6px;
}
.contact-quiz-cta h3 {
  font-family: 'Heebo', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.contact-quiz-cta p {
  color: rgba(255,255,255,.65);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}
.cqc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #4A1422;
  border: none;
  padding: 16px 32px;
  border-radius: 14px;
  font-family: 'Heebo', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  transition: all .22s;
  box-shadow: 0 8px 30px rgba(0,0,0,.3);
  margin-top: 6px;
}
.cqc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(255,255,255,.12);
}
.cqc-features {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.cqc-features span {
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  gap: 5px;
}
.cqc-features i {
  color: #9B3356;
  font-size: .7rem;
}
.cf-g { margin-bottom: 14px; }
.cf-g label {
  display: block;
  font-size: .79rem;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  margin-bottom: 6px;
}
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* #contactForm הוחלף בשאלון – CSS הוסר */

/* =====================================================
   FOOTER
===================================================== */
.footer {
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 60px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.fl-b { color: #fff; }
.fl-m { color: var(--nude); opacity: .85; }
.footer-brand p {
  font-size: .84rem;
  line-height: 1.65;
  margin-bottom: 20px;
  color: rgba(255,255,255,.5);
}
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  text-decoration: none;
  transition: var(--tr);
}
.footer-socials a:hover { background: rgba(255,255,255,.16); color: #fff; }

.footer-nav h4,
.footer-access h4 {
  font-family: 'Heebo', sans-serif;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--nude);
  margin-bottom: 16px;
}
.footer-nav a {
  display: block;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: .84rem;
  margin-bottom: 9px;
  transition: color .2s;
}
.footer-nav a:hover { color: #fff; }
.footer-access p {
  font-size: .81rem;
  margin-bottom: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.5);
}
.footer-access-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.85);
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-size: .84rem;
  font-weight: 600;
  transition: var(--tr);
}
.footer-access-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 20px 0;
  text-align: center;
  font-size: .77rem;
  color: rgba(255,255,255,.28);
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media (max-width: 1100px) {
  .hero-inner {
    grid-template-columns: 1fr 260px;
    gap: 28px;
  }
  .hero-barbie-wrap { display: none; }
}

/* =====================================================
   CLIENT VIDEOS SECTION
===================================================== */
.videos-scroll-wrap {
  position: relative;
  margin: 0 0 8px;
  padding: 8px 0 20px;
}

.videos-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 12px 48px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.videos-track::-webkit-scrollbar { display: none; }

/* ── כרטיס סרטון ── */
.vid-card {
  flex: 0 0 200px;
  width: 200px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform .28s ease, box-shadow .28s ease;
}
.vid-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

/* ── אזור הווידאו – יחס 9:16 (ריל) ── */
.vid-thumb {
  position: relative;
  width: 100%;
  padding-top: 177.78%; /* 9:16 */
  background: rgba(0,0,0,.4);
  overflow: hidden;
}
.vid-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
}
.vid-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vid-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.25);
  transition: background .2s;
}
.vid-card:hover .vid-play-overlay { background: rgba(0,0,0,.1); }
.vid-play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bd);
  font-size: 1.1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  transition: transform .2s;
}
.vid-card:hover .vid-play-btn { transform: scale(1.12); }

/* ── תג צפיות על התמונה ── */
.vid-views-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

/* ── מידע מתחת ── */
.vid-info {
  padding: 12px 14px 14px;
}
.vid-info h3 {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vid-info .vid-client {
  font-size: .74rem;
  color: var(--nude);
  opacity: .7;
  display: block;
  margin-bottom: 10px;
}

/* ── כפתור 'צפה בסרטון' ── */
.vid-watch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #fff;
  font-family: 'Heebo', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
  cursor: pointer;
}
.vid-watch-btn:hover {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* ── חצי ניווט ── */
.vid-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
  z-index: 10;
}
.vid-arrow:hover { background: rgba(255,255,255,.22); }
.vid-arrow-right { right: 8px; }
.vid-arrow-left  { left: 8px; }

/* ── מצב ריק / טעינה ── */
.vid-loading, .vid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.5);
  font-size: .9rem;
  padding: 48px 24px;
  width: 100%;
  justify-content: center;
}
.vid-loading i { font-size: 1.5rem; color: var(--nude); }

/* ── מודל iframe fullscreen ── */
.vid-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.vid-modal-overlay.open { display: flex; }
.vid-modal-box {
  position: relative;
  width: min(860px, 95vw);
  aspect-ratio: 16/9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}
.vid-modal-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.vid-modal-close {
  position: absolute;
  top: -44px;
  left: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Heebo', sans-serif;
  opacity: .85;
}
.vid-modal-close:hover { opacity: 1; }

/* Native video modal (Cloudinary) */
#nativeVidOverlay .vid-modal-box {
  aspect-ratio: unset;
  background: #000;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  width: min(860px, 95vw);
}
#nativeVidOverlay .vid-modal-close {
  position: static;
  transform: none;
  font-size: 1rem;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
}
#nativeVidOverlay .vid-modal-close:hover {
  background: rgba(255,255,255,.22);
  opacity: 1;
}

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .hero-text  { max-width: 640px; text-align: center; }
  .hero-cta   { justify-content: center; }
  .hero-secondary-btns { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-tag-badge { display: inline-flex; }
  .hero-float-badge { left: 50%; transform: translateX(-50%); bottom: -20px; }
  .hstat:first-child { padding-right: 20px; }
  .hero-pill  { justify-content: center; }

  /* Photo & Phone on tablets */
  .hero-barbie-wrap { display: flex; margin-top: 0; }
  .hero-phone-wrap { display: flex; margin-top: 16px; }

  .trans-grid      { grid-template-columns: repeat(2, 1fr); }
  .pkgs-row        { grid-template-columns: 1fr 1fr; max-width: 100%; }
  .testi-grid      { grid-template-columns: 1fr 1fr; }
  .footer-grid     { grid-template-columns: 1fr 1fr; gap: 32px; }
  .about-grid      { grid-template-columns: 1fr; gap: 40px; }
  /* timeline על tablet */
  .proc-row        { justify-content: center; }
  .about-text      { text-align: center; }
  .about-text .sec-title-lg { text-align: center; }
  .ac-row          { justify-content: center; }
  .about-nums-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .nav-links   { display: none; }
  .nav-actions { display: none; }
  .hamburger   { display: flex; }

  .hero { padding: 110px 0 70px; }
  .hero-inner { gap: 36px; }

  /* ===== PHONE ON MOBILE ===== */
  .hero-phone-wrap {
    display: flex;
    transform: scale(.78);
    transform-origin: center top;
    margin-top: 20px;
    margin-bottom: -40px;
  }

  .trans-grid      { grid-template-columns: 1fr; }
  .pkgs-row        { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .testi-grid      { grid-template-columns: 1fr; }
  .contact-grid    { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid     { grid-template-columns: 1fr; gap: 32px; }
  .cf-row          { grid-template-columns: 1fr; }
  .about-nums-grid { grid-template-columns: 1fr 1fr; }
  /* timeline על mobile */
  .proc-row        { justify-content: center; gap: 0; }
  .proc-item       { width: clamp(80px, 26vw, 110px); }
  .pi-icon         { width: 44px; height: 44px; font-size: .95rem; }
  .pi-text h3      { font-size: .76rem; }
  .pi-text p       { font-size: .65rem; }
}

@media (max-width: 540px) {
  .hero { padding: 100px 0 60px; }
  .section-dark,
  .section-mid { padding: 68px 0; }

  .hero-logo-h1 { letter-spacing: -1px; }
  /* timeline על 540 – קטן עוד */
  .proc-item       { width: clamp(72px, 24vw, 96px); }
  .pi-icon         { width: 40px; height: 40px; font-size: .85rem; }
  .pi-connector    { max-width: 28px; }

  /* Even smaller phone on smallest screens */
  .hero-phone-wrap {
    transform: scale(.65);
    transform-origin: center top;
    margin-top: 10px;
    margin-bottom: -80px;
  }

  .contact-form-box { padding: 24px 18px; }
  .footer-grid { grid-template-columns: 1fr; }

  .hero-stats { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .hstat-sep  { display: none; }
  .hstat      { padding: 0 16px; }
}

/* =====================================================
   BARBIE PHOTO – Hero image
===================================================== */
.hero-barbie-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-barbie-img-box {
  position: relative;
  width: 400px;
  height: 400px;
  animation: floatPhoto 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,.5));
}

/* עיגול פס עם מרווח קטן מהתמונה */
.hero-barbie-img-box::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(155,51,86,.8);
  pointer-events: none;
  z-index: 3;
  animation: pulseRing 3s ease-in-out infinite;
}

@keyframes pulseRing {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.02); }
}

.hero-barbie-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

@keyframes floatPhoto {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* =====================================================
   FEATURES GRID – מה מקבלים (אייקונים קומפקטיים)
===================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.feat-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 20px 18px;
  transition: all .25s;
  backdrop-filter: blur(8px);
}

.feat-item:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px);
}

.feat-icon-wrap {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: linear-gradient(135deg, rgba(109,31,50,.6), rgba(155,51,86,.4));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #E8A0B4;
  border: 1px solid rgba(155,51,86,.3);
}

.feat-icon-featured {
  background: linear-gradient(135deg, #6D1F32, #9B3356);
  border-color: rgba(155,51,86,.6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(109,31,50,.4);
}

.feat-text h3 {
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feat-text p {
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  line-height: 1.5;
}

.feat-badge {
  display: inline-block;
  background: linear-gradient(135deg, #6D1F32, #9B3356);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  letter-spacing: .3px;
}

@media (max-width: 900px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-barbie-img-box { width: 300px; height: 300px; }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
  .hero-barbie-img-box { width: 240px; height: 240px; }
}

/* =====================================================
   HERO NEW STYLE – badge, highlight, float, buttons
===================================================== */
.hero-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #EED9DE;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 22px;
  letter-spacing: .3px;
}

.hero-highlight {
  background: linear-gradient(90deg, #EED9DE, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-accent-txt {
  color: #EED9DE;
  font-weight: 900;
}

.btn-cta-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--bd, #4A1422);
  padding: 16px 36px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  transition: all .25s;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  white-space: nowrap;
}
.btn-cta-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(255,255,255,.25);
}

.hero-secondary-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  margin-bottom: 40px;
}

.btn-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.9);
  padding: 11px 22px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: .88rem;
  transition: all .25s;
}
.btn-cta-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.55);
  transform: translateY(-2px);
}

/* floating badge on image */
.hero-float-badge {
  position: absolute;
  bottom: 30px;
  left: -20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: 'Heebo', sans-serif;
  z-index: 5;
}
.hero-float-badge i {
  font-size: 1.4rem;
  color: #EED9DE;
}
.hfb-num {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}
.hfb-lbl {
  font-size: .72rem;
  opacity: .75;
  margin-top: 2px;
}

/* =====================================================
   FEATURES RTL – מה מקבלים (מיושר לימין)
===================================================== */
.features-grid-rtl {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .features-grid-rtl { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .features-grid-rtl { grid-template-columns: 1fr 1fr 1fr; }
}

.feat-item-rtl {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 20px 22px;
  transition: all .25s;
  backdrop-filter: blur(8px);
  direction: rtl;
  text-align: right;
}

.feat-item-rtl:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  transform: translateX(-3px);
}

.feat-text-rtl h3 {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.feat-text-rtl p {
  color: rgba(255,255,255,.68);
  font-size: .88rem;
  line-height: 1.6;
}

/* =====================================================
   QUIZ / FUNNEL SECTION
===================================================== */
#quiz-section {
  background: linear-gradient(135deg, #1a0810 0%, #4A1422 50%, #6D1F32 100%);
  padding: 70px 20px;
  position: relative;
  overflow: hidden;
}
#quiz-section::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 350px; height: 350px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  pointer-events: none;
}

.quiz-wrapper {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.quiz-header {
  text-align: center;
  margin-bottom: 36px;
}
.quiz-header .sec-label { margin-bottom: 10px; }
.quiz-header h2 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}

.quiz-progress-bar {
  height: 5px;
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  margin-bottom: 36px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #EED9DE, #fff);
  border-radius: 10px;
  transition: width .4s ease;
}

.quiz-step {
  display: none;
  animation: fadeInUp .35s ease;
}
.quiz-step.active { display: block; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.quiz-question {
  color: #fff;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.45;
  text-align: right;
}
.quiz-sub {
  color: rgba(255,255,255,.6);
  font-size: .88rem;
  margin-bottom: 24px;
  text-align: right;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-option {
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 16px 20px;
  color: #fff;
  font-size: .97rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .22s;
  text-align: right;
  direction: rtl;
}
.quiz-option:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.4);
  transform: translateX(-4px);
}
.quiz-option.selected {
  background: rgba(255,255,255,.18);
  border-color: #EED9DE;
  color: #EED9DE;
}

.quiz-open-input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 16px 20px;
  color: #fff;
  font-size: .97rem;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
  resize: none;
  transition: border-color .22s;
}
.quiz-open-input::placeholder { color: rgba(255,255,255,.4); }
.quiz-open-input:focus {
  outline: none;
  border-color: rgba(255,255,255,.5);
}

/* שדות פרטים אישיים */
.quiz-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
}
.quiz-field-input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 15px 20px;
  color: #fff;
  font-size: .97rem;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
  transition: border-color .22s;
  box-sizing: border-box;
}
.quiz-field-input::placeholder { color: rgba(255,255,255,.4); }
.quiz-field-input:focus {
  outline: none;
  border-color: rgba(109,31,50,.8);
  background: rgba(255,255,255,.1);
}

.quiz-next-btn {
  margin-top: 24px;
  width: 100%;
  background: #fff;
  color: #4A1422;
  border: none;
  border-radius: 14px;
  padding: 15px 30px;
  font-size: 1rem;
  font-weight: 800;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: all .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.quiz-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,255,255,.2);
}
.quiz-next-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
}

.quiz-step-counter {
  text-align: center;
  color: rgba(255,255,255,.45);
  font-size: .8rem;
  margin-top: 16px;
}

/* ─ Success screen ─ */
.quiz-success {
  display: none;
  text-align: center;
  animation: fadeInUp .4s ease;
}
.quiz-success.active { display: block; }
.quiz-success-icon {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #6D1F32, #9B3356);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  font-size: 2rem; color: #fff;
}
.quiz-success h3 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 12px;
}
.quiz-success p {
  color: rgba(255,255,255,.75);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 28px;
}
.quiz-success-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #4A1422;
  padding: 15px 36px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1rem;
  transition: all .25s;
}
.quiz-success-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,255,255,.22);
}

/* ── process connector fix ── */
.pi-row-connector {
  display: flex;
  justify-content: flex-end;
  padding: 6px 0;
  padding-left: 0;
}
.pi-row-connector::before {
  content: '';
  width: 2px;
  height: 32px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.1),
    rgba(255,255,255,.25),
    rgba(255,255,255,.1));
  display: block;
  /* align to step 3/4 boundary – roughly 2/3 from right */
  margin-left: calc(16.66% - 1px);
}

@media (max-width: 700px) {
  .hero-float-badge { left: 0; bottom: 10px; font-size: .8rem; padding: 9px 13px; }
  .features-grid-rtl { gap: 12px; }
  .feat-item-rtl { padding: 16px 16px; }
  .btn-cta-main { font-size: .95rem; padding: 14px 24px; }
  .quiz-option { padding: 13px 16px; font-size: .92rem; }
}

/* =====================================================
   DESKTOP GLOBAL FIXES (min-width: 900px)
===================================================== */
@media (min-width: 900px) {
  /* סרטונים – גריד אופקי */
  .reels-container {
    max-width: 520px;
  }

  /* contact grid – שתי עמודות */
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }

  /* packages */
  .pkgs-row { grid-template-columns: repeat(3, 1fr); }

  /* process timeline */
  .proc-row { justify-content: center; }

  /* quiz modal – רוחב מוגבל */
  .quiz-wrapper { max-width: 560px; }

  /* sections spacing */
  .section-dark, .section-mid { padding: 100px 0; }
}

@media (min-width: 1200px) {
  .hv2-top-text { padding: 0 100px 20px 20px; }
  .hv2-bottom   { padding: 0 100px 0 20px; }
  .hv2-title    { font-size: 3.2rem; }
}