/* Arry Website — graphite palette, muted premium accents */
:root{
  /* Graphite background */
  --bg0:#16181B;
  --bg1:#1E2126;
  /* App palette (from DesignTokens.swift) */
  --sage:#7D8693;
  --warmGray:#6F6962;
  --sand:#4A5F7E;
  --blush:#3F5270;
  --softMint:#5A7398;

  /* Matte-glass surface (ArryColors.surfaceGlass) */
  --card: rgba(29,31,36,.72);
  --cardSolid:#2A2D33;
  --text:#ECE8E3;
  --muted:#A49F99;
  --muted2:#8A8580;
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.36);
  --shadow2: 0 10px 34px rgba(0,0,0,.30);

  /* Secondary accents that exist in app */
  --accent:#6F8FB8;
  --mint:#88A6CC;
  --blue:#9DBAE0;
  /* Primary CTA: app accent (avoid “tech-blue”) */
  --btnPrimary: #5E83BC;
  --btnPrimaryHover: #6F95D0;
  --btnPrimaryText:#FFFFFF;
  /* Stress indicator (Recovery tab): app amber/orange */
  --stressAmber:#FFA74D;
  --warning:#FFA74D;
  --ok:#8C99AA;
  --danger:#C44C4C;
  /* Tab accents (from app): Flow, Sleep, Activity, Heart */
  --flowAccent:#7E93B3;
  --sleepAccent:#8FA4C4;
  --activityAccent:#6A88B3;
  --heartAccent:#8E9EC2;
  --sunAccent:#C7A777;
  --surfaceGlow: rgba(255,255,255,.12);
  --surfaceTint: rgba(90,112,145,.22);
  --heroInk:#F2EEE9;

  /* Two radii only: large (surfaces), small (controls) */
  --radius: 20px;
  --radiusSm: 10px;
  --radius2: 20px;
  --container: 1120px;
  --ease: cubic-bezier(.2,.9,.2,1);
  --blur: 16px;

  /* Spacing scale (vertical rhythm) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  --s9: 48px;
  --s10: 64px;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Dark: deep graphite */
    --bg0:#121417;
    --bg1:#191C21;
    --card: rgba(24,26,31,.70);
    --cardSolid: rgba(37,40,46,.92);
    --text:#ECE8E3;
    --muted:#A6A19B;
    --muted2:#8A8580;
    --border: rgba(255,255,255,.09);
    --shadow: 0 20px 70px rgba(0,0,0,.5);
    --shadow2: 0 12px 34px rgba(0,0,0,.4);

    --flowA:#121417;
    --flowB:#191C21;
    --btnPrimary: #648DCB;
    --btnPrimaryHover: #76A0DE;
    --btnPrimaryText:#FFFFFF;
    --stressAmber:#FFA74D;
    --warning:#FFA74D;
    --flowAccent:#8CA1C1;
    --sleepAccent:#96ACCF;
    --activityAccent:#7998C4;
    --heartAccent:#9EADD1;
    --sunAccent:#CEAF7F;
    --surfaceGlow: rgba(255,255,255,.06);
    --surfaceTint: rgba(92, 113, 145, .24);
    --heroInk:#F2F0EE;
  }
}

/* Theme variants */
body.theme-activity{
  /* Activity-style graphite variant */
  --bg0:#15181C;
  --bg1:#1D2228;
  --accent:#6E8DB8;
  --mint:#8BA9D0;
  --btnPrimary:#5E84BE;
  --btnPrimaryHover:#7198D5;
  --flowAccent:#8198BA;
  --sleepAccent:#93A9CC;
  --activityAccent:#708EB8;
  --heartAccent:#93A3C8;
  --sunAccent:#C8AA7A;
}
@media (prefers-color-scheme: dark){
  body.theme-activity{
    --bg0:#101317;
    --bg1:#181D23;
    --card: rgba(23,26,31,.68);
    --surfaceTint: rgba(90, 112, 144, .24);
    --surfaceGlow: rgba(255,255,255,.08);
  }
}

@media (prefers-color-scheme: dark){
  body{
    background: linear-gradient(180deg, var(--flowA), var(--flowB));
  }
  .btn.primary{
    border: 1px solid color-mix(in srgb, var(--btnPrimary) 58%, white 42%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--btnPrimary) 92%, transparent), color-mix(in srgb, var(--btnPrimary) 78%, transparent));
    color: var(--btnPrimaryText);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--btnPrimary) 30%, transparent);
  }
  .btn.primary:hover{
    background: var(--btnPrimaryHover);
    border-color: var(--btnPrimaryHover);
  }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Якоря: не прятать под шапкой при переходе по ссылкам */
#recovery, #activity, #flow, #sleep, #heart, #features, #privacy, #faq{
  scroll-margin-top: 88px;
}
#main{ position: relative; z-index: 1; }
body{
  margin:0;
  position: relative;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, system-ui, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 780px at 8% -12%, color-mix(in srgb, var(--softMint) 44%, transparent), transparent 70%),
    radial-gradient(980px 680px at 92% 18%, color-mix(in srgb, var(--blush) 36%, transparent), transparent 72%),
    radial-gradient(1020px 760px at 52% 108%, color-mix(in srgb, var(--sand) 42%, transparent), transparent 72%),
    linear-gradient(165deg, var(--bg0) 0%, var(--bg1) 100%);
  min-height: 100vh;
  line-height:1.55;
}
/* Global keyframes */
@keyframes floatDriftA{
  0%{ transform: translate3d(-4%, -2%, 0) scale(1); }
  50%{ transform: translate3d(5%, 4%, 0) scale(1.08); }
  100%{ transform: translate3d(-4%, -2%, 0) scale(1); }
}
@keyframes floatDriftB{
  0%{ transform: translate3d(4%, 3%, 0) scale(1); }
  50%{ transform: translate3d(-4%, -5%, 0) scale(1.06); }
  100%{ transform: translate3d(4%, 3%, 0) scale(1); }
}
@keyframes ctaShine{
  0%{ transform: translateX(-130%) rotate(16deg); opacity: 0; }
  18%{ opacity: .28; }
  50%{ opacity: .18; }
  100%{ transform: translateX(130%) rotate(16deg); opacity: 0; }
}
@keyframes ctaPulse{
  0%, 100%{ box-shadow: 0 10px 26px color-mix(in srgb, var(--btnPrimary) 26%, transparent); }
  50%{ box-shadow: 0 18px 46px color-mix(in srgb, var(--btnPrimary) 35%, transparent); }
}

/* Scroll progress */
.scrollProgress{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--mint), var(--accent), var(--heartAccent));
  z-index: 120;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--mint) 35%, transparent);
  pointer-events: none;
}

/* Ambient floating glows */
.ambientFx{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ambientOrb{
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  opacity: .28;
  mix-blend-mode: multiply;
}
.ambientOrb.a{
  width: min(45vw, 620px);
  height: min(45vw, 620px);
  top: -14%;
  left: -10%;
  background: radial-gradient(circle, color-mix(in srgb, var(--softMint) 85%, transparent), transparent 70%);
  animation: floatDriftA 24s ease-in-out infinite;
}
.ambientOrb.b{
  width: min(40vw, 560px);
  height: min(40vw, 560px);
  right: -8%;
  bottom: -12%;
  background: radial-gradient(circle, color-mix(in srgb, var(--blush) 82%, transparent), transparent 70%);
  animation: floatDriftB 28s ease-in-out infinite;
}


/* Premium: subtle noise overlay (tactile, non-flat) */
.noise-overlay{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
@media (prefers-color-scheme: dark){
  .noise-overlay{ opacity: .045; mix-blend-mode: soft-light; }
}

a{ color:inherit; text-decoration:none; }
main :is(p, li) a:not(.btn):not(.btnLink):not(.underline){
  text-decoration: underline;
  text-underline-offset: 3px;
}
img{ max-width:100%; display:block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.skip{
  position:absolute;
  left:-999px;
  top:10px;
  background:var(--cardSolid);
  border:1px solid var(--border);
  padding:10px 14px;
  border-radius:12px;
  box-shadow: var(--shadow2);
}
.skip:focus{ left: 12px; z-index:999; }

/* Focus (WCAG): consistent visible ring, smooth appearance */
:where(a, button, summary, [role="tab"], [role="button"], input, textarea, select):focus-visible{
  outline: 2px solid color-mix(in srgb, var(--accent) 75%, white);
  outline-offset: 3px;
  transition: outline-color .2s ease, outline-offset .2s ease;
}
:where(a, button, summary, [role="tab"], [role="button"], input, textarea, select):focus:not(:focus-visible){
  outline: none;
}

/* Header */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  padding: var(--s3) 0;
  transition: background .25s ease, box-shadow .25s ease;
}
.header-scrolled .headerPill{
  background: color-mix(in srgb, var(--cardSolid) 72%, transparent);
  box-shadow: 0 4px 24px rgba(0,0,0,.08), 0 1px 0 color-mix(in srgb, var(--border) 50%, transparent);
}
@media (prefers-color-scheme: dark){
  .header-scrolled .headerPill{
    background: color-mix(in srgb, var(--cardSolid) 65%, transparent);
    box-shadow: 0 4px 24px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.06);
  }
}
.header .bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s4);
  min-height: 48px;
  padding: 0 var(--s4);
  box-sizing: border-box;
  position: relative;
}
.headerPill{
  background: linear-gradient(180deg, color-mix(in srgb, var(--cardSolid) 52%, transparent), color-mix(in srgb, var(--surfaceTint) 38%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--surfaceGlow));
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0,0,0,.10), inset 0 1px 0 color-mix(in srgb, var(--surfaceGlow) 65%, transparent);
  backdrop-filter: blur(calc(var(--blur) * 1.05));
  -webkit-backdrop-filter: blur(calc(var(--blur) * 1.05));
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 2px 0;
}
.brandLogo{
  width: 28px;
  height: 28px;
  border-radius: var(--radiusSm);
  display: block;
  flex-shrink: 0;
  vertical-align: middle;
}
.brand > span{
  line-height: 1;
}
.logo{
  width: 28px; height: 28px; border-radius: var(--radiusSm);
  background: linear-gradient(135deg, var(--softMint), var(--sage));
}
.nav{
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: var(--s5);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  min-height: 44px;
}
.nav a{
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
  transition: background .28s cubic-bezier(0.22, 1, 0.36, 1), color .28s ease, border-color .28s ease;
}
.nav a:hover{
  background: color-mix(in srgb, var(--cardSolid) 50%, transparent);
  border-color: color-mix(in srgb, var(--border) 65%, transparent);
  color: var(--text);
}

