/* ============================================================
   Morning Launch — site styles
   Brand: warm sunrise, dark canvas, coral + blue accents.
   Hand-authored, no framework. Tokens from Docs/Branding/.
   ============================================================ */

:root {
  /* Core palette (exact brand hex) */
  --bg: #151820;
  --surface: #1A1D28;
  --surface-2: #20242F;
  --coral: #E8836B;
  --coral-deep: #D9714F;
  --blue: #5B9FE8;
  --text: #F0EAE2;
  --muted: #8A92A3;
  --success: #7EBF8E;

  /* Sunrise gradient */
  --sun-top: #E26A4D;
  --sun-bottom: #FABE6E;

  /* Type */
  --font-display: ui-rounded, "Baloo 2", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;

  /* Spacing (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px;
  --s-5: 32px; --s-6: 48px; --s-7: 72px; --s-8: 112px;

  --radius: 18px;
  --radius-lg: 28px;
  --maxw: 1120px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-4); }
section { position: relative; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px clamp(16px, 4vw, 32px);
  background: rgba(21, 24, 32, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240, 234, 226, 0.06);
  transform: translateY(-100%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.topbar.scrolled { transform: translateY(0); opacity: 1; }
.topbar img { height: 22px; width: auto; }
.topbar .soon {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted);
  padding: 6px 14px; border: 1px solid rgba(240,234,226,0.12); border-radius: 999px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: var(--s-8) var(--s-4) var(--s-7);
  overflow: hidden;
  isolation: isolate;
}
/* sunrise glow behind the rocket */
.hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  /* Apple-style falloff: fade to the SURFACE color (var(--bg)), never transparent —
     this is what removes the hard line. Brightest at the very top, like a sunrise. */
  background: radial-gradient(125% 82% at 50% -6%,
    rgba(250,190,110,0.40) 0%,
    rgba(226,106,77,0.46) 15%,
    rgba(198,88,60,0.24) 37%,
    var(--bg) 70%);
}
/* faint grain/vignette for depth, not flat */
/* secondary tint removed — the single ::before gradient now carries the whole hero,
   matching Apple's single-light-source approach (no layered fades = no banding) */
.hero::after { content: none; }

.hero__rocket {
  width: clamp(96px, 16vw, 168px); height: auto;
  margin: 0 auto var(--s-5);
  filter: drop-shadow(0 24px 48px rgba(226,106,77,0.35));
  animation: liftoff 1.1s cubic-bezier(.2,.7,.2,1) both, float 5.5s ease-in-out 1.1s infinite;
  will-change: transform;   /* cursor:pointer removed — click joyride disabled (J-61) */
}
.hero__plume {
  position: absolute; z-index: -1;
  top: clamp(150px, 22vh, 240px); left: 50%; transform: translateX(-50%);
  width: 8px; height: 120px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(91,159,232,0.55), transparent);
  filter: blur(6px);
  animation: plume 5.5s ease-in-out 1.1s infinite;
}

.hero__name {
  display: flex; align-items: center; justify-content: center; gap: var(--s-3);
  margin: 0 auto var(--s-3); max-width: 100%; line-height: 0;
}
.hero__name-icon {
  width: clamp(48px, 9vw, 84px); aspect-ratio: 1; height: auto; border-radius: 23%;
  box-shadow: 0 10px 26px rgba(0,0,0,0.42), 0 6px 16px rgba(226,106,77,0.28);
}
.hero__name-word { width: clamp(240px, 54vw, 460px); height: auto; }
.hero__tagline {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2.7vw, 1.5rem);
  color: var(--text); letter-spacing: 0;
  margin-bottom: var(--s-7);
}
.hero__sub {
  font-size: clamp(1rem, 2.1vw, 1.18rem);
  color: var(--text);
  max-width: min(760px, 92%); margin: 0 auto var(--s-6);
  line-height: 1.6;
  /* frosted glass + orange outline — differentiates from the orange-FILLED
     "Launch your day" box further down */
  background: rgba(26, 29, 40, 0.55);
  border: 1.5px solid rgba(232,131,107,0.55);
  box-shadow: inset 0 1px 0 rgba(240,234,226,0.08), 0 12px 30px rgba(0,0,0,0.3);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero__shot { display: flex; justify-content: center; margin: 0 auto var(--s-6); }
.hero__shot .phone { width: clamp(195px, 44vw, 235px); }

/* App Store "coming soon" CTA */
.cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem;
  color: var(--bg);
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%);
  padding: 15px 28px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(217,113,79,0.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(217,113,79,0.45); }
