/* Landing page — photo-driven, warm cream + olive + terracotta. */

/* ================================================================== */
/* hero — full-bleed photo with overlaid copy                         */
/* ================================================================== */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  isolation: isolate;
  color: var(--text-inverse);
  background: var(--bg-deep);   /* falls through where photo fades */
}

/* Photo fills the hero but fades to transparent at the bottom so the
 * next section's cream bg flows in seamlessly — no hard rectangle edge. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("/static/img/photos/hero_market.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.62) contrast(1.10) saturate(1.32);
  -webkit-mask-image:
    linear-gradient(180deg,
      black 0%, black 60%, rgba(0,0,0,0.55) 80%, transparent 100%);
          mask-image:
    linear-gradient(180deg,
      black 0%, black 60%, rgba(0,0,0,0.55) 80%, transparent 100%);
}

/* Overlay stack, top-to-bottom:
 *   1. warm sun-flare from photo side (opposite the copy)
 *   2. dark radial vignette behind the copy
 *   3. linear bottom-fade into the cream bg of the next section
 */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 72% 56% at 75% 8%,
      rgba(255, 230, 175, 0.30) 0%,
      rgba(255, 218, 150, 0.12) 36%,
      transparent 68%),
    radial-gradient(ellipse 60% 70% at 28% 50%,
      rgba(42, 31, 26, 0.72) 0%,
      rgba(42, 31, 26, 0.28) 60%,
      transparent 80%),
    linear-gradient(180deg,
      rgba(42, 31, 26, 0.55) 0%,
      rgba(42, 31, 26, 0.15) 40%,
      rgba(244, 235, 217, 0.0) 75%,
      var(--bg-base) 100%);
}

/* RTL: copy anchored right → mirror both the vignette and the sun-flare. */
html[dir="rtl"] .hero__overlay {
  background:
    radial-gradient(ellipse 72% 56% at 25% 8%,
      rgba(255, 230, 175, 0.30) 0%,
      rgba(255, 218, 150, 0.12) 36%,
      transparent 68%),
    radial-gradient(ellipse 60% 70% at 72% 50%,
      rgba(42, 31, 26, 0.72) 0%,
      rgba(42, 31, 26, 0.28) 60%,
      transparent 80%),
    linear-gradient(180deg,
      rgba(42, 31, 26, 0.55) 0%,
      rgba(42, 31, 26, 0.15) 40%,
      rgba(244, 235, 217, 0.0) 75%,
      var(--bg-base) 100%);
}

.hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}
.hero__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-inverse);
  font-size: var(--text-lg);
  text-decoration: none;
}
.hero__brand-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 14px rgba(216, 156, 62, 0.35));
  transition: transform var(--duration-medium) var(--easing-out);
}
.hero__brand:hover .hero__brand-logo { transform: rotate(-6deg) scale(1.05); }
.hero__brand .brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.03em;
  font-size: 1.4em;
  line-height: 1;
}
.hero__nav a { color: var(--text-inverse); opacity: 0.85; }
.hero__nav a:hover { opacity: 1; color: var(--gold); }

.hero__copy {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  color: var(--gold);
  padding: 8px 16px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-pill);
  align-self: flex-start;
  background: rgba(216, 156, 62, 0.08);
}
.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.hero__title {
  font-family: var(--font-hebrew);
  font-size: clamp(56px, 8vw, 96px);
  font-weight: var(--weight-black);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text-inverse);
  text-shadow:
    0 2px 8px  rgba(0, 0, 0, 0.5),
    0 8px 40px rgba(0, 0, 0, 0.6);
}
.hero__title em {
  font-style: normal;
  color: var(--gold);
  background: linear-gradient(180deg, var(--gold) 0%, #E8B85E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__subtitle {
  font-size: clamp(18px, 2vw, 22px);
  line-height: var(--leading-relaxed);
  color: rgba(253, 248, 236, 0.95);
  max-width: 600px;
  font-weight: var(--weight-medium);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.hero__cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.hero__cta .btn--ghost {
  border-color: rgba(253, 248, 236, 0.6);
  color: var(--text-inverse);
}
.hero__cta .btn--ghost:hover {
  background: var(--text-inverse);
  color: var(--text-primary);
  border-color: var(--text-inverse);
}

/* Trust strip below hero */
.hero__trust {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  color: rgba(253, 248, 236, 0.75);
  font-size: var(--text-xs);
}
.hero__trust strong { color: var(--gold); font-weight: var(--weight-bold); font-size: var(--text-base); display: block; }

/* ================================================================== */
/* value props — 3 photo cards                                         */
/* ================================================================== */

.props {
  background: var(--bg-base);
  /* photo's bottom fades into bg-base via mask, so this section starts
   * with no visible seam. */
  padding: var(--space-5) var(--space-4) var(--space-7);
}
.props__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.props__heading {
  text-align: center;
  margin-bottom: var(--space-6);
  max-width: 720px;
  margin-inline: auto;
}
.props__eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--terracotta-deep);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.props__heading h2 {
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}
.props__heading p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

.props__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.prop-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition:
    transform var(--duration-medium) var(--easing-out),
    box-shadow var(--duration-medium) var(--easing-out);
}
.prop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.prop-card__photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.prop-card__body {
  padding: var(--space-4) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.prop-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}
