/* ============================================================
   macroBody — showcase site
   Tokens mirror apps/mobile/src/theme/index.ts
   ============================================================ */

/* ---------- Accents (theme-invariant, like the app) ---------- */
:root{
  --brand:#10B981; --brand-2:#34D399; --brand-text:#fff;
  --cal:#3E8EF7; --pro:#FF6F61; --fat:#F5C242; --carb:#3FBF7F;
  --expend:#C86A3E; --weight:#A78BFA; --micros:#F5E000; --positive:#3FBF7F; --warn:#FFD60A;

  --maxw:1180px;
  --r-card:22px; --r-btn:16px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Inter Tight','Inter',system-ui,sans-serif;

  /* pointer-reactive background offsets (set live from script.js) */
  --gx:0px; --gy:0px; --gxn:0px; --gyn:0px;
}

/* ---------- Theme ramps ---------- */
:root[data-theme="dark"]{
  --bg:#0E1117; --elev:#151A21; --s1:#1A2027; --s2:#232B34; --line:#2C343E;
  --t1:#F3F5F7; --t2:#99A2AD; --t3:#646E7A;
  --tile-ring:rgba(255,255,255,.10);
  --card-shadow:0 24px 60px -28px rgba(0,0,0,.8);
  --glass:rgba(21,26,33,.72);
  --hairline-soft:rgba(255,255,255,.06);
}
:root[data-theme="mix"]{
  --bg:#171C24; --elev:#1F2630; --s1:#262E39; --s2:#313A46; --line:#3B4552;
  --t1:#EEF1F4; --t2:#A2ABB6; --t3:#6B7682;
  --tile-ring:rgba(255,255,255,.12);
  --card-shadow:0 24px 60px -30px rgba(0,0,0,.7);
  --glass:rgba(31,38,48,.72);
  --hairline-soft:rgba(255,255,255,.06);
}
:root[data-theme="light"]{
  --bg:#F5F7F8; --elev:#FFFFFF; --s1:#FFFFFF; --s2:#EEF1F3; --line:#E3E8EC;
  --t1:#111827; --t2:#6B7280; --t3:#9CA3AF;
  --tile-ring:rgba(0,0,0,.06);
  --card-shadow:0 24px 50px -28px rgba(11,18,32,.28);
  --glass:rgba(255,255,255,.72);
  --hairline-soft:rgba(0,0,0,.04);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--t1);
  line-height:1.55;
  overflow-x:hidden;
  transition:background .5s var(--ease),color .5s var(--ease);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.container--narrow{max-width:760px}
.nowrap{white-space:nowrap}
.muted{color:var(--t2)}

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 12px rgba(16,185,129,.6);
}

/* ---------- Ambient blobs ---------- */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* `transform` runs the idle drift keyframe; `translate` (independent property)
   is driven live by the pointer in script.js, so the two compose cleanly. */
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  will-change:transform,translate;transition:translate .6s var(--ease);
  animation:drift 24s var(--ease) infinite alternate}
:root[data-theme="light"] .blob{opacity:.14}
.blob--brand{width:520px;height:520px;background:var(--brand);top:-160px;right:-120px}
.blob--calories{width:420px;height:420px;background:var(--cal);top:40%;left:-180px;animation-delay:-6s}
.blob--protein{width:360px;height:360px;background:var(--pro);bottom:-120px;right:10%;animation-delay:-12s;opacity:.32}
.blob--weight{width:380px;height:380px;background:var(--weight);top:120%;left:30%;animation-delay:-3s;opacity:.3}
@keyframes drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,-50px) scale(1.15)}}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s var(--ease)}
.nav__inner{
  max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:24px;
}
.nav.scrolled{backdrop-filter:blur(18px);background:var(--glass);border-bottom:1px solid var(--line)}
.nav.scrolled .nav__inner{padding:12px 24px}

.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.5px}
.brand__tile{
  width:38px;height:38px;border-radius:11px;overflow:hidden;flex:none;
  background:#000;box-shadow:0 0 0 1px var(--tile-ring),0 8px 20px -8px rgba(0,0,0,.6);
}
.brand__tile img{width:100%;height:100%;object-fit:cover}
.brand__tile--sm{width:46px;height:46px;border-radius:13px}
.brand__word{font-size:20px;font-weight:700;color:var(--t1)}
.brand__word b{font-weight:800}

.nav__links{display:flex;gap:28px;margin-left:8px;flex:1}
.nav__links a{color:var(--t2);font-weight:500;font-size:15px;position:relative;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand);transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--t1)}
.nav__links a:hover::after{width:100%}

.nav__actions{display:flex;align-items:center;gap:14px}
/* language switcher (segmented) */
.lang-nav{display:inline-flex;align-items:center;gap:2px;background:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.lang-nav button{font:inherit;font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--t2);
  background:none;border:0;cursor:pointer;padding:6px 10px;border-radius:var(--r-pill);
  line-height:1;transition:.2s var(--ease)}
.lang-nav button:hover{color:var(--t1)}
.lang-nav button.is-active{background:var(--brand);color:#fff}

/* RTL: keep numeric / formula / marquee runs left-to-right */
[dir="rtl"] .marquee__track,[dir="rtl"] .pc__formula,[dir="rtl"] .pipe-step code,
[dir="rtl"] .price-card__amt,[dir="rtl"] .stat__num,[dir="rtl"] .pc__value,[dir="rtl"] .value-banner__pct,[dir="rtl"] .vbar__price{direction:ltr}
[dir="rtl"] .nav__links a::after{left:auto;right:0}
.theme-toggle{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--s2);border:1px solid var(--line);color:var(--t2);
  padding:8px 12px;border-radius:var(--r-pill);font:inherit;font-size:13px;font-weight:600;
  transition:.25s var(--ease);
}
.theme-toggle:hover{color:var(--t1);transform:translateY(-1px)}
.theme-toggle__dot{width:14px;height:14px;border-radius:50%;
  background:conic-gradient(var(--brand),var(--cal),var(--weight),var(--brand));
  box-shadow:0 0 0 2px var(--bg) inset}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:700;cursor:pointer;border:0;
  padding:14px 24px;border-radius:var(--r-btn);transition:.25s var(--ease);
  white-space:nowrap;
}
.btn--sm{padding:10px 18px;font-size:14px}
.btn--full{width:100%}
.btn--primary{background:var(--brand);color:#fff;box-shadow:0 12px 30px -10px rgba(16,185,129,.6)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(16,185,129,.75)}
.btn--ghost{background:var(--s1);color:var(--t1);border:1px solid var(--line)}
.btn--ghost:hover{transform:translateY(-2px);border-color:var(--brand)}

/* ---------- Store badges ---------- */
.store-badge{
  display:inline-flex;align-items:center;gap:11px;
  background:var(--t1);color:var(--bg);
  padding:11px 18px;border-radius:14px;transition:.25s var(--ease);
}
.store-badge:hover{transform:translateY(-2px)}
.store-badge span{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.store-badge small{font-size:10px;opacity:.7;font-weight:500;letter-spacing:.3px}
.store-badge strong{font-size:16px;font-weight:700}

/* ---------- Cookie consent banner (Consent Mode v2) ---------- */
.consent{
  position:fixed;left:50%;bottom:20px;z-index:300;
  transform:translateX(-50%) translateY(160%);opacity:0;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;
  width:min(700px,calc(100% - 28px));
  background:var(--elev);border:1px solid var(--line);border-radius:18px;
  padding:15px 18px;box-shadow:var(--card-shadow);
  transition:transform .55s var(--ease),opacity .45s var(--ease);
}
.consent.is-in{transform:translateX(-50%) translateY(0);opacity:1}
.consent__text{flex:1 1 300px;font-size:13.5px;line-height:1.5;color:var(--t2)}
.consent__link{color:var(--t1);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.consent__link:hover{color:var(--brand)}
.consent__btns{display:flex;gap:10px;flex:none}
.consent__btn{font:inherit;font-weight:700;font-size:13px;cursor:pointer;
  padding:10px 18px;border-radius:12px;border:1px solid var(--line);transition:.2s var(--ease)}
.consent__btn--ghost{background:transparent;color:var(--t2)}
.consent__btn--ghost:hover{color:var(--t1);border-color:var(--t3)}
.consent__btn--accept{background:var(--brand);color:#fff;border-color:var(--brand)}
.consent__btn--accept:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(16,185,129,.6)}
@media (max-width:560px){
  .consent{bottom:0;width:100%;border-radius:18px 18px 0 0}
  .consent__btns{flex:1 1 100%}
  .consent__btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  .consent{transition:none;transform:translateX(-50%);opacity:1}
}
.consent__link{color:var(--brand);font-weight:700;text-decoration:none;white-space:nowrap}
.consent__link:hover{text-decoration:underline}

/* ---------- Legal / privacy prose ---------- */
.legal{max-width:760px;margin:0 auto}
.legal h3{font-size:20px;font-weight:800;letter-spacing:-.2px;color:var(--t1);margin:30px 0 10px}
.legal p{color:var(--t2);font-size:15px;line-height:1.7;margin-bottom:12px}
.legal ul{color:var(--t2);font-size:15px;line-height:1.7;margin:0 0 12px 22px}
.legal li{margin-bottom:8px}
.legal b{color:var(--t1)}
.legal a{color:var(--brand);font-weight:600}
.legal a:hover{text-decoration:underline}
.legal__updated{font-size:13px;color:var(--t3);margin-bottom:10px}
.legal__manage{margin-top:18px}
.footer__base a{color:var(--t2);text-decoration:none}
.footer__base a:hover{color:var(--brand)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:160px 0 60px;overflow:hidden}
.hero__spotlight{position:absolute;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.18),transparent 60%);
  pointer-events:none;transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;z-index:0}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:1}

