/* Queen Seas — dark editorial. Near-black navy, ivory type, steel-blue accent, light geometric sans. */
:root {
  --bg: #0a0d11;
  --ink: #ece9e4;
  --soft: #b9bfc7;
  --dim: #8c95a0;
  --accent: #8fb0da;
  --rule: #2a3440;
  --ivory: #ece8e1;

  --sans: "Jost", system-ui, -apple-system, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --container: 1240px;
  --gutter: 40px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--accent);
}
::selection { background: #2a3a50; color: #fff; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 400; margin: 0; letter-spacing: -0.025em; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.accent { color: var(--accent); }

.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--soft); margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 50px; padding: 0 28px; border-radius: 2px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color 200ms, border-color 200ms, color 200ms, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn .arr { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease-out); }

.btn-light { background: var(--ivory); color: #12161c; }
.btn-light:hover { background: #fff; }
.btn-ghost { border-color: rgba(236,233,228,.32); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; height: 54px; }
.btn:disabled { opacity: .6; cursor: progress; }

/* Brand */
.brand { display: inline-flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.brand-name { font-family: var(--serif); font-weight: 500; font-size: 24px; letter-spacing: .16em; text-transform: uppercase; }
.brand-tag { font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase; color: var(--soft); margin-top: 7px; }

/* Nav */
.nav { position: absolute; inset: 0 0 auto; z-index: 10; }
.nav-inner { display: flex; align-items: center; gap: 44px; height: 108px; }
.nav-links { display: flex; gap: 40px; margin-left: auto; }
.nav-links a { font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); padding: 12px 0; transition: color 200ms; }
.nav-links a:hover { color: var(--ink); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 290px 0 200px; }
.planet {
  position: absolute; width: 1300px; height: 1300px; border-radius: 50%;
  left: calc(50% + 215px); top: 220px;
  background: radial-gradient(circle at 32% 30%, rgba(46, 78, 120, .22), rgba(10, 13, 17, 0) 55%);
  box-shadow:
    inset 18px 14px 20px -12px rgba(180, 218, 255, 1),
    inset 110px 70px 180px -70px rgba(80, 135, 210, .55),
    -40px -40px 180px -40px rgba(80, 145, 230, .55);
  pointer-events: none;
}
.hero-inner { position: relative; }
.line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line > span { display: inline-block; }
.planet-wrap { position: absolute; inset: 0; pointer-events: none; }
.planet-wrap .layer { position: absolute; inset: 0; will-change: transform; }
.stars, .stars::after { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; }
.stars { box-shadow: 1043px 154px rgba(236,233,228,0.7), 478px 74px rgba(236,233,228,0.25), 1128px 596px rgba(236,233,228,0.25), 1419px 219px rgba(236,233,228,0.25), 556px 444px rgba(236,233,228,0.7), 523px 246px rgba(236,233,228,0.25), 1249px 60px rgba(236,233,228,0.25), 837px 645px rgba(236,233,228,0.25), 1192px 50px rgba(236,233,228,0.35), 475px 570px rgba(236,233,228,0.35), 973px 429px rgba(236,233,228,0.35), 1487px 120px rgba(236,233,228,0.5), 750px 105px rgba(236,233,228,0.35), 1142px 99px rgba(236,233,228,0.25), 502px 633px rgba(236,233,228,0.35), 1396px 696px rgba(236,233,228,0.7), 1023px 476px rgba(236,233,228,0.7), 1120px 306px rgba(236,233,228,0.35), 748px 715px rgba(236,233,228,0.35), 547px 588px rgba(236,233,228,0.5), 1455px 506px rgba(236,233,228,0.5), 1299px 294px rgba(236,233,228,0.25), 621px 524px rgba(236,233,228,0.7), 717px 775px rgba(236,233,228,0.5), 691px 500px rgba(236,233,228,0.7), 460px 684px rgba(236,233,228,0.25), 1022px 348px rgba(236,233,228,0.5), 1397px 593px rgba(236,233,228,0.7), 520px 860px rgba(236,233,228,0.25), 932px 485px rgba(236,233,228,0.25), 504px 748px rgba(236,233,228,0.5), 1292px 291px rgba(236,233,228,0.7), 1090px 23px rgba(236,233,228,0.7), 1107px 172px rgba(236,233,228,0.25); }
.stars::after { content: ""; box-shadow: 1391px 60px rgba(236,233,228,0.35), 968px 132px rgba(236,233,228,0.35), 1194px 400px rgba(236,233,228,0.7), 545px 170px rgba(236,233,228,0.7), 1202px 562px rgba(236,233,228,0.5), 660px 838px rgba(236,233,228,0.7), 950px 723px rgba(236,233,228,0.7), 1114px 699px rgba(236,233,228,0.7), 852px 154px rgba(236,233,228,0.25), 740px 154px rgba(236,233,228,0.35), 857px 12px rgba(236,233,228,0.7), 753px 269px rgba(236,233,228,0.5), 388px 149px rgba(236,233,228,0.7), 1474px 378px rgba(236,233,228,0.5), 637px 707px rgba(236,233,228,0.25), 1315px 891px rgba(236,233,228,0.7), 1195px 408px rgba(236,233,228,0.7), 592px 493px rgba(236,233,228,0.7), 507px 195px rgba(236,233,228,0.25), 807px 451px rgba(236,233,228,0.35), 605px 348px rgba(236,233,228,0.25), 589px 0px rgba(236,233,228,0.35), 1478px 103px rgba(236,233,228,0.5), 432px 72px rgba(236,233,228,0.35), 1150px 152px rgba(236,233,228,0.5), 1091px 616px rgba(236,233,228,0.5); }
.hero .eyebrow { color: var(--accent); }
.hero h1 { font-weight: 500; letter-spacing: -0.035em; font-size: clamp(32px, 5.52vw, 80px); line-height: 1.06; margin-top: 34px; }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink); max-width: 27em; margin-top: 36px; }
.actions { display: flex; align-items: center; gap: 0 36px; margin-top: 54px; flex-wrap: wrap; }
.play { display: inline-flex; align-items: center; gap: 18px; font-size: 15px; font-weight: 400; color: var(--ink); }
.play-icon { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(236,233,228,.45); display: grid; place-items: center; transition: border-color 200ms, background-color 200ms; }
.play-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.play:hover .play-icon { border-color: var(--ink); background: rgba(236,233,228,.06); }

