/* Afterglow. The dusk photo is the thesis and the copy sits on the dark half
   of the sky. English retains the original
   Heebo treatment; Hebrew uses a stronger, contemporary type hierarchy. */

:root {
  --display: "Heebo", "Segoe UI", Arial, sans-serif;
  --body: "Heebo", "Segoe UI", Arial, sans-serif;
}

html[data-lang="he"] {
  --display: "Rubik", "Arial Hebrew", Arial, sans-serif;
  --body: "Noto Sans Hebrew", "Arial Hebrew", Arial, sans-serif;
}

html[data-lang="he"] body { font-family: var(--body); }

body { background: var(--plum-950); color: var(--white); }
.site-header, .site-footer { color: var(--white); }

.section-number {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.section-number > span:first-child {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--gold-300);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid;
  min-height: min(100svh, 960px);
  overflow: hidden;
  align-items: center;
}
.hero-image, .hero-veil, .hero-stars { position: absolute; inset: 0; }
.hero-image {
  background-image: url("hero_02.png");
  background-position: 30% center;
  background-size: cover;
  transform: scale(1.02);
  animation: settle 22s ease-out both;
}
@keyframes settle {
  from { transform: scale(1.12) translateY(-1.5%); }
  to { transform: scale(1.02) translateY(0); }
}
.hero-veil {
  background:
    linear-gradient(270deg, rgb(14 9 19 / 92%) 0%, rgb(27 17 38 / 70%) 40%, rgb(27 17 38 / 8%) 72%),
    linear-gradient(0deg, rgb(14 9 19) 0%, rgb(14 9 19 / 92%) 6%, transparent 42%),
    linear-gradient(180deg, rgb(14 9 19 / 55%) 0%, transparent 26%);
}
/* stars fade in over the darkening sky */
.hero-stars {
  background-image:
    radial-gradient(1.2px 1.2px at 78% 12%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 86% 20%, #fff 60%, transparent 62%),
    radial-gradient(1.4px 1.4px at 70% 8%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 92% 34%, #fff 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 64% 18%, #fff 60%, transparent 62%),
    radial-gradient(1px 1px at 82% 42%, #fff 60%, transparent 62%);
  opacity: 0;
  animation: twinkle 6s ease-in-out 2s infinite alternate;
}
@keyframes twinkle { from { opacity: 0.35; } to { opacity: 0.9; } }

.hero-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 640px);
  padding-block: 150px 96px;
}
html[data-lang="he"] .hero-content { grid-template-columns: minmax(0, 640px) 1fr; }
.hero-copy { grid-column: 2; }
html[data-lang="he"] .hero-copy { grid-column: 1; }

.hero h1 {
  margin-bottom: 26px;
  font-size: clamp(50px, 6.8vw, 96px);
  font-weight: 200;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.hero h1 .accent { font-weight: 500; color: var(--gold-300); }
html[data-lang="he"] .hero h1 { font-size: clamp(46px, 6.2vw, 88px); line-height: 1.06; }
/* line-by-line rise on load; visible at rest without JS */
.js .hero h1 .l { display: inline-block; animation: rise 900ms var(--ease-out) both; }
.js .hero h1 .l:nth-child(2) { animation-delay: 120ms; }
.js .hero h1 .l:nth-child(3) { animation-delay: 240ms; }
.js .hero h1 .l:nth-child(4) { animation-delay: 380ms; }
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }

.hero-copy > p {
  max-width: 560px;
  margin-bottom: 32px;
  color: rgb(255 255 255 / 78%);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 300;
}
.js .hero-copy > p, .js .hero-copy .button-row { animation: rise 900ms var(--ease-out) both; }
.js .hero-copy > p { animation-delay: 520ms; }
.js .hero-copy .button-row { animation-delay: 680ms; }
.button-row { gap: 12px; }
.btn-primary { background: var(--gold-300); color: var(--plum-950); box-shadow: 0 14px 36px rgb(14 9 19 / 30%); }
.btn-primary:hover { background: var(--gold-100); }
.btn-quiet {
  border-color: rgb(255 255 255 / 28%);
  background: rgb(255 255 255 / 6%);
  color: var(--white);
  backdrop-filter: blur(12px);
}

/* ---------- listen: a glass conversation excerpt ---------- */
.listen {
  padding: 104px 0;
  background:
    radial-gradient(60% 50% at 50% 100%, rgb(196 117 106 / 22%), transparent 70%),
    linear-gradient(180deg, var(--plum-950), var(--plum-900));
}
.listen-shell { max-width: 620px; margin-inline: auto; }
.chat-panel {
  position: relative;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgb(255 201 110 / 18%);
  border-radius: 26px;
  background: rgb(8 5 12 / 72%);
  box-shadow: 0 34px 90px rgb(0 0 0 / 38%);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}
.chat-panel::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgb(255 255 255 / 7%), transparent 42%, rgb(255 201 110 / 5%));
  content: "";
  pointer-events: none;
}
/* The head reads like a chat screen: who you are talking to, then the thread. */
.chat-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.chat-identity { display: flex; align-items: center; gap: 12px; }
.chat-identity .chat-avatar { width: 38px; height: 38px; border-radius: 12px; flex-basis: 38px; font-size: 19px; }
.chat-head h2 { font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.chat-status { margin-top: 2px; color: var(--gold-300); font-size: 12px; font-weight: 500; line-height: 1.3; }
.chat-controls { display: flex; align-items: center; gap: 12px; }
.chat-listening { display: flex; gap: 5px; }
.chat-listening i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold-300); animation: blink 1.4s infinite; }
.chat-listening i:nth-child(2) { animation-delay: 0.2s; }
.chat-listening i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.chat-motion-toggle {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  background: rgb(255 255 255 / 7%);
  color: var(--gold-100);
  cursor: pointer;
  font-size: 12px;
  place-items: center;
}
.chat-motion-toggle[hidden] { display: none; }
.chat-motion-toggle:hover { background: rgb(255 255 255 / 12%); }
.chat-motion-toggle:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }
.chat-panel.is-paused .chat-listening i { animation-play-state: paused; opacity: 0.35; }
.chat-viewport {
  position: relative;
  height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  transition: mask-image 400ms ease;
}
.chat-viewport::-webkit-scrollbar { display: none; }
.chat-viewport.has-history {
  mask-image: linear-gradient(to bottom, transparent 0, #000 19%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 19%, #000 100%);
}
.chat-viewport.is-instant { scroll-behavior: auto; }
.chat-thread { position: relative; display: flex; min-height: 100%; flex-direction: column; gap: 12px; }
.chat-message {
  display: flex;
  width: min(88%, 390px);
  align-items: flex-end;
  gap: 9px;
  padding: 13px 15px;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: 18px;
  border-end-start-radius: 5px;
  background: rgb(255 255 255 / 8%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  color: rgb(255 255 255 / 88%);
  font-size: 15px;
  line-height: 1.45;
}
.chat-speaker, .chat-copy-source {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  margin: -1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.chat-letter { opacity: 0; }
.chat-letter.is-typed { opacity: 1; }
.js .chat-panel.chat-is-animated .chat-message:not(.is-shown) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.js .chat-panel.chat-is-animated .chat-message.is-shown {
  animation: chat-message-in 620ms var(--ease-out) both;
}
.chat-message[data-who="zigmi"] {
  margin-inline-end: auto;
  border-color: rgb(255 201 110 / 16%);
  background: rgb(74 45 107 / 34%);
}
.chat-message[data-who="you"] {
  margin-inline-start: auto;
  border-end-start-radius: 18px;
  border-end-end-radius: 5px;
  background: rgb(255 255 255 / 11%);
  color: var(--gold-100);
}
.chat-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  flex: 0 0 24px;
  background: var(--gold-300);
  color: var(--plum-950);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 800;
  place-items: center;
}
@keyframes chat-message-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .chat-listening { display: none; }
  .chat-viewport { scroll-behavior: auto; }
}

/* Below the float breakpoint the conversation is in flow and still part of the
   hero: the stage ends just after the buttons and the card follows at an
   ordinary element gap. */
@media (width < 1120px) {
  .hero { min-height: 0; }
  .hero-content { padding-bottom: 40px; }
  .listen { padding-top: 0; }
}
@media (min-width: 1120px) {
  .hero-stage { position: relative; }
  .listen {
    position: absolute;
    z-index: 8;
    top: 52%;
    left: max(24px, calc((100vw - 1180px) / 2));
    width: min(440px, calc(100vw - 700px));
    padding: 0;
    background: none;
    transform: translateY(-45%);
  }
  .listen-shell { width: 100%; max-width: none; }
}

/* ---------- how ---------- */
.how { padding: 140px 0; background: var(--white); color: var(--ink); }
.how .section-number, .how .section-number > span:first-child { color: var(--plum); }
.how-intro { max-width: 900px; margin-bottom: 64px; }
.how-intro h2 { font-size: clamp(38px, 5.4vw, 68px); font-weight: 200; line-height: 1.02; letter-spacing: -0.035em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.step { position: relative; padding: 36px 28px 0; border-inline-end: 1px solid var(--line); }
.step:last-child { border-inline-end: 0; }
.step-index {
  display: block;
  margin-bottom: 96px;
  font-family: var(--display);
  font-size: 96px;
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--lavender);
  transition: color 300ms ease, transform 600ms var(--ease-out);
}
.step:hover .step-index { color: var(--gold); transform: translateY(-6px); }
.step h3 { margin-bottom: 12px; font-size: 24px; font-weight: 500; }
.step p { color: var(--ink-soft); }

/* ---------- difference ---------- */
.difference { padding: 150px 0; background: var(--plum-900); }
.difference-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.75fr); align-items: center; gap: 96px; }
.difference-copy h2 { margin-bottom: 26px; font-size: clamp(44px, 5.8vw, 76px); font-weight: 200; line-height: 1; letter-spacing: -0.035em; }
.difference-copy p { max-width: 540px; color: rgb(255 255 255 / 70%); font-size: 18px; font-weight: 300; }
.reason-card {
  position: relative;
  padding: 40px;
  border: 1px solid rgb(255 201 110 / 22%);
  border-radius: 28px;
  background: linear-gradient(150deg, rgb(255 201 110 / 12%), rgb(255 255 255 / 3%));
  box-shadow: 0 40px 90px rgb(0 0 0 / 28%);
  backdrop-filter: blur(16px);
}
.reason-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.reason-mark { display: grid; width: 46px; height: 46px; border-radius: 14px; background: var(--gold-300); color: var(--plum-900); place-items: center; }
.reason-mark .zigmi-mark { width: 22px; height: 22px; }
.reason-card figcaption { color: var(--gold-300); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.reason-card blockquote { font-family: var(--display); font-size: 24px; font-weight: 300; line-height: 1.4; }
/* ---------- simulation ---------- */
.simulation { padding: 120px 0; background: var(--cream); color: var(--ink); }
.simulation-grid { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 80px; }
.simulation .section-number, .simulation .section-number > span:first-child { color: var(--plum); }
.simulation h2 { font-size: clamp(38px, 5.2vw, 66px); font-weight: 200; line-height: 1.08; letter-spacing: -0.035em; }
.simulation-copy { display: grid; gap: 20px; color: var(--ink-soft); font-size: 18px; }

/* ---------- trust ---------- */
.trust { padding: 48px 0; background: var(--cream); color: var(--ink); border-top: 1px solid var(--line); }
.trust-shell { display: grid; grid-template-columns: 1fr 2fr; align-items: start; gap: 40px; }
.trust h2 { font-size: 24px; font-weight: 600; }
.trust p { color: var(--ink-soft); }
.trust-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 16px; color: var(--plum); font-size: 14px; }
.trust-links a { text-underline-offset: 4px; }
.trust-links a:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }

