/* home.css - front-page specific styles
   Pixel-perfect from Figma frame "Home" 39:61 (1440x7283px)
   Rewrote: 2026-06-15. Old split-hero replaced with full-width centered hp-* classes.
   ---------------------------------------------------------------- */

/* ================================================================
   1. HERO - Full-width centered (Figma 39:509, 716px tall)
================================================================ */
.hp-hero {
  position: relative;
  min-height: calc(716px + var(--nav-height, 72px));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg-dark);
}

/* Background layer */
.hp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hp-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hp-hero__video-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-dark);
}

/* Dark gradient overlay so text stays readable */
.hp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(36,36,36,.55) 0%,
    rgba(36,36,36,.70) 60%,
    rgba(36,36,36,.85) 100%
  );
}

/* Content - centered on top of BG */
.hp-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--nav-height, 72px) var(--space-6) var(--space-10);
  max-width: 820px;
  margin-inline: auto;
  gap: var(--space-8);
}

.hp-hero__text { display: flex; flex-direction: column; gap: var(--space-5); }

/* ── Hero entrance (interfaces-that-feel): title fades+rises 600ms ease-out,
   buttons + stat-strip stagger 80ms behind it. JS adds .is-ready on load. ── */
.hp-hero__text,
.hp-hero__actions,
.hp-hero__stats {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hp-hero__content.is-ready .hp-hero__text    { opacity: 1; transform: none; }
.hp-hero__content.is-ready .hp-hero__actions { opacity: 1; transform: none; transition-delay: 80ms; }
.hp-hero__content.is-ready .hp-hero__stats   { opacity: 1; transform: none; transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  .hp-hero__text,
  .hp-hero__actions,
  .hp-hero__stats {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.hp-hero__content h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem); /* 56px at 1440 per Figma node 39:97 */
  font-weight: 800; /* ExtraBold per Figma: font-['Noto_Sans_Hebrew:ExtraBold'] */
  color: #ffffff;
  line-height: 1.05; /* leading-[59px] / 56px = 1.05 per Figma */
  margin: 0;
}

.hp-hero__sub {
  font-size: clamp(1rem, 1.5vw, 1.5rem); /* 24px at 1440 per Figma node 39:119 */
  font-weight: 400;
  color: rgba(255,255,255,.82); /* יונתن: .7 דהוי מדי על וידאו כהה - .82 חד יותר בלי לשבור היררכיה */
  line-height: 1.46; /* leading-[35px] / 24px ≈ 1.46 per Figma */
  max-width: 520px; /* w-[432px] in Figma, scaled to fit centered layout */
  margin: 0 auto;
}

/* Two CTA buttons */
.hp-hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

/* Outline-white pill (secondary) — "השירותים שלנו". h-48px ליישור עם ה-CTA המלא */
.btn-hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 80px;
  border: 1.5px solid rgba(255,255,255,.9);
  color: #ffffff;
  font-size: 1rem;          /* 16px per Figma node 39:505 */
  font-weight: 700;         /* Bold per Figma */
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn-hero-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  transform: translateY(-1px);
}
.btn-hero-outline:active { transform: translateY(0); }

/* Primary CTA — "דברו איתנו": מלא ליים #c3e85b, טקסט #111. primary אחד ברור (יונתن P1-1).
   h-48px, radius 80px. */
.btn-hero-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 80px;
  border: none;
  background: var(--color-cta, #c3e85b);
  color: #111111;
  font-size: 1rem;          /* 16px per Figma */
  font-weight: 700;         /* Bold per Figma node 39:1062 */
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur-base) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.btn-hero-fill:hover {
  background: var(--color-cta-dark, #acd148);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(195,232,91,.35);
}
.btn-hero-fill:active { transform: translateY(0); }

/* ── Stat-strip — thin row under the buttons (P2-1). 3 numbers, lime accent. ── */
.hp-hero__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
  margin-top: var(--space-2);
}
.hp-hero__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: rgba(255,255,255,.9);
  font-size: 0.9375rem;   /* 15px */
  font-weight: 400;
  white-space: nowrap;
}
.hp-hero__stat b {
  color: var(--color-cta, #c3e85b);
  font-weight: 700;
  font-size: 1.0625rem;   /* 17px */
}
/* dividers between stats (not after the last) */
.hp-hero__stat:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 14px;
  margin-inline-start: clamp(20px, 4vw, 44px);
  background: rgba(255,255,255,.22);
}
@media (max-width: 560px) {
  .hp-hero__stats { gap: 14px; }
  .hp-hero__stat:not(:last-child)::after { display: none; }
}