/* Hero reserve form: email and action on one line. */
.hero-form { display: flex; flex-wrap: wrap; width: min(100%, 560px); }
.hero-form .field { flex: 1 1 240px; }
.hero-form .field input { height: 50px; padding: 0 18px; border-right: 0; border-radius: 2px 0 0 2px; }
.hero-form .btn { flex: none; border-radius: 0 2px 2px 0; }
.hero-form .form-msg { flex-basis: 100%; }
.hero-reserved { width: min(100%, 560px); font-size: 16px; color: var(--soft); }
.hero-reserved strong { font-weight: 400; color: var(--ink); word-break: break-all; }

/* Hero credibility strip: four facts in hairline-divided cells. */
.trust {
  order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  margin: 34px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); max-width: 900px;
}
.cell { padding: 0 28px; border-left: 1px solid var(--rule); }
.cell:first-child { padding-left: 0; border-left: 0; }
.cell dt { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); }
.cell dd { margin: 7px 0 0; font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cell dd a, .copyright a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(127,156,192,.6); text-underline-offset: 3px; transition: text-decoration-color 200ms, color 200ms; }
.cell dd a:hover, .copyright a:hover { color: #fff; text-decoration-color: var(--accent); }
.pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* How it works */
.how .wrap { position: relative; padding-top: 110px; padding-bottom: 120px; }
.how-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 72px; }
.how-head .eyebrow { color: var(--ink); }
.how-tag { font-size: 11px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.steps li { padding: 0 56px 0 0; }
.steps li + li { position: relative; padding-left: 56px; }
.steps li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); transform-origin: top; }
.num { display: flex; align-items: center; gap: 28px; font-size: 52px; line-height: 1; font-weight: 500; letter-spacing: -0.04em; color: var(--accent); font-variant-numeric: lining-nums; }
.num::after { content: ""; flex: 1 1 auto; margin-right: 8%; height: 1px; background: rgba(127, 156, 192, .45); }
.steps h3 { font-size: 27px; margin: 44px 0 24px; color: var(--ink); }
.steps p { font-size: 16px; line-height: 1.6; color: var(--ink); opacity: .82; max-width: 22em; }

