/* ============================================================
   Life Reps — marketing site
   Brand: bold watermelon red on warm near-black.
   ============================================================ */

:root{
  /* Watermelon reds (from the app icon gradient) */
  --red:        #E4121E;
  --red-bright: #FF5547;
  --red-deep:   #C80017;
  --red-ink:    #7E0A11;

  /* Near-black grounds, warmed toward red */
  --ink-900: #120406;
  --ink-800: #19060A;
  --ink-700: #230A10;
  --ink-600: #30121A;

  /* Light ground */
  --cream:   #FFF4F2;
  --cream-2: #FDEAE7;
  --card:    #FFFFFF;

  /* Text */
  --on-dark:       #FFECEC;
  --on-dark-mute:  rgba(255,224,224,.62);
  --on-dark-faint: rgba(255,224,224,.34);
  --on-light:      #1C0A0C;
  --on-light-mute: #8A5458;

  --seed: #27A35B; /* watermelon-green, used very sparingly */

  --maxw: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --r-lg: 26px;
  --r-md: 18px;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink-900);
  color:var(--on-dark);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---------- Type ---------- */
h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:700; margin:0; letter-spacing:-.02em; line-height:1.04; }
h2{ font-size:clamp(2rem,4.6vw,3.4rem); }
h3{ font-size:clamp(1.7rem,3.4vw,2.55rem); }
p{ margin:0; }

.eyebrow{
  font-family:var(--font-mono); font-weight:600; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red-bright);
  margin:0 0 18px;
}
.eyebrow--center{ text-align:center; display:block; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:-.01em; color:#fff;
  background:linear-gradient(180deg,var(--red-bright),var(--red-deep));
  padding:.85em 1.5em; border-radius:999px; border:0; cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(228,18,30,.7), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(228,18,30,.8), inset 0 1px 0 rgba(255,255,255,.3); }
.btn--sm{ padding:.6em 1.1em; font-size:.86rem; }
.btn--lg{ padding:1.05em 1.9em; font-size:1.08rem; }
.btn--ghost{
  background:transparent; color:var(--on-dark);
  border:1.5px solid rgba(255,255,255,.22); box-shadow:none;
}
.btn--ghost:hover{ border-color:rgba(255,255,255,.5); box-shadow:none; }

/* ---------- Reveal + parallax ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
[data-parallax]{ will-change:transform; transform:translate3d(0,var(--py,0),0); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:16px clamp(16px,4vw,40px);
  transition:background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav--scrolled{
  background:rgba(18,4,6,.72); backdrop-filter:blur(18px) saturate(1.3);
  padding-top:11px; padding-bottom:11px;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.nav__icon{ width:34px; height:34px; border-radius:9px; box-shadow:0 4px 14px -4px rgba(228,18,30,.7); }
.nav__name{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; }
.nav__links{ display:flex; gap:28px; }
.nav__links a{ font-size:.92rem; font-weight:500; color:var(--on-dark-mute); transition:color .2s; }
.nav__links a:hover{ color:var(--on-dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; padding:120px 0 80px; }
.hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.9; }
.glow--a{ width:62vw; height:62vw; max-width:760px; max-height:760px; top:-14%; right:-10%;
  background:radial-gradient(circle at 50% 50%, rgba(255,85,71,.9), rgba(200,0,23,.4) 45%, transparent 70%); }
.glow--b{ width:50vw; height:50vw; max-width:620px; max-height:620px; bottom:-22%; left:-14%;
  background:radial-gradient(circle at 50% 50%, rgba(228,18,30,.7), transparent 68%); opacity:.7; }
.glow--c{ width:70vw; height:70vw; max-width:900px; max-height:900px; top:10%; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(255,85,71,.35), transparent 65%); }
.waves{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:clamp(10px,2.4vw,26px); opacity:.09; }
.waves span{ display:block; width:clamp(5px,1vw,10px); border-radius:999px; background:#fff; height:40vh;
  animation:wave 2.6s var(--ease) infinite; }
.waves span:nth-child(1){ height:22vh; animation-delay:0s } .waves span:nth-child(2){ height:40vh; animation-delay:.18s }
.waves span:nth-child(3){ height:30vh; animation-delay:.36s } .waves span:nth-child(4){ height:52vh; animation-delay:.54s }
.waves span:nth-child(5){ height:34vh; animation-delay:.72s } .waves span:nth-child(6){ height:44vh; animation-delay:.9s }
.waves span:nth-child(7){ height:24vh; animation-delay:1.08s }
@keyframes wave{ 0%,100%{ transform:scaleY(.55) } 50%{ transform:scaleY(1) } }
.grain{ position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.4) .5px, transparent .5px); background-size:3px 3px; }

.hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:40px; }
.hero__title{ font-size:clamp(2.6rem,6.6vw,5.1rem); font-weight:800; letter-spacing:-.035em; margin:0 0 22px; }
.hero__title .hl{ color:transparent; background:linear-gradient(120deg,#fff,var(--red-bright) 60%,var(--red-deep));
  -webkit-background-clip:text; background-clip:text; }
.hero__lede{ font-size:clamp(1.05rem,1.6vw,1.28rem); color:var(--on-dark-mute); max-width:34ch; margin:0 0 32px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }
.hero__devices{ display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:0;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-faint); }
.hero__devices li{ position:relative; }
.hero__devices li+li::before{ content:"·"; position:absolute; left:-13px; }
.hero__device{ display:flex; justify-content:center; }
.hero__device .phone{ animation:float 6s var(--ease) infinite; }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

.hero__scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:2px solid rgba(255,255,255,.3); border-radius:999px; }
.hero__scroll span{ position:absolute; top:8px; left:50%; width:4px; height:8px; border-radius:2px; background:#fff;
  transform:translateX(-50%); animation:scroll 1.8s var(--ease) infinite; }
@keyframes scroll{ 0%{ opacity:0; top:8px } 30%{ opacity:1 } 60%{ opacity:1; top:22px } 100%{ opacity:0; top:22px } }

/* ============================================================
   DEVICE FRAMES
   ============================================================ */