.eyebrow{display:inline-flex;align-items:center;gap:9px;
  background:var(--s1);border:1px solid var(--line);color:var(--t2);
  padding:7px 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;margin-bottom:24px}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(16,185,129,.2);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(16,185,129,.2)}50%{box-shadow:0 0 0 7px rgba(16,185,129,.05)}}

.hero__title{font-family:var(--display);font-weight:900;letter-spacing:-1.5px;
  font-size:clamp(42px,6vw,76px);line-height:1.02;margin-bottom:22px}
.grad-text{background:linear-gradient(120deg,var(--brand),var(--brand-2) 30%,var(--cal) 55%,var(--weight) 80%,var(--brand));
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradFlow 8s var(--ease) infinite}
@keyframes gradFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero__tagline{font-size:clamp(16px,2vw,20px);color:var(--t2);max-width:520px;margin-bottom:34px}
.hero__tagline b{color:var(--t1);font-weight:700}

.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px}
.hero__stats{display:flex;gap:38px;flex-wrap:wrap}
.stat__num{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--t1),var(--brand) 50%,var(--t2));background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradFlow 9s var(--ease) infinite}
.stat:nth-child(2) .stat__num{animation-delay:-3s}
.stat:nth-child(3) .stat__num{animation-delay:-6s}
.stat__label{font-size:13px;color:var(--t2);margin-top:2px}

.hero__stage{position:relative;display:flex;justify-content:center;align-items:center}
.hero__glow{position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(16,185,129,.28),transparent 65%);filter:blur(30px);z-index:0}

.hero__scrollcue{display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--t3);font-size:12px;letter-spacing:1px;text-transform:uppercase;
  margin-top:30px;animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ============================================================
   PHONE FRAME + SCREENS
   ============================================================ */
