/* ============================================================
 * RONAR landing — black / gold, cinematic intro + parallax page.
 * ============================================================ */

:root {
  --black: #08090C;
  --black-deep: #050609;
  --surface: #15171C;
  --surface-elev: #1C1F26;
  --cream: #F5F1E8;
  --gold: #C8A96E;
  --gold-bright: #E5C07B;
  --gold-dim: #8A754C;
  --indigo: #6366F1;
  --white: #F5F5F7;
  --white-faded: rgba(245,245,247,0.72);
  --white-subtle: rgba(245,245,247,0.5);
  --white-fainter: rgba(245,245,247,0.25);
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --income: #10B981;
  --expense: #EF4444;
  --intro-total: 7200ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--white);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Page is hidden during intro so the user's first impression is just
 * the animation — no flash of unstyled or pre-revealed content. */
body.loading { overflow: hidden; }
body.loading .nav,
body.loading .hero,
body.loading .section,
body.loading .footer { opacity: 0; pointer-events: none; }
body.intro-done .nav,
body.intro-done .hero,
body.intro-done .section,
body.intro-done .footer {
  opacity: 1;
  transition: opacity 900ms cubic-bezier(0.22,1,0.36,1);
}

img {
  max-width: 100%;
  display: block;
  object-fit: contain;
}

a { color: var(--gold); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--gold-bright); }

.wrap { max-width: 1180px; padding: 0 28px; margin: 0 auto; }

/* ============================================================
 * INTRO OVERLAY
 * ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  background: var(--black-deep);
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
}
body.intro-done .intro {
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms cubic-bezier(0.22,1,0.36,1),
              visibility 0s linear 800ms;
}

.intro__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 45%,
      rgba(200,169,110,0.16) 0%,
      rgba(200,169,110,0.04) 30%,
      transparent 60%);
  opacity: 0;
  animation: glow-in 800ms cubic-bezier(0.22,1,0.36,1) 100ms forwards,
             glow-breathe 3.5s ease-in-out 900ms infinite;
}
@keyframes glow-in {
  to { opacity: 1; }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

.intro__svg {
  position: relative;
  width: min(380px, 56vw);
  height: min(380px, 56vw);
  z-index: 2;
  display: block;
}

/* Each path animates via the CSS keyframe @keyframes intro-draw
 * below. The JS computes path length per-element and sets the
 * --len custom property + a per-path animation-delay; this CSS
 * handles the rest. Switched from JS-driven transitions because
 * Safari was applying the final state instantly. */
.intro__svg path {
  fill: transparent;
  stroke: var(--cream);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Initial state — invisible (dashoffset = full length) */
  stroke-dasharray: var(--len, 1);
  stroke-dashoffset: var(--len, 1);
  filter: drop-shadow(0 0 4px rgba(245,241,232,0.18));
  /* Smoother pacing — even draw across the full duration instead of
     the prior ease-out which felt "late then rushed". Linear-ish
     bezier for the stroke + slight ease at the end. */
  animation: intro-draw 2400ms cubic-bezier(0.5, 0.05, 0.4, 0.95) var(--delay, 0ms) forwards;
}
@keyframes intro-draw {
  0%   { stroke-dashoffset: var(--len, 1); fill: transparent; stroke-opacity: 1; }
  70%  { stroke-dashoffset: 0;             fill: transparent; stroke-opacity: 1; }
  92%  { fill: rgba(229, 192, 123, 1);     stroke-opacity: 0; }
  100% { stroke-dashoffset: 0;             fill: rgba(229, 192, 123, 1); stroke-opacity: 0; }
}

.intro__wordmark {
  position: absolute;
  bottom: calc(50% - min(380px, 56vw) / 2 - 80px);
  left: 50%;
  transform: translate(-50%, 100%);
  display: flex;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
}
.intro__wordmark span {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 44px);
  letter-spacing: 18px;
  color: var(--cream);
  opacity: 0;
  transform: translateY(14px);
  animation: letter-in 700ms cubic-bezier(0.22,1,0.36,1) forwards;
}
.intro__wordmark span:nth-child(1) { animation-delay: 4200ms; }
.intro__wordmark span:nth-child(2) { animation-delay: 4350ms; }
.intro__wordmark span:nth-child(3) { animation-delay: 4500ms; }
.intro__wordmark span:nth-child(4) { animation-delay: 4650ms; }
.intro__wordmark span:nth-child(5) { animation-delay: 4800ms; }
@keyframes letter-in {
  to { opacity: 1; transform: translateY(0); }
}

.intro__tagline {
  position: absolute;
  bottom: calc(50% - min(380px, 56vw) / 2 - 150px);
  left: 50%;
  transform: translate(-50%, 100%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 1.8vw, 18px);
  color: var(--gold);
  letter-spacing: 4px;
  opacity: 0;
  animation: tagline-in 1000ms cubic-bezier(0.22,1,0.36,1) 5100ms forwards;
  z-index: 3;
  white-space: nowrap;
}
@keyframes tagline-in {
  to { opacity: 1; }
}

/* ============================================================
 * NAV — Patek-style 3-zone bar:
 *   [ HAMBURGER + MENU ]      [  LOGO  ]      [ REQUEST ACCESS ]
 * The 3-column grid keeps the crest perfectly centred no matter
 * how wide the left/right items get.
 * ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  /* Subtle gradient appears once scrolled past the hero. */
  transition: background .35s ease, backdrop-filter .35s ease;
}
.nav.scrolled {
  background: rgba(8,9,12,0.78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nav__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 40px;
  min-height: 128px;
}
.nav.scrolled .nav__row { min-height: 88px; padding: 18px 40px; }

/* ----- LEFT: hamburger ----- */
.nav__menu {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  color: var(--cream);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  cursor: pointer;
  padding: 8px 4px;
  justify-self: start;
}
/* SVG hamburger — vector so it can't ever fail to render. */
.nav__menu-icon {
  width: 28px;
  height: 18px;
  display: block;
  overflow: visible;
}
.nav__menu-line {
  stroke: var(--cream);
  stroke-width: 1.6;
  stroke-linecap: round;
  transform-origin: center;
  transition: transform .4s cubic-bezier(0.22,1,0.36,1),
              opacity .25s ease;
}
body.menu-open .nav__menu-line--top    { transform: translate(0, 6px)  rotate(45deg);  }
body.menu-open .nav__menu-line--mid    { opacity: 0; }
body.menu-open .nav__menu-line--bottom { transform: translate(0, -6px) rotate(-45deg); }
/* Label flips MENU → CLOSE without DOM changes */
.nav__menu-label { position: relative; }
.nav__menu-label::after {
  content: 'CLOSE';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
  letter-spacing: 3px;
}
body.menu-open .nav__menu-label { color: transparent; }
body.menu-open .nav__menu-label::after {
  opacity: 1;
  color: var(--cream);
}

/* ----- CENTER: crest + wordmark, Patek-style ----- */
.nav__crest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  justify-self: center;
  text-decoration: none;
  padding: 4px 16px;
  /* Lift the crest slightly above the row so the larger size
   * doesn't make the nav feel cramped. */
  margin-top: -4px;
}
.nav__crest-img {
  width: 124px;
  height: 124px;
  opacity: 1;
  object-fit: contain;
  transition: width .4s cubic-bezier(0.22,1,0.36,1),
              height .4s cubic-bezier(0.22,1,0.36,1),
              opacity .25s ease;
  filter: drop-shadow(0 4px 22px rgba(0,0,0,0.6));
}
.nav__crest-mark {
  color: var(--cream);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 7px;
  margin-left: 7px;
  transition: font-size .4s ease, letter-spacing .4s ease,
              opacity .25s ease;
}
.nav.scrolled .nav__crest-img {
  width: 76px;
  height: 76px;
}
.nav.scrolled .nav__crest-mark {
  font-size: 10px;
  letter-spacing: 5px;
}

/* ----- RIGHT: single CTA ----- */
.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
}