/* ================================================================
   2. MARQUEE - logos on light BG (Figma: #f5f5f5, top~754px)
================================================================ */
.hp-marquee {
  background: #f5f5f5;
  padding-block: 32px;
  overflow: hidden;
}

.hp-marquee__track-wrap {
  position: relative;
  overflow: hidden;
  /* LTR so the wide track is anchored to the LEFT and overflows RIGHT;
     translateX(-50%) then always reveals duplicated content (no right-side gap). */
  direction: ltr;
  /* Fade out at edges */
  -webkit-mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0,0,0,1) 12%,
    rgba(0,0,0,1) 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to left,
    transparent 0%,
    rgba(0,0,0,1) 12%,
    rgba(0,0,0,1) 88%,
    transparent 100%
  );
}

.hp-marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  /* LTR layout so the track grows rightward (off-screen) and translateX(-50%)
     always reveals duplicated content - no empty gap on RTL pages. */
  direction: ltr;
  animation: hp-marquee-scroll 80s linear infinite;
  will-change: transform;
}

/* Pause on hover for accessibility */
.hp-marquee:hover .hp-marquee__track { animation-play-state: paused; }

@keyframes hp-marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hp-marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 56px;
  /* wide spacing per-item so one set fills the viewport (less visible repetition) + seamless seam */
  margin-inline-start: clamp(80px, 9vw, 150px);
}

.hp-marquee__item img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
  /* Figma: full-color logos on the light band - no grayscale, full opacity. */
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

.hp-marquee__text {
  font-size: var(--size-sm, .875rem);
  font-weight: var(--weight-semi, 600);
  color: rgba(0,0,0,.4);
  white-space: nowrap;
}

/* ================================================================
   3. PROJECTS - 3 equal dark cards (Figma: 386x443px, r-40px)
================================================================ */
.hp-projects .hp-projects__inner { /* container already handles width */ }

.hp-section-header {
  margin-bottom: var(--space-10);
}

/* Figma: Projects + Values section headers are centered (tabs + magazine stay right-aligned). */
.hp-projects .hp-section-header,
.values-section .hp-section-header {
  text-align: center;
}
.hp-projects .hp-section-header .hp-section-sub,
.values-section .hp-section-header .hp-section-sub {
  margin-inline: auto;
}

.hp-section-title {
  /* Figma: 40px / leading-[56px] per nodes 39:108, 39:104.
     משקל 600 דיפולט (יונתن P1-5): 700/800 הרגישו כבדים מדי בכל מסך פנימי. */
  font-size: clamp(1.75rem, 2.5vw, 2.5rem); /* 40px at 1440 */
  font-weight: 600;
  color: #242424;
  line-height: 1.4; /* leading-[56px] / 40px = 1.4 */
  margin-bottom: var(--space-4);
}

/* מבטא ליים מדוד (P2-2): קו 2px תחת מילת-מפתח אחת בכותרת סקציה.
   עוטפים את המילה ב-<span class="accent-underline"> ידנית - אחת בלבד, לא הצפה. */
.accent-underline {
  position: relative;
  white-space: nowrap;
}
.accent-underline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-cta, #c3e85b);
  border-radius: 2px;
}

