/*
 * STRENQO V14 — editorial performance direction
 *
 * This file deliberately sits after styles-v13.css. V13 keeps the proven
 * accessibility, localization and screen-catalogue contracts; V14 owns the
 * art direction, responsive composition and additional motion states.
 */

:root {
  --white: #fff;
  --paper: #f1f0ec;
  --paper-blue: #e8edff;
  --ink: #090909;
  --ink-soft: #5f5f5c;
  --ink-faint: #8d8d87;
  --line: rgba(9, 9, 9, .14);
  --line-light: rgba(255, 255, 255, .18);
  --blue: #2f6bff;
  --blue-dark: #1548d8;
  --cyan: #5ed6e8;
  --night: #070707;
  --night-soft: #101010;
  --shell: 1480px;
  --gutter: clamp(22px, 4.2vw, 72px);
  --header-h: 78px;
  --radius-s: 8px;
  --radius-m: 18px;
  --radius-l: 32px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.72, 0, .28, 1);
  --shadow-soft: 0 26px 80px rgba(0, 0, 0, .10);
  --shadow-phone: 0 55px 130px rgba(0, 0, 0, .42), 0 12px 34px rgba(0, 0, 0, .24);
}

html {
  background: var(--night);
}

body {
  background: var(--white);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-kerning: normal;
}

body::before {
  position: fixed;
  z-index: 999;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  content: "";
}

.ambient-material,
.material-grain {
  display: none;
}

.shell {
  width: min(calc(100% - (var(--gutter) * 2)), var(--shell));
}

h1,
h2,
h3 {
  font-weight: 650;
  letter-spacing: -.06em;
  line-height: .96;
  overflow: visible;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
}

.eyebrow {
  gap: 13px;
  margin-bottom: 25px;
  color: var(--blue);
  font-size: .68rem;
  letter-spacing: .22em;
}

.eyebrow::before {
  width: 38px;
}

.button,
.nav-cta {
  min-height: 51px;
  padding-inline: 23px;
  border-radius: 4px;
  font-size: .75rem;
  letter-spacing: .025em;
}

.button i,
.nav-cta i {
  font-size: 1rem;
  font-style: normal;
  transition: transform 350ms var(--ease);
}

.button:hover i,
.nav-cta:hover i {
  transform: translate(3px, -3px);
}

.button-primary {
  background: var(--blue);
  box-shadow: none;
}

.button-primary:hover,
.nav-cta:hover {
  background: #1f56ec;
  box-shadow: none;
}

.button-text {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(0, 0, 0, .12);
  color: var(--white);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.button-text:hover {
  border-color: rgba(255, 255, 255, .72);
  color: var(--white);
}

/* Navigation — transparent over the campaign opening, precise after scroll. */
.site-header {
  height: var(--header-h);
  color: var(--white);
}

.site-header::after {
  position: absolute;
  inset: auto var(--gutter) 0;
  height: 1px;
  background: rgba(255, 255, 255, .18);
  content: "";
  transition: opacity 220ms ease;
}

.site-header.is-scrolled {
  border-color: rgba(9, 9, 9, .10);
  background: rgba(248, 248, 245, .91);
  color: var(--ink);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  backdrop-filter: blur(24px) saturate(115%);
}

.site-header.is-scrolled::after {
  opacity: 0;
}

.brand-mark {
  width: 29px;
  height: 29px;
  border-radius: 7px;
  box-shadow: none;
}

.brand-name {
  font-size: .78rem;
  font-weight: 760;
  letter-spacing: .25em;
}

.nav-menu {
  gap: clamp(17px, 1.7vw, 27px);
}

.nav-menu > a:not(.nav-cta) {
  color: inherit;
  font-size: .7rem;
  font-weight: 560;
  opacity: .78;
  transition: opacity 180ms ease;
}

.nav-menu > a:not(.nav-cta):hover,
.nav-menu > a.is-active:not(.nav-cta) {
  opacity: 1;
}

.nav-menu > a:not(.nav-cta)::after {
  bottom: -11px;
  background: currentColor;
}

.nav-cta {
  min-height: 39px;
  padding-inline: 17px;
  background: var(--white);
  color: var(--ink);
}

.site-header.is-scrolled .nav-cta {
  background: var(--ink);
  color: var(--white);
}

.lang-switcher summary {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(0, 0, 0, .10);
}

.site-header.is-scrolled .lang-switcher summary {
  border-color: var(--line);
  background: transparent;
}

.lang-menu-list {
  border-radius: 6px;
  color: var(--ink);
}

/* Hero — the photograph establishes intent; one product screen proves it. */
.hero {
  min-height: max(850px, 100svh);
  padding: calc(var(--header-h) + clamp(56px, 8vh, 92px)) 0 45px;
  color: var(--white);
  background: #08090b;
}

.hero::before {
  z-index: -2;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background-image: url("/strenqo-assets/photos/hero-performance.webp");
  background-size: cover;
  background-position: calc(50% + var(--hero-photo-x, 0px)) center;
  box-shadow: none;
  content: "";
  transform: scale(var(--hero-photo-scale, 1.035));
  transform-origin: center;
  transition: transform 1400ms var(--ease);
}

.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 6, 8, .94) 0%, rgba(5, 6, 8, .77) 36%, rgba(5, 6, 8, .18) 68%, rgba(5, 6, 8, .42) 100%),
    linear-gradient(180deg, rgba(4, 5, 6, .28) 0%, transparent 45%, rgba(4, 5, 6, .72) 100%);
  content: "";
}

.hero[data-active]::before {
  --hero-photo-scale: 1;
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(420px, .64fr);
  grid-template-rows: 1fr auto;
  gap: 28px clamp(30px, 7vw, 120px);
  align-items: center;
  min-height: calc(max(850px, 100svh) - var(--header-h) - 120px);
}

.hero-copy {
  align-self: center;
  max-width: 830px;
  padding: 30px 0;
}

.hero .eyebrow {
  color: #8fc8ff;
}

.hero-copy h1 {
  max-width: 9.6ch;
  font-size: clamp(4.35rem, 7vw, 8.5rem);
  line-height: .92;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .18);
}

.hero-copy h1::after {
  display: none;
}

.hero-subtitle {
  max-width: 52ch;
  margin-top: 31px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.98rem, 1.25vw, 1.15rem);
  line-height: 1.55;
}

.hero-stage {
  display: none;
}

.hero-motion {
  position: relative;
  width: min(39vw, 580px);
  min-height: 520px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    radial-gradient(circle at 50% 48%, rgba(47, 107, 255, .24), transparent 39%),
    rgba(5, 8, 14, .78);
  background-size: 34px 34px, 34px 34px, auto, auto;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
}

.hero-motion::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 34%, transparent 68%, rgba(47,107,255,.08));
  content: "";
  pointer-events: none;
}

.hero-performance-stage {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.hero-readiness-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.hero-readiness-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 13px;
  background: rgba(5,8,14,.74);
  color: #fff;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 700ms var(--ease), opacity 500ms ease;
}

