:root {
  --gradient-start: #5c1146;
  --gradient-end: #93223f;
  --accent: #7a1a3a;
  --on-gradient: #faf1ec;
  --background: #f8f1ec;
  --ink: #2a1420;
  --ink-muted: rgba(42, 20, 32, 0.6);
  --ink-faint: rgba(42, 20, 32, 0.14);
  --card: #fbf3ee;
  --error: #c23b52;

  /* Dark stage */
  --deep: #150810;
  --deep-2: #24101c;
  --on-deep: #f6e9e3;
  --on-deep-muted: rgba(246, 233, 227, 0.62);
  --glow: #c2497a;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* No overflow-x here: it makes body a scroll container and breaks every
     position: sticky on the page. Overflow is contained per-section instead. */
}

h1, h2, h3 {
  font-family: "Unbounded", -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
  color: inherit;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

section[id] {
  scroll-margin-top: 76px;
}

.section-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Scroll reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Nav ---------- */

/* The page opens straight onto the dark stage, so the nav can never be
   transparent - dark ink on a near-black background would vanish. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(248, 241, 236, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}

.nav.scrolled {
  border-bottom-color: var(--ink-faint);
  box-shadow: 0 10px 30px -22px rgba(42, 20, 32, 0.5);
}

.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.brand-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
}

.brand-logo.small {
  width: 24px;
  height: 24px;
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
}

.nav-links a {
  position: relative;
  padding: 2px 0;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.nav-links a:hover {
  color: var(--accent);
}

.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.eyebrow {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.eyebrow.center {
  text-align: center;
}

.eyebrow.on-deep {
  color: var(--glow);
}

/* ---------- Dark stage: sticky phone + scrolling copy ---------- */

.stage {
  position: relative;
  background: radial-gradient(120% 80% at 50% 0%, var(--deep-2), var(--deep) 62%);
  color: var(--on-deep);
  padding: 112px 0 64px;
  /* Deliberately NOT overflow:hidden - that would make this a scroll
     container and stop .stage-phone sticking. The orbs are clipped by
     .stage-orbs instead. */
}

.stage-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.stage-orbs::before,
.stage-orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
}

.stage-orbs::before {
  top: 8%;
  left: -160px;
  width: 420px;
  height: 420px;
  background: rgba(194, 73, 122, 0.22);
  animation: orb 22s var(--ease) infinite alternate;
}

.stage-orbs::after {
  bottom: 4%;
  right: -180px;
  width: 460px;
  height: 460px;
  background: rgba(92, 17, 70, 0.4);
  animation: orb 26s var(--ease) infinite alternate-reverse;
}

@keyframes orb {
  from { transform: translate(0, 0); }
  to   { transform: translate(60px, -50px); }
}

.stage-head,
.stage-inner {
  z-index: 1;
}

.stage-head {
  position: relative;
  text-align: center;
  max-width: 720px;
  /* Extra bottom margin (vs. the original 24px) leaves room for the tap-demo
     hand below the store badges without it crowding the phone mockup. */
  margin: 0 auto 56px;
}

