/* ============================================================================
   הסיפורים שלי, דף הבית
   ----------------------------------------------------------------------------
   כיוון: אלבום משפחתי בשמש של אחר צהריים. שמנת חמה, טרקוטה, דבש,
   ודיו חום־חם במקום כחול קר. הצבע הקר הוא מה שגרם לגרסה הקודמת
   להרגיש סטטית ורשמית.

   שלושה גופנים: Rubik לכותרות (עגול, ישראלי, אנרגטי), Assistant לגוף,
   ו-Gveret Levin לכתב־יד, הערות קטנות בשוליים, כמו על גב תמונה.

   ניגודיות (נבדק):
     לבן על טרקוטה #C4441F ......... 5.0:1
     דיו #2E1F16 על שמנת #FFF9F0 ... 15.2:1
     מושתק #7A6354 על שמנת ......... 5.3:1
     שמנת־כהה #C9B5A4 על חום #241812 8.8:1
     דבש #F2A93B על חום #241812 .... 8.7:1
   ========================================================================== */

:root {
  /* נייר */
  --cream: #fff9f0;
  --cream-2: #fdefe0;
  --peach: #fce3d0;
  --white: #fffdfa;

  /* דיו, חום, לא כחול */
  --ink: #2e1f16;
  --ink-2: #7a6354;
  --ink-3: #a08d7e;
  --line: #f0dfcd;

  /* אש ודבש */
  --flame: #c4441f;
  --flame-hot: #a63616;
  --flame-soft: #fbe0d6;
  --honey: #f2a93b;
  --honey-soft: #fdf0d8;
  --leaf: #4e7c59;
  --wa: #128c4a;

  /* כהה חם */
  --dark: #241812;
  --dark-2: #362419;
  --on-dark: #fff3e4;
  --on-dark-2: #c9b5a4;

  --danger: #b42318;
  --ok: #2f6b45;

  --f-head: "Rubik", -apple-system, "Segoe UI", sans-serif;
  --f-body: "Assistant", -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Gveret Levin", "Rubik", cursive;

  --r-sm: 12px;
  --r: 20px;
  --r-lg: 30px;
  --r-pill: 999px;

  --sh-sm: 0 2px 12px rgba(46, 31, 22, 0.07);
  --sh: 0 16px 40px rgba(46, 31, 22, 0.12);
  --sh-lg: 0 30px 70px rgba(46, 31, 22, 0.18);

  --wrap: 1160px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --bounce: cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ── בסיס ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; min-width: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: 17.5px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--f-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--flame);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.skip-link:focus { top: 0; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

/* כתב־יד, תמיד קישוט, אף פעם לא מידע קריטי */
.hand {
  font-family: var(--f-hand);
  color: var(--flame);
  line-height: 1.4;
}

.eyebrow {
  font-family: var(--f-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--flame);
  margin-bottom: 10px;
}
.eyebrow-light { color: var(--honey); }

h2 { font-size: clamp(32px, 4.6vw, 52px); }

.head { text-align: center; margin-bottom: 54px; }

/* ── כפתורים ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 28px;
  border-radius: var(--r-pill);
  font-family: var(--f-head);
  font-size: 16.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.25s var(--bounce), box-shadow 0.25s var(--ease),
    background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}
.btn:hover svg { transform: translateX(-4px); }
.btn-sm { min-height: 42px; padding: 9px 20px; font-size: 15px; }
.btn-lg { min-height: 58px; padding: 16px 34px; font-size: 18px; }
.btn-block { width: 100%; }

.btn-fill {
  background: var(--flame);
  color: #fff;
  box-shadow: 0 10px 24px rgba(196, 68, 31, 0.3);
}
.btn-fill:hover {
  background: var(--flame-hot);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 18px 36px rgba(196, 68, 31, 0.38);
}

.btn-soft {
  background: var(--white);
  color: var(--ink);
  border: 2px solid var(--line);
}
.btn-soft:hover {
  border-color: var(--flame);
  color: var(--flame);
  transform: translateY(-3px);
}

/* ── ניווט ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 249, 240, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--line); box-shadow: var(--sh-sm); }

.nav-in {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.logo img { width: 40px; height: 40px; }

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-inline-start: auto;
}
.menu > a {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s var(--ease);
}
.menu > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--flame);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.menu > a:hover { color: var(--ink); }
.menu > a:hover::after { transform: scaleX(1); }

.menu-end { display: flex; align-items: center; gap: 14px; }
.tel {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15.5px;
  direction: ltr;
  color: var(--ink);
  white-space: nowrap;
}
.tel:hover { color: var(--flame); }

.logins { display: flex; gap: 6px; }
.logins button {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  min-height: 42px;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.logins button:hover { color: var(--ink); background: var(--peach); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  margin-inline-start: auto;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--white);
}
.burger span {
  display: block; width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.wa svg {
  fill: currentColor;
  stroke: none;
}
.tel.wa {
  direction: rtl;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--wa);
}
.tel.wa svg { width: 19px; height: 19px; }
.tel.wa:hover { color: var(--ink); }
.tel-big.wa { color: var(--wa); }
.tel-big.wa svg { width: 24px; height: 24px; }
.talk .tel-big.wa { color: var(--wa); }

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-block: 66px 96px;
  background:
    linear-gradient(170deg, var(--cream) 0%, var(--cream-2) 62%, var(--peach) 100%);
  overflow: hidden;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.55;
}
.blob-a {
  width: 460px; height: 460px;
  top: -140px; inset-inline-start: -120px;
  background: radial-gradient(circle, rgba(242, 169, 59, 0.55), transparent 68%);
  animation: drift 17s ease-in-out infinite;
}
.blob-b {
  width: 380px; height: 380px;
  bottom: -110px; inset-inline-end: 8%;
  background: radial-gradient(circle, rgba(196, 68, 31, 0.32), transparent 68%);
  animation: drift 21s ease-in-out infinite reverse;
}
.blob-c {
  width: 420px; height: 420px;
  top: -130px; inset-inline-end: -110px;
  background: radial-gradient(circle, rgba(242, 169, 59, 0.4), transparent 68%);
  animation: drift 19s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(26px, -22px) scale(1.1); }
}

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 56px;
  align-items: center;
}

.hand-kicker {
  font-size: 27px;
  margin-bottom: 6px;
  transform: rotate(-2deg);
  transform-origin: right center;
}

.hero h1 {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 900;
  letter-spacing: -0.035em;
}
.hero h1 .hl {
  position: relative;
  display: inline-block;
  color: var(--flame);
}
/* קו־הדגשה מצויר ביד מתחת למילים */
.hero h1 .hl::after {
  content: "";
  position: absolute;
  inset-inline: -8px;
  bottom: -0.02em;
  height: 0.13em;
  border-radius: var(--r-pill);
  background: var(--honey);
  transform: scaleX(0);
  transform-origin: right center;
  animation: underline 0.75s var(--ease) 0.35s forwards;
}
@keyframes underline { to { transform: scaleX(1); } }

.lede {
  font-size: clamp(17.5px, 1.7vw, 20.5px);
  color: var(--ink-2);
  line-height: 1.8;
  margin-top: 22px;
  max-width: 32em;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.micro { font-size: 14.5px; color: var(--ink-3); margin-top: 16px; }

/* ── קולאז' ההירו ───────────────────────────────────────────────────────── */
.hero-art { position: relative; padding-block: 20px; }

.shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--sh-lg);
  transition: transform 0.5s var(--ease);
}
.shot-main {
  transform: rotate(-2.2deg);
  border: 8px solid var(--white);
}
.shot-main img {
  width: 100%;
  border-radius: calc(var(--r-lg) - 10px);
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.shot-main:hover { transform: rotate(0deg) scale(1.015); }

.shot-phone {
  position: absolute;
  width: 30%;
  bottom: -34px;
  inset-inline-start: -26px;
  border: 6px solid var(--white);
  border-radius: 26px;
  transform: rotate(5deg);
  z-index: 2;
}
.shot-phone:hover { transform: rotate(0deg) translateY(-6px); }

.note-a, .note-b {
  position: absolute;
  z-index: 3;
  font-size: 22px;
  line-height: 1.35;
  text-align: center;
  padding: 12px 20px;
  border-radius: 18px 18px 18px 4px;
  background: var(--white);
  box-shadow: var(--sh);
  transition: transform 0.35s var(--bounce);
}
.note-a {
  top: -22px;
  inset-inline-end: -14px;
  transform: rotate(3.5deg);
  color: var(--leaf);
}
.note-b {
  bottom: -10px;
  inset-inline-end: -18px;
  transform: rotate(-3.5deg);
}
.note-a:hover, .note-b:hover { transform: rotate(0deg) scale(1.04); }

/* ── רצועת השאלות ───────────────────────────────────────────────────────── */
.strip {
  background: var(--dark);
  color: var(--on-dark);
  padding-block: 46px;
  overflow: hidden;
}
.strip-lead {
  text-align: center;
  font-family: var(--f-head);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  margin-bottom: 26px;
}
.strip-lead em {
  font-style: normal;
  color: var(--honey);
}

.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
  padding-inline-start: 14px;
  animation: slide 46s linear infinite;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}