.device--phone{ width:300px; max-width:78vw; }
.phone{
  position:relative; aspect-ratio:300/620; border-radius:46px; padding:12px;
  background:linear-gradient(150deg,#2a2024,#0c0608);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.08),
    0 0 0 1px rgba(0,0,0,.5);
}
.phone__island{ position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:4;
  width:92px; height:26px; background:#000; border-radius:999px; }
.screen{ position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:var(--ink-800); color:var(--on-dark); }

/* ---- Workout / camera screen ---- */
.screen--workout{ display:flex; flex-direction:column; }
.wk-cam{ position:relative; flex:1 1 62%;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(255,85,71,.22), transparent 60%),
    linear-gradient(170deg,#241015,#0b0406 85%); }
.wk-pose{ position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); width:58%; color:rgba(255,190,190,.85); }
.pose-dots circle{ filter:drop-shadow(0 0 6px rgba(255,85,71,.8)); }
/* Soft-focus "real person" silhouette behind the skeleton, for context */
.pose-figure{ fill:none; stroke:rgba(255,242,236,1); stroke-linecap:round; stroke-linejoin:round;
  opacity:.28; filter:blur(1.1px); }
.pose-figure circle{ fill:rgba(255,242,236,1); stroke:none; }
.wk-pill{ position:absolute; top:46px; left:14px; display:inline-flex; align-items:center; gap:6px;
  font-size:.64rem; font-weight:600; letter-spacing:.02em; padding:5px 10px; border-radius:999px;
  background:rgba(0,0,0,.42); backdrop-filter:blur(6px); color:#fff; }
.wk-pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--red-bright); box-shadow:0 0 0 0 rgba(255,85,71,.6);
  animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(255,85,71,.6) } 70%{ box-shadow:0 0 0 8px rgba(255,85,71,0) } 100%{ box-shadow:0 0 0 0 rgba(255,85,71,0) } }
.wk-rep{ position:absolute; right:16px; bottom:14px; display:flex; align-items:baseline; gap:6px;
  text-shadow:0 2px 20px rgba(0,0,0,.6); }