.hp-section-sub {
  /* Figma: 20px / Regular / color #424242 / leading-[31px] */
  font-size: 1.25rem; /* 20px */
  font-weight: 400;
  color: #424242;
  line-height: 1.55; /* 31/20 */
  max-width: 811px; /* matches Figma w-[811px] for projects sub */
}

/* Three equal columns */
.hp-projects__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: var(--space-10);
}

/* Each card - photo card with overlay */
.hp-project-card {
  position: relative;
  height: 443px;
  border-radius: 40px;
  overflow: hidden;
  background: var(--color-bg-dark);
  transition:
    transform var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
/* hover-lift אחיד (מרשם תנועה 3) - רק עם עכבר, לא נדבק במגע */
@media (hover: hover) {
  .hp-project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-project-card { transition: none; }
  .hp-project-card:hover { transform: none; }
}

.hp-project-card__link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
  position: relative;
}

.hp-project-card__image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hp-project-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow, .4s) var(--ease);
}

.hp-project-card:hover .hp-project-card__image img {
  transform: scale(1.05);
}

.hp-project-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

/* Gradient overlay: transparent top -> rgba(0,0,0,.81) bottom */
.hp-project-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.3) 45%,
    rgba(0,0,0,.81) 100%
  );
  transition: background var(--dur-base) var(--ease);
}

.hp-project-card:hover .hp-project-card__overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,.1) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.88) 100%
  );
}

/* Content block - positioned at bottom of card */
.hp-project-card__content {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  right: 24px;
  left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-project-card__title {
  /* Figma: 28px / Regular — location is Bold, title is Regular */
  font-size: 1.75rem;    /* 28px per Figma */
  font-weight: 400;      /* Regular per Figma */
  color: #ffffff;
  line-height: 1.3;
  margin: 0;
}

.hp-project-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.25rem;    /* 20px per Figma */
  font-weight: 700;      /* Bold per Figma node location text */
  color: #ffffff;
}

.hp-project-card__location svg {
  flex-shrink: 0;
  opacity: .85;
}

/* CTA below grid */
.section-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-8);
}

/* ================================================================
   4. TABS - "שלושה תחומים" (Figma: dark 1244x655px, r-32px)
   Video full-bleed + gradient overlay + icon + watermark + content
================================================================ */
.hp-tabs {
  background: var(--color-bg-light, #f5f5f5); /* פס תוכן = אפור האתר, לא לבן */
}

.hp-tabs__inner { /* container */ }

.hp-tabs__header {
  margin-bottom: var(--space-10);
  max-width: 860px;
}

.hp-tabs__header .hp-section-title {
  color: var(--color-text-dark, #242424);
}

.hp-tabs__header .hp-section-sub {
  color: var(--color-text-muted, #777);
}

/* Dark container - full-bleed video inside */
.hp-tabs__container {
  position: relative;
  background: #141414;
  border-radius: 32px;
  height: 655px;
  overflow: hidden;
}

/* Tab nav - absolute top-right */
.hp-tabs__nav {
  position: absolute;
  top: 40px;
  right: 40px;
  display: flex;
  gap: 10px;
  z-index: 20;
  /* Figma order (right->left): E-R&D, E-VISION, E-WASH. DOM order is
     E-WASH, E-VISION, E-R&D, so natural RTL row places E-WASH leftmost. */
}

/* Tab button - subtle, minimal
   Figma: small uppercase, Poppins, thin border, inactive = muted */
.hp-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255,255,255,.55);
  font-family: var(--font-english, 'Poppins', sans-serif);
  font-size: 0.8125rem;  /* 13px - subtle, not dominant */
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color 220ms ease,
    background 220ms ease,
    color 220ms ease,
    transform 120ms ease;
}

.hp-tab-btn:hover {
  border-color: rgba(255,255,255,.5);
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.3);
}
.hp-tab-btn:active { transform: scale(0.97); }

/* Active tab: border in division color, light tint bg, white text */
.hp-tab-btn--active {
  border-color: var(--tab-active-color, rgba(255,255,255,.7));
  color: #ffffff;
  background: color-mix(in srgb, var(--tab-active-color, rgba(255,255,255,.7)) 12%, rgba(0,0,0,.25));
  font-weight: 500;
}

