/* === FLOWLY DESIGN TOKENS === */
:root {
  --cream:        #f5f0e6;
  --cream-soft:   #faf6ec;
  --paper:        #fbf8f1;

  --ink:          #16211b;
  --ink-soft:     #2c3a32;
  --muted:        #6b7a72;

  --forest:       #1f4a35;
  --forest-deep:  #143024;
  --forest-light: #2d6b4e;
  --mustard:      #d4942b;
  --mustard-soft: #e8b657;
  /* The headline highlight band. Derived from --mustard rather than restated
     as a literal, so retinting the palette carries through. Not folded into
     --mustard-soft: that is an opaque lighter mustard with its own job on dark
     backgrounds, and overloading the name would change how buttons look. */
  --mustard-wash: color-mix(in srgb, var(--mustard) 35%, transparent);
  --clay:         #c85a3c;

  --border:       #d9d1bf;
  --border-soft:  #e8e0cd;

  --font-display: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --font-body:    'Heebo', 'Segoe UI', Arial, sans-serif;

  --sp-xs: 4px;  --sp-sm: 8px;   --sp-md: 16px;  --sp-lg: 24px;
  --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 80px; --sp-4xl: 100px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 32px; --r-full: 999px;

  --sh-sm:  0 2px 4px rgba(20, 48, 36, 0.04);
  --sh-md:  0 8px 24px rgba(20, 48, 36, 0.08);
  --sh-lg:  0 20px 50px rgba(20, 48, 36, 0.15);
  --sh-cta: 0 8px 24px rgba(20, 48, 36, 0.25);

  --t-fast: 0.2s ease;
  --t-base: 0.3s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  direction: rtl;
}

/* === GRAIN OVERLAY === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

:focus-visible { outline: 2px solid var(--forest-light); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

/* === EM HIGHLIGHT — the signature === */
/* Drawn as a background band rather than the spec's absolutely positioned
   ::after. An absolute box covers one fragment, so the moment the highlighted
   phrase wraps to a second line the stroke stays behind on the first and the
   rest of the phrase is left bare. Hebrew headlines wrap constantly: the words
   are longer and the hero clamps down on narrow screens.
   box-decoration-break: clone gives every fragment its own band.
   This also drops the negative z-index, and with it the isolation: isolate the
   spec warns about, since nothing is stacked behind anything any more.
   The band sits at 0.1em to 0.4em above the baseline. The spec's fixed 5px/9px
   is calibrated to Latin x-height, and Hebrew letters sit lower with no
   ascenders, so at that offset it reads as an underline rather than a
   highlighter stroke. Relative units also hold their proportion through the
   clamp() on the headings. */
h1 em, h2 em {
  font-style: italic;
  color: var(--forest);
  padding-inline: 0.05em;
  background-image: linear-gradient(
    to top,
    transparent 0.1em,
    var(--mustard-wash) 0.1em,
    var(--mustard-wash) 0.4em,
    transparent 0.4em
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--sp-lg); }

/* === NAV === */
nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 240, 230, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}
nav .wrap { display: flex; align-items: center; gap: var(--sp-md); padding-block: var(--sp-md); }
.logo-mark {
  width: 28px; height: 28px;
  background: var(--forest);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.logo-mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px solid var(--mustard);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
}
nav .brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; }
nav .spacer { margin-inline-start: auto; }
nav .tel { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
nav .tel:hover { color: var(--forest); }

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 16px; font-weight: 500;
  padding: 16px 28px;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-primary { background: var(--forest-deep); color: var(--cream); box-shadow: var(--sh-cta); }
.btn-primary:hover { background: var(--forest); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,48,36,0.3); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { background: var(--paper); }
.btn-mustard { background: var(--mustard); color: var(--forest-deep); }
.btn-mustard:hover { background: var(--mustard-soft); transform: translateY(-2px); }
.btn-nav { padding: 10px 22px; font-size: 15px; }

/* === SECTION TAG === */
.section-tag {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--forest);
  text-transform: uppercase;
}
.section-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mustard);
}

/* === HERO === */
.hero { padding-block: var(--sp-4xl) var(--sp-3xl); }
.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: var(--sp-md) 0 var(--sp-lg);
  max-width: 16ch;
}
.hero p { font-size: 19px; line-height: 1.55; color: var(--ink-soft); max-width: 54ch; margin: 0 0 var(--sp-xl); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--sp-md); }

/* === FEATURES === */
.features { padding-block: var(--sp-3xl); }
.features h2 { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1; letter-spacing: -0.02em; margin: var(--sp-md) 0 var(--sp-2xl); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-lg); }
.feature {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-xl);
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.feature .num {
  position: absolute; top: 18px; left: 22px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 64px; line-height: 1;
  color: var(--border);
  pointer-events: none; user-select: none;
}
.feature h3 { font-size: 22px; line-height: 1.25; color: var(--forest-deep); padding-left: 72px; min-height: 30px; }
.feature p { color: var(--ink-soft); margin: var(--sp-sm) 0 0; }

/* === QUOTE === */
.quote { padding-block: var(--sp-2xl); }
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.35;
  color: var(--forest-deep);
  border-inline-start: 3px solid var(--mustard);
  padding-inline-start: var(--sp-xl);
  max-width: 24ch;
}
.quote .author { font-family: var(--font-body); font-size: 15px; color: var(--muted); margin-top: var(--sp-md); }

/* === FAQ === */
.faq { padding-block: var(--sp-3xl); }
.faq h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: var(--sp-md) 0 var(--sp-xl); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  display: flex; align-items: center; gap: var(--sp-md);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  padding: var(--sp-lg) 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus {
  margin-inline-start: auto;
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  background: var(--forest-deep);
  color: var(--cream);
  display: grid; place-content: center;
  font-family: var(--font-body); font-size: 18px; line-height: 1;
  transition: transform var(--t-base);
}
.faq details[open] .plus { transform: rotate(45deg); }
.faq .answer { color: var(--ink-soft); padding-bottom: var(--sp-lg); margin: 0; max-width: 62ch; }

/* === FINAL CTA === */
.final-cta {
  position: relative;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--cream);
  border-radius: var(--r-xl);
  padding: var(--sp-4xl) var(--sp-xl);
  margin: var(--sp-3xl) var(--sp-lg);
  text-align: center;
}
.final-cta::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--mustard) 0%, transparent 60%);
  opacity: 0.2;
  pointer-events: none;
}
.final-cta h2 { color: var(--cream); font-size: clamp(30px, 4vw, 48px); line-height: 1.1; margin-bottom: var(--sp-md); position: relative; }
.final-cta p { color: rgba(245,240,230,0.8); max-width: 46ch; margin: 0 auto var(--sp-xl); position: relative; }
.final-cta .btn { position: relative; }

/* === FOOTER === */
footer { border-top: 1px solid var(--border-soft); padding-block: var(--sp-xl); color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-xl); }
footer a { color: inherit; }

/* === SCROLL REVEAL === */
/* Gated on .js, which the page sets in <head> before this loads. Hiding by
   default in CSS alone would leave the feature cards and the testimonial
   permanently invisible whenever the script is blocked or
   IntersectionObserver is missing, on the page whose entire job is to convert. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.js .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}