.wk-rep__n{ font-family:var(--font-display); font-weight:800; font-size:3.6rem; line-height:.8; color:#fff; }
.wk-rep__of{ font-size:.8rem; color:rgba(255,255,255,.75); font-weight:600; }
.wk-info{ flex:0 0 auto; padding:14px 16px 18px; background:var(--ink-800); }
.wk-ex{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; }
.wk-meta{ font-size:.78rem; color:var(--on-dark-mute); margin-top:2px; }
.wk-meta .muted{ color:var(--on-dark-faint); }
.wk-coach{ display:flex; gap:9px; align-items:flex-start; margin-top:12px;
  background:rgba(255,85,71,.1); border:1px solid rgba(255,85,71,.22); border-radius:14px; padding:9px 11px; }
.wk-coach__av{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:.72rem; color:#fff;
  background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); }
.wk-coach p{ font-size:.78rem; color:var(--on-dark); line-height:1.35; }
.wk-controls{ display:flex; justify-content:center; gap:7px; margin-top:14px; }
.wk-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.2); }
.wk-dot--on{ background:var(--red-bright); width:20px; border-radius:999px; }

/* ---- Voice screen ---- */
.screen--voice{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  padding:34px 22px; text-align:center;
  background:radial-gradient(120% 80% at 50% 18%, rgba(255,85,71,.26), transparent 60%), var(--ink-800); }
.vc-orb{ display:flex; align-items:center; gap:5px; height:70px; }
.vc-orb span{ width:7px; border-radius:999px; background:linear-gradient(180deg,var(--red-bright),var(--red-deep));
  animation:vwave 1.1s var(--ease) infinite; }
.vc-orb span:nth-child(1){ height:26px; animation-delay:0s } .vc-orb span:nth-child(2){ height:52px; animation-delay:.12s }
.vc-orb span:nth-child(3){ height:70px; animation-delay:.24s } .vc-orb span:nth-child(4){ height:46px; animation-delay:.36s }
.vc-orb span:nth-child(5){ height:30px; animation-delay:.48s }
@keyframes vwave{ 0%,100%{ transform:scaleY(.5) } 50%{ transform:scaleY(1) } }
.vc-name{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.vc-sub{ font-size:.78rem; color:var(--on-dark-mute); margin-top:-14px; }
.vc-line{ font-size:.92rem; line-height:1.5; color:var(--on-dark); max-width:24ch; }
.vc-switch{ display:flex; gap:7px; margin-top:6px; }
.vc-chip{ font-size:.72rem; font-weight:600; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); color:var(--on-dark-mute); }
.vc-chip--on{ background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); color:#fff; }

/* ---- Today screen ---- */
.screen--today{ padding:46px 16px 16px; background:var(--ink-800); display:flex; flex-direction:column; gap:12px; }
.td-head{ display:flex; align-items:baseline; justify-content:space-between; }
.td-hi{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; }
.td-date{ font-size:.72rem; color:var(--on-dark-mute); }
.td-card{ background:linear-gradient(165deg,#2a1118,#1a0a0f); border:1px solid rgba(255,255,255,.07);
  border-radius:18px; padding:14px; }
.td-card__row{ display:flex; gap:7px; margin-bottom:8px; }
.td-tag{ font-size:.62rem; font-weight:600; letter-spacing:.02em; padding:4px 9px; border-radius:999px;
  background:rgba(255,85,71,.16); color:var(--red-bright); }
.td-tag--ghost{ background:rgba(255,255,255,.07); color:var(--on-dark-mute); }
.td-card__title{ font-family:var(--font-display); font-weight:700; font-size:1.18rem; margin-bottom:10px; }
.td-list{ display:flex; flex-direction:column; gap:8px; }
.td-ex{ display:flex; justify-content:space-between; font-size:.82rem; }
.td-ex span{ color:var(--on-dark); } .td-ex b{ color:var(--on-dark-mute); font-weight:600; }
.td-ex--muted span,.td-ex--muted b{ color:var(--on-dark-faint); }
.td-start{ width:100%; margin-top:13px; padding:11px; border:0; border-radius:12px; cursor:pointer;
  font-family:var(--font-display); font-weight:700; font-size:.92rem; color:#fff;
  background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); }
.td-mini{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:12px; }
.td-mini__k{ font-size:.68rem; color:var(--on-dark-mute); }
.td-mini__v{ font-size:.86rem; font-weight:600; }

/* ---- Rings ---- */
.ring{ --p:0; position:relative; width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:conic-gradient(var(--red-bright) calc(var(--p)*1%), rgba(255,255,255,.12) 0); display:grid; place-items:center; }
.ring::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:var(--ink-800); }
.ring span{ position:relative; font-family:var(--font-display); font-weight:800; font-size:.9rem; }
.ring--lg{ width:92px; height:92px; }
.ring--lg span{ font-size:1.5rem; } .ring--lg small{ font-size:.7rem; opacity:.7; }