/* ── TAB PANEL ── */
.hp-tab-panel {
  position: absolute;  /* stack inside container */
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}

.hp-tab-panel--active {
  opacity: 1;
  pointer-events: auto;
}

.hp-tab-panel[hidden] {
  display: block !important; /* keep in DOM for crossfade, hidden via opacity */
  opacity: 0;
  pointer-events: none;
}

/* Video: full-bleed background */
.hp-tab-panel__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
  transition: transform 600ms ease;
}
.hp-tab-panel--active .hp-tab-panel__video { transform: scale(1); }

/* Gradient overlay: left-side heavy, fades right.
   In RTL context: "left" in CSS = visual right side.
   We want gradient on the content side (visual right = LTR-left in RTL layout).
   Use logical gradient: dark at inline-start (right in RTL), fading to transparent. */
.hp-tab-panel__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Gradient covers right ~60% strongly (RTL: content is on the right side visually)
     and fades from bottom */
  background:
    linear-gradient(
      to left,                             /* RTL: visual right = strong, left = video showing */
      rgba(10,10,10,.88) 0%,
      rgba(10,10,10,.72) 38%,
      rgba(10,10,10,.32) 62%,
      rgba(10,10,10,.0) 100%
    ),
    linear-gradient(
      to top,
      rgba(10,10,10,.55) 0%,
      transparent 45%
    );
}

/* Division icon - top-left of container (visual left = video side) */
/* Decorative element (quarter-circle from Figma) - top-left corner, hue per division */
.hp-tab-panel__element {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 340px;
  height: 300px;
  color: var(--tab-active-color, #2EB0CE);
  pointer-events: none;
  transition: color 280ms ease;
}
.hp-tab-panel__element svg { width: 100%; height: 100%; display: block; }

/* Division icon - real pre-colored SVG (from Guy), top-left */
.hp-tab-panel__icon {
  position: absolute;
  top: 32px;
  left: 36px;
  z-index: 10;
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

.hp-tab-panel__icon img,
.hp-tab-panel__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Watermark - large text bottom-left, colored, very subtle */
.hp-tab-panel__watermark {
  position: absolute;
  bottom: 32px;
  left: 40px;
  z-index: 10;
  font-family: var(--font-english, 'Poppins', sans-serif);
  font-size: 3.5rem;       /* large display — watermark feel */
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tab-active-color, rgba(255,255,255,.18));
  opacity: 0.22;           /* very subtle watermark */
  line-height: 1;
  pointer-events: none;
  transition: color 280ms ease;
  white-space: nowrap;
}

/* Content block: right side (RTL), lower portion over gradient */
.hp-tab-panel__content {
  position: absolute;
  z-index: 15;
  bottom: 56px;            /* anchored to the lower portion per Figma */
  right: 48px;             /* RTL: content anchors to right */
  width: min(420px, 40%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: right;
}

.hp-tab-panel__title {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem);  /* 40px at 1440 per Figma */
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.hp-tab-panel__desc {
  font-size: 1rem;          /* 16px - clean, readable */
  font-weight: 400;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  margin: 0;
}

/* CTA: white fill pill, self-end to align right in RTL */
.btn-tab-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start; /* RTL: flex-start = inline-start = RIGHT (was flex-end = left) */
  height: 44px;
  padding: 0 26px;
  border-radius: 80px;
  background: #ffffff;
  color: #141414;
  font-size: 0.9375rem;    /* 15px */
  font-weight: 600;
  text-decoration: none;
  margin-top: 4px;
  transition:
    background 180ms ease,
    transform 140ms ease;
}
.btn-tab-cta:hover {
  background: rgba(255,255,255,.88);
  transform: translateY(-1px);
}
.btn-tab-cta:active { transform: translateY(0) scale(0.98); }

/* ================================================================
   5. ABOUT TEASER (light section per Figma - text #242424 / #424242)
   Figma: two-col layout, right col = text (w-491px), left col = image
   Title: 40px Bold #242424, body: 20px Regular #424242
================================================================ */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

/* תמונה בצד ימין, טקסט בשמאל (RTL: order -1 = עמודה ראשונה = ימין) */
.about-image { order: -1; }

.about-text { max-width: 500px; }

.about-text h2 {
  font-size: clamp(1.75rem, 2.4vw, 2.375rem); /* ~38px */
  font-weight: 600;
  color: #242424;
  line-height: 1.3;
  margin-block: 0 var(--space-5);
}

.about-body {
  font-size: 1.125rem; /* 18px - קריא ולא כבד */
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.75;
}
.about-body p { margin: 0; }

.about-image img {
  width: 100%;
  border-radius: 24px;
  aspect-ratio: 4/3;
  object-fit: cover;
}

/* ================================================================
   6. VALUES
   Figma: 4-col grid, white cards, border-[#e9e9e9], rounded-[24px], px-[24px] py-[32px]
   Icon: bg-[rgba(195,232,91,0.3)], rounded-[12px], size-[64px]
   Title: 22px / Bold / #242424
   Body: 18px / Regular / black
================================================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Figma: 4 cards in a row */
  gap: 24px; /* adjusted from Figma gap-[40px] for breathing room */
}

