:root {
  --night: #12141c;
  --night-deep: #0b0d13;
  --amber: #f59e0b;
  --amber-deep: #b45309;
  --cream: #f5f0e8;
  --cream-dim: rgba(245, 240, 232, .62);
  --line: rgba(245, 240, 232, .14);
  --display: "Space Grotesk", sans-serif;
  --body: "Instrument Sans", sans-serif;
  --page-pad: clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--cream); font-family: var(--body); overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--page-pad); transition: background .35s ease, backdrop-filter .35s ease; }
.site-header.is-scrolled { background: rgba(11, 13, 19, .78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.wordmark { font-family: var(--display); font-weight: 500; font-size: 1.5rem; letter-spacing: .01em; line-height: 1; display: inline-flex; align-items: baseline; gap: .3rem; }
.wordmark__dot { width: .55em; height: .28em; border-radius: .3em .3em 0 0; background: var(--amber); align-self: end; margin-bottom: .12em; }
.site-nav { display: flex; gap: 1.6rem; font-size: .95rem; color: var(--cream-dim); }
.site-nav a:hover { color: var(--cream); }

.button { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border: 0; border-radius: 999px; background: var(--amber); color: #1a1206; font-family: var(--display); font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.button:hover { background: #fbbf24; transform: translateY(-1px); }
.button--small { padding: .55rem 1.1rem; font-size: .85rem; }
.text-link { border-bottom: 1px solid var(--line); padding-bottom: .15rem; color: var(--cream-dim); }
.text-link:hover { color: var(--cream); }

.eyebrow { margin: 0 0 1.2rem; font-family: var(--display); font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); }
.eyebrow--amber { color: var(--amber); }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.65,.25,1), transform .8s cubic-bezier(.2,.65,.25,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { --hero-p: 0; position: relative; height: 210svh; }
.hero__sticky { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; padding: 6rem var(--page-pad) 4rem; overflow: clip; }

.hero__sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #12141c 0%, #1b1a26 42%, #3a2417 78%, #52250e 100%); }
.hero__sky::after { content: ""; position: absolute; inset: 0; background: var(--night-deep); opacity: calc(var(--hero-p) * .92); transition: none; }
.hero__stars { position: absolute; inset: 0 0 30% 0; opacity: calc(var(--hero-p) * 1.2 - .15); background-image: radial-gradient(1.5px 1.5px at 12% 22%, rgba(245,240,232,.9), transparent), radial-gradient(1px 1px at 34% 12%, rgba(245,240,232,.7), transparent), radial-gradient(1.5px 1.5px at 58% 28%, rgba(245,240,232,.8), transparent), radial-gradient(1px 1px at 73% 8%, rgba(245,240,232,.75), transparent), radial-gradient(1.5px 1.5px at 88% 20%, rgba(245,240,232,.85), transparent), radial-gradient(1px 1px at 45% 38%, rgba(245,240,232,.5), transparent), radial-gradient(1px 1px at 21% 45%, rgba(245,240,232,.55), transparent), radial-gradient(1.5px 1.5px at 66% 43%, rgba(245,240,232,.6), transparent); }
.hero__sun { position: absolute; left: 72%; bottom: 24%; width: min(26vw, 20rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #fcd34d 0%, var(--amber) 45%, #ea7c0c 78%, var(--amber-deep) 100%); transform: translate(-50%, calc(var(--hero-p) * 130%)); filter: saturate(calc(1.05 - var(--hero-p) * .3)); }
.hero__glow { position: absolute; left: 50%; bottom: 10%; width: min(90vw, 70rem); aspect-ratio: 2 / 1; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 100%, rgba(245, 158, 11, calc(.5 - var(--hero-p) * .32)) 0%, transparent 62%); }
.hero__horizon { position: absolute; left: 0; right: 0; bottom: 24%; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 240, 232, calc(.5 - var(--hero-p) * .25)), transparent); }
.hero__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(180deg, #0d0e15 0%, var(--night-deep) 100%); }

.hero__copy { position: relative; z-index: 1; max-width: 52rem; }
.hero h1 { margin: 0 0 1.6rem; font-family: var(--display); font-weight: 500; font-size: clamp(3.4rem, 9vw, 8.2rem); line-height: .96; letter-spacing: -.035em; }
.hero-line { display: block; }
.hero-line--amber { color: var(--amber); }
.hero__lede { max-width: 30rem; margin: 0 0 2.2rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--cream-dim); }
.hero__actions { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

.scroll-cue { position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); display: grid; justify-items: center; gap: .6rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-dim); }
.scroll-cue i { width: 1px; height: 3rem; background: linear-gradient(180deg, var(--amber), transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); } }

