/* ═══════════ Steady — landing page styles ═══════════ */

/* Display serif is the same file the app bundles (InstrumentSerif-Regular.ttf), served as woff2. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/InstrumentSerif-Italic.woff2') format('woff2');
}

:root {
  /* Brand */
  --deep-water: #21444D;
  --steady-teal: #3E6E79;
  --seaglass: #9BB9BE;
  --mist: #EDF3F2;
  --paper: #FBFAF7;
  --warm-sand: #E8CBA4;
  --clay: #C97F5F;
  --text-2: #5E7A81;
  --text-3: #8AA3A8;
  --text-light: #C6D8DA;
  --border: rgba(33,68,77,0.10);

  /* Section accents (from the app) */
  --c-weight: #A2845E;
  --c-fitness: #30B0C7;
  --c-sleep: #5856D6;
  --c-stress: #AF52DE;
  --c-nutrition: #33795F;
  --c-water: #4E85AD;
  --c-cycle: #C97F5F;

  /* Sleep stages */
  --s-awake: #E06238;
  --s-rem: #57C4D1;
  --s-core: #597FC7;
  --s-deep: #4D3F9E;

  /* Fasting world */
  --f-bg: #101411;
  --f-surface: #1C1F1D;
  --f-card: #0E1512;
  --f-green: #13EC5B;
  --f-muted: #93A79E;
  --z1: #13EC5B; --z2: #EAB308; --z3: #F97316; --z4: #FF5533; --z5: #A855F7;

  /* Type — two families, matching the app */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --rounded: ui-rounded, var(--sans);

  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px;
  --shadow-card: 0 24px 56px rgba(33,68,77,0.10);
  --shadow-elevate: 0 28px 64px rgba(33,68,77,0.14);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--mist);
  font-family: var(--sans);
  font-weight: 500;
  color: var(--deep-water);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1;
}

a { color: var(--steady-teal); text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
.num { font-family: var(--rounded); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.01em; }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.breathe { animation: breathe 6s ease-in-out infinite; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition: opacity .75s var(--ease), transform .75s var(--ease), filter .75s var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0) scale(1); }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .4s; }

/* Soft elevation on high-impact media/demo blocks */
.reveal--elevate { filter: drop-shadow(0 8px 20px rgba(33,68,77,0)); }
.reveal--elevate.is-in { filter: drop-shadow(0 24px 48px rgba(33,68,77,0.14)); }

@media (prefers-reduced-motion: reduce) {
  .breathe, .liquid__wave, .scanline, .fast__ring--live .ring__glow, .island__dot, .chat__bar-dot { animation: none !important; }
  .reveal, .reveal--elevate { opacity: 1; transform: none; filter: none; transition: none; }
  .section > .wrap, .fast > .wrap { transform: none !important; filter: none !important; transition: none !important; }
  .section--orbs::before, .section--orbs::after { transition: none; }
  .hero-devices__ipad, .hero-devices__iphone, .hero-devices__watch, .daywave, .ws img {
    --py: 0px !important;
    will-change: auto;
  }
  html { scroll-behavior: auto; }
}

/* ── Layout helpers ── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 96px 32px; }
.col { display: flex; flex-direction: column; gap: 40px; }
.center { align-items: center; }
.tc { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 16px; }

.section { position: relative; }
.section--paper { background: var(--paper); }
.section--mist { background: var(--mist); }
.section--deep { background: linear-gradient(180deg, #21444D 0%, #2C545E 70%, #3E6E79 100%); }
.section--footer { background: linear-gradient(180deg, #21444D 0%, #2C545E 100%); }

/* Section depth — subtle lift when the section is the current focus */
.section > .wrap,
.fast > .wrap {
  transition: transform .7s var(--ease), filter .7s var(--ease);
}
.section.is-near > .wrap,
.fast.is-near > .wrap {
  transform: translateY(-4px);
}
.section--deep.is-near > .wrap,
.section--footer.is-near > .wrap,
.fast.is-near > .wrap {
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.12));
}