.ctaRow{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  justify-self: end;
}
.langSwitch{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 72%, transparent);
}
.langSwitch-btn{
  border: 0;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.langSwitch-btn:hover{
  color: var(--text);
}
.langSwitch-btn.is-active{
  background: color-mix(in srgb, var(--cardSolid) 90%, transparent);
  color: var(--text);
}
.menuToggle{
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 70%, transparent);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  cursor: pointer;
}
.menuToggleLine{
  width: 16px;
  height: 1.75px;
  border-radius: 999px;
  background: var(--text);
}
.bar.menu-open .menuToggle .menuToggleLine:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.bar.menu-open .menuToggle .menuToggleLine:nth-child(2){ opacity: 0; }
.bar.menu-open .menuToggle .menuToggleLine:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }
.header .btn{
  line-height: 1;
  min-height: 40px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: 10px;
  border-radius: 999px;
  padding: 12px 20px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 70%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  font-weight: 600;
  font-size: 15px;
  transition: transform .32s cubic-bezier(0.22, 1, 0.36, 1), background .32s ease, border-color .32s ease, box-shadow .32s cubic-bezier(0.22, 1, 0.36, 1);
  user-select:none;
}
.btn:hover{ transform: translateY(-3px) scale(1.01); border-color: color-mix(in srgb, var(--border) 100%, transparent); box-shadow: 0 14px 40px rgba(0,0,0,.08); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn.large{
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 650;
}
.btn.primary{
  border: 1px solid color-mix(in srgb, var(--btnPrimary) 85%, black);
  background: var(--btnPrimary);
  color: var(--btnPrimaryText);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--btnPrimary) 26%, transparent);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: ctaPulse 3.8s ease-in-out infinite;
}
.btn.primary::after{
  content: "";
  position: absolute;
  inset: -120% 0;
  width: 48%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translateX(-130%) rotate(16deg);
  pointer-events: none;
}
.btn.primary:hover{
  transform: translateY(-3px) scale(1.02);
  background: var(--btnPrimaryHover);
  border-color: var(--btnPrimaryHover);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--btnPrimaryHover) 32%, transparent);
}
.btn.primary:hover::after{ animation: ctaShine 950ms cubic-bezier(0.16, 1, 0.3, 1); }
.btn.primary:active{
  transform: translateY(-1px) scale(.98);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--btnPrimary) 22%, transparent);
}
.btn.secondary{
  background: color-mix(in srgb, var(--cardSolid) 52%, transparent);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--text);
}
.btn.secondary:hover{
  background: color-mix(in srgb, var(--cardSolid) 72%, transparent);
  border-color: var(--border);
}
.btn.ghost{
  background: color-mix(in srgb, var(--cardSolid) 42%, transparent);
  border-color: color-mix(in srgb, var(--border) 72%, transparent);
  box-shadow: none;
}
.btn.appstore-pending{
  background: color-mix(in srgb, var(--cardSolid) 88%, transparent);
  border-color: color-mix(in srgb, var(--border) 90%, transparent);
  color: var(--text);
}
.btnLink{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  position: relative;
  transition: color .28s var(--ease), transform .28s var(--ease);
}
.btnLink::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.btnLink:hover{ transform: translateX(4px); }
.btnLink:hover::after{ transform: scaleX(1); transform-origin: left; }
a.underline{
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  background-size: 0 1px;
  background-position: 0 calc(100% - 1px);
  transition: background-size .35s cubic-bezier(0.22, 1, 0.36, 1);
}
a.underline:hover{ background-size: 100% 1px; }
.dot{ width:8px; height:8px; border-radius:99px; background: var(--mint); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 28%, transparent); }

.tag{
  display:inline-flex; align-items:center; gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cardSolid) 45%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  color: var(--muted);
  font-size: 13px;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  letter-spacing: -0.01em;
}

/* Hero: Centered */
.hero{
  min-height: calc(var(--app-vh, 1vh) * 100);
  display: flex;
  align-items: center;
  padding: calc(var(--s10) * 1.05) 0 calc(var(--s10) * 1.0);
  text-align: center;
  box-sizing: border-box;
}
.hero .container{
  width: 100%;
}
.heroCentered{
  max-width: 960px;
  margin: 0 auto;
}
/* Hero entrance: staggered fade + slide up (each .hero-reveal-item gets delay) */
.heroCentered .hero-reveal-item{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1), transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
body.hero-ready .heroCentered .hero-reveal-item{
  opacity: 1;
  transform: translateY(0);
}
.heroCentered .hero-reveal-item:nth-child(1){ transition-delay: 0ms; }
.heroCentered .hero-reveal-item:nth-child(2){ transition-delay: 80ms; }
.heroCentered .hero-reveal-item:nth-child(3){ transition-delay: 160ms; }
.heroCentered .hero-reveal-item:nth-child(4){ transition-delay: 240ms; }
.heroCentered .hero-reveal-item:nth-child(5){ transition-delay: 320ms; }
.heroCentered .hero-reveal-item:nth-child(6){ transition-delay: 400ms; }
.heroCentered .hero-reveal-item:nth-child(7){ transition-delay: 480ms; }
.heroStats{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  margin: var(--s6) 0 var(--s7);
}
.statBadge{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  border-radius: var(--radiusSm);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  min-width: 140px;
}
.statValue{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.statLabel{
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.heroCarousel{
  max-width: 420px;
  margin: var(--s8) auto var(--s6);
  position: relative;
  z-index: 0;
}
.carouselTrack{
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.carouselShot{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.carouselShot.active{ opacity: 1; }
.carouselDots{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.carouselDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
  padding: 0;
  box-shadow: none;
}
.carouselDot.active{
  background: var(--mint);
  transform: scale(1.2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mint) 28%, transparent);
}
.carouselCaption{
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--s6);
  align-items:center;
}

.shots{
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
}
.shot{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: none;
  box-shadow: none;
  overflow: hidden;
}
.shot.primary{
  transform: translateY(2px);
}
.shot.secondary{
  opacity: .98;
  transform: translateY(-2px);
}
.eyebrow{
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.h1{
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.05em;
  margin: 0 0 18px;
  font-weight: 800;
  color: var(--heroInk);
  text-wrap: balance;
}
.lead{
  color: var(--muted);
  font-size: 19px;
  margin: 0 auto 22px;
  max-width: 54ch;
  text-align: center;
}
.heroActions{
  display: flex;
  align-items: center;
  gap: var(--s5);
  flex-wrap: wrap;
}
.heroSecondary{
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: color .2s var(--ease);
}
.heroSecondary:hover{ color: var(--text); }
.heroMetaPill{
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  color: var(--muted2);
  font-size: 13px;
}
.heroMetaPill .dot{ flex-shrink: 0; }
.trustSignals{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s5);
  flex-wrap: wrap;
  margin: var(--s6) 0;
}
.trustBadge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ok) 18%, var(--border));
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .02em;
  transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .3s ease, border-color .3s ease;
}
.trustBadge:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ok) 28%, var(--border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ok) 12%, transparent);
}
/* Iconify: inherit color and size */
.iconify{
  display: inline-block;
  vertical-align: middle;
}
.iconify svg{
  display: block;
}
.trustIcon{
  width: 20px;
  height: 20px;
  color: var(--ok);
  flex-shrink: 0;
}
.trustIcon svg{
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}
.meta{
  margin-top: 14px;
  color: var(--muted2);
  font-size: 13px;
}
.meta a{ color: var(--text); }

.card{
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: var(--shadow);
  border-radius: var(--radius2);
  padding: 18px;
}

.phone{
  position: relative;
  aspect-ratio: 10 / 19;
  border-radius: 34px;
  padding: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--cardSolid) 95%, transparent), color-mix(in srgb, var(--cardSolid) 85%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: var(--shadow);
}
.phone::before{
  content:"";
  position:absolute; inset:-18px;
  background: radial-gradient(200px 260px at 20% 10%, color-mix(in srgb, var(--flowAccent) 28%, transparent), transparent 60%),
              radial-gradient(260px 220px at 80% 35%, color-mix(in srgb, var(--activityAccent) 22%, transparent), transparent 60%);
  filter: blur(10px);
  z-index: -1;
}
.screen{
  height:100%;
  border-radius: 26px;
  overflow:hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg0) 92%, transparent), color-mix(in srgb, var(--bg1) 92%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.screenTop{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 14px 8px;
}
.timePill{
  font-size: 12px; color: var(--muted);
  padding: 7px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--cardSolid) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.score{
  padding: 10px 14px 14px;
}
.scoreLabel{ color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.scoreValue{
  display:flex; align-items:baseline; gap:10px;
}
.scoreNum{
  font-size: 42px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.scoreSub{ color: var(--muted); font-weight: 600; }
.miniCards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 14px;
}
.mini{
  border-radius: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--cardSolid) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.miniTitle{ color: var(--muted2); font-size: 12px; margin-bottom: 6px; }
.miniValue{ font-weight: 700; letter-spacing: -0.01em; }
.bar{
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 45%, transparent);
  overflow:hidden;
  margin-top: 10px;
}
.bar > span{
  display:block; height:100%;
  width: 68%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--accent));
}
.spark{
  margin: 8px 14px 0;
  height: 90px;
  border-radius: 18px;
  background:
    radial-gradient(120px 120px at 18% 30%, color-mix(in srgb, var(--flowAccent) 22%, transparent), transparent 60%),
    radial-gradient(130px 130px at 75% 60%, color-mix(in srgb, var(--activityAccent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--cardSolid) 55%, transparent), color-mix(in srgb, var(--cardSolid) 35%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  position: relative;
  overflow: hidden;
}
.spark svg{ position:absolute; inset:0; opacity:.95; }

/* Sections */
section{ padding: calc(var(--s10) * 1.05) 0; position: relative; }
section#features{
  padding-top: calc(var(--s10) * 0.55);
  position: relative;
  --parallax-offset-y: 0px;
}
section#features::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--softMint) 5%, transparent), transparent 55%);
  transform: translateY(var(--parallax-offset-y));
  transition: transform .12s ease-out;
  pointer-events: none;
}
section#privacy{
  padding-top: calc(var(--s10) * 0.55);
}
section:nth-child(even){
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--softMint) 3%, transparent), transparent 70%);
}
.sectionHeader{
  margin-bottom: calc(var(--s10) * .85);
  padding: 0 var(--s5);
}
.sectionTitle{
  font-size: clamp(32px, 3.8vw, 52px);
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 12px;
  text-align: center;
  line-height: 1.1;
  color: color-mix(in srgb, var(--text) 92%, var(--accent));
}
.sectionLead{ 
  margin:0 auto calc(var(--s10) * .75); 
  color: var(--muted); 
  max-width: 70ch; 
  font-size: 18px; 
  line-height: 1.45;
  text-align: center;
  letter-spacing: .01em;
  text-wrap: pretty;
}