.marquee-track span {
  flex-shrink: 0;
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(242, 169, 59, 0.35);
  background: rgba(255, 243, 228, 0.06);
  white-space: nowrap;
}
.marquee-track span:nth-child(3n) { border-color: rgba(196, 68, 31, 0.5); }
.marquee-track span:nth-child(4n) { background: rgba(242, 169, 59, 0.12); }

/* ── איך זה עובד ────────────────────────────────────────────────────────── */
.how { padding-block: 96px; background: var(--cream); }

.beats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.beat {
  position: relative;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 26px 32px;
  text-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.3s var(--ease);
}
.beat:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh);
  border-color: var(--peach);
}
.beat-n {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--flame);
  color: #fff;
  font-family: var(--f-head);
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(196, 68, 31, 0.35);
}
.beat-art {
  height: 210px;
  margin: 18px auto 22px;
  display: grid;
  place-items: end center;
  border-radius: var(--r);
  background: linear-gradient(150deg, var(--honey-soft), var(--flame-soft));
  overflow: hidden;
}
.beat-art img {
  width: 132px;
  margin-bottom: -30px;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 12px 26px rgba(46, 31, 22, 0.2);
  transform: rotate(-3deg);
  transition: transform 0.4s var(--bounce);
}
.beat:hover .beat-art img { transform: rotate(0deg) translateY(-10px) scale(1.03); }
/* הספר הוא תצלום מוצר ריבועי, אותו מציגים שלם ובמרכז, לא חתוך. */
.beat-art-book img {
  width: auto;
  max-height: 78%;
  align-self: center;
  margin-bottom: 0;
  border-radius: 6px;
}

