:root {
  --bg: #14171c;
  --glow: #2b303a;
  --ink: #ffffff;
  --body: #a9b0ba;
  --muted: #6d747f;
  --accent-1: #e8442e;
  --accent-2: #f1732c;
  --accent-3: #f5a032;
  --accent-4: #f5c242;
  --line: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; }

/* overflow-x on BOTH html and body: iOS Safari ignores it on body alone,
   letting the oversized glow pseudo-elements widen the page */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

.page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ---------- Header ---------- */

header.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 8px;
}

header.nav .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}

header.nav .brand img { border-radius: 7px; display: block; }

header.nav nav a {
  color: var(--body);
  text-decoration: none;
  font-size: 14px;
  margin-left: 20px;
}

header.nav nav a:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
  padding: 56px 0 40px;
  position: relative;
}

/* Grid items shrink instead of blowing the track past the viewport */
.hero > div, .feature > div { min-width: 0; }

.hero::before {
  content: "";
  position: absolute;
  inset: -120px -40% auto;
  height: 640px;
  background: radial-gradient(55% 55% at 50% 40%, var(--glow) 0%, rgba(43, 48, 58, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* The app icon's four slanted tiles, blown up and blurred, breathing behind the hero phone */
.aurora {
  position: absolute;
  top: -4%;
  bottom: 2%;
  left: 46%;
  right: -10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7%;
  pointer-events: none;
  z-index: -1;
}

.aurora i {
  width: 16%;
  height: 88%;
  border-radius: 999px;
  transform: skewX(-14deg);
  filter: blur(44px);
  opacity: 0.22;
}

.aurora i:nth-child(1) { background: var(--accent-1); animation: tile-breathe 11s ease-in-out -9s infinite alternate; }
.aurora i:nth-child(2) { background: var(--accent-2); animation: tile-breathe 13s ease-in-out -4s infinite alternate; }
.aurora i:nth-child(3) { background: var(--accent-3); animation: tile-breathe 10s ease-in-out -7s infinite alternate; }
.aurora i:nth-child(4) { background: var(--accent-4); animation: tile-breathe 14s ease-in-out -1s infinite alternate; }

@keyframes tile-breathe {
  from { transform: skewX(-14deg) translateY(-5%) scaleY(0.92); }
  to   { transform: skewX(-14deg) translateY(6%)  scaleY(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
}

h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 0 18px;
}

@media (min-width: 420px) {
  .nowrap { white-space: nowrap; }
}

.lede {
  font-size: 18px;
  max-width: 44ch;
  margin: 0 0 26px;
}

.cta-badge {
  display: inline-block;
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(90deg,
    rgba(232, 68, 46, 0.16),
    rgba(241, 115, 44, 0.16),
    rgba(245, 160, 50, 0.16),
    rgba(245, 194, 66, 0.16));
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.cta-badge:hover {
  border-color: rgba(245, 160, 50, 0.4);
  box-shadow:
    inset 0 0 6px 2px rgba(241, 115, 44, 0.3),
    0 0 22px rgba(241, 115, 44, 0.35),
    0 0 60px rgba(241, 115, 44, 0.16);
}

.cta-badge:hover::after {
  filter: brightness(1.9) saturate(1.15);
}

/* Shooting star: a comet with an ember tail orbiting the pill's border */
.cta-badge::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 50%;
  width: 340%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0turn);
  background: conic-gradient(
    transparent 0 76%,
    rgba(232, 68, 46, 0.55) 85%,
    rgba(245, 160, 50, 0.95) 94%,
    #fff3d6 97.5%,
    transparent 98.2%);
  animation: comet-orbit 3.6s linear infinite;
}

/* Non-uniform orbit: decelerate into one dwell at ~75% across the top edge
   (the loop seam), accelerate out, cruise at constant speed elsewhere */
@keyframes comet-orbit {
  0%   { transform: translate(-50%, -50%) rotate(0.219turn); animation-timing-function: ease-in; }
  12%  { transform: translate(-50%, -50%) rotate(0.34turn);  animation-timing-function: linear; }
  85%  { transform: translate(-50%, -50%) rotate(1.10turn);  animation-timing-function: ease-out; }
  100% { transform: translate(-50%, -50%) rotate(1.219turn); }
}

/* Inner fill masks the middle so the comet only shows on the 1.5px rim */
.cta-badge::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(232, 68, 46, 0.16),
    rgba(241, 115, 44, 0.16),
    rgba(245, 160, 50, 0.16),
    rgba(245, 194, 66, 0.16)), var(--bg);
  transition: filter 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .cta-badge::before { display: none; }
}

/* Waitlist form living inside the comet pill */
.cta-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  /* not min(420px,100%): WebKit mis-resolves the % inside a grid item
     and blows the hero column past the viewport */
  width: 100%;
  max-width: 420px;
}

.cta-form input[type="email"] {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px;
  flex: 1 1 auto;
  min-width: 0;
  outline: none;
  max-width: 100%;
}

.cta-form input[type="email"]::placeholder { color: var(--muted); }

.cta-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cta-form button {
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #1c2028;
  background: linear-gradient(90deg, var(--accent-2), var(--accent-4));
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s ease;
}

.cta-form button:hover { filter: brightness(1.12); }

/* Compact button label on narrow screens so the email input gets the width */
.btn-compact { display: none; }

@media (max-width: 480px) {
  .btn-full { display: none; }
  .btn-compact { display: inline; }
}
.cta-form button:disabled { filter: saturate(0.4) brightness(0.8); cursor: default; }

.cta-form.joined { padding: 10px 20px; justify-content: center; }
.cta-form.joined::before { display: none; }
.joined-msg { font-size: 14px; font-weight: 600; color: var(--ink); }