.hero-readiness-card:nth-child(1) { --ring-color: #39d69f; }
.hero-readiness-card:nth-child(2) { --ring-color: #5f8cff; transition-delay: 100ms; }
.hero-readiness-card:nth-child(3) { --ring-color: #9d77ff; transition-delay: 200ms; }
.is-motion-active .hero-readiness-card { transform: none; opacity: 1; }
.hero-ring { position: relative; display: grid; place-items: center; width: 58px; height: 58px; }
.hero-readiness-card svg { width: 58px; height: 58px; overflow: visible; transform: rotate(-90deg); }
.hero-readiness-card svg circle { fill: none; stroke: rgba(255,255,255,.11); stroke-width: 4; }
.hero-readiness-card svg .hero-ring-value { stroke: var(--ring-color); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1200ms var(--ease) 420ms; }
.is-motion-active .hero-readiness-card:nth-child(1) .hero-ring-value { stroke-dashoffset: 22; }
.is-motion-active .hero-readiness-card:nth-child(2) .hero-ring-value { stroke-dashoffset: 70; }
.is-motion-active .hero-readiness-card:nth-child(3) .hero-ring-value { stroke-dashoffset: 16; }
.hero-ring strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .88rem; letter-spacing: -.05em; }
.hero-ring strong small { margin-top: 1px; font-size: .38rem; opacity: .58; }
.hero-readiness-card > span { color: rgba(255,255,255,.58); font-size: .42rem; font-weight: 730; letter-spacing: .11em; }

.hero-plan-connector { position: relative; height: 19px; margin-block: -4px; }
.hero-plan-connector::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(#5f8cff, rgba(95,140,255,.18)); content: ""; }
.hero-plan-connector i { position: absolute; top: 0; left: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: #8fc8ff; box-shadow: 0 0 15px #5f8cff; animation: hero-data-flow 1.9s var(--ease-inout) 800ms infinite; }

.hero-daily-plan {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 20px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(143,200,255,.24);
  border-radius: 15px;
  background: linear-gradient(120deg, rgba(47,107,255,.16), rgba(8,11,18,.90) 45%, rgba(8,11,18,.82));
  color: #fff;
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 800ms var(--ease) 380ms, opacity 550ms ease 380ms;
}

.hero-daily-plan::after { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%); content: ""; transform: translateX(-120%); }
.is-motion-active .hero-daily-plan { transform: none; opacity: 1; }
.is-motion-active .hero-daily-plan::after { animation: hero-plan-sheen 3.8s var(--ease-inout) 1.2s infinite; }
.hero-plan-copy { display: grid; gap: 3px; }
.hero-plan-copy small { color: #8fc8ff; font-size: .43rem; font-weight: 760; letter-spacing: .12em; }
.hero-plan-copy strong { font-size: 1.55rem; letter-spacing: -.055em; }
.hero-plan-copy span { color: rgba(255,255,255,.55); font-size: .52rem; }
.hero-plan-track { align-self: center; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.10); }
.hero-plan-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5f8cff,#39d69f); transition: width 1100ms var(--ease) 850ms; }
.is-motion-active .hero-plan-track i { width: 78%; }
.hero-start-session { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 126px; padding: 11px 13px; border-radius: 9px; background: #fff; color: #080a0e; font-size: .47rem; font-weight: 780; letter-spacing: .08em; }
.hero-start-session i { color: var(--blue); font-size: .9rem; font-style: normal; }

.hero-coach-brief {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 15px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(7,9,14,.78);
  color: #fff;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 750ms var(--ease) 720ms, opacity 500ms ease 720ms;
}

.is-motion-active .hero-coach-brief { transform: none; opacity: 1; }
.hero-coach-mark { display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg,#2f6bff,#15275c); box-shadow: 0 9px 22px rgba(47,107,255,.25); }
.hero-coach-mark img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-coach-brief > div { display: grid; gap: 4px; }
.hero-coach-brief > div small { color: #8fc8ff; font-size: .38rem; font-weight: 760; letter-spacing: .11em; }
.hero-coach-brief > div strong { font-size: .55rem; line-height: 1.35; }
.hero-coach-brief > div > span { color: rgba(255,255,255,.55); font-size: .44rem; line-height: 1.35; }
.hero-plan-ready { color: rgba(255,255,255,.50); font-size: .38rem; font-weight: 730; letter-spacing: .09em; white-space: nowrap; }
.hero-plan-ready i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #39d69f; box-shadow: 0 0 0 4px rgba(57,214,159,.10); }
.hero-motion-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 17px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.48); font-size: .42rem; font-weight: 720; letter-spacing: .11em; }

@keyframes hero-data-flow { 0% { transform: translateY(0); opacity: 0; } 28% { opacity: 1; } 100% { transform: translateY(17px); opacity: 0; } }
@keyframes hero-plan-sheen { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.hero-core,
.hero-lens,
.hero-poster-slot-body,
.hero-poster-slot-coach {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.hero-poster-slot-main {
  top: auto;
  right: 0;
  bottom: 72px;
  left: auto;
  width: clamp(290px, 21vw, 350px);
  transform: translate3d(0, var(--hero-device-y, 22px), 0);
  transition: transform 1100ms var(--ease), opacity 850ms ease;
}

.hero[data-active] .hero-poster-slot-main {
  --hero-device-y: 0px;
}

.hero-poster,
.editorial-poster,
.gallery-poster {
  border-color: rgba(255, 255, 255, .18);
  border-radius: clamp(25px, 2.7vw, 43px);
  box-shadow: var(--shadow-phone);
}

.hero-metric-chip {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
  background: rgba(9, 9, 9, .70);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .24);
  color: var(--white);
  -webkit-backdrop-filter: blur(20px) saturate(115%);
  backdrop-filter: blur(20px) saturate(115%);
}

.hero-poster-slot-main .hero-metric-chip {
  right: auto;
  bottom: 16%;
  left: -34%;
}

.hero-metric-copy small,
.hero-metric-copy em {
  color: rgba(255, 255, 255, .76);
}

.hero-proof {
  position: relative;
  z-index: 6;
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 0;
  border-top: 1px solid rgba(255, 255, 255, .24);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
  background: rgba(5, 6, 8, .58);
  box-shadow: none;
  color: var(--white);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
  backdrop-filter: blur(18px) saturate(110%);
}

.hero-proof > div {
  min-height: 92px;
  padding: 18px 24px;
}

.hero-proof > div + div {
  border-left-color: rgba(255, 255, 255, .18);
  padding-left: 24px;
}

.hero-proof dt {
  color: var(--white);
  font-size: .88rem;
  font-weight: 680;
  letter-spacing: -.01em;
}

.hero-proof dd {
  margin-top: 4px;
  color: rgba(255, 255, 255, .80);
  font-size: .75rem;
  line-height: 1.35;
}

/* Product system — an index, not a template grid. */
.system-section {
  padding: clamp(120px, 14vw, 230px) 0;
  background: #f0efea;
}

.system-shell {
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(55px, 9vw, 150px);
}

.system-section .section-heading {
  top: calc(var(--header-h) + 54px);
}

.system-section .section-heading h2 {
  max-width: 8.2ch;
  font-size: clamp(3.8rem, 6vw, 7.2rem);
}

.system-index {
  display: block;
  border-top: 1px solid var(--line);
}

.system-line,
.system-line:nth-child(2),
.system-line:nth-child(3),
.system-line:nth-child(9) {
  display: grid;
  grid-template-columns: 46px minmax(150px, .78fr) minmax(230px, 1.22fr) 26px;
  gap: 18px;
  align-items: center;
  min-height: 118px;
  padding: 22px 0;
  overflow: visible;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transition: color 350ms ease, padding 450ms var(--ease), background-color 350ms ease;
}

.system-line:hover,
.system-line.is-focus {
  padding-inline: 18px;
  border-color: var(--line);
  background: var(--ink);
  box-shadow: none;
  color: var(--white);
}

.system-line > span,
.system-line:nth-child(3) > span {
  width: auto;
  height: auto;
  justify-content: start;
  border: 0;
  border-radius: 0;
  color: var(--blue);
  font-size: .56rem;
}

.system-line h3 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(1.38rem, 2vw, 2.25rem);
  line-height: 1;
}

.system-line p,
.system-line:nth-child(3) p {
  max-width: 54ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.55;
}

.system-line:hover p,
.system-line.is-focus p {
  color: rgba(255, 255, 255, .76);
}

.system-line > i {
  position: static;
  justify-self: end;
  color: var(--blue);
}

/* Intelligence continuum — a clean editorial block with no sticky scroll trap. */
.continuum-section {
  min-height: auto;
  padding: clamp(125px, 13vw, 205px) 0;
  background: #080808;
}

.continuum-sticky {
  position: relative;
  top: auto;
  display: block;
  min-height: auto;
  overflow: visible;
}

.continuum-sticky::after {
  display: none;
}

.continuum-content {
  grid-template-columns: minmax(0, 1fr) minmax(420px, .72fr);
  gap: clamp(70px, 10vw, 165px);
  align-items: center;
}

.continuum-content .eyebrow {
  color: #8fc8ff;
}

.continuum-content h2 {
  max-width: 9.6ch;
  font-size: clamp(3.8rem, 5.7vw, 6.8rem);
}

.process-ledger li {
  grid-template-columns: 38px 1fr;
  padding: 27px 0;
  opacity: 1;
  transition: opacity 450ms ease, transform 650ms var(--ease);
}

.process-ledger li.is-focus {
  opacity: 1;
  transform: none;
}

.process-ledger h3 {
  font-size: clamp(1.5rem, 2.1vw, 2.35rem);
}

.process-ledger p {
  color: rgba(255, 255, 255, .78);
}

.process-ledger li.is-focus p {
  color: rgba(255, 255, 255, .84);
}

/* Product chapters — generous, editorial, and never a collage. */
.product-scene {
  min-height: min(1040px, 100svh);
  padding: clamp(115px, 12vw, 190px) 0;
  border-color: var(--line);
}

.product-shell {
  position: relative;
  z-index: 2;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(60px, 10vw, 170px);
}

.product-copy h2,
.community-copy h2 {
  max-width: 8.4ch;
  font-size: clamp(4rem, 6.5vw, 7.9rem);
}

.product-copy > p,
.community-copy > p {
  margin-top: 30px;
  color: var(--ink-soft);
  font-size: clamp(.96rem, 1.2vw, 1.13rem);
  line-height: 1.6;
}

.precision-list {
  gap: 0;
  margin-top: 35px;
  border-top: 1px solid currentColor;
}

.precision-list li {
  padding: 15px 0 15px 34px;
  border-bottom: 1px solid rgba(9, 9, 9, .12);
  color: var(--ink-soft);
  font-size: .77rem;
}

.precision-list li::before {
  top: 50%;
  width: 17px;
  background: var(--blue);
}

.editorial-media {
  min-height: 680px;
}

.editorial-media::before {
  top: auto;
  bottom: 7%;
  left: 50%;
  width: min(34vw, 460px);
  height: 78px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(47, 107, 255, .24), rgba(47, 107, 255, .07) 48%, transparent 72%);
  filter: blur(13px);
  transform: translateX(-50%);
}

.editorial-halo {
  display: none;
}

.editorial-halo::before,
.editorial-halo::after {
  border-radius: 0;
}

.editorial-media .editorial-poster {
  width: min(28vw, 380px);
  transform: translate3d(0, var(--chapter-device-y, 24px), 0);
  transition: transform 1000ms var(--ease), box-shadow 350ms ease;
}

.product-scene[data-active] .editorial-poster {
  --chapter-device-y: 0px;
}

.editorial-media .editorial-poster:hover {
  border-color: rgba(47, 107, 255, .48);
  box-shadow: 0 62px 135px rgba(0, 0, 0, .28), 0 0 0 1px rgba(47, 107, 255, .22);
}

.workout-section {
  position: relative;
  isolation: isolate;
  background: #faf9f5;
}

.workout-section::before,
.nutrition-section::before,
.progress-section::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  content: "";
  opacity: .46;
  filter: saturate(.72) contrast(.92);
  transform: scale(1.018);
}

.workout-section::before {
  background-image: url("/strenqo-assets/photos/workout-story-light.webp");
  background-position: 58% center;
}

.nutrition-section::before {
  background-image: url("/strenqo-assets/photos/nutrition-story-light.webp");
  background-position: 42% center;
}

.progress-section::before {
  background-image: url("/strenqo-assets/photos/progress-story-light.webp");
  background-position: 50% center;
}

.workout-section::after,
.nutrition-section::after,
.progress-section::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(250, 249, 245, .96) 0%, rgba(250, 249, 245, .72) 45%, rgba(250, 249, 245, .42) 100%);
  content: "";
  pointer-events: none;
}