/* Feature Hero: Large alternating blocks */
.featuresHero{
  display: flex;
  flex-direction: column;
  gap: calc(var(--s10) * 1.8);
  margin-bottom: calc(var(--s10) * 1.5);
}
.featureHero{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--s9) * 1.2);
  align-items: center;
}
.featureHero-reverse{
  direction: rtl;
}
.featureHero-reverse > *{
  direction: ltr;
}
.featureHero-content{
  max-width: 540px;
}
.featureLabel{
  display: inline-block;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.featureHero-title{
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  line-height: 1.08;
}
.featureHero-desc{
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 54ch;
}
.featureMetrics{
  display: flex;
  gap: var(--s6);
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.metric{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metricValue{
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  background: linear-gradient(135deg, var(--accent), var(--mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.metricLabel{
  font-size: 13px;
  color: var(--muted);
}
.featureHero-img{
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.featureHero-img img{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 20px 80px rgba(0,0,0,.14);
}

/* Feature Cards: Compact grid */
.featuresGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s6);
}
.featureCard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: var(--s6);
  box-shadow: var(--shadow2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.featureCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.16);
}
.featureCard-img{
  margin-bottom: var(--s5);
}
.featureCard-img img{
  width: 100%;
  height: auto;
  border-radius: var(--radiusSm);
}
.featureCard-caption{
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 600;
  letter-spacing: .02em;
}
.featureCard-shot{
  width: 100%;
  height: auto;
  border-radius: var(--radiusSm);
  box-shadow: var(--shadow2);
}
.featureCard-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.featureCard-desc{
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

/* App tabs: 5 blocks by app screens (no mockups) */
.appTabs{
  display: flex;
  flex-direction: column;
  gap: var(--s7);
  max-width: 720px;
  margin: 0 auto;
}
.appTab{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s6);
  align-items: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s6) var(--s7);
  box-shadow: var(--shadow2);
  transition: box-shadow .25s var(--ease);
}
.appTab:hover{
  box-shadow: 0 16px 48px rgba(0,0,0,.08);
}
.appTab-num{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  background: var(--bg1);
  border-radius: var(--radiusSm);
  flex-shrink: 0;
}
.appTab-content{
  min-width: 0;
}
.appTab-title{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.2;
}
.appTab-desc{
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 14px;
}
.appTab-desc .mono{ font-family: ui-monospace, monospace; font-weight: 600; color: var(--text); }
.appTab .btnLink{
  font-size: 15px;
  font-weight: 600;
}

/* Showcase: row1 — 3 equal cards, row2 — 2 cards stretched to full width */
.showcaseGrid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s6);
  align-items: stretch;
  width: 100%;
}
.showcaseCard{
  min-width: 0;
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: var(--radius2);
  padding: var(--s6) var(--s7);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(calc(var(--blur) * .9));
  -webkit-backdrop-filter: blur(calc(var(--blur) * .9));
  /* Premium: layered shadow, smooth hover */
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 8px 24px rgba(0,0,0,.06),
    0 24px 48px -12px rgba(0,0,0,.08);
  transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s cubic-bezier(0.22, 1, 0.36, 1), border-color .4s ease;
}
.showcaseCard:hover{
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--border) 95%, var(--accent) 8%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.04),
    0 12px 32px rgba(0,0,0,.08),
    0 32px 64px -12px rgba(0,0,0,.12),
    0 40px 80px -20px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.tiltCard{
  transform-style: preserve-3d;
  will-change: transform;
}
.tiltCard > *{
  transform: translateZ(0);
}
@media (prefers-color-scheme: dark){
  .showcaseCard:hover{
    box-shadow:
      0 2px 4px rgba(0,0,0,.2),
      0 12px 32px rgba(0,0,0,.25),
      0 32px 64px -12px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
}
.showcaseCard:nth-child(1),
.showcaseCard:nth-child(2),
.showcaseCard:nth-child(3){
  grid-column: span 2;
}
.showcaseCard:nth-child(4),
.showcaseCard:nth-child(5){
  grid-column: span 3;
}
/* Recovery card: stress-amber accent (from app stress indicator) */
.showcaseCard:nth-child(1):hover .showcaseIcon,
.showcaseCard:nth-child(1):hover .showcaseTitle{ color: var(--stressAmber); }
.showcaseCard:nth-child(1):hover .btnLink{ color: var(--stressAmber); }
.showcaseCard:nth-child(1)::before{
  background:
    radial-gradient(320px 220px at 12% 18%, color-mix(in srgb, var(--stressAmber) 14%, transparent), transparent 60%),
    radial-gradient(300px 240px at 82% 66%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 62%);
}
.showcaseCard:nth-child(1):hover::before{ opacity: .55; }
/* Flow card */
.showcaseCard:nth-child(2):hover .showcaseIcon,
.showcaseCard:nth-child(2):hover .showcaseTitle{ color: var(--flowAccent); }
.showcaseCard:nth-child(2):hover .btnLink{ color: var(--flowAccent); }
.showcaseCard:nth-child(2)::before{
  background:
    radial-gradient(320px 220px at 12% 18%, color-mix(in srgb, var(--flowAccent) 14%, transparent), transparent 60%),
    radial-gradient(300px 240px at 82% 66%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 62%);
}
.showcaseCard:nth-child(2):hover::before{ opacity: .55; }
/* Sleep card */
.showcaseCard:nth-child(3):hover .showcaseIcon,
.showcaseCard:nth-child(3):hover .showcaseTitle{ color: var(--sleepAccent); }
.showcaseCard:nth-child(3):hover .btnLink{ color: var(--sleepAccent); }
.showcaseCard:nth-child(3)::before{
  background:
    radial-gradient(320px 220px at 12% 18%, color-mix(in srgb, var(--sleepAccent) 14%, transparent), transparent 60%),
    radial-gradient(300px 240px at 82% 66%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 62%);
}
.showcaseCard:nth-child(3):hover::before{ opacity: .55; }
/* Activity card */
.showcaseCard:nth-child(4):hover .showcaseIcon,
.showcaseCard:nth-child(4):hover .showcaseTitle{ color: var(--activityAccent); }
.showcaseCard:nth-child(4):hover .btnLink{ color: var(--activityAccent); }
.showcaseCard:nth-child(4)::before{
  background:
    radial-gradient(320px 220px at 12% 18%, color-mix(in srgb, var(--activityAccent) 14%, transparent), transparent 60%),
    radial-gradient(300px 240px at 82% 66%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 62%);
}
.showcaseCard:nth-child(4):hover::before{ opacity: .55; }
/* Heart card */
.showcaseCard:nth-child(5):hover .showcaseIcon,
.showcaseCard:nth-child(5):hover .showcaseTitle{ color: var(--heartAccent); }
.showcaseCard:nth-child(5):hover .btnLink{ color: var(--heartAccent); }
.showcaseCard:nth-child(5)::before{
  background:
    radial-gradient(320px 220px at 12% 18%, color-mix(in srgb, var(--heartAccent) 14%, transparent), transparent 60%),
    radial-gradient(300px 240px at 82% 66%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 62%);
}
.showcaseCard:nth-child(5):hover::before{ opacity: .55; }
.showcaseCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(320px 220px at 12% 18%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(300px 240px at 82% 66%, color-mix(in srgb, var(--mint) 10%, transparent), transparent 62%);
  opacity: .4;
  pointer-events:none;
  transition: opacity .4s ease;
}
.showcaseCard:hover::before{
  opacity: .55;
}
.showcaseCard > *{ position: relative; }
.showcaseTop{
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
/* Premium icons: refined stroke, subtle hover */
.showcaseIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--cardSolid) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  color: color-mix(in srgb, var(--text) 82%, var(--accent));
  flex-shrink: 0;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1), color .3s ease, border-color .3s ease;
}
.showcaseCard:hover .showcaseIcon{
  color: var(--accent);
  border-color: color-mix(in srgb, var(--border) 90%, var(--accent) 15%);
  transform: scale(1.05);
}
.showcaseIcon .iconify{
  color: inherit;
}
.showcaseIcon svg{
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcaseCard:hover .showcaseIcon svg{
  transform: scale(1.06);
}
.showcaseTitle{
  margin: 0;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  transition: color .3s ease;
}
.showcaseCard:hover .showcaseTitle{
  color: var(--accent);
}
.showcaseKicker{
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted2);
  letter-spacing: .04em;
}
.showcaseDesc{
  margin: 0 0 var(--s6);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: none;
}
.showcaseCard .btnLink{
  margin-top: 2px;
  padding-top: var(--s4);
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: color .3s ease, transform .3s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcaseCard:hover .btnLink{
  color: var(--accent);
}
.showcaseViz{
  margin: 0 0 var(--s4);
  padding: var(--s5);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--cardSolid) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}
.vizCaption{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted2);
}
.vizRow{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  align-items: center;
}
.pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--text);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}
.vizLine{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.vizGauge{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cardSolid) 42%, transparent) 0 58%, transparent 59%),
    conic-gradient(from 210deg,
      color-mix(in srgb, var(--mint) 75%, white 25%) 0 58%,
      color-mix(in srgb, var(--mint) 50%, transparent) 58% 62%,
      color-mix(in srgb, var(--border) 45%, transparent) 62% 100%);
  box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.vizDonutSmall{
  width: 80px;
  height: 80px;
  margin: 0;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cardSolid) 40%, transparent) 0 58%, transparent 59%),
    conic-gradient(
      color-mix(in srgb, var(--mint) 65%, white 35%) 0 28%,
      color-mix(in srgb, var(--accent) 55%, white 45%) 28% 55%,
      color-mix(in srgb, var(--border) 50%, transparent) 55% 78%,
      color-mix(in srgb, var(--border) 35%, transparent) 78% 100%
    );
  box-shadow: 0 4px 16px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.05);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.vizDonut{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  margin: 0 auto;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--cardSolid) 38%, transparent) 0 58%, transparent 59%),
    conic-gradient(
      color-mix(in srgb, var(--mint) 68%, white 32%) 0 32%,
      color-mix(in srgb, var(--accent) 58%, white 42%) 32% 60%,
      color-mix(in srgb, var(--sand) 50%, white 50%) 60% 84%,
      color-mix(in srgb, var(--border) 45%, transparent) 84% 100%
    );
  box-shadow: 0 6px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
.vizBars{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  align-items: end;
  height: 74px;
}
.vizBars span{
  display:block;
  height: 20%;
  border-radius: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--mint) 35%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  opacity: .95;
}
.vizBars span:nth-child(1){ height: 12%; opacity:.55; }
.vizBars span:nth-child(2){ height: 18%; opacity:.62; }
.vizBars span:nth-child(3){ height: 30%; opacity:.72; }
.vizBars span:nth-child(4){ height: 22%; opacity:.66; }
.vizBars span:nth-child(5){ height: 46%; }
.vizBars span:nth-child(6){ height: 66%; }
.vizBars span:nth-child(7){ height: 34%; opacity:.78; }
.vizBars span:nth-child(8){ height: 28%; opacity:.72; }
.vizBars span:nth-child(9){ height: 58%; }
.vizBars span:nth-child(10){ height: 24%; opacity:.66; }
.vizBars span:nth-child(11){ height: 42%; opacity:.82; }
.vizBars span:nth-child(12){ height: 20%; opacity:.62; }