/* Section rules: drawn as pseudo-elements so they can animate in. */
.how .wrap::before, .founding .wrap::before, .footer .wrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left center;
}

/* Founding */
.founding { position: relative; overflow: hidden; }
.founding-glow {
  position: absolute; left: -10%; top: 0; width: 70%; height: 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 45% at 40% 50%, rgba(56, 96, 150, .16), rgba(10, 13, 17, 0) 70%);
}
.founding .wrap { z-index: 1; }
.num-mask { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.num-mask > span { display: inline-block; }
.how-tag .w { display: inline-block; }
.founding .wrap { position: relative; }
.founding-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding-top: 110px; padding-bottom: 120px; }
.founding-copy { position: relative; padding-right: 64px; }
.founding-copy::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); transform-origin: top; }
.founding .eyebrow { color: var(--accent); }
.founding h2 { font-weight: 500; letter-spacing: -0.035em; font-size: clamp(29px, 4.64vw, 65.5px); line-height: 1.12; margin-top: 30px; }
.founding h2 em { font-style: italic; }
.founding-copy > p:not(.eyebrow) { font-size: 16px; line-height: 1.7; color: var(--ink); opacity: .85; max-width: 32em; margin-top: 28px; }
.reserve { padding-left: 64px; align-self: center; }
.field { position: relative; display: block; }
.field input {
  width: 100%; height: 56px; padding: 0 52px 0 20px;
  background: transparent; color: var(--ink); border: 1px solid rgba(236,233,228,.28); border-radius: 2px;
  font-family: var(--sans); font-size: 16px; font-weight: 300; outline: none;
  transition: border-color 200ms, box-shadow 200ms;
}
.field input::placeholder { color: var(--soft); }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(127, 156, 192, .14); }
.field svg { position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--soft); stroke-width: 1.3; stroke-linejoin: round; pointer-events: none; }
.field.invalid input { border-color: #d98b82; }
.form-msg { font-size: 13px; margin: 0; }
.form-msg:not(:empty) { margin-top: 10px; }
.form-msg.err { color: #eba59c; }
.reserve .btn { margin-top: 16px; }
.fine { display: flex; gap: 18px; align-items: flex-start; margin-top: 30px; font-size: 12px; line-height: 1.6; color: var(--soft); }
.fine svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--soft); stroke-width: 1.3; }
.fine a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(163,170,179,.5); }
.reserved { outline: none; }
.reserved h3 { font-size: 24px; }
.reserved p { margin-top: 14px; font-size: 15px; color: var(--soft); }
.reserved strong { font-weight: 400; color: var(--accent); word-break: break-all; }

/* Footer */
.footer .wrap { position: relative; }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; padding-top: 56px; padding-bottom: 64px; }
.footer .brand-name { font-size: 21px; }
.footer .brand-tag { font-size: 11px; }
.footer-links { display: flex; gap: 40px; }
.footer-links a { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); padding: 14px 0; transition: color 200ms; }
.footer-links a:hover { color: var(--ink); }
.copyright { justify-self: end; text-align: right; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.8; color: var(--soft); }

