/* ============================================================
   RideWithYoav — יום הקהילה
   Design System v3 — Award-Level Visual Upgrade
   Palette: Vibrant Emerald · Warm Gold · Cinematic Depth
   ============================================================ */
:root {
  /* ── Vibrant Emerald Palette ── */
  --bg-deep:       #022c22;   /* deepest — footer / register */
  --bg-deep2:      #064e3b;   /* dark sections */
  --emerald:       #10b981;   /* primary vibrant */
  --emerald-mid:   #059669;   /* buttons */
  --emerald-dark:  #047857;   /* button hover */
  --emerald-glow:  #34d399;   /* bright glow / accent */
  --emerald-lite:  #6ee7b7;   /* pale accent */

  /* Backward-compat aliases (used by existing markup) */
  --forest:        #022c22;
  --forest-mid:    #064e3b;
  --olive:         #059669;
  --olive-mid:     #047857;
  --olive-light:   #10b981;
  --olive-dark:    #064e3b;

  /* ── Warm Accents (emotional balance) ── */
  --gold:          #f59e0b;
  --gold-glow:     #fbbf24;
  --mustard:       #ea580c;

  /* ── Neutral / Text ── */
  --charcoal:      #1C1C1A;
  --text:          #1C1C1A;
  --text-soft:     #3d5050;
  --text-on-dark:  #ecfdf5;
  --sand:          #a7f3d0;    /* secondary text on dark */
  --warm-white:    #f0fdf4;    /* light section bg (about, faq) */
  --cream:         #fef9f0;    /* testimonials — warm tone for emotional contrast */

  /* ── Typography ── */
  --font-serif: 'Frank Ruhl Libre', Georgia, 'Times New Roman', serif;
  --font:       'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Geometry ── */
  --r-card: 18px;
  --r-btn:  10px;
  --r-img:  14px;

  /* ── Shadows ── */
  --shadow:    0 4px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.18);
  --shadow-xl: 0 28px 70px rgba(0,0,0,.25);

  /* ── Spacing ── */
  --section-pad: 100px;
  --container:   1200px;

  /* ── Motion ── */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Timeline stop colors (updated to emerald family) ── */
  --c1: #10b981;
  --c2: #6366f1;
  --c3: #f59e0b;
  --c4: #ec4899;
  --c5: #3b82f6;
}

@media (min-width: 1024px) {
  :root { --section-pad: 140px; }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  direction: rtl;
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.75;
  font-size: 16px;
  overflow-x: hidden;
}

/* Hide native cursor on precision devices */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, [role=button], label, select,
  input[type=checkbox], input[type=radio], summary { cursor: none; }
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-serif); }

/* ============================================================
   Particles Canvas
   ============================================================ */
.particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;   /* above body bg, well below all content */
}

/* ============================================================
   Grain Overlay — cinematic film texture
   ============================================================ */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ============================================================
   Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
.container--narrow { max-width: 760px; }

.section { padding-block: var(--section-pad); position: relative; }
.section--cream  { background: var(--cream); }
.section--white  { background: var(--warm-white); }
.section--dark   { background: var(--bg-deep); color: var(--text-on-dark); }

/* ── Cinematic gradient fades between sections ── */
.section--white::after,
.section--cream::after {
  content: "";
  position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(2,44,34,.05));
  pointer-events: none;
  z-index: 0;
}
.section--dark::after {
  content: "";
  position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, rgba(2,44,34,.55));
  pointer-events: none;
}

