/* index.css — עיצוב עמוד הבית (חולץ מ-<style> inline לצורך cache). index אינו טוען shared.css. */
@font-face {
        font-family: "Alef";
        src:
          url("fonts/Alef_Regular.woff2") format("woff2"),
          url("fonts/Alef_Regular.otf") format("opentype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Alef";
        src:
          url("fonts/Alef-Bold.woff2") format("woff2"),
          url("fonts/Alef-Bold.ttf") format("truetype");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "TelAviv";
        src:
          url("fonts/TelAviv-BrutalistLight.woff2") format("woff2"),
          url("fonts/TelAviv-BrutalistLight.ttf") format("truetype");
        font-weight: 300;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "TelAviv";
        src:
          url("fonts/TelAviv-BrutalistRegular.woff2") format("woff2"),
          url("fonts/TelAviv-BrutalistRegular.ttf") format("truetype");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "TelAviv";
        src:
          url("fonts/TelAviv-BrutalistBold.woff2") format("woff2"),
          url("fonts/TelAviv-BrutalistBold.ttf") format("truetype");
        font-weight: 700 900;
        font-style: normal;
        font-display: swap;
      }

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

      /* ── מניעת "מילה בודדת בשורה" (orphan) בכל דף הבית — מובייל ודסקטופ ──
       text-wrap:balance מאזן את אורך השורות כך שלא נשארת מילה בודדת בשורה
       אחרונה (לטקסט קצר: כותרות, כותרות-משנה, תיאורי כרטיסים). pretty כבסיס
       לפסקאות ארוכות. (index.html לא טוען את shared.css — לכן מוגדר כאן.) */
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      .hero-sub,
      .section-sub,
      .form-sub,
      .hero-kicker,
      [class*="title"],
      [class*="-sub"],
      [class*="-desc"],
      [class*="-text"],
      [class*="-lead"],
      [class*="-label"],
      [class*="tagline"],
      [class*="eyebrow"],
      [class*="kicker"] {
        text-wrap: balance;
      }
      p,
      li,
      figcaption,
      blockquote {
        text-wrap: pretty;
      }

      :root {
        --green-dark: #1b3024;
        --green-accent: #c4623a;
        --green-pale: #faf0eb;
        --cream: #f9f9f7;
        --cream-dark: #f0f0ec;
        --white: #ffffff;
        --text: #1a1a1a;
        --text-mid: #444;
        --text-light: #777;
        --radius: 16px;
        --radius-lg: 24px;
        --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.06);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        --shadow-md: 0 8px 36px rgba(0, 0, 0, 0.12);
        --shadow-lg: 0 16px 56px rgba(0, 0, 0, 0.16);
      }

      h1,
      h2,
      h3,
      h4,
      .section-title,
      .nav-logo,
      .footer-logo,
      .form-heading,
      .testi-header h2,
      .hero-h1,
      .why-point h4,
      .why-badge-title,
      .form-success h3 {
        font-family: "TelAviv", sans-serif;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 84px;
      }

      /* Keyboard focus — visible ring (was missing site-wide) */
      a:focus-visible,
      button:focus-visible,
      [tabindex]:focus-visible {
        outline: 2px solid var(--green-dark);
        outline-offset: 3px;
        border-radius: 6px;
      }
      /* Dark backgrounds → light ring for contrast */
      #hero a:focus-visible,
      #showreel a:focus-visible,
      footer a:focus-visible,
      .sticky-wa-bar a:focus-visible {
        outline-color: #fff;
      }

      body {
        font-family: "Alef", sans-serif;
        background: var(--white);
        color: var(--text);
        line-height: 1.7;
        direction: rtl;
        font-feature-settings: "kern" 1;
        -webkit-font-smoothing: antialiased;
        touch-action: manipulation;
      }

      /* ══════════════════════════════
       NAVBAR
    ══════════════════════════════ */
      nav {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 48px;
        background: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
        border-bottom: 1px solid rgba(255, 255, 255, 0);
        transition:
          background 0.4s,
          backdrop-filter 0.4s,
          border-color 0.4s,
          box-shadow 0.3s;
      }
      nav.nav-solid {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
      }
      nav.scrolled {
        box-shadow: var(--shadow-sm);
      }

      /* Logo */
      .nav-logo {
        font-size: 1.45rem;
        font-weight: 900;
        color: white;
        letter-spacing: -0.5px;
        transition: color 0.4s;
        cursor: default;
      }
      nav.nav-solid .nav-logo {
        color: var(--green-dark);
      }
      .nav-logo em {
        font-style: normal;
        color: rgba(255, 255, 255, 0.8);
        transition: color 0.4s;
      }
      nav.nav-solid .nav-logo em {
        color: var(--green-accent);
      }

      /* Right side */
      .nav-right {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .nav-phone {
        font-family: "Alef", sans-serif;
        font-size: 0.9rem;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s;
        display: flex;
        align-items: center;
        gap: 5px;
      }
      nav.nav-solid .nav-phone {
        color: var(--text-mid);
      }
      .nav-phone:hover {
        color: var(--green-dark);
      }
      .nav-cta {
        background: rgba(255, 255, 255, 0.15);
        color: white;
        border: 1.5px solid rgba(255, 255, 255, 0.4);
        border-radius: 50px;
        padding: 10px 24px;
        font-family: "Alef", sans-serif;
        font-size: 0.93rem;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition:
          background 0.3s,
          border-color 0.3s,
          color 0.3s,
          transform 0.15s;
        white-space: nowrap;
      }
      nav.nav-solid .nav-cta {
        background: var(--green-dark);
        border-color: transparent;
        color: white;
      }
      .nav-cta:hover {
        transform: translateY(-1px);
        opacity: 0.9;
      }

      /* ── Pill nav ── */
      .nav-pill {
        position: relative;
        display: flex;
        align-items: center;
        border: 1.5px solid var(--green-dark);
        border-radius: 50px;
        padding: 4px;
        background: white;
        flex: 1;
        justify-content: center;
        max-width: 500px;
      }
      .nav-pill-cursor {
        position: absolute;
        top: 4px;
        left: 0;
        border-radius: 50px;
        background: var(--green-dark);
        pointer-events: none;
        z-index: 1;
        opacity: 0;
        transition:
          left 0.3s cubic-bezier(0.34, 1.15, 0.64, 1),
          width 0.3s cubic-bezier(0.34, 1.15, 0.64, 1),
          height 0.3s cubic-bezier(0.34, 1.15, 0.64, 1),
          opacity 0.2s ease;
      }
      .nav-item {
        position: relative;
      }
      .nav-item-btn {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: "Alef", sans-serif;
        font-size: 0.92rem;
        font-weight: 400;
        color: var(--text-mid);
        text-decoration: none;
        background: none !important;
        border: none;
        cursor: pointer;
        padding: 6px 14px;
        border-radius: 50px;
        line-height: 1.7;
        transition: color 0.2s;
        white-space: nowrap;
      }
      .nav-item-btn.pill-active {
        color: white;
      }
      .nav-item.open .nav-item-btn {
        color: var(--green-dark);
      }
      .nav-item.open .nav-item-btn.pill-active {
        color: white;
      }
      .nav-arrow {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        transition: transform 0.25s;
        flex-shrink: 0;
      }
      .nav-item.open .nav-arrow {
        transform: rotate(180deg);
      }

      /* Dropdown panel */
      .nav-dropdown {
        position: absolute;
        top: calc(100% + 14px);
        right: 50%;
        transform: translateX(50%) translateY(-6px);
        min-width: 230px;
        background: white;
        border-radius: 16px;
        box-shadow:
          0 12px 40px rgba(0, 0, 0, 0.13),
          0 2px 8px rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.06);
        padding: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.2s,
          visibility 0.2s,
          transform 0.2s;
        z-index: 10;
      }
      .nav-item.open .nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(50%) translateY(0);
      }
      .nav-dd-cat {
        font-family: "Alef", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-light);
        padding: 8px 12px 4px;
      }
      .nav-dd-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border-radius: 10px;
        font-family: "Alef", sans-serif;
        font-size: 0.91rem;
        color: var(--text);
        text-decoration: none;
        transition:
          background 0.15s,
          color 0.15s;
        direction: rtl;
      }
      .nav-dd-link:hover {
        background: var(--cream);
        color: var(--green-dark);
      }
      .nav-dd-sep {
        height: 1px;
        background: var(--cream-dark);
        margin: 6px 4px;
      }

      /* ── Hamburger ── */
      .nav-hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 8px;
        transition: background 0.2s;
      }
      .nav-hamburger:hover {
        background: rgba(0, 0, 0, 0.06);
      }
      .nav-hamburger span {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--green-dark);
        border-radius: 2px;
        transition:
          transform 0.25s,
          opacity 0.25s,
          width 0.25s;
        transform-origin: center;
      }
      .nav-hamburger.open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .nav-hamburger.open span:nth-child(2) {
        opacity: 0;
        width: 0;
      }
      .nav-hamburger.open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ── Mobile drawer ── */
      .nav-mobile {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 998;
        background: white;
        overflow-y: auto;
        transform: translateY(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: 80px;
      }
      .nav-mobile.open {
        transform: translateY(0);
      }
      .nav-mobile-inner {
        padding: 16px 24px 48px;
        display: flex;
        flex-direction: column;
      }
      .nav-mobile-section {
        border-bottom: 1px solid var(--cream-dark);
      }
      .nav-mobile-cat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: none;
        border: none;
        cursor: pointer;
        padding: 18px 0;
        font-family: "TelAviv", sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--green-dark);
        direction: rtl;
        text-align: right;
      }
      .nav-mobile-cat .mob-arrow {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        transition: transform 0.25s;
        flex-shrink: 0;
      }
      .nav-mobile-section.open .mob-arrow {
        transform: rotate(180deg);
      }
      .nav-mobile-links {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-bottom: 0;
      }
      .nav-mobile-section.open .nav-mobile-links {
        max-height: 620px;
        padding-bottom: 12px;
      }
      .nav-mobile-sub {
        font-family: "Alef", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: var(--text-light);
        padding: 12px 16px 2px;
        direction: rtl;
      }
      .nav-mobile-links .nav-mobile-sub:first-child {
        padding-top: 4px;
      }
      .svc-flow {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 14px;
        margin-top: 36px;
        font-family: "Alef", sans-serif;
        font-size: 0.98rem;
        color: var(--text-mid);
      }
      .svc-flow-label {
        color: var(--text-light);
        font-size: 0.85rem;
        letter-spacing: 0.04em;
      }
      .svc-flow a {
        color: var(--green-dark);
        font-weight: 700;
        text-decoration: none;
        border-bottom: 1px solid rgba(27, 48, 36, 0.25);
        padding-bottom: 1px;
        transition:
          color 0.15s,
          border-color 0.15s;
      }
      .svc-flow a:hover {
        color: var(--green-accent);
        border-color: var(--green-accent);
      }
      .svc-flow-sep {
        color: var(--green-accent);
        font-weight: 700;
      }
      .nav-mobile-link {
        display: block;
        padding: 11px 16px;
        border-radius: 10px;
        font-family: "Alef", sans-serif;
        font-size: 1rem;
        color: var(--text-mid);
        text-decoration: none;
        transition:
          background 0.15s,
          color 0.15s;
        direction: rtl;
      }
      .nav-mobile-link:hover {
        background: var(--cream);
        color: var(--green-dark);
      }
      .nav-mobile-cat-link {
        display: flex;
        align-items: center;
        padding: 18px 0;
        border-bottom: 1px solid var(--cream-dark);
        font-family: "TelAviv", sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--green-dark);
        text-decoration: none;
      }
      .nav-mobile-cta {
        display: block;
        margin-top: 28px;
        background: var(--green-dark);
        color: white;
        text-align: center;
        padding: 16px;
        border-radius: 14px;
        font-family: "Alef", sans-serif;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
      }
      .nav-mobile-phone {
        display: block;
        margin-top: 14px;
        text-align: center;
        font-family: "Alef", sans-serif;
        font-size: 0.95rem;
        color: var(--text-mid);
        text-decoration: none;
      }

      @media (max-width: 900px) {
        .nav-pill {
          display: none;
        }
        .nav-phone {
          display: none;
        }
        .nav-hamburger {
          display: flex;
        }
        nav {
          padding: 14px 22px;
        }
      }

      /* ══════════════════════════════
       HERO FULLWIDTH
    ══════════════════════════════ */
      #hero {
        position: relative;
        width: 100%;
        min-height: 100dvh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        isolation: isolate;
      }
      /* Background image — swap the url to change the photo */
      #hero-bg {
        position: absolute;
        inset: 0;
        z-index: -2;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transform: scale(1.03);
      }
      #hero-overlay {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(
          180deg,
          rgba(12, 22, 16, 0.58) 0%,
          rgba(12, 22, 16, 0.4) 45%,
          rgba(12, 22, 16, 0.66) 100%
        );
      }
      /* Elegant vertical grid lines */
      #hero-lines {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
      }
      #hero-lines span {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        background: rgba(255, 255, 255, 0.15);
      }
      /* Content */
      #hero-inner {
        position: relative;
        z-index: 2;
        max-width: 940px;
        padding: 124px 24px 84px;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .hero-kicker {
        font-family: "Alef", sans-serif;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.82);
        margin-bottom: 26px;
        opacity: 0;
        transform: translateY(12px);
        animation: heroIn 0.8s ease 0.05s forwards;
      }
      .hero-h1 {
        font-size: clamp(2.3rem, 5.6vw, 5.2rem);
        font-weight: 800;
        line-height: 1.06;
        letter-spacing: -0.035em;
        color: #fff;
        margin-bottom: 24px;
        opacity: 0;
        transform: translateY(16px);
        animation: heroIn 0.9s ease 0.16s forwards;
      }
      .hero-h1 span {
        display: block;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.92);
      }
      .hero-sub {
        font-family: "Alef", sans-serif;
        font-size: clamp(1rem, 1.4vw, 1.2rem);
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.86);
        max-width: 580px;
        margin-bottom: 44px;
        opacity: 0;
        transform: translateY(12px);
        animation: heroIn 0.9s ease 0.3s forwards;
      }
      .hero-cta {
        opacity: 0;
        transform: translateY(12px);
        animation: heroIn 0.9s ease 0.44s forwards;
      }
      @keyframes heroIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .hero-quiz-link {
        display: block;
        margin-top: 22px;
        color: rgba(249, 249, 247, 0.85);
        font-size: 0.95rem;
        text-decoration: underline;
        text-underline-offset: 4px;
        opacity: 0;
        animation: heroIn 0.9s ease 0.6s forwards;
        transition: color 0.2s;
      }
      .hero-quiz-link:hover {
        color: #fff;
      }

      /* ══ Arrow button — site-wide CTA style ══ */
      .btn-arrow {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        text-decoration: none;
        font-family: "Alef", sans-serif;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
      }
      .btn-arrow-label {
        background: var(--btn-bg, #f3efe7);
        color: var(--btn-fg, #1b3024);
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.2px;
        padding: 15px 30px;
        border-radius: 999px;
        white-space: nowrap;
        transition:
          background 0.25s ease,
          color 0.25s ease;
      }
      .btn-arrow-icon {
        position: relative;
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: var(--btn-bg, #f3efe7);
        color: var(--btn-fg, #1b3024);
        overflow: hidden;
        flex-shrink: 0;
        transition:
          background 0.25s ease,
          color 0.25s ease;
      }
      .btn-arrow-icon svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1);
      }
      .btn-arrow-icon .a1 {
        transform: translate(-50%, -50%);
      }
      .btn-arrow-icon .a2 {
        transform: translate(calc(-50% + 26px), calc(-50% + 26px));
      }
      .btn-arrow:hover .btn-arrow-label,
      .btn-arrow:hover .btn-arrow-icon {
        background: var(--btn-bg-hover, #1b3024);
        color: var(--btn-fg-hover, #f3efe7);
      }
      .btn-arrow:hover .a1 {
        transform: translate(calc(-50% - 26px), calc(-50% - 26px));
      }
      .btn-arrow:hover .a2 {
        transform: translate(-50%, -50%);
      }
      /* Variant for light backgrounds: green pill → terracotta on hover */
      .btn-arrow.on-light {
        --btn-bg: #1b3024;
        --btn-fg: #fff;
        --btn-bg-hover: #c4623a;
        --btn-fg-hover: #fff;
      }
      /* Compact variant (nav bar) */
      .btn-arrow.btn-arrow-sm {
        gap: 5px;
      }
      .btn-arrow.btn-arrow-sm .btn-arrow-label {
        padding: 9px 18px;
        font-size: 0.9rem;
      }
      .btn-arrow.btn-arrow-sm .btn-arrow-icon {
        width: 38px;
        height: 38px;
      }
      .btn-arrow.btn-arrow-sm .btn-arrow-icon svg {
        width: 15px;
        height: 15px;
      }
      .btn-arrow.btn-arrow-sm .btn-arrow-icon .a2 {
        transform: translate(calc(-50% + 19px), calc(-50% + 19px));
      }
      .btn-arrow.btn-arrow-sm:hover .a1 {
        transform: translate(calc(-50% - 19px), calc(-50% - 19px));
      }
      /* משוב לחיצה — הכפתור מאשר שקיבל את המגע */
      .btn-arrow {
        transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .btn-arrow:active {
        transform: scale(0.97);
      }
      .nav-cta:active {
        transform: scale(0.96);
      }
      .wa-float:active {
        transform: scale(0.95);
      }
      .sticky-wa-bar a:active {
        transform: scale(0.98);
      }
      @media (max-width: 420px) {
        .nav-cta-arrow .btn-arrow-icon {
          display: none;
        }
        .nav-cta-arrow .btn-arrow-label {
          padding: 9px 16px;
          font-size: 0.85rem;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .hero-kicker,
        .hero-h1,
        .hero-sub,
        .hero-cta,
        .hero-quiz-link {
          animation: none;
          opacity: 1;
          transform: none;
        }
      }

      @media (max-width: 900px) {
        #hero-inner {
          padding: 116px 22px 72px;
        }
      }
      @media (max-width: 767px) {
        /* גרסת מובייל קלה של תמונת ההירו — גובר על ה-style האינליין */
        #hero-bg {
          background-image: url("images/hero-900.webp") !important;
        }
        #hero-lines span:nth-child(1),
        #hero-lines span:nth-child(4) {
          display: none;
        }
        .btn-arrow-label {
          font-size: 0.95rem;
          padding: 14px 24px;
        }
        .btn-arrow-icon {
          width: 48px;
          height: 48px;
        }
        /* keep "הגינה שחלמת עליה" on one line — no lone-word orphan */
        .hero-h1 {
          font-size: clamp(1.75rem, 7.5vw, 2.7rem);
          margin-bottom: 20px;
        }
        .hero-sub {
          margin-bottom: 36px;
        }
        #hero-inner {
          padding: 108px 16px 64px;
        }
      }

      /* ══════════════════════════════
       SHARED
    ══════════════════════════════ */
      section {
        padding: 96px 48px;
      }
      .section-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--green-dark);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-bottom: 14px;
      }
      .section-tag::before {
        content: "";
        display: inline-block;
        width: 20px;
        height: 2px;
        background: var(--green-accent);
        border-radius: 2px;
      }
      .section-title {
        font-size: clamp(1.75rem, 4vw, 2.7rem);
        font-weight: 900;
        color: var(--green-dark);
        line-height: 1.15;
        margin-bottom: 16px;
        letter-spacing: -0.03em;
      }
      .section-sub {
        font-size: 1.05rem;
        color: var(--text-mid);
        max-width: 520px;
        line-height: 1.75;
        font-weight: 400;
      }
      .section-header {
        margin-bottom: 56px;
      }
      .container {
        max-width: 1120px;
        margin: 0 auto;
      }

      /* ══════════════════════════════
       SERVICES
    ══════════════════════════════ */
      #services {
        background: var(--cream);
      }
      .svc-card {
        position: relative;
        height: 460px;
        border-radius: 20px;
        overflow: hidden;
        transition:
          transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.45s ease;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
      }
      .svc-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 28px 52px rgba(0, 0, 0, 0.22);
      }
      .svc-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
      }
      .svc-card:hover .svc-photo {
        transform: scale(1.07);
      }
      .svc-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to top,
          rgba(13, 24, 18, 0.97) 0%,
          rgba(13, 24, 18, 0.3) 45%,
          transparent 68%
        );
      }
      .svc-content {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 28px 26px;
        z-index: 2;
      }
      .svc-title {
        font-family: "TelAviv", sans-serif;
        font-size: 1.6rem;
        font-weight: 700;
        color: #fff;
        line-height: 1.15;
        letter-spacing: -0.03em;
        margin-bottom: 9px;
      }
      .svc-desc {
        font-size: 0.82rem;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.75;
      }
      .svc-card-link {
        display: block;
        text-decoration: none;
        border-radius: 20px;
      }
      .svc-arrow {
        position: absolute;
        bottom: 26px;
        left: 26px;
        z-index: 3;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        border: 1.5px solid rgba(255, 255, 255, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.3s,
          transform 0.3s;
      }
      .svc-card:hover .svc-arrow {
        background: var(--green-accent);
        border-color: var(--green-accent);
        transform: scale(1.1);
      }

      /* ══════════════════════════════
       GALLERY
    ══════════════════════════════ */
      #gallery {
        background: var(--cream);
      }
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin-bottom: 40px;
      }
      .gallery-item {
        border-radius: var(--radius);
        overflow: hidden;
        aspect-ratio: 4/3;
        position: relative;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
      }
      /* זום בריחוף — רק בעכבר אמיתי; בטאץ' הטאפ פותח את ה-lightbox */
      @media (hover: hover) and (pointer: fine) {
        .gallery-item:hover {
          transform: scale(1.025);
          box-shadow: var(--shadow-md);
        }
        .gallery-item:hover img {
          transform: scale(1.06);
        }
        .gallery-item:hover .gallery-overlay {
          opacity: 1;
        }
      }
      /* שורת שני כפתורי ה-CTA מתחת לגלריה.
         flex ולא text-align: רק flex נותן שליטה על הרווח בין הכפתורים.
         הרווח האופקי (22px) חייב להיות גדול בהרבה מהרווח הפנימי שבין
         התווית לעיגול החץ (7px) — אחרת ארבע הכדוריות נקראות כגוש אחד
         ולא כשני כפתורים נפרדים.
         margin-top: 40px — אותו ריווח שהגלריה הישנה כבר משתמשת בו */
      .gallery-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 16px 22px;
        margin-top: 40px;
      }

      /* ══════════════════════════════
       TESTIMONIALS - COLUMNS
    ══════════════════════════════ */
      #testimonials {
        background: var(--white);
        padding: 96px 48px;
      }
      .testi-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-width: 540px;
        margin: 0 auto 56px;
      }
      .testi-header .testi-chip {
        display: inline-block;
        border: 1.5px solid var(--cream-dark);
        color: var(--text-mid);
        border-radius: 8px;
        padding: 5px 16px;
        font-size: 0.82rem;
        font-weight: 600;
        margin-bottom: 18px;
      }
      .testi-header h2 {
        font-size: clamp(1.9rem, 4vw, 2.7rem);
        font-weight: 900;
        color: var(--green-dark);
        letter-spacing: -0.03em;
        line-height: 1.15;
        margin-bottom: 14px;
      }
      .testi-header p {
        font-size: 1rem;
        color: var(--text-mid);
        line-height: 1.7;
      }

      /* ה-JS מסתיר את הסקשן כשאין ביקורות אמיתיות להציג. הכלל הזה
         מפורש כדי שההסתרה לא תיפול בגלל display שמוגדר במקום אחר. */
      #testimonials[hidden],
      .testi-col[hidden] {
        display: none !important;
      }

      /* תג המקור: הצהרה אחת שמכסה את כל הכרטיסים מעליה. הוא מוקף במסגרת
         ולא צף כטקסט, כי גבול הופך אותו לעצם אחד שאפשר לסמוך עליו —
         ציון, כמה נתנו אותו, ואיפה בודקים. */
      .testi-source {
        margin-top: 36px;
        text-align: center;
      }
      .testi-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        border: 1.5px solid var(--cream-dark);
        border-radius: 999px;
        background: var(--white);
        color: var(--text-mid);
        font-size: 0.92rem;
        text-decoration: none;
        transition:
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }
      .testi-badge:hover,
      .testi-badge:focus-visible {
        border-color: var(--green-dark);
        box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
      }
      .testi-badge-mark {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        direction: ltr;
        font-weight: 700;
        color: var(--green-dark);
      }
      /* הקו המפריד יושב על הציון ולא על סימן המקור, אף שהוא מפריד
         ביניהם. הסיבה: לסימן יש direction: ltr, ולכן inline-end שלו
         מצביע ימינה — אל שולי התג ולא אל הציון. הציון יורש RTL,
         ואצלו inline-start הוא הצד שפונה לסימן. */
      .testi-badge-score {
        font-weight: 900;
        font-size: 1.05rem;
        color: var(--green-dark);
        padding-inline-start: 12px;
        border-inline-start: 1px solid var(--cream-dark);
      }
      .testi-badge-stars {
        color: #f5b301;
        letter-spacing: 1px;
      }
      .testi-badge-count {
        color: var(--text-mid);
      }

      /* שורת הכותרת של הכרטיס: הדירוג בצד אחד, מקורו בצד השני. הם
         נמצאים יחד כי הסימון מסמיך את הכוכבים — כרטיס בלי מקור נראה
         כהמלצה שהאתר כתב לעצמו, וזה מה שהסקשן הזה נוקה ממנו. */
      .testi-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 14px;
      }
      .testi-card-top .testi-stars {
        margin-bottom: 0;
      }
      /* direction: ltr על הצירוף — "Google" הוא שם לועזי, והמוסכמה שלו
         היא סימן ואז שם משמאל לימין. בלי זה הזוג מתפרק לסדר RTL
         ונקרא הפוך למי שמזהה אותו. */
      .testi-src {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        direction: ltr;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--text-mid);
        white-space: nowrap;
      }
      /* הלוגו הרשמי של גוגל, ארבעת המסלולים בצבעי המותג המדויקים,
         מוטבע כ-data URI כדי שלא תצא בקשת רשת חיצונית. וקטור ולא
         ראסטר, ולכן חד בכל גודל ובכל צפיפות מסך. */
      .g-mark {
        display: block;
        flex-shrink: 0;
        /* ביחידות em כדי שהלוגו יגדל עם הטקסט לצידו — הוא נטוע בשני
           הקשרים בגדלים שונים, ויחס קבוע חוסך כוונון בכל אחד בנפרד. */
        width: 1.3em;
        height: 1.3em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%234285F4' d='M17.64,9.20454545 C17.64,8.56636364 17.5827273,7.95272727 17.4763636,7.36363636 L9,7.36363636 L9,10.845 L13.8436364,10.845 C13.635,11.97 13.0009091,12.9231818 12.0477273,13.5613636 L12.0477273,15.8195455 L14.9563636,15.8195455 C16.6581818,14.2527273 17.64,11.9454545 17.64,9.20454545 L17.64,9.20454545 Z'/%3E%3Cpath fill='%2334A853' d='M9,18 C11.43,18 13.4672727,17.1940909 14.9563636,15.8195455 L12.0477273,13.5613636 C11.2418182,14.1013636 10.2109091,14.4204545 9,14.4204545 C6.65590909,14.4204545 4.67181818,12.8372727 3.96409091,10.71 L0.957272727,10.71 L0.957272727,13.0418182 C2.43818182,15.9831818 5.48181818,18 9,18 L9,18 Z'/%3E%3Cpath fill='%23FBBC05' d='M3.96409091,10.71 C3.78409091,10.17 3.68181818,9.59318182 3.68181818,9 C3.68181818,8.40681818 3.78409091,7.83 3.96409091,7.29 L3.96409091,4.95818182 L0.957272727,4.95818182 C0.347727273,6.17318182 0,7.54772727 0,9 C0,10.4522727 0.347727273,11.8268182 0.957272727,13.0418182 L3.96409091,10.71 L3.96409091,10.71 Z'/%3E%3Cpath fill='%23EA4335' d='M9,3.57954545 C10.3213636,3.57954545 11.5077273,4.03363636 12.4404545,4.92545455 L15.0218182,2.34409091 C13.4631818,0.891818182 11.4259091,0 9,0 C5.48181818,0 2.43818182,2.01681818 0.957272727,4.95818182 L3.96409091,7.29 C4.67181818,5.16272727 6.65590909,3.57954545 9,3.57954545 L9,3.57954545 Z'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      /* Columns container with mask gradient */
      .testi-columns {
        display: flex;
        justify-content: center;
        gap: 24px;
        max-height: 720px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
          to bottom,
          transparent,
          black 15%,
          black 85%,
          transparent
        );
        mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
      }
      .testi-col {
        width: 340px;
        flex-shrink: 0;
        overflow: hidden;
      }

      /* ── מצב החלקה (מסך צר) ──────────────────────────────
         רצועה אחת שגוללים בה ביד במקום שלוש עמודות נעות. המסכה
         והגובה המרבי מבוטלים כאן: הם נועדו להסתיר את התפר של
         אנימציה, ובגלילה ידנית הם רק היו חותכים ביקורות. */
      .testi-columns--swipe {
        display: block;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -webkit-mask-image: none;
        mask-image: none;
        /* שוליים שליליים + ריפוד: הכרטיס הראשון מיושר לתוכן העמוד,
           אבל הרצועה עצמה נמשכת עד קצה המסך כדי שההחלקה תרגיש טבעית. */
        margin: 0 -22px;
        padding: 4px 22px 0;
      }
      .testi-columns--swipe::-webkit-scrollbar {
        display: none;
      }
      .testi-columns--swipe .testi-col {
        width: auto;
        max-width: none;
        overflow: visible;
      }
      .testi-columns--swipe .testi-col-inner {
        flex-direction: row;
        align-items: stretch;
        gap: 14px;
        padding-bottom: 0;
        animation: none !important;
        will-change: auto;
      }
      .testi-columns--swipe .testi-card {
        scroll-snap-align: center;
        flex: 0 0 82vw;
        max-width: 340px;
        /* הכרטיסים נמתחים לגובה הארוך שבהם (align-items: stretch), ולכן
           בביקורת קצרה נוצר רווח. הצמדת שורת השם לתחתית הופכת אותו
           לשוליים מכוונים במקום לחצי כרטיס ריק. */
        display: flex;
        flex-direction: column;
      }
      .testi-columns--swipe .testi-card .testi-author {
        margin-top: auto;
      }
      .testi-col-inner {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-bottom: 20px;
        will-change: transform;
      }
      /* Infinite scroll animations */
      .testi-col:nth-child(1) .testi-col-inner {
        animation: testi-scroll 18s linear infinite;
      }
      .testi-col:nth-child(2) .testi-col-inner {
        animation: testi-scroll 22s linear infinite;
      }
      .testi-col:nth-child(3) .testi-col-inner {
        animation: testi-scroll 15s linear infinite;
      }
      @keyframes testi-scroll {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-50%);
        }
      }
      /* Testimonial card */
      .testi-card {
        background: var(--white);
        border-radius: 20px;
        padding: 28px;
        border: 1px solid var(--cream-dark);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      }
      .testi-card .testi-stars {
        color: #f4c430;
        font-size: 0.9rem;
        letter-spacing: 2px;
        margin-bottom: 14px;
      }
      .testi-card .testi-text {
        font-size: 0.93rem;
        color: var(--text-mid);
        line-height: 1.75;
        margin-bottom: 20px;
        font-style: italic;
        /* יש מבקרים שכתבו בכמה שורות. pre-line שומר את השורות שלהם
           וממשיך לגלוש רגיל — הצורה שבה נכתבה הביקורת היא חלק ממנה. */
        white-space: pre-line;
      }
      .testi-card .testi-author {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .testi-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--green-pale);
        border: 2px solid rgba(27, 48, 36, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: var(--green-dark);
        font-size: 0.85rem;
        flex-shrink: 0;
      }
      .testi-name {
        font-weight: 700;
        color: var(--text);
        font-size: 0.88rem;
        line-height: 1.2;
      }
      .testi-role {
        font-size: 0.75rem;
        color: var(--text-light);
        margin-top: 2px;
      }

      /* ══════════════════════════════
       CONTACT
    ══════════════════════════════ */
      #contact {
        background: var(--cream);
      }
      .contact-grid {
        display: grid;
        grid-template-columns: 1fr 1.3fr;
        gap: 72px;
        align-items: start;
      }
      .contact-info-block {
        padding-top: 4px;
      }
      .contact-detail {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 0;
        border-bottom: 1px solid var(--cream-dark);
      }
      .contact-detail:last-of-type {
        border-bottom: none;
      }
      .detail-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        background: var(--green-pale);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .detail-label {
        font-size: 0.75rem;
        color: var(--text-light);
        font-weight: 500;
        margin-bottom: 2px;
      }
      .detail-value {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text);
      }
      .detail-value a {
        color: inherit;
        text-decoration: none;
      }
      .detail-value a:hover {
        color: var(--green-accent);
      }
      .contact-form-card {
        background: var(--white);
        border-radius: var(--radius-lg);
        padding: 44px;
        box-shadow: var(--shadow-md);
        border: 1px solid rgba(0, 0, 0, 0.04);
      }
      .form-heading {
        font-size: 1.4rem;
        font-weight: 900;
        color: var(--green-dark);
        margin-bottom: 6px;
        letter-spacing: -0.3px;
      }
      .form-sub {
        font-size: 0.88rem;
        color: var(--text-light);
        margin-bottom: 30px;
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
      }
      .form-group label {
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--green-dark);
      }
      .form-group input,
      .form-group select,
      .form-group textarea {
        background: var(--cream);
        border: 1.5px solid var(--cream-dark);
        border-radius: 10px;
        padding: 13px 16px;
        font-family: inherit;
        font-size: 0.94rem;
        color: var(--text);
        direction: rtl;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s;
        outline: none;
      }
      .form-group input:focus,
      .form-group select:focus,
      .form-group textarea:focus {
        border-color: var(--green-dark);
        background: white;
        box-shadow: 0 0 0 3px rgba(27, 48, 36, 0.12);
      }
      .form-group textarea {
        resize: vertical;
        min-height: 96px;
      }
      /* כפתור שליחת הטופס — סגנון כפתור החץ (on-light) ברוחב מלא */
      .btn-submit {
        width: 100%;
        margin-top: 6px;
      }
      .btn-submit .btn-arrow-label {
        flex: 1;
        text-align: center;
        padding-top: 17px;
        padding-bottom: 17px;
      }
      .btn-submit[disabled] {
        opacity: 0.65;
        pointer-events: none;
      }
      .form-note {
        text-align: center;
        font-size: 0.77rem;
        color: var(--text-light);
        margin-top: 12px;
      }
      .form-success {
        display: none;
        text-align: center;
        padding: 44px 20px;
      }
      .success-icon {
        display: flex;
        justify-content: center;
        margin-bottom: 16px;
      }
      .form-success h3 {
        font-size: 1.35rem;
        font-weight: 900;
        color: var(--green-dark);
        margin-bottom: 8px;
      }
      .form-success p {
        color: var(--text-mid);
        font-size: 0.93rem;
        line-height: 1.7;
      }
      /* Inline form errors */
      .field-error {
        display: block;
        color: #c0392b;
        font-size: 0.78rem;
        margin-top: 2px;
      }
      .form-group.has-error input,
      .form-group.has-error select,
      .form-group.has-error textarea {
        border-color: #c0392b;
      }
      .form-error-banner {
        display: none;
        background: #fdecea;
        color: #9b2c1e;
        border: 1px solid #f5c6c0;
        border-radius: 10px;
        padding: 12px 14px;
        font-size: 0.85rem;
        margin-top: 12px;
        text-align: center;
      }
      .form-error-banner.show {
        display: block;
      }

      /* ══════════════════════════════
       FOOTER
    ══════════════════════════════ */
      footer {
        background: var(--green-dark);
        color: rgba(255, 255, 255, 0.55);
        padding: 48px 48px 36px;
        text-align: center;
      }
      .footer-logo {
        font-size: 1.4rem;
        font-weight: 900;
        color: white;
        margin-bottom: 14px;
        letter-spacing: -0.5px;
      }
      .footer-logo em {
        font-style: normal;
        color: var(--green-accent);
      }
      .footer-tagline {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.45);
        margin-bottom: 28px;
      }
      .footer-links {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 28px;
        flex-wrap: wrap;
      }
      .footer-links a {
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        font-size: 0.87rem;
        font-weight: 500;
        padding: 4px 12px;
        border-radius: 6px;
        transition:
          color 0.2s,
          background 0.2s;
      }
      .footer-links a:hover {
        color: var(--green-accent);
        background: rgba(255, 255, 255, 0.07);
      }
      .footer-divider {
        width: 48px;
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
        margin: 0 auto 24px;
      }
      .footer-copy {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.3);
      }

      /* ══ BLOG SECTION ══ */
      #blog {
        background: var(--white);
      }
      .blog-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        margin-top: 48px;
      }
      .blog-card {
        background: var(--cream);
        border-radius: 20px;
        overflow: hidden;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        transition:
          transform 0.3s,
          box-shadow 0.3s;
        box-shadow: var(--shadow-sm);
      }
      .blog-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-md);
      }
      /* Featured first card: image fills the right side, text column on the left */
      .blog-card:first-child {
        grid-column: span 2;
        position: relative;
        flex-direction: column;
        min-height: 340px;
        padding-right: 46%;
      }
      .blog-card:first-child .blog-card-img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 46%;
        height: 100%;
        min-height: 0;
      }
      .blog-card:first-child .blog-card-tag {
        padding-top: 32px;
      }
      .blog-card:first-child .blog-card-title {
        font-size: 1.6rem;
      }
      .blog-card:first-child .blog-card-desc {
        font-size: 1rem;
        flex: 1;
      }
      .blog-card-tag {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--green-accent);
        padding: 24px 24px 0;
        display: block;
      }
      .blog-card-title {
        font-family: "TelAviv", sans-serif;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--green-dark);
        padding: 12px 24px;
        line-height: 1.3;
      }
      .blog-card-desc {
        font-size: 0.9rem;
        color: var(--text-light);
        padding: 0 24px 24px;
        line-height: 1.7;
      }
      .blog-card-footer {
        border-top: 1px solid var(--cream-dark);
        padding: 14px 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
      }
      .blog-card-read {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--green-accent);
      }
      @media (max-width: 900px) {
        /* mobile: hide the on-home articles section entirely (full blog lives on blog.html) */
        #blog {
          display: none;
        }
      }

      /* ══════════════════════════════
       FLOATING WHATSAPP
    ══════════════════════════════ */
      .wa-float {
        position: fixed;
        bottom: 32px;
        left: 32px;
        z-index: 500;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: #25d366;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition:
          transform 0.2s,
          box-shadow 0.2s;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
      }
      .wa-float:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 32px rgba(37, 211, 102, 0.6);
      }
      .wa-float::before,
      .wa-float::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid rgba(37, 211, 102, 0.5);
        animation: wa-pulse 2.8s ease-out infinite;
      }
      .wa-float::after {
        animation-delay: 1.4s;
      }
      @keyframes wa-pulse {
        0% {
          transform: scale(1);
          opacity: 0.8;
        }
        100% {
          transform: scale(1.9);
          opacity: 0;
        }
      }

      /* STICKY BAR (mobile) */
      .sticky-wa-bar {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 499;
        background: #25d366;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
        text-align: center;
      }
      .sticky-wa-bar a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: white;
        font-family: inherit;
        font-size: 1rem;
        font-weight: 800;
        text-decoration: none;
      }

      /* ══════════════════════════════
       FEATURES BENTO
    ══════════════════════════════ */
      #features {
        background: var(--white);
      }
      .bento-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
      }
      .bento-card {
        background: var(--cream);
        border-radius: var(--radius-lg);
        border: 1px solid rgba(0, 0, 0, 0.045);
        overflow: hidden;
        transition:
          transform 0.3s ease,
          box-shadow 0.3s ease;
      }
      .bento-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
      }
      .bento-c2 {
        grid-column: span 2;
      }
      .bento-c3 {
        grid-column: span 3;
      }

      /* Stat card */
      .bento-stat {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 36px 20px;
        min-height: 248px;
      }
      .bento-stat-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .bento-oval-wrap {
        position: relative;
        width: 210px;
        height: 84px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .bento-oval-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        color: rgba(27, 48, 36, 0.08);
      }
      .bento-big-number {
        font-family: "TelAviv", sans-serif;
        font-size: 3.2rem;
        font-weight: 900;
        color: var(--green-dark);
        letter-spacing: -0.04em;
        position: relative;
        z-index: 1;
      }
      .bento-stat-label {
        font-family: "TelAviv", sans-serif;
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--green-dark);
        margin-top: 18px;
      }

      /* Icon cards */
      .bento-icon-card {
        padding: 28px;
        display: flex;
        flex-direction: column;
        min-height: 248px;
      }
      .bento-ring {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: 1px solid rgba(27, 48, 36, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        background: rgba(27, 48, 36, 0.03);
      }
      .bento-ring::before {
        content: "";
        position: absolute;
        inset: -7px;
        border-radius: 50%;
        border: 1px solid rgba(27, 48, 36, 0.06);
      }
      .bento-icon-title {
        font-family: "TelAviv", sans-serif;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--green-dark);
        text-align: center;
        margin-bottom: 8px;
      }
      .bento-icon-desc {
        font-size: 0.87rem;
        color: var(--text-mid);
        text-align: center;
        line-height: 1.75;
      }

      /* Chart bars */
      .bento-chart-wrap {
        flex: 1;
        display: flex;
        align-items: flex-end;
        gap: 5px;
        padding: 0 4px;
        min-height: 80px;
        margin-bottom: 18px;
      }
      .bento-bar {
        flex: 1;
        border-radius: 4px 4px 0 0;
        background: rgba(27, 48, 36, 0.13);
        transition: background 0.3s;
      }
      .bento-card:hover .bento-bar {
        background: rgba(27, 48, 36, 0.25);
      }
      .bento-bar.hi {
        background: var(--green-dark);
      }
      .bento-card:hover .bento-bar.hi {
        background: var(--green-dark);
      }

      /* Wide cards */
      .bento-wide-card {
        padding: 32px;
      }
      .bento-wide-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        height: 100%;
      }
      .bento-left {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .bento-ring-sm {
        position: relative;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid rgba(27, 48, 36, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(27, 48, 36, 0.03);
        margin-bottom: 28px;
      }
      .bento-ring-sm::before {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 1px solid rgba(27, 48, 36, 0.06);
      }
      .bento-wide-title {
        font-family: "TelAviv", sans-serif;
        font-size: 1rem;
        font-weight: 800;
        color: var(--green-dark);
        margin-bottom: 8px;
        line-height: 1.3;
      }
      .bento-wide-desc {
        font-size: 0.86rem;
        color: var(--text-mid);
        line-height: 1.75;
      }

      /* Process steps */
      .bento-process {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: 12px;
        border-right: 1px solid var(--cream-dark);
      }
      .bento-step {
        display: flex;
        gap: 12px;
      }
      .bento-step-marker {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
      }
      .bento-step-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 2px solid rgba(27, 48, 36, 0.28);
        background: var(--cream);
        flex-shrink: 0;
        margin-top: 3px;
      }
      .bento-step-dot.done {
        background: var(--green-dark);
        border-color: var(--green-dark);
      }
      .bento-connector {
        width: 2px;
        flex: 1;
        background: var(--cream-dark);
        margin: 3px 0;
        min-height: 22px;
      }
      .bento-step:last-child .bento-connector {
        display: none;
      }
      .bento-step-body {
        padding-bottom: 18px;
      }
      .bento-step:last-child .bento-step-body {
        padding-bottom: 0;
      }
      .bento-step-label {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--green-dark);
      }
      .bento-step-sub {
        font-size: 0.75rem;
        color: var(--text-light);
        margin-top: 2px;
        line-height: 1.4;
      }

      /* Team */
      .bento-team {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
        padding-right: 12px;
        border-right: 1px solid var(--cream-dark);
      }
      .bento-member {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .bento-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--green-pale);
        border: 2px solid rgba(27, 48, 36, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 0.85rem;
        color: var(--green-dark);
        flex-shrink: 0;
      }
      .bento-member-name {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--text);
      }
      .bento-member-role {
        font-size: 0.73rem;
        color: var(--text-light);
        margin-top: 1px;
      }
      .bento-badge {
        font-size: 0.71rem;
        padding: 3px 9px;
        border: 1px solid var(--cream-dark);
        border-radius: 6px;
        background: white;
        color: var(--text-mid);
        white-space: nowrap;
        margin-right: auto;
      }

      /* Responsive bento */
      @media (max-width: 1024px) {
        .bento-c2 {
          grid-column: span 3;
        }
        .bento-c3 {
          grid-column: span 6;
        }
        .bento-wide-inner {
          grid-template-columns: 1fr;
        }
        .bento-process,
        .bento-team {
          border-right: none;
          border-top: 1px solid var(--cream-dark);
          padding-right: 0;
          padding-top: 16px;
          flex-direction: row;
          flex-wrap: wrap;
          gap: 10px;
        }
        .bento-step-marker,
        .bento-connector {
          display: none;
        }
        .bento-step {
          align-items: center;
        }
        .bento-step-body {
          padding-bottom: 0;
        }
      }
      @media (max-width: 900px) {
        /* mobile: keep only 100+, ידע אגרואקולוגי, מתכנון לביצוע — hide chart & team cards */
        .bento-grid > .bento-card:nth-child(3),
        .bento-grid > .bento-card:nth-child(5) {
          display: none;
        }
        /* the ≤1024 rule turns the steps into a centered flex-row (misaligned on phones);
         restore a clean right-aligned vertical list with even spacing */
        .bento-process {
          flex-direction: column;
          align-items: stretch;
          justify-content: flex-start;
          gap: 18px;
        }
        .bento-process .bento-step {
          width: 100%;
        }
        .bento-process .bento-step-body {
          width: 100%;
          text-align: right;
        }
      }
      @media (max-width: 680px) {
        .bento-c2 {
          grid-column: span 6;
        }
        /* compact the stacked bento on phones — drop the tall min-heights */
        .bento-grid {
          gap: 12px;
        }
        .bento-stat {
          padding: 26px 18px;
          min-height: 0;
        }
        .bento-big-number {
          font-size: 2.7rem;
        }
        .bento-stat-label {
          font-size: 1.25rem;
          margin-top: 12px;
        }
        .bento-icon-card {
          padding: 24px 22px;
          min-height: 0;
        }
        .bento-ring {
          width: 56px;
          height: 56px;
          margin-bottom: 14px;
        }
        .bento-chart-wrap {
          min-height: 64px;
          margin-bottom: 14px;
        }
        .bento-wide-card {
          padding: 24px 22px;
        }
        .bento-ring-sm {
          margin-bottom: 16px;
        }
        .bento-process,
        .bento-team {
          padding-top: 14px;
          gap: 12px;
        }
      }

      /* ══════════════════════════════
       GALLERY FILTER
    ══════════════════════════════ */
      .gallery-filter {
        display: flex;
        gap: 10px;
        margin-bottom: 36px;
        flex-wrap: wrap;
      }
      .gallery-filter-btn {
        background: transparent;
        border: 1.5px solid var(--cream-dark);
        border-radius: 50px;
        padding: 9px 22px;
        font-family: inherit;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--text-mid);
        cursor: pointer;
        transition:
          background 0.2s,
          border-color 0.2s,
          color 0.2s;
      }
      .gallery-filter-btn.active,
      .gallery-filter-btn:hover {
        background: var(--green-dark);
        border-color: var(--green-dark);
        color: white;
      }
      .gallery-item.hidden {
        display: none;
      }

      /* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */
      @media (max-width: 1024px) {
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        /* מספר העמודות נקבע ב-JS, לא כאן — ראו ההערה ליד matchMedia.
           כלל display:none שישב כאן הסתיר עמודה שה-JS כבר מילא. */
        .testi-columns {
          gap: 16px;
        }
        .testi-col {
          width: 300px;
        }
      }
      @media (max-width: 900px) {
        nav {
          padding: 14px 22px;
        }
        .nav-phone {
          display: none;
        }
        section {
          padding: 52px 22px;
        }
        #testimonials {
          padding: 52px 22px;
        }
        .section-header {
          margin-bottom: 34px;
        }
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        /* mobile: hide phone/area/response-time rows — keep heading + WhatsApp + form */
        #contact .contact-details {
          display: none;
        }
        .gallery-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .gallery-filter {
          justify-content: center;
          gap: 8px;
          margin-bottom: 26px;
        }
        .services-grid {
          grid-template-columns: 1fr;
        }
        .testi-col {
          width: 100%;
          max-width: 380px;
        }
      }
      @media (max-width: 600px) {
        .form-row {
          grid-template-columns: 1fr;
        }
        .gallery-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .contact-form-card {
          padding: 28px 20px;
        }
        footer {
          padding: 40px 22px 100px;
        }
        .wa-float {
          display: none;
        }
        .sticky-wa-bar {
          display: block;
        }
      }

      /* ══════════════════════════════
       LOGOS GRID
    ══════════════════════════════ */
      #logos {
        padding: 72px 48px;
        background: var(--cream);
      }
      #logos .logos-header {
        text-align: center;
        margin-bottom: 44px;
      }
      .logos-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        max-width: 960px;
        margin: 0 auto;
        border-top: 1px solid var(--cream-dark);
        border-right: 1px solid var(--cream-dark);
      }
      .logos-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 22px 24px;
        border-bottom: 1px solid var(--cream-dark);
        border-left: 1px solid var(--cream-dark);
        min-height: 76px;
      }
      .logos-item img {
        height: 30px;
        width: auto;
        max-width: 100px;
        object-fit: contain;
        filter: grayscale(1) opacity(0.45);
        transition: filter 0.3s;
      }
      .logos-item:hover img {
        filter: grayscale(0) opacity(1);
      }
      /* KG4 לוגו ריבועי — מעט גדול יותר כדי לאזן מול הוורדמרקים הרחבים */
      .logos-item img[alt="KG4"] {
        height: 44px;
        max-width: 120px;
      }
      /* צמח המרמן — לוגו צפוף עם שורת תיוג, מוגדל לקריאוּת */
      .logos-item img[alt="צמח המרמן"] {
        height: 46px;
        max-width: 130px;
      }
      @media (max-width: 768px) {
        #logos {
          padding: 32px 22px;
        }
        #logos .logos-header {
          margin-bottom: 20px;
        }
        #logos .logos-header .section-title {
          font-size: 1.3rem;
        }
        .logos-grid {
          grid-template-columns: repeat(3, 1fr);
          max-width: 360px;
        }
        .logos-item {
          padding: 9px 8px;
          min-height: 42px;
        }
        .logos-item img {
          height: 19px;
          max-width: 62px;
        }
        .logos-item img[alt="KG4"] {
          height: 26px;
          max-width: 66px;
        }
        .logos-item img[alt="צמח המרמן"] {
          height: 28px;
          max-width: 74px;
        }
      }
      /* keep a tidy 3-col on phones; show 9 (3 clean rows), the rest hide */
      @media (max-width: 480px) {
        .logos-grid > .logos-item:nth-child(n + 10) {
          display: none;
        }
      }

      /* ══════════════════════════════
       SHOWREEL (VIDEO)
    ══════════════════════════════ */
      #showreel {
        background: var(--green-dark);
        color: #fff;
        overflow: hidden;
      }
      #showreel .section-header {
        text-align: center;
        margin-bottom: 48px;
      }
      #showreel .section-title {
        color: #fff;
      }
      #showreel .section-sub {
        color: rgba(255, 255, 255, 0.7);
        margin-left: auto;
        margin-right: auto;
      }
      .showreel-eyebrow {
        display: inline-block;
        font-family: "TelAvivModernist", "Alef", sans-serif;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--green-accent);
        margin-bottom: 16px;
      }
      .showreel-grid {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 32px;
      }
      .showreel-card {
        position: relative;
        margin: 0;
        flex: 0 1 348px;
        max-width: 348px;
        aspect-ratio: 9 / 16;
        border-radius: var(--radius-lg);
        overflow: hidden;
        background: #0c160f;
        box-shadow: 0 34px 64px rgba(0, 0, 0, 0.48);
        transition:
          transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.45s ease;
      }
      .showreel-card--offset {
        margin-top: 52px;
      }
      .showreel-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 44px 80px rgba(0, 0, 0, 0.58);
      }
      .showreel-card--offset:hover {
        transform: translateY(44px);
      }
      .showreel-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .showreel-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        pointer-events: none;
      }
      .showreel-cap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 46px 20px 18px;
        background: linear-gradient(to top, rgba(8, 18, 12, 0.8) 0%, rgba(8, 18, 12, 0) 100%);
        color: #fff;
        font-family: "TelAvivModernist", "Alef", sans-serif;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.2px;
        text-align: right;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .showreel-cap::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--green-accent);
        box-shadow: 0 0 0 3px rgba(196, 98, 58, 0.3);
        flex-shrink: 0;
      }
      @media (max-width: 640px) {
        .showreel-grid {
          gap: 12px;
        }
        .showreel-card {
          flex: 1 1 0;
          max-width: none;
          border-radius: var(--radius);
        }
        .showreel-card--offset {
          margin-top: 28px;
        }
        .showreel-card:hover,
        .showreel-card--offset:hover {
          transform: none;
        }
        .showreel-cap {
          font-size: 0.72rem;
          padding: 30px 12px 12px;
          gap: 6px;
        }
        .showreel-cap::before {
          width: 5px;
          height: 5px;
        }
      }

      /* ══════════════════════════════
       SCROLL REVEAL
    ══════════════════════════════ */
      .js-loaded .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition:
          opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
          transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .reveal.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        transition-delay: 0.08s;
      }
      .reveal-delay-2 {
        transition-delay: 0.16s;
      }
      .reveal-delay-3 {
        transition-delay: 0.24s;
      }

      /* ══════════════════════════════
       BENTO DARK CARD
    ══════════════════════════════ */
      .bento-dark {
        background: var(--green-dark) !important;
      }
      .bento-dark .bento-oval-svg {
        color: rgba(255, 255, 255, 0.14);
      }
      .bento-dark .bento-big-number {
        color: #fff;
      }
      .bento-dark .bento-stat-label {
        color: rgba(255, 255, 255, 0.72);
      }

      /* ══════════════════════════════
       SERVICES ASYMMETRIC GRID
    ══════════════════════════════ */
      .services-grid {
        display: grid;
        grid-template-columns: 1.45fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 20px;
      }
      .services-grid .svc-card-link:first-child {
        grid-row: span 2;
      }
      .services-grid .svc-card-link:first-child .svc-card {
        height: 100%;
        min-height: 480px;
      }
      .services-grid .svc-card-link:not(:first-child) .svc-card {
        height: 225px;
      }
      @media (max-width: 900px) {
        .services-grid {
          grid-template-columns: 1fr;
          grid-template-rows: auto;
        }
        .services-grid .svc-card-link:first-child {
          grid-row: span 1;
        }
        .services-grid .svc-card-link:first-child .svc-card {
          min-height: unset;
          height: 360px;
        }
        .services-grid .svc-card-link:not(:first-child) .svc-card {
          height: 300px;
        }
      }
      @media (max-width: 520px) {
        .services-grid .svc-card-link:first-child .svc-card {
          height: 300px;
        }
        .services-grid .svc-card-link:not(:first-child) .svc-card {
          height: 260px;
        }
      }

      /* ══════════════════════════════
       BLOG CARD IMAGE
    ══════════════════════════════ */
      .blog-card-img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
      }
      @media (max-width: 900px) {
        .blog-card-img {
          height: 200px;
        }
      }

      /* ══════════════════════════════
       REDUCED MOTION
    ══════════════════════════════ */
      @media (prefers-reduced-motion: reduce) {
        .testi-col .testi-col-inner {
          animation: none !important;
        }
        .wa-float::before,
        .wa-float::after {
          animation: none !important;
        }
        .reveal {
          opacity: 1 !important;
          transform: none !important;
          transition: none !important;
        }
      }
      /* ══ FAQ (תואם shared.css) ══ */
      .faq-section {
        background: var(--cream);
        padding: 72px 48px;
      }
      .faq-section h2 {
        font-family: "TelAviv", sans-serif;
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--green-dark);
        text-align: center;
        margin-bottom: 40px;
      }
      .faq-wrap {
        max-width: 720px;
        margin: 0 auto;
      }
      .faq-item {
        border-bottom: 1px solid var(--cream-dark);
        display: grid;
        grid-template-rows: auto 0fr;
        transition: grid-template-rows 250ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .faq-item.open {
        grid-template-rows: auto 1fr;
      }
      .faq-q {
        width: 100%;
        background: none;
        border: none;
        text-align: right;
        padding: 20px 0;
        font-family: "TelAviv", sans-serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--green-dark);
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        transition: color 150ms ease;
      }
      .faq-q:hover {
        color: var(--green-accent);
      }
      .faq-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        transition: transform 0.2s;
      }
      .faq-item.open .faq-icon {
        transform: rotate(45deg);
      }
      .faq-a {
        display: block;
        overflow: hidden;
        min-height: 0;
        padding: 0;
        opacity: 0;
        font-size: 1rem;
        color: var(--text-mid);
        line-height: 1.8;
        transition:
          opacity 200ms ease-out,
          padding 250ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .faq-a a {
        color: var(--green-dark);
        font-weight: 700;
      }
      .faq-item.open .faq-a {
        padding: 0 0 20px;
        opacity: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        .faq-item,
        .faq-a {
          transition: none;
        }
      }
      @media (max-width: 900px) {
        .faq-section {
          padding: 52px 22px;
        }
      }
      /* ══ LIGHTBOX לגלריה ══ */
      .gallery-item {
        cursor: zoom-in;
      }
      .lb-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(14, 22, 16, 0.93);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        transition:
          opacity 150ms ease-out,
          visibility 0s linear 150ms;
      }
      .lb-backdrop.open {
        visibility: visible;
        opacity: 1;
        transition:
          opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
          visibility 0s;
      }
      .lb-backdrop .lb-img {
        scale: 0.98;
        transition: scale 200ms cubic-bezier(0.23, 1, 0.32, 1);
      }
      .lb-backdrop.open .lb-img {
        scale: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-backdrop .lb-img {
          scale: 1;
          transition: none;
        }
      }
      .lb-img {
        max-width: 92vw;
        max-height: 86vh;
        border-radius: 12px;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
      }
      .lb-btn {
        position: fixed;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #fff;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
      }
      .lb-btn:hover {
        background: rgba(255, 255, 255, 0.22);
      }
      .lb-close {
        top: 18px;
        inset-inline-end: 18px;
      }
      .lb-prev {
        inset-inline-start: 14px;
        top: 50%;
        transform: translateY(-50%);
      }
      .lb-next {
        inset-inline-end: 14px;
        top: 50%;
        transform: translateY(-50%);
      }
      @media (prefers-reduced-motion: reduce) {
        .lb-btn {
          transition: none;
        }
      }