/* =============================================================
   AptoSwasthy - Marketing site
   Type: Aleo (display serif) + system sans (body). Aleo loaded via Google Fonts.
   Theme: light only (warm paper). Accent swappable via --accent-a / --accent-b.
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* brand accents (Tweakable) */
  --accent-a: #7BA68A;   /* sage  */
  --accent-b: #5A9EA6;   /* teal  */
  --brand-grad: linear-gradient(120deg, var(--accent-a) 0%, var(--accent-b) 100%);

  --orb-amber: #E6B45E;
  --orb-coral: #D4836A;

  /* score bands */
  --band-good: #2D7D5A;
  --band-mid:  #C98A2E;
  --band-low:  #C76B4F;

  /* feature/privacy icons */
  --feat-ic:   var(--band-good);

  /* surfaces - warm paper (light) */
  --bg:        #F2F1EC;
  --bg-2:      #EFEEE6;
  --card:      #FCFCFB;
  --card-2:    #FFFFFF;
  --ink:       #0A1020;
  --hairline:      rgba(45, 125, 90, 0.13);
  --hairline-soft: rgba(45, 60, 52, 0.08);
  --hairline-strong: rgba(45, 60, 52, 0.16);

  --fg1: #23272A;
  --fg2: rgba(35, 39, 42, 0.64);
  --fg3: rgba(35, 39, 42, 0.44);
  --fg4: rgba(35, 39, 42, 0.26);

  --serif: 'Aleo', Georgia, 'Times New Roman', serif;
  --sans:  -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 32px; --r-3xl: 40px;

  --shadow-card:  0 1px 2px rgba(42,60,52,0.04), 0 10px 34px rgba(42,60,52,0.06);
  --shadow-float: 0 8px 20px rgba(42,60,52,0.09), 0 30px 70px rgba(42,60,52,0.13);
  --shadow-orb:   0 30px 80px rgba(90,158,166,0.30);

  --maxw: 1200px;
  --nav-h: 70px;
}

* { box-sizing: border-box; }
/* NOTE: no `overflow-x: hidden` on html/body — it turns them into scroll
   containers and breaks the hero's `position: sticky` pin. The only elements
   with wide/translated children (.bg-field, .hero-sticky) clip themselves. */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------- ambient gradient field (fixed) ---------- */
.bg-field { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: paint; }
.bg-field .blob { display: none; }

/* ambient motion off (Tweak) */
.no-ambient .orb-anim { animation: none !important; }

/* ---------- shared text roles ---------- */
.eyebrow {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em;
  font-weight: 500; font-size: 11.5px; color: var(--fg3);
}
.eyebrow.accent { color: var(--accent-b); }
.serif    { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.brand-fill {
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* display headline scale */
.h-display { font-family: var(--serif); font-weight: 500; line-height: 1.02; letter-spacing: -0.022em; font-size: clamp(40px, 6.6vw, 84px); }
.h-section { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: -0.018em; font-size: clamp(32px, 4.4vw, 56px); }
.h-card    { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: -0.012em; font-size: clamp(22px, 2.4vw, 30px); }
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--fg2); font-weight: 500; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
section { position: relative; }
.section-pad { padding: clamp(72px, 11vw, 150px) 0; }

/* ---------- wordmark lockup ---------- */
.lockup { display: inline-flex; align-items: center; gap: 11px; }
.lockup .mark { display: block; border-radius: 26%; overflow: hidden; box-shadow: 0 4px 14px rgba(47,127,123,0.28); }
.lockup .mark img { width: 100%; height: 100%; display: block; }
/* Orb mark is a circle with its own inner shadow — drop the square clip + box-shadow. */
.lockup .mark-orb { border-radius: 50%; overflow: visible; box-shadow: none; }
.lockup .wm-stack { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; }
.wm { display: inline-flex; align-items: baseline; gap: 0.02em; font-family: var(--sans); font-weight: 900; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.wm .apto { color: var(--ink); }
.wm .swasthy { color: var(--accent-a); }
.wm-byline { font-family: var(--sans); font-weight: 700; font-size: 10px; line-height: 1; letter-spacing: 0.01em; color: var(--fg3); white-space: nowrap; }

/* ---------- nav (bar-less, floating) ---------- */
.floatnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center;
  padding: clamp(16px, 2.2vw, 28px) clamp(20px, 3vw, 44px);
  pointer-events: none; /* let the field/orb behind stay clickable */
}
.floatnav > * { pointer-events: auto; }
.floatnav-home { display: inline-flex; align-items: center; transition: transform 200ms cubic-bezier(0.22,1,0.36,1); }
.floatnav-home:hover { transform: scale(1.08); }
.floatnav-links { display: flex; align-items: center; gap: clamp(20px, 2vw, 34px); margin-left: auto; }
.floatnav-links a {
  position: relative; font-family: var(--sans); font-weight: 700; font-size: 15.5px;
  letter-spacing: -0.01em; color: var(--fg2); transition: color 180ms ease;
}
.floatnav-links a:hover { color: var(--fg1); }
.floatnav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px;
  background: var(--iris-grad); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1);
}
.floatnav-links a:hover::after, .floatnav-links a.is-current::after { transform: scaleX(1); }