.prop-card__body p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ================================================================== */
/* how it works — warm sand background                                 */
/* ================================================================== */

.how {
  background: var(--bg-accent);
  padding: var(--space-7) var(--space-4);
}
.how__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}
.how__heading {
  text-align: center;
  margin-bottom: var(--space-6);
}
.how__heading h2 {
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: var(--space-3);
}
.how__heading p {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  position: relative;
}

.step__num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--weight-bold);
  color: var(--terracotta);
  line-height: 1;
  letter-spacing: -0.02em;
}

.step__title {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-primary);
}

.step__body {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}

/* ================================================================== */
/* CTA strip — deep olive for contrast                                 */
/* ================================================================== */

.cta-strip {
  background: var(--olive-darker);
  color: var(--text-inverse);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(216, 156, 62, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cta-strip__inner {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cta-strip h2 {
  color: var(--text-inverse);
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: var(--space-3);
}
.cta-strip p {
  color: rgba(253, 248, 236, 0.85);
  font-size: var(--text-base);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

/* ================================================================== */
/* footer                                                              */
/* ================================================================== */

.footer {
  background: var(--bg-deep);
  color: rgba(253, 248, 236, 0.65);
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-xs);
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer a { color: rgba(253, 248, 236, 0.65); }
.footer a:hover { color: var(--gold); }

/* ================================================================== */
/* highlight helpers — dramatic earth tones, italic-led                */
/* ================================================================== */

/* "נמאס" — bold terracotta, with a single dramatic brushstroke
 * underline on a slight skew. */
.hl-shout {
  color: var(--terracotta-deep);
  font-weight: var(--weight-black);
  display: inline-block;
  position: relative;
  letter-spacing: -0.02em;
}
.hl-shout::after {
  content: "";
  position: absolute;
  inset: auto -10px -8px -10px;
  height: 6px;
  background: var(--terracotta-deep);
  border-radius: 999px;
  transform: skewX(-10deg);
  opacity: 0.85;
}

/* In-line emphasis on value words — bold + deep olive. */
.hl-marker {
  color: var(--olive-deep);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
/* On the dark hero overlay, shift to a brighter olive so the words pop. */
.hero .hl-marker { color: #C8DDB1; }

/* slanted double underscore for "השורה התחתונה" — terracotta */
.hl-bottom-line {
  position: relative;
  display: inline-block;
  font-weight: var(--weight-bold);
}
.hl-bottom-line::after {
  content: "";
  position: absolute;
  left: -4%; right: -4%;
  bottom: -12px;
  height: 12px;
  background: linear-gradient(
    transparent 0%, transparent 28%,
    var(--terracotta) 28%, var(--terracotta) 42%,
    transparent 42%, transparent 62%,
    var(--terracotta) 62%, var(--terracotta) 76%,
    transparent 76%);
  transform: skewX(-14deg);
  pointer-events: none;
  border-radius: 2px;
}

/* "חיסכון" inside the 15-25% callout banner — italic, on a thin
 * cream underline so it reads on the dark olive bg. */
.hl-callout-strong {
  display: inline-block;
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  color: var(--text-inverse);
  letter-spacing: -0.01em;
  position: relative;
  white-space: nowrap;
}
.hl-callout-strong::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 3px;
  background: var(--gold);
  border-radius: 999px;
}

/* ================================================================== */
/* 15-25% callout banner                                               */
/* ================================================================== */

.callout-banner {
  background:
    linear-gradient(135deg, var(--olive-darker) 0%, var(--olive-deep) 100%);
  color: var(--text-inverse);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.callout-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(216, 156, 62, 0.20), transparent 70%);
  pointer-events: none;
}
.callout-banner__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  position: relative;
  z-index: 1;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.callout-banner__pct {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 112px);
  font-weight: var(--weight-black);
  color: var(--gold);
  letter-spacing: -0.04em;
  line-height: 0.95;
  font-feature-settings: "tnum" on;
  text-shadow: 0 4px 24px rgba(216, 156, 62, 0.30);
}
.callout-banner__text {
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.callout-banner__qualifier {
  color: rgba(253, 248, 236, 0.85);
  font-size: var(--text-base);
}

/* ================================================================== */
/* why us (rebuilt)                                                    */
/* ================================================================== */

.why {
  background: var(--bg-base);
  padding: var(--space-7) var(--space-4);
}
.why__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.why__heading {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-6);
}
.why__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}
.why__lede {
  color: var(--text-secondary);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: var(--leading-relaxed);
}

.why__sub {
  text-align: center;
  margin: var(--space-7) auto var(--space-5);
  max-width: 720px;
}
.why__sub-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  display: inline-block;
  position: relative;
}
/* decorative em-dash flourishes around the subheading were removed
 * to match the dash-free copy direction. */
.why__sub-body {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* ================================================================== */
/* stat cards (animated)                                               */
/* ================================================================== */

.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  box-shadow: var(--shadow-card);
  border-top: 4px solid var(--olive-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
  /* enter animation — JS adds .is-visible when the card scrolls into view */
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   600ms var(--easing-out),
    transform 600ms var(--easing-out),
    box-shadow 320ms var(--easing-out);
}
.stat-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.stat-card:nth-child(1) { transition-delay: 0ms,    0ms,   0ms; }
.stat-card:nth-child(2) { transition-delay: 120ms, 120ms,  0ms; }
.stat-card:nth-child(3) { transition-delay: 240ms, 240ms,  0ms; }
.stat-card:nth-child(4) { transition-delay: 360ms, 360ms,  0ms; }
.stat-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}

.stat-card--cheese  { border-top-color: var(--gold); }
.stat-card--milk    { border-top-color: #6B9CC9; }
.stat-card--produce { border-top-color: var(--olive-primary); }
.stat-card--bread   { border-top-color: var(--terracotta); }

/* Circular photo medallion at the top of each stat card. The accent
 * ring color matches the card's category. Photo gently zooms on
 * hover for a tactile feel. */
.stat-card__photo {
  width: 124px;
  height: 124px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: var(--bg-base);
  box-shadow:
    0 0 0 4px var(--bg-elevated),
    0 0 0 5px var(--olive-light),
    0 14px 32px rgba(42, 31, 26, 0.22);
  transition: box-shadow 0.4s var(--easing-out);
}
.stat-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--easing-out);
}
.stat-card:hover .stat-card__photo img { transform: scale(1.08); }