/* A hairline seam only marks a real change of luminance. It is intentionally
   quieter than a divider band so adjacent chapters still read as one story. */
.scene-seam {
  position: absolute;
  z-index: 8;
  top: 0;
  right: var(--gutter);
  left: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor 16%, currentColor 84%, transparent);
  color: rgba(255, 255, 255, .24);
  pointer-events: none;
}

.scene-seam::after {
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(56px, 7vw, 104px);
  height: 3px;
  background: var(--blue);
  content: "";
}

.scene-seam-light {
  color: rgba(9, 9, 9, .20);
}

/* Native product scenes: real capabilities, reduced to legible motion rather
   than another stack of screenshots. The app catalogue below remains the
   source of visual product proof. */
.feature-motion {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: min(45vw, 670px);
  min-height: 550px;
  padding: clamp(24px, 2.4vw, 38px);
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, .15);
  border-radius: clamp(22px, 2.2vw, 34px);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 42px 110px rgba(15, 22, 35, .14), inset 0 1px 0 rgba(255, 255, 255, .74);
  color: var(--ink);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  backdrop-filter: blur(18px) saturate(112%);
  transform: translateY(18px);
  opacity: .01;
  transition: transform 1000ms var(--ease), opacity 700ms ease;
}

.feature-motion::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(9, 9, 9, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 9, 9, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 74%);
  mask-image: linear-gradient(135deg, #000, transparent 74%);
}

.feature-motion.is-motion-active {
  transform: translateY(0);
  opacity: 1;
}

.coach-section .feature-motion,
.connected-section .feature-motion,
.recovery-section .feature-motion {
  border-color: rgba(255, 255, 255, .17);
  background: rgba(7, 9, 13, .82);
  box-shadow: 0 50px 130px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: var(--white);
}

.coach-section .feature-motion::before,
.connected-section .feature-motion::before,
.recovery-section .feature-motion::before {
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
}

.motion-topline {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid currentColor;
  color: inherit;
  font-size: .63rem;
  font-weight: 720;
  letter-spacing: .19em;
  opacity: .62;
}

.motion-topline i,
.motion-topline i::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  content: "";
}

.motion-topline i {
  position: relative;
  box-shadow: 0 0 0 5px rgba(47, 107, 255, .13);
}

.motion-topline i::after {
  position: absolute;
  inset: 0;
  animation: motion-pulse 2.4s ease-out infinite;
}

.chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: .59rem;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .62;
}

.chart-heading b {
  font-size: .72rem;
  letter-spacing: 0;
}

.motion-grid-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  opacity: .09;
}

.motion-area {
  fill: url("#none");
  opacity: 0;
  transition: opacity 1000ms ease 400ms;
}

.motion-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms var(--ease) 250ms;
}

.is-motion-active .motion-line {
  stroke-dashoffset: 0;
}

.is-motion-active .motion-area {
  fill: rgba(47, 107, 255, .11);
  opacity: 1;
}

/* Workout summary. */
.workout-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, .12);
  border-radius: 14px;
  background: rgba(9, 9, 9, .11);
}

.workout-metrics > span {
  display: grid;
  gap: 9px;
  padding: 22px 18px;
  background: rgba(255, 255, 255, .88);
  transform: translateY(15px);
  opacity: 0;
  transition: transform 700ms var(--ease), opacity 500ms ease;
}

.workout-metrics > span:nth-child(2) { transition-delay: 90ms; }
.workout-metrics > span:nth-child(3) { transition-delay: 180ms; }
.is-motion-active .workout-metrics > span { transform: none; opacity: 1; }

.workout-metrics small,
.workout-footer,
.recovery-baseline,
.connected-status,
.nutrition-review {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.workout-metrics strong {
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  letter-spacing: -.04em;
}

.workout-metrics em {
  font-size: .64rem;
  font-style: normal;
  font-weight: 560;
  letter-spacing: 0;
  opacity: .54;
}

.workout-chart {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 220px;
  margin-top: 27px;
  padding: 22px 22px 10px;
  border: 1px solid rgba(9, 9, 9, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .64);
}

.workout-chart svg {
  width: 100%;
  height: 165px;
  overflow: visible;
}

.workout-footer,
.recovery-baseline,
.connected-status,
.nutrition-review {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}

.workout-footer i,
.connected-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--blue);
}

/* Recovery and sleep. */
.recovery-rings {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 38px 0 32px;
}

.recovery-rings > span {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--score) * 1turn), rgba(255, 255, 255, .09) 0);
  transform: rotate(-90deg) scale(.82);
  opacity: 0;
  transition: transform 900ms var(--ease), opacity 600ms ease;
}

.recovery-rings > span:nth-child(2) { transition-delay: 100ms; }
.recovery-rings > span:nth-child(3) { transition-delay: 200ms; }
.is-motion-active .recovery-rings > span { transform: rotate(-90deg) scale(1); opacity: 1; }

.recovery-rings > span > i {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  background: #090c11;
  color: var(--white);
  font-style: normal;
  transform: rotate(90deg);
}

.recovery-rings strong {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  letter-spacing: -.06em;
}

.recovery-rings small {
  margin-top: 3px;
  font-size: .45rem;
  font-weight: 720;
  letter-spacing: .11em;
  opacity: .6;
}