.vizLines{
  width: 100%;
  height: 92px;
  display:block;
}
.vizLines path{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  opacity: .95;
}
.vizLines .l1{ stroke: color-mix(in srgb, var(--accent) 70%, white 30%); }
.vizLines .l2{ stroke: color-mix(in srgb, var(--mint) 70%, white 30%); opacity:.9; }
.vizLines .l3{ stroke: color-mix(in srgb, var(--sand) 55%, white 45%); opacity:.78; }
.vizLegend{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted2);
}
.vizLegend .dot{
  width: 10px; height: 10px; border-radius: 999px; display:inline-block; margin-right: 6px;
  background: var(--border);
}
.vizLegend .dot.ctl{ background: color-mix(in srgb, var(--accent) 70%, white); }
.vizLegend .dot.atl{ background: color-mix(in srgb, var(--mint) 70%, white); }
.vizLegend .dot.tsb{ background: color-mix(in srgb, var(--sand) 70%, white); }
.vizLegend .dot.hrv{ background: color-mix(in srgb, var(--mint) 70%, white); }
.vizLegend .dot.rhr{ background: color-mix(in srgb, var(--accent) 70%, white); }

/* Make the top cards larger like Apple tiles */

/* Old feature blocks (legacy, keep for fallback) */
.featureBlocks{
  display: flex;
  flex-direction: column;
  gap: var(--s10);
  margin-bottom: var(--s9);
}

/* Pair layout: each screenshot aligned with its text */
.featurePairs{
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  column-gap: var(--s9);
  row-gap: var(--s8);
  align-items: center;
}
.featurePair{ display: contents; }
.featurePair-img img{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}
.featurePair-text{
  max-width: 54ch;
}
.featurePair-text .featureBlock-desc{
  line-height: 1.5;
}

/* Training Load: image left, text right (same row) */
.featureBlock{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.featureBlock-row{
  flex-direction: row;
  text-align: left;
  gap: 48px;
  align-items: center;
}
.featureBlock-row .featureBlock-img{
  flex-shrink: 0;
  margin: 0;
  max-width: 280px;
}
/* Tabbed screenshot (Глубокий анализ): one slot, 3 tabs */
.featureBlock-tabs .featureBlock-img{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
}
.featureTabs{
  display: flex;
  gap: var(--s1);
  flex-wrap: wrap;
  padding: var(--s1);
  border-radius: var(--radiusSm);
  background: color-mix(in srgb, var(--border) 35%, var(--bg0));
  border: 1px solid var(--border);
}
.featureTab{
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: var(--radiusSm);
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.featureTab:hover{ color: var(--text); }
.featureTab.active{
  color: var(--text);
  background: var(--cardSolid);
  box-shadow: var(--shadow2);
}
.featureBlock-shot{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: block;
}
.featureBlock-row .featureBlock-content{
  flex: 1;
  min-width: 0;
}
.featureBlock-row .featureBlock-content .featureBlock-title{
  margin-bottom: 10px;
}
.featureBlock-img{
  width: 100%;
  max-width: 320px;
  margin: 0 auto 20px;
}
.featureBlock-img img{
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.featureBlock-title{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  max-width: 36ch;
}
.featureBlock-desc{
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.4;
  max-width: 42ch;
}
.sectionSub{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--text);
}
.gridCompact .feature{
  padding: 14px 16px;
}
.gridCompact .feature h3{
  font-size: 16px;
  margin-bottom: 6px;
}
.gridCompact .feature p{
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid3.gridCompact{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}
.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.feature{
  padding: var(--s5);
  border-radius: var(--radius);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cardSolid) 72%, transparent), color-mix(in srgb, var(--surfaceTint) 54%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--surfaceGlow));
  box-shadow: var(--shadow2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.feature:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
  box-shadow: 0 18px 42px rgba(0,0,0,.10);
}
.ico{
  width: 38px; height: 38px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--flowAccent) 26%, transparent), color-mix(in srgb, var(--activityAccent) 20%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  margin-bottom: 12px;
}
.feature h3{
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.feature p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
}
.step{
  padding: var(--s6);
  border-radius: var(--radius2);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cardSolid) 72%, transparent), color-mix(in srgb, var(--surfaceTint) 56%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--surfaceGlow));
  box-shadow: var(--shadow2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.step:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.stepNum{
  font-weight: 800;
  letter-spacing: -0.04em;
  font-size: 42px;
  background: linear-gradient(135deg, var(--accent), var(--mint));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 16px;
}
.stepTitle{ font-weight: 700; margin: 0 0 8px; font-size: 18px; letter-spacing: -0.02em; }
.stepText{ color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }

.ctaBox{
  padding: var(--s8);
  border-radius: var(--radius2);
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--sage) 18%, var(--card)),
    color-mix(in srgb, var(--warmGray) 16%, var(--card)),
    color-mix(in srgb, var(--sunAccent) 10%, transparent)
  );
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--surfaceGlow));
  box-shadow: var(--shadow), inset 0 1px 0 color-mix(in srgb, var(--surfaceGlow) 58%, transparent);
  text-align: center;
}

.privacyFeatures{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6);
}
.privacyCard{
  padding: var(--s7);
  border-radius: var(--radius2);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cardSolid) 74%, transparent), color-mix(in srgb, var(--surfaceTint) 50%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--surfaceGlow));
  box-shadow: var(--shadow2);
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.privacyCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.privacyIcon{
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 12%, transparent), color-mix(in srgb, var(--mint) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--ok) 22%, var(--border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok);
}
.privacyCard-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.privacyCard-desc{
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.privacyBox{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items: start;
}
.checklist{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 10px;
}
.checklist li{
  display:flex; gap: 10px; align-items:flex-start;
  color: var(--muted);
}
.check{
  width: 20px; height: 20px; flex: 0 0 auto;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 36%, transparent);
  display:flex; align-items:center; justify-content:center;
}
.check svg{ width: 12px; height: 12px; color: var(--ok); }

.faqGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--s5);
  max-width: 1000px;
  margin: 0 auto;
}
.faqItem{
  background: linear-gradient(165deg, color-mix(in srgb, var(--cardSolid) 72%, transparent), color-mix(in srgb, var(--surfaceTint) 52%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 74%, var(--surfaceGlow));
  border-radius: var(--radius2);
  padding: var(--s5);
  box-shadow: var(--shadow2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.faqItem:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
.faqItem[open]{
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.faqItem summary{
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faqItem summary::-webkit-details-marker{ display: none; }
.faqItem summary::after{
  content: '+';
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  transition: transform .3s var(--ease);
  flex-shrink: 0;
}
.faqItem[open] summary::after{
  transform: rotate(45deg);
}
.faqItem p{ 
  margin: 14px 0 0; 
  color: var(--muted); 
  font-size: 15px;
  line-height: 1.5;
}
.faq{
  display:grid;
  gap: 12px;
}
details{
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  border-radius: var(--radius2);
  padding: 14px 16px;
  box-shadow: var(--shadow2);
}
summary{
  cursor:pointer;
  font-weight: 700;
  letter-spacing: -0.02em;
}
details p{ margin: 10px 0 0; color: var(--muted); }

/* Footer */
footer{
  padding: 26px 0 44px;
  color: var(--muted2);
}
.footerRow{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  padding-top: 18px;
}
.footerLinks{ display:flex; gap: 14px; flex-wrap: wrap; }
.footerLinks a{ color: var(--muted2); }
.footerLinks a:hover{ color: var(--text); }

@media (prefers-color-scheme: dark){
  .feature,
  .step,
  .privacyCard,
  .faqItem{
    background: linear-gradient(165deg, color-mix(in srgb, var(--cardSolid) 84%, transparent), color-mix(in srgb, var(--surfaceTint) 48%, transparent));
  }
  .sectionTitle{
    color: color-mix(in srgb, var(--text) 94%, var(--mint));
  }
}

/* Content pages */
.pageHero{
  padding: 44px 0 10px;
}
.pageTitle{
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0 0 10px;
}
.pageLead{ color: var(--muted); margin: 0 0 16px; max-width: 70ch; }
.prose{
  padding: 18px;
  border-radius: var(--radius2);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  box-shadow: var(--shadow2);
}
.prose h2{ margin-top: 28px; letter-spacing: -0.03em; }
.prose h3{ margin-top: 18px; letter-spacing: -0.02em; }
.prose p, .prose li{ color: var(--muted); }
.prose strong{ color: var(--text); }
.prosePage{ margin-top: 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.prose p{ max-width: 72ch; line-height: 1.65; }

/* Long-form article / blog layout */
.article{ max-width: 720px; margin: 0 auto; }
.articleBody{ font-size: 17px; line-height: 1.65; }
.articleBody h2{ margin-top: 2.2em; margin-bottom: 0.5em; font-size: 1.5em; letter-spacing: -0.02em; }
.articleBody h3{ margin-top: 1.6em; margin-bottom: 0.4em; font-size: 1.2em; }
.articleBody p{ margin-bottom: 1.1em; }
.articleBody ul, .articleBody ol{ margin: 1em 0 1.2em 1.4em; }
.articleBody li{ margin-bottom: 0.4em; }

.keyTakeaways{
  background: linear-gradient(135deg, color-mix(in srgb, var(--sage) 12%, var(--card)), color-mix(in srgb, var(--warmGray) 10%, var(--card)));
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding: var(--s6);
  margin: var(--s7) 0;
}
.keyTakeaways h3{ margin-top: 0; margin-bottom: 12px; font-size: 1.1em; }
.keyTakeaways ul{ margin: 0; list-style: none; padding-left: 0; }
.keyTakeaways li{ position: relative; padding-left: 24px; margin-bottom: 10px; }
.keyTakeaways li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }

.metricGrid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5); margin: var(--s6) 0; }
.metricCard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radiusSm);
  padding: var(--s5);
  text-align: center;
  box-shadow: var(--shadow2);
}
.metricCard-value{ font-size: 28px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
.metricCard-label{ font-size: 13px; color: var(--muted); }
.metricCard.metricCard-green .metricCard-value{ color: var(--ok); }
.metricCard.metricCard-blue .metricCard-value{ color: var(--blue); }
.metricCard.metricCard-accent .metricCard-value{ color: var(--accent); }

.zoneBar{ display: flex; height: 32px; border-radius: var(--radiusSm); overflow: hidden; margin: var(--s5) 0; box-shadow: var(--shadow2); }
.zoneBar-segment{ flex: 1; min-width: 0; }
.zoneBar-segment.green{ background: linear-gradient(180deg, color-mix(in srgb, var(--sleepAccent) 84%, white 16%), color-mix(in srgb, var(--sleepAccent) 88%, black 12%)); }
.zoneBar-segment.yellow{ background: linear-gradient(180deg, #FFD93D, #f0c430); }
.zoneBar-segment.red{ background: linear-gradient(180deg, #FF6B6B, #ee5555); }
.zoneLegend{ display: flex; flex-wrap: wrap; gap: var(--s5); margin: var(--s4) 0 var(--s6); }
.zoneLegend-item{ display: flex; align-items: center; gap: 8px; font-size: 14px; }
.zoneLegend-dot{ width: 14px; height: 14px; border-radius: 4px; }
.zoneLegend-dot.green{ background: var(--ok); }
.zoneLegend-dot.yellow{ background: var(--warning); }
.zoneLegend-dot.red{ background: var(--danger); }

/* Recovery screen: app-style layout (orb + glass cards) */
.recoveryScreen{ margin: var(--s8) 0; }
.recoveryScreen-inner{
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s5);
}

.recoveryOrbWrap{ display: flex; justify-content: center; padding: var(--s5) 0; }
.recoveryOrb{
  width: 236px;
  height: 236px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  /* Ring: clean recovery progress (no stress wedge) */
  background: conic-gradient(
    from -90deg,
    color-mix(in srgb, var(--sleepAccent) 82%, white 18%) 0 76.8%,
    color-mix(in srgb, var(--sleepAccent) 52%, color-mix(in srgb, var(--border) 40%, transparent) 48%) 76.8% 79.2%,
    color-mix(in srgb, var(--border) 40%, transparent) 79.2% 100%
  );
  box-shadow:
    0 0 0 20px color-mix(in srgb, var(--bg0) 94%, transparent),
    0 20px 50px rgba(0,0,0,.15),
    0 0 40px color-mix(in srgb, var(--sleepAccent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.12);
  border: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.recoveryOrb::before{
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 14%, rgba(255,255,255,.2), rgba(255,255,255,0) 58%);
  pointer-events: none;
  z-index: 0;
}
.recoveryOrb::after{
  content: "";
  position: absolute;
  inset: 24px;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cardSolid) 94%, black 6%),
    color-mix(in srgb, var(--bg1) 90%, black 10%)
  );
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  z-index: 0;
}
.recoveryOrb-value, .recoveryOrb-label{ position: relative; z-index: 1; }
.recoveryOrb-value{ font-size: 52px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.recoveryOrb-label{ font-size: 14px; color: var(--muted); font-weight: 500; }

.recoveryMiniGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.recoveryMiniCard{
  border-radius: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
}
.recoveryMiniTitle{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.recoveryMiniValue{
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}
.recoveryMiniMeta{
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted2);
}

.recoveryGlassCard{
  padding: var(--s6) var(--s6);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.recoveryGlassCard-title{ font-weight: 700; font-size: 16px; margin-bottom: var(--s4); color: var(--text); }
.recoveryGlassCard-text{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.recoveryGlassCard-meta{ margin-top: var(--s4); font-size: 12px; color: var(--muted); }
.recoveryGlassCard-list{ margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.55; color: var(--muted); }
.recoveryGlassCard.recoveryComponents{ padding: var(--s6); }
.recoveryGlassCard.recoveryComponents .recoveryComponent{ margin-bottom: var(--s4); }
.recoveryGlassCard.recoveryComponents .recoveryComponent:last-child{ margin-bottom: 0; }

.recoveryComponent-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 15px; }
.recoveryComponent-name{ color: var(--text); font-weight: 500; }
.recoveryComponent-pct{ color: var(--muted); font-variant-numeric: tabular-nums; font-size: 14px; }
.recoveryComponent-bar{ height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--border) 45%, transparent); overflow: hidden; }
.recoveryComponent-fill{ display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--sleepAccent) 82%, black 18%), color-mix(in srgb, var(--sleepAccent) 82%, white 18%)); transition: width .4s var(--ease); }

