/* The landing narrative: hero, how it works, the image moment, the preview section, benefits and the final call to action.
   The preview component, the scroll-reveal engine (.motion-ready, [data-reveal]) and the micro-interactions are Core: they live in components.css.
   The hero entrance runs only inside a prefers-reduced-motion: no-preference media query, so nothing depends on animation to be readable. */

/* ---- page chrome and hero, moved from layout.css ---- */
/* ---- header ---- */
.site-header { position: relative; z-index: 2; background: var(--deep-forest); color: var(--on-dark); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }

/* ---- hero ---- */
.hero { position: relative; overflow: hidden; background: var(--deep-forest); color: var(--on-dark); padding-block: var(--space-5) var(--space-7); }
.hero::before {                                  /* a faint structural grid: architectural lines, nothing animated */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to left, color-mix(in srgb, var(--ivory) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ivory) 5%, transparent) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-6); align-items: center; }
.hero__copy { max-width: 36rem; }
.hero__art { margin: 0; }
.hero__art svg { display: block; width: 100%; height: auto; }

.start__head { max-width: 40rem; margin-block-end: var(--space-5); }

.site-footer { background: var(--deep-forest); color: var(--on-dark-soft); padding-block: var(--space-4); font-size: var(--fs-sm); }
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer a { color: var(--ivory); }

/* ---- brand, hero parts and footer, moved from components.css ---- */
.brand { font-weight: 800; font-size: var(--fs-lg); letter-spacing: -0.01em; color: var(--ivory); }
.site-header__phone { font-weight: 600; text-decoration: none; direction: ltr; unicode-bidi: isolate; color: var(--ivory); padding: var(--space-2) 0; }
.site-header__phone:hover { text-decoration: underline; }

/* ---- hero parts ---- */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-block: var(--space-4) var(--space-3); }
.hero__reassure { font-size: var(--fs-sm); color: var(--on-dark-soft); margin: 0; }

.process { list-style: none; margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line-dark); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); counter-reset: step; }
.process li { counter-increment: step; font-size: var(--fs-sm); color: var(--on-dark-soft); line-height: 1.5; }
.process li::before { content: "0" counter(step); display: block; margin-block-end: var(--space-1); font-weight: 700; font-size: var(--fs-lg); color: var(--turquoise); font-variant-numeric: tabular-nums; }
.process strong { display: block; color: var(--ivory); font-weight: 600; }

.trust { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.trust li { position: relative; padding-inline-start: 1.75rem; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.trust li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--turquoise); font-weight: 700; }

.site-footer a { color: inherit; }
.site-footer__product { direction: ltr; letter-spacing: 0.06em; font-size: 0.75rem; opacity: 0.8; }

/* ---- hero ---- */
.hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
.hero__copy { align-self: center; max-width: 34rem; }
.hero__media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 6; background: var(--forest); box-shadow: var(--shadow-dark); }
.hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__marks { position: absolute; inset: var(--space-3); width: calc(100% - 2 * var(--space-3)); height: calc(100% - 2 * var(--space-3)); color: color-mix(in srgb, var(--ivory) 70%, transparent); pointer-events: none; }
.media-tag { position: absolute; inset-inline-start: var(--space-4); bottom: var(--space-4); padding: 0.2rem 0.75rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--ivory); background: color-mix(in srgb, var(--deep-forest) 72%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > *, .hero__media { animation: rise 0.85s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 80ms); }
  .hero__media img { animation: settle 1.8s var(--ease) both; animation-delay: 160ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
  @keyframes settle { from { transform: scale(1.1); } }
}

/* ---- demo labelling: placeholder advisor details are always marked as such (hidden when advisorConfig.isDemo is false) ---- */
.site-header__id { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.site-header .brand { white-space: nowrap; }
.demo-tag { padding: 0.1rem 0.6rem; border: 1px solid var(--turq-light); border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--turq-light); white-space: nowrap; }
.site-header__phone { display: flex; flex-direction: column; align-items: flex-end; direction: rtl; line-height: 1.25; padding-block: 0; }
.site-header__phone [dir="ltr"] { unicode-bidi: isolate; }
.demo-note { font-size: var(--fs-xs); font-weight: 500; color: var(--on-dark-soft); }
.site-footer .demo-note { color: inherit; opacity: 0.9; }

/* ---- how it works ---- */
.how { background: var(--ivory); padding-block: var(--space-7) var(--space-6); }
.how__head { max-width: 38rem; margin-block-end: var(--space-5); }
.how__head h2, .preview-section h2, .benefits h2, .final h2 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; max-width: 20ch; }
.how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--space-3); align-items: start; }
.how__step { position: relative; padding: var(--space-5) var(--space-4) var(--space-4); border-radius: var(--radius-lg); overflow: hidden; min-height: 17rem; }
.how__step h3 { font-size: var(--fs-lg); font-weight: 700; margin-block: var(--space-3) var(--space-2); max-width: 16ch; }
.how__step p { margin: 0; font-size: var(--fs-base); max-width: 24ch; }
.how__num { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-4); font-size: 3.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; opacity: 0.18; }
.how__icon { display: block; width: 3.5rem; height: 3.5rem; }
.how__step--one { background: var(--ivory-soft); border: 1px solid var(--line); box-shadow: var(--shadow); }
.how__step--one .how__icon { color: var(--forest); }
.how__step--two { margin-block-start: var(--space-5); background: var(--forest); color: var(--on-dark); }
.how__step--two p { color: var(--on-dark-soft); }
.how__step--two .how__icon { color: var(--turq-light); }
.how__step--three { margin-block-start: var(--space-6); background: var(--note-bg); border: 1px solid var(--stone); }
.how__step--three .how__icon { color: var(--teal-text); }