/* Category accent rings — replace the old border-top stripes with a
 * coloured ring around the photo. Photos already do most of the
 * visual lift so the card body can sit on a softer base. */
.stat-card--cheese  .stat-card__photo {
  box-shadow:
    0 0 0 4px var(--bg-elevated),
    0 0 0 5px var(--gold),
    0 14px 32px rgba(176, 120, 32, 0.28);
}
.stat-card--milk    .stat-card__photo {
  box-shadow:
    0 0 0 4px var(--bg-elevated),
    0 0 0 5px #6B8FB8,
    0 14px 32px rgba(42, 31, 26, 0.22);
}
.stat-card--produce .stat-card__photo {
  box-shadow:
    0 0 0 4px var(--bg-elevated),
    0 0 0 5px var(--olive-primary),
    0 14px 32px rgba(71, 90, 46, 0.28);
}
.stat-card--bread   .stat-card__photo {
  box-shadow:
    0 0 0 4px var(--bg-elevated),
    0 0 0 5px var(--terracotta),
    0 14px 32px rgba(159, 77, 42, 0.28);
}
.stat-card__top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.stat-card__num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: var(--weight-bold);
  color: var(--olive-deep);
  line-height: 1;
  font-feature-settings: "tnum" on;
  letter-spacing: -0.02em;
}
.stat-card__unit {
  font-family: var(--font-hebrew);
  font-size: 22px;
  font-weight: var(--weight-bold);
  color: var(--text-muted);
}
.stat-card__desc {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
  min-height: 2.8em;
}
.stat-card__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: var(--space-3) var(--space-2);
  background: linear-gradient(180deg, var(--bg-base), var(--bg-accent));
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.stat-card__shekel {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--terracotta-deep);
  font-weight: var(--weight-bold);
  line-height: 1;
}
.stat-card__num-big {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: var(--weight-bold);
  color: var(--terracotta-deep);
  font-feature-settings: "tnum" on;
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-card__kicker {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-style: italic;
  line-height: var(--leading-snug);
}

/* slow gold sweep across each card on hover */
.stat-card::after {
  content: "";
  position: absolute;
  top: -2px; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg, transparent 0%, rgba(216, 156, 62, 0.15) 50%, transparent 100%);
  pointer-events: none;
  transition: left 1.2s var(--easing-out);
}
.stat-card:hover::after { left: 200%; }

/* ================================================================== */
/* "how" — small adjustment for the new heading                        */
/* ================================================================== */

.how__heading h2 {
  font-family: var(--font-display);
}
.how__lede {
  font-size: var(--text-base);
  margin-bottom: var(--space-2);
}
.how__lede strong {
  color: var(--terracotta-deep);
  font-weight: var(--weight-black);
}

/* ================================================================== */
/* responsive                                                          */
/* ================================================================== */

@media (max-width: 960px) {
  .props__grid { grid-template-columns: 1fr; }
  .how__steps { grid-template-columns: repeat(2, 1fr); }
  .hero__trust { gap: var(--space-3); }
  .callout-banner__inner { gap: var(--space-3); }
  .stats__grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hero { min-height: auto; padding-block: var(--space-5); }
  .how__steps { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .stat-card { opacity: 1; transform: none; }
  .stat-card::after { display: none; }
}