/* ── Section "מה קורה ביום" — deep emerald ── */
.section--deep {
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpolygon points='45,0 90,23 0,23' fill='white' fill-opacity='0.04'/%3E%3Cpolygon points='0,23 90,23 45,45' fill='white' fill-opacity='0.02'/%3E%3C/svg%3E");
  background-color: #064e3b;
  background-image:
    linear-gradient(to bottom, #022c22 0%, transparent 220px),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(16,185,129,.2), transparent 60%),
    var(--tri), var(--tri);
  background-size: 100% 220px, 100% 100%, 90px 45px, 90px 45px;
  background-position: 0 0, 0 0, 0 0, 45px 22px;
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  color: var(--text-on-dark);
  overflow: hidden;
}
.section--deep::before,
.section--deep::after { display: none; }
.section--deep .container { position: relative; z-index: 2; }
.section--deep .section__kicker { color: var(--emerald-glow); }
.section--deep .section__title  { color: #f0fdf4; }
.section--deep .section__lead   { color: rgba(167,243,208,.8); }

/* Noise grain on dark section (register) */
.section--dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}

/* ── Section header ── */
.section__head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 72px;
}
.section__kicker {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--bg-deep);
}
.section__title--light { color: var(--text-on-dark); }
.section__lead { margin-top: 16px; color: var(--text-soft); font-size: 17px; line-height: 1.7; }
.section__cta  { text-align: center; margin-top: 72px; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font);
  font-weight: 600; font-size: 17px;
  padding: 16px 40px;
  border-radius: var(--r-btn);
  transition:
    transform .22s var(--ease-spring),
    box-shadow .22s var(--ease),
    background-color .2s var(--ease),
    color .2s var(--ease);
  will-change: transform;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.btn--sm    { padding: 10px 22px; font-size: 15px; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--emerald-mid);
  color: #fff;
  box-shadow: 0 4px 20px rgba(5,150,105,.3);
}
.btn--primary:hover {
  background: var(--emerald);
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(5,150,105,.38),
    0 0 0 2px rgba(52,211,153,.28),
    0 0 35px rgba(16,185,129,.18);
}
.btn--primary:active { transform: translateY(-1px); }

/* Shimmer sweep on hover */
.btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
  transform: translateX(-150%);
  transition: transform .55s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::before { transform: translateX(150%); }

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--emerald-mid);
  color: var(--emerald-mid);
}
.btn--ghost:hover {
  background: rgba(5,150,105,.08);
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(16,185,129,.14);
}

.btn--ghost-light {
  border-color: rgba(167,243,208,.35);
  color: var(--text-on-dark);
}
.btn--ghost-light:hover {
  background: rgba(167,243,208,.08);
  border-color: rgba(167,243,208,.75);
  transform: translateY(-2px);
  box-shadow: 0 0 22px rgba(167,243,208,.18);
}

/* ============================================================
   Custom Cursor  (hover-capable devices only)
   ============================================================ */
.cursor {
  position: fixed;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--emerald-glow);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%) scale(0);
  transition: width .25s var(--ease), height .25s var(--ease), transform .25s var(--ease), opacity .3s;
  opacity: 0;
  will-change: left, top, transform;
  box-shadow: 0 0 14px var(--emerald-glow), 0 0 28px rgba(52,211,153,.35);
}
.cursor.is-visible { opacity: .65; transform: translate(-50%, -50%) scale(1); }
.cursor.is-active  { width: 52px; height: 52px; opacity: .35; }