/* Legacy app preview (other pages) */
.appPreview{ margin: var(--s8) 0; }
.appPreview-title{ font-size: 1.1em; margin: 0 0 var(--s4); color: var(--text); }
.appPreview-caption{ margin: var(--s5) 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 56ch; }
.appMockCard{ max-width: 420px; margin: var(--s4) 0; padding: var(--s6); background: color-mix(in srgb, var(--cardSolid) 20%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius: var(--radius2); }
.appMockCard-header{ font-weight: 700; font-size: 15px; margin-bottom: var(--s4); color: var(--text); }
.appMockCard-text{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.appMockCard-time{ margin-top: var(--s4); font-size: 12px; color: var(--muted); }
.appMockCard-list{ margin-top: var(--s4); }
.appMockCard-list ul{ margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.55; color: var(--muted); }

.flowSteps{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s4); margin: var(--s6) 0; }
.flowStep{ text-align: center; padding: var(--s5); background: var(--card); border: 1px solid var(--border); border-radius: var(--radiusSm); }
.flowStep-num{ display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: white; font-weight: 800; font-size: 16px; margin-bottom: 10px; }
.flowStep-title{ font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.flowStep-desc{ font-size: 13px; color: var(--muted); }

.pullQuote{ border-left: 4px solid var(--accent); padding: 16px 20px; margin: var(--s6) 0; background: color-mix(in srgb, var(--accent) 6%, transparent); border-radius: 0 var(--radiusSm) var(--radiusSm) 0; font-size: 1.05em; font-style: italic; color: var(--text); }
.chartPlaceholder{ background: linear-gradient(180deg, color-mix(in srgb, var(--border) 20%, var(--bg0)), color-mix(in srgb, var(--border) 10%, var(--bg0))); border: 1px dashed var(--border); border-radius: var(--radius2); padding: var(--s8); text-align: center; color: var(--muted); font-size: 14px; margin: var(--s6) 0; }
.chartShowcase{
  --chart-primary: var(--accent);
  --chart-secondary: var(--mint);
  --chart-tertiary: var(--heartAccent);
  position: relative;
  margin: var(--s6) 0;
  padding: var(--s6);
  border-radius: var(--radius2);
  background:
    radial-gradient(480px 220px at -10% -12%, color-mix(in srgb, var(--chart-primary) 12%, transparent), transparent 70%),
    radial-gradient(420px 200px at 112% 110%, color-mix(in srgb, var(--chart-secondary) 12%, transparent), transparent 72%),
    linear-gradient(168deg, color-mix(in srgb, var(--cardSolid) 44%, transparent), color-mix(in srgb, var(--cardSolid) 22%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
}
.chartShowcase::before{
  content: "";
  position: absolute;
  inset: -38% -28% auto;
  height: 64%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--chart-primary) 20%, transparent), transparent 74%);
  filter: blur(30px);
  opacity: .45;
}
.chartShowcase-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.chartShowcase-title{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.chartShowcase-badges{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.chartBadge{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 22%, transparent);
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 80%, var(--chart-primary));
}
.chartShowcase-canvas{
  position: relative;
  height: clamp(196px, 30vw, 264px);
  border-radius: 14px;
  padding: 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 36%, transparent), color-mix(in srgb, var(--bg0) 26%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}
.chartShowcase-svg{
  width: 100%;
  height: 100%;
  display: block;
}
.chartGridLine{
  stroke: color-mix(in srgb, var(--border) 82%, transparent);
  stroke-width: 1;
}
.chartAxisLine{
  stroke: color-mix(in srgb, var(--border) 92%, transparent);
  stroke-width: 1.2;
}
.chartArea{
  fill: color-mix(in srgb, var(--chart-primary) 22%, transparent);
  opacity: .75;
}
.chartLine{
  fill: none;
  stroke-width: 3.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--chart-primary) 36%, transparent));
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: lineReveal 2.1s var(--ease) forwards;
}
.chartLine-main{ stroke: var(--chart-primary); }
.chartLine-alt{
  stroke: var(--chart-secondary);
  stroke-width: 2.2;
  opacity: .86;
  stroke-dasharray: 4 8;
  animation-duration: 2.7s;
}
.chartLine-third{
  stroke: var(--chart-tertiary);
  stroke-width: 2.4;
  opacity: .78;
  animation-duration: 2.3s;
}
.chartDot{
  fill: color-mix(in srgb, var(--cardSolid) 86%, var(--chart-primary));
  stroke: var(--chart-primary);
  stroke-width: 1.8;
  transform-origin: center;
  animation: chartPulse 2.6s ease-in-out infinite;
}
.chartDot.alt{
  stroke: var(--chart-secondary);
  fill: color-mix(in srgb, var(--cardSolid) 86%, var(--chart-secondary));
  animation-duration: 3s;
}
.chartDot.third{
  stroke: var(--chart-tertiary);
  fill: color-mix(in srgb, var(--cardSolid) 86%, var(--chart-tertiary));
  animation-duration: 3.2s;
}
.chartBars rect{
  fill: color-mix(in srgb, var(--chart-tertiary) 44%, var(--chart-primary));
  transform-origin: center bottom;
  animation: barRise 1.4s var(--ease) backwards;
}
.chartBars rect:nth-child(1){ animation-delay: .06s; }
.chartBars rect:nth-child(2){ animation-delay: .12s; }
.chartBars rect:nth-child(3){ animation-delay: .18s; }
.chartBars rect:nth-child(4){ animation-delay: .24s; }
.chartBars rect:nth-child(5){ animation-delay: .3s; }
.chartBars rect:nth-child(6){ animation-delay: .36s; }
.chartBars rect:nth-child(7){ animation-delay: .42s; }
.chartShowcase-footer{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.chartLegend{
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
  padding: 9px 10px;
  font-size: 12px;
  color: var(--muted);
}
.chartLegend strong{
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.chartLegend.m1 strong{ color: var(--chart-primary); }
.chartLegend.m2 strong{ color: var(--chart-secondary); }
.chartLegend.m3 strong{ color: var(--chart-tertiary); }
.chartShowcase-recovery{ --chart-primary: var(--activityAccent); --chart-secondary: var(--stressAmber); --chart-tertiary: var(--sleepAccent); }
.chartShowcase-activity{ --chart-primary: var(--activityAccent); --chart-secondary: var(--accent); --chart-tertiary: var(--heartAccent); }
.chartShowcase-flow{ --chart-primary: var(--flowAccent); --chart-secondary: var(--activityAccent); --chart-tertiary: var(--sleepAccent); }
.chartShowcase-sleep{ --chart-primary: var(--sleepAccent); --chart-secondary: var(--activityAccent); --chart-tertiary: var(--flowAccent); }
.chartShowcase-heart{ --chart-primary: var(--heartAccent); --chart-secondary: var(--activityAccent); --chart-tertiary: var(--stressAmber); }
@keyframes lineReveal{
  0%{ stroke-dashoffset: 600; opacity: .25; }
  100%{ stroke-dashoffset: 0; opacity: 1; }
}
@keyframes chartPulse{
  0%, 100%{ transform: scale(1); filter: drop-shadow(0 0 0 color-mix(in srgb, var(--chart-primary) 0%, transparent)); }
  50%{ transform: scale(1.18); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--chart-primary) 30%, transparent)); }
}
@keyframes barRise{
  0%{ transform: scaleY(.16); opacity: .26; }
  100%{ transform: scaleY(1); opacity: .94; }
}

