/* ---------- Base ---------- */

:root {
  --bg: #110e15;
  --ink: #f2eef6;
  --ink-soft: rgba(242, 238, 246, 0.64);
  --ink-faint: rgba(242, 238, 246, 0.42);
  --line: rgba(255, 255, 255, 0.08);
  --brand: #22c9ff;
  --app-accent: var(--brand);
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --grotesk: "Space Grotesk", var(--sans);
  --gutter: clamp(16px, 5vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { border-radius: 22.5%; }

.lede { color: var(--ink-soft); font-size: clamp(17px, 2vw, 19px); }
.subtitle { color: var(--app-accent); font-weight: 600; font-size: 19px; }
.meta { color: var(--ink-faint); font-size: 14px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

.btn {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--app-accent);
  color: #120f16;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.btn.is-soon { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }

.link { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--app-accent); }
.link:hover { text-decoration: underline; }

/* ---------- Header and footer ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 24px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 19px/1 var(--grotesk);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark svg { width: 30px; height: 30px; }

.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-header nav a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--ink-soft); }
.site-header nav a:hover { color: var(--ink); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 40px;
  border-top: 1px solid var(--line);
  max-width: none;
  padding-inline: max(var(--gutter), (100% - 1120px) / 2 + var(--gutter));
  font-size: 14px;
  color: var(--ink-faint);
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* ---------- Home ---------- */

.hero {
  text-align: center;
  padding-block: clamp(48px, 9vw, 112px) clamp(64px, 10vw, 120px);
}

.hero-icons { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; }
.hero-icons img {
  width: clamp(64px, 12vw, 88px);
  box-shadow: 0 0 0 1px var(--line), 0 20px 60px -10px color-mix(in srgb, var(--app-accent) 60%, transparent);
}
.hero-icons img:nth-child(odd) { transform: rotate(-6deg); }
.hero-icons img:nth-child(even) { transform: rotate(6deg); }

.hero h1 {
  font: 700 clamp(42px, 8vw, 88px)/0.98 var(--grotesk);
  letter-spacing: -0.04em;
  max-width: 13ch;
  margin-inline: auto;
}
.hero .lede { margin: 24px auto 0; max-width: 32em; }

.band {
  --glow-x: 75%;
  background:
    radial-gradient(60% 70% at var(--glow-x) 50%, color-mix(in srgb, var(--app-accent) 22%, transparent), transparent 70%),
    var(--app-bg);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.band.is-flipped { --glow-x: 25%; }

.band-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: 48px;
  padding-block: clamp(64px, 9vw, 112px);
}
.band.is-flipped .band-copy { order: 2; }

.band-copy .icon { width: 64px; margin-bottom: 24px; }
.band h2 { font: 700 clamp(36px, 5vw, 52px)/1 var(--grotesk); letter-spacing: -0.03em; }
.band .subtitle { margin: 10px 0 20px; }
.band-copy > p:not(.subtitle, .meta) { color: var(--ink-soft); max-width: 30em; }
.band .meta { margin-top: 16px; }
.band .actions { margin-top: 32px; }

.band-shots { display: flex; justify-content: center; gap: 20px; }
.band-shots img {
  width: min(240px, 44%);
  border-radius: 32px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -20px rgba(0, 0, 0, 0.7);
}
.band-shots img:nth-child(2) { transform: translateY(48px); }

/* ---------- App page ---------- */

.app-page {
  background:
    radial-gradient(70% 600px at 50% 0, color-mix(in srgb, var(--app-accent) 20%, transparent), transparent),
    var(--app-bg);
}

.app-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(40px, 7vw, 88px) 56px;
}
.app-hero .icon {
  width: clamp(88px, 14vw, 112px);
  box-shadow: 0 0 0 1px var(--line), 0 24px 70px -12px color-mix(in srgb, var(--app-accent) 70%, transparent);
  margin-bottom: 32px;
}
.app-hero h1 { font: 700 clamp(48px, 9vw, 96px)/0.95 var(--grotesk); letter-spacing: -0.04em; }
.app-hero .subtitle { margin-top: 14px; font-size: clamp(19px, 2.4vw, 24px); }
.app-hero .lede { margin-top: 20px; max-width: 34em; }
.app-hero .actions { margin-top: 32px; justify-content: center; }
.app-hero .meta { margin-top: 16px; }

.shots {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px max(var(--gutter), (100% - 1120px) / 2 + var(--gutter)) 32px;
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots img {
  flex: none;
  width: clamp(200px, 26vw, 260px);
  border-radius: 32px;
  scroll-snap-align: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}
@media (min-width: 1400px) { .shots { justify-content: center; } }

.pitch {
  padding-block: clamp(56px, 8vw, 96px) 40px;
  text-align: center;
  font: 700 clamp(28px, 4.4vw, 44px)/1.15 var(--grotesk);
  letter-spacing: -0.03em;
  max-width: 22em;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
  padding-block: 24px clamp(56px, 8vw, 96px);
}
.feature {
  padding: 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
}
.feature h2 { font: 700 21px/1.2 var(--grotesk); color: var(--app-accent); margin-bottom: 10px; }
.feature p { color: var(--ink-soft); font-size: 16px; }

.wide { margin: 0 auto; padding-bottom: clamp(56px, 8vw, 96px); }
.wide img {
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.wide figcaption { margin-top: 16px; text-align: center; color: var(--ink-faint); font-size: 15px; }

.app-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding-block: 24px 80px;
}
.app-end h2 { font: 700 32px/1 var(--grotesk); letter-spacing: -0.03em; }
.app-end .actions { justify-content: center; margin-top: 8px; }
.app-links { display: flex; gap: 24px; margin-top: 16px; font-size: 15px; }
.app-links a { color: var(--ink-soft); }
.app-links a:hover { color: var(--ink); }

/* ---------- Prose pages (privacy, support, 404) ---------- */

.prose { max-width: 720px; padding-block: 32px 96px; }
.prose .crumb { margin-bottom: 32px; font-size: 15px; }
.prose .crumb a { text-decoration: none; color: var(--app-accent); font-weight: 600; }
.prose h1 { font: 700 clamp(34px, 5vw, 48px)/1.05 var(--grotesk); letter-spacing: -0.03em; margin-bottom: 12px; }
.prose h2 { font: 700 20px/1.3 var(--grotesk); margin: 40px 0 10px; }
.prose p { margin-bottom: 14px; color: var(--ink-soft); }
.prose a { color: var(--app-accent); }
.prose .updated { color: var(--ink-faint); font-size: 15px; margin-bottom: 32px; }

/* ---------- Small screens ---------- */

@media (max-width: 820px) {
  .band-inner { grid-template-columns: 1fr; }
  .band.is-flipped .band-copy { order: 0; }
  .band-shots img:nth-child(2) { transform: translateY(32px); }
}