@media (hover: none) {
  .cursor { display: none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background-color .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
  padding-block: 18px;
}
.nav--solid {
  background: rgba(2,44,34,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 2px 30px rgba(0,0,0,.35);
  padding-block: 10px;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav__logo { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 19px; }
.nav__logo-mark { font-size: 23px; color: var(--gold); }
.nav__logo-text { font-family: var(--font); font-weight: 400; letter-spacing: .5px; }
.nav__logo-text strong { font-weight: 800; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: 120px 100px;
  overflow: hidden;
  color: var(--text-on-dark);
  background: var(--bg-deep);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }

/* Hero photo — dimmed so mesh gradient is dominant */
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
  will-change: transform;
  opacity: 0.28;
}

/* Ken Burns */
@media (prefers-reduced-motion: no-preference) {
  .hero__img {
    animation: kenBurns 22s ease-in-out infinite alternate;
  }
}
@keyframes kenBurns {
  0%   { transform: scale(1.0)  translate(0, 0); }
  40%  { transform: scale(1.06) translate(-1.5%, -0.5%); }
  100% { transform: scale(1.1)  translate(1%, 0.8%); }
}

/* ── Animated Mesh Gradient Blobs ── */
.hero__mesh {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden;
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.mesh-blob--1 {
  width: 85vw; height: 85vw; max-width: 950px; max-height: 950px;
  background: radial-gradient(circle at 40% 40%, rgba(5,150,105,.58), rgba(2,44,34,.05) 70%);
  top: -35%; inset-inline-start: -22%;
}
.mesh-blob--2 {
  width: 65vw; height: 65vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle at 60% 60%, rgba(16,185,129,.48), transparent 70%);
  top: 10%; inset-inline-end: -22%;
}
.mesh-blob--3 {
  width: 48vw; height: 48vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle at 50% 50%, rgba(52,211,153,.28), transparent 70%);
  bottom: -18%; inset-inline-start: 12%;
}
.mesh-blob--4 {
  width: 38vw; height: 38vw; max-width: 420px; max-height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(245,158,11,.12), transparent 70%);
  top: 30%; inset-inline-start: 32%;
}

@media (prefers-reduced-motion: no-preference) {
  .mesh-blob--1 { animation: blob1 20s ease-in-out infinite alternate; }
  .mesh-blob--2 { animation: blob2 25s ease-in-out infinite alternate; }
  .mesh-blob--3 { animation: blob3 30s ease-in-out infinite alternate; }
  .mesh-blob--4 { animation: blob4 23s ease-in-out infinite alternate; }
}
@keyframes blob1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(7%, 11%) scale(1.18); }
}
@keyframes blob2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-9%, 7%) scale(0.87); }
}
@keyframes blob3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(5%, -13%) scale(1.24); }
}
@keyframes blob4 {
  from { transform: translate(0, 0) scale(1) rotate(0deg); }
  to   { transform: translate(-7%, 9%) scale(1.14) rotate(18deg); }
}

/* ── Aurora vignette layer ── */
.hero__aurora {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(2,44,34,.65) 0%, transparent 30%, transparent 60%, rgba(2,44,34,.92) 100%),
    linear-gradient(90deg, rgba(2,44,34,.38) 0%, transparent 45%, rgba(2,44,34,.22) 100%);
}

/* Multi-layer gradient overlay (above mesh) */
.hero__overlay {
  position: absolute; inset: 0; z-index: 3;
  background:
    linear-gradient(to top, rgba(2,44,34,.98) 0%, rgba(2,44,34,.52) 38%, transparent 100%),
    linear-gradient(to right, rgba(2,44,34,.38) 0%, transparent 65%);
}
.hero__shape {
  position: absolute; inset-block-start: -8%; inset-inline-end: -8%; z-index: 4;
  width: 55vw; height: 55vw; max-width: 650px; max-height: 650px;
  background: radial-gradient(circle, rgba(245,158,11,.09), transparent 70%);
  pointer-events: none;
}

/* Hero content */
.hero__content {
  position: relative; z-index: 5; width: 100%;
  will-change: transform;
}