@media (max-width: 720px) {
  .nav__row { padding: 14px 18px; min-height: 76px; }
  .nav__menu-label { display: none; }
  .nav__crest-img { width: 78px; height: 78px; }
  .nav__crest-mark { font-size: 9px; letter-spacing: 4px; margin-left: 4px; }
  .nav.scrolled .nav__crest-img { width: 56px; height: 56px; }
  .nav__right .btn {
    padding: 10px 14px;
    font-size: 12px;
  }
}

/* ============================================================
 * SIMPLE NAV — used on /privacy and other utility pages that
 * don't need the full hamburger + menu overlay treatment.
 * Just brand on the left, links on the right, fully responsive.
 * Pairs with the existing `.nav` fixed positioning.
 * ============================================================ */
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cream);
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 13px;
  z-index: 2;
}
.nav__brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  opacity: 0.9;
}
.nav__brand span { color: var(--gold); }
.nav__links {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  justify-self: end;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
}
.nav__links a {
  color: var(--white-faded);
  text-decoration: none;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--white); }
.nav__links .btn {
  /* Override generic link styling for the CTA inside the row. */
  padding: 10px 16px;
}

/* Simple-nav uses a 2-column row (brand left, links right) instead of
 * the 3-column hamburger grid. Privacy + utility pages get this. */
.nav__row--simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 40px;
  min-height: 88px;
}

/* Utility pages need top padding to clear the fixed nav, since they
 * don't have the hero spacer that the landing uses. */
.has-fixed-nav { padding-top: 96px; }

@media (max-width: 720px) {
  .nav__row--simple { padding: 14px 18px; min-height: 68px; }
  .nav__brand img { width: 30px; height: 30px; }
  .nav__brand span { font-size: 11px; letter-spacing: 1.5px; }
  /* Collapse navigation links on small screens — keep only the CTA
   * so brand + button never overlap. */
  .nav__links a:not(.btn) { display: none; }
  .nav__links { gap: 0; }
  .nav__links .btn { padding: 8px 12px; font-size: 11px; }
  .has-fixed-nav { padding-top: 78px; }
}

/* ============================================================
 * MENU OVERLAY — Patek-style full-bleed reveal.
 * ============================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--black-deep);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(0.22,1,0.36,1),
              visibility 0s linear .45s;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.menu-open .menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .45s cubic-bezier(0.22,1,0.36,1),
              visibility 0s linear 0s;
}
.menu-overlay__inner {
  width: 100%;
  max-width: 1180px;
  padding: 0 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding-top: 140px;
  padding-bottom: 60px;
}
.menu-overlay__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-overlay__items li {
  border-bottom: 1px solid rgba(245,241,232,0.08);
  overflow: hidden;
}
.menu-overlay__items a {
  display: block;
  padding: 26px 0;
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--cream);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: transform .45s cubic-bezier(0.22,1,0.36,1),
              color .25s ease;
  /* Initial slide-in for staggered entrance when menu opens. */
  transform: translateY(40px);
  opacity: 0;
}
body.menu-open .menu-overlay__items a {
  opacity: 1;
  transform: translateY(0);
}
body.menu-open .menu-overlay__items li:nth-child(1) a { transition-delay: 80ms; }
body.menu-open .menu-overlay__items li:nth-child(2) a { transition-delay: 160ms; }
body.menu-open .menu-overlay__items li:nth-child(3) a { transition-delay: 240ms; }
body.menu-open .menu-overlay__items li:nth-child(4) a { transition-delay: 320ms; }
body.menu-open .menu-overlay__items li:nth-child(5) a { transition-delay: 400ms; }
.menu-overlay__items a:hover {
  color: var(--gold);
  transform: translateX(12px) !important;
}

.menu-overlay__foot {
  display: flex;
  gap: 28px;
  color: var(--white-subtle);
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0;
  transition: opacity .45s ease .4s;
}
body.menu-open .menu-overlay__foot { opacity: 1; }
.menu-overlay__foot a { color: var(--white-subtle); text-decoration: none; }
.menu-overlay__foot a:hover { color: var(--gold); }

/* Lock scroll while menu open */
body.menu-open { overflow: hidden; }

/* ============================================================
 * BUTTONS
 * ============================================================ */
.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-align: center;
  cursor: pointer;
  transition: transform .35s cubic-bezier(0.22,1,0.36,1),
              background .25s ease, color .25s ease,
              box-shadow .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  will-change: transform;
}
.btn--lg { padding: 16px 28px; font-size: 15px; border-radius: 12px; }
.btn--gold {
  background: var(--gold);
  color: var(--black);
}
.btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 8px 36px -8px rgba(200,169,110,0.6);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.btn--gold:hover { background: var(--gold-bright); }
.btn--gold:hover::after { opacity: 1; }
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--border-strong);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* Minimal text link with an arrow — Apple/Tesla style. */
.btn--minimal {
  background: transparent;
  color: var(--cream);
  border: none;
  padding: 16px 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn--minimal:hover { color: var(--gold); }
.btn--minimal .btn__arrow {
  transition: transform .35s cubic-bezier(0.22,1,0.36,1);
  display: inline-block;
}
.btn--minimal:hover .btn__arrow {
  transform: translateX(6px);
}

/* ============================================================
 * HERO — full-bleed editorial. Typography leads.
 * No big logo blob, no big glow — just a whisper of vignette.
 * ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden;
}
/* The "glow" is now a barely-there vignette — black corners,
 * neutral centre, gold only as the faintest tint. Doesn't fight
 * the wordmark. */
.hero__vignette {
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 1800px;
  height: 1200px;
  background:
    radial-gradient(40% 35% at 50% 50%,
      rgba(200,169,110,0.07) 0%,
      rgba(200,169,110,0.02) 35%,
      transparent 60%);
  pointer-events: none;
  will-change: transform;
}

/* 3D hero layer: sits between vignette and copy; never intercepts input.
 * The canvas fades in only once the phone model is actually live, so a
 * slow connection (or no WebGL) simply keeps today's 2D hero. */
.hero__3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero__3d canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__3d.is-live canvas {
  opacity: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
}

.hero__eyebrow {
  color: var(--white-faded);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 56px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hero__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: 12px;
  box-shadow: 0 0 12px rgba(200,169,110,0.6);
  animation: dot-breathe 2.6s ease-in-out infinite;
}
@keyframes dot-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* The headline does ALL the heavy lifting. Mixed sans + serif italic. */
.hero__title {
  font-size: clamp(64px, 11vw, 156px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -4px;
  margin: 0 0 40px;
  color: var(--cream);
}
.hero__title-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--cream);
  /* Subtle gold under-glow only on the italic word — a single accent
   * moment rather than gold everywhere. */
  text-shadow: 0 8px 40px rgba(200,169,110,0.25);
}

/* Thin gold horizontal rule — a Patek-style divider */
.hero__rule {
  width: 56px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto 32px;
  opacity: 0.7;
}

.hero__sub {
  font-size: clamp(17px, 1.9vw, 20px);
  color: var(--white-faded);
  max-width: 560px;
  margin: 0 auto 56px;
  line-height: 1.55;
  font-weight: 400;
}
.hero__ctas {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 96px;
}

/* Stats now feel like fine print, not big blocky cards. */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 540px;
  margin: 0 auto;
}
.stat {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: opacity .25s ease;
}
.stat:hover { opacity: 1; }
.stat__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -1.5px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  line-height: 1;
}
.stat__label {
  color: var(--white-subtle);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* Scroll cue at the bottom of the hero — desktop only. On phones the
   hero collapses tight enough that this absolutely-positioned element
   crashes into the stats row ("SCROLL" lands on top of "HEALTH
   PLATFORMS"). Mobile users don't need a swipe hint anyway. */
.hero__cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--white-subtle);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  pointer-events: none;
}
.hero__cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  animation: cue-pulse 2.2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1.0); opacity: 1; }
}
@media (max-width: 720px) {
  .hero__cue { display: none; }
}

/* ============================================================
 * SECTIONS
 * ============================================================ */