.stage-head h1 {
  font-size: clamp(28px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
}

/* Same slow glint sweep as .store-soon .glow, scaled up for the headline. */
.hero-glint {
  background: linear-gradient(
    100deg,
    var(--on-deep) 40%,
    var(--glow) 50%,
    var(--on-deep) 60%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: soon-glint 3.2s ease-in-out infinite;
}

.stage-head p {
  margin-top: 18px;
  color: var(--on-deep-muted);
  font-size: 16.5px;
}

/* Store badges - not live yet, so styled and labelled as upcoming rather
   than as working links. Swap href="#" for the real listing URLs at launch,
   and drop .store-btn's disabled cursor/label once they do. */
.store-badges {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  border-radius: 14px;
  background: rgba(246, 233, 227, 0.06);
  border: 1px solid rgba(246, 233, 227, 0.18);
  color: var(--on-deep);
  cursor: default;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.store-btn:hover {
  background: rgba(246, 233, 227, 0.1);
  border-color: rgba(246, 233, 227, 0.3);
  transform: translateY(-1px);
}

/* The real CTA needs to read as tappable at a glance on mobile, not as a
   quiet badge sitting next to a disabled one. An illustrated hand (below)
   swoops in and taps it every few seconds; the button itself presses down
   and a ring bursts outward right at the moment of contact, so the whole
   thing reads as one coherent gesture rather than an ambient glow. */
.store-btn-primary {
  position: relative;
  background: rgba(194, 73, 122, 0.14);
  border-color: rgba(194, 73, 122, 0.4);
  animation: store-tap-press 3.2s ease-in-out infinite;
}

.store-btn-primary:hover {
  background: rgba(194, 73, 122, 0.2);
  border-color: rgba(194, 73, 122, 0.55);
}

.store-btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(194, 73, 122, 0.55);
  opacity: 0;
  pointer-events: none;
  animation: store-tap-ripple 3.2s ease-out infinite;
}

@keyframes store-tap-press {
  0%, 40%, 52%, 100% { transform: scale(1); }
  45% { transform: scale(0.94); }
}

@keyframes store-tap-ripple {
  0%, 40% { opacity: 0; transform: scale(1); }
  45% { opacity: 0.8; transform: scale(1); }
  75% { opacity: 0; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1); }
}

/* Tap demo hand - a small illustration waiting below the button, in its
   natural pointing-up orientation (the source art flipped upside down to
   point downward read as an unrecognizable blob, not a hand). .stage-head's
   bottom margin was widened above to give this room without crowding the
   phone mockup. It swoops up to tap the button's underside in sync with the
   button's own press, then retreats down and pauses before repeating. */
.tap-demo {
  position: relative;
  display: inline-flex;
}

.tap-hand {
  position: absolute;
  width: 44px;
  height: auto;
  left: 50%;
  top: 100%;
  margin-top: -6px;
  transform-origin: center center;
  filter: drop-shadow(0 3px 8px rgba(10, 5, 8, 0.5)) saturate(0.9) brightness(0.97);
  animation: tap-hand-move 3.2s ease-in-out infinite;
}

@keyframes tap-hand-move {
  0%, 35%, 62%, 100% { transform: translateX(-50%) translateY(10px); }
  44% { transform: translateX(-50%) translateY(-5px); }
  50% { transform: translateX(-50%) translateY(-7px); }
}

.tap-sparks {
  position: absolute;
  width: 34px;
  height: 17px;
  left: 50%;
  top: 100%;
  margin-left: -17px;
  margin-top: -4px;
  transform: scaleY(-1);
  pointer-events: none;
}

.tap-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: tap-spark 3.2s ease-out infinite;
}

.spark-b { animation-delay: 0.06s; }
.spark-c { animation-delay: 0.03s; }

@keyframes tap-spark {
  0%, 42% { opacity: 0; transform: scale(0.5); }
  48% { opacity: 1; transform: scale(1); }
  68% { opacity: 0; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .store-btn-primary,
  .store-btn-primary::after {
    animation: none;
  }
  .tap-hand,
  .tap-spark {
    display: none;
  }
}

.store-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--on-deep);
}

.store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.store-text em {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--on-deep-muted);
}

.store-text b {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 15px;
}

.store-soon {
  width: 100%;
  text-align: center;
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.4px;
}

/* A slow sweep of light through the text, like a glint - not a blink. */
.store-soon .glow {
  background: linear-gradient(
    100deg,
    var(--on-deep-muted) 40%,
    var(--glow) 50%,
    var(--on-deep-muted) 60%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: soon-glint 3.2s ease-in-out infinite;
}

@keyframes soon-glint {
  0%, 15% { background-position: 100% 0; }
  85%, 100% { background-position: -100% 0; }
}

.stage-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: start;
}

.stage-phone {
  position: sticky;
  top: 14vh;
  display: flex;
  justify-content: center;
}

.phone {
  position: relative;
  width: min(290px, 76vw);
  padding: 8px;
  border-radius: 38px;
  background: linear-gradient(165deg, #4b2e3d, #1a0e15);
  box-shadow:
    0 0 0 1px rgba(246, 233, 227, 0.08),
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 90px -20px rgba(194, 73, 122, 0.45);
}

.phone::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: rgba(246, 233, 227, 0.22);
  z-index: 2;
}

.phone-screens {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  aspect-ratio: 516 / 1100;
  /* Lets the live screen below size itself off the phone's width. */
  container-type: inline-size;
}

.phone-screens > [data-screen] {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}

.phone-screens > [data-screen].active {
  opacity: 1;
  transform: none;
}

.phone-screens img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Live opening screen (not a screenshot) ---------- */

.live-splash {
  background: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  padding: 0 9cqw;
  text-align: center;
}

.live-mark {
  position: relative;
  width: 26cqw;
  height: 26cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5cqw;
}

.live-mark img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2cqw 4cqw -1cqw rgba(92, 17, 70, 0.32);
}

/* Static, as in the app - it is the logo that moves, not the ring. */
.live-ring {
  position: absolute;
  inset: -7cqw;
  border-radius: 50%;
  border: 0.5cqw dashed rgba(42, 20, 32, 0.26);
}