/* ── Hero entrance animations ── */
.hero-anim {
  opacity: 0;
  transform: translateY(36px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-anim {
    animation: heroRise 1.1s var(--ease-spring) both;
    animation-delay: var(--anim-delay, 0s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim { opacity: 1; transform: none; animation: none; filter: none; }
}
@keyframes heroRise {
  0%   { opacity: 0; transform: translateY(50px); filter: blur(6px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ── Word-by-word animation spans (JS-driven) ── */
.hw {
  display: inline-block;
  opacity: 0;
  transform: translateY(48px);
}
@media (prefers-reduced-motion: no-preference) {
  .hw {
    animation: wordRise 0.95s var(--ease-spring) both;
    animation-delay: var(--wd, 0.3s);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hw { opacity: 1; transform: none; animation: none; }
}
@keyframes wordRise {
  0%   { opacity: 0; transform: translateY(48px); filter: blur(5px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.hw--gold {
  color: var(--gold);
  text-shadow: 0 0 32px rgba(245,158,11,.38), 0 0 64px rgba(245,158,11,.14);
}

.hero__eyebrow {
  font-family: var(--font);
  font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--sand);
  margin-bottom: 20px;
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(44px, 9.5vw, 76px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.hero__title span { color: var(--gold); }

.hero__sub {
  max-width: 520px;
  font-size: 18px;
  color: rgba(167,243,208,.88);
  line-height: 1.7;
}

/* ── Countdown — Premium Flip-Card Style ── */
.countdown {
  display: flex; align-items: flex-end; gap: 8px;
  margin-block: 36px 30px;
}
.countdown__block { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.countdown__num {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(30px, 7.5vw, 48px);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Split-flap card look */
  background: linear-gradient(
    180deg,
    #0f6647 0%,
    #0b5039 49.4%,
    rgba(0,0,0,.55) 49.4%,
    rgba(0,0,0,.55) 50.6%,
    #064e3b 50.6%,
    #053d2e 100%
  );
  border-radius: 10px;
  padding: 10px 14px;
  min-height: clamp(56px, 12vw, 74px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.07);
}

/* Gloss sheen on upper half */
.countdown__num::before {
  content: '';
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  height: 49%;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 100%);
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

/* 3D flip on digit change */
@media (prefers-reduced-motion: no-preference) {
  .countdown__num.digit-anim {
    animation: digitFlip .5s var(--ease-spring);
  }
}
@keyframes digitFlip {
  0%   { opacity: 0; transform: perspective(320px) rotateX(90deg) scaleY(0.88); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(320px) rotateX(0deg) scaleY(1); }
}

.countdown__label {
  font-family: var(--font);
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--sand);
}
.countdown__sep {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(26px, 6.5vw, 42px);
  color: var(--gold); opacity: .32; line-height: 1.2;
  align-self: flex-start; margin-top: 4px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.hero__price {
  margin-top: 28px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.hero__price-num  { font-family: var(--font-serif); font-weight: 700; font-size: 36px; color: #fff; }
.hero__price-note { font-size: 14px; color: var(--sand); }

/* Scroll indicator */
.hero__scroll {
  position: absolute; inset-block-end: 30px; inset-inline-start: 50%;
  transform: translateX(50%); z-index: 5;
  width: 28px; height: 46px;
  border: 2px solid rgba(167,243,208,.28);
  border-radius: 16px;
  transition: border-color .25s;
}
.hero__scroll:hover { border-color: rgba(167,243,208,.65); }
.hero__scroll span {
  position: absolute; inset-block-start: 8px; inset-inline-start: 50%;
  width: 4px; height: 8px;
  background: var(--emerald-lite); border-radius: 2px;
  transform: translateX(50%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__scroll span { animation: scrollDot 1.8s var(--ease) infinite; }
}
@keyframes scrollDot {
  0%,100% { opacity: 0; transform: translate(50%, 0); }
  50%     { opacity: 1; transform: translate(50%, 10px); }
}

/* ============================================================
   Timeline — road 3D
   ============================================================ */
.road-wrap {
  position: relative;
  max-width: 600px; margin-inline: auto;
  margin-bottom: 80px;
  padding-inline-end: 80px;
  perspective: 1800px;
  perspective-origin: 50% 0%;
}
.road-svg-track {
  position: absolute; inset-inline-end: 22px; inset-block: 0;
  width: 36px; overflow: visible; pointer-events: none;
}
.road-svg-track .track-base { stroke: rgba(167,243,208,.18); }
#fillLine {
  stroke: rgba(52,211,153,.9);
  stroke-dasharray: none;
  transition: all .7s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 8px rgba(52,211,153,.65));
}
#biker {
  stroke: var(--emerald-glow); fill: var(--bg-deep2); stroke-width: 2.5;
  transition: cy .7s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 10px rgba(52,211,153,.9));
}

.stop {
  display: flex; align-items: flex-start; gap: 20px; margin-bottom: 2.4rem;
  opacity: 0;
  transform: perspective(1400px) rotateX(55deg) rotateY(-20deg) translateY(120px) translateZ(-300px) scale(.75);
  transition: opacity 1s var(--ease-spring), transform 1s var(--ease-spring);
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.stop.on { opacity: 1; transform: perspective(1400px) rotateX(0) rotateY(0) translateY(0) translateZ(0) scale(1); }
.stop-icon-wrap {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; font-size: 28px;
  box-shadow:
    4px 8px 24px -4px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.3),
    0 0 0 1px rgba(255,255,255,.08);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease);
}
.stop:hover .stop-icon-wrap {
  transform: translateY(-5px) scale(1.08) rotateZ(-5deg);
  box-shadow: 4px 14px 32px -4px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.card-3d {
  flex: 1; border-radius: 18px; padding: 1.1rem 1.4rem;
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    0 6px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.06);
  transition: transform .6s var(--ease-spring), box-shadow .6s var(--ease), border-color .4s;
  transform-style: preserve-3d;
}
.stop:hover .card-3d {
  box-shadow:
    0 20px 55px rgba(0,0,0,.3),
    0 0 0 1.5px rgba(52,211,153,.4),
    inset 0 1px 0 rgba(255,255,255,.48);
  border-color: rgba(52,211,153,.28);
}
.card-3d::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(52,211,153,.05) 0%, transparent 50%);
  opacity: 0; transition: opacity .4s; z-index: 0; pointer-events: none;
}
.stop:hover .card-3d::after { opacity: 1; }
.card-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .08; z-index: 0; mix-blend-mode: luminosity;
}
.card-content { position: relative; z-index: 1; }
.time-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; color: #fff;
  padding: 3px 11px; border-radius: 20px; margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 10px rgba(0,0,0,.25); letter-spacing: .5px;
}
.card-3d .card-title {
  font-family: var(--font-serif); font-size: 17px; font-weight: 700;
  color: rgba(236,253,245,.95); margin-bottom: 4px;
}
.card-3d .card-body { font-size: 13px; color: rgba(167,243,208,.8); line-height: 1.65; }

/* Deep-section card overrides */
.section--deep .card {
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(52,211,153,.18);
  box-shadow: 0 6px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(52,211,153,.12);
}
.section--deep .card:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow: 0 22px 55px rgba(0,0,0,.28), 0 0 0 1.5px rgba(52,211,153,.4);
  border-color: rgba(52,211,153,.32);
}
.section--deep .card__icon  { background: rgba(52,211,153,.15); color: var(--emerald-glow); }
.section--deep .card__title { color: rgba(236,253,245,.95); }
.section--deep .card__text  { color: rgba(167,243,208,.82); }
.section--deep .btn--primary {
  background: var(--bg-deep); color: var(--text-on-dark);
  box-shadow: 0 6px 24px rgba(0,0,0,.38);
  border: 1px solid rgba(52,211,153,.2);
}
.section--deep .btn--primary:hover {
  background: var(--bg-deep2); transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,.42), 0 0 0 1.5px rgba(52,211,153,.32);
}

@media (prefers-reduced-motion: reduce) {
  .stop { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Cards (4-grid)
   ============================================================ */
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.card {
  background: var(--warm-white); border-radius: var(--r-card); padding: 28px 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16,185,129,.08);
  transition: transform .28s var(--ease-spring), box-shadow .28s var(--ease);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(16,185,129,.14);
}
.card__icon {
  display: inline-flex; width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(5,150,105,.1); color: var(--emerald-mid);
  margin-bottom: 16px;
}
.card__icon svg { width: 26px; height: 26px; }
.card__title { font-family: var(--font-serif); font-weight: 700; font-size: 21px; color: var(--bg-deep); margin-bottom: 6px; }
.card__text  { font-size: 15px; color: var(--text-soft); line-height: 1.7; }

/* ============================================================
   About
   ============================================================ */
.about__grid {
  display: grid; grid-template-columns: 1fr; gap: 52px;
  align-items: center; margin-bottom: 80px;
}
.about__media { position: relative; }
.about__media img {
  width: 100%; border-radius: var(--r-card);
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4/5; object-fit: cover;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .6s var(--ease-spring), box-shadow .5s var(--ease);
}
.about__badge {
  position: absolute; inset-block-end: -20px; inset-inline-start: -14px;
  background: linear-gradient(135deg, var(--mustard) 0%, #dc2626 100%);
  color: #fff;
  border-radius: var(--r-card); padding: 14px 22px;
  display: flex; flex-direction: column; line-height: 1.1;
  box-shadow: var(--shadow-lg), 0 0 0 3px rgba(234,88,12,.18);
}
.about__badge strong { font-family: var(--font-serif); font-size: 30px; font-weight: 700; min-width: 4ch; }
.about__badge span { font-size: 12px; margin-top: 3px; opacity: .9; }
.about__body p { margin-top: 16px; color: var(--text-soft); line-height: 1.85; }
.about__body .section__kicker { margin-top: 0; }
.about__sign { margin-top: 28px !important; color: var(--bg-deep); }
.about__sign strong { font-family: var(--font-serif); font-size: 20px; }

/* ============================================================
   Gallery — Masonry-style named areas
   ============================================================ */
.gallery {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 240px 240px 240px;
  grid-template-areas:
    "a b c"
    "a d d"
    "e e f";
  gap: 14px;
  margin-top: 48px;
}
.gallery__item {
  position: relative; overflow: hidden;
  border-radius: var(--r-img);
  box-shadow: var(--shadow);
  transition:
    box-shadow .4s var(--ease),
    transform .5s var(--ease-spring);
  will-change: transform;
}
.gallery__item--a { grid-area: a; }
.gallery__item--b { grid-area: b; }
.gallery__item--c { grid-area: c; }
.gallery__item--d { grid-area: d; }
.gallery__item--e { grid-area: e; }
.gallery__item--f { grid-area: f; }

.gallery__item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease-spring), filter .4s var(--ease);
  will-change: transform;
}
.gallery__item:hover {
  box-shadow: var(--shadow-xl), 0 0 0 2px rgba(52,211,153,.28);
}
.gallery__item:hover img { transform: scale(1.08); filter: brightness(1.05) saturate(1.1); }

.gallery__item figcaption {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  direction: rtl;
  background: linear-gradient(to top, rgba(2,44,34,.92) 0%, transparent 100%);
  color: var(--text-on-dark);
  padding: 30px 16px 14px;
  font-size: 14px; font-weight: 500;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gallery__item:hover figcaption { opacity: 1; transform: translateY(0); }

@media (max-width: 767px) {
  .gallery {
    direction: rtl;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3, 160px);
    grid-template-areas:
      "a b"
      "c d"
      "e f";
    gap: 10px;
  }
}

/* ============================================================
   Testimonials — Carousel
   ============================================================ */
.carousel { position: relative; overflow: hidden; }
.carousel__track {
  direction: ltr;
  display: flex;
  gap: 20px;
  transition: transform .55s var(--ease-spring);
  will-change: transform;
}
.testi__card {
  direction: rtl;
  flex: 0 0 100%;
  background: var(--warm-white);
  border-radius: var(--r-card); padding: 36px 32px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16,185,129,.08);
  transition: transform .4s var(--ease-spring), box-shadow .4s var(--ease), opacity .4s var(--ease);
}
@media (min-width: 768px) {
  .testi__card { flex: 0 0 calc(33.333% - 14px); }
  .testi__card:not(.is-active) { opacity: .58; transform: scale(.93); }
  .testi__card.is-active {
    opacity: 1; transform: scale(1.02);
    box-shadow: var(--shadow-lg), 0 0 0 1.5px rgba(16,185,129,.18);
  }
}
.testi__stars { color: var(--gold); font-size: 19px; letter-spacing: 2px; margin-bottom: 18px; }
.testi__card blockquote {
  font-family: var(--font-serif);
  font-size: 19px; color: var(--bg-deep);
  margin-bottom: 26px; line-height: 1.65;
}
.testi__card figcaption { display: flex; align-items: center; gap: 14px; }
.testi__card figcaption img {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(16,185,129,.2);
}
.testi__card figcaption strong { display: block; font-weight: 600; font-size: 15px; color: var(--bg-deep); }
.testi__card figcaption span   { font-size: 13px; color: var(--text-soft); }

.carousel__nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 36px;
}
.carousel__btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(5,150,105,.25);
  background: var(--warm-white); color: var(--emerald-mid);
  font-size: 24px; font-weight: 300;
  display: flex; align-items: center; justify-content: center;
  transition: background .22s, transform .22s var(--ease-spring), border-color .2s;
}
.carousel__btn:hover {
  background: var(--emerald-mid); color: #fff;
  transform: scale(1.12); border-color: transparent;
  box-shadow: 0 6px 20px rgba(5,150,105,.3);
}
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(5,150,105,.25); border: none;
  transition: background .22s, transform .22s var(--ease-spring);
}
.carousel__dot.is-active { background: var(--emerald-mid); transform: scale(1.45); }