.section { padding: 140px 0; position: relative; }
@media (max-width: 720px) { .section { padding: 100px 0; } }
.section--alt {
  background: linear-gradient(180deg, var(--black) 0%, #0d0f14 50%, var(--black) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.eyebrow {
  color: var(--white-faded);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.eyebrow.indigo::before { background: var(--indigo); }
.eyebrow.indigo { color: var(--white-faded); }
.h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -2.5px;
  margin: 0 0 88px;
  max-width: 880px;
  color: var(--cream);
}
.h2 .dim {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -1.5px;
}
.lead {
  font-size: 18px;
  color: var(--white-faded);
  max-width: 580px;
  margin: 0 0 18px;
  line-height: 1.55;
}
.tiny { color: var(--white-subtle); font-size: 12px; letter-spacing: 0.5px; }

/* ============================================================
 * GRIDS / CARDS
 * ============================================================ */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 36px 0 0;
  position: relative;
  transition: border-color .3s ease, padding .3s ease;
}
.card:hover { border-top-color: var(--gold); }
.card--small { padding: 30px 0 0; }
/* Roman numeral marker instead of emoji icons — matches the editorial
 * tone of the steps section without competing with the typography. */
.card__num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 2px;
  margin-bottom: 18px;
  opacity: 0.7;
}
.card h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  color: var(--cream);
}
.card p {
  color: var(--white-faded);
  font-size: 15px;
  margin: 0;
  line-height: 1.65;
  max-width: 320px;
}

/* Subtle 3D tilt on hover — driven by JS via CSS custom properties */
.tilt {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .25s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* ============================================================
 * STEPS
 * ============================================================ */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.step {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 36px;
  padding: 44px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  align-items: baseline;
  position: relative;
  transition: padding .35s ease;
}
.step:last-child { border-bottom: none; }
.step:hover { padding-left: 8px; }
.step__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 40px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  letter-spacing: -0.5px;
  line-height: 1;
}
.step h3 {
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 10px;
  letter-spacing: -0.6px;
  color: var(--cream);
}
.step p {
  color: var(--white-faded);
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
  max-width: 560px;
}
@media (max-width: 720px) {
  .step { grid-template-columns: 1fr; gap: 6px; padding: 24px 22px; }
  .step__num { font-size: 24px; }
}

/* ============================================================
 * VOICE SECTION
 * ============================================================ */
.section--voice {
  background: radial-gradient(60% 80% at 30% 30%, rgba(99,102,241,0.14) 0%, transparent 60%), var(--black);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.voice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 880px) { .voice { grid-template-columns: 1fr; gap: 36px; } }
.voice__quote {
  padding: 36px;
  background: linear-gradient(180deg, rgba(99,102,241,0.06) 0%, var(--surface-elev) 100%);
  border: 1px solid rgba(99,102,241,0.4);
  border-radius: 22px;
  box-shadow: 0 24px 70px -24px rgba(99,102,241,0.45);
}
.voice__quote-eyebrow {
  color: var(--indigo);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.voice__quote-text {
  font-size: 21px;
  line-height: 1.45;
  margin-bottom: 22px;
  color: var(--white);
}
.voice__quote-bar { display: flex; gap: 4px; align-items: end; height: 28px; }
.voice__quote-bar span {
  display: block;
  width: 4px;
  background: var(--indigo);
  border-radius: 2px;
  animation: equalize 1.4s ease-in-out infinite;
}
.voice__quote-bar span:nth-child(1)  { height: 30%; animation-delay: 0.00s; }
.voice__quote-bar span:nth-child(2)  { height: 70%; animation-delay: 0.10s; }
.voice__quote-bar span:nth-child(3)  { height: 45%; animation-delay: 0.20s; }
.voice__quote-bar span:nth-child(4)  { height: 90%; animation-delay: 0.30s; }
.voice__quote-bar span:nth-child(5)  { height: 35%; animation-delay: 0.40s; }
.voice__quote-bar span:nth-child(6)  { height: 65%; animation-delay: 0.50s; }
.voice__quote-bar span:nth-child(7)  { height: 80%; animation-delay: 0.60s; }
.voice__quote-bar span:nth-child(8)  { height: 40%; animation-delay: 0.70s; }
.voice__quote-bar span:nth-child(9)  { height: 55%; animation-delay: 0.80s; }
.voice__quote-bar span:nth-child(10) { height: 75%; animation-delay: 0.90s; }
.voice__quote-bar span:nth-child(11) { height: 50%; animation-delay: 1.00s; }
.voice__quote-bar span:nth-child(12) { height: 65%; animation-delay: 1.10s; }
@keyframes equalize {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1.0); }
}

/* ============================================================
 * LOGO GRID
 * ============================================================ */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 880px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
.logo-cell {
  padding: 24px 18px;
  background: linear-gradient(180deg, var(--surface-elev) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  transition: border-color .25s ease;
}
.logo-cell:hover { border-color: rgba(200,169,110,0.4); }
.logo-cell__name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}
.logo-cell__sub {
  color: var(--white-faded);
  font-size: 12px;
  letter-spacing: 0.4px;
}

/* ============================================================
 * CTA
 * ============================================================ */
.section--cta {
  background: radial-gradient(70% 100% at 50% 0%, rgba(200,169,110,0.12) 0%, transparent 60%), var(--black);
  padding: 140px 0;
  border-top: 1px solid var(--border);
}
.cta { text-align: center; max-width: 640px; margin: 0 auto; }
.cta .h2 { margin: 0 auto 22px; max-width: none; }
.cta .lead { margin: 0 auto 36px; }
.signup {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 0 auto 14px;
}
.signup input {
  flex: 1;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--white);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s ease;
}
.signup input:focus { border-color: var(--gold); }
.signup__ok {
  display: none;
  color: var(--income);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 14px;
  margin-top: 12px;
}
.signup__err {
  display: none;
  color: #FF7A7A;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.signup button:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none !important;
}
@media (max-width: 540px) { .signup { flex-direction: column; } }

/* ============================================================
 * FOOTER
 * ============================================================ */
.footer { padding: 40px 0; border-top: 1px solid var(--border); }
.footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand img:not(.footer__mark) { width: 40px; height: 40px; }
.footer__name { font-weight: 700; font-size: 16px; letter-spacing: 0.4px; }
.footer__tag { color: var(--white-faded); font-size: 12px; }
.footer__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.footer__links a { color: var(--white-faded); font-size: 13px; }
.footer__links a:hover { color: var(--gold); }
.footer__copy { color: var(--white-subtle); font-size: 12px; }

/* ============================================================
 * REVEAL ANIMATION  — directional, easing-rich
 * ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(8px);
  transition:
    opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Stagger children with .reveal automatically when the parent enters view */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.in > *           { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 560ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .intro { display: none !important; }
  body.loading { overflow: auto; }
  body.loading .nav, body.loading .hero, body.loading .section, body.loading .footer { opacity: 1; }
}

/* ============================================================
 * CINEMATIC MOMENTS — full-viewport editorial pull-quotes.
 * Used between conventional sections to give the page rhythm
 * and weight, the way Hermès / Apollo / Patek do it.
 * ============================================================ */
.cinema {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 140px 0;
  overflow: hidden;
}
.cinema--alt {
  background: linear-gradient(180deg, var(--black) 0%, #0a0b0f 50%, var(--black) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cinema__inner {
  width: 100%;
  max-width: 1180px;
  padding: 0 36px;
  margin: 0 auto;
}
.cinema--center .cinema__inner { text-align: center; }

.cinema__eyebrow {
  color: var(--white-faded);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 5px;
  margin-bottom: 48px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cinema--center .cinema__eyebrow {
  display: inline-flex;
  margin-left: auto;
  margin-right: auto;
}
.cinema__eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

/* ----- MOMENT 1: single italic word "Calm." ----- */
.cinema__word {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 0.9;
  letter-spacing: -8px;
  color: var(--cream);
  margin: 0 0 56px;
}
.cinema__quote-open,
.cinema__quote-close {
  color: var(--gold);
  opacity: 0.7;
  font-weight: 400;
}
.cinema__tail {
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--white-faded);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
  font-weight: 400;
}
.cinema__tail .italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 1.05em;
  letter-spacing: -0.5px;
}