.cta small { display: block; font-weight: 600; font-size: 0.72rem; opacity: 0.85; letter-spacing: 0.02em; }
.cta__icon { font-size: 1.4rem; line-height: 1; }
.hero__note { margin-top: var(--s-3); font-size: 0.85rem; color: var(--muted); }

/* floating rocket between the about box and "Launch your day" */
.rocketbreak { position: relative; display: grid; place-items: center; padding: var(--s-7) 0 var(--s-6); isolation: isolate; }
.rocketbreak__rocket {
  width: clamp(80px, 12vw, 128px); height: auto;
  filter: drop-shadow(0 18px 34px rgba(226,106,77,0.4));
  animation: float 5.5s ease-in-out infinite;
}
.rocketbreak__plume {
  position: absolute; z-index: -1; top: 46%; left: 50%; transform: translateX(-50%);
  width: 8px; height: 90px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(91,159,232,0.5), transparent); filter: blur(6px);
}
@media (prefers-reduced-motion: reduce) { .rocketbreak__rocket { animation: none; } }


/* ============================================================
   FEATURES
   ============================================================ */
.features { padding: var(--s-8) 0; }
/* Coral outline around frosted glass — matches the app's card style. Hugs its
   content so it reads as its own box; heading stays on a single line. */
.section-head {
  text-align: center;
  width: fit-content; max-width: min(92vw, 680px);
  margin: 0 auto var(--s-7);
  background: linear-gradient(135deg, rgba(232,131,107,0.22), rgba(217,113,79,0.12));
  border: 1.5px solid rgba(232,131,107,0.55);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(217,113,79,0.18);
}
.section-head h2 { font-size: clamp(1.35rem, 5.2vw, 2.6rem); margin-bottom: var(--s-3); white-space: nowrap; }
.section-head p { color: var(--muted); font-size: 1.1rem; }

.feature {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
  gap: var(--s-7);
  padding: var(--s-6) 0;
}
.feature:nth-child(even) .feature__media { order: 2; }
.feature__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--blue); margin-bottom: var(--s-2);
}
.feature h3 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: var(--s-3); }
.feature p { color: var(--muted); font-size: 1.08rem; max-width: 40ch; }