@media (max-width: 1200px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .values-grid { grid-template-columns: 1fr; }
}

.value-item {
  position: relative;
  /* פיגמה 39:545: תוכן מיושר ימין (לא ממורכז), התג בפינה הימנית העליונה */
  text-align: right;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e9e9e9;
  border-radius: 24px; /* Figma: rounded-[24px] */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: ימין */
  transition:
    box-shadow var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}
/* hover-lift אחיד (מרשם תנועה 3): translateY(-4px) + צל מתעצם 200ms - רק עם עכבר */
@media (hover: hover) {
  .value-item:hover {
    border-color: #d2d2d2;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .value-item:hover { transform: none; }
}

/* תג אייקון: ריבוע מעוגל ליים-בהיר, אייקון ירוק-ליים. צבעים נדגמו מהפיגמה:
   רקע #EEF9CE, קו אייקון #8CB10D. יושב בפינה הימנית העליונה (flex-start ב-RTL). */
.value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #eef9ce;
  margin-bottom: 24px;
  line-height: 0;
}
.value-icon svg { width: 28px; height: 28px; stroke: #8cb10d; }

.value-title {
  font-size: 1.375rem; /* 22px per Figma */
  font-weight: 700;    /* Figma: bold */
  color: #242424;
  line-height: 1.36;   /* 30px/22px per Figma */
  margin-bottom: 12px;
}

.value-body {
  font-size: 1.125rem; /* 18px per Figma */
  font-weight: 400;
  color: #000000;      /* Figma: text-black */
  line-height: 1.5;    /* leading-[27px]/18 = 1.5 */
}

/* ================================================================
   7. DIVISION BLOCKS — E-Vision (dark) + E-R&D (light)
      Figma: two alternating full-width blocks after about section.
      E-Vision: dark overlay over full-bleed image, content centered.
      E-R&D: light BG, two-col (text right, image left in RTL).
================================================================ */

/* Shared block base */
.div-block {
  position: relative;
  overflow: hidden;
}

/* E-VISION — dark full-bleed, image-forward */
.div-block--evision {
  min-height: 440px;
  display: flex;
  align-items: center;
  background: #111;
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.div-block__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.div-block__bg-image img,
.div-block__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* lighter overlay so the image breathes through */
.div-block__overlay {
  position: absolute;
  inset: 0;
  /* כהה מאחורי הטקסט (ימין), נמוג לשמאל - to left: 0% = ימין */
  background: linear-gradient(
    to left,
    rgba(10,18,22,.80) 0%,
    rgba(10,18,22,.50) 42%,
    rgba(10,18,22,.10) 100%
  );
}

/* Content over dark bg */
.div-block--evision .div-block__content {
  position: relative;
  z-index: 5;
  /* קונטיינר רגיל (מיושר עם שאר האתר), הטקסט נדבק לימין */
  max-width: var(--container-max);
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL flex-column: flex-start = ימין */
  gap: var(--space-4);
  padding-block: 0;
  text-align: right;
}
/* בלוק הטקסט עצמו מוגבל ברוחב, נדבק לימין */
.div-block--evision .div-block__title,
.div-block--evision .div-block__body {
  max-width: 560px;
}

/* button sits a touch lower than the body, hugs its content (RTL: right) */
.div-block__content .btn,
.div-block__split-text .btn {
  margin-top: var(--space-3);
  align-self: flex-start;
}

.div-block__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.div-block__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.div-block__icon--erd {
  margin-bottom: 0;
}

/* === E-VISION: floating icon top-left of section, 3D entrance === */
.div-block--evision .div-block__icon-float {
  position: absolute;
  top: clamp(2rem, 4vw, 3.25rem);
  left: clamp(2rem, 4vw, 3.5rem);
  width: 64px;
  height: 64px;
  z-index: 10;
  perspective: 800px;
  perspective-origin: center;
}
.div-block--evision .div-block__icon-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform-style: preserve-3d;
  transform: rotateY(180deg) rotateX(35deg) scale(0.55);
  opacity: 0;
  transition: transform 1.4s cubic-bezier(0.2, 0.85, 0.25, 1),
              opacity 0.9s ease-out 0.1s;
  filter: drop-shadow(0 8px 24px rgba(30,196,160,0.35));
}
.div-block--evision.is-in-view .div-block__icon-float img {
  transform: rotateY(0) rotateX(0) scale(1);
  opacity: 1;
}
/* gentle float after settle */
@keyframes evisionIconFloat {
  0%, 100% { transform: translateY(0) rotateZ(0deg); }
  50%      { transform: translateY(-6px) rotateZ(-1.5deg); }
}
.div-block--evision.is-in-view .div-block__icon-float img {
  animation: evisionIconFloat 4.5s ease-in-out 1.4s infinite;
}

@media (max-width: 720px) {
  .div-block--evision .div-block__icon-float {
    top: 1.5rem; left: 1.5rem;
    width: 52px; height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .div-block--evision .div-block__icon-float img {
    transition: opacity 0.3s ease-out !important;
    transform: none !important;
    animation: none !important;
  }
  .div-block--evision.is-in-view .div-block__icon-float img { opacity: 1; }
}

/* === White solid button === */
.btn-white-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 80px;
  background: #ffffff;
  color: #111;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  border: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  transition:
    transform var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}
.btn-white-solid:hover {
  background: #f4f4f4;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}

.div-block__title {
  font-size: clamp(1.75rem, 2.5vw, 2.5rem); /* 40px */
  font-weight: 600;
  color: #ffffff;
  line-height: 1.25;
  margin: 0;
}

.div-block__title--dark {
  color: #242424;
}

.div-block__body {
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  margin: 0;
  max-width: 460px;
}

.div-block__body--dark {
  color: #424242;
}

/* E-R&D — light, two-col */
.div-block--erd {
  background: #f5f5f5;
}

.div-block__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 5.5rem);
  align-items: center;
  padding-block: clamp(4.5rem, 9vw, 7.5rem); /* יותר אוויר - היה צפוף */
}