/* Once the page scrolls, the links pick up a frosted pill so they stay legible
   over whatever drifts beneath them; at the top the nav stays bar-less. */
.floatnav-links {
  padding: 9px 16px; margin: -9px -16px -9px auto; border-radius: 999px; border: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
.floatnav.is-scrolled .floatnav-links {
  background: rgba(252, 252, 251, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  border-color: var(--hairline);
  box-shadow: 0 6px 22px rgba(42, 60, 52, 0.08);
}
.floatnav-home {
  padding: 5px; margin: -5px; border-radius: 50%; border: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 200ms cubic-bezier(0.22,1,0.36,1);
}
.floatnav.is-scrolled .floatnav-home {
  background: rgba(252, 252, 251, 0.66);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  backdrop-filter: blur(14px) saturate(1.35);
  border-color: var(--hairline);
  box-shadow: 0 6px 22px rgba(42, 60, 52, 0.08);
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; border: none; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; transition: transform 140ms ease, filter 200ms ease, background 200ms ease, border-color 200ms ease; }
.btn:active { transform: scale(0.975); }
.btn-brand { height: 52px; padding: 0 26px; border-radius: 999px; background: var(--brand-grad); color: #fff; font-size: 15.5px;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-b) 32%, transparent); }
.btn-brand:hover { filter: brightness(1.05); }
.btn-brand.sm { height: 44px; padding: 0 20px; font-size: 14.5px; }
.btn-ghost { height: 52px; padding: 0 24px; border-radius: 999px; background: transparent; color: var(--fg1);
  border: 1px solid var(--hairline-strong); font-size: 15.5px; font-weight: 700; }
.btn-ghost:hover { background: var(--card); border-color: var(--accent-b); }
.btn-ghost.sm { height: 44px; padding: 0 18px; font-size: 14.5px; }

/* ---------- chips / pills ---------- */
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--hairline); font-size: 13px; font-weight: 700; color: var(--fg2); }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.card:hover { border-color: color-mix(in srgb, var(--accent-b) 35%, var(--hairline)); }
a.card { transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
.surface {
  background: color-mix(in srgb, var(--card) 70%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
}

/* ---------- reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 800ms cubic-bezier(0.22,1,0.36,1), transform 800ms cubic-bezier(0.22,1,0.36,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 90ms; }
.reveal.d2 { transition-delay: 180ms; }
.reveal.d3 { transition-delay: 270ms; }
.reveal.d4 { transition-delay: 360ms; }

/* ---------- phone frame (marketing) ---------- */
.phone {
  width: 300px; height: 620px; border-radius: 46px; position: relative; flex-shrink: 0;
  background: #0C0E0B; padding: 5px; box-shadow: var(--shadow-float);
}
.phone-screen { width: 100%; height: 100%; border-radius: 41px; overflow: hidden; position: relative; background: var(--app-bg, #F5F4EE); }
.phone .island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 96px; height: 27px; border-radius: 16px; background: #0C0E0B; z-index: 30; }
.phone .home-ind { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 108px; height: 4.5px; border-radius: 100px; background: rgba(42,46,44,0.3); z-index: 30; }

/* Privacy page grids. Desktop columns live here so the responsive collapse in
   the media queries below can take over on phones (these used to be inline
   styles that never collapsed, leaving cramped columns and overflowing chips). */
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.privacy-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: 64px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 600; color: var(--fg3); margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { font-size: 14.5px; font-weight: 600; color: var(--fg2); }
.footer ul a:hover { color: var(--fg1); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--hairline-soft); font-size: 13px; color: var(--fg3); font-weight: 600; }
.footer-bottom .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent-b); display: inline-block; margin: 0 9px; vertical-align: middle; }

/* ---------- waitlist form ---------- */
.waitlist-multi { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.waitlist-row { display: flex; gap: 10px; }
.waitlist-input {
  /* flex:none so the vertical form column never flex-stretches an input's height —
     every field stays a uniform 52px. Only the first/last name row opts into
     flex:1 (below) to split horizontally. */
  flex: none; width: 100%; height: 52px; min-height: 52px; box-sizing: border-box;
  border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: var(--card); padding: 0 20px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--fg1);
  outline: none; transition: border-color 180ms ease, box-shadow 180ms ease; min-width: 0;
}
.waitlist-row .waitlist-input { flex: 1 1 0%; width: auto; }
.waitlist-input::placeholder { color: var(--fg3); font-weight: 600; }
.waitlist-input:focus { border-color: var(--accent-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-b) 14%, transparent); }
.waitlist-input.err { border-color: var(--band-low); box-shadow: 0 0 0 4px color-mix(in srgb, var(--band-low) 14%, transparent); }
.waitlist-note { font-size: 13px; color: var(--fg3); font-weight: 600; margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.waitlist-success { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-radius: var(--r-md); background: color-mix(in srgb, var(--band-good) 12%, transparent); border: 1px solid color-mix(in srgb, var(--band-good) 30%, transparent); max-width: 460px; }
.waitlist-success .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--band-good); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- waitlist modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: modal-fade 200ms ease;
}
.modal-card {
  position: relative; width: 100%; max-width: 440px; background: var(--bg-raised, var(--card));
  border: 1px solid var(--hairline-strong); border-radius: var(--r-lg, 24px);
  padding: 26px 26px 22px; box-shadow: 0 40px 90px rgba(20,40,34,0.32);
  animation: modal-rise 260ms cubic-bezier(0.22,1,0.36,1);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--hairline-strong); background: transparent; color: var(--fg2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background 160ms ease;
}
.modal-close:hover { background: var(--card); }
.modal-card .waitlist-multi, .modal-card .waitlist-success { max-width: none; }
@keyframes modal-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes modal-rise { 0% { opacity: 0; transform: translateY(16px) scale(0.98); } 100% { opacity: 1; transform: none; } }
/* legacy single-line form still used in a couple spots */
.waitlist { display: flex; gap: 10px; max-width: 460px; }
.waitlist input {
  flex: 1; height: 52px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: var(--card); padding: 0 20px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--fg1);
  outline: none; transition: border-color 180ms ease, box-shadow 180ms ease;
}
.waitlist input::placeholder { color: var(--fg3); font-weight: 600; }
.waitlist input:focus { border-color: var(--accent-b); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-b) 14%, transparent); }
.waitlist input.err { border-color: var(--band-low); box-shadow: 0 0 0 4px color-mix(in srgb, var(--band-low) 14%, transparent); }