.phone{
  --pw:300px;
  position:relative;width:var(--pw);aspect-ratio:300/620;
  background:#05070a;border-radius:42px;padding:11px;z-index:2;
  box-shadow:0 0 0 2px rgba(255,255,255,.04),0 50px 90px -40px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .5s var(--ease);
}
.phone::after{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:108px;height:26px;background:#05070a;border-radius:0 0 16px 16px;z-index:5}
.phone--hero{--pw:330px}
.phone--sm{--pw:270px}
.phone--xs{--pw:190px}
.screen{
  width:100%;height:100%;border-radius:32px;overflow:hidden;
  background:var(--scr-bg,#0E1117);position:relative;
  font-size:11px;color:var(--scr-t1,#F3F5F7);
}

.floaty{animation:floaty 6s var(--ease) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ----- per-screen palette (screens default to dark app theme) ----- */
.screen{
  --scr-bg:#0E1117; --scr-elev:#151A21; --scr-s1:#1A2027; --scr-s2:#232B34;
  --scr-line:#2C343E; --scr-t1:#F3F5F7; --scr-t2:#99A2AD; --scr-t3:#646E7A;
}
.screen[data-theme-screen="light"]{
  --scr-bg:#F5F7F8; --scr-elev:#fff; --scr-s1:#fff; --scr-s2:#EEF1F3;
  --scr-line:#E3E8EC; --scr-t1:#111827; --scr-t2:#6B7280; --scr-t3:#9CA3AF;
}
.screen[data-theme-screen="mix"]{
  --scr-bg:#171C24; --scr-elev:#1F2630; --scr-s1:#262E39; --scr-s2:#313A46;
  --scr-line:#3B4552; --scr-t1:#EEF1F4; --scr-t2:#A2ABB6; --scr-t3:#6B7682;
}

/* ----- shared in-screen primitives ----- */
.s-wrap{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--scr-bg)}
.s-status{display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px 4px;font-size:11px;font-weight:700;color:var(--scr-t1)}
.s-status .s-dots{display:flex;gap:3px;align-items:center;opacity:.8}
.s-status .s-dots i{width:4px;height:4px;border-radius:50%;background:var(--scr-t2);display:block}
.s-body{flex:1;overflow:hidden;padding:6px 14px 0}
.s-kicker{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--scr-t2);font-weight:700}
.s-title{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:-.5px;color:var(--scr-t1);margin:1px 0 10px}
.s-card{background:var(--scr-s1);border:1px solid var(--scr-line);border-radius:16px;padding:12px;margin-bottom:9px}
.s-row{display:flex;align-items:center;gap:9px}
.s-spread{display:flex;align-items:center;justify-content:space-between}

/* tab bar */
.s-tabs{display:flex;align-items:center;justify-content:space-around;
  padding:10px 14px 16px;background:var(--scr-elev);border-top:1px solid var(--scr-line);position:relative}
.s-tab{width:18px;height:18px;color:var(--scr-t3)}
.s-tab.on{color:var(--brand)}
.s-fab{width:46px;height:46px;border-radius:15px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 10px 22px -8px rgba(16,185,129,.8);margin-top:-22px;font-size:24px;font-weight:300}

/* macro bars */
.s-macro{margin:7px 0}
.s-macro .s-spread{font-size:10px;margin-bottom:4px;color:var(--scr-t2);font-weight:600}
.s-macro .s-spread b{color:var(--scr-t1)}
.s-track{height:6px;border-radius:99px;background:var(--scr-s2);overflow:hidden}
.s-fill{height:100%;border-radius:99px}

/* calorie ring */
.s-ring-wrap{display:flex;align-items:center;gap:14px}
.s-ring{position:relative;width:96px;height:96px;flex:none}
.s-ring svg{transform:rotate(-90deg)}
.s-ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.s-ring__num{font-family:var(--display);font-size:21px;font-weight:900;color:var(--scr-t1);line-height:1}
.s-ring__lab{font-size:8px;color:var(--scr-t2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

/* insight mini-cards */
.s-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.s-mini{background:var(--scr-s1);border:1px solid var(--scr-line);border-radius:14px;padding:9px 10px}
.s-mini__lab{font-size:8.5px;color:var(--scr-t2);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.s-mini__val{font-family:var(--display);font-size:16px;font-weight:800;color:var(--scr-t1);margin-top:2px}
.s-mini__val small{font-size:9px;font-weight:600;color:var(--scr-t2)}
.s-spark{height:22px;margin-top:5px;width:100%}

/* food rows */
.s-food{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--scr-line)}
.s-food:last-child{border-bottom:0}
.s-food__tile{width:30px;height:30px;border-radius:9px;background:var(--scr-s2);
  display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.s-food__name{font-size:11px;font-weight:700;color:var(--scr-t1)}
.s-food__sub{font-size:8.5px;color:var(--scr-t2);margin-top:1px}
.s-food__cal{margin-left:auto;font-size:10px;font-weight:800;color:var(--scr-t1)}

/* week chips */
.s-week{display:flex;justify-content:space-between;margin:4px 0 10px}
.s-day{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8px;color:var(--scr-t2);font-weight:600}
.s-day b{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;background:var(--scr-s2);color:var(--scr-t1)}
.s-day.on b{background:var(--brand);color:#fff}
.s-day.dot b{box-shadow:0 0 0 1.5px var(--brand) inset}

/* summary bar (4 macros) */
.s-summary{display:flex;gap:6px;margin-bottom:10px}
.s-sm{flex:1;background:var(--scr-s1);border:1px solid var(--scr-line);border-radius:11px;padding:7px 6px;text-align:center}
.s-sm__k{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.s-sm__v{font-size:11px;font-weight:800;color:var(--scr-t1);margin-top:1px}
.s-sm__bar{height:3px;border-radius:99px;background:var(--scr-s2);margin-top:5px;overflow:hidden}
.s-sm__bar i{display:block;height:100%;border-radius:99px}

/* camera screen */
.s-cam{position:absolute;inset:0;display:flex;flex-direction:column;
  background:linear-gradient(160deg,#1b2530,#0c1014)}
.s-cam__view{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.s-cam__plate{font-size:96px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
.s-cam__frame{position:absolute;inset:34px 26px;border:2px solid rgba(255,255,255,.5);border-radius:20px}
.s-cam__frame::before,.s-cam__frame::after{content:"";position:absolute;width:22px;height:22px;border:3px solid var(--brand)}
.s-cam__frame::before{top:-2px;left:-2px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.s-cam__frame::after{bottom:-2px;right:-2px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.s-cam__scan{position:absolute;left:26px;right:26px;height:2px;background:var(--brand);
  box-shadow:0 0 12px 2px rgba(16,185,129,.8);animation:scanline 2.4s var(--ease) infinite}
@keyframes scanline{0%,100%{top:38px}50%{top:calc(100% - 60px)}}
.s-cam__pill{position:absolute;top:16px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:9px;font-weight:700;
  padding:6px 12px;border-radius:99px;display:flex;align-items:center;gap:6px}
.s-cam__pill i{width:6px;height:6px;border-radius:50%;background:var(--brand);animation:pulse 1.4s infinite}
.s-cam__sheet{background:var(--scr-elev);border-radius:22px 22px 0 0;padding:14px 16px 18px;border-top:1px solid var(--scr-line)}
.s-cam__sheet h6{font-size:11px;font-weight:800;color:var(--scr-t1);margin-bottom:8px}
.s-detect{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--scr-line)}
.s-detect:last-child{border:0}
.s-detect__name{font-size:10.5px;font-weight:700;color:var(--scr-t1)}
.s-detect__sub{font-size:8.5px;color:var(--scr-t2)}
.s-detect__cal{margin-left:auto;font-size:10px;font-weight:800;color:var(--brand)}
.s-cam__shutter{width:52px;height:52px;border-radius:50%;border:4px solid #fff;
  background:rgba(255,255,255,.2);margin:14px auto 0}

/* strategy week distribution */
.s-dist{display:flex;align-items:flex-end;justify-content:space-between;gap:5px;height:150px;margin:10px 0}
.s-distcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.s-distbar{width:100%;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.s-distbar span{display:block;width:100%}
.s-distcol small{font-size:8px;color:var(--scr-t2);font-weight:700}
.s-pill-row{display:flex;gap:6px;flex-wrap:wrap}
.s-chip{font-size:8.5px;font-weight:700;padding:5px 9px;border-radius:99px;background:var(--scr-s2);color:var(--scr-t2)}
.s-chip.on{background:var(--brand);color:#fff}

/* check-in */
.s-check__hero{background:linear-gradient(150deg,rgba(16,185,129,.18),transparent);
  border:1px solid var(--scr-line);border-radius:16px;padding:14px;text-align:center;margin-bottom:10px}
.s-check__hero .badge{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--brand)}
.s-check__hero h6{font-family:var(--display);font-size:20px;font-weight:900;color:var(--scr-t1);margin:4px 0}
.s-delta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px}
.s-delta b{font-family:var(--display);font-size:18px;font-weight:900}
.s-delta .old{color:var(--scr-t3);text-decoration:line-through;font-size:13px}
.s-delta .arr{color:var(--scr-t2)}
.s-delta .new{color:var(--brand)}
.s-cta-row{display:flex;gap:8px;margin-top:4px}
.s-cta{flex:1;text-align:center;font-size:10px;font-weight:800;padding:10px;border-radius:12px}
.s-cta.primary{background:var(--brand);color:#fff}
.s-cta.ghost{background:var(--scr-s2);color:var(--scr-t1)}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-wrap{padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:40px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee+.marquee{margin-top:16px}
.marquee__track{display:flex;align-items:center;gap:28px;width:max-content;
  animation:scrollx 32s linear infinite;font-family:var(--display);font-weight:700;
  font-size:22px;color:var(--t2);white-space:nowrap;will-change:transform}
.marquee__track .dot{color:var(--brand)}
/* second row rolls the other way, at a slightly different pace */
.marquee__track--rev{animation-duration:26s;animation-direction:reverse;color:var(--t3)}
.marquee__track--rev .dot{color:var(--cal)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{padding:100px 0;position:relative}
.section__head{max-width:760px;margin:0 auto 56px;text-align:center}
.kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--brand);margin-bottom:16px;padding:5px 12px;border-radius:99px;
  background:color-mix(in srgb,var(--brand) 12%,transparent)}
.kicker--calories{color:var(--cal);background:color-mix(in srgb,var(--cal) 12%,transparent)}
.kicker--carbs{color:var(--carb);background:color-mix(in srgb,var(--carb) 12%,transparent)}
.kicker--expenditure{color:var(--expend);background:color-mix(in srgb,var(--expend) 14%,transparent)}
.kicker--weight{color:var(--weight);background:color-mix(in srgb,var(--weight) 14%,transparent)}
.kicker--brand{color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,transparent)}
.kicker--positive{color:var(--positive);background:color-mix(in srgb,var(--positive) 12%,transparent)}
.section__title{font-family:var(--display);font-weight:900;letter-spacing:-1px;
  font-size:clamp(30px,4.2vw,50px);line-height:1.05;margin-bottom:18px}
.section__lead{font-size:clamp(15px,1.6vw,18px);color:var(--t2);max-width:620px;margin:0 auto}
.section__lead b{color:var(--t1)}

/* ---------- Feature grid ---------- */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);
  padding:26px;position:relative;overflow:hidden;transition:.4s var(--ease)}
.fcard--wide{grid-column:span 2}
.fcard::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--ac,var(--brand)) 12%,transparent),transparent 60%)}
.fcard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ac,var(--brand)) 50%,var(--line))}
.fcard:hover::before{opacity:1}
.fcard[data-accent="brand"]{--ac:var(--brand)}
.fcard[data-accent="calories"]{--ac:var(--cal)}
.fcard[data-accent="protein"]{--ac:var(--pro)}
.fcard[data-accent="fat"]{--ac:var(--fat)}
.fcard[data-accent="carbs"]{--ac:var(--carb)}
.fcard[data-accent="micros"]{--ac:var(--micros)}
.fcard[data-accent="weight"]{--ac:var(--weight)}
.fcard__icon{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  color:var(--ac,var(--brand));background:color-mix(in srgb,var(--ac,var(--brand)) 14%,transparent);
  margin-bottom:18px;position:relative;z-index:1}
.fcard h3{font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px;position:relative;z-index:1}
.fcard p{color:var(--t2);font-size:15px;position:relative;z-index:1}
.fcard__list{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1}
.fcard__list li{font-size:13.5px;color:var(--t2);padding-left:22px;position:relative}
.fcard__list li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--ac,var(--brand));border-bottom:2px solid var(--ac,var(--brand));transform:rotate(-45deg)}

/* emphasis badge + extra prominence for the lead AI feature */
.fcard__tag{display:inline-flex;align-items:center;gap:7px;position:relative;z-index:1;
  font-size:12px;font-weight:800;letter-spacing:.2px;color:var(--ac,var(--brand));
  background:color-mix(in srgb,var(--ac,var(--brand)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ac,var(--brand)) 28%,transparent);
  padding:6px 12px;border-radius:var(--r-pill);margin-bottom:14px}
.fcard--hero{
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 9%,var(--s1)),var(--s1) 60%);
  border-color:color-mix(in srgb,var(--brand) 30%,var(--line))}