/* ---------- ticker ---------- */
.ticker { overflow: clip; border-block: 1px solid var(--line); background: var(--night-deep); }
.ticker__track { width: max-content; display: flex; align-items: center; gap: 2.4rem; padding: 1rem 0; font-family: var(--display); font-size: 1.15rem; letter-spacing: .05em; color: var(--cream-dim); animation: ticker 26s linear infinite; }
.ticker__track b { color: var(--amber); font-size: .7rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- problem ---------- */
.problem { --problem-p: 0; height: 300vh; background: var(--night-deep); }
.problem__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, .95fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: 6rem var(--page-pad) 3rem; overflow: clip; }
.problem h2, .how h2, .ritual h2, .tease h2, .waitlist h2 { margin: 0 0 2rem; font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: 1; letter-spacing: -.03em; }
.problem h2 em, .how h2 em, .waitlist h2 em { font-style: normal; color: var(--amber); }

.problem-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1rem; max-width: 30rem; }
.problem-steps li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .9rem; opacity: .35; transition: opacity .4s ease, border-color .4s ease, background .4s ease; }
.problem-steps li.is-active { opacity: 1; border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .05); }
.problem-steps span { font-family: var(--display); color: var(--amber); font-size: 1rem; }
.problem-steps p { margin: 0; display: grid; gap: .25rem; }
.problem-steps strong { font-size: 1.05rem; }
.problem-steps small { color: var(--cream-dim); font-size: .9rem; line-height: 1.45; }

.problem__stage { position: relative; display: grid; justify-items: center; }
.phone { position: relative; width: min(15rem, 34vw); aspect-ratio: 9 / 18; border: 2px solid rgba(245, 240, 232, .25); border-radius: 2.2rem; padding: .6rem; transform: rotate(calc(-4deg + var(--problem-p) * 8deg)); }
.phone__screen { width: 100%; height: 100%; border-radius: 1.6rem; background: linear-gradient(200deg, #7dd3fc 0%, #38bdf8 35%, #2563eb 100%); opacity: calc(.75 + var(--problem-p) * .25); }
.phone__glow { position: absolute; inset: -42%; z-index: -1; background: radial-gradient(circle, rgba(56, 189, 248, calc(.28 + var(--problem-p) * .3)) 0%, transparent 60%); }
.problem__clock { margin-top: 1.6rem; text-align: center; }
.problem__clock b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(2.4rem, 4vw, 3.6rem); font-variant-numeric: tabular-nums; }
.problem__clock small { color: var(--cream-dim); letter-spacing: .08em; }

/* ---------- how ---------- */
.how { --how-p: 0; height: 320vh; background: var(--night); }
.how__sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(18rem, .95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); padding: 6rem var(--page-pad) 3rem; overflow: clip; }