/* Privacy page */
.doc { padding: 180px 0 120px; }
.doc-inner { max-width: 680px; }
.doc h1 { font-size: clamp(29px, 3.68vw, 45px); line-height: 1.1; }
.doc-updated { font-size: 11px; color: var(--dim); margin: 14px 0 44px; }
.doc h2 { font-size: 17.5px; font-weight: 400; margin: 44px 0 12px; }
.doc p, .doc li { font-size: 15px; line-height: 1.75; color: var(--soft); }
.doc p + p { margin-top: 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.doc-back { margin-top: 52px !important; font-size: 13px !important; }

/* Tablet */
@media (max-width: 980px) {
  :root { --gutter: 32px; }
  .nav-links a:not(.nav-login) { display: none; }
  .hero { padding: 200px 0 120px; }
  .planet { width: 900px; height: 900px; left: calc(50% + 170px); top: 120px; }
  .lede { max-width: 19em; }
  .steps { grid-template-columns: 1fr; gap: 56px; }
  .steps li, .steps li + li { padding: 0; }
  .steps li + li::before, .founding-copy::after { display: none; }
  .founding-inner { grid-template-columns: 1fr; gap: 56px; }
  .founding-copy { padding-right: 0; }
  .reserve { padding-left: 0; max-width: 480px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: start; gap: 20px; }
  .copyright { justify-self: start; text-align: left; }
}

/* Phone */
@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .nav-inner { height: 80px; gap: 16px; }
  .brand-name { font-size: 15px; }
  .brand-tag { font-size: 11px; letter-spacing: .24em; }
  .nav-links { gap: 20px; }
  .hide-sm { display: none; }
  .nav .btn-ghost { height: 42px; padding: 0 14px; letter-spacing: .14em; font-size: 11px; }
  .nav-links a { font-size: 11px; }
  .eyebrow, .how-tag { font-size: 11px; }
  .btn { font-size: 11px; height: 52px; }
  .play { font-size: 12px; }
  .play-icon { width: 48px; height: 48px; }
  .steps h3 { font-size: 22.5px; }
  .steps p, .founding-copy > p:not(.eyebrow) { font-size: 15px; }
  .fine { font-size: 11px; }
  .footer-links a, .copyright { font-size: 11px; }
  .nav-inner { height: 80px; }
  .nav .btn-ghost .arr { display: none; }
  .hero { padding: 150px 0 96px; }
  .planet { width: 560px; height: 560px; left: 58%; top: 440px; }
  .lede { max-width: none; }
  .hero h1 { font-size: 30.5px; }
  .lede { font-size: 15px; }
  .hero-form .field { flex-basis: 100%; }
  .hero-form .field input { border-right: 1px solid rgba(236,233,228,.28); border-radius: 2px; height: 54px; }
  .hero-form .btn { width: 100%; height: 52px; margin-top: 10px; border-radius: 2px; }
  .actions .play { margin-top: 22px; }
  .trust { position: relative; z-index: 1; grid-template-columns: 1fr 1fr; justify-content: stretch; row-gap: 16px; margin-top: 30px; padding-bottom: 6px; background: rgba(10, 13, 17, .86); box-shadow: 0 0 0 20px rgba(10, 13, 17, .86); }
  .cell { padding: 0 0 0 16px; }
  .cell:nth-child(odd) { padding-left: 0; border-left: 0; }
  .cell:nth-child(3) { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--rule); }
  .cell dd { white-space: normal; }
  .how .wrap { padding-top: 72px; padding-bottom: 80px; }
  .how-head { flex-direction: column; gap: 10px; margin-bottom: 48px; }
  .founding-inner { padding-top: 72px; padding-bottom: 80px; }
  .founding h2 { font-size: 29px; }
  .footer-links { gap: 28px; }
}