.fcard--hero h3{font-size:23px}

/* ---------- Showcase (alternating) ---------- */
.section--showcase{padding-top:40px}
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:120px}
.showcase:last-child{margin-bottom:0}
.showcase--rev .showcase__copy{order:2}
.showcase__copy h2{font-family:var(--display);font-size:clamp(26px,3.2vw,40px);font-weight:900;
  letter-spacing:-.8px;line-height:1.08;margin-bottom:16px}
.showcase__copy h2 em{font-style:normal;color:var(--brand)}
.showcase__copy>p{color:var(--t2);font-size:16px;margin-bottom:20px}
.showcase__stage{display:flex;justify-content:center}
.kicker--calories,.kicker--brand,.kicker--carbs{margin-bottom:14px}

.checklist{list-style:none;display:flex;flex-direction:column;gap:12px}
.checklist li{display:flex;align-items:flex-start;gap:11px;color:var(--t1);font-size:15px}
.checklist li b{font-weight:700}
.checklist li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:color-mix(in srgb,var(--brand) 16%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center}

/* ---------- Precision ---------- */
.section--precision{background:
  radial-gradient(900px circle at 80% 0%,color-mix(in srgb,var(--expend) 8%,transparent),transparent 60%)}
.precision-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:34px}
.precision-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);
  padding:22px;transition:.4s var(--ease)}
.precision-card:hover{transform:translateY(-4px)}
.pc__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.pc__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t2)}
.pc__value{font-family:var(--display);font-size:30px;font-weight:900;letter-spacing:-1px;margin-top:3px}
.pc__value small{font-size:13px;font-weight:600;color:var(--t2)}
.pc__chip{font-size:11px;font-weight:800;padding:5px 10px;border-radius:99px}
.pc__chip--up{color:var(--expend);background:color-mix(in srgb,var(--expend) 16%,transparent)}
.pc__chip--down{color:var(--weight);background:color-mix(in srgb,var(--weight) 16%,transparent)}
.chart{width:100%;height:120px;margin:6px 0 10px;overflow:visible}
.pc__note{font-size:13px;color:var(--t2)}
.precision-card--stat{display:flex;flex-direction:column}
.pc__big{font-family:var(--display);font-size:64px;font-weight:900;letter-spacing:-2px;
  background:linear-gradient(120deg,var(--expend),var(--fat));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.pc__big-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--t2);margin-bottom:14px}
.pc__formula{margin-top:auto;background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:12px;font-size:12.5px;font-weight:600;color:var(--t2);line-height:1.7}
.hl-cal{color:var(--cal);font-weight:800}
.hl-weight{color:var(--weight);font-weight:800}

.precision-points{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ppoint{padding:24px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--s1)}
.ppoint__num{font-family:var(--display);font-size:20px;font-weight:900;color:var(--brand);display:block;margin-bottom:8px}
.ppoint h4{font-size:17px;font-weight:800;margin-bottom:6px}
.ppoint p{font-size:14px;color:var(--t2)}

/* ---------- Algorithm pipeline ---------- */
.pipeline{display:flex;align-items:stretch;gap:10px;margin-bottom:30px;flex-wrap:wrap;justify-content:center}
.pipe-step{flex:1;min-width:210px;background:var(--s1);border:1px solid var(--line);
  border-radius:var(--r-card);padding:22px;transition:.4s var(--ease);position:relative;overflow:hidden}
.pipe-step:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.pipe-step__n{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;font-size:15px;margin-bottom:14px}
.pipe-step h4{font-size:16px;font-weight:800;margin-bottom:7px}
.pipe-step p{font-size:13.5px;color:var(--t2);margin-bottom:14px}
.pipe-step code{display:block;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:11.5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:9px 11px;color:var(--brand);font-weight:600}
.pipe-arrow{display:flex;align-items:center;color:var(--t3);font-size:24px;font-weight:300}

.algo-loop{display:flex;gap:20px;align-items:center;background:
  linear-gradient(120deg,color-mix(in srgb,var(--brand) 10%,var(--s1)),var(--s1));
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));
  border-radius:var(--r-card);padding:28px 30px;margin-bottom:24px}
