/* Steady — night-sky site. Tokens mirror the app's Theme.kt. */
@font-face { font-family: "Fraunces"; src: url("/assets/fraunces_300_light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fraunces_400_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/jost_300_light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/jost_400_regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/assets/jost_500_medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }

:root {
  color-scheme: dark;
  --canvas: #03050b;
  --deep: #010206;
  --surface: #05060b;
  --glass: #040509;
  --raised: #070910;
  --line: rgba(151, 177, 235, .14);
  --line-bright: rgba(169, 195, 245, .36);
  --edge: rgba(163, 184, 227, .30);
  --ink: #f3f6fc;
  --muted: #aab6ce;
  --faint: #8491aa;
  --accent: #dce7ff;
  --glow: #6e93f0;
  --moon: #c8d9ff;
  --rust: #d08a8a;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --page: 1160px;
  --gutter: 28px;
}

* { box-sizing: border-box; }
html { background: var(--deep); scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #040710 0%, var(--canvas) 45%, var(--deep) 100%);
  color: var(--ink); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
main, .site-footer { position: relative; z-index: 1; }
main { flex: 1 0 auto; overflow-x: clip; }
.sky { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* Static fallback sky until the canvas takes over (and when JS is off). */
html:not(.sky-ready) body::before {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; content: ""; opacity: .5;
  background-image:
    radial-gradient(circle at 23px 31px, rgba(218, 231, 255, .7) 0 .7px, transparent 1.2px),
    radial-gradient(circle at 172px 66px, rgba(235, 241, 255, .6) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 66px 192px, rgba(140, 177, 255, .5) 0 .7px, transparent 1.2px);
  background-size: 220px 210px, 341px 297px, 257px 319px;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
::selection { background: rgba(110, 147, 240, .35); }

.shell { width: min(var(--page), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link {
  position: absolute; z-index: 20; left: 14px; top: 12px; transform: translateY(-160%);
  padding: 10px 14px; border-radius: 10px; color: var(--deep); background: var(--ink); font-weight: 500; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .2em; line-height: 1.5; text-transform: uppercase;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 300; }
h1 { font-size: clamp(46px, 7vw, 94px); line-height: 1.02; letter-spacing: -.025em; }
h1 span { color: var(--moon); text-shadow: 0 0 60px rgba(110, 147, 240, .35); }
h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -.02em; }
h3 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.18; letter-spacing: -.01em; }
.lede { max-width: 520px; color: var(--muted); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; }
.section-head { display: grid; gap: 18px; justify-items: start; }
.section-sub { max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.65; }

.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--glow); animation: pulse 2.4s var(--ease) infinite; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 26px 0 30px;
  border: 1.2px solid rgba(243, 246, 252, .85); border-radius: 999px; color: var(--ink); background: var(--surface);
  font-family: var(--serif); font-size: 18px; font-weight: 400; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(110, 147, 240, 0), 0 0 28px rgba(110, 147, 240, .28);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); border-color: #fff; box-shadow: 0 0 0 4px rgba(110, 147, 240, .08), 0 0 44px rgba(110, 147, 240, .42); }
.btn:active { transform: scale(.975); }
.chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover .chev { transform: translateX(3px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 15px; font-weight: 400; text-decoration: none; }
.text-link span { transition: transform .35s var(--ease); }
.text-link:hover span { transform: translate(3px, 0); }
.text-link[href^="#"]:hover span { transform: translate(0, 3px); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; transition: background .4s var(--ease), border-color .4s var(--ease); border-bottom: 1px solid transparent; }
.site-header.is-scrolled { background: rgba(3, 5, 11, .72); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 32px; height: 32px; object-fit: contain; }
.brand span { font-size: 12px; font-weight: 500; letter-spacing: .32em; }
nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); }
nav a { color: var(--muted); font-size: 14px; font-weight: 400; text-decoration: none; transition: color .25s var(--ease); }
nav a:hover { color: var(--ink); }
.nav-cta { padding: 8px 18px; border: 1px solid var(--line-bright); border-radius: 999px; color: var(--ink); background: var(--surface); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.nav-cta:hover { border-color: rgba(243, 246, 252, .8); box-shadow: 0 0 22px rgba(110, 147, 240, .3); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(calc(100vh - 72px), 880px); min-height: min(calc(100svh - 72px), 880px); display: grid; align-items: center; padding: 20px 0 150px; }
.hero-moon { position: absolute; z-index: -1; top: 0; right: -4%; width: min(52vw, 600px); aspect-ratio: 1; pointer-events: none; }
.hero-moon::before {
  position: absolute; inset: 14%; border-radius: 50%; content: "";
  background: radial-gradient(circle, rgba(110, 147, 240, .22), rgba(110, 147, 240, .06) 48%, transparent 70%);
  filter: blur(20px); animation: breathe 9s ease-in-out infinite;
}
.hero-moon img { position: relative; width: 100%; height: 100%; object-fit: contain; animation: float 14s ease-in-out infinite; }
.hero-copy { display: grid; gap: 26px; justify-items: start; max-width: 720px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 6px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--faint); font-size: 14px; }
.hero-facts li { display: inline-flex; align-items: center; gap: 10px; }
.hero-facts li::before { width: 4px; height: 4px; border-radius: 50%; background: var(--moon); box-shadow: 0 0 8px var(--glow); content: ""; }
.scroll-cue { position: absolute; left: 50%; bottom: 34px; width: 22px; height: 36px; border: 1px solid var(--line-bright); border-radius: 12px; transform: translateX(-50%); }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 2px; height: 7px; border-radius: 2px; background: var(--accent); transform: translateX(-50%); animation: cue 2.2s var(--ease) infinite; }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Moments marquee ---------- */
.moments { padding: 120px 0 110px; }
.marquee {
  display: grid; gap: 14px; margin-top: 56px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-row { display: flex; gap: 14px; width: max-content; animation: marquee 70s linear infinite; }
.marquee-reverse { animation-direction: reverse; animation-duration: 82s; }
.marquee:hover .marquee-row { animation-play-state: paused; }
.marquee li {
  display: flex; align-items: center; gap: 16px; padding: 16px 26px 16px 18px;
  border: 1px solid var(--edge); border-radius: 22px; background: var(--glass);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.marquee li:hover { border-color: var(--line-bright); box-shadow: 0 0 30px rgba(110, 147, 240, .16); }
.marquee img { width: 42px; height: 42px; flex: 0 0 auto; }
.marquee span { display: grid; font-family: var(--serif); font-size: 19px; font-weight: 400; white-space: nowrap; }
.marquee small { color: var(--faint); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.custom-note {
  display: flex; align-items: center; gap: 20px; margin-top: 44px; padding: 22px 26px;
  border: 1px solid var(--line-bright); border-radius: 24px; background: var(--glass); box-shadow: 0 0 36px rgba(110, 147, 240, .1);
}
.custom-note p { color: var(--muted); font-size: 16px; }
.custom-note strong { color: var(--ink); font-family: var(--serif); font-size: 19px; font-weight: 400; margin-right: 4px; }
.plus { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 22px rgba(110, 147, 240, .45); }
.plus::before, .plus::after { position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: var(--deep); content: ""; transform: translate(-50%, -50%); }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }

/* ---------- Story ---------- */
.story { padding: 90px 0 60px; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); margin-top: 20px; }
.story-step { position: relative; min-height: 82vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-left: 46px; opacity: .32; transition: opacity .7s var(--ease); }
.story-step.is-active { opacity: 1; }
.story-steps { position: relative; }
.story-steps::before {
  position: absolute; left: 9px; top: 0; bottom: 0; width: 1px; content: "";
  background: linear-gradient(180deg, transparent, var(--line-bright) 12%, var(--line-bright) 88%, transparent);
}
.step-num { position: relative; }
.step-num::before {
  position: absolute; left: -41px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: 1px solid var(--line-bright); border-radius: 50%;
  background: var(--deep); content: ""; transition: background .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.story-step.is-active .step-num::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 14px var(--glow); }
.step-num { color: var(--faint); font-family: var(--serif); font-size: 15px; }
.story-step h3 { max-width: 460px; }
.story-step > p:not(.eyebrow) { max-width: 440px; color: var(--muted); font-size: 18px; }
.step-shot { display: none; }
.story-stage { position: sticky; top: calc(50vh - 360px); height: 720px; display: grid; justify-items: center; align-content: center; gap: 18px; }
.stage-caption { position: relative; height: 20px; width: 100%; color: var(--faint); font-size: 13px; text-align: center; }
.stage-caption span { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease); }
.stage-caption span.is-active { opacity: 1; }

/* Phone: a slim frame around a 390×844 screen scaled by --k. */
.phone {
  --k: .8; position: relative; width: calc(390px * var(--k) + 20px); padding: 10px; border: 1px solid var(--edge); border-radius: calc(46px * var(--k) + 10px);
  background: linear-gradient(160deg, #141a28, #06080f 40%, #030409);
  box-shadow: 0 40px 100px rgba(0, 0, 0, .8), 0 0 80px rgba(110, 147, 240, .16), inset 0 1px 0 rgba(220, 231, 255, .14);
}
.phone::before { position: absolute; z-index: 3; top: calc(10px + 11px * var(--k)); left: 50%; width: calc(120px * var(--k)); height: calc(34px * var(--k)); border-radius: 20px; background: #000; content: ""; transform: translateX(-50%); }
.phone-screen { position: relative; width: calc(390px * var(--k)); height: calc(844px * var(--k)); overflow: hidden; border-radius: calc(46px * var(--k)); background: #040710; }
.screen { position: absolute; inset: 0; opacity: 0; transform: scale(1.015); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.screen.is-active { opacity: 1; transform: none; }
.screen img { position: absolute; left: 0; top: calc(44px * var(--k)); width: 100%; height: calc(800px * var(--k)); }
/* Status bar: app captures are 390×800 and sit below it. */
.phone-screen::before, .phone-screen::after { position: absolute; z-index: 2; top: calc(15px * var(--k)); content: ""; }
.phone-screen::before { left: calc(34px * var(--k)); content: "9:41"; color: var(--ink); font-size: calc(15px * var(--k)); font-weight: 500; line-height: 1.2; }
.phone-screen::after {
  right: calc(30px * var(--k)); top: calc(17px * var(--k)); width: calc(25px * var(--k)); height: calc(12px * var(--k));
  border: 1px solid rgba(243, 246, 252, .7); border-radius: calc(4px * var(--k)); box-shadow: inset 0 0 0 calc(2px * var(--k)) var(--deep), inset 0 0 0 20px rgba(243, 246, 252, .85);
}

/* HTML screen mocks, laid out at the app's 390dp width. */
.mock {
  position: absolute; top: 0; left: 0; width: 390px; height: 844px; padding: 58px 24px 30px; transform: scale(var(--k)); transform-origin: 0 0;
  display: flex; flex-direction: column; font-size: 15px; color: var(--ink);
  background: radial-gradient(ellipse at 50% 36%, rgba(110, 147, 240, .09), transparent 60%), linear-gradient(180deg, #050812, var(--deep));
}
.mock small { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .18em; }
.m-card { padding: 14px 16px; border: 1px solid var(--edge); border-radius: 20px; background: var(--glass); }
.m-card p { margin-top: 6px; line-height: 1.45; }
.mv-rule { height: 1px; margin: 14px 0 16px; background: var(--line); }
.mv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--serif); font-size: 17px; }
.mv-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mv-live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em; }
.mv-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--glow); animation: pulse 1.8s var(--ease) infinite; }
.mv-act p { font-size: 14.5px; }
.mv-avatar { position: relative; width: 76px; height: 76px; margin: 22px auto 10px; }
.mv-face { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--raised); }
.mv-face img { width: 48px; height: 48px; }
.ring { position: absolute; inset: 0; border: 1px solid rgba(169, 195, 245, .5); border-radius: 50%; animation: ripple 3.6s var(--ease) infinite; }
.r2 { animation-delay: 1.2s; } .r3 { animation-delay: 2.4s; }
.mv-name { font-family: var(--serif); font-size: 20px; text-align: center; }
.mv-role { color: var(--muted); font-size: 14px; text-align: center; }
.mv-label { margin-top: 16px; text-align: center; }
.mv-quote { margin: 8px 6px 14px; font-family: var(--serif); font-size: 22px; line-height: 1.3; text-align: center; }
.mv-you p { font-size: 14px; }
.mv-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 48px; margin-top: 12px; }
.mv-wave i { width: 3px; height: 32px; border-radius: 3px; background: var(--accent); opacity: .8; transform: scaleY(.25); animation: wave .9s ease-in-out infinite alternate; }
.mv-wave i:nth-child(2n) { animation-delay: -.3s; animation-duration: .7s; }
.mv-wave i:nth-child(3n) { animation-delay: -.55s; animation-duration: 1.1s; opacity: .55; }
.mv-wave i:nth-child(5n) { animation-duration: .6s; }
.mv-end { width: 64px; height: 64px; margin: auto auto 0; border: 1.5px solid var(--rust); border-radius: 50%; position: relative; }
.mv-end span::before, .mv-end span::after { position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: var(--rust); content: ""; transform: translate(-50%, -50%) rotate(45deg); }
.mv-end span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.mv-hint { margin-top: 12px; color: var(--muted); font-size: 13px; text-align: center; }

