@font-face { font-family: Outfit; src: url(../fonts/Outfit-Light.ttf) format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: Outfit; src: url(../fonts/Outfit-Regular.ttf) format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Outfit; src: url(../fonts/Outfit-Medium.ttf) format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Outfit; src: url(../fonts/Outfit-SemiBold.ttf) format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --phi: 1.618;
  /* Spacing steps, each φ times the last. */
  --s1: 0.382rem;
  --s2: 0.618rem;
  --s3: 1rem;
  --s4: 1.618rem;
  --s5: 2.618rem;
  --s6: 4.236rem;
  --s7: 6.854rem;

  --night: #0d0f1f;
  --night-deep: #090b17;
  --surface: #131629;
  --surface-high: #1e2240;
  --line: #272b4d;
  --text: #e8e9f5;
  --text-soft: #a9adc9;
  --accent: #8f8bff;

  --delta: #8c9bff;
  --theta: #b794ff;
  --alpha: #5fd8c4;
  --beta: #ffc46b;
  --gamma: #ff8fb4;

  --band: var(--accent);
  --radius: 14px;
  --measure: 34rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* js/scroll.js animates scrolling itself on wide screens. */
html.glide { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 300 1.0625rem/1.618 Outfit, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent); }
a:hover { color: var(--text); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0 0 var(--s3); letter-spacing: -0.01em; }
p { margin: 0 0 var(--s3); }

/* The waves sit behind everything, fixed to the viewport. */
#waves {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.site-header, main, .site-footer { position: relative; z-index: 1; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s2) max(16px, 4vw);
  background: color-mix(in srgb, var(--night) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.brand span { white-space: nowrap; }
@media (max-width: 420px) { .brand { font-size: 0.95rem; } .site-nav a { padding: var(--s1); } }
.site-nav { display: flex; gap: var(--s1); }
.site-nav a {
  color: var(--text-soft);
  text-decoration: none;
  padding: var(--s1) var(--s2);
  border-radius: 10px;
  font-weight: 400;
}
.site-nav a:hover { color: var(--text); background: var(--surface-high); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--surface-high); }

/* Hero */
.hero {
  min-height: calc(100svh - 52px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s6) 16px var(--s7);
}
.hero-inner { max-width: 40rem; }
.hero-icon {
  width: calc(1rem * var(--phi) * var(--phi) * var(--phi) * 1.618);
  height: auto;
  margin: 0 auto var(--s4);
  border-radius: 22%;
  box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 35%, transparent);
}
.hero h1 {
  font-size: clamp(2.618rem, 9vw, 4.236rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--s2);
}
.hero .expansion {
  font-size: clamp(1.1rem, 3.2vw, 1.618rem);
  color: var(--text-soft);
  margin-bottom: var(--s4);
}
.hero .lede { font-size: 1.15rem; max-width: var(--measure); margin: 0 auto var(--s4); }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-bottom: var(--s5); }
.badge {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-radius: 999px;
  padding: var(--s1) var(--s3);
  font-size: 0.9rem;
  color: var(--text-soft);
}
.store-note { color: var(--text-soft); font-size: 0.95rem; }
.scroll-cue {
  display: inline-block;
  margin-top: var(--s4);
  color: var(--text-soft);
  text-decoration: none;
  font-size: 0.9rem;
}
.scroll-cue::after { content: ""; display: block; width: 1px; height: var(--s5); margin: var(--s2) auto 0; background: linear-gradient(var(--text-soft), transparent); }

/* Feature sections */
.feature {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--s5);
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--s6) max(16px, 4vw);
}
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); }
.feature:nth-of-type(even) .copy { order: 2; }