/* ---------- keyframes reused from app ---------- */
@keyframes orb-breathe { 0%{transform:scale(1.0)} 100%{transform:scale(1.05)} }
@keyframes orb-swirl   { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes orb-swirl-r { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }
@keyframes halo-pulse  { 0%{transform:scale(0.96);opacity:0.5} 100%{transform:scale(1.06);opacity:0.14} }
@keyframes fade-up     { 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
.fade-up { animation: fade-up 400ms cubic-bezier(0.22, 1, 0.36, 1) both; }
/* orb entrance — a quick, springy pop: surges to its largest, dips small, then
   settles. big1 (32%) is larger than the resting big2 (100%) so it reads alive. */
@keyframes orb-pop {
  0%   { transform: scale(1.3);  opacity: 0; }
  32%  { transform: scale(1.15); opacity: 1; }
  64%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1.0);  opacity: 1; }
}
.orb-pop-anim { animation: orb-pop 560ms cubic-bezier(0.32, 0.9, 0.3, 1.02) both; }
/* listening: a colour blob that drifts across the orb so the gradient moves */
@keyframes orb-flow { 0%{transform:translate(-18%,12%) rotate(0deg)} 50%{transform:translate(16%,-14%) rotate(180deg)} 100%{transform:translate(-18%,12%) rotate(360deg)} }
/* live voice waveform — each bar scales on its own offset */
@keyframes bar-dance { 0%,100%{transform:scaleY(0.4)} 50%{transform:scaleY(1)} }
@keyframes sheet-up { 0%{transform:translateY(102%)} 100%{transform:translateY(0)} }
@keyframes sheet-fade { 0%{opacity:0} 100%{opacity:1} }