/* ---- Nutrition screen ---- */
.screen--nutri{ padding:46px 16px 16px; background:var(--ink-800); display:flex; flex-direction:column; gap:16px; }
.nu-head{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; }
.nu-ring-row{ display:flex; align-items:center; gap:16px; }
.nu-legend{ display:flex; flex-direction:column; gap:8px; }
.nu-leg b{ display:block; font-size:.82rem; } .nu-leg span{ font-size:.72rem; color:var(--on-dark-mute); }
.nu-leg--ok b{ color:var(--seed); }
.nu-week{ display:flex; align-items:flex-end; gap:7px; height:72px; padding:12px; border-radius:14px;
  background:rgba(255,255,255,.04); }
.nu-week span{ flex:1; border-radius:5px 5px 2px 2px; height:var(--h); min-height:3px;
  background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); opacity:.9; }
.nu-week span:last-child{ background:rgba(255,255,255,.12); }
.nu-note{ font-size:.76rem; line-height:1.45; color:var(--on-dark-mute); }

/* ---- Chat screen ---- */
.screen--chat{ display:flex; flex-direction:column; background:var(--ink-800); }
.ch-head{ display:flex; align-items:center; gap:9px; padding:44px 14px 12px; border-bottom:1px solid rgba(255,255,255,.06); }
.ch-head b{ font-family:var(--font-display); font-size:.95rem; } .ch-head small{ display:block; font-size:.66rem; color:var(--on-dark-mute); }
.ch-body{ flex:1; display:flex; flex-direction:column; gap:9px; padding:14px; overflow:hidden; }
.bubble{ max-width:82%; padding:9px 12px; border-radius:16px; font-size:.78rem; line-height:1.4; }
.bubble--me{ align-self:flex-end; background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); color:#fff; border-bottom-right-radius:5px; }
.bubble--coach{ align-self:flex-start; background:rgba(255,255,255,.07); border-bottom-left-radius:5px; }
.ch-action{ align-self:flex-start; font-size:.76rem; font-weight:600; color:var(--red-bright);
  border:1.5px solid rgba(255,85,71,.4); border-radius:999px; padding:7px 13px; }
.ch-action--sm{ font-size:.72rem; padding:6px 11px; }
.ch-input{ margin:0 12px 14px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.06);
  font-size:.76rem; color:var(--on-dark-faint); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ background:linear-gradient(90deg,var(--red-deep),var(--red),var(--red-bright),var(--red));
  overflow:hidden; padding:16px 0; }
.marquee__track{ display:flex; gap:26px; align-items:center; width:max-content; white-space:nowrap;
  animation:marq 32s linear infinite; }