/* ----- MOMENT 2: AI verdict at billboard scale ----- */
.cinema--asym .cinema__inner {
  max-width: 1240px;
}
.cinema__verdict {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -3px;
  color: var(--cream);
  margin: 0 0 56px;
  max-width: 1100px;
}
.cinema__verdict em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -2px;
}
.cinema__verdict-mark {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  opacity: 0.5;
  margin-right: 4px;
}
.cinema__verdict-mark--close { margin-left: 4px; margin-right: 0; }

.cinema__attribution {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--white-faded);
  max-width: 600px;
  line-height: 1.4;
  font-weight: 400;
  margin-left: 60px;
}
.cinema__attribution .dim {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--gold);
  display: block;
  margin-top: 4px;
}

/* ----- MOMENT 3: 3 principles, editorial list ----- */
.cinema__principles {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cinema__principles li {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 36px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.cinema__principles li:last-child { border-bottom: none; }
.cinema__principles-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 28px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: 0.7;
}
.cinema__principles-line {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--cream);
}
.cinema__principles-line em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -1px;
}

@media (max-width: 720px) {
  .cinema { padding: 100px 0; min-height: 70vh; }
  .cinema__inner { padding: 0 22px; }
  .cinema__eyebrow { margin-bottom: 32px; }
  .cinema__attribution { margin-left: 0; }
  .cinema__principles li {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }
}

/* ============================================================
 * SHOWCASE — phone mockup + side copy
 * ============================================================ */
.showcase {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
}
.showcase__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 880px) {
  .showcase__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 22px;
  }
}

.showcase__copy .h2 {
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 32px;
  max-width: 460px;
}
.showcase__copy .lead {
  margin-bottom: 28px;
}
.showcase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.showcase__list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  color: var(--white-faded);
  font-size: 15px;
}
.showcase__list li span:first-child { color: var(--gold); opacity: 0.7; }

/* ----- Stage holding the phone ----- */
.showcase__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 720px;
}
@media (max-width: 880px) { .showcase__stage { min-height: 600px; } }
@media (max-width: 420px) {
  /* Scale the whole phone block to keep some side margin on narrow
     phones. Sizing the .phone wrapper itself would break the
     transform-perspective math; a wrapping scale on the inner is
     the cleanest fix. */
  .phone { transform: scale(0.88); transform-origin: 50% 50%; }
}

/* =====================================================================
 * PHONE BACK FACE — camera island, Apple mark, stamping
 * Visible during the middle half of the 360° spin.
 * ===================================================================== */
.phone__back-rail {
  /* Echoes the inner brushed rail on the front. Slight cool-blue
     reflection along the diagonal so the back doesn't look flat. */
  position: absolute;
  inset: 4px;
  border-radius: 52px;
  background:
    linear-gradient(190deg,
      rgba(160,195,240,0.05) 0%,
      transparent 22%,
      transparent 78%,
      rgba(120,160,215,0.04) 100%);
  pointer-events: none;
}

.phone__cam {
  /* Camera island — top-left, square with very rounded corners. Sits
     proud of the body with its own slight gradient + shadow, the way
     the real Pro camera plateau looks. */
  position: absolute;
  top: 28px;
  left: 28px;
  width: 122px;
  height: 122px;
  border-radius: 30px;
  background:
    linear-gradient(155deg, #1a2c46 0%, #07101c 50%, #030710 100%);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(150,185,230,0.10),
    inset 0 1px 0 rgba(180,210,245,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55);
}
.phone__cam-lens {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      #1a2233 0%,
      #0a0e16 30%,
      #000 70%);
  box-shadow:
    inset 0 0 0 2px rgba(80,100,140,0.55),
    inset 0 0 0 4px rgba(0,0,0,0.9),
    inset 0 0 0 5.5px rgba(110,140,190,0.18),
    0 1px 3px rgba(0,0,0,0.7);
}
.phone__cam-lens::after {
  /* Tiny specular highlight on the lens — sells that it's glass. */
  content: '';
  position: absolute;
  top: 6px;
  left: 8px;
  width: 8px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.45) 0%, transparent 70%);
}
.phone__cam-lens--tl { top: 12px; left: 12px; }
.phone__cam-lens--tr { top: 12px; right: 12px; }
.phone__cam-lens--b  { bottom: 12px; left: 50%; transform: translateX(-50%); }
.phone__cam-dot {
  position: absolute;
  border-radius: 50%;
}
.phone__cam-dot--flash {
  /* LED flash module — soft warm glow. */
  top: 16px;
  right: -16px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 30%,
    #f5e4b8 0%, #b89868 60%, #5a4828 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,0.85),
    inset 0 0 0 3px rgba(200,170,110,0.25);
}
.phone__cam-dot--lidar {
  /* LiDAR scanner — deep red-black with a darker center. */
  top: 38px;
  right: -16px;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 40% 35%,
    #4a1620 0%, #1a0810 60%, #050204 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,0.85),
    inset 0 0 4px rgba(180,40,60,0.4);
}

.phone__back-logo {
  /* Apple-style silhouette, centered slightly above middle. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 66px;
  transform: translate(-50%, -60%);
  color: rgba(245,241,232,0.22);     /* etched, not painted */
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.04));
}

.phone__back-stamp {
  /* Fine print at the bottom — sets the scale and tells the eye
     "this is a real product photo, not a cartoon." */
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(245,241,232,0.18);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
}
.showcase__ambient {
  position: absolute;
  width: 460px;
  height: 460px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(200,169,110,0.18) 0%,
    rgba(200,169,110,0.04) 40%,
    transparent 70%);
  pointer-events: none;
  animation: ambient-breathe 5s ease-in-out infinite;
}
@keyframes ambient-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.06); }
}

/* ============================================================
 * PHONE MOCKUP — pure CSS iPhone with the RONAR UI inside.
 * Bezel uses a layered gradient + inset highlight to feel like
 * brushed titanium rather than a flat black rectangle.
 * ============================================================ */
/* =====================================================================
 * PHONE — realistic iPhone-15-Pro style frame
 * ---------------------------------------------------------------------
 * Layer stack:
 *   .phone           — outer perspective wrapper (transforms here would
 *                      smear the shadow, so it stays untransformed)
 *   .phone__inner    — the body that rotates; holds the titanium frame
 *   .phone__rail     — titanium-toned bezel layer that catches light
 *   .phone__btn--*   — physical buttons (action, vol up/down, sleep)
 *   .phone__island   — Dynamic Island (modern iPhone notch)
 *   .phone__screen   — black recessed OLED area
 *   .phone__gloss    — persistent corner gloss (sells the glass)
 *   .phone__glare    — one-time light-sweep diagonal across the glass
 * ===================================================================== */
.phone {
  position: relative;
  width: 340px;
  height: 700px;
  perspective: 1600px;
  perspective-origin: 50% 30%;
}

/* Apple's real iPhone 17 Pro 3D model rendered via Google's
   <model-viewer>. The GLB was converted from Apple's official USDZ
   AR Quick Look asset via Blender — so it's Apple's actual geometry,
   textures, and PBR materials. Auto-rotates; drag to spin manually. */