.appDataStack{
  display: grid;
  gap: 12px;
  margin: var(--s6) 0;
}
.recoveryScreen .appDataStack{ margin: 0; }
.appDataCard{
  position: relative;
  overflow: hidden;
  border-radius: var(--radiusSm);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: linear-gradient(164deg, color-mix(in srgb, var(--cardSolid) 24%, transparent), color-mix(in srgb, var(--cardSolid) 12%, transparent));
  box-shadow: var(--shadow2);
  padding: 14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.appDataCard::before{
  content: "";
  position: absolute;
  inset: -30% auto auto -28%;
  width: 46%;
  height: 180%;
  transform: rotate(18deg);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cardSolid) 34%, transparent), transparent 72%);
  opacity: .34;
  pointer-events: none;
  animation: appCardSheen 10s linear infinite;
}
.appDataCard:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: 0 18px 42px rgba(0,0,0,.16);
}
.appDataHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.appDataTitle{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.appDataMeta{
  font-size: 12px;
  color: var(--muted);
}
.stressStateBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin-right: 6px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
  vertical-align: middle;
  color: color-mix(in srgb, var(--text) 72%, var(--state-color, var(--stressAmber)));
  border: 1px solid color-mix(in srgb, var(--state-color, var(--stressAmber)) 42%, transparent);
  background: color-mix(in srgb, var(--state-color, var(--stressAmber)) 16%, transparent);
}
.appDataCard.stress-low{ --state-color: var(--sleepAccent); }
.appDataCard.stress-mid{ --state-color: #FFA74D; }
.appDataCard.stress-high{ --state-color: #FF6B6B; }
.signalRow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
}
.signalChip{
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
}
.signalChip b{
  font-weight: 700;
  color: var(--text);
}
.stressTimeline{
  height: 54px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg1) 36%, transparent), color-mix(in srgb, var(--bg0) 16%, transparent));
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  align-items: end;
  gap: 3px;
}
.stressTimeline span{
  display: block;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--stressAmber) 75%, white 25%), color-mix(in srgb, var(--stressAmber) 90%, black 10%));
  opacity: .88;
  transform-origin: center bottom;
  animation: stressBarRise .9s var(--ease) backwards, stressBarBreathe 2.2s ease-in-out infinite;
}
.stressTimeline span:nth-child(odd){ animation-duration: .9s, 2.8s; }
.stressTimeline span:nth-child(even){ animation-duration: 1.05s, 2.4s; }
.stressTimeline span:nth-child(1){ animation-delay: .02s, .12s; }
.stressTimeline span:nth-child(2){ animation-delay: .04s, .18s; }
.stressTimeline span:nth-child(3){ animation-delay: .06s, .1s; }
.stressTimeline span:nth-child(4){ animation-delay: .08s, .2s; }
.stressTimeline span:nth-child(5){ animation-delay: .10s, .08s; }
.stressTimeline span:nth-child(6){ animation-delay: .12s, .16s; }
.stressTimeline span:nth-child(7){ animation-delay: .14s, .11s; }
.stressTimeline span:nth-child(8){ animation-delay: .16s, .19s; }
.stressTimeline span:nth-child(9){ animation-delay: .18s, .07s; }
.stressTimeline span:nth-child(10){ animation-delay: .20s, .15s; }
.stressTimeline span:nth-child(11){ animation-delay: .22s, .13s; }
.stressTimeline span:nth-child(12){ animation-delay: .24s, .22s; }
.stressTimeline span:nth-child(13){ animation-delay: .26s, .09s; }
.stressTimeline span:nth-child(14){ animation-delay: .28s, .17s; }
.stressTimeline span:nth-child(15){ animation-delay: .30s, .14s; }
.stressTimeline span:nth-child(16){ animation-delay: .32s, .23s; }
.stressTimeline span:nth-child(17){ animation-delay: .34s, .12s; }
.stressTimeline span:nth-child(18){ animation-delay: .36s, .2s; }
.stressTimeline span:nth-child(19){ animation-delay: .38s, .1s; }
.stressTimeline span:nth-child(20){ animation-delay: .40s, .19s; }
.stressTimeline span:nth-child(21){ animation-delay: .42s, .11s; }
.stressTimeline span:nth-child(22){ animation-delay: .44s, .16s; }
.stressTimeline span:nth-child(23){ animation-delay: .46s, .09s; }
.stressTimeline span:nth-child(24){ animation-delay: .48s, .15s; }
.appDataCard.stress-low .stressTimeline span{
  background: linear-gradient(180deg, color-mix(in srgb, var(--sleepAccent) 75%, white 25%), color-mix(in srgb, var(--sleepAccent) 90%, black 10%));
}
.appDataCard.stress-high .stressTimeline span{
  background: linear-gradient(180deg, color-mix(in srgb, #FF6B6B 75%, white 25%), color-mix(in srgb, #FF6B6B 90%, black 10%));
}
.stressTimelineAxis{
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted2);
}
.kpiRow{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.kpi{
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
  padding: 8px;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.kpi:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
}
.kpi b{
  display: block;
  font-size: 15px;
  line-height: 1.1;
  color: var(--text);
}
.kpi span{
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.energyRow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.energyValue{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.energyLabel{
  font-size: 12px;
  color: var(--muted);
}
.energyLine{
  position: relative;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 16%, transparent);
  padding: 8px 9px;
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  gap: 3px;
}
.energyLine::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 34%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #F6E27F 45%, transparent), transparent);
  animation: energySweep 3.2s ease-in-out infinite;
}
.energyLine span{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  transition: transform .2s var(--ease), filter .2s var(--ease);
}
.energyLine span.on{
  animation: energyPulse 2.2s ease-in-out infinite;
}
.energyLine span.on:nth-child(-n+6){ background: #E76F51; }
.energyLine span.on:nth-child(n+7):nth-child(-n+13){ background: #F08A5D; }
.energyLine span.on:nth-child(n+14):nth-child(-n+20){ background: #F4B86A; }
.energyLine span.on:nth-child(n+21){ background: #F6E27F; }
.energyHint{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}
.cycleList{
  margin-top: 8px;
  display: grid;
  gap: 8px;
}
.cycleItem{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.cycleDot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stressAmber);
}
.cycleTime{
  color: var(--text);
  font-weight: 600;
}
.cycleDuration{
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cycleInsight{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}

.flowAppScreen{
  display: grid;
  gap: 12px;
  margin: var(--s6) 0;
}
.flowGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.flowCard{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cardSolid) 24%, transparent), color-mix(in srgb, var(--cardSolid) 12%, transparent));
  box-shadow: var(--shadow2);
  padding: 14px;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.flowCard::before{
  content: "";
  position: absolute;
  inset: -42% -8% auto;
  height: 72%;
  background: radial-gradient(circle at 70% 0, color-mix(in srgb, var(--flowAccent) 26%, transparent), transparent 74%);
  opacity: .5;
  pointer-events: none;
}
.flowCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--flowAccent) 44%, var(--border));
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.flowCard-primary{
  border-color: color-mix(in srgb, var(--flowAccent) 45%, var(--border));
  background: linear-gradient(166deg, color-mix(in srgb, var(--flowAccent) 22%, var(--cardSolid)), color-mix(in srgb, var(--cardSolid) 18%, transparent));
}
.flowCard-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.flowCard-head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.flowCard-pill{
  border-radius: 999px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 72%, var(--flowAccent));
}
.flowCatchRow{
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.flowCatchValue{
  font-size: clamp(38px, 6vw, 50px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
}
.flowCatchMeta{
  font-size: 13px;
  color: var(--muted);
}
.flowCard-text{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.flowSpark{
  margin-top: 8px;
  height: 62px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 14%, transparent);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
}
.flowSpark span{
  display: block;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--flowAccent) 88%, white 12%), color-mix(in srgb, var(--activityAccent) 78%, black 22%));
  transform-origin: center bottom;
  animation: flowRise .85s var(--ease) backwards;
}
.flowSpark span:nth-child(1){ animation-delay: .06s; }
.flowSpark span:nth-child(2){ animation-delay: .12s; }
.flowSpark span:nth-child(3){ animation-delay: .18s; }
.flowSpark span:nth-child(4){ animation-delay: .24s; }
.flowSpark span:nth-child(5){ animation-delay: .3s; }
.flowSpark span:nth-child(6){ animation-delay: .36s; }
.flowSpark span:nth-child(7){ animation-delay: .42s; }
.flowFeedbackRow{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.flowFeedbackItem{
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  padding: 8px;
}
.flowFeedbackItem b{
  display: block;
  font-size: 18px;
  line-height: 1;
  color: var(--text);
}
.flowFeedbackItem span{
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

.heartAppScreen{
  display: grid;
  gap: 12px;
  margin: var(--s6) 0;
}
.heartGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.heartCard{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: linear-gradient(166deg, color-mix(in srgb, var(--cardSolid) 24%, transparent), color-mix(in srgb, var(--cardSolid) 13%, transparent));
  box-shadow: var(--shadow2);
  padding: 14px;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.heartCard::before{
  content: "";
  position: absolute;
  inset: -42% -12% auto;
  height: 72%;
  background: radial-gradient(circle at 68% 0, color-mix(in srgb, var(--heartAccent) 24%, transparent), transparent 75%);
  opacity: .46;
  pointer-events: none;
}
.heartCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--heartAccent) 42%, var(--border));
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.heartCard-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.heartCard-head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.heartPill{
  border-radius: 999px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 70%, var(--heartAccent));
}
.heartValue{
  font-size: clamp(30px, 4.2vw, 42px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--text);
}
.heartSub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}
.heartBeatWidget{
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 14%, transparent);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;
}
.heartBeatIcon{
  font-size: 14px;
  line-height: 1;
  color: color-mix(in srgb, var(--heartAccent) 82%, #ff6b6b);
  transform-origin: center;
  animation: heartBeatIcon 1.35s ease-in-out infinite;
}
.heartBeatTrace{
  width: 100%;
  height: 32px;
  display: block;
}
.heartBeatGrid{
  stroke: color-mix(in srgb, var(--border) 78%, transparent);
  stroke-width: 1;
  fill: none;
}
.heartBeatLine{
  stroke: color-mix(in srgb, var(--heartAccent) 78%, var(--activityAccent));
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 430;
  stroke-dashoffset: 430;
  animation: heartWaveDraw 4.6s linear infinite;
}
.heartBeatDot{
  fill: color-mix(in srgb, var(--heartAccent) 80%, white 20%);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--heartAccent) 40%, transparent));
  transform-origin: center;
  animation: heartDotPulse 1.35s ease-in-out infinite;
}
.heartBars{
  margin-top: 8px;
  height: 68px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 12%, transparent);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  align-items: end;
}
.heartBars span{
  display: block;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--heartAccent) 85%, white 15%), color-mix(in srgb, var(--activityAccent) 80%, black 20%));
  transform-origin: center bottom;
  animation: flowRise .85s var(--ease) backwards;
}
.heartBars span:nth-child(1){ animation-delay: .04s; }
.heartBars span:nth-child(2){ animation-delay: .1s; }
.heartBars span:nth-child(3){ animation-delay: .16s; }
.heartBars span:nth-child(4){ animation-delay: .22s; }
.heartBars span:nth-child(5){ animation-delay: .28s; }
.heartBars span:nth-child(6){ animation-delay: .34s; }
.heartBars span:nth-child(7){ animation-delay: .4s; }
.heartBars span:nth-child(8){ animation-delay: .46s; }
.heartText{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.heartLoadRows{
  display: grid;
  gap: 8px;
}
.heartLoadRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  padding: 8px 10px;
}
.heartLoadRow span{
  font-size: 12px;
  color: var(--muted);
}
.heartLoadRow b{
  font-size: 14px;
  color: var(--text);
}
.heartCurve{
  margin-top: 8px;
  height: 72px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background:
    radial-gradient(120px 40px at 80% 0, color-mix(in srgb, var(--heartAccent) 20%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--cardSolid) 16%, transparent), color-mix(in srgb, var(--cardSolid) 8%, transparent));
  position: relative;
  overflow: hidden;
}
.heartCurve-svg{
  width: 100%;
  height: 100%;
  display: block;
}
.heartCurve-grid{
  fill: none;
  stroke: color-mix(in srgb, var(--border) 80%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
}
.heartCurve-area{
  fill: color-mix(in srgb, var(--heartAccent) 18%, transparent);
  opacity: .7;
}
.heartCurve-line{
  fill: none;
  stroke: color-mix(in srgb, var(--heartAccent) 78%, var(--activityAccent));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 380;
  stroke-dashoffset: 380;
  animation: heartCurveDraw 5.8s var(--ease) infinite;
}
.heartCurve-dot{
  fill: color-mix(in srgb, var(--heartAccent) 84%, white 16%);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--heartAccent) 35%, transparent));
  animation: chartPulse 2.6s ease-in-out infinite;
}