.cta-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.closer .cta-note { margin-top: 14px; }

/* ---------- Phones ---------- */

.phone-wrap {
  position: relative;
  width: min(328px, 82vw);
  margin: 0 auto;
}

.phone-wrap::before {
  content: "";
  position: absolute;
  inset: -12% -22%;
  background:
    radial-gradient(50% 44% at 50% 46%, rgba(241, 115, 44, 0.12) 0%, rgba(241, 115, 44, 0) 70%),
    radial-gradient(50% 50% at 50% 50%, var(--glow) 0%, rgba(43, 48, 58, 0) 72%);
  pointer-events: none;
}

.phone {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.55));
}

/* ---------- Feature rows ---------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.feature:nth-of-type(even) .feature-copy { order: 2; }
.feature:nth-of-type(even) .feature-shot { order: 1; }

.feature-copy h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 6px;
}

/* Four slanted tiles, echoing the app icon */
.feature-copy h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  border-radius: 4px;
  margin: 16px 0 18px;
  transform: skewX(-14deg);
  background: linear-gradient(90deg,
    var(--accent-1) 0 21%,  transparent 21% 26%,
    var(--accent-2) 26% 47%, transparent 47% 52%,
    var(--accent-3) 52% 73%, transparent 73% 79%,
    var(--accent-4) 79% 100%);
}

.feature-copy p {
  font-size: 17px;
  max-width: 40ch;
  margin: 0;
}

/* ---------- Closer ---------- */

.closer {
  text-align: center;
  padding: 72px 0 56px;
  border-top: 1px solid var(--line);
}

/* Animated rendition of the app icon's four tiles: a deck of cards
   that gathers into a stack and fans back out */
.tile-mark {
  position: relative;
  height: 96px;
  margin-bottom: 26px;
}

.tile-mark i {
  position: absolute;
  left: calc(50% - 17px);
  top: 10px;
  width: 34px;
  height: 76px;
  border-radius: 999px;
  transform: skewX(-14deg) translateX(var(--stack));
  animation: tile-shimmer 3.6s ease-in-out infinite;
}

/* Static mark mirrors the icon: overlapped ~1/3, yellow on top. Each tile
   shimmers brighter in succession (1-2-3-4), then the mark rests. */
.tile-mark i:nth-child(1) { --stack: -34px; z-index: 1; background: var(--accent-1); box-shadow: 0 0 34px 4px rgba(232, 68, 46, 0.35);  animation-delay: 0s; }
.tile-mark i:nth-child(2) { --stack: -11px; z-index: 2; background: var(--accent-2); box-shadow: 0 0 34px 4px rgba(241, 115, 44, 0.35); animation-delay: 0.3s; }
.tile-mark i:nth-child(3) { --stack: 11px;  z-index: 3; background: var(--accent-3); box-shadow: 0 0 34px 4px rgba(245, 160, 50, 0.35); animation-delay: 0.6s; }
.tile-mark i:nth-child(4) { --stack: 34px;  z-index: 4; background: var(--accent-4); box-shadow: 0 0 34px 4px rgba(245, 194, 66, 0.35); animation-delay: 0.9s; }

/* brightness() also amplifies each tile's colored glow */
@keyframes tile-shimmer {
  0%, 18%, 100% { filter: brightness(1); }
  9%            { filter: brightness(1.5); }
}

/* Closer pill: no comet (one animation down here) — instead it catches the
   mark's shimmer as a fifth pulse, 0.3s after tile 4, same rhythm */
.closer .cta-form::before { display: none; }

.closer .cta-form {
  animation: pill-shimmer 3.6s ease-in-out 1.2s infinite;
}

/* Rise with tile 4's wave, then HOLD the glow ~1s before releasing —
   the pill stays lit until the mark's next shimmer begins. */
@keyframes pill-shimmer {
  0%, 46%, 100% { filter: brightness(1); }
  9%, 37%       { filter: brightness(1.35); }
}

@media (prefers-reduced-motion: reduce) {
  .tile-mark i, .closer .cta-form { animation: none; }
}

.closer h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* ---------- Footer ---------- */

footer.site {
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--body); }

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

@media (max-width: 760px) {
  .hero,
  .feature {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0;
  }

  .hero { text-align: center; padding-top: 28px; }
  .lede { margin-left: auto; margin-right: auto; }

  .feature:nth-of-type(even) .feature-copy,
  .feature .feature-copy { order: 1; text-align: center; }
  .feature:nth-of-type(even) .feature-shot,
  .feature .feature-shot { order: 2; }

  .feature-copy h2::after { margin-left: auto; margin-right: auto; }
  .feature-copy p { margin: 0 auto; }

  header.nav nav a { margin-left: 14px; }

  /* Keep decorative glows inside the viewport on narrow screens; the
     aurora sits behind the text in a single column, so drop it */
  .hero::before { inset: -80px 0 auto; }
  .aurora { display: none; }
  .phone-wrap::before { inset: -10% -8%; }
}

/* ---------- Capability grid ---------- */

.grid-section {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.grid-section h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 8px;
}

.grid-section h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 8px;
  border-radius: 4px;
  margin: 16px auto 34px;
  transform: skewX(-14deg);
  background: linear-gradient(90deg,
    var(--accent-1) 0 21%,  transparent 21% 26%,
    var(--accent-2) 26% 47%, transparent 47% 52%,
    var(--accent-3) 52% 73%, transparent 73% 79%,
    var(--accent-4) 79% 100%);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cap {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 18px 20px;
  background: rgba(255, 255, 255, 0.02);
}

.cap h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.cap p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  margin: 0;
}

@media (max-width: 960px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .cap-grid { grid-template-columns: 1fr; }
}