.algo-loop__icon{width:60px;height:60px;flex:none;border-radius:16px;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 14%,transparent);display:flex;align-items:center;justify-content:center;
  animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.algo-loop h3{font-size:22px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.algo-loop p{color:var(--t2);font-size:15px}
.algo-loop b{color:var(--t1)}

.macro-readout{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.macro-readout__head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;
  font-size:14px;color:var(--t2);font-weight:600}
.macro-readout__cal{font-family:var(--display);font-size:24px;font-weight:900;color:var(--t1)}
.macro-readout__bar{display:flex;gap:5px;height:64px}
.seg{position:relative;flex-basis:var(--w);border-radius:12px;padding:10px 12px;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;min-width:0;
  transform-origin:left;animation:none}
.seg b{font-size:13px;font-weight:800}
.seg i{font-style:normal;font-size:17px;font-weight:900;font-family:var(--display)}
.seg--protein{background:linear-gradient(135deg,var(--pro),#ff8a7e)}
.seg--fat{background:linear-gradient(135deg,var(--fat),#ffd779);color:#3a2e00}
.seg--carbs{background:linear-gradient(135deg,var(--carb),#5fd998)}
.macro-readout__bar{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease) .15s}
.macro-readout.in .macro-readout__bar{clip-path:inset(0 0 0 0)}

/* ---------- Check-in ---------- */
.section--checkin{background:radial-gradient(800px circle at 10% 50%,color-mix(in srgb,var(--positive) 8%,transparent),transparent 55%)}
.checkin{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.checkin__stage{display:flex;justify-content:center}
.checkin__copy h2{font-family:var(--display);font-size:clamp(26px,3.4vw,42px);font-weight:900;letter-spacing:-.8px;margin-bottom:16px}
.checkin__copy>p{color:var(--t2);font-size:16px;margin-bottom:20px}

/* ---------- Food DB ---------- */
.db-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
.db-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:24px;transition:.4s var(--ease)}
.db-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--carb) 40%,var(--line))}
.db-card__tag{display:inline-block;font-family:var(--display);font-size:18px;font-weight:800;margin-bottom:10px;color:var(--t1)}
.db-card p{color:var(--t2);font-size:14.5px}
.db-note{display:flex;align-items:center;gap:12px;justify-content:center;text-align:left;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-btn);padding:16px 20px;
  color:var(--t2);font-size:14.5px;max-width:760px;margin:0 auto}
.db-note svg{color:var(--carb);flex:none}
.db-note b{color:var(--t1)}

/* ---------- Themes & languages ---------- */
.themes-row{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.theme-demo{display:flex;flex-direction:column;align-items:center;gap:14px}
.theme-demo__label{font-size:14px;font-weight:700;color:var(--t2)}
.lang-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.lang-chip{background:var(--s1);border:1px solid var(--line);border-radius:99px;padding:12px 26px;
  font-family:inherit;font-size:16px;font-weight:700;color:var(--t1);cursor:pointer;transition:.3s var(--ease)}
.lang-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.lang-chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff;
  box-shadow:0 12px 28px -12px rgba(16,185,129,.6)}
.lang-chip.is-active:hover{color:#fff;transform:translateY(-2px)}

/* ---------- Language screenshot gallery ---------- */
.lang-showcase{display:flex;flex-direction:column;align-items:center;gap:28px}
.lang-gallery{display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap}
.lang-gallery--rtl{flex-direction:row-reverse}
.lang-phone{margin:0;width:198px;aspect-ratio:921/2048;box-sizing:border-box;
  border:6px solid #fff;border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:0 40px 72px -34px rgba(17,24,39,.42),0 8px 22px -10px rgba(17,24,39,.2);
  transition:transform .5s var(--ease)}
:root[data-theme="dark"] .lang-phone,:root[data-theme="mix"] .lang-phone{border-color:#0b0e13;
  box-shadow:0 40px 72px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05)}
.lang-phone img{width:100%;height:100%;object-fit:cover;display:block;border-radius:28px}
.lang-shot--in{animation:langFade .45s var(--ease)}
@keyframes langFade{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lang-switch{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.price-card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);
  padding:28px 22px;display:flex;flex-direction:column;position:relative;transition:.4s var(--ease)}
.price-card:hover{transform:translateY(-6px)}
.price-card--featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 30px 60px -30px rgba(16,185,129,.5);transform:scale(1.04)}
.price-card--featured:hover{transform:scale(1.04) translateY(-6px)}
.price-card__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:11px;font-weight:800;padding:5px 14px;border-radius:99px;white-space:nowrap}
.price-card__badge--alt{background:var(--t1);color:var(--bg)}
.price-card__name{font-size:15px;font-weight:700;color:var(--t2);margin-bottom:10px}
.price-card__amt{font-family:var(--display);font-size:38px;font-weight:900;letter-spacing:-1.5px}
.price-card__amt span{font-size:15px;font-weight:600;color:var(--t2);letter-spacing:0}
.price-card__sub{font-size:13px;color:var(--t2);margin:6px 0 22px;min-height:34px}
.price-card .btn{margin-top:auto}

/* ---------- Pricing value / savings banner ---------- */
.value-banner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px 38px;margin-bottom:36px;position:relative;overflow:hidden;
}
.value-banner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 58%),
    radial-gradient(120% 150% at 100% 100%,color-mix(in srgb,var(--cal) 10%,transparent),transparent 56%);
}
.value-banner > *{position:relative;z-index:1}
.value-banner__badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;
  background:color-mix(in srgb,var(--brand) 14%,transparent);padding:6px 13px;border-radius:var(--r-pill)}
.value-banner__headline{display:flex;align-items:baseline;gap:12px}
.value-banner__pct{font-family:var(--display);font-size:clamp(44px,6vw,58px);font-weight:900;
  letter-spacing:-2px;line-height:1;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.value-banner__pct-label{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--t1)}
.value-banner__copy{margin-top:12px;font-size:15px;color:var(--t2);max-width:44ch}

.value-banner__compare{display:flex;flex-direction:column;gap:20px}
.vbar{display:flex;flex-direction:column;gap:9px}
.vbar__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.vbar__label{font-size:13.5px;font-weight:700;color:var(--t2)}
.vbar__label span{font-weight:500;color:var(--t3)}
.vbar--ours .vbar__label{color:var(--t1)}
.vbar__price{font-family:var(--display);font-weight:800;font-size:17px;color:var(--t1);white-space:nowrap}
.vbar__price small{font-size:11px;font-weight:600;color:var(--t2);margin-left:1px}
.vbar--ours .vbar__price{color:var(--brand)}
.vbar__track{height:15px;border-radius:var(--r-pill);background:var(--s2);overflow:hidden}
.vbar__fill{height:100%;width:var(--w);border-radius:var(--r-pill)}
.vbar__fill--rival{background:var(--t3)}
.vbar__fill--ours{background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 0 18px -2px color-mix(in srgb,var(--brand) 60%,transparent)}
.value-banner.in .vbar__fill{animation:vbarGrow 1.1s var(--ease) both}
.value-banner.in .vbar--ours .vbar__fill{animation-delay:.18s}
@keyframes vbarGrow{from{width:0}to{width:var(--w)}}

@media (max-width:760px){
  .value-banner{grid-template-columns:1fr;gap:26px;padding:28px 26px}
}
@media (prefers-reduced-motion:reduce){
  .value-banner.in .vbar__fill{animation:none}
}

/* ---------- Subscribe page ---------- */
.subscribe-hero{padding-top:150px}
.subs-callout{display:flex;align-items:center;gap:14px;max-width:620px;margin:0 auto 26px;
  padding:16px 22px;border-radius:var(--r-card);text-align:left;color:var(--t1);font-size:15px;
  background:color-mix(in srgb,var(--brand) 10%,var(--s1));
  border:1px solid color-mix(in srgb,var(--brand) 32%,var(--line))}
.subs-callout svg{color:var(--brand);flex:none}
.subs-callout b{font-weight:800}
.subs-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.subs-back{display:flex;justify-content:center;color:var(--t2);font-size:14px;font-weight:600;transition:color .2s}
.subs-back:hover{color:var(--brand)}
.price-card__note{margin-top:auto;text-align:center;font-size:13px;font-weight:800;letter-spacing:.2px;
  color:var(--t2);background:var(--s2);border:1px solid var(--line);border-radius:var(--r-btn);padding:13px}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-btn);
  padding:0 20px;transition:.3s var(--ease)}