/* ---- the image moment ---- */
.moment { background: var(--ivory); }
.moment__frame { position: relative; height: clamp(18rem, 62vh, 40rem); overflow: hidden; background: var(--deep-forest); }
.moment__img { position: absolute; inset-inline: 0; top: -9%; display: block; width: 100%; height: 118%; object-fit: cover; object-position: 50% 50%; translate: 0 var(--shift, 0%); will-change: translate; }
.moment__lines { position: absolute; inset-inline: var(--space-4); bottom: var(--space-4); width: calc(100% - 2 * var(--space-4)); height: 1.75rem; color: color-mix(in srgb, var(--ivory) 75%, transparent); pointer-events: none; }

/* ---- the preview section (the preview component itself is in components.css) ---- */
.preview-section { padding-block: var(--space-7); position: relative; overflow: hidden; }
.preview-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to left, color-mix(in srgb, var(--ivory) 4%, transparent) 1px, transparent 1px); background-size: 5.5rem 100%; }
.preview-section__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-6); align-items: center; }

/* ---- benefits ---- */
.benefits { background: var(--ivory); padding-block: var(--space-7); }
.benefits__inner { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-6); align-items: center; }
.benefits__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.benefits__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.benefits__list { list-style: none; margin: var(--space-4) 0 0; padding: 0; counter-reset: benefit; }
.benefits__list li { position: relative; padding: var(--space-4) 0; padding-inline-start: 3.5rem; border-top: 1px solid var(--line); counter-increment: benefit; }
.benefits__list li:last-child { border-bottom: 1px solid var(--line); }
.benefits__list li::before { content: counter(benefit, decimal-leading-zero); position: absolute; inset-inline-start: 0; top: var(--space-4); font-weight: 700; color: var(--teal-text); font-variant-numeric: tabular-nums; }
.benefits__list h3 { font-size: var(--fs-lg); margin-block-end: var(--space-1); }
.benefits__list p { margin: 0; color: var(--ink-soft); max-width: 34rem; }

/* ---- final call to action ---- */
.final { padding-block: var(--space-7); overflow: hidden; }
.final__inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr); gap: var(--space-6); align-items: center; }
.final__copy .lead { margin-block-end: var(--space-4); }
.final__media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--shadow-dark); }
.final__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.site-footer__credits { font-size: var(--fs-xs); opacity: 0.85; }

/* ---- reveals specific to this page (the moment frame and its lines) and the media backgrounds; the engine is in components.css ---- */
.motion-ready .moment__frame[data-reveal="image"] .moment__img { scale: 1.06; }
.motion-ready .moment__frame[data-reveal="image"].is-in .moment__img { scale: 1; transition: clip-path 1.15s var(--ease), scale 1.8s var(--ease); }
.motion-ready .moment__lines path { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.motion-ready .is-in .moment__lines path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) 0.4s; }
.benefits__media, .final__media { background: var(--note-bg); }
.final__media { background: var(--forest); }

/* ---- responsive rules of the sections above (moved from responsive.css: same breakpoints, same order) ---- */
@media (max-width: 62rem) {
  .hero { padding-block: var(--space-4) var(--space-6); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero__art { max-width: 32rem; }
  .hero__media { aspect-ratio: 4 / 3; }
  .how__steps { grid-template-columns: 1fr; }
  .how__step { min-height: 0; }
  .how__step--two, .how__step--three { margin-block-start: 0; }
  .preview-section__inner, .benefits__inner, .final__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .benefits__media { aspect-ratio: 4 / 3; }
  .final__media { aspect-ratio: 4 / 3; max-width: 32rem; }
  .how, .preview-section, .benefits, .final { padding-block: var(--space-6); }
}

@media (max-width: 40rem) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .moment__frame { height: 20rem; }
  .site-header .brand { font-size: var(--fs-base); }
  .site-header__inner { gap: var(--space-2); }
  .demo-tag { padding-inline: 0.45rem; }
  .moment__lines { inset-inline: var(--space-3); width: calc(100% - 2 * var(--space-3)); }
  .process { grid-template-columns: 1fr; gap: var(--space-3); }
  .process li { position: relative; padding-inline-start: 3rem; }
  .process li::before { position: absolute; inset-inline-start: 0; top: 0; margin: 0; }
}

/* ---- privacy / demo-notice page (client/privacy.html) ---- */
.site-header__back { color: var(--ivory); font-weight: 600; text-decoration: none; padding: var(--space-2) 0; white-space: nowrap; }
.site-header__back:hover { text-decoration: underline; }
.doc { max-width: 46rem; padding-block: var(--space-5) var(--space-6); }
.doc h1 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.doc h2 { font-size: var(--fs-lg); margin: var(--space-5) 0 var(--space-2); }
.doc p, .doc li { line-height: 1.75; color: var(--ink-soft); }
.doc .banner { color: var(--ink); line-height: 1.7; }
.doc__lead { font-size: var(--fs-lg); color: var(--ink); }
.doc__list { margin: 0 0 var(--space-3); padding-inline-start: 1.25rem; }
.doc__back { margin-top: var(--space-5); }
.doc__back .btn { text-decoration: none; }