.marquee__track span{ font-family:var(--font-display); font-weight:800; font-size:1.1rem; color:#fff; letter-spacing:-.01em; }
.marquee__track i{ color:rgba(255,255,255,.55); font-style:normal; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ============================================================
   SECTIONS (light)
   ============================================================ */
.pitch{ background:var(--cream); color:var(--on-light); padding:clamp(70px,9vw,130px) 0; }
.pitch__title{ max-width:18ch; margin:0 auto; text-align:center; color:var(--on-light);
  font-size:clamp(1.8rem,4vw,3.1rem); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.stat{ text-align:center; padding:28px 16px; background:var(--card); border-radius:var(--r-lg);
  box-shadow:0 20px 50px -30px rgba(126,10,17,.4); border:1px solid rgba(126,10,17,.06); }
.stat__n{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem,5vw,3.6rem);
  background:linear-gradient(120deg,var(--red),var(--red-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat__l{ font-size:.92rem; color:var(--on-light-mute); margin-top:6px; }

.features{ background:var(--cream); color:var(--on-light); padding:clamp(20px,3vw,40px) 0 clamp(70px,9vw,120px); }
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px,6vw,80px);
  max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7vw,80px) 24px; }
.feature--rev .feature__copy{ order:2; }
.feature__copy h3{ color:var(--on-light); margin-bottom:16px; }
.feature__copy>p{ font-size:1.08rem; color:var(--on-light-mute); max-width:46ch; }
.ticks{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-direction:column; gap:12px; }
.ticks li{ position:relative; padding-left:30px; font-size:.98rem; color:var(--on-light); }
.ticks li::before{ content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--red); box-shadow:inset 0 0 0 2px var(--cream);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat, linear-gradient(#000,#000); }
.feature__art{ display:flex; justify-content:center; }

/* ============================================================
   ECOSYSTEM (dark)
   ============================================================ */
.eco{ position:relative; background:linear-gradient(180deg,var(--ink-900),var(--ink-700) 55%,var(--ink-900));
  padding:clamp(80px,10vw,140px) 0 clamp(90px,11vw,160px); overflow:hidden; }
.eco__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.eco__head{ position:relative; z-index:2; text-align:center; max-width:760px; }
.eco__head h2{ margin-top:4px; }
.eco__lede{ color:var(--on-dark-mute); font-size:1.1rem; margin:20px auto 0; max-width:54ch; }

.eco__stage{ position:relative; z-index:2; max-width:1120px; margin:clamp(40px,6vw,72px) auto 0; padding:0 24px;
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:clamp(20px,3vw,34px); }
.eco__stage>div{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.eco__label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-faint); }
.eco__tv{ order:2; margin-bottom:30px; }
.eco__ipad{ order:4; }
.eco__mac{ order:5; }
.eco__watch{ order:1; margin-bottom:20px; }
.eco__phone{ order:3; }

/* TV */
.tv{ width:420px; max-width:82vw; }
.tv__screen{ aspect-ratio:16/9; border-radius:14px; overflow:hidden; position:relative;
  background:radial-gradient(120% 120% at 50% 0%, rgba(255,85,71,.22), transparent 60%), linear-gradient(170deg,#1c0a10,#0a0406);
  border:7px solid #0a0507; box-shadow:0 40px 80px -36px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6%; }
.tv-rest{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.3em; color:var(--red-bright); }
.tv-time{ font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,7vw,3.6rem); line-height:1; }
.tv-next{ margin-top:12px; font-size:.86rem; color:var(--on-dark); } .tv-next b{ color:var(--red-bright); }
.tv-coach{ margin-top:8px; font-size:.78rem; color:var(--on-dark-mute); max-width:34ch; }
.tv__bar{ height:0; } .tv__stand{ width:120px; height:14px; margin-top:-2px; border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,#1a1013,#0a0507); }

/* iPad */
.ipad{ width:300px; max-width:72vw; aspect-ratio:300/400; border-radius:26px; padding:12px;
  background:linear-gradient(150deg,#2a2024,#0c0608);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.07); }
.screen--ipad{ border-radius:16px; display:flex; gap:10px; padding:16px; background:var(--ink-800); }
.ip-col{ flex:1.4; } .ip-col--side{ flex:1; display:flex; flex-direction:column; gap:10px; }
.screen--ipad .td-hi{ font-size:1.1rem; margin-bottom:10px; }
.ip-card{ background:linear-gradient(165deg,#2a1118,#1a0a0f); border:1px solid rgba(255,255,255,.07);
  border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.ip-card .td-card__title{ font-size:1rem; margin-bottom:4px; }
.ip-mini{ background:rgba(255,255,255,.05); border-radius:12px; padding:12px; display:flex; flex-direction:column;
  align-items:center; gap:6px; text-align:center; }
.ip-mini small{ font-size:.64rem; color:var(--on-dark-mute); }
.ip-mini--row{ flex-direction:row; justify-content:space-between; align-items:center; }
.ip-mini--row b{ font-family:var(--font-display); font-size:1.1rem; }

/* Mac */
.mac{ width:440px; max-width:84vw; }
.mac__screen{ border-radius:16px 16px 0 0; padding:10px; background:linear-gradient(150deg,#2a2024,#0c0608);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.06); }
.screen--mac{ aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:var(--ink-800); display:flex; flex-direction:column; }
.mac-bar{ display:flex; gap:6px; padding:9px 12px; background:rgba(255,255,255,.04); }
.mac-bar span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2); }
.mac-bar span:first-child{ background:#ff5f57 } .mac-bar span:nth-child(2){ background:#febc2e } .mac-bar span:nth-child(3){ background:#28c840 }
.mac-body{ flex:1; display:flex; }
.mac-side{ width:38%; padding:14px 12px; background:rgba(0,0,0,.25); display:flex; flex-direction:column; gap:7px; }
.mac-brand{ display:flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:.82rem; margin-bottom:6px; }
.mac-brand img{ width:20px; height:20px; border-radius:6px; }
.mac-nav{ font-size:.76rem; color:var(--on-dark-mute); padding:6px 9px; border-radius:8px; }
.mac-nav--on{ background:rgba(255,85,71,.16); color:var(--red-bright); font-weight:600; }
.mac-main{ flex:1; padding:16px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.mac__base{ height:12px; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#201317,#0a0507);
  box-shadow:0 30px 50px -28px rgba(0,0,0,.9); position:relative; }
.mac__base::after{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:80px; height:5px; border-radius:0 0 8px 8px; background:rgba(0,0,0,.5); }

/* Watch */
.watch{ position:relative; width:150px; max-width:46vw; aspect-ratio:150/180; border-radius:42px; padding:12px;
  background:linear-gradient(150deg,#2a2024,#0a0608);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.07); }
.watch__crown{ position:absolute; right:-5px; top:44%; width:8px; height:30px; border-radius:4px;
  background:linear-gradient(180deg,#3a2a2e,#140a0c); }
.screen--watch{ border-radius:30px; background:#000; display:flex; flex-direction:column; justify-content:center;
  gap:5px; padding:16px 14px; text-align:left; }
.wa-ex{ font-size:.74rem; color:var(--on-dark-mute); }
.wa-rep{ font-family:var(--font-display); font-weight:800; font-size:2.3rem; line-height:1; }
.wa-rep small{ font-size:.6rem; font-weight:600; color:var(--on-dark-mute); margin-left:4px; }
.wa-row{ display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.wa-hr{ font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--red-bright); }
.wa-hr small{ font-size:.56rem; color:var(--on-dark-mute); margin-left:2px; }
.wa-set{ font-size:.66rem; color:var(--on-dark-mute); }
.wa-bar{ height:5px; border-radius:999px; background:rgba(255,255,255,.14); margin-top:8px; overflow:hidden; }
.wa-bar i{ display:block; height:100%; width:var(--w); border-radius:999px; background:linear-gradient(90deg,var(--red-bright),var(--red-deep)); }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{ background:var(--cream); color:var(--on-light); padding:clamp(70px,9vw,130px) 0; text-align:center; }
.how h2{ color:var(--on-light); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; text-align:left; }
.step{ padding:30px 26px; background:var(--card); border-radius:var(--r-lg); border:1px solid rgba(126,10,17,.06);
  box-shadow:0 24px 54px -34px rgba(126,10,17,.4); position:relative; overflow:hidden; }
.step::after{ content:""; position:absolute; top:0; left:0; width:5px; height:100%; background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); }
.step__n{ font-family:var(--font-mono); font-weight:600; font-size:.9rem; color:var(--red); letter-spacing:.1em; margin-bottom:14px; }
.step h4{ font-size:1.3rem; color:var(--on-light); margin-bottom:8px; }
.step p{ color:var(--on-light-mute); font-size:.96rem; }

/* ============================================================
   EVERYTHING GRID (dark)
   ============================================================ */
.every{ background:var(--ink-900); color:var(--on-dark); padding:clamp(80px,10vw,140px) 0; text-align:center; }
.every__lede{ color:var(--on-dark-mute); font-size:1.1rem; max-width:48ch; margin:18px auto 0; }
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; text-align:left; }
.gcard{ padding:22px; border-radius:var(--r-md); background:linear-gradient(165deg,rgba(255,85,71,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); transition:transform .3s var(--ease), border-color .3s var(--ease); }
.gcard:hover{ transform:translateY(-4px); border-color:rgba(255,85,71,.4); }
.gcard h5{ font-size:1.02rem; margin-bottom:7px; }
.gcard p{ font-size:.86rem; color:var(--on-dark-mute); line-height:1.45; }

/* ============================================================
   QUOTE
   ============================================================ */
.quote{ background:linear-gradient(120deg,var(--red-deep),var(--red) 55%,var(--red-bright)); color:#fff;
  padding:clamp(70px,9vw,120px) 0; text-align:center; }
.quote blockquote{ margin:0 auto; max-width:20ch; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,3.8vw,2.8rem); letter-spacing:-.02em; line-height:1.18; max-width:24ch; text-wrap:balance; }

/* ============================================================
   CTA
   ============================================================ */
.cta{ position:relative; background:var(--ink-900); color:var(--on-dark); padding:clamp(90px,12vw,160px) 0; text-align:center; overflow:hidden; }
.cta__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cta .wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.cta__icon{ width:96px; height:96px; border-radius:22px; box-shadow:0 20px 50px -16px rgba(228,18,30,.8); margin-bottom:26px; }
.cta h2{ font-size:clamp(2rem,5vw,3.4rem); max-width:16ch; }
.cta p{ color:var(--on-dark-mute); font-size:1.12rem; margin:18px 0 30px; max-width:42ch; }
.cta__fine{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-dark-faint); margin-top:26px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:#0a0305; color:var(--on-dark); padding:60px 0 40px; border-top:1px solid rgba(255,255,255,.06); }
.foot__grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; }
.foot__life{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.3rem; }
.foot__life img{ width:32px; height:32px; border-radius:9px; }
.foot__brand p{ margin-top:14px; color:var(--on-dark-mute); font-size:.92rem; max-width:34ch; }
.foot__by{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.foot__byk{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint); }
.foot__lykta{ height:40px; width:auto; }
.foot__by a{ color:var(--red-bright); font-size:.92rem; }
.foot__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:44px;
  padding-top:22px; border-top:1px solid rgba(255,255,255,.06); font-size:.78rem; color:var(--on-dark-faint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__links{ display:none; }
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__copy{ order:2; } .hero__device{ order:1; margin-bottom:10px; }
  .hero__lede{ margin-left:auto; margin-right:auto; } .hero__cta{ justify-content:center; } .hero__devices{ justify-content:center; }
  .feature{ grid-template-columns:1fr; }
  .feature--rev .feature__copy{ order:0; }
  .feature__copy{ text-align:center; } .feature__copy>p{ margin:0 auto; } .ticks{ display:inline-flex; text-align:left; }
  .stats{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .eco__stage{ gap:30px; }
  .eco__tv,.eco__watch,.eco__ipad,.eco__mac,.eco__phone{ order:0; margin-bottom:0; }
  .foot__legal{ flex-direction:column; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  [data-parallax]{ transform:none !important; }
}

/* ============================================================
   ADDED SCREENS — life goals + food logging
   ============================================================ */

/* Life goals / any frequency */
.screen--goals{ padding:46px 14px 16px; background:var(--ink-800); display:flex; flex-direction:column; gap:9px; }
.go-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:4px; }
.go-head span{ font-family:var(--font-display); font-weight:800; font-size:1.4rem; }
.go-head small{ font-size:.72rem; color:var(--on-dark-mute); }
.go-item{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:13px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.go-check{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.78rem; color:var(--on-dark-faint); border:1.5px solid rgba(255,255,255,.18); }
.go-check--on{ color:#fff; border-color:transparent; background:linear-gradient(180deg,var(--red-bright),var(--red-deep)); }
.go-main{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.go-main b{ font-size:.86rem; font-weight:600; }
.go-freq{ font-size:.66rem; color:var(--on-dark-mute); }
.go-streak{ font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--red-bright); }

/* Food logging (nutrition v2) */
.screen--nutri{ gap:11px; }
.nu-methods{ display:flex; gap:8px; }
.nu-method{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px; border-radius:13px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:var(--on-dark-mute);
  font-size:.68rem; font-weight:600; }
.nu-method svg{ width:22px; height:22px; }
.nu-method--on{ background:rgba(255,85,71,.14); border-color:rgba(255,85,71,.35); color:var(--red-bright); }
.nu-item{ display:flex; align-items:center; gap:11px; padding:10px; border-radius:14px;
  background:linear-gradient(165deg,#2a1118,#1a0a0f); border:1px solid rgba(255,255,255,.07); }
.nu-thumb{ flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,var(--red-bright),var(--red-deep)); }
.nu-thumb svg{ width:22px; height:22px; }
.nu-item__t b{ display:block; font-size:.84rem; } .nu-item__t span{ font-size:.68rem; color:var(--on-dark-mute); }
.nu-sub{ font-size:.68rem; color:var(--on-dark-mute); letter-spacing:.02em; margin-top:2px; }