.faq details[open]{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.faq summary{list-style:none;cursor:pointer;padding:20px 0;font-size:16px;font-weight:700;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq__plus{position:relative;width:18px;height:18px;flex:none}
.faq__plus::before,.faq__plus::after{content:"";position:absolute;background:var(--brand);border-radius:2px;transition:.3s var(--ease)}
.faq__plus::before{top:8px;left:0;width:18px;height:2px}
.faq__plus::after{left:8px;top:0;width:2px;height:18px}
.faq details[open] .faq__plus::after{transform:rotate(90deg);opacity:0}
.faq p{color:var(--t2);font-size:15px;padding:0 0 20px;max-width:90%}

/* ---------- Final CTA ---------- */
.cta__card{max-width:760px;margin:0 auto;text-align:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 14%,var(--s1)),var(--s1));
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line));
  border-radius:32px;padding:56px 40px;box-shadow:var(--card-shadow)}
.cta__tile{width:72px;height:72px;border-radius:20px;overflow:hidden;display:inline-block;background:#000;
  box-shadow:0 0 0 1px var(--tile-ring),0 16px 30px -12px rgba(0,0,0,.6);margin-bottom:22px}
.cta__card h2{font-family:var(--display);font-size:clamp(30px,4vw,48px);font-weight:900;letter-spacing:-1px;line-height:1.05;margin-bottom:14px}
.cta__card p{color:var(--t2);font-size:17px;margin-bottom:28px}
.cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px 0 30px;margin-top:40px}
.footer__inner{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
.footer__brand{display:flex;align-items:center;gap:14px}
.footer__tag{font-size:13px;color:var(--t2);margin-top:2px}
.footer__cols{display:flex;gap:60px;flex-wrap:wrap}
.footer__cols h5{font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:14px}
.footer__cols a{display:block;color:var(--t2);font-size:14px;margin-bottom:9px;transition:color .2s}
.footer__cols a:hover{color:var(--brand)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--t3)}

/* ============================================================
   REFERENCE LIGHT HERO  (phone cluster of real screenshots
   over an animated pastel-gradient field)
   ============================================================ */
.btn--dark{background:var(--t1);color:var(--bg);box-shadow:0 10px 24px -12px rgba(17,24,39,.4)}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(17,24,39,.55)}

.kicker-text{display:inline-block;font-size:12px;font-weight:700;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--t3);margin-bottom:22px}

/* override base hero for the cluster layout */
.hero{padding:150px 0 70px;overflow:visible}
.hero__grid{grid-template-columns:.92fr 1.08fr;gap:24px;align-items:center}
.hero__title{font-family:var(--display);font-weight:900;letter-spacing:-2.5px;
  font-size:clamp(46px,6.6vw,84px);line-height:1.0;color:var(--t1);margin-bottom:24px}
.hero__tagline{font-size:clamp(16px,1.6vw,19px);max-width:440px;margin-bottom:34px}
.hero__stats{gap:34px}
.hero__stage{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center}

/* animated aura */
.hero__aura{position:absolute;inset:-30px;z-index:0;pointer-events:none}
.aura{position:absolute;border-radius:50%;filter:blur(64px);opacity:.5;will-change:transform}
:root[data-theme="dark"] .aura,:root[data-theme="mix"] .aura{opacity:.42;filter:blur(72px)}
.aura--violet{width:320px;height:320px;background:#A78BFA;top:4%;left:6%;animation:auraA 19s var(--ease) infinite alternate}
.aura--yellow{width:300px;height:300px;background:#F5C242;top:-2%;right:16%;animation:auraB 23s var(--ease) infinite alternate}
.aura--green{width:360px;height:360px;background:#34D399;bottom:2%;right:4%;animation:auraC 21s var(--ease) infinite alternate}
.aura--pink{width:280px;height:280px;background:#FB7185;bottom:6%;left:20%;animation:auraD 25s var(--ease) infinite alternate}
@keyframes auraA{to{transform:translate(46px,34px) scale(1.18)}}
@keyframes auraB{to{transform:translate(-40px,40px) scale(1.12)}}
@keyframes auraC{to{transform:translate(-34px,-30px) scale(1.2)}}
@keyframes auraD{to{transform:translate(38px,-26px) scale(1.14)}}

/* phone cluster */
.phone-cluster{position:relative;width:100%;height:600px;z-index:2;transition:transform .3s var(--ease)}
.pshot{position:absolute;margin:0;width:var(--w);aspect-ratio:921/2048;
  border:6px solid #fff;border-radius:42px;box-sizing:border-box;background:#fff;overflow:hidden;
  rotate:var(--rot,0deg);
  box-shadow:0 44px 80px -34px rgba(17,24,39,.42),0 10px 26px -10px rgba(17,24,39,.22);
  animation:floatShot var(--fdur,9s) var(--ease) var(--fdel,0s) infinite}
:root[data-theme="dark"] .pshot,:root[data-theme="mix"] .pshot{border-color:#0b0e13;
  box-shadow:0 44px 80px -34px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05)}
.pshot img{width:100%;height:100%;object-fit:cover;display:block;border-radius:36px}
@keyframes floatShot{0%,100%{translate:0 0}50%{translate:0 -16px}}

.pshot--back{--w:264px;left:13%;top:6px;--rot:-4deg;z-index:2;--fdur:9s;--fdel:0s}
.pshot--right{--w:218px;right:1%;top:54px;--rot:5deg;z-index:1;--fdur:10.5s;--fdel:.7s}
.pshot--front{--w:204px;left:31%;top:214px;--rot:-1deg;z-index:3;--fdur:8.4s;--fdel:1.2s}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-phone{opacity:0;transform:translateY(50px) rotateX(8deg) scale(.96);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-phone.in{opacity:1;transform:none}
/* opacity-only reveal — for elements whose transform is used for layout/parallax */
.reveal-fade{opacity:0;transition:opacity 1.1s var(--ease)}
.reveal-fade.in{opacity:1}

/* chart draw-in */
.flux-line,.trend-line,.scale-line{stroke-dasharray:1000;stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s var(--ease)}
.flux-band{opacity:0;transition:opacity 1.4s var(--ease) .3s}
.in .flux-line,.in .trend-line,.in .scale-line{stroke-dashoffset:0}
.in .flux-band{opacity:1}
/*
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.001s!important}
  .reveal,.reveal-phone{opacity:1;transform:none}
  .reveal-fade{opacity:1}
}*/

/* ============================================================
   "ONLY IN MACROBODY" LIVE DEMOS
   Clickable widgets mirroring the real app screens (Lazy Add
   feel meter, Complete my day, recipe re-weighting).
   NOTE: every word here is static markup so i18n.js can translate
   it; script.js only toggles classes and rewrites numbers. Never
   let JS write words into an element i18n selects — on a language
   switch i18n restores its cached innerHTML and would wipe them.
   ============================================================ */
.section--only .showcase{margin-bottom:96px}
.section--only .showcase:last-child{margin-bottom:0}

.dpills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.dpill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  padding:7px 13px;border-radius:var(--r-pill);color:var(--ac,var(--brand));
  background:color-mix(in srgb,var(--ac,var(--brand)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--ac,var(--brand)) 22%,transparent)}
.dpill__ico{font-size:12px;line-height:1}
.dpill--brand{--ac:var(--brand)}
.dpill--weight{--ac:var(--weight)}
.dpill--calories{--ac:var(--cal)}

.demo{
  width:100%;max-width:430px;position:relative;isolation:isolate;
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);
  padding:20px;box-shadow:var(--card-shadow);
  transition:transform .5s var(--ease),border-color .3s
}
.demo::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:.5;
  background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--ac,var(--brand)) 14%,transparent),transparent 70%)}