.div-block__split-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: right;
}

.div-block__split-image {
  position: relative;
}

/* media wrapper - מעוגל, מכיל את התמונה + ה-badge הסגול הצף */
.div-block__split-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.div-block__split-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) {
  .div-block__split-media:hover .div-block__split-photo { transform: scale(1.03); }
}

/* badge סגול (E-R&D) - פינה שמאלית-עליונה של התמונה */
.div-block__split-media .div-block__icon--erd {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  margin: 0;
}

.div-block__split-caption {
  display: block;
  margin-top: var(--space-5);
  font-size: var(--size-sm, 0.875rem);
  color: var(--color-text-muted);
  text-align: center;
}

/* Outline white button (for dark blocks) */
.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 80px;
  border: 1.5px solid rgba(255,255,255,.7);
  background: transparent;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  transition:
    background var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* ================================================================
   8. MAGAZINE — featured + list layout (per Figma)
================================================================ */
.mag-layout {
  display: grid;
  /* RTL: first track = RIGHT. featured(1.35fr) right, list(1fr) left. featured is first in DOM. */
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: var(--space-10);
}

/* Featured article — right col */
.mag-featured { display: block; }

.mag-featured-link {
  display: flex;
  flex-direction: column;
  gap: 0;
  color: inherit;
  text-decoration: none;
}