/* ============================================================
   Register / Form
   ============================================================ */
.register__grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.badge-spots {
  display: inline-block;
  background: linear-gradient(135deg, var(--mustard) 0%, #dc2626 100%);
  color: #fff;
  font-weight: 600; font-size: 14px; padding: 7px 18px; border-radius: 999px;
  margin-bottom: 22px;
  box-shadow: 0 4px 16px rgba(234,88,12,.32);
}
.register__intro p { margin-top: 16px; opacity: .9; line-height: 1.8; }
.register__trust { margin-top: 28px; display: grid; gap: 14px; }
.register__trust li { display: flex; align-items: center; gap: 12px; color: var(--sand); font-size: 15px; }
.register__trust span { font-size: 18px; }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.form__field { display: grid; gap: 8px; }
.form__field > span { font-size: 14px; font-weight: 500; color: var(--text-on-dark); }
.form__field input,
.form__field select {
  height: 54px;
  background: rgba(236,253,245,.06);
  border: 1px solid rgba(167,243,208,.2);
  border-radius: var(--r-btn);
  padding-inline: 16px; font-family: inherit; font-size: 16px; color: var(--text-on-dark);
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none; appearance: none;
}
.form__field input:focus,
.form__field select:focus {
  outline: none; border-color: var(--emerald-glow);
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
  background: rgba(236,253,245,.1);
}
.form__field input::placeholder { color: rgba(167,243,208,.38); }
.form__field select option { background: var(--bg-deep2); }

.form__check { display: flex; align-items: center; gap: 12px; color: var(--text-on-dark); font-size: 15px; }
.form__check input { width: 20px; height: 20px; accent-color: var(--emerald-glow); }

.form__pay {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  border: 1px dashed rgba(167,243,208,.2); border-radius: var(--r-btn);
  padding: 20px; color: var(--sand); font-size: 14px;
  background: rgba(236,253,245,.03);
}
.form__pay-lock { font-size: 18px; }
.form__small { font-size: 12px; color: var(--sand); text-align: center; opacity: .75; }

.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-done    { background: var(--emerald-mid); }
.spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   FAQ — smooth accordion
   ============================================================ */
.faq { display: grid; gap: 12px; }
.faq__item {
  background: var(--cream); border-radius: var(--r-card);
  padding: 0 24px; overflow: hidden;
  border: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.faq__item[open] {
  border-color: rgba(16,185,129,.15);
  box-shadow: var(--shadow), 0 0 0 1px rgba(16,185,129,.08);
}
.faq__item summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 700; font-size: 18px; color: var(--bg-deep);
  padding-block: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  user-select: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--font);
  font-weight: 800; font-size: 26px;
  color: var(--emerald-mid); flex-shrink: 0;
  display: inline-block;
  transition: transform .32s var(--ease-spring), color .2s;
}
.faq__item[open] summary::after { transform: rotate(45deg); color: var(--gold); }