.demo--lazy{--ac:var(--weight)}
.demo--complete{--ac:var(--brand)}
.demo--recipe{--ac:var(--cal)}
.demo:hover{border-color:color-mix(in srgb,var(--ac,var(--brand)) 45%,var(--line))}

.demo__bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.demo__head-label{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:-.2px}
.demo__q{font-size:15px;font-weight:700;line-height:1.4;margin-bottom:12px}
.demo__hint{font-size:12.5px;color:var(--t2);margin-bottom:12px}
.demo__sub{margin:14px 0 8px}
.demo__sub-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--t2)}

/* segmented control */
.seg-ctl{display:inline-flex;background:var(--s2);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg-ctl button{border:0;background:transparent;color:var(--t2);font:inherit;font-size:12.5px;
  font-weight:700;padding:7px 15px;border-radius:var(--r-pill);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease)}
.seg-ctl button:hover{color:var(--t1)}
.seg-ctl button.is-active{background:var(--elev);color:var(--t1);box-shadow:0 2px 10px -3px rgba(0,0,0,.35)}
.seg-ctl--sm button{font-size:11.5px;padding:6px 11px}
.demo__base{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.demo__base-label{font-size:11.5px;font-weight:700;color:var(--t2)}

/* feel meter */
.feel{display:flex;align-items:flex-end;gap:8px;height:108px;margin:16px 0 14px}
.feel__step{flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;padding:0;cursor:pointer}
.feel__bar{width:100%;height:var(--h);border-radius:10px;background:var(--s2);
  transition:height .5s var(--ease),background .35s var(--ease),transform .35s var(--ease)}
.feel__step:hover .feel__bar{background:color-mix(in srgb,var(--weight) 40%,var(--s2));transform:translateY(-2px)}
.feel__step.is-active .feel__bar{background:linear-gradient(180deg,var(--weight),color-mix(in srgb,var(--weight) 60%,#000));
  box-shadow:0 8px 18px -8px var(--weight)}
.feel__lab{font-size:11px;font-weight:700;color:var(--t3);white-space:nowrap;transition:color .3s}
.feel__step.is-active .feel__lab{color:var(--weight)}

/* estimate card */
.demo__est{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px}
.est__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.est__mood{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.est__mood span{display:none}
.est__mood span.est__emoji,.est__mood span.is-on{display:inline}
.est__chip{font-size:10.5px;font-weight:800;color:var(--t2);background:var(--s2);
  padding:4px 10px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.5px}
.est__cal{font-family:var(--display);font-size:42px;font-weight:900;letter-spacing:-1.8px;line-height:1.15}
.est__cal small{font-size:14px;font-weight:700;color:var(--t2);margin-left:6px;letter-spacing:0}
.est__macros{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.mchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--t1);
  background:var(--s2);padding:5px 11px;border-radius:var(--r-pill)}
.mchip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);flex:none}
.mchip__lab{color:var(--t2);font-weight:600}
.est__note{font-size:11.5px;line-height:1.5;color:var(--t3);margin-top:11px}

/* demo CTA + success overlay */
.demo__cta{width:100%;justify-content:center;margin-top:14px;cursor:pointer;border:0;font:inherit;
  font-weight:800;font-size:15px}
.demo__cta b{font-weight:900;font-variant-numeric:tabular-nums}
.demo__done{position:absolute;inset:0;z-index:2;border-radius:inherit;padding:24px;
  background:color-mix(in srgb,var(--s1) 94%,transparent);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.demo.is-done .demo__done{opacity:1;visibility:visible;transform:none}
.demo__check{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;color:var(--brand);margin-bottom:16px;
  background:color-mix(in srgb,var(--brand) 15%,transparent)}
.demo.is-done .demo__check{animation:popIn .5s var(--ease) both}
.demo__done-title{font-family:var(--display);font-size:24px;font-weight:900;letter-spacing:-.6px;line-height:1.25}
.demo__done-big{color:var(--brand)}
.demo__done-sub{font-size:13px;color:var(--t2);margin-top:6px}
.demo__reset{margin-top:18px;font-size:13.5px}
.demo__reset--plain{margin-top:14px}
@keyframes popIn{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* confetti burst on success */
.demo__spark{position:absolute;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:3;
  animation:spark .9s var(--ease) forwards}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

/* complete: ring + legend */
.ring-row{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%;overflow:visible}
.ring circle{transition:stroke-dasharray .7s var(--ease),stroke-dashoffset .7s var(--ease)}
.ring__mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring__mid b{font-family:var(--display);font-size:27px;font-weight:900;letter-spacing:-1px;line-height:1;
  font-variant-numeric:tabular-nums}
.ring__lab{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.ring-legend{list-style:none;display:flex;flex-direction:column;gap:11px;flex:1}
.ring-legend li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:800;
  font-variant-numeric:tabular-nums}
.ring-legend i{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}
.rl__lab{flex:1;color:var(--t2);font-weight:600}

/* complete: suggestion rows */
.sugs,.ings,.done-rows{list-style:none}
.sug{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--hairline-soft)}
.sug:last-child{border-bottom:0}
.sug__tile{width:34px;height:34px;border-radius:11px;background:var(--s2);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:17px}
.sug__txt{display:flex;flex-direction:column;flex:1;min-width:0}
.sug__name{font-size:13px;font-weight:700}
.sug__sub{font-size:11px;color:var(--t2);font-variant-numeric:tabular-nums;margin-top:1px}
.sug__cal{font-size:12.5px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
.demo.is-adding .sug{animation:sugFly .5s var(--ease) both}
.demo.is-adding .sug:nth-child(2){animation-delay:.08s}
.demo.is-adding .sug:nth-child(3){animation-delay:.16s}
@keyframes sugFly{60%{transform:translateX(6px);opacity:.6}100%{transform:translateX(-14px);opacity:0}}

.done-rows{width:100%;max-width:280px;margin-top:16px;display:flex;flex-direction:column;gap:9px}
.done-rows li{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;
  font-variant-numeric:tabular-nums}
.done-rows i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.dr__lab{flex:1;text-align:left;color:var(--t2);font-weight:600}

/* recipe: scaler + ingredient rows */
.scale-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:9px 9px 9px 14px}
.scale-row__lab{font-size:13px;font-weight:700}
.stepper{display:inline-flex;align-items:center;gap:4px;background:var(--s2);border-radius:var(--r-pill);padding:3px}
.stepper button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:var(--t1);font-size:16px;font-weight:800;line-height:1;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.stepper button:hover{background:var(--elev);transform:scale(1.08)}
.stepper__val{min-width:38px;text-align:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.ings{margin:6px 0 4px}
.ing{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--hairline-soft)}
.ing:last-child{border-bottom:0}
.ing__emoji{font-size:18px;flex:none}
.ing__txt{flex:1;min-width:0}
.ing__name{font-size:13px;font-weight:700}
.ing__macros{font-size:10.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums;
  display:flex;gap:6px}
.ing__amt{display:inline-flex;align-items:baseline;gap:2px;background:var(--s2);border-radius:10px;
  padding:5px 8px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;min-width:56px;
  justify-content:center;transition:background .3s}
.ing.is-bumped .ing__amt{background:color-mix(in srgb,var(--cal) 28%,var(--s2))}
.ing__amt small{font-size:9.5px;color:var(--t2);font-weight:700}
.ing .stepper{background:transparent;padding:0;gap:0}
.ing .stepper button{width:24px;height:24px;font-size:14px;background:var(--s2)}
.tot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-top:8px}
.tot__cal{font-family:var(--display);font-size:30px;font-weight:900;letter-spacing:-1.2px;line-height:1;
  font-variant-numeric:tabular-nums}
.tot__cal small{font-size:12px;font-weight:700;color:var(--t2);margin-left:5px;letter-spacing:0}
.tot__macros{display:flex;gap:6px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .feel__bar,.ring circle,.demo__done{transition:none}
  .demo.is-adding .sug,.demo.is-done .demo__check,.demo__spark{animation:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .nav__links{display:none}
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__copy{order:2}
  .hero__stage{order:1;margin-bottom:20px;min-height:540px}
  .eyebrow,.hero__cta,.hero__stats{justify-content:center}
  .hero__tagline{margin-left:auto;margin-right:auto}
  .phone-cluster{height:540px;max-width:520px;margin:0 auto}
  .feature-grid{grid-template-columns:1fr 1fr}
  .fcard--wide{grid-column:span 2}
  .showcase,.showcase--rev{grid-template-columns:1fr;gap:36px;text-align:center}
  .showcase--rev .showcase__copy{order:0}
  .showcase__copy .checklist{display:inline-flex;text-align:left}
  .checklist{align-items:flex-start}
  .precision-grid{grid-template-columns:1fr}
  .precision-points{grid-template-columns:1fr}
  .pipeline{flex-direction:column}
  .pipe-arrow{transform:rotate(90deg);justify-content:center}
  .checkin{grid-template-columns:1fr;text-align:center}
  .checkin__copy .checklist{text-align:left}
  .db-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr 1fr}
  .price-card--featured{transform:none}
  .price-card--featured:hover{transform:translateY(-6px)}
}
@media (max-width:560px){
  .container{padding:0 18px}
  .section{padding:70px 0}
  .feature-grid{grid-template-columns:1fr}
  .fcard--wide{grid-column:span 1}
  .pricing-grid{grid-template-columns:1fr}
  .hero{padding-top:108px}
  .hero__stats{gap:20px}
  .footer__inner{flex-direction:column}
  /* compact nav so the Download button never clips */
  .nav__inner{gap:10px}
  .theme-toggle{display:none}
  .brand__word{font-size:17px}
  .brand__tile{width:34px;height:34px}
  .btn--sm{padding:9px 14px;font-size:13px}
  /* scale the screenshot cluster to fit small screens */
  .hero__stage{min-height:0}
  .phone-cluster{transform:scale(.6);transform-origin:top center;height:400px;margin:0 auto}
  .pshot--right{right:0}
  .pshot--front{left:26%;top:206px}
}

/* ============================================================
   LIVING BACKGROUND — animated aurora mesh + cursor spotlight
   The page background drifts, slowly cycles hue, and the whole
   mesh shifts toward the pointer (offsets fed in via --gx/--gy).
   ============================================================ */
.aurora{
  position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 46% at calc(22% + var(--gx)) calc(26% + var(--gy)),  color-mix(in srgb,var(--brand)  55%,transparent), transparent 62%),
    radial-gradient(34% 42% at calc(82% + var(--gxn)) calc(18% + var(--gy)), color-mix(in srgb,var(--cal)    50%,transparent), transparent 60%),
    radial-gradient(42% 48% at calc(78% + var(--gx)) calc(82% + var(--gyn)), color-mix(in srgb,var(--weight) 50%,transparent), transparent 62%),
    radial-gradient(36% 44% at calc(16% + var(--gxn)) calc(80% + var(--gyn)),color-mix(in srgb,var(--pro)    45%,transparent), transparent 60%);
  filter:blur(60px) saturate(125%);opacity:.55;
  animation:auroraHue 30s linear infinite, auroraBreathe 20s var(--ease) infinite alternate;
  will-change:filter,transform;
}
:root[data-theme="light"] .aurora{opacity:.30}
@keyframes auroraHue{to{filter:blur(60px) saturate(125%) hue-rotate(360deg)}}
@keyframes auroraBreathe{0%{transform:scale(1)}100%{transform:scale(1.14)}}