.phone--mv {
  width: 100%;
  height: 100%;
  min-height: 640px;
  perspective: none;
  position: relative;
  /* Slide-in entrance: phone enters from off-screen right while the
     model itself spins 360° via JS. Lands at translateX(0). */
  transform: translateX(120%);
  opacity: 0;
  transition: none;
}
.phone--mv.phone--in {
  animation: phone-slide-in 2.2s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
@keyframes phone-slide-in {
  0%   { transform: translateX(120%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}
.phone--mv model-viewer {
  width: 100%;
  height: 640px;
  background-color: transparent;
  --poster-color: transparent;
  /* No user interaction — disable selection, dragging etc. so the
     model is purely decorative. */
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 50px 70px rgba(0,0,0,0.55))
    drop-shadow(0 18px 30px rgba(0,0,0,0.35));
}
@media (max-width: 420px) {
  .phone--mv model-viewer { height: 540px; }
}

/* =====================================================================
 * PHONE — VIDEO COMPOSITE (current showcase)
 * iPhone 17 Pro Deep Blue frame PNG with transparent screen cutout,
 * with a live screen recording of the real RONAR app playing through
 * the screen area. Replaces the GLB model — the GLB had an outdated
 * home screen baked into its texture, and updating it requires 3D
 * editing. A composite is sharper, lighter, and shows the app
 * actually moving.
 *
 * Screen-area math from the PNG's alpha channel:
 *   frame: 680×1400, transparent cutout inset 20px on every side
 *   → top 1.43%, left 2.94%, width 94.12%, height 97.14%
 * The video is letterboxed inside that rectangle with object-fit:
 * cover so the 720×1460 source fills it cleanly.
 * ===================================================================== */
.phone--video {
  width: 360px;
  aspect-ratio: 680 / 1400;
  height: auto;
  min-height: 0;
  perspective: none;
  position: relative;
  /* Slide-in entrance: mirrors the GLB's translateX(120%) → 0% so the
     reveal moment feels the same when scrolling into the showcase. */
  transform: translateX(120%);
  opacity: 0;
  transition: none;
  /* Ambient depth — the frame is matte deep-blue, so layered shadows
     read as physical weight rather than render. The warm second
     shadow is the gold ambient bleeding off the phone. */
  filter:
    drop-shadow(0 50px 70px rgba(0,0,0,0.55))
    drop-shadow(0 18px 30px rgba(0,0,0,0.35))
    drop-shadow(0 0 80px rgba(229,192,123,0.10));
}
.phone--video.phone--in {
  /* One-time slide-in only, then fully static. No infinite float:
     animating transform on an element carrying a 3-layer drop-shadow
     filter forces the browser to re-rasterize the blurred shadow
     every frame — that was the showcase lag. Once the slide settles,
     nothing repaints. */
  animation: phone-slide-in 2.2s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
.phone__video {
  position: absolute;
  top: 1.43%;
  left: 2.94%;
  width: 94.12%;
  height: 97.14%;
  object-fit: cover;
  background: #000;
  /* Match the iPhone 17 Pro screen's corner radius. ~9% of the
     screen's short edge reads natural at this scale. */
  border-radius: 9% / 4.2%;
  z-index: 1;
  /* Prevent the user dragging the video element on touch — it's
     decorative, not interactive. */
  pointer-events: none;
  user-select: none;
}
/* Crisp home-screen still — overlaid exactly on the video's screen
   area. Starts transparent; JS fades it in once the video's single
   play ends, so the showcase rests on a sharp image. Same geometry
   as .phone__video (screen cutout: inset 20px on a 680×1400 frame). */
.phone__still {
  position: absolute;
  top: 1.43%;
  left: 2.94%;
  width: 94.12%;
  height: 97.14%;
  object-fit: cover;
  border-radius: 9% / 4.2%;
  z-index: 1;            /* same plane as video; opacity reveals it on top */
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.7s ease;
}
.phone__still--shown { opacity: 1; }
.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
/* Persistent diagonal glass gloss — sells the "this is real glass"
   feel. Sits ABOVE the video but BELOW the frame so the bezel still
   clips it. */
.phone__screen-gloss {
  position: absolute;
  top: 1.43%;
  left: 2.94%;
  width: 94.12%;
  height: 97.14%;
  border-radius: 9% / 4.2%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.08) 44%,
    rgba(255,255,255,0.14) 48%,
    rgba(255,255,255,0.05) 54%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: screen;
  opacity: 0.65;
}
@media (max-width: 880px) {
  .phone--video { width: 300px; }
}
@media (max-width: 420px) {
  .phone--video { width: 260px; }
}

/* Real Apple iPhone 17 Pro Deep Blue product photo — replaces all
   the CSS/Three.js attempts. The photo IS real, so it looks real.
   Sized to fill the showcase__stage; preserves aspect via object-fit.
   Smooth slide-in entrance triggered when the section enters view. */
.phone--photo {
  /* Override the 340x700 phone box — the photo has its own aspect. */
  width: 100%;
  height: 100%;
  min-height: 560px;
  perspective: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.phone__photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  /* Soft ambient drop-shadow matches the other showcase elements. */
  filter:
    drop-shadow(0 50px 70px rgba(0,0,0,0.55))
    drop-shadow(0 18px 30px rgba(0,0,0,0.35));
  /* Pre-animation: tucked off-screen-right, tilted, slightly small. */
  transform: translateX(70%) translateY(20px) rotate(8deg) scale(0.88);
  opacity: 0;
  transition:
    transform 1.8s cubic-bezier(0.22, 0.9, 0.28, 1),
    opacity 1.2s ease-out;
  will-change: transform, opacity;
}
.phone--photo.phone--in .phone__photo {
  transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  opacity: 1;
  /* After landing, gentle idle float keeps it alive. */
  animation: phone-photo-float 7.5s ease-in-out 2s infinite;
}
@keyframes phone-photo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-0.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .phone__photo {
    transform: none;
    opacity: 1;
    transition: none;
  }
}
.phone__inner {
  position: relative;
  width: 100%;
  height: 100%;
  /* All hardware (body, bezel, Dynamic Island, side buttons) lives
     in the iphone-frame.png referenced by .phone__frame below. The
     drop shadow stays in CSS so it casts onto the page properly. */
  filter:
    drop-shadow(0 60px 80px rgba(0,0,0,0.55))
    drop-shadow(0 20px 40px rgba(0,0,0,0.35));
  transform: rotateY(-6deg) rotateX(2deg) rotate(-1deg);
  will-change: transform;
}

/* The PNG iPhone frame. Stretches to fill the inner. Positioned at
   z-index 2 so it sits ABOVE the screen UI — the bezel covers the
   edges of the screen content. The PNG has a black screen area, so
   we mask that section using a clip path... actually simpler: the
   screen content lives in a div positioned within the bezel inset
   on a lower z-index, and the frame sits on top with the screen
   region transparent. */
.phone__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Inner blue titanium rail — adds a second metallic stripe inside the
   outer body. Cool steel-blue highlight on the edges to sell that
   it's a real brushed titanium pane and not flat paint. */
.phone__rail {
  position: absolute;
  inset: 4px;
  border-radius: 52px;
  background:
    linear-gradient(170deg,
      rgba(150,190,240,0.06) 0%,
      transparent 18%,
      transparent 82%,
      rgba(110,150,210,0.04) 100%);
  pointer-events: none;
}

/* Side hardware buttons. Numbers come from iPhone 15 Pro proportions
   relative to the 340-wide mockup body (real device ≈ 71.5mm wide). */
.phone__btn {
  position: absolute;
  /* Buttons share the deep-blue family of the body — slightly darker
     so they read as separate hardware against the bezel. */
  background: linear-gradient(90deg, #0a1424 0%, #1c324f 50%, #07101b 100%);
  border-radius: 1.5px;
  box-shadow:
    inset 0 1px 0 rgba(140,180,235,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    -1px 0 1px rgba(0,0,0,0.45);
  pointer-events: none;
  /* Hidden when the phone is facing away from the camera — looking at
     the back of an iPhone, you don't see the front-facing button
     silhouettes pushed through. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.phone__btn--action {
  left: -1.5px;
  top: 110px;
  width: 3px;
  height: 28px;
  border-radius: 2px 0 0 2px;
}
.phone__btn--vol-up {
  left: -1.5px;
  top: 160px;
  width: 3px;
  height: 56px;
  border-radius: 2px 0 0 2px;
}
.phone__btn--vol-dn {
  left: -1.5px;
  top: 234px;
  width: 3px;
  height: 56px;
  border-radius: 2px 0 0 2px;
}
.phone__btn--sleep {
  right: -1.5px;
  top: 168px;
  width: 3px;
  height: 96px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, #07101b 0%, #1c324f 50%, #0a1424 100%);
  box-shadow:
    inset 0 1px 0 rgba(140,180,235,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    1px 0 1px rgba(0,0,0,0.45);
}

/* Dynamic Island — pill-shaped, recessed-feeling. Subtle inner shadow
   gives it depth instead of looking pasted on. */
.phone__island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 32px;
  background: #000;
  border-radius: 20px;
  z-index: 12;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 2px 6px rgba(0,0,0,0.95);
}
.phone__island::before,
.phone__island::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #1d1f25 0%, #050608 100%);
}
.phone__island::before {
  right: 12px;
  width: 8px;
  height: 8px;            /* Front camera lens */
}
.phone__island::after {
  right: 26px;
  width: 4px;
  height: 4px;            /* Face ID dot projector */
  background: radial-gradient(circle, #0a0b0f 0%, #000 100%);
}

/* Screen — sits inside the bezel of the PNG frame. Absolute-
   positioned so the frame PNG can sit on top with its bezel + Dynamic
   Island covering the edges. The bezel inset in the PNG is 10px
   (1x), so we inset the screen by the same amount. */
.phone__screen {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: 46px;
  background: linear-gradient(180deg, #0c0d11 0%, var(--black) 60%, #0a0b0f 100%);
  overflow: hidden;
  padding: 60px 20px 24px;
  z-index: 1;
}

/* Persistent glass gloss — a soft sheen in the top-right that sells
   the surface as a real pane of glass. Doesn't animate. */
.phone__gloss {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 46px;
  pointer-events: none;
  background:
    radial-gradient(
      120% 80% at 90% -10%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.04) 12%,
      transparent 32%);
  mix-blend-mode: screen;
}

/* One-time glare sweep — fires after the phone has landed (delayed
   from the entrance). Light bar moves diagonally across the screen. */
.phone__glare {
  position: absolute;
  inset: 0;
  border-radius: 46px;
  pointer-events: none;
  overflow: hidden;
}
.phone__glare::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -60%;
  width: 60%;
  height: 130%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.0) 35%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.0) 65%,
    transparent 100%);
  transform: translateX(-30%) skewX(-15deg);
  opacity: 0;
}
.phone--in .phone__glare::before {
  /* Fires once the slide-in has landed (1.4s) — soft light catches
     the glass like sunlight hitting a real screen. */
  animation: glare-sweep 2.2s ease-out 1.5s 1 forwards;
}
@keyframes glare-sweep {
  0%   { transform: translateX(-30%) skewX(-15deg); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translateX(420%) skewX(-15deg); opacity: 0; }
}