.how__stage { position: relative; height: min(70svh, 34rem); display: grid; place-items: center; }
.how__screenlight { position: absolute; inset: 8% 6%; border-radius: 1.4rem; background: linear-gradient(210deg, #7dd3fc, #2563eb 70%); overflow: hidden; }
.how__screenlight::after { content: ""; position: absolute; inset: 0; background: linear-gradient(210deg, #fcd34d, var(--amber) 55%, var(--amber-deep)); opacity: var(--how-p); }
.how__lens { position: absolute; width: min(56%, 17rem); aspect-ratio: 1; left: calc(6% + var(--how-p) * 38%); top: 50%; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 38% 32%, rgba(252, 211, 77, .5), rgba(180, 83, 9, .55) 70%); backdrop-filter: blur(2px) saturate(1.3); border: 3px solid rgba(245, 240, 232, .8); box-shadow: 0 1.4rem 4rem rgba(0, 0, 0, .45); }
.how__lens-ring { position: absolute; inset: -14%; border: 1px dashed rgba(245, 240, 232, .25); border-radius: 50%; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.how__label { position: absolute; left: 50%; bottom: -.6rem; transform: translateX(-50%); display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem; min-width: 15rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(11, 13, 19, .9); backdrop-filter: blur(10px); }
.how__label b { grid-row: 1 / 3; font-family: var(--display); font-weight: 500; font-size: 1.7rem; color: var(--amber); }
.how__label strong { font-family: var(--display); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.how__label small { color: var(--cream-dim); font-size: .82rem; }

.how__body { max-width: 30rem; margin: 0 0 2.4rem; color: var(--cream-dim); line-height: 1.6; font-size: 1.08rem; }
.how__specs { display: grid; grid-template-columns: repeat(3, auto); gap: 2.4rem; margin: 0; justify-content: start; }
.how__specs dt { font-family: var(--display); font-weight: 500; font-size: 1.7rem; color: var(--amber); }
.how__specs dd { margin: .3rem 0 0; max-width: 9rem; font-size: .85rem; color: var(--cream-dim); line-height: 1.4; }

/* ---------- ritual ---------- */
.ritual { padding: clamp(5rem, 12vh, 9rem) var(--page-pad); background: var(--night-deep); }
.ritual-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.ritual-grid article { padding: 2rem 1.8rem 2.2rem; border: 1px solid var(--line); border-radius: 1.1rem; background: rgba(245, 240, 232, .02); transition-delay: calc(var(--stagger, 0) * 120ms); }
.ritual-grid span { font-family: var(--display); color: var(--amber); }
.ritual-grid h3 { margin: .7rem 0 .6rem; font-family: var(--display); font-weight: 500; font-size: 1.7rem; letter-spacing: -.01em; }
.ritual-grid p { margin: 0; color: var(--cream-dim); line-height: 1.55; }

/* ---------- tease ---------- */
.tease { position: relative; padding: clamp(6rem, 14vh, 10rem) var(--page-pad); text-align: center; overflow: clip; background: var(--night); }
.tease__glow { position: absolute; left: 50%; top: 0; width: min(80vw, 60rem); aspect-ratio: 2/1; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, .12), transparent 65%); }
.tease__frame { width: min(34rem, 78vw); margin: 0 auto 2.6rem; color: var(--cream); opacity: .92; }
.tease__body { margin: 0 auto; max-width: 26rem; color: var(--cream-dim); line-height: 1.55; }

/* ---------- waitlist ---------- */
.waitlist { position: relative; padding: clamp(6rem, 16vh, 11rem) var(--page-pad); text-align: center; background: var(--night-deep); overflow: clip; }
.waitlist__sun { position: absolute; left: 50%; bottom: -18vw; width: 36vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 45% 35%, #fcd34d, var(--amber) 55%, var(--amber-deep)); opacity: .16; filter: blur(6px); }
.waitlist__body { margin: 0 auto 2.4rem; max-width: 24rem; color: var(--cream-dim); }
.waitlist-form { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.waitlist-form input { width: min(22rem, 72vw); padding: .9rem 1.3rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(245, 240, 232, .04); color: var(--cream); font-family: var(--body); font-size: 1rem; outline: none; transition: border-color .25s ease; }
.waitlist-form input:focus { border-color: var(--amber); }
.waitlist-note { margin: 1.4rem 0 0; font-size: .85rem; color: var(--cream-dim); }
.waitlist-note.is-success { color: var(--amber); }
.waitlist-note.is-error { color: #f87171; }

/* ---------- footer ---------- */
.site-footer { padding: 3.4rem var(--page-pad) 2.6rem; border-top: 1px solid var(--line); display: grid; gap: .5rem; background: var(--night-deep); }
.wordmark--footer { font-size: 1.9rem; }
.site-footer p { margin: 0; color: var(--cream-dim); }
.site-footer small { color: rgba(245, 240, 232, .38); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .site-nav { display: none; }
  .hero { height: 190svh; }
  .hero__sun { left: 76%; width: 34vw; bottom: 14%; opacity: .95; }
  .hero__horizon { bottom: 14%; }
  .hero__ground { height: 14%; }
  .hero__glow { bottom: 4%; }
  .problem__sticky, .how__sticky { grid-template-columns: 1fr; align-content: center; gap: 2rem; padding-top: 5rem; }
  .problem { height: 260vh; }
  .how { height: 280vh; }
  .problem__stage { order: -1; }
  .phone { width: min(9.5rem, 30vw); }
  .problem__clock { margin-top: .8rem; }
  .problem__clock b { font-size: 1.9rem; }
  .how__stage { height: min(38svh, 20rem); }
  .how__label { min-width: 12rem; bottom: -1.4rem; }
  .ritual-grid { grid-template-columns: 1fr; }
  .how__specs { gap: 1.4rem; }
}