.md-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--serif); font-size: 21px; }
.md-head small { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); }
.md-top { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; margin-bottom: 16px; }
.md-ring { position: relative; width: 112px; height: 112px; display: grid; place-content: center; text-align: center; }
.md-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.md-ring circle { fill: none; stroke: rgba(151, 177, 235, .16); stroke-width: 7; }
.md-ring .arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(110, 147, 240, .7)); transition: stroke-dashoffset 1.6s var(--ease) .25s; }
.md-ring b { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1; }
.md-ring small { font-size: 9px; }
.md-h { font-family: var(--serif); font-size: 19px; line-height: 1.25; }
.md-p { margin-top: 5px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.md-card { margin-bottom: 12px; }
.md-card .md-h { margin-top: 6px; }
.md-skills { display: grid; gap: 12px; }
.md-btn { margin-top: auto; padding: 16px; border: 1.2px solid rgba(243, 246, 252, .85); border-radius: 999px; font-family: var(--serif); font-size: 18px; text-align: center; box-shadow: 0 0 22px rgba(110, 147, 240, .28); }
.md-bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 0; font-size: 15px; }
.md-bar b { font-family: var(--serif); font-weight: 400; }
.md-bar i { position: relative; grid-column: 1 / -1; height: 3px; border-radius: 3px; background: rgba(151, 177, 235, .14); overflow: hidden; }
.md-bar i::after { position: absolute; inset: 0; border-radius: 3px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease) .5s; }
.screen.is-active .md-ring .arc { stroke-dashoffset: 28; }
.screen.is-active .md-bar i::after { transform: scaleX(var(--v)); }