/* ---------------------------------------------------------------------
 * Entrance: phone slides in from the right while doing a clean 360°
 * spin around its vertical axis. Simplified compared to v1 — no
 * scale change, no Y bob, no rotateX wobble during the spin. The
 * resting tilt is applied only at the final keyframe so the spin
 * itself reads as a pure rotation.
 * ------------------------------------------------------------------- */
/* Pre-animation: phone is off-screen to the right and slightly faded.
   No more 360 spin attempts — CSS can't render a flat-PNG phone as
   a true 3D object. Smooth slide-in is the cleanest premium effect. */
.phone--reveal .phone__inner {
  transform: translateX(120%) translateY(0) rotate(-1deg) scale(0.96);
  opacity: 0;
}
.phone--reveal.phone--in .phone__inner {
  animation: phone-slide-in 1.4s cubic-bezier(0.22, 0.9, 0.28, 1) forwards;
}
@keyframes phone-slide-in {
  0% {
    transform: translateX(120%) translateY(0) rotate(-1deg) scale(0.96);
    opacity: 0;
  }
  20% { opacity: 1; }
  100% {
    transform: translateX(0) translateY(0) rotateY(-6deg) rotateX(2deg) rotate(-1deg) scale(1);
    opacity: 1;
  }
}

/* Idle float — applied via JS .phone--floating class after the
   slide-in animation completes. Single-keyframe animation, no
   handoff conflict with the entrance. */
.phone--reveal.phone--in.phone--floating .phone__inner {
  animation: phone-float 7.5s ease-in-out infinite;
}
@keyframes phone-float {
  0%, 100% {
    transform: rotateY(-6deg) rotateX(2deg) rotate(-1deg) translateY(0);
  }
  50% {
    transform: rotateY(-4deg) rotateX(1deg) rotate(-1deg) translateY(-8px);
  }
}

/* Mouse-driven tilt overrides the float when active (set via JS
   custom properties). Stops the idle animation while the cursor is
   over the phone. */
.phone--reveal.phone--in .phone__inner.phone__inner--tilt {
  animation: none;
  transform:
    rotateY(var(--tilt-y, -8deg))
    rotateX(var(--tilt-x, 3deg))
    rotate(-1deg)
    translateY(var(--tilt-z, 0));
  transition: transform .25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .phone--reveal .phone__inner {
    transform: rotateY(-8deg) rotateX(3deg) rotate(-1deg);
    opacity: 1;
    transition: none;
    animation: none;
  }
  .phone--in .phone__glare::before { animation: none; opacity: 0; }
}
.phone__notch {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  background: #000;
  border-radius: 16px;
  z-index: 10;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  background: linear-gradient(180deg, #0c0d11 0%, var(--black) 60%, #0a0b0f 100%);
  overflow: hidden;
  padding: 56px 18px 22px;
}
.phone__status {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 28px;
  z-index: 5;
  pointer-events: none;
}
.phone__time {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.phone__indicators {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.phone__indicators .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--cream);
  opacity: 0.7;
}
.phone__indicators .dot--gold { background: var(--gold); opacity: 1; }

/* ----- Inner UI — mirrors current RONAR Home (editorial, chromeless) -----
   Updated 2026-05-23 to match the actual deployed app: italic serif
   name, naked balance with hairline rules, large Control Score ring,
   italic-serif tile titles. */
.phone__ui {
  display: flex;
  flex-direction: column;
}

/* Editorial header — gold dot + small-caps eyebrow */
.ui__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.ui__head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.ui__head-eyebrow {
  color: rgba(245,241,232,0.55);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
}
.ui__name-big {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.0;
  color: var(--cream);
  margin-top: 6px;
  margin-bottom: 14px;
}

/* Hairline divider — used throughout the editorial layout */
.ui__hr {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 0 0 14px;
}

/* Naked balance — no card chrome */
.ui__balance-label {
  color: rgba(245,241,232,0.55);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
}
.ui__balance {
  color: var(--cream);
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-top: 4px;
}
.ui__balance-dec {
  font-size: 22px;
  opacity: 0.55;
}

/* Income / Spend row */
.ui__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ui__row--stats {
  margin-top: 12px;
}
.ui__row--nums {
  margin-top: 2px;
  margin-bottom: 14px;
}
.ui__stat {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ui__stat-mark {
  width: 6px;
  height: 6px;
  border-radius: 1px;            /* squared mark, editorial */
  background: var(--income);
  flex-shrink: 0;
}
.ui__stat-mark.out { background: var(--expense); }
.ui__stat-label {
  color: rgba(245,241,232,0.55);
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 600;
}
.ui__row-num {
  color: var(--cream);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Control Score — bigger ring, italic serif suggestion */
.ui__score-block {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 14px;
  margin-bottom: 14px;
}
.ui__score-label {
  color: rgba(245,241,232,0.55);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.ui__score-dot { color: var(--gold); margin: 0 2px; }
.ui__score-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 14px;
  align-items: center;
}
.ui__ring {
  position: relative;
  width: 64px;
  height: 64px;
}
.ui__ring--big {
  width: 88px;
  height: 88px;
}
.ui__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring__bg, .ring__fg {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}
.ring__bg { stroke: rgba(255,255,255,0.06); }
.ring__fg {
  stroke: var(--gold);
  stroke-dasharray: 276;          /* 2π·44 */
  stroke-dashoffset: 44;          /* ~ 84% filled */
}
.ui__ring-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--cream);
  font-size: 32px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}
.ui__suggestion {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--cream);
  font-size: 15px;
  line-height: 1.25;
}