.feature__media { display: grid; place-items: center; }
.phone {
  position: relative;
  width: clamp(220px, 26vw, 280px);
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  background: var(--surface);
  border: 2px solid rgba(240,234,226,0.10);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), inset 0 0 0 6px #0d0f15;
  overflow: hidden;
  display: grid; place-items: center;
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  width: 100%; height: 100%; text-align: center; padding: var(--s-4);
  background:
    radial-gradient(circle at 50% 30%, rgba(226,106,77,0.18), transparent 60%),
    linear-gradient(180deg, #1c2030, #14171f);
}
.phone__placeholder img { width: 54px; height: auto; opacity: 0.9; filter: drop-shadow(0 8px 18px rgba(226,106,77,0.3)); }
.phone__placeholder span { color: var(--muted); font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; }
.phone__placeholder small { color: rgba(138,146,163,0.6); font-size: 0.72rem; letter-spacing: 0.03em; }
.feature__media .glow {
  position: absolute; z-index: -1; width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(232,131,107,0.22), transparent 70%);
  filter: blur(40px);
}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust { padding: var(--s-6) 0; }
.trust__line { text-align: center; color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 58ch; margin: 0 auto; }
.trust__line strong { color: var(--text); font-family: var(--font-display); font-weight: 700; }
.trust__card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid rgba(240,234,226,0.07);
  border-radius: var(--radius-lg);
  padding: clamp(var(--s-5), 6vw, var(--s-7));
  text-align: center;
}
.trust__card h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--s-3); }
.trust__card p { color: var(--muted); font-size: 1.1rem; max-width: 52ch; margin: 0 auto var(--s-5); }
.trust__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; }
.chip {
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
  color: var(--text);
  background: rgba(126,191,142,0.12); border: 1px solid rgba(126,191,142,0.25);
  padding: 8px 16px; border-radius: 999px;
}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.closer {
  position: relative; isolation: isolate; overflow: hidden;
  text-align: center;
  padding: var(--s-8) var(--s-4) var(--s-7);
}
.closer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 150% 95% at 50% 108%,
    rgba(250,190,110,0.22) 0%,
    rgba(226,106,77,0.26) 24%,
    rgba(217,113,79,0.10) 50%,
    transparent 76%);
}
.closer__rocket {
  width: clamp(56px, 10vw, 84px); height: auto; margin: 0 auto var(--s-4);
  filter: drop-shadow(0 14px 30px rgba(226,106,77,0.35));
}
.closer__title { font-size: clamp(2rem, 5.5vw, 3.2rem); margin-bottom: var(--s-3); }
.closer__sub { color: var(--muted); font-size: 1.1rem; margin-bottom: var(--s-5); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding: var(--s-7) 0 var(--s-6); border-top: 1px solid rgba(240,234,226,0.07); margin-top: var(--s-7); }
.footer__grid { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; }
.footer img { height: 22px; width: auto; opacity: 0.92; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__links a { color: var(--muted); font-size: 0.95rem; transition: color .15s ease; }
.footer__links a:hover { color: var(--text); }
.footer__copy { color: var(--muted); font-size: 0.85rem; margin-top: var(--s-4); }

/* ============================================================
   LEGAL PAGES (privacy / terms)
   ============================================================ */
.legal { max-width: 760px; margin-inline: auto; padding: var(--s-8) var(--s-4) var(--s-7); }
.legal .back { color: var(--muted); font-size: 0.9rem; display: inline-flex; gap: 6px; margin-bottom: var(--s-5); }
.legal .back:hover { color: var(--coral); }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: var(--s-2); }
.legal .updated { color: var(--muted); font-size: 0.9rem; margin-bottom: var(--s-6); }
.legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--text); margin: var(--s-6) 0 var(--s-3); }
.legal h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; margin: var(--s-4) 0 var(--s-2); }
.legal p, .legal li { color: #cdc6bd; font-size: 1.02rem; margin-bottom: var(--s-3); }
.legal ul, .legal ol { padding-left: var(--s-4); margin-bottom: var(--s-3); }
.legal li { margin-bottom: var(--s-2); }
.legal a { color: var(--coral); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--text); }
.legal hr { border: none; border-top: 1px solid rgba(240,234,226,0.08); margin: var(--s-6) 0; }
.legal .lead { font-size: 1.12rem; color: var(--text); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 780px) {
  .feature { grid-template-columns: 1fr; gap: var(--s-5); text-align: center; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .feature p { margin-inline: auto; }
  .feature__media { order: -1; }
}

/* ============================================================
   REDUCED MOTION — honor the same rule the app does
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero__rocket { animation: none; }
}

/* ---------- keyframes ---------- */
@keyframes liftoff {
  from { opacity: 0; transform: translateY(60px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes plume {
  0%, 100% { opacity: 0.5; height: 110px; }
  50%      { opacity: 0.85; height: 135px; }
}

/* Click the rocket: launch off the top, swoop back in from the right in a dipping
   arc (nose-down on entry, then pull up to nose-up and rise to land). The hero's
   overflow:hidden clips the off-stage moments, so the exit/re-entry read clean. */
@keyframes rocketJoyride {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  12%  { transform: translate(0, -58vh) rotate(-5deg) scale(1.06); }   /* launch off the top */
  13%  { transform: translate(64vw, 26vh) rotate(-134deg) scale(0.64); } /* jump off-stage right (clipped) */
  42%  { transform: translate(16vw, 46vh) rotate(-116deg) scale(0.84); } /* swoop in, dipping low, nose down */
  62%  { transform: translate(6vw, 22vh) rotate(-52deg) scale(0.93); }   /* pull up, rising */
  80%  { transform: translate(1vw, -5vh) rotate(-5deg) scale(1.03); }    /* nose up, slight overshoot */
  92%  { transform: translate(0, 5px) rotate(3deg) scale(1); }           /* settle */
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}