.loadAppScreen{
  display: grid;
  gap: 12px;
  margin: var(--s6) 0;
}
.loadGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.loadCard{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cardSolid) 24%, transparent), color-mix(in srgb, var(--cardSolid) 12%, transparent));
  box-shadow: var(--shadow2);
  padding: 14px;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .32s var(--ease);
}
.loadCard::before{
  content: "";
  position: absolute;
  inset: -42% -12% auto;
  height: 72%;
  background: radial-gradient(circle at 68% 0, color-mix(in srgb, var(--activityAccent) 24%, transparent), transparent 75%);
  opacity: .5;
  pointer-events: none;
}
.loadCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--activityAccent) 42%, var(--border));
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
}
.loadCard-hero{
  border-color: color-mix(in srgb, var(--activityAccent) 44%, var(--border));
}
.loadCard-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.loadCard-head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.loadPill{
  border-radius: 999px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 72%, var(--activityAccent));
}
.loadKpiGrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.loadKpi{
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  padding: 8px;
}
.loadKpi b{
  display: block;
  font-size: 17px;
  line-height: 1;
  color: var(--text);
}
.loadKpi span{
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}
.loadStatus{
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 16%, transparent);
}
.loadStatus b{
  display: block;
  font-size: 13px;
  color: var(--text);
}
.loadStatus span{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
.loadBars{
  margin-top: 8px;
  height: 74px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 12%, transparent);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 4px;
  align-items: end;
}
.loadBars span{
  display: block;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--activityAccent) 86%, white 14%), color-mix(in srgb, var(--accent) 80%, black 20%));
  transform-origin: center bottom;
  animation: flowRise .85s var(--ease) backwards;
}
.loadBars span:nth-child(1){ animation-delay: .02s; }
.loadBars span:nth-child(2){ animation-delay: .06s; }
.loadBars span:nth-child(3){ animation-delay: .1s; }
.loadBars span:nth-child(4){ animation-delay: .14s; }
.loadBars span:nth-child(5){ animation-delay: .18s; }
.loadBars span:nth-child(6){ animation-delay: .22s; }
.loadBars span:nth-child(7){ animation-delay: .26s; }
.loadBars span:nth-child(8){ animation-delay: .3s; }
.loadBars span:nth-child(9){ animation-delay: .34s; }
.loadBars span:nth-child(10){ animation-delay: .38s; }
.loadBars span:nth-child(11){ animation-delay: .42s; }
.loadBars span:nth-child(12){ animation-delay: .46s; }
.loadBars span:nth-child(13){ animation-delay: .5s; }
.loadBars span:nth-child(14){ animation-delay: .54s; }
.loadText{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.loadPlan{
  display: grid;
  gap: 8px;
}
.loadPlan div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  padding: 8px 10px;
}
.loadPlan b{
  font-size: 13px;
  color: var(--text);
}
.loadPlan span{
  font-size: 12px;
  color: var(--muted);
}

.recoveryActionScreen{
  display: grid;
  gap: 12px;
  margin: var(--s6) 0;
}
.recoveryActionCard{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--cardSolid) 24%, transparent), color-mix(in srgb, var(--cardSolid) 12%, transparent));
  box-shadow: var(--shadow2);
  padding: 14px;
}
.recoveryActionCard::before{
  content: "";
  position: absolute;
  inset: -42% -10% auto;
  height: 72%;
  background: radial-gradient(circle at 70% 0, color-mix(in srgb, var(--activityAccent) 22%, transparent), transparent 75%);
  opacity: .5;
  pointer-events: none;
}
.recoveryAction-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.recoveryAction-head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.recoveryAction-pill{
  border-radius: 999px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
  font-size: 11px;
  color: color-mix(in srgb, var(--text) 72%, var(--activityAccent));
}
.recoveryAction-kpi{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.recoveryAction-kpi div{
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 16%, transparent);
  padding: 8px;
}
.recoveryAction-kpi b{
  display: block;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}
.recoveryAction-kpi span{
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}
.recoveryAction-text{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.recoverySignals{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.recoverySignals span{
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  font-size: 12px;
  color: var(--muted);
}

.sleepAppScreen{
  display: grid;
  gap: 12px;
  margin: var(--s6) 0;
}
.sleepGrid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sleepCard{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: linear-gradient(166deg, color-mix(in srgb, var(--cardSolid) 24%, transparent), color-mix(in srgb, var(--cardSolid) 14%, transparent));
  padding: 14px;
  box-shadow: var(--shadow2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.sleepCard::before{
  content: "";
  position: absolute;
  inset: -35% -10% auto;
  height: 70%;
  background: radial-gradient(circle at 70% 0, color-mix(in srgb, var(--sleepAccent) 22%, transparent), transparent 72%);
  pointer-events: none;
  opacity: .42;
}
.sleepCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sleepAccent) 46%, var(--border));
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
}
.sleepCard-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.sleepCard-head h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.sleepCard-pill{
  border-radius: 999px;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: color-mix(in srgb, var(--text) 70%, var(--sleepAccent));
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 20%, transparent);
}
.sleepHeroRow{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
}
.sleepHeroMain{ min-width: 0; }
.sleepHeroValue{
  font-size: clamp(34px, 4.3vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--text);
}
.sleepHeroMeta{
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.sleepHeroSide{
  display: grid;
  gap: 8px;
}
.sleepMiniStat{
  min-width: 118px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 18%, transparent);
  padding: 8px 10px;
}
.sleepMiniStat b{
  display: block;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
}
.sleepMiniStat span{
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.sleepWakeWindow{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}
.sleepCard-text{
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.sleepWeekBars{
  height: 84px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--cardSolid) 12%, transparent);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
}
.sleepWeekBars span{
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sleepAccent) 86%, white 14%), color-mix(in srgb, var(--flowAccent) 78%, black 22%));
  transform-origin: center bottom;
  animation: sleepBarRise .9s var(--ease) backwards;
}
.sleepWeekBars span:nth-child(1){ animation-delay: .06s; }
.sleepWeekBars span:nth-child(2){ animation-delay: .12s; }
.sleepWeekBars span:nth-child(3){ animation-delay: .18s; }
.sleepWeekBars span:nth-child(4){ animation-delay: .24s; }
.sleepWeekBars span:nth-child(5){ animation-delay: .3s; }
.sleepWeekBars span:nth-child(6){ animation-delay: .36s; }
.sleepWeekBars span:nth-child(7){ animation-delay: .42s; }
.sleepWeekMeta{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.sleepStageRows{
  display: grid;
  gap: 8px;
}
.sleepStageRow{
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: center;
  gap: 8px;
}
.sleepStageRow span{
  font-size: 13px;
  color: var(--muted);
}
.sleepStageTrack{
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 54%, transparent);
  overflow: hidden;
}
.sleepStageTrack b{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sleepAccent), var(--flowAccent));
  transform-origin: left center;
  animation: sleepTrackGrow 1.1s var(--ease) backwards;
}
.sleepStageRow:nth-child(1) .sleepStageTrack b{ animation-delay: .08s; }
.sleepStageRow:nth-child(2) .sleepStageTrack b{ animation-delay: .16s; }
.sleepStageRow:nth-child(3) .sleepStageTrack b{ animation-delay: .24s; }
.sleepStageRow em{
  font-style: normal;
  font-size: 12px;
  color: var(--muted2);
  min-width: 34px;
  text-align: right;
}
@keyframes sleepBarRise{
  0%{ transform: scaleY(.16); opacity: .24; }
  100%{ transform: scaleY(1); opacity: .95; }
}
@keyframes sleepTrackGrow{
  0%{ transform: scaleX(.06); opacity: .35; }
  100%{ transform: scaleX(1); opacity: 1; }
}
@keyframes flowRise{
  0%{ transform: scaleY(.18); opacity: .2; }
  100%{ transform: scaleY(1); opacity: .95; }
}
@keyframes heartCurveDraw{
  0%{ stroke-dashoffset: 380; opacity: .45; }
  30%{ opacity: 1; }
  60%{ stroke-dashoffset: 0; opacity: 1; }
  100%{ stroke-dashoffset: -180; opacity: .9; }
}
@keyframes heartWaveDraw{
  0%{ stroke-dashoffset: 430; opacity: .6; }
  45%{ stroke-dashoffset: 0; opacity: 1; }
  100%{ stroke-dashoffset: -210; opacity: .8; }
}
@keyframes heartBeatIcon{
  0%, 30%, 100%{ transform: scale(1); filter: brightness(1); }
  10%{ transform: scale(1.22); filter: brightness(1.08); }
  18%{ transform: scale(1); }
  22%{ transform: scale(1.14); }
}
@keyframes heartDotPulse{
  0%, 100%{ transform: scale(1); opacity: .88; }
  50%{ transform: scale(1.24); opacity: 1; }
}
@keyframes appCardSheen{
  0%{ transform: translateX(0) rotate(18deg); opacity: .18; }
  35%{ opacity: .34; }
  60%{ opacity: .12; }
  100%{ transform: translateX(280%) rotate(18deg); opacity: .18; }
}
@keyframes stressBarRise{
  0%{ transform: scaleY(.16); opacity: .2; }
  100%{ transform: scaleY(1); opacity: .9; }
}
@keyframes stressBarBreathe{
  0%, 100%{ filter: saturate(1); }
  50%{ filter: saturate(1.24) brightness(1.05); }
}
@keyframes energySweep{
  0%{ left: -40%; opacity: .1; }
  45%{ opacity: .55; }
  100%{ left: 112%; opacity: .08; }
}
@keyframes energyPulse{
  0%, 100%{ transform: scale(1); filter: brightness(1); }
  50%{ transform: scale(1.14); filter: brightness(1.12); }
}
.reveal.in .appDataCard{
  animation: appDataEnter .7s var(--ease) backwards;
}
.reveal.in .appDataCard:nth-child(1){ animation-delay: .06s; }
.reveal.in .appDataCard:nth-child(2){ animation-delay: .14s; }
.reveal.in .appDataCard:nth-child(3){ animation-delay: .22s; }
@keyframes appDataEnter{
  0%{ opacity: .02; transform: translateY(14px) scale(.985); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
.toc{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius2); padding: var(--s6); margin: var(--s6) 0; }
.toc h3{ margin-top: 0; margin-bottom: 12px; font-size: 1em; }
.toc ol{ margin: 0; padding-left: 1.2em; }
.toc a{ color: var(--accent); text-decoration: none; }
.toc a:hover{ text-decoration: underline; }

.infographicRow{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s6); margin: var(--s7) 0; align-items: start; }
.infographicBlock{ padding: var(--s6); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius2); box-shadow: var(--shadow2); }
.infographicBlock h4{ margin: 0 0 10px; font-size: 1em; }