/* Action tiles — italic serif titles, dot eyebrow */
.ui__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 2px;
}
.ui__tile {
  background: linear-gradient(180deg, #1c1f26 0%, #14161c 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  min-height: 102px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.ui__tile--primary {
  background: linear-gradient(135deg, rgba(99,102,241,0.55) 0%, rgba(79,70,229,0.35) 100%);
  border-color: rgba(255,255,255,0.14);
}
.ui__tile-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ui__tile-mark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0.85;
}
.ui__tile-mark--end {
  margin-left: auto;
  opacity: 0.7;
  animation: dot-breathe 2.4s ease-in-out infinite;
}
.ui__tile-mark--gold { background: var(--gold); }
.ui__tile-eyebrow {
  color: rgba(245,241,232,0.7);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
}
.ui__tile--primary .ui__tile-eyebrow { color: rgba(245,241,232,0.85); }
.ui__tile-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
  font-size: 22px;
  line-height: 1.0;
  margin-top: auto;
  letter-spacing: -0.2px;
}
.ui__tile-sub {
  color: rgba(245,241,232,0.6);
  font-size: 10px;
  letter-spacing: 0.2px;
}
.ui__tile--primary .ui__tile-sub { color: rgba(245,241,232,0.78); }


/* =================================================================
 * LANGUAGE SWITCHER (top-right chip + dropdown menu)
 * Used on the landing page; shared with ceremony pages via ceremony.css
 * ================================================================= */
.i18n-switcher {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 200;
}
.i18n-switcher__btn {
  background: rgba(245, 241, 232, 0.06);
  color: rgba(245, 241, 232, 0.7);
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.i18n-switcher__btn:hover {
  background: rgba(245, 241, 232, 0.12);
  color: #F5F1E8;
  border-color: rgba(200, 169, 110, 0.4);
}
.i18n-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  padding: 6px;
  background: rgba(15, 16, 22, 0.95);
  border: 1px solid rgba(245, 241, 232, 0.14);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.i18n-switcher.is-open .i18n-switcher__menu {
  display: flex;
}
.i18n-switcher__item {
  background: transparent;
  color: rgba(245, 241, 232, 0.75);
  border: none;
  border-radius: 5px;
  padding: 8px 12px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.i18n-switcher__item:hover {
  background: rgba(245, 241, 232, 0.08);
  color: #F5F1E8;
}
.i18n-switcher__item.is-active {
  background: rgba(200, 169, 110, 0.15);
  color: #E2C58A;
}
/* RTL: flip the switcher to top-left */
:root[dir='rtl'] .i18n-switcher { right: auto; left: 24px; }
:root[dir='rtl'] .i18n-switcher__menu { right: auto; left: 0; }
:root[dir='rtl'] .i18n-switcher__item { text-align: right; }

/* Mobile: the fixed top-right Request access CTA in the nav competes
 * with the i18n switcher for space. Tuck the switcher down so it sits
 * cleanly below the nav row instead of overlapping the button.
 * 720px matches the existing mobile breakpoint elsewhere in this file. */
@media (max-width: 720px) {
  .i18n-switcher { top: 86px; right: 18px; }
  .i18n-switcher__btn { padding: 4px 8px; font-size: 9px; }
  :root[dir='rtl'] .i18n-switcher { right: auto; left: 18px; top: 86px; }
}

/* ============================================================
 * MENU OVERLAY · LANGUAGE BLOCK
 * The i18n switcher now lives inside the MENU overlay. Reset its
 * fixed-position styles when it sits in a flow container, and add
 * a calm "Language" label above it. Keeps the top-right edge
 * clean and gives the CTA proper breathing room.
 * ============================================================ */
.menu-overlay__lang {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(245,241,232,0.08);
  opacity: 0;
  transition: opacity .45s ease .3s, transform .45s ease .3s;
  transform: translateY(12px);
}
body.menu-open .menu-overlay__lang {
  opacity: 1;
  transform: none;
}
.menu-overlay__lang-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  color: var(--white-subtle);
  text-transform: uppercase;
}
/* Override the fixed-position switcher styles when it lives in the
 * menu overlay — let it sit inline with relative positioning. */
.menu-overlay__lang .i18n-switcher {
  position: relative;
  top: auto;
  right: auto;
}
.menu-overlay__lang .i18n-switcher__btn {
  font-size: 12px;
  letter-spacing: 2px;
  padding: 10px 16px;
}
.menu-overlay__lang .i18n-switcher__menu {
  top: calc(100% + 8px);
  left: 0;
  right: auto;
  max-height: 60vh;
  overflow-y: auto;
}
:root[dir='rtl'] .menu-overlay__lang .i18n-switcher__menu { right: 0; left: auto; }

/* ============================================================
 * NAV CREST — refinements for the silver interlocked crest PNG
 * The brand-marks-v2/2-crest.png already carries its own depth
 * (engraved silver on dark). Lighten the base shadow so it reads
 * sharp without halo bloom, then add a gentle warm-light response
 * on hover so the crest feels alive when noticed.
 * ============================================================ */
.nav__crest-img {
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55))
          drop-shadow(0 0 24px rgba(229,192,123,0.12));
  transition: width .4s cubic-bezier(0.22,1,0.36,1),
              height .4s cubic-bezier(0.22,1,0.36,1),
              filter .4s ease,
              transform .4s cubic-bezier(0.22,1,0.36,1),
              opacity .25s ease;
}
.nav__crest:hover .nav__crest-img {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65))
          drop-shadow(0 0 30px rgba(229,192,123,0.28));
}
/* Legacy selector kept for the privacy/terms simple-nav, which still
 * uses the older SVG monogram. Don't bleed onto the main nav. */
.nav--simple .nav__crest-img[src$=".svg"] {
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55))
          drop-shadow(0 0 18px rgba(200,169,110,0.18));
}

/* ============================================================
 * FIVE PILLARS
 * Vertical scroll of five product moments. Each pillar is a
 * 12vh-padded section with a 2-col grid: copy + SVG visual.
 * Alternates side via .pillar--left / .pillar--right.
 * ============================================================ */
.pillars-shell {
  padding: 120px 0 60px;
  background: var(--black);
  border-top: 1px solid var(--border);
  position: relative;
}
.pillars-shell__intro {
  margin-bottom: 60px;
  max-width: 880px;
}
.pillars-shell__intro .h2 { margin-bottom: 24px; }

.pillar {
  padding: 90px 0;
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.pillar:first-of-type { border-top: 1px solid var(--border); }
.pillar--feature {
  background: radial-gradient(60% 80% at 70% 30%, rgba(99,102,241,0.10) 0%, transparent 60%),
              radial-gradient(50% 70% at 30% 70%, rgba(200,169,110,0.08) 0%, transparent 60%),
              var(--black);
}
.pillar__inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.pillar--left .pillar__inner { grid-template-columns: 1fr 1.1fr; }
.pillar--right .pillar__copy   { order: 1; }
.pillar--right .pillar__visual { order: 2; }
.pillar--left  .pillar__visual { order: 1; }
.pillar--left  .pillar__copy   { order: 2; }

.pillar__no {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--gold);
  opacity: 0.8;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}
.pillar__kicker {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--white-faded);
  margin-bottom: 28px;
  display: inline-block;
  position: relative;
  padding-left: 32px;
}
.pillar__kicker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 1px;
  background: var(--gold);
}
.pillar__kicker.indigo { color: var(--white-faded); }
.pillar__kicker.indigo::before { background: var(--indigo); }

.pillar__title {
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -1.8px;
  margin: 0 0 24px;
  color: var(--cream);
  max-width: 540px;
}
.pillar__title .italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: -1px;
}
.pillar__body {
  font-size: 17px;
  color: var(--white-faded);
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 520px;
}
.pillar__tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  padding: 6px 12px;
  display: inline-block;
  border: 1px solid rgba(200,169,110,0.32);
  border-radius: 999px;
  background: rgba(200,169,110,0.06);
}

.pillar__visual {
  position: relative;
  width: 100%;
}
.pv {
  width: 100%;
  height: auto;
  max-width: 460px;
  display: block;
  margin: 0 auto;
}
.pv--diet { max-width: 320px; }

@media (max-width: 880px) {
  .pillar { padding: 64px 0; }
  .pillar__inner,
  .pillar--left .pillar__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* On mobile, always show copy first then visual, regardless of side. */
  .pillar--right .pillar__copy,
  .pillar--left  .pillar__copy   { order: 1; }
  .pillar--right .pillar__visual,
  .pillar--left  .pillar__visual { order: 2; }
  .pillar__title { font-size: 32px; letter-spacing: -1px; }
  .pillars-shell { padding: 80px 0 40px; }
}