.faq__body { padding-bottom: 22px; color: var(--text-soft); font-size: 15px; line-height: 1.85; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--bg-deep); color: var(--sand); padding-block: 68px 28px; }
.footer__inner {
  display: grid; grid-template-columns: 1fr; gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer__brand .nav__logo-mark { color: var(--gold); }
.footer__brand { display: grid; gap: 8px; }
.footer__brand p { font-size: 14px; max-width: 320px; margin-top: 10px; opacity: .6; line-height: 1.75; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.footer__links a {
  font-weight: 500; position: relative;
  transition: color .22s;
}
.footer__links a::after {
  content: "";
  position: absolute; inset-block-end: -2px;
  inset-inline-start: 50%; inset-inline-end: 50%;
  height: 1px; background: var(--emerald-glow);
  transition: inset-inline-start .28s var(--ease), inset-inline-end .28s var(--ease);
}
.footer__links a:hover { color: var(--text-on-dark); }
.footer__links a:hover::after { inset-inline-start: 0; inset-inline-end: 0; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 10px; font-size: 13px; padding-top: 24px; opacity: .42;
}

/* ============================================================
   CTA צף (mobile)
   ============================================================ */
.cta-float {
  position: fixed; inset-block-end: 16px; inset-inline: 16px; z-index: 88;
  background: var(--emerald-mid); color: #fff;
  text-align: center; font-weight: 600; font-size: 16px;
  padding: 15px; border-radius: var(--r-btn);
  box-shadow: var(--shadow-lg), 0 0 22px rgba(5,150,105,.32);
  transform: translateY(130%);
  transition: transform .4s var(--ease-spring);
}
.cta-float.is-visible { transform: translateY(0); }

/* ============================================================
   WhatsApp Floating Button
   ============================================================ */
.wa-float {
  position: fixed;
  inset-block-end: 84px;
  inset-inline-end: 18px;
  z-index: 89;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,.45);
  transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease);
}
.wa-float:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 14px 38px rgba(37,211,102,.55);
}
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: waPulse 3.5s ease infinite; }
}
@keyframes waPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,.45); }
  55%     { box-shadow: 0 6px 24px rgba(37,211,102,.45), 0 0 0 14px rgba(37,211,102,.07); }
}

@media (min-width: 768px) {
  .wa-float { inset-block-end: 28px; inset-inline-end: 24px; }
  .cta-float { display: none; }
}

/* ============================================================
   Reveal animations — global IntersectionObserver
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s var(--ease), transform .75s var(--ease-spring);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Reduced motion — disable all animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal          { opacity: 1; transform: none; transition: none; }
  .hero__img       { animation: none; transform: scale(1); }
  .hero-anim       { opacity: 1; transform: none; animation: none; filter: none; }
  .wa-float        { animation: none; }
  .hero__scroll span { animation: none; opacity: 1; }
  .stop            { opacity: 1; transform: none; transition: none; }
  .hw              { opacity: 1; transform: none; animation: none; filter: none; }
  .mesh-blob       { animation: none; }
  html             { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width: 768px) {
  .cards     { grid-template-columns: repeat(2,1fr); gap: 20px; }
  .form__row { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cards          { grid-template-columns: repeat(4,1fr); }
  .about__grid    { grid-template-columns: 0.9fr 1.1fr; gap: 72px; }
  .register__grid { grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
  .footer__inner  { grid-template-columns: 1fr auto; align-items: center; }
  .hero           { align-items: center; }
}