.copy {
  max-width: var(--measure);
  padding: var(--s4);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--night) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--band);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
}
.eyebrow::before { content: ""; width: var(--s4); height: 2px; border-radius: 2px; background: currentColor; }
.copy h2 { font-size: clamp(1.618rem, 4.5vw, 2.618rem); }
.copy ul { padding-left: 1.1em; margin: 0 0 var(--s3); }
.copy li { margin-bottom: var(--s1); }
.copy li::marker { color: var(--band); }
.copy strong { font-weight: 500; color: var(--text); }
.quote {
  border-left: 2px solid var(--band);
  padding-left: var(--s3);
  color: var(--text-soft);
  font-style: italic;
}

/* Bands */
[data-band="delta"] { --band: var(--delta); }
[data-band="theta"] { --band: var(--theta); }
[data-band="alpha"] { --band: var(--alpha); }
[data-band="beta"] { --band: var(--beta); }
[data-band="gamma"] { --band: var(--gamma); }

.copy .chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s3); padding: 0; list-style: none; }
.copy .chips li {
  display: inline-flex;
  gap: 0.35em;
  align-items: baseline;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--band) 55%, transparent);
  background: color-mix(in srgb, var(--band) 14%, transparent);
  color: var(--band);
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0;
}
.copy .chips li b { font-weight: 600; }

/* Phone screenshots. A frame shows even before the image exists. */
.shot {
  margin: 0;
  justify-self: center;
  width: min(100%, 17rem);
  will-change: transform;
}
.phone {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 2rem;
  padding: 0.5rem;
  background: linear-gradient(160deg, #2a2f55, #10132a);
  box-shadow:
    0 0 0 1px #343a66,
    0 30px 80px -20px color-mix(in srgb, var(--band) 45%, transparent);
}
.phone img, .phone .placeholder {
  width: 100%;
  height: 100%;
  border-radius: 1.55rem;
  object-fit: cover;
  object-position: top;
}
.phone .placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s4);
  color: var(--text-soft);
  font-size: 0.85rem;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--band) 30%, transparent), transparent 60%),
    var(--surface);
}
.phone img + .placeholder { display: none; }
.phone img.missing { display: none; }
.phone img.missing + .placeholder { display: grid; }
.shot figcaption { text-align: center; color: var(--text-soft); font-size: 0.85rem; margin-top: var(--s3); }

/* Lights out section reads darker. */
.feature.dark .copy { background: color-mix(in srgb, #000 82%, transparent); }

/* Pricing */
.lifetime {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--s7) max(16px, 4vw);
  text-align: center;
  min-height: 80svh;
  display: grid;
  place-content: center;
}
.lifetime .copy { max-width: none; margin: 0 auto; }
.lifetime h2 { font-size: clamp(1.618rem, 5vw, 2.618rem); }
.lifetime .pledges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); margin: var(--s4) 0; padding: 0; list-style: none; }
.lifetime .pledges li { padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.lifetime .pledges b { display: block; font-weight: 500; color: var(--text); }
.lifetime .pledges span { color: var(--text-soft); font-size: 0.9rem; }

/* About page */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--s6) max(16px, 4vw) var(--s7);
}
.page h1 { font-size: clamp(2rem, 6vw, 2.618rem); }
.page section { margin-bottom: var(--s5); }
.app-card {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text);
  text-decoration: none;
}
.app-card:hover { border-color: var(--accent); color: var(--text); }
.app-card img { width: 64px; height: 64px; border-radius: 16px; }
.app-card span { color: var(--text-soft); display: block; font-size: 0.95rem; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s4) 16px calc(var(--s4) + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--text-soft);
  font-size: 0.85rem;
  background: var(--night-deep);
}
.site-footer p { margin: 0 0 var(--s1); }

/* Text eases in as its section arrives (only when the script runs). */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.js .reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .shot { transform: none !important; }
}

@media (min-width: 761px) {
  .lifetime .pledges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .feature, .feature:nth-of-type(even) {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: var(--s4);
    padding: var(--s6) 16px;
  }
  .feature:nth-of-type(even) .copy { order: 0; }
  .copy { padding: var(--s3); }
  .shot { width: min(72%, 15rem); }
}