/* ---------- Counterparts ---------- */
.counterparts { padding: 130px 0 120px; }
.cp-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.4fr); gap: 28px; margin-top: 56px; align-items: stretch; }
.cp-list { display: grid; gap: 8px; }
.cp-tab {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 20px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 18px; color: var(--muted); background: var(--glass); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.cp-tab:hover { border-color: var(--edge); color: var(--ink); }
.cp-tab b { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink); }
.cp-tab span { font-size: 14px; }
.cp-tab[aria-selected="true"] { border-color: var(--line-bright); color: var(--ink); background: var(--surface); box-shadow: 0 0 30px rgba(110, 147, 240, .12); }
.cp-tab::after { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); content: ""; transform: scaleX(0); transform-origin: left; opacity: 0; }
.cp-tab[aria-selected="true"].is-timing::after { opacity: .7; animation: timer var(--cp-time, 7s) linear forwards; }
.cp-card {
  position: relative; display: flex; flex-direction: column; gap: 26px; padding: clamp(28px, 4vw, 48px); overflow: hidden;
  border: 1px solid var(--edge); border-radius: 30px; background: var(--glass);
}
.cp-card::before { position: absolute; top: -40%; right: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(110, 147, 240, .14), transparent 65%); content: ""; pointer-events: none; }
.cp-card > * { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.cp-card.is-swapping > * { opacity: 0; transform: translateY(6px); }
.cp-top { display: flex; align-items: center; gap: 20px; }
.cp-avatar { position: relative; width: 76px; height: 76px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #1a1d26; box-shadow: 0 0 0 1px var(--line), 0 0 30px rgba(110, 147, 240, .15); }
.cp-initial { font-family: var(--serif); font-size: 32px; }
.cp-name { font-family: var(--serif); font-size: 34px; line-height: 1.1; }
.cp-meta { margin-top: 4px; color: var(--faint); font-size: 15px; }
.cp-quote { margin: 0; font-family: var(--serif); font-size: clamp(28px, 3.4vw, 42px); font-weight: 300; line-height: 1.2; letter-spacing: -.01em; color: var(--moon); }
.cp-summary { max-width: 560px; color: var(--muted); font-size: 17px; }
.cp-traits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.cp-traits span { padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; }

/* ---------- Growth (scroll-scrubbed) ---------- */
.growth { height: 260vh; }
.growth-sticky { position: sticky; top: 72px; height: calc(100vh - 72px); height: calc(100svh - 72px); display: grid; align-items: center; }
.growth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.growth-copy { display: grid; gap: 22px; justify-items: start; }
.skills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.skills li { padding: 9px 18px; border: 1px solid var(--edge); border-radius: 999px; background: var(--glass); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.growth-art { display: grid; justify-items: center; gap: 16px; }
.plant { position: relative; width: min(100%, 460px); aspect-ratio: 1; }
.plant::before { position: absolute; inset: 20% 18% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(110, 147, 240, .16), transparent 68%); filter: blur(10px); content: ""; }
.plant img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .9s var(--ease), transform 1.2s var(--ease); }
.plant img.is-active { opacity: 1; transform: none; }
.growth-rail { display: flex; gap: clamp(18px, 4vw, 38px); color: var(--faint); font-family: var(--serif); font-size: 15px; }
.growth-rail li { display: grid; justify-items: center; gap: 8px; transition: color .5s var(--ease); }
.growth-rail i { width: 8px; height: 8px; border: 1px solid var(--line-bright); border-radius: 50%; transition: background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.growth-rail li.is-active { color: var(--ink); }
.growth-rail li.is-active i { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 12px var(--glow); }
.rail-label { color: var(--faint); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Privacy ---------- */
.privacy { padding: 120px 0 100px; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 50px 0 34px; }
.promise { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 28px; border: 1px solid var(--edge); border-radius: 24px; background: var(--glass); transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.promise:hover { border-color: var(--line-bright); box-shadow: 0 0 34px rgba(110, 147, 240, .14); }
.promise svg { width: 34px; height: 34px; margin-bottom: 8px; fill: none; stroke: var(--moon); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(110, 147, 240, .5)); }
.promise h3 { font-size: 21px; }
.promise p { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- Download ---------- */
.download { position: relative; padding: 150px 0 290px; overflow: hidden; text-align: center; }
.horizon {
  position: absolute; left: 50%; bottom: calc(-240vw + 210px); width: 240vw; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 50% 0%, rgba(110, 147, 240, .16), rgba(110, 147, 240, .04) 6%, transparent 14%), var(--deep);
  box-shadow: 0 -1px 0 rgba(200, 217, 255, .32), 0 -24px 80px rgba(110, 147, 240, .18);
}
.download-inner { position: relative; display: grid; justify-items: center; gap: 20px; }
.download-mark { width: 64px; height: 64px; filter: drop-shadow(0 0 22px rgba(110, 147, 240, .45)); }
.download .section-sub { max-width: 460px; }
.store-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
.store { display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 24px 0 20px; border: 1.2px solid rgba(243, 246, 252, .7); border-radius: 16px; background: var(--surface); box-shadow: 0 0 26px rgba(110, 147, 240, .2); text-align: left; }
.store svg { width: 24px; height: 24px; fill: var(--ink); }
.store span { display: grid; font-family: var(--serif); font-size: 19px; line-height: 1.15; }
.store small { color: var(--faint); font-family: var(--sans); font-size: 11px; letter-spacing: .04em; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: rgba(1, 2, 6, .7); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; min-height: 96px; padding: 22px 0; }
.site-footer nav a { font-size: 14px; }
.copyright { color: var(--faint); font-size: 13px; }

/* ---------- Legal pages ---------- */
.legal { max-width: 760px; padding: 80px 0 110px; }
.legal .eyebrow { margin-bottom: 20px; }
.legal h1 { margin-bottom: 26px; font-size: clamp(42px, 6vw, 68px); }
.legal h2 { margin: 48px 0 14px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
.legal p:not(.eyebrow), .legal li { color: var(--muted); font-size: 17px; line-height: 1.8; }
.legal a:not(.btn) { color: var(--accent); text-underline-offset: 3px; text-decoration-color: rgba(220, 231, 255, .35); }
.legal a:not(.btn):hover { text-decoration-color: var(--accent); }
.legal p.lede { max-width: 700px; margin-bottom: 24px; color: var(--ink); font-size: 20px; }
.legal .btn { margin-top: 32px; }
.notice { margin: 0 0 26px; padding: 18px 22px; border: 1px solid var(--edge); border-radius: 20px; color: var(--muted); background: var(--glass); font-size: 16px; line-height: 1.7; }
.legal .notice + p { color: var(--faint); font-size: 14px; }

/* ---------- Motion ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes ripple { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes wave { to { transform: scaleY(1); } }
@keyframes timer { to { transform: scaleX(1); } }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-grid { grid-template-columns: 1fr; }
  .cp-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .cp-list::-webkit-scrollbar { display: none; }
  .cp-tab { width: auto; flex: 0 0 auto; }
  .cp-tab span { display: none; }
}
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .nav-link { display: none; }
  /* Mobile hero mirrors the app's Home: moon floats top-right, words sit at the bottom of the first screen. */
  .hero { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); padding: 0 0 40px; align-items: end; }
  .hero-moon { top: 2vh; right: -12vw; width: min(64vw, 420px); }
  .hero-copy { position: relative; }
  .story-grid { grid-template-columns: 1fr; }
  .story-stage { display: none; }
  .story-step { min-height: 0; padding: 40px 0 40px 36px; opacity: 1; }
  .step-num::before { left: -31px; }
  .step-shot { display: block; margin-top: 18px; }
  .step-shot .phone { --k: .66; }
  .growth { height: 240vh; }
  .growth-grid { grid-template-columns: 1fr; gap: 10px; }
  .growth-copy { gap: 14px; }
  .growth-copy .section-sub { font-size: 16px; }
  .plant { width: min(62vw, 300px, 30vh); }
  .growth-art { gap: 8px; }
  .growth-copy h2 { font-size: clamp(28px, 8vw, 38px); }
  .skills { gap: 8px; }
  .skills li { padding: 6px 14px; font-size: 15px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .header-row { min-height: 64px; }
  .brand span { font-size: 11px; }
  .nav-cta { padding: 7px 14px; font-size: 13px; }
  .hero { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding-bottom: 28px; }
  .hero-moon { top: 1vh; right: -8vw; width: max(64vw, min(90vw, 38vh)); }
  .hero-copy { gap: 16px; }
  .hero .eyebrow { font-size: 10.5px; letter-spacing: .16em; }
  h1 { font-size: clamp(34px, 10.2vw, 46px); line-height: 1.06; }
  .lede { font-size: 16.5px; line-height: 1.55; }
  .hero-actions { width: 100%; flex-direction: column; gap: 14px; margin-top: 4px; }
  .hero-actions .btn { width: 100%; }
  .hero-facts { gap: 6px 16px; font-size: 12.5px; }
  .growth-copy .section-sub { font-size: 15px; line-height: 1.55; }
  .scroll-cue { display: none; }
  .br-wide { display: none; }
  h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .growth-sticky { top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); }
  .horizon { bottom: calc(-240vw + 70px); }
  .moments { padding: 70px 0 80px; }
  .marquee { margin-top: 36px; }
  .marquee li { padding: 12px 20px 12px 14px; border-radius: 18px; }
  .marquee img { width: 34px; height: 34px; }
  .marquee span { font-size: 16px; }
  .custom-note { align-items: flex-start; padding: 18px; }
  .custom-note .plus { width: 36px; height: 36px; }
  .story { padding-top: 60px; }
  .story-step > p:not(.eyebrow) { font-size: 16px; }
  .counterparts { padding: 80px 0; }
  .cp-card { border-radius: 24px; gap: 20px; }
  .cp-avatar { width: 60px; height: 60px; }
  .cp-initial { font-size: 26px; }
  .cp-name { font-size: 28px; }
  .cp-summary { font-size: 16px; }
  .promises { grid-template-columns: 1fr; }
  .privacy { padding: 80px 0 70px; }
  .download { padding: 100px 0 150px; }
  .rail-label { display: none; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .legal { padding: 50px 0 80px; }
  .legal p:not(.eyebrow), .legal li { font-size: 16px; }
}
@media (max-width: 370px) {
  .step-shot .phone { --k: .58; }
  .story-step { padding-left: 30px; }
  .step-num::before { left: -25px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { overflow-x: auto; }
}