:root {
  --bg: #ffffff;
  --panel: #f5f5f7;
  --fg: #1d1d1f;
  --muted: #6e6e73;
  --accent: #0f766e;
  --accent-contrast: #ffffff;
  --border: #d2d2d7;
  --placeholder: #b45309;
  --max-width: 880px;
  --space: clamp(1.5rem, 4vw, 3rem);
  --header-height: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.6em; color: var(--fg); }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.1rem; color: var(--accent); }
p { color: var(--muted); margin: 0 0 1em; }

a { color: var(--accent); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.75em 1.25em;
  z-index: 1000;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--space);
  top: var(--space);
}

/* Visible focus state everywhere, non-negotiable given the audience */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space);
  backdrop-filter: blur(6px);
  background: rgba(255,255,255,0.85);
  border-bottom: 1px solid var(--border);
}
.wordmark-group { display: flex; align-items: center; gap: 0.6em; }
.logo-mark { height: 48px; width: auto; display: block; }
.wordmark { font-weight: 700; letter-spacing: 0.02em; }

.lang-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.5em 0.9em;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
}
.lang-toggle:hover { border-color: var(--accent); }

/* TEMPORARY: Hebrew hidden from visitors until translations get a native-speaker
   pass. Toggle logic/data untouched — just remove this rule to bring it back. */
.lang-toggle { display: none; }

/* Sections */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--space) * 2) var(--space);
}

.lede { font-size: 1.2rem; }

.cta {
  display: inline-block;
  margin-top: 1em;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  text-decoration: none;
  padding: 0.9em 1.6em;
  border-radius: 8px;
  width: fit-content;
}
.cta:hover { filter: brightness(1.15); }

/* Scene: pinned photo, text scrolling over it — Apple product-page pattern.
   The section is much taller than the viewport (--scene-height); the photo
   pins via position:sticky for the scroll distance in between, while the
   text (positioned in normal document flow, NOT sticky) scrolls up through
   that pinned photo and away, exactly like any other page content. Once the
   section's extra height runs out, the sticky photo releases and the next
   scene's photo takes over. No JS needed — pure CSS. */
.scene {
  --scene-height: 210vh;
  position: relative;
  height: var(--scene-height);
}
.scene-sticky {
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}
.scene-sticky img {
  width: min(85vw, 880px);
  height: auto;
  display: block;
}
/* .scene-text sits in normal document flow, right after .scene-sticky's
   100vh of flow space — no extra top offset needed. Since .scene-sticky is
   pinned while .scene-text keeps scrolling normally, the text starts below
   the fold, scrolls up through the pinned photo, and continues past it —
   the "text moves, photo stays" effect, achieved with plain document flow. */
.scene-text {
  position: relative;
  z-index: 1;
  max-width: 620px;
  margin: 0 auto;
  padding: 1.8em 2.2em;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}
.scene-text h1, .scene-text .lede { max-width: 100%; }

/* Hero's text block matches the width of the section right after it
   (.process, which uses the standard .section max-width) instead of the
   narrower width shared by the other scene panels. */
#hero .scene-text { max-width: var(--max-width); }

@media (max-width: 640px) {
  .scene { --scene-height: 170vh; }
  .scene-text { max-width: 88vw; }
  .scene-sticky {
    align-items: flex-start;
    padding-top: 8vh;
  }
  .scene-sticky img { width: min(94vw, 880px); }
}

/* Process ("How it works") — a few words + a photo per stage */
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2em;
  margin-top: 1.5em;
}
.process-photo-placeholder {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 0.8em;
  color: var(--placeholder);
  font-style: italic;
  border: 1px dashed var(--placeholder);
  border-radius: 6px;
  background: rgba(180,83,9,0.06);
  padding: 0.8em;
}
.process-step h3 { margin-bottom: 0.3em; }
.process-step p { margin: 0; color: var(--fg); }

/* Spec list */
.spec-list {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.spec-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1em;
  padding: 0.9em 0;
  border-bottom: 1px solid var(--border);
}
.spec-key { color: var(--accent); font-weight: 600; }
.spec-list li span:last-child { color: var(--fg); }

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2em;
  margin-top: 1.5em;
}
.photo-grid img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  display: block;
}

/* Testimonials */
#testimonials blockquote {
  margin: 1.5em 0 0;
  padding: 1.4em 1.6em;
  background: var(--panel);
  border-inline-start: 4px solid var(--accent);
  border-radius: 8px;
  font-size: 1.15rem;
  color: var(--fg);
}

.placeholder-copy {
  color: var(--placeholder);
  font-style: italic;
  border: 1px dashed var(--placeholder);
  padding: 0.8em 1em;
  border-radius: 6px;
  background: rgba(180,83,9,0.06);
}

/* Contact */
#contact .cta { font-size: 1.1rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 2em var(--space) 3em;
  text-align: center;
}
.site-footer p { margin: 0; }

/* RTL adjustments */
html[dir="rtl"] .spec-list li {
  grid-template-columns: 140px 1fr;
}