.beat h3 { font-size: 24px; margin-bottom: 8px; }
.beat p { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }

/* ── מי אנחנו ───────────────────────────────────────────────────────────── */
.who {
  padding-block: 76px;
  background: var(--peach);
  text-align: center;
}
.who-in { max-width: 880px; margin-inline: auto; }
.who h2 { font-size: clamp(28px, 3.4vw, 40px); }
.who-lead {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: clamp(17.5px, 1.8vw, 20px);
  color: var(--ink);
  line-height: 1.85;
}


.tel-big {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 26px;
  font-family: var(--f-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--flame);
  direction: ltr;
  min-height: 48px;
  transition: transform 0.25s var(--bounce);
}
.tel-big svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tel-big:hover { transform: scale(1.05); }
.tel-light { color: var(--honey); }

/* ── המלצות ─────────────────────────────────────────────────────────────── */
.voices { padding-block: 96px; background: var(--cream); }

.placeholder-flag {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 700;
  color: #8a4b00;
  background: #fff2cf;
  border: 1.5px dashed #d9a441;
  border-radius: var(--r-pill);
  padding: 7px 18px;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.voice {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 26px 26px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.voice:nth-child(2) { transform: rotate(-0.8deg); }
.voice:nth-child(3) { transform: rotate(0.6deg); }
.voice:hover { transform: rotate(0deg) translateY(-7px); box-shadow: var(--sh); }

.voice-mark {
  position: absolute;
  top: -22px;
  inset-inline-end: 26px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--flame);
  color: #fff;
  font-family: var(--f-head);
  font-size: 22px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(196, 68, 31, 0.3);
}
.voice:nth-child(2) .voice-mark { background: var(--leaf); box-shadow: 0 8px 18px rgba(78, 124, 89, 0.32); }
.voice:nth-child(3) .voice-mark { background: #b8801f; box-shadow: 0 8px 18px rgba(184, 128, 31, 0.32); }

.voice blockquote {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
}
.voice blockquote::before { content: "„"; color: var(--honey); font-size: 26px; }
.voice figcaption {
  margin-top: auto;
  padding-top: 18px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--line);
}
.voice figcaption strong { display: block; font-family: var(--f-head); font-weight: 700; }
.voice figcaption span { font-size: 14.5px; color: var(--ink-2); }

/* ── הספר ───────────────────────────────────────────────────────────────── */
.book {
  position: relative;
  padding-block: 96px;
  background: radial-gradient(130% 100% at 15% 0%, var(--dark-2), var(--dark) 62%);
  color: var(--on-dark);
  overflow: hidden;
}
.book-in {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
.book-text p {
  color: var(--on-dark-2);
  font-size: clamp(17px, 1.7vw, 19.5px);
  line-height: 1.85;
  margin-top: 16px;
  margin-bottom: 32px;
}
.book-art {
  border-radius: var(--r-lg);
  overflow: visible;
  transform: rotate(1.6deg);
  transition: transform 0.5s var(--ease);
}
.book-art:hover { transform: rotate(0deg) scale(1.015); }
.book-art img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 9px solid var(--white);
  box-shadow: var(--sh-lg);
}
.book-art figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 20px;
  color: var(--honey);
  transform: rotate(-1.4deg);
}