/* Ambient backdrop: a drifting accent aurora, a fine dot-grid fading in from the corners */
.section--orbs { overflow: hidden; isolation: isolate; }
.section--orbs::before, .section--orbs::after {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
}
.section--orbs::before {
  inset: -18% -8%;
  background:
    radial-gradient(38% 42% at 16% 18%, color-mix(in srgb, var(--accent, var(--steady-teal)) 34%, transparent), transparent 72%),
    radial-gradient(30% 34% at 86% 10%, color-mix(in srgb, var(--warm-sand) 52%, transparent), transparent 72%),
    radial-gradient(34% 40% at 72% 92%, color-mix(in srgb, var(--accent, var(--steady-teal)) 14%, transparent), transparent 72%),
    radial-gradient(26% 30% at 8% 88%, color-mix(in srgb, var(--seaglass) 34%, transparent), transparent 72%);
  filter: blur(34px);
  opacity: .78;
  transform: translate3d(0, 0, 0);
  animation: auroraDrift 28s ease-in-out infinite alternate;
  transition: opacity .8s var(--ease);
  will-change: transform;
}
.section--orbs.is-near::before { opacity: 1; }
@keyframes auroraDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  100% { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
}
.section--orbs::after {
  inset: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--steady-teal)) 70%, transparent) 1px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: 11px 11px;
  opacity: .22;
  -webkit-mask-image:
    radial-gradient(55% 60% at 8% 6%, #000 0%, transparent 100%),
    radial-gradient(42% 50% at 96% 100%, #000 0%, transparent 100%);
  mask-image:
    radial-gradient(55% 60% at 8% 6%, #000 0%, transparent 100%),
    radial-gradient(42% 50% at 96% 100%, #000 0%, transparent 100%);
  transition: opacity .8s var(--ease);
}
.section--orbs.is-near::after { opacity: .34; }
.section--orbs > .wrap { position: relative; z-index: 1; }

/* Dark sections: a faint HRV waveline drifting across, plus a top light */
.section--deep { overflow: hidden; }
.section--deep::before, .section--deep::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.section--deep::before {
  background: radial-gradient(60% 42% at 50% -4%, rgba(155,185,190,0.22), transparent 70%);
}
.section--deep::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='720' height='160' viewBox='0 0 720 160'><path d='M0 80 C40 80 60 80 80 80 L100 80 L112 40 L124 120 L136 80 L180 80 L196 62 L212 98 L228 80 L300 80 L316 80 L326 28 L340 132 L352 80 L420 80 L440 68 L458 92 L476 80 L560 80 L572 46 L586 114 L598 80 L720 80' fill='none' stroke='%23FBFAF7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: 720px 160px;
  background-repeat: repeat-x;
  background-position: 0 38%;
  opacity: .06;
  animation: waveDrift 48s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
@keyframes waveDrift { from { background-position-x: 0; } to { background-position-x: -720px; } }
.section--deep > .wrap { position: relative; z-index: 1; }

/* Footer: warm glow behind the closing line */
.section--footer::before {
  content: ''; position: absolute; left: 50%; top: -10%; width: 720px; height: 520px; pointer-events: none;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(232,203,164,0.22), rgba(232,203,164,0.06) 55%, transparent);
  filter: blur(12px);
  animation: glowBreathe 9s ease-in-out infinite;
}
@keyframes glowBreathe { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
.section--footer { overflow: hidden; }
.section--footer > .wrap { position: relative; }

/* ── Type ── */
.h2 { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.08; margin: 0; letter-spacing: -0.005em; }
.h2--light { color: var(--paper); }
.h3 { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.lead { font-size: 17px; line-height: 1.6; color: var(--text-2); margin: 0; font-weight: 400; }
.lead--light { color: var(--text-light); }
.overline { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.overline--sm { font-size: 11px; letter-spacing: 0.1em; }
.overline--light { color: var(--text-light); }
.muted-sm { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0; }
.fine { font-size: 12.5px; color: var(--text-3); }
em { font-family: var(--serif); font-style: italic; font-size: 1.06em; }

.badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent, var(--steady-teal));
  background: color-mix(in srgb, var(--accent, var(--steady-teal)) 11%, transparent);
  width: fit-content;
}
.badge .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent, var(--steady-teal)); }

.intro { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.intro--center { align-items: center; text-align: center; margin: 0 auto; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 999px; font-weight: 600; font-size: 16px; font-family: var(--sans);
  padding: 15px 28px; cursor: pointer; border: 0;
  transition: background .18s ease, color .18s ease, transform .18s var(--ease);
}
.btn:active { transform: scale(0.985); }
.btn--sm { padding: 11px 22px; font-size: 15px; }
.btn--block { width: 100%; margin-top: auto; }
.btn--store {
  padding: 14px 26px; position: relative; overflow: hidden;
  box-shadow: 0 10px 24px rgba(33,68,77,0.16);
  transition: background .18s ease, color .18s ease, transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--store:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(33,68,77,0.24); }
.btn--store:active { transform: translateY(0) scale(0.985); }
.btn--store::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; width: 34%; left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left .8s var(--ease);
}
.btn--store:hover::after { left: 140%; }
.btn--sand.btn--store::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent); }
.btn--teal { background: var(--steady-teal); color: var(--paper); }
.btn--teal:hover { background: #2C545E; color: var(--paper); }
.btn--ink { background: var(--deep-water); color: var(--paper); }
.btn--ink:hover { background: #2C545E; color: var(--paper); }
.btn--mist { background: var(--mist); color: var(--deep-water); }
.btn--mist:hover { background: #E0EAE8; }
.btn--sand { background: var(--warm-sand); color: var(--deep-water); }
.btn--sand:hover { background: #DFBB8B; }
.btn--ghost { background: transparent; color: var(--deep-water); border: 1.5px solid var(--border); }
.btn--ghost:hover { background: var(--mist); }

.store__stack { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store__small { font-size: 11px; font-weight: 500; color: var(--text-light); }
.store__small--dark { color: var(--text-2); font-weight: 600; }
.store__big { font-size: 17px; font-weight: 700; }

/* ── Nav ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(237,243,242,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(155,185,190,0.25);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.nav.is-scrolled { background: rgba(237,243,242,0.94); box-shadow: 0 10px 30px rgba(33,68,77,0.08); }
.nav__inner { max-width: 1120px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--deep-water); }
.brand__logo { width: 36px; height: 36px; border-radius: 10px; display: block; transition: transform .4s var(--ease); }
.brand:hover .brand__logo { transform: rotate(-6deg) scale(1.06); }
.brand__name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.nav__links { display: flex; align-items: center; gap: 26px; }
.nav__links a { font-size: 15px; font-weight: 500; color: var(--text-2); }
.nav__links a:not(.btn) { position: relative; transition: color .2s ease; }
.nav__links a:not(.btn)::after {
  content: ''; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; border-radius: 99px;
  background: var(--steady-teal); translate: -50% 0; scale: 0; transition: scale .35s var(--ease);
}
.nav__links a:not(.btn):hover::after { scale: .6; }
.nav__links a.is-active:not(.btn) { color: var(--deep-water); }
.nav__links a.is-active:not(.btn)::after { scale: 1; }
.nav__links a:hover { color: var(--deep-water); }
.nav__links a.btn { color: var(--paper); box-shadow: 0 6px 16px rgba(62,110,121,0.22); transition: background .18s ease, transform .3s var(--ease), box-shadow .3s var(--ease); }
.nav__links a.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(62,110,121,0.30); }

/* ── Hero ── */
.hero { position: relative; overflow: hidden; }
.hero__row {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.3fr);
  align-items: center;
  gap: 16px 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px 0;
}