.note{
  background: color-mix(in srgb, var(--cardSolid) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  padding: 12px 14px;
  border-radius: 14px;
  margin: 14px 0;
}

/* Responsive */
@media (max-width: 980px){
  .heroGrid{ grid-template-columns: 1fr; }
  .heroStats{ flex-direction: column; gap: 12px; }
  .statBadge{ min-width: auto; width: 100%; max-width: 300px; }
  .heroCarousel{ max-width: 340px; }
  .trustSignals{ flex-direction: column; gap: 10px; }
  .trustBadge{ width: 100%; max-width: 300px; justify-content: center; }
  
  .featuresHero{ gap: var(--s10); }
  .featureHero{ grid-template-columns: 1fr; gap: var(--s6); text-align: center; }
  .featureHero-reverse{ direction: ltr; }
  .featureHero-content{ max-width: none; }
  .featureHero-img{ max-width: 340px; }
  .featureMetrics{ justify-content: center; }
  .featuresGrid{ grid-template-columns: 1fr; }
  .appTab{ grid-template-columns: auto 1fr; gap: var(--s5); padding: var(--s5) var(--s6); }
  .appTab-num{ width: 38px; height: 38px; font-size: 18px; }
  .appTab-title{ font-size: 20px; }
  .appTab-desc{ font-size: 15px; }

  .showcaseGrid{ grid-template-columns: 1fr; }
  .showcaseCard{ grid-column: auto !important; padding: var(--s6); }
  .vizRow{ grid-template-columns: auto 1fr; }
  .recoveryScreen-inner{ max-width: none; padding: 0 var(--s4); }
  .recoveryOrb{ width: 206px; height: 206px; }
  .recoveryOrb-value{ font-size: 46px; }
  .recoveryMiniGrid{ grid-template-columns: 1fr; }
  
  .privacyFeatures{ grid-template-columns: 1fr; }
  .privacyBox{ grid-template-columns: 1fr; }
  .faqGrid{ grid-template-columns: 1fr; }
  .metricGrid{ grid-template-columns: repeat(2, 1fr); }
  .flowSteps{ grid-template-columns: repeat(2, 1fr); }
  .infographicRow{ grid-template-columns: 1fr; }
  .chartShowcase{ padding: var(--s5); }
  .chartShowcase-head{ flex-direction: column; align-items: flex-start; }
  .chartShowcase-badges{ justify-content: flex-start; }
  .chartShowcase-canvas{ height: 206px; }
  .chartShowcase-footer{ grid-template-columns: 1fr; }
  .flowGrid2{ grid-template-columns: 1fr; }
  .heartGrid2{ grid-template-columns: 1fr; }
  .loadGrid2{ grid-template-columns: 1fr; }
  .flowFeedbackRow{ grid-template-columns: 1fr; }
  .loadKpiGrid{ grid-template-columns: repeat(2, 1fr); }
  .recoveryAction-kpi{ grid-template-columns: 1fr; }
  .sleepGrid2{ grid-template-columns: 1fr; }
  .sleepHeroRow{ flex-direction: column; align-items: flex-start; }
  .sleepHeroSide{ width: 100%; grid-template-columns: 1fr 1fr; display: grid; }
  .sleepMiniStat{ min-width: 0; }
  .kpiRow{ grid-template-columns: repeat(2, 1fr); }
  .zoneLegend-item{ flex: 1 1 100%; }
  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .steps{ grid-template-columns: 1fr; }
  .js-ready .menuToggle{ display: inline-flex; }
  .js-ready .nav{ display:none; }
  .js-ready .bar.menu-open .nav{
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: var(--s4);
    right: var(--s4);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--s2);
    padding: var(--s3);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--cardSolid) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    box-shadow: 0 18px 36px rgba(0,0,0,.14);
    backdrop-filter: blur(calc(var(--blur) * .9));
    -webkit-backdrop-filter: blur(calc(var(--blur) * .9));
    z-index: 60;
  }
  .js-ready .bar.menu-open .nav a{
    justify-content: flex-start;
    min-height: 40px;
  }
  .featureBlocks{ gap: var(--s9); margin-bottom: var(--s8); }
  .featurePairs{ grid-template-columns: 1fr; row-gap: 22px; }
  .featurePair{ display: block; }
  .featurePair-img{ max-width: 280px; margin: 0 auto; }
  .featurePair-text{ text-align: center; max-width: none; }
  .featureBlock-row{ flex-direction: column; text-align: center; gap: 24px; }
  .featureBlock-row .featureBlock-content{ text-align: center; }
  .featureBlock-img{ max-width: 280px; }
  .featureBlock-title{ font-size: 24px; }
  
  .stickyCTA .container{ flex-direction: column; text-align: center; }
  .stickyCTA-actions{ width: 100%; }
  .stickyCTA-actions .btn{ width: 100%; }
  .ambientOrb{ opacity: .22; filter: blur(52px); }
}

@media (max-width: 640px){
  .container{ padding: 0 var(--s4); }
  section{ padding: calc(var(--s9) * 0.95) 0; }

  .header{ padding: var(--s2) 0; }
  .header .bar{
    min-height: 44px;
    gap: var(--s3);
    padding: 0 var(--s3);
  }
  .header .btn{
    min-height: 36px;
    padding: 9px 14px;
    font-size: 14px;
  }
  .langSwitch-btn{
    min-width: 40px;
    height: 26px;
    font-size: 11px;
  }

  .hero{
    min-height: auto;
    padding: calc(var(--s10) * .86) 0 var(--s8);
  }
  .h1{
    font-size: clamp(34px, 12vw, 52px);
    line-height: 1.05;
    margin-bottom: 14px;
  }
  .lead{
    font-size: 16px;
    margin-bottom: 18px;
  }
  .sectionTitle{ font-size: clamp(28px, 9vw, 38px); }
  .sectionLead{
    font-size: 16px;
    margin-bottom: var(--s7);
  }

  .heroActions{
    width: 100%;
    gap: var(--s3);
    justify-content: center;
  }
  .heroActions .btn,
  .btn.large{
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
  .btn.large{
    padding: 14px 22px;
    font-size: 15px;
  }

  .showcaseCard,
  .featureCard,
  .privacyCard,
  .faqItem,
  .step{ padding: var(--s5); }

  .metricGrid,
  .flowSteps,
  .loadKpiGrid,
  .kpiRow,
  .sleepHeroSide{ grid-template-columns: 1fr; }
}

@media (max-width: 480px){
  .header .btn{
    padding: 8px 12px;
    font-size: 13px;
  }
  .sectionHeader{ margin-bottom: var(--s7); }
  .sectionLead{
    font-size: 15px;
    line-height: 1.42;
  }
  .heroMetaPill{
    display: inline-flex;
    max-width: 100%;
    text-align: left;
  }
  .ctaBox .heroActions .btn{
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px){
  .container{ padding: 0 14px; }
  .header .bar{ padding: 0 10px; }
  .brand > span{ font-size: 15px; }

  .h1{ font-size: clamp(30px, 10.8vw, 40px); }
  .eyebrow{ font-size: 12px; }
  .heroMetaPill{ font-size: 12px; }
  .trustBadge{
    padding: 10px 14px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .feature, .featureTab, .stickyCTA{ transition: none !important; }
  .heroCentered .hero-reveal-item{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ambientFx, .scrollProgress{ display: none !important; }
  .btn.primary{ animation: none !important; }
  .btn.primary::after{ animation: none !important; }
  .tiltCard{ transform: none !important; }
  .chartLine, .chartDot, .chartBars rect{ animation: none !important; stroke-dashoffset: 0 !important; }
  .appDataCard, .appDataCard::before, .stressTimeline span, .energyLine::after, .energyLine span.on{ animation: none !important; }
  .flowSpark span, .heartBars span, .loadBars span, .heartCurve-line, .heartCurve-dot, .heartBeatIcon, .heartBeatLine, .heartBeatDot{ animation: none !important; }
  .heartCurve-line, .heartBeatLine{ stroke-dashoffset: 0 !important; }
  .sleepWeekBars span, .sleepStageTrack b{ animation: none !important; }
}

@media (prefers-reduced-transparency: reduce){
  .headerPill{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--cardSolid);
  }
}

/* Small utility */
.muted{ color: var(--muted); }
.small{ font-size: 13px; }
.srOnly{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  border:0;
}

/* Sticky CTA Bar */
.stickyCTA{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--cardSolid) 95%, transparent);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border-top: 1px solid var(--border);
  box-shadow: 0 -10px 40px rgba(0,0,0,.12);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.stickyCTA.show{
  transform: translateY(0);
}
.stickyCTA .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}
.stickyCTA-text{
  flex: 1;
}
.stickyCTA-title{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
.stickyCTA-subtitle{
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.stickyCTA-actions{
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

/* Premium reveal: smooth, confident easing */
.reveal{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}
.showcaseCard.reveal{
  transform: translateY(32px) scale(0.98);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.showcaseCard.reveal.in{ transform: translateY(0) scale(1); }
/* Hero typography: premium spacing */
.h1{ letter-spacing: -0.03em; }
.eyebrow{ letter-spacing: .12em; }