/* ── שאלות ──────────────────────────────────────────────────────────────── */
.faq { padding-block: 84px; background: var(--cream); }
.faq-in { max-width: 780px; margin-inline: auto; }
.faq h2 { text-align: center; font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 34px; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq details {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq details[open] { border-color: var(--flame); box-shadow: var(--sh-sm); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 17px 24px;
  font-family: var(--f-head);
  font-size: 18.5px;
  font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--flame-soft);
  color: var(--flame);
  font-family: var(--f-head);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  transition: transform 0.3s var(--bounce), background-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(135deg);
  background: var(--flame);
  color: #fff;
}
.faq details p {
  padding: 0 24px 22px;
  color: var(--ink-2);
  line-height: 1.8;
}

/* ── בואו נדבר ──────────────────────────────────────────────────────────── */
.talk {
  position: relative;
  padding-block: 96px;
  background: linear-gradient(200deg, var(--peach), var(--cream-2) 55%, var(--cream));
  overflow: hidden;
}
.talk-in {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hand-light { font-size: 26px; transform: rotate(-2deg); transform-origin: right center; }
.talk-text h2 { margin-top: 4px; }
.talk-text > p {
  color: var(--ink-2);
  font-size: 18px;
  line-height: 1.8;
  margin-top: 16px;
}
.talk .tel-big { margin-top: 22px; color: var(--flame); }

/* ── טופס ───────────────────────────────────────────────────────────────── */
.form {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 30px 28px;
  box-shadow: var(--sh);
  display: flex;
  flex-direction: column;
}
.form label {
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 7px;
}
.form input[type="text"],
.form input[type="tel"] {
  font-family: var(--f-body);
  font-size: 17px;
  min-height: 54px;
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.form input:focus {
  border-color: var(--flame);
  background: var(--white);
}
.form input.invalid { border-color: var(--danger); }
.err {
  display: block;
  min-height: 22px;
  font-size: 13.5px;
  color: var(--danger);
  margin-top: 4px;
}

.chips { border: none; margin-bottom: 16px; }
.chips legend {
  font-family: var(--f-head);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}
.chips legend span { font-family: var(--f-body); font-weight: 400; color: var(--ink-3); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row button {
  font-size: 15px;
  font-weight: 600;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  color: var(--ink-2);
  transition: all 0.2s var(--ease);
}
.chip-row button:hover { border-color: var(--flame); color: var(--flame); }
.chip-row button[aria-pressed="true"] {
  border-color: var(--flame);
  background: var(--flame);
  color: #fff;
}

.consent {
  display: flex !important;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--f-body) !important;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  cursor: pointer;
}
.consent input {
  width: 22px; height: 22px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--flame);
  cursor: pointer;
}
.status {
  min-height: 26px;
  font-size: 15.5px;
  font-weight: 700;
  text-align: center;
  margin-top: 12px;
}
.legal { font-size: 13px; color: var(--ink-3); text-align: center; line-height: 1.6; }
.legal a { color: var(--ink-2); text-decoration: underline; }

/* ── פוטר ───────────────────────────────────────────────────────────────── */
.foot {
  background: var(--dark);
  color: var(--on-dark-2);
  padding-block: 44px 30px;
}
.foot-in { text-align: center; }
.logo-foot { color: var(--on-dark); justify-content: center; margin-bottom: 18px; }
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: 24px;
}
.foot-links a {
  font-size: 15.5px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s var(--ease);
}
.foot-links a:hover { color: var(--honey); }
.foot-bottom {
  font-size: 14px;
  padding-top: 22px;
  border-top: 1px solid rgba(201, 181, 164, 0.18);
}

/* ── CTA דביק ───────────────────────────────────────────────────────────── */
.sticky-cta {
  display: none;
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 90;
  text-align: center;
  background: var(--flame);
  color: #fff;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 18px;
  padding: 17px;
  min-height: 58px;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 30px rgba(46, 31, 22, 0.35);
  transition: transform 0.35s var(--bounce), opacity 0.3s var(--ease);
}
.sticky-cta.hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }

/* ── חשיפה בגלילה ───────────────────────────────────────────────────────── */
.rev { opacity: 0; transform: translateY(24px) scale(0.985); }
.rev.on {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ── רספונסיבי ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .beats, .voice-grid { grid-template-columns: 1fr 1fr; }
  .voice-grid > :last-child { grid-column: 1 / -1; max-width: 520px; margin-inline: auto; }
  .beats > :last-child { grid-column: 1 / -1; max-width: 520px; margin-inline: auto; }
}

@media (max-width: 900px) {
  .burger { display: flex; }

  .menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1.5px solid var(--line);
    box-shadow: var(--sh);
    padding: 12px 20px 26px;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  }
  .menu.open { transform: none; opacity: 1; visibility: visible; }
  .menu > a {
    min-height: 54px;
    display: flex;
    align-items: center;
    font-size: 18.5px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
  }
  .menu > a::after { display: none; }
  .menu-end { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 20px; }
  .tel { text-align: center; font-size: 19px; min-height: 46px; line-height: 46px; }
  .logins { justify-content: center; }
  .logins button { flex: 1; border: 1.5px solid var(--line); }

  .hero { padding-block: 40px 66px; }
  .hero-in, .book-in, .talk-in { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { max-width: 480px; margin-inline: auto; width: 100%; }
  .note-a { inset-inline-end: 0; top: -18px; }
  .note-b { inset-inline-end: -2px; }
  .shot-phone { width: 27%; inset-inline-start: -12px; bottom: -26px; }

  .how, .voices, .book, .talk { padding-block: 68px; }
  .who { padding-block: 56px; }
  .book-in > .book-art { order: -1; }

  .sticky-cta { display: block; }
  body { padding-bottom: 88px; }
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { width: min(100% - 32px, var(--wrap)); }
  .hero h1 { font-size: clamp(34px, 9.5vw, 46px); }
  h2 { font-size: clamp(27px, 8vw, 36px); }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hand-kicker { font-size: 23px; }
  .note-a, .note-b { font-size: 16px; }

  .beats, .voice-grid { grid-template-columns: 1fr; }
  .beats > :last-child, .voice-grid > :last-child { grid-column: auto; }
  .beat-art { height: 180px; }
  .voice:nth-child(2), .voice:nth-child(3) { transform: none; }

  .marquee-track span { font-size: 15px; padding: 10px 18px; }
  .form { padding: 26px 20px 22px; }
  .foot-links { gap: 8px 18px; }
}

/* ── תנועה מופחתת ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track { animation: none; transform: none; }
  .hero h1 .hl::after { transform: scaleX(1); }
  .rev { opacity: 1; transform: none; }
  .shot-main img { animation: none; }
}

/* ── הדפסה ──────────────────────────────────────────────────────────────── */
@media print {
  .nav, .sticky-cta, .form, .strip, .blob { display: none !important; }
  body { background: #fff; padding-bottom: 0; }
}