/* ============================================================
 * TRUST · QUIET TECH
 * Tight 4-cell band that frames the underlying tech without
 * making it a hero moment. Roman numerals match the cards above.
 * ============================================================ */
.trust {
  padding: 100px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--black) 0%, #0a0b0f 50%, var(--black) 100%);
}
.trust__inner { max-width: 1180px; }
.trust__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 32px;
}
.trust__cell {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  transition: border-top-color .3s ease;
}
.trust__cell:hover { border-top-color: var(--gold); }
.trust__num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--gold);
  opacity: 0.7;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}
.trust__title {
  font-size: 18px;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.trust__cell p {
  color: var(--white-faded);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 880px) {
  .trust { padding: 64px 0; }
  .trust__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 540px) {
  .trust__grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * FOOTER LOCKUP
 * The closing signature of the page: the transparent RONAR monogram
 * next to the ЯONAR wordmark. Different from the top (standalone
 * mark) because here the mark is paired with the wordmark. The first
 * R is mirrored (scaleX(-1)) so it's a true glyph-match to "ONAR" in
 * the same Plus Jakarta Sans face the intro wordmark uses.
 * ============================================================ */
.footer__brand { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer__lockup {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer__mark {
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.97;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5));
  transition: transform .35s cubic-bezier(0.22,1,0.36,1), opacity .25s ease;
}
.footer__wordmark {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 34px;
  letter-spacing: 12px;
  /* trailing letter-spacing pushes the lockup left; pull it back so
     the wordmark sits visually balanced next to the mark. */
  padding-left: 4px;
  color: var(--cream);
  line-height: 1;
  user-select: none;
}
.footer__r-rev {
  display: inline-block;
  transform: scaleX(-1);
  /* The mirror moves the R's stem to the right edge, eating its right
     side-bearing, so Я sits tight against the O. Add a gap so the
     Я–O spacing matches the rest of the tracked wordmark. */
  margin-right: 11px;
}
.footer__lockup:hover .footer__mark {
  transform: translateY(-2px) scale(1.03);
  opacity: 1;
}
@media (max-width: 720px) {
  .footer__mark { width: 56px; height: 56px; }
  .footer__wordmark { font-size: 27px; letter-spacing: 9px; }
  .footer__row  { gap: 18px; }
}

/* ============================================================
   LAUNCH GATE
   <body class="mode-waitlist"> → private-beta waitlist CTAs.
   <body class="mode-open">     → every CTA becomes "Enter RONAR"
                                  linking to https://app.ronar.ai.
   Flip = change that one word on the <body> tag and redeploy.
   ============================================================ */
body.mode-waitlist .only-open { display: none !important; }
body.mode-open .only-waitlist { display: none !important; }

/* ============================================================
   INSIDE RONAR — product showcase (section is commented out in
   index.html until all three frames hold real captures).
   ============================================================ */
.inside { padding-top: 40px; }
.inside__intro { max-width: 640px; margin: 0 auto 64px; text-align: center; }
.inside__grid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 48px;
  flex-wrap: wrap;
}
.inside__item { margin: 0; text-align: center; }
.inside__frame {
  width: 252px;
  border-radius: 38px;
  padding: 10px;
  background: linear-gradient(160deg, #15161b, #0a0b0e);
  border: 1px solid rgba(201, 168, 106, 0.28); /* gold hairline */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.inside__frame img {
  display: block;
  width: 100%;
  border-radius: 28px;
}
/* The middle frame leads — a touch larger, lifted off the baseline. */
.inside__item--lead .inside__frame { width: 286px; }
.inside__item--lead { transform: translateY(-18px); }
.inside__caption {
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-faded, rgba(244, 241, 234, 0.55));
}
@media (max-width: 720px) {
  .inside__grid { gap: 36px; }
  .inside__item--lead { transform: none; }
  .inside__frame, .inside__item--lead .inside__frame { width: min(266px, 78vw); }
}

/* ============================================================
 * QUALITY POLISH — accessibility + hero motion choreography
 * (2026-07-02). Additive; layered on by cascade order so it
 * never disturbs the existing rules.
 * ============================================================ */

/* Keyboard focus ring: brand gold, keyboard-only (never on mouse),
 * offset so it clears gold button fills and stays legible on the
 * near-black page. Fixes the site-wide absence of :focus-visible. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 10px;
}
.btn--gold:focus-visible { outline-offset: 4px; }
/* the waitlist email input zeroes its outline in the base rule; give
 * it a real keyboard ring (mouse focus still just tints the border). */
.signup input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Hero entrance choreography: stage the first paint as a cascade
 * (eyebrow -> title -> rule -> sub -> CTAs -> stats) instead of one
 * flat simultaneous block-fade. ~530ms total reads as poise. */
.hero__eyebrow.reveal { transition-delay: 0ms; }
.hero__title.reveal   { transition-delay: 110ms; }
.hero__rule.reveal    { transition-delay: 230ms; }
.hero__sub.reveal     { transition-delay: 330ms; }
.hero__ctas.reveal    { transition-delay: 430ms; }
.hero__stats.reveal   { transition-delay: 530ms; }

/* Complete the reduced-motion contract. The base block only pins
 * .reveal; this also silences every ambient keyframe loop (breathing
 * dot, equalizer, glare sweep, etc.), neutralises the hero cascade
 * delays, and resets parallax. Counter + scroll-parallax are also
 * guarded in script.js (CSS can't stop JS-driven transforms). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero__eyebrow.reveal, .hero__title.reveal, .hero__rule.reveal,
  .hero__sub.reveal, .hero__ctas.reveal, .hero__stats.reveal {
    transition-delay: 0ms !important;
  }
  [data-parallax] { transform: translate3d(-50%, 0, 0) !important; }
}

/* ============================================================
 * QUALITY POLISH — typography detail (2026-07-02, pass 2).
 * ============================================================ */

/* Widow/orphan control. `balance` evens display headings (no lonely
 * last word); `pretty` prevents single-word last lines in body copy.
 * Both degrade gracefully where unsupported. */
.hero__title, .cinema__word, .cinema__verdict, .card h3, .pillar__title,
.trust__title, .step__title, .section__title, .cta__title, h2 {
  text-wrap: balance;
}
.hero__sub, .card p, .cinema__tail, .pillar__copy, .pillar__copy p,
.trust__body, .step__body, .section__lead, .cta__lead, .footer p {
  text-wrap: pretty;
}

/* The serif-italic 'mastered.' was inheriting a -2px track tuned for the
 * tight sans caps, which collides Cormorant's flowing italic letterfit.
 * Relax it and engage the font's ligatures/contextual alternates so the
 * word reads as the elegant accent it was chosen to be. */
.hero__title-italic {
  letter-spacing: -0.5px;
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Tabular figures anywhere numbers count or align, so widths never jitter. */
.stat__num, [data-counter], .pillar__num, .cinema__principles-num {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * CTA SEAL CEREMONY — the wax seal stamps down once per session
 * (WAAPI in script.js drives the drop; these are the resting styles).
 * ============================================================ */
.cta__seal {
  position: relative;
  width: 112px;
  margin: 0 auto 26px;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta__seal.is-stamped { opacity: 1; }
.cta__seal img {
  display: block;
  width: 112px;
  height: 112px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55));
}
.cta__seal-shadow {
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 90px;
  height: 16px;
  transform: translateX(-50%) scale(0.6);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
 * INSIDE UNVEIL — screenshots reveal bottom-up (an unveiling,
 * not a fade), keyed on the existing reveal observer's .in class.
 * ============================================================ */
.inside__item .inside__frame {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 950ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.inside__item.in .inside__frame {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .inside__item .inside__frame { clip-path: none; transition: none; }
}

/* ============================================================
 * CARD SHEEN — a gold light sweep on hover, fine pointers only.
 * ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .card { overflow: hidden; }
  .card::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -60%;
    width: 60%;
    height: 180%;
    background: linear-gradient(100deg, transparent, rgba(200, 169, 110, 0.10), transparent);
    transform: translateX(-140%) rotate(10deg);
    transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .card:hover::after { transform: translateX(340%) rotate(10deg); }
}