.live-wordmark {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 10.5cqw;
  line-height: 1;
  letter-spacing: 0.5cqw;
  text-transform: uppercase;
  color: var(--gradient-start);
}

.live-wordmark span {
  display: inline-block;
}

/* Timings mirror welcome.tsx: a 900ms rotateY flip on the logo, then the
   wordmark letter by letter 90ms apart, then tagline / CTA / sign-in. */
.live-splash.active .live-mark img {
  animation:
    live-flip 900ms cubic-bezier(0.215, 0.61, 0.355, 1) both,
    live-fade 220ms linear both;
}

.live-splash.active .live-wordmark span {
  animation: live-rise 280ms var(--ease) both;
  animation-delay: calc(900ms + var(--i) * 90ms);
}

.live-splash.active .live-tagline {
  animation: live-rise 400ms var(--ease) both;
  animation-delay: 1480ms;
}

.live-splash.active .live-button {
  animation: live-rise 400ms var(--ease) both;
  animation-delay: 1760ms;
}

.live-splash.active .live-signin {
  animation: live-rise 400ms var(--ease) both;
  animation-delay: 1910ms;
}

@keyframes live-flip {
  from { transform: perspective(800px) rotateY(0deg); }
  to   { transform: perspective(800px) rotateY(360deg); }
}

@keyframes live-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes live-rise {
  from { opacity: 0; transform: translateY(14%); }
  to   { opacity: 1; transform: none; }
}

.live-tagline {
  font-size: 4cqw;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 78cqw;
}

.live-button {
  margin-top: 3cqw;
  width: 100%;
  padding: 4.2cqw 0;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--gradient-start), var(--gradient-end));
  color: var(--on-gradient);
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 4.3cqw;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(92, 17, 70, 0.45);
}

.live-signin {
  font-size: 3.8cqw;
  color: var(--ink-muted);
}

.live-signin b {
  color: var(--gradient-start);
  font-weight: 600;
}

.stage-copy {
  display: flex;
  flex-direction: column;
}

.stage-step {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  opacity: 0.32;
  transition: opacity 0.6s var(--ease);
}

.stage-step.active {
  opacity: 1;
}

.stage-step .step-index {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 14px;
}

.stage-step h3 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.12;
}

.stage-step p {
  margin-top: 16px;
  color: var(--on-deep-muted);
  font-size: 16.5px;
  max-width: 440px;
}

/* ---------- Statement ---------- */

.statement {
  padding: 120px 0;
  text-align: center;
}

.statement h2 {
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.12;
  max-width: 900px;
  margin: 0 auto;
}

.statement .muted {
  color: var(--ink-muted);
}

/* ---------- Shared ---------- */

.section-title {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  text-align: center;
  margin-top: 6px;
  letter-spacing: -0.5px;
}

/* ---------- Safety ---------- */

.safety {
  padding: 90px 0 110px;
  background: linear-gradient(180deg, rgba(122, 26, 58, 0.05), transparent);
}

.safety-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.safety .section-title {
  text-align: left;
}

.safety-lead {
  margin-top: 20px;
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 480px;
}

.safety-list {
  margin-top: 26px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.safety-list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--ink);
}

.safety-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
}

.safety-card {
  position: relative;
  border-radius: 28px;
  padding: 44px 32px;
  background: linear-gradient(160deg, var(--gradient-start), var(--gradient-end));
  color: var(--on-gradient);
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.safety-ring {
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px solid rgba(250, 241, 236, 0.25);
  animation: spin 40s linear infinite;
}

.safety-ring::before {
  content: "";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  border: 2px solid rgba(250, 241, 236, 0.18);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.safety-quote {
  position: relative;
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

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

.footer {
  border-top: 1px solid var(--ink-faint);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.footer-links {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  color: var(--ink-muted);
  flex-wrap: wrap;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-copy {
  width: 100%;
  font-size: 12.5px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .stage-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .stage-phone {
    top: 64px;
    padding-top: 0;
    z-index: 2;
  }
  .phone {
    width: min(210px, 52vw);
  }
  .stage-step {
    min-height: 62vh;
    text-align: center;
    align-items: center;
  }
  .stage-step p {
    margin-left: auto;
    margin-right: auto;
  }
  .safety-inner {
    grid-template-columns: 1fr;
  }
  .safety .section-title {
    text-align: center;
  }
  .safety-lead {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 720px) {
  .nav-links {
    gap: 18px;
    font-size: 13px;
  }
  .footer-inner {
    justify-content: center;
    text-align: center;
  }
  /* Below this width the two store badges wrap onto separate lines, which
     would put the App Store button right where the tap-demo hand sits. */
  .store-badges {
    row-gap: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .stage-step {
    opacity: 1;
  }
}