.mag-featured-image {
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-light);
}

.mag-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) {
  .mag-featured-link:hover .mag-featured-image img { transform: scale(1.04); }
}

.mag-featured-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-bg-light);
}

.mag-featured-body {
  padding-top: var(--space-5);
  text-align: right;
}

.mag-featured-cat {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-evision, #1ec4a0);
  text-transform: uppercase;
  letter-spacing: 0; /* no letter-spacing rule */
  margin-bottom: var(--space-2);
}

.mag-featured-title {
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  font-weight: 700;
  color: #242424;
  line-height: 1.35;
  margin-bottom: 0;
}

.mag-featured-excerpt {
  font-size: 1rem;
  color: #424242;
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Secondary list — left col */
.mag-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border, #e9e9e9);
}

.mag-list-item {
  border-bottom: 1px solid var(--color-border, #e9e9e9);
}

.mag-list-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease);
}
.mag-list-link:hover { opacity: .75; }

.mag-list-thumb {
  width: 116px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-bg-light);
}

.mag-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mag-list-thumb--empty { background: #e3e3e3; }

.mag-list-body { flex: 1; text-align: right; }

.mag-list-title {
  font-size: var(--size-base, 1rem);
  font-weight: 600;
  color: #242424;
  line-height: 1.4;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mag-list-date {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #9e9e9e;
  line-height: 1.4;
}

/* "למגזין המלא" — centered below both columns (per Figma) */
.mag-cta-center {
  text-align: center;
  margin-top: var(--space-8);
}

/* green glow rising from the bottom, behind the form, fading up into the white */




/* row of separate pills — each field is its own white capsule, clear gaps */



/* CF7 wraps each input in a span — make it fill the pill */



/* dark submit capsule (Figma) — not lime */
/* forms.css handles background/color/border-radius/height/padding.
   Adding font-weight + cursor here to complete the Figma spec. */
.hp-cta-form__submit {
  font-weight: 700;
  border: none;
  cursor: pointer;
}


/* consent — aligned to the form's right edge, dark checkbox.
   Works for both the CF7 [acceptance] markup and the static fallback. */




/* CF7 feedback — success message + inline validation, on-brand */

/* ================================================================
   RESPONSIVE
================================================================ */

/* Tablet - 1024px */
@media (max-width: 1024px) {
  .hp-hero {
    min-height: calc(580px + var(--nav-height, 72px));
  }

  .hp-projects__grid {
    grid-template-columns: 1fr 1fr;
  }

  .hp-project-card {
    height: 360px;
    border-radius: 28px;
  }

  /* Tabs container: shorter on tablet */
  .hp-tabs__container {
    height: 520px;
    border-radius: 24px;
  }

  .hp-tab-panel__gradient {
    background:
      linear-gradient(
        to left,
        rgba(10,10,10,.92) 0%,
        rgba(10,10,10,.78) 44%,
        rgba(10,10,10,.3) 68%,
        rgba(10,10,10,.0) 100%
      ),
      linear-gradient(
        to top,
        rgba(10,10,10,.6) 0%,
        transparent 40%
      );
  }

  .hp-tab-panel__content {
    right: 36px;
    width: min(380px, 50%);
  }

  .hp-tabs__nav {
    right: 24px;
    top: 24px;
  }

  .hp-tab-panel__icon {
    top: 28px;
    left: 28px;
    width: 40px;
    height: 40px;
  }

  .hp-tab-panel__watermark {
    font-size: 2.5rem;
    bottom: 24px;
    left: 28px;
  }

  .about-inner { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Division blocks */
  .div-block__split {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .div-block--evision .div-block__content {
    max-width: 100%;
    padding-block: var(--space-12);
  }

  /* Magazine */
  .mag-layout {
    grid-template-columns: 1fr;
  }

  /* CTA form */


}

/* Mobile - 768px */
@media (max-width: 768px) {
  .hp-hero {
    min-height: calc(480px + var(--nav-height, 72px));
  }

  .hp-hero__content h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .hp-hero__sub { font-size: 1rem; }

  .hp-hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .btn-hero-outline,
  .btn-hero-fill {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }

  .hp-marquee { padding-block: 24px; }

  .hp-projects__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .hp-project-card {
    height: 320px;
    border-radius: 24px;
  }

  .hp-tabs__container {
    height: 480px;
    border-radius: 20px;
  }

  .hp-tab-panel__gradient {
    background: linear-gradient(
      to top,
      rgba(10,10,10,.94) 0%,
      rgba(10,10,10,.7) 38%,
      rgba(10,10,10,.2) 65%,
      transparent 100%
    );
  }

  .hp-tabs__nav {
    top: 16px;
    right: 16px;
    gap: 8px;
  }

  .hp-tab-btn {
    font-size: 0.6875rem;
    padding: 13px 14px;
  }

  .hp-tab-panel__icon {
    top: 16px;
    left: 16px;
    width: 36px;
    height: 36px;
  }

  .hp-tab-panel__watermark { display: none; }

  .hp-tab-panel__content {
    top: auto;
    bottom: 32px;
    transform: none;
    right: 20px;
    left: 20px;
    width: auto;
    text-align: right;
  }

  .hp-tab-panel__title { font-size: 1.375rem; }
  .hp-tab-panel__desc { font-size: 0.875rem; }

  .btn-tab-cta {
    align-self: flex-start;
    height: 40px;
    font-size: 0.875rem;
    padding: 0 20px;
  }

  /* Division blocks mobile */
  .div-block--evision {
    min-height: 420px;
  }

  .div-block__split {
    grid-template-columns: 1fr;
  }

  /* Magazine mobile */
  .mag-layout { grid-template-columns: 1fr; }

  /* CTA form mobile */


}

/* Mobile small - 480px */
@media (max-width: 480px) {
  .hp-hero__content {
    padding-inline: var(--space-4);
  }
  .hp-section-title { font-size: 1.5rem; }

  /* value cards מובייל: padding לא נדחס + icon ימין שמור (P3-2) */
  .value-item {
    padding: 24px 20px 26px;
  }
  .value-icon {
    align-self: flex-start; /* RTL: ימין */
    margin-bottom: 20px;
  }
  .value-icon img { width: 58px; } /* הוקטן ~20% במובייל - קשת+אייקון נעימים יותר */

  /* marquee: לוגואים קטנים יותר ב-480 */
  .hp-marquee__item img {
    max-height: 28px;
  }
  .hp-marquee__item {
    margin-inline-start: clamp(48px, 8vw, 80px);
  }
}

/* Marquee mobile 768px - הקטנת לוגואים */
@media (max-width: 768px) and (min-width: 481px) {
  .hp-marquee__item img {
    max-height: 32px;
  }
  .hp-marquee__item {
    margin-inline-start: clamp(56px, 8vw, 100px);
  }
}

/* P2-1: value-grid עמודה אחת מתחת ל-420px (מנצח בקסקייד) */
@media (max-width: 420px) {
  .values-grid { grid-template-columns: 1fr; }
}