/* Motion — marketing page seen rarely: entrances and ambient delight are in budget.
   Hidden start states apply only with JS and without a reduced-motion preference. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lineUp { from { transform: translateY(110%); } to { transform: none; } }
@keyframes navIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes planetIn { from { opacity: 0; transform: translate(40px, 60px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes breathe { from { opacity: .82; } to { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Load: nav, headline lines out of their masks, then the rest of the hero. */
  .js .nav { animation: navIn 700ms var(--ease-out) both; }
  .js .hero .line > span { animation: lineUp 1100ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .js .rise { animation: rise 900ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  .js .planet { animation: planetIn 1800ms var(--ease-out) 150ms both, breathe 6s ease-in-out 2s infinite alternate; }
  .js .stars { animation: fade 2400ms ease-out 600ms both, twinkle 7s ease-in-out 3s infinite; }
  .js .stars::after { animation: twinkle 5s ease-in-out 1s infinite; }


  /* Section reveals, once each. */
  .js [data-reveal] .r { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in .r { opacity: 1; transform: none; }
  .js .how [data-reveal]::before, .js .founding [data-reveal]::before, .js .footer [data-reveal]::before { transform: scaleX(0); transition: transform 1400ms var(--ease-in-out); }
  .js [data-reveal].is-in::before { transform: scaleX(1); }

  
  .js .steps li:nth-child(1) { --d: 200ms; }
  .js .steps li:nth-child(2) { --d: 320ms; }
  .js .steps li:nth-child(3) { --d: 440ms; }
  .js [data-reveal] .num::after { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease-in-out) calc(var(--d) + 300ms); }
  .js [data-reveal].is-in .num::after { transform: scaleX(1); }
  .js [data-reveal] .steps li + li::before, .js [data-reveal] .founding-copy::after { transform: scaleY(0); transition: transform 1200ms var(--ease-in-out) 300ms; }
  .js [data-reveal].is-in .steps li + li::before, .js [data-reveal].is-in .founding-copy::after { transform: scaleY(1); }

  .js .founding .line > span { transform: translateY(110%); transition: transform 1100ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js .founding [data-reveal].is-in .line > span { transform: none; }

  

  /* Section choreography: labels wipe in, words and numbers arrive in turn,
     titles focus out of a soft blur, and a glint travels each rule once. */
  .js [data-reveal] .wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1000ms var(--ease-in-out) 150ms; }
  .js [data-reveal].is-in .wipe { clip-path: inset(0 -2% 0 0); }

  .js [data-reveal] .how-tag .w { opacity: 0; transform: translateY(8px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d); }
  .js [data-reveal].is-in .how-tag .w { opacity: 1; transform: none; }

  .js [data-reveal] .num-mask > span { transform: translateY(110%); transition: transform 900ms var(--ease-out) var(--d); }
  .js [data-reveal].is-in .num-mask > span { transform: none; }
  .js [data-reveal] .steps h3 { opacity: 0; filter: blur(6px); transform: translateY(12px); transition: opacity 900ms var(--ease-out), filter 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--d) + 180ms); }
  .js [data-reveal] .steps p { opacity: 0; transform: translateY(12px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--d) + 300ms); }
  .js [data-reveal].is-in .steps h3, .js [data-reveal].is-in .steps p { opacity: 1; filter: none; transform: none; }

  .js [data-reveal] .f { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in .f { opacity: 1; transform: none; }

  .js .founding-glow { opacity: 0; transform: scale(.85); transition: opacity 2000ms var(--ease-out) 200ms, transform 2400ms var(--ease-out) 200ms; }
  .js .founding:has(.is-in) .founding-glow { opacity: 1; transform: none; }

  .how .wrap::after, .founding .wrap::after, .footer .wrap::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none; opacity: 0;
    background: linear-gradient(90deg, rgba(150, 190, 235, 0), rgba(150, 190, 235, .95), rgba(150, 190, 235, 0)) no-repeat;
    background-size: 220px 1px; background-position: -220px 0;
  }
  .js [data-reveal].is-in::after { animation: glint 1800ms var(--ease-in-out) 900ms both; }
  @keyframes glint { 0% { opacity: 0; background-position: -220px 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; background-position: calc(100% + 220px) 0; } }

  .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 2.4s var(--ease-out) 1.4s infinite; }
  @keyframes ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

  /* Feedback. */
  .btn .arr { transition: transform 200ms var(--ease-out); }
  .play-icon svg { transition: transform 200ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover .arr { transform: translateX(4px); }
    .play:hover .play-icon svg { transform: translateY(3px); }
  }

  .reserved:not([hidden]) { animation: rise 600ms var(--ease-out) both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Gentler: content and rules simply fade in; no travel, no drawing, no ambient loops. */
  .js .rise, .js .hero .line > span { animation: fade 500ms ease-out both; }
  .js [data-reveal] .r, .js [data-reveal] .f, .js [data-reveal] .steps h3, .js [data-reveal] .steps p, .js [data-reveal] .wipe, .js .founding .line > span { opacity: 0; transition: opacity 500ms ease-out; }
  .js [data-reveal].is-in .r, .js [data-reveal].is-in .f, .js [data-reveal].is-in .steps h3, .js [data-reveal].is-in .steps p, .js [data-reveal].is-in .wipe, .js .founding [data-reveal].is-in .line > span { opacity: 1; }
  .reserved:not([hidden]) { animation: fade 300ms ease-out both; }
}