.nav-menu-btn {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
  color: var(--fg2); display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero-grid, .pearl-grid, .privacy-grid, .detail-grid, .score-grid, .feature-grid, .steps-grid {
    grid-template-columns: 1fr !important;
  }
  /* When a detail row stacks to one column, lead with the copy instead of the
     phone demo so the section reads as its own thing, not another mockup in the
     run of demos above it. Desktop keeps the original left/right layout. */
  .detail-grid.stack-text-first .detail-text { order: -1; }
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .phone { width: 264px; height: 564px; border-radius: 40px; }
  .phone .island { width: 84px; height: 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  /* Perf: reduce blur radius of the mesh layer on phones to cut GPU cost */
  .bg-field::before { filter: blur(24px); }
  .nav { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
@media (min-width: 901px) {
  .nav-menu-btn { display: none; }
  .nav-mobile { display: none !important; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .nav-cta { display: none; }
  /* Keep the floating hero cards from hanging off the screen edge on phones. */
  .fc-longevity { left: -14px !important; }
  .fc-pearl { right: -12px !important; }
  .waitlist { flex-direction: column; }
  .waitlist input, .waitlist .btn { width: 100%; }
  .waitlist-multi .waitlist-row { flex-direction: column; }
  .waitlist-multi .waitlist-input, .waitlist-multi .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .score-grid { grid-template-columns: 1fr !important; }
  .feature-grid { grid-template-columns: 1fr !important; }
  .steps-grid { grid-template-columns: 1fr !important; }
  .principle-grid { grid-template-columns: 1fr; }
}

/* Mobile nav is a compact dropdown popup anchored under the hamburger, with a
   dimming scrim behind it. Self-contained so it never bleeds into the page. */
.nav-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: modal-fade 180ms ease;
}
.nav-mobile {
  position: fixed; top: calc(var(--nav-h) - 6px); right: 16px; z-index: 99;
  width: min(248px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--hairline-strong);
  border-radius: 18px; box-shadow: var(--shadow-float); overflow: hidden;
  transform-origin: top right;
  animation: menu-pop 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-mobile-inner {
  display: flex; flex-direction: column; gap: 2px; padding: 10px;
}
.nav-mobile-inner a {
  font-size: 15.5px; font-weight: 700; color: var(--fg1);
  padding: 11px 12px; border-radius: 11px; transition: background 140ms ease;
}
.nav-mobile-inner a:hover { background: var(--bg-2); }
.nav-mobile-inner .btn { width: 100%; margin-top: 6px; }
@keyframes menu-pop { 0% { opacity: 0; transform: scale(0.94) translateY(-6px); } 100% { opacity: 1; transform: none; } }
.footer-social {
  display: flex; gap: 12px; margin-top: 18px;
}
.footer-social a {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  display: flex; align-items: center; justify-content: center; color: var(--fg2);
  transition: background 160ms ease, color 160ms ease;
}
.footer-social a:hover { background: var(--card); color: var(--fg1); }

/* =============================================================
   System visual layer
   ============================================================= */
:root {
  --accent-c: #7FE7D9;
  /* sage → teal → aqua → back, sized wide for a slow background-position shift */
  --iris-grad: linear-gradient(108deg,
    var(--accent-a) 0%, var(--accent-b) 34%, var(--accent-c) 56%,
    var(--accent-b) 78%, var(--accent-a) 100%);
  --breath: 7s;
  /* soft accent fill for cells/tiles (was referenced but never defined) */
  --accent-soft: color-mix(in srgb, var(--accent-b) 13%, transparent);
  /* how-it-works ordinals */
  --step-num: var(--accent-b);
}

/* ---- layered background field ---- */
/* 4-layer composition: beige base → 6 ambient ellipses → blurred mesh → paper grain */
.bg-field {
  background:
    /* sage green — top-left corner */
    radial-gradient(ellipse 72% 55% at 2% 4%,    rgba(123, 166, 138, 0.30), transparent 65%),
    /* teal — top-right corner */
    radial-gradient(ellipse 58% 48% at 97% 2%,   rgba(90, 158, 166, 0.24), transparent 60%),
    /* light blue — right edge, upper third */
    radial-gradient(ellipse 52% 44% at 90% 22%,  rgba(140, 185, 215, 0.22), transparent 62%),
    /* olive — left edge, lower third */
    radial-gradient(ellipse 56% 44% at 2% 78%,   rgba(140, 155, 90, 0.22), transparent 62%),
    /* coral — bottom-right corner */
    radial-gradient(ellipse 62% 52% at 96% 92%,  rgba(212, 131, 106, 0.20), transparent 62%),
    /* teal — bottom-center */
    radial-gradient(ellipse 50% 40% at 44% 100%, rgba(90, 158, 166, 0.18), transparent 58%),
    #F2F1EC;
}

/* blurred mesh layer — sits behind the ellipses, adds depth through soft overlap */
.bg-field::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 40% at 22% 28%, rgba(123, 166, 138, 0.38), transparent 65%),
    radial-gradient(ellipse 42% 36% at 78% 18%, rgba(140, 185, 215, 0.32), transparent 60%),
    radial-gradient(ellipse 50% 44% at 14% 70%, rgba(140, 155, 90, 0.30), transparent 65%),
    radial-gradient(ellipse 44% 38% at 86% 64%, rgba(212, 131, 106, 0.24), transparent 60%),
    radial-gradient(ellipse 40% 36% at 52% 52%, rgba(90, 158, 166, 0.20), transparent 55%);
  filter: blur(40px);
  opacity: 0.6;
}

/* paper grain — feTurbulence noise for tactile depth */
.bg-field::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.038;
}

/* ---- iridescent shimmer ---- */
/* The hero word and primary CTA breathe colour through the orb's own palette. */
.brand-fill {
  background: var(--iris-grad);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: iris-shift 9s ease-in-out infinite alternate;
}
.btn-brand {
  background: var(--iris-grad);
  background-size: 200% 100%;
  animation: iris-shift 8s ease-in-out infinite alternate;
}
.btn-brand:hover { filter: brightness(1.06) saturate(1.06); }
@keyframes iris-shift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* ---- blooming cards ---- */
/* Lift + a soft aqua bloom on hover, as if the card responds to being near. */
a.card { transition: transform 260ms cubic-bezier(0.22,1,0.36,1), box-shadow 260ms ease, border-color 260ms ease; }
a.card:hover {
  transform: translateY(-3px) scale(1.012);
  border-color: color-mix(in srgb, var(--accent-c) 52%, var(--hairline));
  box-shadow: var(--shadow-float),
              0 0 0 1px color-mix(in srgb, var(--accent-c) 22%, transparent),
              0 20px 54px color-mix(in srgb, var(--accent-b) 18%, transparent);
}

/* ---- organic geometry ---- */
/* Surfaces lose the perfect rectangle for a soft, slightly asymmetric pebble —
   the corners read hand-shaped and alive, not machined. The variance is small
   so it stays elegant across every card size. Cards with an explicit inline
   radius (the privacy band, float cards) keep theirs. */
.card { border-radius: 30px 22px 28px 24px; }
.score-grid .card { border-radius: 34px 24px 30px 26px; }
.surface { border-radius: 24px 18px 22px 20px; }
/* icon tiles become little cells — a soft asymmetric blob holding each glyph */
.cell { border-radius: 48% 52% 56% 44% / 56% 44% 52% 48%; }
.cell-sm { border-radius: 40% 54% 48% 52% / 52% 46% 56% 44%; }

/* morph-d — blob shape animation for the hero aura */
@keyframes morph-d {
  0%   { border-radius: 52% 48% 46% 54% / 54% 46% 52% 48%; transform: scale(1); }
  33%  { border-radius: 48% 52% 54% 46% / 46% 54% 48% 52%; transform: scale(1.04); }
  66%  { border-radius: 56% 44% 50% 50% / 50% 50% 44% 56%; transform: scale(0.97); }
  100% { border-radius: 44% 56% 48% 52% / 52% 48% 56% 44%; transform: scale(1.02); }
}

/* A living aura blooms behind the hero phone, the orb's light cast onto the page. */
.hero-grid > div:last-child { position: relative; }
.hero-grid > div:last-child::before {
  content: ""; position: absolute; z-index: -1;
  width: 116%; height: 86%; left: -8%; top: 12%;
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--accent-c) 38%, transparent),
    color-mix(in srgb, var(--accent-b) 22%, transparent) 42%, transparent 70%);
  border-radius: 52% 48% 46% 54% / 54% 46% 52% 48%;
  filter: blur(46px); opacity: 0.7;
  animation: morph-d 22s ease-in-out infinite alternate;
}