.cursor-glow{
  position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  z-index:-1;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0);
  background:radial-gradient(circle, color-mix(in srgb,var(--brand) 24%,transparent), transparent 60%);
  transition:opacity .45s var(--ease);will-change:transform,opacity;
}
:root[data-theme="dark"] .cursor-glow,:root[data-theme="mix"] .cursor-glow{mix-blend-mode:screen}
body.cursor-on .cursor-glow{opacity:.9}

/* ============================================================
   MICRO-ANIMATIONS — life on everything that can move
   ============================================================ */

/* spinning multicolour theme dot */
.theme-toggle__dot{animation:spin 7s linear infinite}

/* brand tile reacts on hover */
.brand__tile{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.brand:hover .brand__tile{transform:rotate(-8deg) scale(1.08);box-shadow:0 0 0 1px var(--tile-ring),0 12px 26px -8px rgba(16,185,129,.6)}

/* feature icons gently float, staggered */
.fcard__icon{animation:iconFloat 6s var(--ease) infinite}
.fcard:nth-child(2n) .fcard__icon{animation-delay:-1.6s}
.fcard:nth-child(3n) .fcard__icon{animation-delay:-3.1s}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-2deg)}}

/* shine sweep across primary buttons + store badges on hover */
.btn--primary,.btn--dark,.store-badge{position:relative;overflow:hidden}
.btn--primary::before,.btn--dark::before,.store-badge::before{
  content:"";position:absolute;top:0;bottom:0;width:55%;left:-90%;pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg)}
.btn--primary:hover::before,.btn--dark:hover::before,.store-badge:hover::before{animation:sweep .8s var(--ease)}
@keyframes sweep{from{left:-90%}to{left:160%}}

/* ripple on press (span injected by script.js) */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);
  transform:scale(0);animation:rippleOut .6s var(--ease) forwards;pointer-events:none;z-index:2}
@keyframes rippleOut{to{transform:scale(1);opacity:0}}

/* pointer-tracking glow on extra card families */
.pipe-step,.db-card{position:relative;overflow:hidden}
.pipe-step::before,.db-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 12%,transparent),transparent 60%)}
.pipe-step:hover::before,.db-card:hover::before{opacity:1}
.pipe-step>*,.db-card__tag,.db-card p{position:relative;z-index:1}

/* soft accent lift-glow on hoverable cards */
.price-card:hover,.db-card:hover,.pipe-step:hover,.precision-card:hover{
  box-shadow:0 30px 60px -32px color-mix(in srgb,var(--brand) 45%,transparent)}

/* pause both marquee rows when the band is hovered */
.marquee-wrap:hover .marquee__track{animation-play-state:paused}

/* animated gradient halo behind the featured price card */
.price-card--featured::after{content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,var(--brand),var(--cal),var(--weight),var(--brand));
  background-size:300% 300%;animation:borderFlow 8s linear infinite;filter:blur(6px);opacity:.55}
@keyframes borderFlow{to{background-position:300% 0}}

/* animated gradient halo behind the final CTA card */
.cta__card{position:relative}
.cta__card::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;
  background:linear-gradient(120deg,
    color-mix(in srgb,var(--brand) 80%,transparent),
    color-mix(in srgb,var(--cal) 70%,transparent),
    color-mix(in srgb,var(--weight) 70%,transparent),
    color-mix(in srgb,var(--brand) 80%,transparent));
  background-size:300% 300%;animation:borderFlow 11s linear infinite;filter:blur(10px);opacity:.5}

/* in-phone bars sweep in */
.s-fill,.s-sm__bar i{transform-origin:left;animation:growX 1.1s var(--ease) both}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}