.sleep-timeline {
  position: relative;
  z-index: 2;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}

.sleep-stage-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 27px;
}

.sleep-stage-row small {
  font-size: .46rem;
  font-weight: 650;
  letter-spacing: .08em;
  opacity: .48;
}

.sleep-stage-row > span {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.sleep-stage-row i {
  position: absolute;
  top: 0;
  left: var(--left);
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #7ba3ff);
  transition: width 1000ms var(--ease) 450ms;
}

.sleep-stage-row:nth-child(4) i { background: linear-gradient(90deg, #7c55f5, #a98aff); }
.sleep-stage-row:nth-child(5) i { background: linear-gradient(90deg, #3129a9, #5849d9); }
.is-motion-active .sleep-stage-row i { width: var(--width); }

.recovery-baseline b {
  position: relative;
  width: 32%;
  height: 3px;
  background: rgba(255, 255, 255, .14);
}

.recovery-baseline b i {
  position: absolute;
  top: -3px;
  left: 52%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #39d69f;
  box-shadow: 0 0 0 5px rgba(57, 214, 159, .12);
}

.recovery-baseline strong { color: #78e6bd; }

/* Intelligence: visible context flows into one answer. */
.coach-signals {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 34px;
}

.coach-signals > span {
  position: relative;
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  transform: translateY(-12px);
  opacity: 0;
  transition: transform 700ms var(--ease), opacity 500ms ease;
}

.coach-signals > span:nth-child(2) { transition-delay: 100ms; }
.coach-signals > span:nth-child(3) { transition-delay: 200ms; }
.is-motion-active .coach-signals > span { transform: none; opacity: 1; }

.coach-signals > span > i {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 5px rgba(94, 214, 232, .10);
}

.coach-signals small {
  font-size: .49rem;
  font-weight: 700;
  letter-spacing: .13em;
  opacity: .52;
}

.coach-signals strong {
  font-size: 1rem;
  letter-spacing: -.02em;
}

.coach-connections {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 145px;
  margin-top: -2px;
  overflow: visible;
}

.coach-connections path {
  fill: none;
  stroke: rgba(94, 214, 232, .48);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1200ms var(--ease) 350ms;
}

.coach-connections circle {
  fill: var(--cyan);
  opacity: 0;
  transition: opacity 400ms ease 900ms;
}

.is-motion-active .coach-connections path { stroke-dashoffset: 0; }
.is-motion-active .coach-connections circle { opacity: 1; }

.coach-answer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: -10px;
  padding: 25px;
  border: 1px solid rgba(94, 214, 232, .24);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(47, 107, 255, .14), rgba(94, 214, 232, .04));
  transform: translateY(18px);
  opacity: 0;
  transition: transform 800ms var(--ease) 750ms, opacity 600ms ease 750ms;
}

.is-motion-active .coach-answer { transform: none; opacity: 1; }
.coach-answer > span { color: #8fc8ff; font-size: .54rem; font-weight: 720; letter-spacing: .15em; }
.coach-answer > span i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cyan); }
.coach-answer strong { font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: -.04em; }
.coach-answer p { max-width: 42ch; margin: 0; color: rgba(255, 255, 255, .66); font-size: .72rem; line-height: 1.55; }
.coach-answer > b { display: flex; gap: 5px; margin-top: 3px; }
.coach-answer > b i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); animation: coach-thinking 1.5s ease-in-out infinite; }
.coach-answer > b i:nth-child(2) { animation-delay: 140ms; }
.coach-answer > b i:nth-child(3) { animation-delay: 280ms; }

/* Nutrition capture and review. */
.nutrition-capture {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  margin-top: 30px;
}

.nutrition-scan,
.nutrition-result {
  position: relative;
  min-height: 210px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(9, 9, 9, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .66);
}

.nutrition-scan {
  display: grid;
  place-items: center;
  background-image:
    linear-gradient(180deg, rgba(6, 7, 8, .06), rgba(6, 7, 8, .32)),
    url("/strenqo-assets/photos/nutrition-story-light.webp");
  background-size: cover;
  background-position: 55% 68%;
}

.scan-corners {
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 10px;
}

.meal-detect {
  position: relative;
  width: 112px;
  height: 82px;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 10px;
  box-shadow: 0 0 0 999px rgba(8, 9, 11, .11);
  transform: scale(.84);
  opacity: 0;
  transition: transform 750ms var(--ease) 300ms, opacity 450ms ease 300ms;
}

.meal-detect i {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #39d69f;
}

.is-motion-active .meal-detect {
  transform: scale(1);
  opacity: 1;
}
.nutrition-scan > b { position: absolute; z-index: 2; right: 22px; left: 22px; top: 28px; height: 2px; background: var(--blue); box-shadow: 0 0 18px rgba(47, 107, 255, .76); }
.is-motion-active .nutrition-scan > b { animation: scan-pass 2.6s var(--ease-inout) 350ms 2 both; }
.nutrition-scan > small { position: absolute; bottom: 30px; color: #fff; font-size: .46rem; font-weight: 700; letter-spacing: .13em; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); opacity: .86; }

.nutrition-result {
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: #111725;
  color: var(--white);
}

.nutrition-result::before {
  position: absolute;
  top: 18px;
  right: 18px;
  left: 18px;
  height: 112px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  background-image:
    linear-gradient(180deg, transparent 46%, rgba(7, 8, 10, .42)),
    url("/strenqo-assets/photos/nutrition-story-light.webp");
  background-size: cover;
  background-position: 53% 66%;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .28);
  content: "";
  transform: scale(.94);
  opacity: 0;
  transition: transform 850ms var(--ease) 450ms, opacity 500ms ease 450ms;
}

.is-motion-active .nutrition-result::before { transform: scale(1); opacity: 1; }
.nutrition-result::before { display: none; }
.result-barcode {
  position: absolute;
  top: 28px;
  left: 50%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  width: 104px;
  height: 74px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: #f7f7f4;
  box-shadow: 0 16px 35px rgba(0,0,0,.28);
  transform: translateX(-50%) scale(.9);
  opacity: 0;
  transition: transform 750ms var(--ease) 420ms, opacity 450ms ease 420ms;
}
.result-barcode i { width: 3px; background: #0b0d12; }
.result-barcode i:nth-child(2), .result-barcode i:nth-child(6) { width: 6px; }
.result-barcode i:nth-child(4), .result-barcode i:nth-child(8) { width: 2px; }
.result-barcode i:nth-child(5) { width: 8px; }
.is-motion-active .result-barcode { transform: translateX(-50%) scale(1); opacity: 1; }
.nutrition-result > span { margin-bottom: 10px; color: #8fc8ff; font-size: .48rem; font-weight: 720; letter-spacing: .12em; }
.nutrition-result > span i { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: #39d69f; }
.nutrition-result strong { font-size: 1.18rem; letter-spacing: -.03em; }
.nutrition-result small { margin-top: 5px; color: rgba(255, 255, 255, .55); font-size: .58rem; }

.macro-ledger {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.macro-ledger > span { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 15px; border: 1px solid rgba(9, 9, 9, .11); border-radius: 12px; background: rgba(255, 255, 255, .58); }
.macro-ledger small { font-size: .45rem; font-weight: 720; letter-spacing: .1em; opacity: .55; }
.macro-ledger strong { font-size: .68rem; }
.macro-ledger > span > i { grid-column: 1 / -1; height: 3px; overflow: hidden; border-radius: 99px; background: rgba(9, 9, 9, .09); }
.macro-ledger b { display: block; width: 0; height: 100%; background: var(--macro); transition: width 1000ms var(--ease) 700ms; }
.is-motion-active .macro-ledger b { width: var(--fill); }
.nutrition-review strong { color: var(--blue); }
.nutrition-review strong i { font-style: normal; }

/* Connected devices and live wrist data. */
.connected-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 405px;
}

.watch-device {
  position: relative;
  z-index: 2;
  width: min(54%, 270px);
  aspect-ratio: .82;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 31%;
  background: #050505;
  box-shadow: 0 35px 70px rgba(0, 0, 0, .48), 0 0 0 9px rgba(255, 255, 255, .055);
  transform: scale(.9);
  opacity: 0;
  transition: transform 900ms var(--ease), opacity 600ms ease;
}

.is-motion-active .watch-device { transform: scale(1); opacity: 1; }
.watch-device::before, .watch-device::after { position: absolute; left: 50%; width: 43%; height: 32px; border-radius: 9px; background: #171717; content: ""; transform: translateX(-50%); }
.watch-device::before { top: -26px; }
.watch-device::after { bottom: -26px; }
.watch-screen { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; padding: 30px 19px 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); border-radius: 27%; background: radial-gradient(circle at 50% 37%, rgba(47, 107, 255, .25), transparent 42%), #090a0e; }
.watch-screen > span { font-size: .47rem; font-weight: 720; letter-spacing: .14em; opacity: .5; }
.watch-screen > strong { margin-top: 8px; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.07em; }
.watch-screen > strong small { font-size: .52rem; letter-spacing: .05em; opacity: .55; }
.watch-screen svg { width: 100%; align-self: center; overflow: visible; }
.watch-screen svg path { fill: none; stroke: #5f8cff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1500ms var(--ease) 450ms; }
.is-motion-active .watch-screen svg path { stroke-dashoffset: 0; }
.watch-screen > div { display: flex; align-items: end; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.watch-screen > div small { font-size: .46rem; font-weight: 700; letter-spacing: .12em; opacity: .5; }
.watch-screen > div b { font-size: 1.05rem; }

.device-orbit { position: absolute; inset: 0; }
.device-orbit::before { position: absolute; inset: 11% 16%; border: 1px solid rgba(95, 140, 255, .20); border-radius: 50%; content: ""; }
.device-orbit > span { position: absolute; top: var(--y); left: var(--x); min-width: 93px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: rgba(10, 11, 15, .86); color: rgba(255, 255, 255, .7); font-size: .46rem; font-weight: 700; letter-spacing: .09em; text-align: center; transform: translateY(9px); opacity: 0; transition: transform 700ms var(--ease) 500ms, opacity 500ms ease 500ms; }
.device-orbit > span:nth-child(2) { transition-delay: 620ms; }
.device-orbit > span:nth-child(3) { transition-delay: 740ms; }
.device-orbit > span:nth-child(4) { transition-delay: 860ms; }
.is-motion-active .device-orbit > span { transform: none; opacity: 1; }
.device-orbit > span i { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: #39d69f; }
.connected-status strong { color: #8fc8ff; }

/* Progress and personal records. */
.progress-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding-bottom: 20px;
}

.progress-hero span { display: grid; gap: 5px; }
.progress-hero small { color: var(--blue); font-size: .54rem; font-weight: 720; letter-spacing: .14em; }
.progress-hero strong { font-size: clamp(2.2rem, 4vw, 3.7rem); letter-spacing: -.07em; }
.motion-progress .progress-hero strong { font-size: clamp(1.45rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -.05em; }
.progress-hero > i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.35rem; font-style: normal; transform: scale(.7); opacity: 0; transition: transform 700ms var(--ease) 600ms, opacity 500ms ease 600ms; }
.is-motion-active .progress-hero > i { transform: scale(1); opacity: 1; }
.progress-chart { position: relative; z-index: 2; flex: 1; min-height: 250px; padding: 20px 16px 0; border: 1px solid rgba(9, 9, 9, .11); border-radius: 16px; background: rgba(255, 255, 255, .64); }
.progress-chart svg { width: 100%; height: 210px; overflow: visible; }
.progress-chart circle { fill: var(--blue); opacity: 0; transition: opacity 400ms ease 1450ms; }
.is-motion-active .progress-chart circle { opacity: 1; }
.chart-heading { position: absolute; z-index: 2; top: 16px; right: 17px; left: 17px; display: flex; justify-content: space-between; color: rgba(9,9,9,.52); font-size: .43rem; font-weight: 720; letter-spacing: .11em; }
.chart-heading b { color: var(--blue); font-size: inherit; }
.progress-axis { position: absolute; right: 17px; bottom: 13px; left: 17px; display: flex; justify-content: space-between; font-size: .44rem; font-weight: 680; letter-spacing: .1em; opacity: .42; }
.progress-axis i { font-style: normal; }
.progress-insight { position: relative; z-index: 3; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: -12px 14px 0; padding: 13px 15px; border: 1px solid rgba(47,107,255,.20); border-radius: 11px; background: rgba(246,248,255,.94); box-shadow: 0 14px 35px rgba(16,35,76,.12); }
.progress-insight > span { color: var(--blue); font-size: .42rem; font-weight: 760; letter-spacing: .11em; white-space: nowrap; }
.progress-insight > span i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #39d69f; }
.progress-insight > strong { font-size: .56rem; line-height: 1.35; letter-spacing: .01em; }
.progress-ledger { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border-top: 1px solid rgba(9, 9, 9, .12); }
.progress-ledger > span { display: grid; gap: 6px; padding: 16px 10px 0; border-left: 1px solid rgba(9, 9, 9, .12); }
.progress-ledger > span:first-child { padding-left: 0; border-left: 0; }
.progress-ledger small { font-size: .43rem; font-weight: 720; letter-spacing: .12em; opacity: .48; }
.progress-ledger strong { font-size: .62rem; letter-spacing: .04em; }

@keyframes motion-pulse {
  0% { transform: scale(1); opacity: .65; }
  70%, 100% { transform: scale(3); opacity: 0; }
}

@keyframes coach-thinking {
  0%, 100% { transform: translateY(0); opacity: .32; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes scan-pass {
  0% { top: 28px; }
  50% { top: calc(100% - 32px); }
  100% { top: 28px; }
}

/* Recovery is a photo-led chapter; the interface is a precise annotation. */
.recovery-section {
  min-height: max(900px, 100svh);
  color: var(--white);
  background: #0b0d10;
}

.recovery-section::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("/strenqo-assets/photos/recovery-story.webp");
  background-size: cover;
  background-position: center;
  content: "";
  transform: translate3d(0, var(--recovery-parallax, 0px), 0) scale(1.04);
}

.recovery-section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 10, .10), rgba(7, 8, 10, .44) 43%, rgba(7, 8, 10, .94) 78%);
  content: "";
}

.recovery-section .product-shell {
  grid-template-columns: 1.2fr .8fr;
}

.recovery-section .product-copy {
  max-width: 610px;
  padding: 45px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(7, 8, 10, .78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.recovery-section .product-copy h2 {
  max-width: 7.7ch;
  font-size: clamp(3.5rem, 5vw, 6.2rem);
}

.recovery-section .product-copy > p,
.recovery-section .precision-list li {
  color: rgba(255, 255, 255, .78);
}

.recovery-section .precision-list li {
  border-color: rgba(255, 255, 255, .15);
}

.recovery-section .editorial-media {
  justify-items: start;
}

.recovery-section .editorial-media .editorial-poster {
  width: min(26vw, 350px);
  margin-left: 2vw;
}

.recovery-section .editorial-media::before,
.recovery-section .editorial-halo {
  display: none;
}

/* Intelligence: pure black, product first, no decorative AI gradients. */
.coach-section {
  min-height: max(900px, 100svh);
  background: #070707;
}

.coach-section::before {
  position: absolute;
  inset: 0;
  opacity: .34;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 8vw 8vw;
  content: "";
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 74%);
  mask-image: linear-gradient(90deg, #000, transparent 74%);
}

.coach-section .product-copy > p {
  color: rgba(255, 255, 255, .76);
}

.coach-section .editorial-media::before {
  border: 0;
  background: radial-gradient(ellipse, rgba(94, 214, 232, .24), rgba(47, 107, 255, .09) 48%, transparent 72%);
}

.coach-section .editorial-halo {
  border-color: rgba(94, 214, 232, .16);
}

.coach-section .editorial-poster {
  box-shadow: 0 60px 150px rgba(0, 0, 0, .78), 0 0 90px rgba(47, 107, 255, .09);
}

/* Community: the photo proves the human layer; UI cards annotate it. */
.community-section {
  min-height: max(880px, 100svh);
  padding: clamp(120px, 12vw, 190px) 0;
  color: var(--white);
  background: #171716;
}

.community-section::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: url("/strenqo-assets/photos/community-story.webp");
  background-size: cover;
  background-position: center;
  content: "";
  transform: translate3d(0, var(--community-parallax, 0px), 0) scale(1.035);
}

.community-section::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, .78), rgba(7, 7, 7, .30) 55%, rgba(7, 7, 7, .24)),
    linear-gradient(0deg, rgba(7, 7, 7, .72), transparent 55%);
  content: "";
}

.community-shell {
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(50px, 8vw, 130px);
}

.community-copy {
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, .17);
  background: rgba(7, 7, 7, .72);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}

.community-copy > p,
.community-copy .precision-list li {
  color: rgba(255, 255, 255, .78);
}

.community-copy .precision-list li {
  border-color: rgba(255, 255, 255, .15);
}

.community-visual {
  min-height: 610px;
}

.community-visual::before {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(40vw, 550px);
  border-color: rgba(255, 255, 255, .16);
  border-radius: 0;
  box-shadow: none;
  transform: rotate(4deg);
}

.community-beacon {
  top: 8%;
  left: auto;
  right: 8%;
  width: 142px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(7, 7, 7, .74);
  box-shadow: 0 25px 70px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.community-beacon small {
  color: #8fc8ff;
}

.community-card {
  border-color: rgba(255, 255, 255, .20);
  border-radius: 5px;
  background: rgba(8, 8, 8, .72);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  color: var(--white);
}

.community-card-primary {
  right: 3%;
  bottom: 18%;
}

.community-card-secondary {
  bottom: 5%;
  left: 4%;
}

.community-card-primary > small {
  color: rgba(255, 255, 255, .68);
}

.community-card-primary > span b:last-child {
  background: rgba(255, 255, 255, .18);
}

.community-avatars b {
  border-color: #0a0a0a;
  background: #151b2d;
}

.community-pulse {
  display: none;
}

.community-visual::before,
.community-beacon,
.community-card,
.community-pulse {
  display: none;
}

.community-console {
  position: relative;
  width: min(100%, 690px);
  min-height: 570px;
  margin-left: auto;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 26px;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    rgba(7, 10, 16, .88);
  background-size: 36px 36px;
  box-shadow: 0 42px 110px rgba(0, 0, 0, .52);
  color: #fff;
  -webkit-backdrop-filter: blur(19px) saturate(115%);
  backdrop-filter: blur(19px) saturate(115%);
}

.community-console-head { display: flex; align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.38); font-size: .58rem; font-weight: 760; letter-spacing: .12em; }
.community-console-head .is-selected { color: #fff; }
.community-console-head i { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #39d69f; box-shadow: 0 0 0 5px rgba(57,214,159,.10); }
.community-filters { display: grid; grid-template-columns: 1.3fr .7fr; gap: 10px; padding: 18px 0 12px; }
.community-filters > span { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: rgba(255,255,255,.045); }
.community-filters small { color: rgba(255,255,255,.38); font-size: .4rem; font-weight: 720; letter-spacing: .12em; }
.community-filters strong { font-size: .57rem; letter-spacing: .04em; }
.community-ranking { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.community-ranking li { display: grid; grid-template-columns: 30px minmax(116px, 1fr) minmax(58px, 1.1fr) 68px; gap: 10px; align-items: center; min-height: 63px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 11px; background: rgba(255,255,255,.035); }
.community-ranking li > i { color: #8fc8ff; font-size: .55rem; font-style: normal; font-weight: 720; }
.community-ranking li > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
.community-ranking li > span b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #152443; color: #8fc8ff; font-size: .45rem; }
.community-ranking li > span strong { overflow: hidden; font-size: .54rem; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.community-ranking li > em { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); font-style: normal; }
.community-ranking li > em::after { display: block; width: 0; height: 100%; border-radius: inherit; background: #5f8cff; content: ""; transition: width 1100ms var(--ease) 550ms; }
.is-motion-active .community-ranking li > em::after { width: var(--rank); }
.community-ranking li > small { color: rgba(255,255,255,.64); font-size: .47rem; font-weight: 700; letter-spacing: .05em; text-align: right; }
.community-team-panel { display: grid; grid-template-columns: 1fr 44px auto; gap: 12px; align-items: center; margin-top: 14px; padding: 16px; border: 1px solid rgba(95,140,255,.25); border-radius: 12px; background: rgba(47,107,255,.08); }
.community-team-panel > div { display: grid; gap: 4px; }
.community-team-panel > div span { color: #8fc8ff; font-size: .42rem; font-weight: 740; letter-spacing: .12em; }
.community-team-panel > div strong { font-size: .65rem; }
.community-team-panel > i { width: 35px; height: 35px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5f8cff, #17264b 72%); }
.community-team-panel > p { display: flex; gap: 5px; margin: 0; }
.community-team-panel > p span { padding: 6px 7px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; color: rgba(255,255,255,.55); font-size: .37rem; font-weight: 700; letter-spacing: .06em; }
.community-console-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.43); font-size: .42rem; font-weight: 700; letter-spacing: .09em; }
.community-console-foot > span i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #39d69f; }
.community-console-foot strong { color: rgba(255,255,255,.70); font-size: inherit; }

.nutrition-section {
  position: relative;
  isolation: isolate;
  background: #ece9e1;
}

.nutrition-section .editorial-media::before {
  background: radial-gradient(ellipse, rgba(205, 179, 126, .34), rgba(205, 179, 126, .09) 48%, transparent 72%);
}

.connected-section {
  color: var(--white);
  background: #0b0b0b;
}

.connected-section .product-copy > p {
  color: rgba(255, 255, 255, .76);
}

.connected-section .editorial-media::before {
  border: 0;
  background: radial-gradient(ellipse, rgba(47, 107, 255, .34), rgba(47, 107, 255, .09) 48%, transparent 72%);
}

.connected-section .editorial-halo {
  border-color: rgba(255, 255, 255, .16);
}

.connected-section .editorial-media::after {
  display: none;
}

.connected-note {
  color: rgba(255, 255, 255, .82) !important;
}

.progress-section {
  position: relative;
  isolation: isolate;
  background: #fafafa;
}

.nutrition-section::after {
  background: linear-gradient(90deg, rgba(239, 236, 228, .42), rgba(239, 236, 228, .76) 50%, rgba(239, 236, 228, .96));
}

.progress-section::after {
  background: linear-gradient(90deg, rgba(250, 250, 250, .96), rgba(250, 250, 250, .72) 45%, rgba(250, 250, 250, .42));
}

/* Catalogue — each screenshot gets space; no wall of phone mockups. */
.showcase-section {
  padding: clamp(130px, 14vw, 220px) 0;
  background: #090909;
}

.showcase-section .eyebrow {
  color: #8fc8ff;
}

.showcase-section .section-heading h2 {
  max-width: 7.8ch;
  font-size: clamp(4rem, 6.5vw, 8rem);
}

.showcase-section .section-heading > p:last-child {
  color: rgba(255, 255, 255, .74);
}

.gallery-instruction {
  color: rgba(255, 255, 255, .70);
}

.screen-gallery {
  margin-top: 85px;
  overscroll-behavior-y: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.screen-gallery::-webkit-scrollbar {
  display: none;
}

.gallery-track {
  gap: clamp(26px, 3vw, 56px);
  padding: 22px max(var(--gutter), calc((100vw - var(--shell)) / 2)) 95px;
}

.gallery-item {
  position: relative;
  width: clamp(280px, 21vw, 350px);
  opacity: .68;
  transition: opacity 500ms ease;
}

.gallery-item:has(.is-current),
.gallery-item:hover,
.gallery-item:focus-within {
  opacity: 1;
}

.gallery-item::after {
  position: absolute;
  top: calc(100% + 22px);
  left: 0;
  color: rgba(255, 255, 255, .72);
  content: "VIEW " attr(aria-posinset) " / 19";
  font-family: Menlo, Monaco, monospace;
  font-size: .61rem;
  letter-spacing: .16em;
}

.gallery-poster {
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 50px 110px rgba(0, 0, 0, .42);
}

.gallery-poster::before {
  top: 18px;
  left: 18px;
  border-radius: 4px;
  background: rgba(5, 5, 5, .70);
}

.gallery-poster.is-current {
  border-color: rgba(143, 200, 255, .48);
  box-shadow: 0 58px 130px rgba(0, 0, 0, .58), 0 0 0 1px rgba(143, 200, 255, .12);
}

/* Q&A and final — quiet, confident closure. */
.qa-section {
  padding: clamp(130px, 14vw, 220px) 0;
  background: #f1f0ec;
}

.qa-shell {
  grid-template-columns: .70fr 1.30fr;
  gap: clamp(60px, 10vw, 160px);
}

.qa-section .section-heading h2 {
  max-width: 7ch;
  font-size: clamp(4rem, 6vw, 7.5rem);
}

.qa-ledger summary {
  min-height: 104px;
}

.qa-ledger summary strong {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-weight: 560;
}

.final-section {
  min-height: max(820px, 90svh);
  background: #080808;
}

.final-section::before {
  position: absolute;
  inset: 0;
  opacity: .7;
  background:
    radial-gradient(circle at 50% 45%, rgba(47, 107, 255, .30), transparent 22%),
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: auto, 9vw 9vw, 9vw 9vw;
  content: "";
}

.final-orbit {
  width: min(76vw, 820px);
  border-color: rgba(255, 255, 255, .12);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(var(--final-orbit-angle, 3deg));
  transition: transform 1400ms var(--ease);
}

.final-section[data-active] .final-orbit {
  --final-orbit-angle: 0deg;
}

.final-orbit::before,
.final-orbit::after {
  border-radius: 0;
}

.final-shell h2 {
  max-width: 8ch;
  font-size: clamp(4rem, 7vw, 8rem);
}

.store-button {
  border-radius: 4px;
  background: rgba(255, 255, 255, .035);
}

.final-mark {
  border-radius: 12px;
}

.final-shell > p:not(.eyebrow):not(.final-release):not(.final-note) {
  color: rgba(255, 255, 255, .74);
}

.store-button span,
.final-note {
  color: rgba(255, 255, 255, .76);
}

.site-footer {
  background: #080808;
}

.footer-brand-block p,
.footer-links h3,
.footer-bottom {
  color: rgba(255, 255, 255, .72);
}

.footer-links a {
  font-size: .74rem;
}

/* Extra V14 motion states. */
.js [data-premium-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 1000ms var(--ease);
}

.js [data-premium-reveal].is-premium-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-progress {
  height: 3px;
  background: rgba(255, 255, 255, .08);
}

.scroll-progress span {
  background: var(--blue);
}

@media (max-width: 1180px) {
  .hero-shell {
    grid-template-columns: minmax(0, .92fr) minmax(380px, .68fr);
  }

  .hero-copy h1 {
    font-size: clamp(4.2rem, 7.3vw, 7rem);
  }

  .hero-poster-slot-main {
    width: clamp(280px, 27vw, 340px);
  }

  .feature-motion {
    width: min(48vw, 620px);
  }

  .hero-metric-chip {
    display: grid;
  }

  .system-line,
  .system-line:nth-child(2),
  .system-line:nth-child(3),
  .system-line:nth-child(9) {
    grid-template-columns: 38px minmax(140px, .75fr) minmax(210px, 1.25fr) 20px;
  }

  .recovery-section .product-shell {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  :root {
    --header-h: 68px;
  }

  .site-header::after {
    inset-inline: var(--gutter);
  }

  .site-header:not(.is-scrolled) .nav-toggle {
    color: var(--white);
  }

  .site-header .nav-menu {
    color: var(--ink);
    background: #f7f7f4;
  }

  .site-header .nav-menu > a:not(.nav-cta),
  .site-header:not(.is-scrolled) .nav-menu > a:not(.nav-cta) {
    display: block;
    opacity: 1;
  }

  .site-header .nav-menu .nav-cta {
    background: var(--ink);
    color: var(--white);
  }

  .site-header .lang-switcher summary {
    border-color: var(--line);
    background: transparent;
  }

  .hero {
    min-height: auto;
  }

  .hero::before {
    background-position: 61% center;
  }

  .hero::after {
    background:
      linear-gradient(180deg, rgba(5, 6, 8, .94) 0%, rgba(5, 6, 8, .68) 45%, rgba(5, 6, 8, .34) 72%, rgba(5, 6, 8, .78) 100%),
      linear-gradient(90deg, rgba(5, 6, 8, .68), transparent 85%);
  }

  .hero-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: auto;
  }

  .hero-copy {
    max-width: 680px;
  }

  .hero-motion {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .hero-stage {
    min-height: 640px;
  }

  .hero-poster-slot-main {
    right: 4vw;
    bottom: 15px;
    width: min(43vw, 280px);
  }

  .hero-poster-slot-main .hero-metric-chip {
    right: auto;
    left: -40%;
  }

  .hero-proof {
    grid-row: 3;
  }

  .system-shell,
  .continuum-content,
  .product-shell,
  .community-shell,
  .qa-shell,
  .recovery-section .product-shell {
    grid-template-columns: 1fr;
  }

  .system-section .section-heading,
  .qa-section .section-heading {
    position: static;
  }

  .system-section .section-heading h2,
  .qa-section .section-heading h2 {
    max-width: 10ch;
  }

  .system-line,
  .system-line:nth-child(2),
  .system-line:nth-child(3),
  .system-line:nth-child(9) {
    grid-template-columns: 38px minmax(180px, .8fr) minmax(260px, 1.2fr) 20px;
  }

  .continuum-section {
    min-height: auto;
    padding-block: 115px;
  }

  .continuum-content {
    align-items: start;
  }

  .product-scene {
    min-height: auto;
  }

  .feature-motion {
    width: min(100%, 700px);
    margin-inline: auto;
  }

  .product-shell-reverse .product-copy,
  .product-shell-reverse .editorial-media {
    order: initial;
  }

  .editorial-media .editorial-poster,
  .recovery-section .editorial-media .editorial-poster {
    width: min(52vw, 380px);
  }

  .recovery-section::after {
    background: linear-gradient(180deg, rgba(7, 8, 10, .32), rgba(7, 8, 10, .90) 55%);
  }

  .recovery-section .product-copy {
    order: 1;
    max-width: 640px;
    margin-left: auto;
  }

  .recovery-section .editorial-media {
    order: 2;
    justify-items: center;
    min-height: 520px;
  }

  .recovery-section .editorial-media .editorial-poster {
    margin-left: 0;
  }

  .community-copy {
    max-width: 650px;
  }

  .community-visual {
    min-height: 570px;
  }

  .gallery-item {
    width: min(52vw, 350px);
  }
}

@media (max-width: 680px) {
  :root {
    --gutter: 20px;
    --radius-l: 22px;
  }

  body::before {
    opacity: .025;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 38px);
  }

  .hero::before {
    background-position: 67% center;
  }

  .hero-shell {
    min-height: auto;
  }

  .hero-motion {
    width: 100%;
    min-height: 470px;
    margin-top: 10px;
    padding: 20px;
    border-radius: 21px;
  }

  .hero-performance-stage { gap: 11px; margin-top: 14px; }
  .hero-readiness-row { gap: 6px; }
  .hero-readiness-card { gap: 5px; padding: 9px 7px; border-radius: 10px; }
  .hero-ring { width: 43px; height: 43px; }
  .hero-readiness-card svg { width: 43px; height: 43px; }
  .hero-ring strong { font-size: .66rem; }
  .hero-ring strong small { font-size: .3rem; }
  .hero-readiness-card > span { font-size: .31rem; letter-spacing: .07em; }
  .hero-plan-connector { height: 14px; }
  .hero-daily-plan { gap: 11px; padding: 15px; }
  .hero-plan-copy strong { font-size: 1.3rem; }
  .hero-start-session { min-width: 112px; padding-inline: 10px; font-size: .4rem; }
  .hero-coach-brief { grid-template-columns: 34px 1fr; padding: 12px; }
  .hero-coach-mark { width: 32px; height: 32px; }
  .hero-plan-ready { display: none; }
  .hero-motion-footer { gap: 6px; font-size: .35rem; letter-spacing: .07em; }

  .hero-copy h1 {
    max-width: 9.3ch;
    font-size: clamp(3.25rem, 15.7vw, 5.2rem);
  }

  .hero-subtitle {
    max-width: 39ch;
    font-size: .91rem;
  }

  .hero-actions {
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions .button {
    width: auto;
    padding-inline: 15px;
    font-size: .67rem;
  }

  .hero-stage {
    min-height: 540px;
    margin-top: 12px;
  }

  .hero-poster-slot-main {
    right: 0;
    bottom: 8px;
    width: min(62vw, 245px);
  }

  .hero-poster-slot-main .hero-metric-chip {
    bottom: 18%;
    left: -56%;
    min-width: 170px;
    padding: 10px 12px;
  }

  .hero-proof {
    display: none;
  }

  .signal-track {
    min-height: 52px;
  }

  .system-section,
  .showcase-section,
  .qa-section {
    padding-block: 100px;
  }

  .system-section .section-heading h2,
  .product-copy h2,
  .community-copy h2,
  .showcase-section .section-heading h2,
  .qa-section .section-heading h2,
  .final-shell h2 {
    font-size: clamp(3rem, 14.4vw, 5rem);
  }

  .system-index {
    overflow: hidden;
  }

  .system-line,
  .system-line:nth-child(2),
  .system-line:nth-child(3),
  .system-line:nth-child(9) {
    grid-template-columns: 30px 1fr 20px;
    gap: 12px;
    min-height: 110px;
    padding-block: 19px;
  }

  .system-line p {
    grid-column: 2 / -1;
    padding-right: 18px;
  }

  .system-line > i {
    grid-column: 3;
    grid-row: 1;
  }

  .system-line:hover,
  .system-line.is-focus {
    padding-inline: 12px;
  }

  .continuum-section {
    min-height: auto;
  }

  .continuum-sticky {
    padding: 0;
  }

  .continuum-sticky::after {
    display: none;
  }

  .continuum-content h2 {
    font-size: clamp(3.25rem, 15vw, 5.25rem);
  }

  .product-scene,
  .community-section {
    padding-block: 95px;
  }

  .product-copy > p,
  .community-copy > p {
    font-size: .92rem;
  }

  .editorial-media {
    min-height: 490px;
  }

  .feature-motion {
    width: 100%;
    min-height: 480px;
    padding: 20px;
    border-radius: 22px;
  }

  .motion-topline {
    padding-bottom: 17px;
    font-size: .54rem;
  }

  .workout-metrics {
    margin-top: 19px;
  }

  .workout-metrics > span {
    gap: 6px;
    padding: 15px 10px;
  }

  .workout-metrics small {
    font-size: .43rem;
    letter-spacing: .08em;
  }

  .workout-chart {
    min-height: 200px;
    margin-top: 18px;
    padding: 17px 14px 7px;
  }

  .workout-chart svg {
    height: 145px;
  }

  .recovery-rings {
    gap: 10px;
    margin: 27px 0 24px;
  }

  .recovery-rings > span > i {
    inset: 8px;
  }

  .recovery-rings small {
    font-size: .38rem;
  }

  .sleep-timeline {
    padding: 16px;
  }

  .recovery-baseline {
    font-size: .44rem;
  }

  .coach-signals {
    gap: 7px;
    margin-top: 24px;
  }

  .coach-signals > span {
    padding: 13px 10px;
  }

  .coach-signals small {
    font-size: .39rem;
    letter-spacing: .08em;
  }

  .coach-connections {
    height: 112px;
  }

  .coach-answer {
    padding: 19px;
  }

  .nutrition-capture {
    gap: 10px;
    margin-top: 22px;
  }

  .nutrition-scan,
  .nutrition-result {
    min-height: 210px;
    padding: 16px;
  }

  .meal-detect {
    width: 82px;
    height: 62px;
  }

  .nutrition-result::before {
    top: 14px;
    right: 14px;
    left: 14px;
    height: 92px;
  }

  .result-barcode { top: 18px; width: 82px; height: 56px; padding: 9px; gap: 3px; }

  .motion-progress .progress-hero strong { font-size: 1.25rem; }
  .progress-insight { grid-template-columns: 1fr; gap: 5px; margin-inline: 8px; }
  .progress-insight > strong { font-size: .5rem; }

  .community-console { min-height: 520px; padding: 18px; border-radius: 20px; }
  .community-console-head { gap: 16px; }
  .community-ranking li { grid-template-columns: 24px minmax(98px, 1fr) minmax(35px, .7fr) 52px; gap: 7px; min-height: 57px; padding: 8px; }
  .community-ranking li > span b { width: 26px; height: 26px; }
  .community-ranking li > span strong { font-size: .46rem; }
  .community-ranking li > small { font-size: .4rem; }
  .community-team-panel { grid-template-columns: 1fr 34px; padding: 12px; }
  .community-team-panel > p { grid-column: 1 / -1; }
  .community-console-foot { font-size: .36rem; }

  .macro-ledger {
    gap: 7px;
  }

  .macro-ledger > span {
    padding: 11px 8px;
  }

  .macro-ledger small {
    font-size: .37rem;
  }

  .connected-core {
    min-height: 360px;
  }

  .watch-device {
    width: min(57%, 220px);
  }

  .device-orbit > span {
    min-width: 72px;
    padding: 8px;
    font-size: .38rem;
  }

  .progress-chart {
    min-height: 220px;
  }

  .progress-chart svg {
    height: 180px;
  }

  .progress-ledger small {
    font-size: .35rem;
    letter-spacing: .08em;
  }

  .progress-ledger strong {
    font-size: .5rem;
  }

  .editorial-media::before,
  .editorial-halo {
    width: min(82vw, 360px);
  }

  .editorial-media::before {
    height: 58px;
  }

  .editorial-media .editorial-poster,
  .recovery-section .editorial-media .editorial-poster {
    width: min(69vw, 320px);
  }

  .workout-section .editorial-media::after,
  .nutrition-section .editorial-media::after,
  .connected-section .editorial-media::after,
  .progress-section .editorial-media::after {
    right: 0;
    bottom: 3%;
  }

  .recovery-section {
    background: #0b0d10;
  }

  .recovery-section::before {
    background-position: 39% center;
  }

  .recovery-section .product-copy,
  .community-copy {
    padding: 26px;
  }

  .recovery-section .editorial-media {
    min-height: 470px;
  }

  .community-section::before {
    background-position: 35% center;
  }

  .community-section::after {
    background: linear-gradient(180deg, rgba(7, 7, 7, .62), rgba(7, 7, 7, .86) 62%, rgba(7, 7, 7, .94));
  }

  .community-visual {
    min-height: 480px;
  }

  .community-beacon {
    top: 0;
    right: 0;
    left: auto;
    width: 118px;
  }

  .community-beacon span {
    font-size: 2.6rem;
  }

  .community-card-primary {
    right: 0;
    bottom: 20%;
    width: 92%;
  }

  .community-card-secondary {
    bottom: 1%;
    left: 0;
    width: 68%;
  }

  .showcase-heading {
    display: block;
  }

  .gallery-instruction {
    margin-top: 30px;
  }

  .gallery-track {
    gap: 44px;
    padding-inline: var(--gutter);
  }

  .gallery-item {
    width: min(76vw, 320px);
    opacity: .72;
  }

  .qa-ledger summary {
    grid-template-columns: 26px 1fr 24px;
    min-height: 94px;
  }

  .final-orbit {
    width: 94vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .recovery-section::before,
  .community-section::before,
  .hero-poster-slot-main,
  .editorial-media .editorial-poster,
  .continuum-words,
  .final-orbit {
    transform: none !important;
  }

  .process-ledger li {
    opacity: 1;
  }

  .gallery-item {
    opacity: 1;
  }

  .feature-motion,
  .hero-readiness-card,
  .hero-daily-plan,
  .hero-coach-brief,
  .workout-metrics > span,
  .recovery-rings > span,
  .coach-signals > span,
  .coach-answer,
  .nutrition-result::before,
  .result-barcode,
  .watch-device,
  .device-orbit > span,
  .progress-hero > i {
    transform: none !important;
    opacity: 1 !important;
  }

  .hero-readiness-card:nth-child(1) .hero-ring-value { stroke-dashoffset: 22 !important; }
  .hero-readiness-card:nth-child(2) .hero-ring-value { stroke-dashoffset: 70 !important; }
  .hero-readiness-card:nth-child(3) .hero-ring-value { stroke-dashoffset: 16 !important; }

  .motion-line,
  .coach-connections path,
  .watch-screen svg path {
    stroke-dashoffset: 0 !important;
  }

  .sleep-stage-row i,
  .community-ranking li > em::after,
  .macro-ledger b {
    width: var(--width, var(--fill, var(--rank))) !important;
  }

  .motion-topline i::after,
  .hero-plan-connector i,
  .hero-daily-plan::after,
  .coach-answer > b i,
  .nutrition-scan > b {
    animation: none !important;
  }
}