.site-footer { background: var(--plum-950); border-top: 1px solid rgb(255 255 255 / 8%); }

/* ---------- Hebrew typography ---------- */
html[data-lang="he"] .hero h1 {
  font-size: clamp(44px, 5.4vw, 76px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.025em;
}
html[data-lang="he"] .hero h1 .accent { font-weight: 900; }
html[data-lang="he"] .hero-copy > p {
  font-size: clamp(17px, 1.45vw, 19px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.012em;
}
html[data-lang="he"] .chat-head h2 { font-weight: 700; letter-spacing: 0; }
html[data-lang="he"] .chat-message { font-weight: 400; }
html[data-lang="he"] .how-intro h2,
html[data-lang="he"] .difference-copy h2,
html[data-lang="he"] .simulation h2 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
html[data-lang="he"] .difference-copy p { font-weight: 400; }
html[data-lang="he"] .reason-card blockquote {
  font-family: var(--body);
  font-weight: 500;
  line-height: 1.55;
}
html[data-lang="he"] .step h3 { font-weight: 700; }
html[data-lang="he"] .section-number > span:first-child,
html[data-lang="he"] .step-index { font-weight: 300; }

/* On phones the stage becomes a scroll: the photo is its own band at the top
   and the copy sits below it on solid plum, so the couple stays visible and the
   text never has to fight the image. */
@media (max-width: 900px) {
  /* vh is the safe default; svh (stable viewport, ignores the URL bar) upgrades it
     where supported. An unsupported unit inside a custom property would otherwise
     void the height entirely and hide the photo. */
  .hero { --hero-band: min(46vh, 420px); }
  @supports (height: 1svh) { .hero { --hero-band: min(46svh, 420px); } }
  @media (orientation: landscape) { .hero { --hero-band: min(72vh, 420px); } }
  @supports (height: 1svh) { @media (orientation: landscape) { .hero { --hero-band: min(72svh, 420px); } } }
  .hero-image, .hero-veil, .hero-stars { inset: 0 0 auto; height: var(--hero-band); }
  /* The scaled settle animation would poke out below the band; keep the image still. */
  .hero-image { background-position: 58% 38%; transform: none; animation: none; }
  .hero-veil {
    background:
      linear-gradient(0deg, var(--plum-950) 0%, rgb(14 9 19 / 78%) 18%, rgb(14 9 19 / 12%) 48%, transparent 70%),
      linear-gradient(180deg, rgb(14 9 19 / 62%) 0%, transparent 34%);
  }
  .hero-content, html[data-lang="he"] .hero-content {
    grid-template-columns: 1fr;
    padding-top: calc(var(--hero-band) - 36px);
  }
  .hero-copy, html[data-lang="he"] .hero-copy { grid-column: 1; }
  .hero h1, html[data-lang="he"] .hero h1 { margin-bottom: 18px; }
  .hero-copy > p, html[data-lang="he"] .hero-copy > p { margin-bottom: 24px; }
  .difference-grid, .simulation-grid { grid-template-columns: 1fr; gap: 28px; }
  .difference-grid { gap: 40px; }
  .chat-panel { padding: 26px; }
  .chat-viewport { height: 300px; }
}
@media (max-width: 680px) {
  .how, .difference, .simulation { padding: 64px 0; }
  .listen { padding-bottom: 64px; }
  /* Headings carry desktop line breaks; let the phone wrap on its own. */
  h2 br { display: none; }
  .section-number { gap: 10px; margin-bottom: 16px; }
  .section-number > span:first-child { font-size: 32px; }
  .how-intro { margin-bottom: 36px; }
  .steps, .trust-shell { grid-template-columns: 1fr; }
  /* Step numerals sit beside the title instead of towering above it. */
  .step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: baseline;
    padding: 22px 0 26px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--line);
  }
  .step-index { grid-row: 1 / span 2; margin-bottom: 0; font-size: 40px; }
  .step:hover .step-index { transform: none; }
  .step h3 { margin-bottom: 6px; font-size: 22px; }
  .reason-card { padding: 24px; }
  .reason-head { margin-bottom: 18px; }
  .reason-mark { width: 38px; height: 38px; border-radius: 11px; }
  .reason-card blockquote, html[data-lang="he"] .reason-card blockquote { font-size: 19px; }
  .difference-copy h2, .simulation h2, .how-intro h2 { font-size: clamp(34px, 9vw, 40px); }
  html:not([data-lang="he"]) .hero h1 { font-size: clamp(40px, 11vw, 50px); }
  .difference-copy p, .simulation-copy { font-size: 17px; }
  .trust { padding: 40px 0; }
}
@media (max-width: 520px) {
  /* Both labels fit beside each other at phone width; keep a single row. */
  .hero .button-row { align-items: center; flex-direction: row; }
  .hero .btn { width: auto; flex: 1 1 0; min-width: 0; padding-inline: 14px; font-size: 15px; }
}