/* ---- generative-growth reveals ---- */
/* Sections don't just fade up; they grow in a touch, like something unfolding. */
.reveal { transform: translateY(28px) scale(0.972); }
.reveal.in { transform: none; }


/* phones: freeze shimmer motion so scrolling stays smooth */
@media (max-width: 900px) {
  .hero-grid > div:last-child::before { animation: none !important; }
  .brand-fill, .btn-brand { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  .reveal { transition-duration: 0.01ms; }
}

/* =============================================================
   GLASSMORPHISM (preview) — frosted translucent surfaces
   Cards, chips and float cards become frosted surface that lets the
   living aurora field shimmer through. Appended after LIVING PEARL
   so it wins on the shared selectors (.card / .surface / .chip).
   This whole block is self-contained — delete it to revert.
   ============================================================= */
:root {
  --surface-bg:        rgba(255, 255, 255, 0.52);
  --surface-border:    rgba(255, 255, 255, 0.70);
  --surface-blur:      blur(22px) saturate(1.6);
  --surface-shadow:    0 2px 8px rgba(42, 60, 52, 0.05), 0 18px 44px rgba(42, 60, 52, 0.11);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.card,
.surface {
  background: var(--surface-bg);
  -webkit-backdrop-filter: var(--surface-blur);
  backdrop-filter: var(--surface-blur);
  border: 1px solid var(--surface-border);
  box-shadow: var(--surface-shadow), var(--surface-highlight);
}
/* non-anchor cards still get a gentle aqua edge on hover (anchor cards keep
   the LIVING PEARL bloom, which is more specific and wins). */
.card:hover { border-color: color-mix(in srgb, var(--accent-c) 50%, var(--surface-border)); }

.chip {
  background: var(--surface-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid var(--surface-border);
  box-shadow: var(--surface-highlight);
}

/* ghost button reads as a lighter pane of the same surface */
.btn-ghost {
  background: color-mix(in srgb, var(--surface-bg) 64%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.btn-ghost:hover { background: var(--surface-bg); }

/* backdrop-filter is GPU-cheap per element but multiplies fast; on phones the
   page already freezes ambient motion, so cap how many panes blur at once by
   dropping the blur on the smallest, most-repeated chips there. */
@media (max-width: 600px) {
  .chip { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}


/* =============================================================
   HOME 2.0 — cinematic single-scroll
   Pinned hero → Meet Pearl, the app's system tab bar, closing CTA.
   ============================================================= */

/* ---- hero stage (pinned, desktop) ---- */
.hero-sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; }

.hero-orb-move {
  position: absolute; left: 50%; top: calc(50% - 40px);
  transform: translate(-50%, -50%);
  z-index: 2; will-change: transform;
}
.hero-orb-hue { will-change: filter; }

.hero-text {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  will-change: transform, opacity;
}
.hero-kicker {
  position: absolute; left: 50%; top: calc(50% - 330px); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.hero-kicker-name {
  font-family: var(--sans); font-weight: 900; letter-spacing: -0.045em; line-height: 1;
  font-size: clamp(44px, 7vw, 100px); white-space: nowrap;
}
.hero-kicker-by {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em;
  font-size: clamp(13px, 1.3vw, 16px); color: var(--fg3);
}
.hero-kicker-a { color: var(--ink); }
/* "Health" flows the orb's palette — same iridescent gradient as the tagline word */
.hero-kicker-b {
  background: var(--iris-grad); background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: iris-shift 9s ease-in-out infinite alternate;
}
.hero-below {
  position: absolute; left: 50%; top: calc(50% + 186px); transform: translateX(-50%);
  width: min(92vw, 760px); text-align: center;
}
.hero-tagline {
  margin: 0; font-family: var(--serif); font-weight: 500; line-height: 1.04;
  letter-spacing: -0.02em; font-size: clamp(34px, 5vw, 68px); color: var(--fg1);
}
.hero-scrollhint {
  margin-top: 26px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px;
  color: var(--fg3); animation: hint-bob 2.2s ease-in-out infinite;
}
@keyframes hint-bob { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(6px); opacity: 1; } }

.hero-meet {
  position: absolute; left: 53%; top: calc(50% - 40px); transform: translateY(-50%);
  width: min(42vw, 470px); z-index: 3; opacity: 0; will-change: transform, opacity;
}
.hero-ps {
  margin-top: 26px; display: inline-flex; align-items: baseline; gap: 9px;
  font-size: 14.5px; font-weight: 600; color: var(--fg2); position: relative;
}
.hero-ps-tag {
  font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  color: var(--accent-b); text-transform: uppercase;
}

/* ---- hero static (phones / reduced-motion) ---- */
.hero-static {
  min-height: 84vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(30px, 8vw, 52px); padding: 56px 20px 40px;
  overflow: hidden;
}
.hero-static .hero-kicker { position: static; transform: none; }
.hero-static .hero-tagline { margin-top: 0; }

/* ---- tabs showcase ---- */
/* trimmed top padding so "Inside the app" follows Meet Pearl without a dead gap */
.tabs-section { padding-top: clamp(32px, 5vw, 72px); }
.tabs-stage {
  margin-top: clamp(40px, 6vw, 72px); position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.tab-peek {
  display: inline-flex; align-items: flex-start; gap: 13px; text-align: left;
  width: min(380px, 90vw); min-height: 84px; margin-bottom: 26px; padding: 15px 18px;
  border-radius: 22px 16px 22px 16px;
  background: var(--surface-bg); border: 1px solid var(--surface-border);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--surface-shadow), var(--surface-highlight);
  animation: peek-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes peek-in { 0% { opacity: 0; transform: translateY(9px) scale(0.98); } 100% { opacity: 1; transform: none; } }
.tab-peek-ic {
  width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 48% 52% 56% 44% / 56% 44% 52% 48%; background: var(--accent-soft);
}
.tab-peek-title { font-family: var(--sans); font-weight: 800; font-size: 15px; color: var(--fg1); }
.tab-peek-body {
  font-size: 13px; line-height: 1.45; color: var(--fg2); font-weight: 500; text-wrap: pretty;
  /* always reserve two lines so swapping tabs never resizes the popup (no layout jump) */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.9em;
}

.tabbar {
  display: flex; align-items: stretch; gap: 2px; width: min(460px, 94vw);
  padding: 7px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  border: 1px solid var(--surface-border);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 12px 34px rgba(42, 60, 52, 0.16), var(--surface-highlight);
}
.tabbar-item {
  appearance: none; border: none; background: transparent; cursor: pointer;
  /* equal width for every tab, so the active one never looks bigger */
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 6px; border-radius: 999px;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.tabbar-icpill { width: 34px; height: 24px; display: flex; align-items: center; justify-content: center; }
.tabbar-label { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--fg3); transition: color 200ms ease; }
.tabbar-item:hover { background: color-mix(in srgb, var(--accent-b) 7%, transparent); }
.tabbar-item.on {
  background: color-mix(in srgb, var(--accent-b) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-b) 24%, transparent);
}
.tabbar-item.on .tabbar-label { color: var(--accent-b); }

/* ---- closing CTA ---- */
.cta-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.cta-card { padding: clamp(24px, 3vw, 34px); border-radius: 30px 22px 28px 24px; }
.cta-copy { min-width: 0; }

@media (max-width: 900px) {
  .cta-grid { grid-template-columns: 1fr !important; }
  .cta-copy { order: -1; }
}
@media (max-width: 560px) {
  .tabbar-item { padding: 9px 10px; }
  .tabbar-label { font-size: 10px; }
  .tabbar-icpill { width: 28px; }
}

/* ---- about page ---- */
.about-hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(32px, 5vw, 56px) 24px clamp(40px, 6vw, 64px); gap: 2px;
}
.about-orbwrap { margin-bottom: clamp(14px, 2.4vw, 26px); }
.about-statement {
  margin: 12px 0 0; font-family: var(--serif); font-weight: 500; line-height: 1.03;
  letter-spacing: -0.022em; font-size: clamp(38px, 5.6vw, 78px); color: var(--fg1);
  text-wrap: balance;
}
.about-line {
  margin: clamp(18px, 2.4vw, 26px) auto 0; max-width: 540px;
  font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.5; font-weight: 500; color: var(--fg2);
  text-wrap: pretty;
}
.about-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: clamp(24px, 3vw, 34px); }

/* The pinned (sticky) hero only renders above 900px, so clipping horizontal
   overflow on phones is safe here and tames the centred orb's wide halo. */
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
}