/* ============================================================
   macroBody — v3 · cinematic 3D homepage
   Layers (root stacking context, sections never create one):
     body bg → .sky (-1) → .under (0, giant words) → #gl canvas (1)
     → content (2) → hud/nav (50+)
   Scroll engine (v3.js) writes --p per scene and --q per [data-r]
   element; everything visual below is a pure function of those.
   ============================================================ */
:root{
  --brand:#10B981; --brand-2:#34D399; --brand-fill:#047857; --brand-fill-2:#065F46; --brand-text:#10B981;
  --cal:#3E8EF7; --pro:#FF6F61; --fat:#F5C242; --carb:#3FBF7F;
  --expend:#C86A3E; --weight:#A78BFA; --micros:#E8D200;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Inter','IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Inter Tight','Inter','IBM Plex Sans Arabic',system-ui,sans-serif;
  --navh:76px;
  --q:1; --dir:1;
  --sky1:rgba(255,170,120,.5); --sky2:rgba(16,185,129,.35);
}
:root[data-theme="dark"]{
  --bg:#07090D; --bg2:#0E1218; --t1:#F3F5F7; --t2:#9AA3AE; --t3:#7D8793; --line:rgba(255,255,255,.09);
  --glass:rgba(16,20,27,.62); --glass-line:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.06);
  --shadow:0 30px 80px -30px rgba(0,0,0,.85); --sky-op:.42; --under:rgba(255,255,255,.07);
}
:root[data-theme="mix"]{
  --bg:#141922; --bg2:#1C222D; --t1:#EEF1F4; --t2:#A2ABB6; --t3:#8A94A0; --line:rgba(255,255,255,.1);
  --glass:rgba(31,38,48,.6); --glass-line:rgba(255,255,255,.1); --glass-hi:rgba(255,255,255,.07);
  --shadow:0 30px 80px -30px rgba(0,0,0,.7); --sky-op:.45; --under:rgba(255,255,255,.08);
}
:root[data-theme="light"]{
  --bg:#F4F6F7; --bg2:#FFFFFF; --t1:#0E1420; --t2:#5E6672; --t3:#687079; --brand-text:#047857; --line:rgba(10,20,30,.09);
  --glass:rgba(255,255,255,.62); --glass-line:rgba(255,255,255,.9); --glass-hi:rgba(255,255,255,.8);
  --shadow:0 30px 70px -34px rgba(15,25,40,.35); --sky-op:.6; --under:rgba(14,20,32,.06);
}
:root[dir="rtl"]{--dir:-1}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:var(--navh)}
body{background:var(--bg);color:var(--t1);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background-color .6s var(--ease),color .6s var(--ease)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
::selection{background:var(--brand);color:#fff}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
.wrap--narrow{max-width:820px}
.center{text-align:center}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:8px}

/* ---------- atmosphere ---------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--sky-op);transition:opacity .6s}
.sky i{position:absolute;border-radius:50%}
.sky__a{width:80vmax;height:80vmax;left:-30vmax;top:-40vmax;background:radial-gradient(closest-side,var(--sky1),transparent)}
.sky__b{width:70vmax;height:70vmax;right:-28vmax;bottom:-36vmax;background:radial-gradient(closest-side,var(--sky2),transparent)}
.sky__c{width:60vmax;height:30vmax;left:50%;top:60%;translate:-50% 0;background:radial-gradient(closest-side,rgba(16,185,129,.18),transparent)}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s var(--ease)}
.gl #gl{opacity:1}
:root.gl-done #gl{opacity:0}

.curtain{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:22px;
  transition:opacity .9s var(--ease),visibility 0s .9s}
.curtain__tile{width:64px;height:64px;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line),0 20px 60px -10px rgba(16,185,129,.5);animation:breathe 1.6s ease-in-out infinite}
.curtain__bar{width:120px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.curtain__bar i{display:block;height:100%;width:40%;background:var(--brand);animation:load 1.1s var(--ease) infinite}
.ready .curtain,.static .curtain{opacity:0;visibility:hidden}
@keyframes breathe{50%{transform:scale(1.06)}}
@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* ---------- skip link (keyboard) ---------- */
.skip{position:fixed;top:-60px;left:16px;z-index:400;padding:10px 16px;border-radius:12px;background:var(--t1);color:var(--bg);font-weight:700;transition:top .2s}
.skip:focus{top:12px}

/* ---------- nav ---------- */
.nav{position:fixed;top:12px;left:0;right:0;z-index:60;padding:0 16px;pointer-events:none}
.nav__bar{pointer-events:auto;max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:18px;height:56px;padding:0 8px 0 12px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand__tile{width:30px;height:30px;border-radius:9px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line)}
.brand__word{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.brand__word b{font-weight:800;color:var(--brand-text)}
.nav__links{display:flex;gap:4px;margin:0 auto}
.nav__links a{font-size:14px;font-weight:500;color:var(--t2);padding:8px 12px;border-radius:999px;transition:.2s}
.nav__links a:hover{color:var(--t1);background:var(--glass-hi)}
.nav__actions{display:flex;align-items:center;gap:6px}
.iconbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--t2);transition:.2s}
.iconbtn:hover{color:var(--t1);background:var(--glass-hi)}
.iconbtn[aria-pressed="true"]{color:var(--brand)}
.iconbtn--3d{width:auto;padding:0 12px 0 10px;gap:6px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:700}
.iconbtn--3d[aria-pressed="true"]{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.12)}
/* "why is there no 3D?" notice */
.notice{position:fixed;top:82px;left:50%;z-index:58;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;
  width:max-content;max-width:calc(100% - 24px);font-size:14px;color:var(--t1);transform:translate(-50%,-12px);opacity:0;transition:.5s var(--ease)}
.notice[hidden]{display:none}
.notice.is-in{transform:translate(-50%,0);opacity:1}
.notice>svg{color:var(--brand);flex:none}
.notice__x{width:30px;height:30px;border-radius:50%;font-size:20px;line-height:1;color:var(--t2);flex:none}
.notice__x:hover{background:var(--glass-hi);color:var(--t1)}
@media (max-width:560px){.notice{border-radius:18px;font-size:13px;flex-wrap:wrap;justify-content:center;text-align:center;padding:10px 12px}}
.themedot{width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--t1) 0 50%,transparent 0);box-shadow:inset 0 0 0 2px var(--t1)}
.progress{position:fixed;left:0;right:0;top:0;height:2px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--cal));transform-origin:left;transform:scaleX(var(--gp,0))}
[dir="rtl"] .progress i{transform-origin:right}
@media (max-width:1060px){.nav__links{display:none}.nav__actions{margin-inline-start:auto}}
@media (max-width:560px){.nav .btn--brand{display:none}.brand__word{font-size:16px}.nav__bar{gap:8px}}

/* segmented control */
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--glass-hi);border:1px solid var(--line)}
.seg button{padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--t2);transition:.2s}
.seg button.is-on{background:var(--t1);color:var(--bg)}
.seg--lang button{padding:5px 9px;font-size:12px}
.seg--sm button{font-size:12px;padding:6px 12px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15px;
  transition:transform .25s var(--ease),box-shadow .25s,background .25s;white-space:nowrap}
.btn--sm{height:38px;padding:0 16px;font-size:14px}
.btn--full{width:100%}
.btn--brand{background:var(--brand-fill);color:#fff;box-shadow:0 12px 30px -12px rgba(16,185,129,.7)}
.btn--brand:hover{background:var(--brand-fill-2);transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(16,185,129,.8)}
.btn--ghost{border:1px solid var(--line);color:var(--t1);background:var(--glass-hi)}
.btn--ghost:hover{border-color:var(--t3)}
.store{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 16px;border-radius:16px;background:var(--t1);color:var(--bg);
  transition:transform .25s var(--ease),box-shadow .25s}
.store:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.store span{display:flex;flex-direction:column;line-height:1.05}
.store small{font-size:10px;font-weight:500;opacity:.7}
.store strong{font-size:17px;font-weight:700;letter-spacing:-.01em}
.is-ios .store[href*="play.google"],.is-android .store[href*="apple.com"]{opacity:.55}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:800;font-size:clamp(46px,7.4vw,108px);line-height:.94;letter-spacing:-.05em}
.display--md{font-size:clamp(40px,6vw,88px)}
.display .line{display:block;overflow:hidden;padding-bottom:.06em}
.display .line>span{display:inline-block}
.motion .hero .display .line>span{animation:rise 1.3s var(--ease) both}
.motion .hero .display .line:nth-child(2)>span{animation-delay:.12s}
@keyframes rise{from{transform:translateY(105%)}}
.grad{background:linear-gradient(95deg,var(--brand) 0%,var(--brand-2) 35%,var(--cal) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .grad{background-image:linear-gradient(95deg,#047857 0%,#0F766E 40%,#2563EB 100%)}
.lead{font-size:clamp(17px,1.5vw,20px);color:var(--t2);max-width:560px;margin-top:22px}
.lead b,.body b{color:var(--t1);font-weight:600}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.2vw,62px);line-height:1;letter-spacing:-.04em}
.h2 em{font-style:normal;color:var(--t2)}
.body{font-size:clamp(16px,1.25vw,18px);color:var(--t2);margin-top:18px;max-width:520px}
.small{font-size:13px;color:var(--t3)}
[dir="rtl"] .display,[dir="rtl"] .h2,[dir="rtl"] .statement,[dir="rtl"] .under span,[dir="rtl"] .brand__word{letter-spacing:0}
[dir="rtl"] .display{line-height:1.15}
/* Arabic: numbers are isolated per token by v3.js (U+2066/2069); only pure math stays LTR */
[dir="rtl"] :is(.panel code,.tag b,.hud__time,.day__time){direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .formula{direction:rtl;text-align:right;font-family:var(--font)}

.tag{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--t2);margin-bottom:18px}
.tag b{font-family:var(--display);font-size:13px;padding:5px 10px;border-radius:999px;background:var(--brand-fill);color:#fff;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--t2);padding:7px 14px;border-radius:999px;margin-bottom:24px}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(16,185,129,.2)}
.glass{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--shadow)}
.chip--glass{background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.ticks{list-style:none;margin-top:22px;display:grid;gap:10px}
.ticks li{position:relative;padding-inline-start:28px;font-size:15px;color:var(--t2)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(16,185,129,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* ---------- scroll fx (pure functions of --q) ---------- */
.fx-up{opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * 36px),0)}
.fx-pop{opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * 22px),0) scale(calc(.86 + .14 * var(--q)))}
.fx-zoom{opacity:var(--q);transform:scale(calc(1.4 - .4 * var(--q)))}
.fx-x{opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * 50px),0) scale(calc(.94 + .06 * var(--q)))}
.fx-draw{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--q))}
.fx-bar{display:block;height:100%;transform:scaleX(var(--q));transform-origin:left}
[dir="rtl"] .fx-bar{transform-origin:right}
.scrub .w{opacity:calc(.16 + .84 * clamp(0, (var(--q) * 1.15 - var(--i)) * 7, 1));transition:opacity .15s linear}
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- scenes ---------- */
.ch{position:relative;overflow-x:clip}
.anchor{display:block;height:0} /* alias ids for old homepage deep links (#algorithm, #get-app…) */
.scene{height:calc(var(--len) * 1svh)}
.pin{position:sticky;top:0;height:100svh;overflow:hidden;z-index:2}
/* pin overlays its .under; the negative margin sits on the pin so the under's sticky range ends with its section */
.under+.pin{margin-top:-100svh}
.under{position:sticky;top:0;height:100svh;overflow:hidden;z-index:0;pointer-events:none;
  display:grid;place-items:center;text-align:center}
.under span{font-family:var(--display);font-weight:800;letter-spacing:-.06em;line-height:.9}
.section{padding:clamp(110px,14vw,180px) 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;height:100%;padding-top:var(--navh)}
.split--rev .copy{order:2}
.stage{position:relative;height:100%;display:grid;place-items:center}

/* phone slots — the 3D phone is projected onto these rects; stills show without WebGL */
.slot{position:relative;aspect-ratio:.475;height:min(68svh,620px);flex:none}
.still{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:15% / 7%;border:7px solid #0c0d10;box-shadow:var(--shadow);background:#0c0d10}
.gl .hero .still{visibility:hidden}
.slot--center{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);height:min(56svh,560px)}


/* ---------- motion graphics (replace screenshots) ----------
   Every loop is gated on .motion; with motion/3D off the default (un-animated)
   values ARE the finished frame, so the still state looks complete. */
.slot--sq{aspect-ratio:1}
.slot--scan{aspect-ratio:.78}
.slot--feed{aspect-ratio:.66}
.slot--day{aspect-ratio:.8}
.mg{position:relative;width:100%;height:100%;border-radius:30px;overflow:hidden;
  background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* reveal · orbit */
.mg--orbit{display:grid;place-items:center;overflow:visible;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.orbit__rings{position:absolute;inset:6%;width:88%;height:88%;filter:drop-shadow(0 10px 30px rgba(16,185,129,.25))}
.orbit__rings circle{fill:none;stroke-width:10;stroke-linecap:round}
.orbit__rings .trk,.day__ring .trk{stroke:var(--line)}
.orbit__rings .arc{stroke:var(--c);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,1) * var(--v))}
.orbit__core{position:relative;text-align:center;z-index:1}
.orbit__core b{display:block;font-family:var(--display);font-size:clamp(34px,4vw,54px);font-weight:800;letter-spacing:-.04em;line-height:1}
.orbit__core small{font-size:13px;color:var(--t2);font-weight:600}
.orbit__path{position:absolute;inset:var(--in);border-radius:50%;border:1px dashed var(--line);rotate:var(--a)}
.orbit__food{position:absolute;left:50%;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center;font-size:22px;
  border-radius:50%;background:var(--bg2);border:1px solid var(--glass-line);box-shadow:var(--shadow);rotate:calc(-1 * var(--a))}
.orbit__food--b{top:100%}
.motion .orbit__path{animation:spin var(--t) linear infinite}
.motion .orbit__food{animation:spin var(--t) linear infinite reverse}
.pt{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c);opacity:0}
.motion .pt{animation:inflow 3s cubic-bezier(.55,0,.8,.4) var(--d) infinite}
@keyframes inflow{0%{transform:translate(var(--x),var(--y));opacity:0}25%{opacity:1}100%{transform:translate(0,0) scale(.2);opacity:0}}

/* 07:30 · camera viewfinder */
.mg--scan{background:radial-gradient(120% 90% at 50% 40%,#2b3138,#0b0d11 72%);border-color:rgba(255,255,255,.08);color:#fff}
.scan__pill{position:absolute;top:16px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.scan__pill i{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px var(--brand)}
.motion .scan__pill i{animation:blink 1.2s steps(1) infinite}
.scan__plate{position:absolute;left:12%;right:12%;top:50%;aspect-ratio:1;translate:0 -50%;border-radius:50%;
  background:radial-gradient(circle,#fbfbfa 0 54%,#eceee9 55% 63%,#d9ddd6 64% 70%,transparent 71%);box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.food{position:absolute;font-size:clamp(34px,5.4vw,66px);line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25))}
.food--rice{left:20%;top:44%}.food--meat{left:46%;top:20%}.food--broc{left:52%;top:52%}
.box{position:absolute;border:2px solid var(--brand);border-radius:14px;box-shadow:0 0 0 4px rgba(16,185,129,.15)}
.box b{position:absolute;top:-11px;left:8px;font-size:10px;font-weight:800;padding:1px 6px;border-radius:6px;background:var(--brand-fill);color:#fff;font-style:normal}
.box--rice{left:16%;top:40%;width:30%;height:30%}.box--meat{left:42%;top:16%;width:30%;height:30%}.box--broc{left:48%;top:48%;width:30%;height:30%}
.motion .box{animation:boxIn 5s var(--ease) infinite both}
.motion .box--meat{animation-delay:.5s}.motion .box--broc{animation-delay:1s}
@keyframes boxIn{0%,8%{opacity:0;transform:scale(1.25)}18%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:none}}
.corner{position:absolute;width:34px;height:34px;border:3px solid rgba(255,255,255,.85)}
.corner--tl{top:9%;left:7%;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.corner--tr{top:9%;right:7%;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.corner--bl{bottom:15%;left:7%;border-right:0;border-top:0;border-radius:0 0 0 12px}
.corner--br{bottom:15%;right:7%;border-left:0;border-top:0;border-radius:0 0 12px 0}
.motion .corner{animation:focus 2.6s var(--ease) infinite}
@keyframes focus{50%{transform:scale(.88)}}
.scan__shutter{position:absolute;bottom:3.5%;left:50%;translate:-50% 0;width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.4),0 0 0 7px rgba(255,255,255,.7)}

/* 12:30 · results feed */
.mg--feed{display:flex;flex-direction:column;padding:16px}
.feed__head{display:flex;gap:6px;justify-content:center;margin-bottom:10px}
.src{font-size:10px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);white-space:nowrap}
.feed__win{position:relative;flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.feed__list{list-style:none;display:grid;gap:8px}
.motion .feed__list{animation:feed 16s linear infinite}
@keyframes feed{to{transform:translateY(calc(-50% - 4px))}}
.feed__list li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--bg2);border:1px solid var(--line)}
.feed__e{font-size:22px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--glass-hi);flex:none}
.feed__bars{flex:1;display:grid;gap:3px}
.feed__bars i{display:block;height:5px;width:var(--w);min-width:6%;border-radius:4px;background:var(--c)}
.feed__list em{font-style:normal;font-family:var(--display);font-weight:800;font-size:15px;white-space:nowrap}
.feed__list em small{font-size:10px;font-weight:600;color:var(--t2);margin-inline-start:2px}
.feed__hl{position:absolute;left:0;right:0;top:22%;height:60px;border-radius:18px;border:2px solid var(--brand);box-shadow:0 0 0 6px rgba(16,185,129,.12);pointer-events:none}

/* engine · gauge */
.mg--gauge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8% 9%}
.mg--gauge svg{width:100%;height:auto;overflow:visible}
.g-trk{fill:none;stroke:var(--t3);stroke-width:12;stroke-dasharray:.004 .016;opacity:.6}
.g-arc{fill:none;stroke:var(--brand);stroke-width:12;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:.18;filter:drop-shadow(0 0 10px rgba(16,185,129,.5))}
.motion .mg--gauge.in .g-arc{animation:arcIn 2.2s var(--ease) both}
@keyframes arcIn{from{stroke-dashoffset:1}}
.gauge__mid{margin-top:-62%;text-align:center}
.gauge__mid b{display:block;font-family:var(--display);font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.04em;line-height:1}
.gauge__mid small{font-size:13px;color:var(--t2);font-weight:600}
.gauge__bars{width:100%;display:flex;gap:4px;margin-top:22%;height:30px}
.gauge__bars span{width:var(--w);border-radius:9px;background:var(--c);display:grid;place-items:center;font-size:11px;font-weight:800;color:#111;transform-origin:left}
.motion .mg--gauge.in .gauge__bars span{animation:barIn 1.2s var(--ease) both}
.motion .mg--gauge.in .gauge__bars span:nth-child(2){animation-delay:.15s}.motion .mg--gauge.in .gauge__bars span:nth-child(3){animation-delay:.3s}
@keyframes barIn{from{transform:scaleX(0)}}

/* CTA · tomorrow's sunrise */
.mg--day{display:flex;flex-direction:column;align-items:center;padding:0 0 9%}
.day__sky{position:relative;width:100%;height:38%;overflow:hidden;background:linear-gradient(180deg,#ffd6a5,#ffe9cf 55%,transparent);flex:none}
:root[data-theme="dark"] .day__sky,:root[data-theme="mix"] .day__sky{background:linear-gradient(180deg,rgba(255,170,110,.45),rgba(255,200,140,.15) 55%,transparent)}
.day__sun{position:absolute;left:50%;bottom:-34%;width:44%;aspect-ratio:1;margin-left:-22%;border-radius:50%;
  background:radial-gradient(circle,#ffe07a,#ffb347 60%,rgba(255,150,60,0) 72%);box-shadow:0 0 80px 20px rgba(255,180,80,.45)}
.motion .mg--day.in .day__sun{animation:sunrise 2.6s var(--ease) both}
@keyframes sunrise{from{transform:translateY(60%);opacity:.3}}
.day__time{position:absolute;top:14px;left:18px;font-family:var(--display);font-weight:800;font-size:18px;color:#7a4a16}
:root[data-theme="dark"] .day__time,:root[data-theme="mix"] .day__time{color:#ffd6a5}
.day__ring{position:relative;width:62%;margin-top:-6%}
.day__ring svg{width:100%;height:auto;display:block}
.day__ring circle{fill:none;stroke-width:8;stroke-linecap:round}
.day__ring .arc{stroke:var(--c);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--v))}
.motion .mg--day.in .day__ring .arc{animation:arcIn 1.8s var(--ease) var(--d) both}
.day__mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.day__mid b{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);font-weight:800;letter-spacing:-.04em;line-height:1}
.day__mid small{font-size:11px;color:var(--t2);font-weight:600}
.day__streak{list-style:none;display:flex;gap:8px;margin-top:auto}
.day__streak li{width:14px;height:14px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px rgba(16,185,129,.5)}
.motion .mg--day.in .day__streak li{animation:dotOn .5s var(--ease) calc(1s + var(--i) * .18s) both}
@keyframes dotOn{from{background:var(--line);box-shadow:none;transform:scale(.6)}}

/* ---------- 1 · hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;padding:calc(var(--navh) + 30px) 0 60px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
.hero__stage{position:relative;display:grid;place-items:center;min-height:min(74svh,680px)}
.hero .slot{height:min(70svh,640px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.meta{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:13px;color:var(--t3)}
.meta li::before{content:"✦ ";color:var(--brand)}
.hchip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;border-radius:18px;white-space:nowrap;z-index:3;
  --mx:0;--my:0;
  transform:translate3d(calc(var(--mx) * var(--d) * 18px + var(--ax) * var(--q)),calc(var(--my) * var(--d) * 18px + var(--ay) * var(--q)),0);
  opacity:calc(1 - var(--q));transition:transform .5s var(--ease)}
.hchip i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.hchip b{display:block;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.02em}
.hchip small{font-size:12px;color:var(--t2)}
.hchip--1{top:12%;left:-2%;--d:1.2;--ax:-140px;--ay:-60px}
.hchip--2{top:30%;right:-4%;--d:-.9;--ax:150px;--ay:-40px}
.hchip--3{bottom:24%;left:-6%;--d:.8;--ax:-160px;--ay:40px}
.hchip--4{bottom:8%;right:0;--d:-1.4;--ax:140px;--ay:80px}
.motion .hchip{animation:chipIn 1.2s var(--ease) both}
.motion .hchip--2{animation-delay:.15s}.motion .hchip--3{animation-delay:.3s}.motion .hchip--4{animation-delay:.45s}
@keyframes chipIn{from{opacity:0;translate:0 24px}}
.cue{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:var(--t3);z-index:2}
.cue i{width:22px;height:34px;border-radius:12px;border:1.5px solid var(--t3);position:relative}
.cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--t2);translate:-50% 0;animation:wheel 1.8s var(--ease) infinite}
@keyframes wheel{60%{transform:translateY(9px);opacity:0}}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__copy{display:flex;flex-direction:column;align-items:center}
  .cta-row,.meta{justify-content:center}
  .hero__stage{min-height:auto;margin-top:20px}
  .hero .slot{height:min(62svh,520px)}
  .hchip{padding:8px 12px 8px 10px}
  .hchip b{font-size:14px}
  .hchip--1{left:0}.hchip--2{right:0}.hchip--3{left:0}
  .cue{display:none}
}

/* ---------- 2 · reveal ---------- */
.under--reveal span{font-size:clamp(64px,11.5vw,210px);color:var(--under);max-width:12ch}
.statement{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,38px);line-height:1.15;letter-spacing:-.03em;color:var(--t1)}
#reveal .slot--center{top:42%;height:min(52svh,520px)}
#reveal .statement{position:absolute;left:50%;bottom:6svh;translate:-50% 0;width:min(1000px,calc(100% - 48px));text-align:center;z-index:2}
.statement--left{max-width:900px}

/* ---------- 3 · AI ---------- */
.scanline{position:absolute;left:5%;right:5%;height:2px;border-radius:2px;top:calc(4% + var(--q) * 92%);z-index:3;
  background:var(--brand);box-shadow:0 0 18px 4px rgba(16,185,129,.7),0 0 60px 10px rgba(16,185,129,.25);opacity:clamp(0,(1 - var(--q)) * 8,1)}
.det{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;z-index:3;min-width:220px}
.det__e{font-size:24px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--glass-hi)}
.det b{display:block;font-size:14px;font-weight:600}
.det small{font-size:12px;color:var(--t2)}
.det em{margin-inline-start:auto;font-style:normal;font-family:var(--display);font-weight:700;font-size:15px}
.det--1{top:14%;left:-2%}
.det--2{top:36%;right:-4%}
.det--3{top:58%;left:-4%}
.det--sum{bottom:8%;right:0;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 20px}
.big{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.big small{font-size:15px;font-weight:600;color:var(--t2);letter-spacing:0}
.macros{display:flex;gap:6px;flex-wrap:wrap}
.macros i{font-style:normal;font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}

/* ---------- 4 · search ---------- */
.num{color:var(--brand-text);font-variant-numeric:tabular-nums}
.sources{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.sources span{font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--t2)}
.search{position:absolute;width:min(360px,92%);right:-4%;bottom:12%;border-radius:22px;padding:14px;z-index:3}
.search__bar{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px;border-radius:14px;background:var(--glass-hi);border:1px solid var(--line);color:var(--t2);font-size:15px}
.typed{color:var(--t1);white-space:nowrap;overflow:hidden}
.caret{width:2px;height:20px;background:var(--brand);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.results{list-style:none;margin-top:8px}
.results li{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line)}
.results b{display:block;font-size:14px;font-weight:600}
.results small{font-size:12px;color:var(--t2)}
.results em{margin-inline-start:auto;font-style:normal;font-weight:700;font-size:14px;white-space:nowrap}
.barcode{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;border-radius:14px;background:var(--glass-hi);position:relative;overflow:hidden}
.barcode b{display:block;font-size:14px}
.barcode small{font-size:11px;color:var(--t3);letter-spacing:.1em}
.bars{width:56px;height:36px;flex:none;background:repeating-linear-gradient(90deg,var(--t1) 0 2px,transparent 2px 4px,var(--t1) 4px 5px,transparent 5px 8px,var(--t1) 8px 11px,transparent 11px 12px)}
.laser{position:absolute;left:10px;width:56px;height:2px;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d;top:50%;animation:laser 1.6s ease-in-out infinite alternate}
@keyframes laser{from{top:20%}to{top:78%}}
.split--rev .search{right:-10%;left:auto;bottom:5%;width:min(330px,80%)}

/* ---------- demos (recipes / complete / lazy) ---------- */
#recipes,#complete,#lazy{padding:clamp(120px,14vw,170px) 0;min-height:100svh;display:flex;align-items:center;overflow-x:clip}
.split--demo{height:auto;padding-top:0;gap:72px}
.split--demo .copy{max-width:500px}
.intro{margin-bottom:56px}
.intro--right{margin-inline-start:auto;max-width:900px;text-align:end}
.demo{position:relative;border-radius:28px;padding:24px;width:100%;max-width:460px;justify-self:center;overflow:hidden}
.demo__head{display:flex;align-items:center;gap:10px;font-size:16px;margin-bottom:12px}
.demo__head span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--glass-hi);font-size:17px;flex:none}
.demo__hint{font-size:13px;color:var(--t3);margin-bottom:14px}
.stepper{display:inline-flex;align-items:center;gap:4px}
.stepper button{width:30px;height:30px;border-radius:50%;background:var(--glass-hi);border:1px solid var(--line);font-size:17px;line-height:1;transition:.15s}
.stepper button:hover{border-color:var(--brand);color:var(--brand)}
.stepper button:active{transform:scale(.9)}
.stepper__val{min-width:44px;text-align:center;font-weight:700}
.scale-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:14px;background:var(--glass-hi);font-size:14px;font-weight:600}
.ings{list-style:none;margin:10px 0 14px}
.ing{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);transition:background .3s}
.ing.is-bumped{background:linear-gradient(90deg,rgba(16,185,129,.1),transparent)}
.ing__e{font-size:22px}
.ing__t{display:flex;flex-direction:column;font-size:14px;font-weight:600;min-width:0}
.ing__m{display:flex;gap:6px;font-size:11px;font-weight:600}
.ing__amt{font-weight:700;font-size:14px;min-width:52px;text-align:end;font-variant-numeric:tabular-nums}
.tot,.est{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ring-row{display:flex;align-items:center;gap:20px;margin:6px 0 16px}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%}
.ring__mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring__mid b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.03em}
.ring__mid small{font-size:11px;color:var(--t2)}
.legend{list-style:none;display:grid;gap:8px;flex:1;font-size:14px}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.legend b{margin-inline-start:auto}
.sugs{list-style:none;display:grid;gap:8px;margin-bottom:16px}
.sugs li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--glass-hi);border:1px solid var(--line)}
.sug__e{font-size:22px}
.sug__t{display:flex;flex-direction:column}
.sug__t b{font-size:14px}
.sug__t small{font-size:12px;color:var(--t2)}
.sugs em{margin-inline-start:auto;font-style:normal;font-weight:700;color:var(--brand-text)}
.feel{display:flex;gap:8px;align-items:flex-end;height:130px;margin:16px 0}
.feel button{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.feel button i{width:100%;height:var(--h);border-radius:12px;background:var(--glass-hi);border:1px solid var(--line);transition:background .3s,transform .3s var(--ease)}
.feel button span{font-size:12px;font-weight:600;color:var(--t3)}
.feel button.is-on i{background:linear-gradient(180deg,var(--weight),#7c5cf0);border-color:transparent;transform:scaleY(1.04);transform-origin:bottom;box-shadow:0 10px 30px -10px var(--weight)}
.feel button.is-on span{color:var(--t1)}
.done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;
  background:var(--bg2);border-radius:inherit;opacity:0;visibility:hidden;transform:scale(.96);transition:.45s var(--ease)}
.is-done .done{opacity:1;visibility:visible;transform:none}
.done__check{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#fff;background:var(--brand);box-shadow:0 0 0 10px rgba(16,185,129,.15)}
.done__title{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em}
.done p{color:var(--t2);font-size:14px;margin-bottom:8px}
.spark{position:absolute;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:5;animation:spark .9s var(--ease) forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) rotate(260deg);opacity:0}}

/* ---------- 8 · check-in ---------- */
.split--chart{grid-template-columns:.8fr 1.2fr}
.captions{position:relative;align-self:center;min-height:360px}
.cap{position:absolute;top:44px;inset-inline:0;opacity:var(--q);transform:translate3d(0,calc((1 - var(--q)) * 26px),0)}
.chart{border-radius:28px;padding:24px 24px 20px;position:relative}
.chart__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:8px}
.chart__head small{display:block;font-size:12px;color:var(--t2);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.chart__head b{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.chart__head--2{margin-top:10px}
.chart__pill{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--glass-hi);color:var(--t2)}
.chart__pill--exp{background:rgba(200,106,62,.15);color:var(--expend)}
.chart__svg{width:100%;height:auto;display:block;overflow:visible}
.grid path{stroke:var(--line);stroke-width:1;fill:none;stroke-dasharray:4 6}
.dots circle{fill:var(--weight);opacity:clamp(0,(var(--q) * 1.1 - var(--i)) * 9,.55)}
.trend{fill:none;stroke:var(--weight);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 4px 10px rgba(167,139,250,.5))}
.band{fill:rgba(200,106,62,.16);transform-box:fill-box;transform-origin:center;transform:scaleY(calc(1.5 - .85 * var(--q)));opacity:calc(.15 + .85 * var(--q))}
.exp{fill:none;stroke:var(--expend);stroke-width:3;stroke-linecap:round}
.formula{display:block;margin-top:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--t2);padding:10px 12px;border-radius:12px;background:var(--glass-hi);direction:ltr;text-align:left}
.newtarget{position:absolute;inset-inline:20px;bottom:20px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:18px 20px;border-radius:20px;
  background:var(--bg2);border:1px solid var(--line);box-shadow:0 30px 60px -20px rgba(0,0,0,.45)}
.newtarget__lab{font-size:13px;color:var(--t2);font-weight:600;width:100%}
.newtarget__nums{display:flex;align-items:baseline;gap:12px}
.newtarget s{color:var(--t3);font-size:18px}
.newtarget b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--brand-text);font-variant-numeric:tabular-nums}
.newtarget__btns{display:flex;gap:8px;margin-inline-start:auto}

/* ---------- 9 · level ---------- */
.under--level span{font-size:min(70svh,52vw);color:transparent;-webkit-text-stroke:2px var(--under);
  background:linear-gradient(180deg,var(--under),transparent 80%);-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums}
.level__copy{position:absolute;top:calc(var(--navh) + 20px);inset-inline-start:max(28px,calc(50vw - 600px));max-width:420px;z-index:2}
.slot--level{top:50%;height:min(54svh,520px)}
.xp{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;font-size:14px;font-weight:600;white-space:nowrap;z-index:3}
.xp b{font-family:var(--display);color:var(--brand-text)}
.xp--gold{background:linear-gradient(135deg,rgba(245,194,66,.25),var(--glass));border-color:rgba(245,194,66,.5)}
.xp--gold b{color:var(--fat)}
.xp--1{left:calc(50% - 330px);top:30%}.xp--2{right:calc(50% - 330px);top:24%}
.xp--3{left:calc(50% - 360px);top:52%}.xp--4{right:calc(50% - 350px);top:48%}
.xp--5{left:50%;top:calc(var(--navh) + 6px);translate:-50% 0}
.level__foot{position:absolute;bottom:4svh;left:50%;translate:-50% 0;width:min(760px,calc(100% - 40px));text-align:center;z-index:2}
.xpbar{height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.xpbar i{background:linear-gradient(90deg,var(--brand),var(--fat))}
.forms{list-style:none;display:flex;justify-content:space-between;gap:6px;margin:12px 0 8px;font-size:12px;font-weight:600;color:var(--t3)}
.forms .is-now{color:var(--brand-text)}
.forms .is-now::before{content:"● "}
@media (max-width:900px){
  .xp{font-size:12px;padding:8px 10px}
  .xp--1{left:12px;top:36%}.xp--2{right:12px;top:30%}.xp--3{left:12px;top:56%}.xp--4{right:12px;top:52%}
  .xp--5{top:auto;bottom:24svh}
  .level__copy{inset-inline:20px;text-align:center;max-width:none}
  .slot--level{top:54%;height:min(40svh,400px)}
  .level__foot .small{display:none}
}

/* ---------- 10 · engine (horizontal) ---------- */
.pin--h{display:flex;align-items:center}
.track{display:flex;gap:22px;padding:var(--navh) 6vw 0;width:max-content;
  transform:translate3d(calc(var(--p,0) * var(--dx,0) * -1px * var(--dir)),0,0)}
.panel{flex:none;width:min(80vw,440px);height:min(66svh,520px);border-radius:30px;padding:34px;display:flex;flex-direction:column;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow)}
.panel h3{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.03em;margin:12px 0 10px}
.panel p{color:var(--t2);font-size:15px}
.panel code{margin-top:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;padding:12px 14px;border-radius:12px;background:var(--glass-hi);color:var(--t2);direction:ltr}
.panel__n{font-family:var(--display);font-weight:800;font-size:15px;color:var(--brand-text)}
.panel__out{font-family:var(--display);font-size:clamp(44px,5vw,64px);font-weight:800;letter-spacing:-.05em;margin-top:14px}
.panel__out small{font-size:16px;color:var(--t2);letter-spacing:0}
.panel--intro{width:min(92vw,900px);flex-direction:row;align-items:center;gap:30px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.panel--intro>div:first-child{flex:1}
.panel--intro .slot{height:min(46svh,420px)}
.inputs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.inputs li{font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line)}
.split-bar{display:flex;height:54px;border-radius:14px;overflow:hidden;margin-top:auto;margin-bottom:14px}
.split-bar span{width:var(--w);background:var(--c);display:grid;place-items:center;font-size:13px;font-weight:800;color:#111}
.panel--loop{background:linear-gradient(160deg,rgba(16,185,129,.25),var(--glass) 60%);justify-content:center}
.loop{font-size:54px;color:var(--brand);line-height:1}
.static .track{transform:none;flex-wrap:wrap;width:auto;justify-content:center;padding:120px 20px}
.static .pin--h{height:auto}
@media (max-width:700px){.panel--intro{flex-direction:column;width:86vw;text-align:center}.panel--intro .slot{height:min(40svh,360px)}.inputs{justify-content:center}}

/* ---------- 11 · features ---------- */
.head{margin-bottom:54px;max-width:760px}
.head--center{margin-inline:auto;text-align:center}
.head--center .body{margin-inline:auto}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;border-radius:26px;padding:30px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .4s var(--ease),border-color .3s;overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--gx,50%) var(--gy,50%),rgba(16,185,129,.14),transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after{opacity:1}
.card:hover{border-color:rgba(16,185,129,.35)}
.card__ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:22px;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);margin-bottom:22px}
.card h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.card p{color:var(--t2);font-size:15px}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bento{grid-template-columns:1fr}}

/* ---------- 12 · make it yours ---------- */
.under--stack{display:grid}
.under--stack span{grid-area:1/1;font-size:clamp(70px,16vw,280px);color:var(--under);align-self:center}
#yours .slot--center{top:44%;height:min(54svh,520px)}
.yours__copy{position:absolute;bottom:5svh;left:50%;translate:-50% 0;width:min(900px,calc(100% - 40px));text-align:center;z-index:2}
.yours__copy .h2{font-size:clamp(26px,3vw,44px)}
.yours__ctl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ---------- 13 · pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plan{position:relative;border-radius:26px;padding:28px 24px 24px;display:flex;flex-direction:column;gap:6px;
  transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .4s var(--ease)}
.plan__n{font-weight:600;color:var(--t2)}
.plan__a{font-family:var(--display);font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.plan__a small{font-size:15px;color:var(--t2);font-weight:600;letter-spacing:0}
.plan__s{font-size:13px;color:var(--t3);margin-bottom:22px;min-height:2.8em}
.plan .btn{margin-top:auto}
.plan--hot{border-color:rgba(16,185,129,.55);box-shadow:0 0 0 1px rgba(16,185,129,.3),0 30px 80px -30px rgba(16,185,129,.55)}
.plan__badge{position:absolute;top:-12px;inset-inline-start:20px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--brand-fill);color:#fff}
.plan__badge--alt{background:var(--fat);color:#111}
@media (max-width:980px){.plans{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.plans{grid-template-columns:1fr}}

/* ---------- 14 · faq ---------- */
.faq{margin-bottom:40px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-family:var(--display);font-size:clamp(18px,1.8vw,22px);font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:28px;line-height:.8;color:var(--brand);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--t2);padding-bottom:24px;max-width:700px}
.faq a{color:var(--brand-text);text-decoration:underline}

/* ---------- 15 · final ---------- */
.final{min-height:100svh;display:flex;align-items:center;padding:140px 0 80px}
.final__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.final .slot{justify-self:center;height:min(66svh,600px)}
@media (max-width:900px){.final__grid{grid-template-columns:1fr;text-align:center}.final .cta-row{justify-content:center}.final .lead{margin-inline:auto}.final .slot{height:min(50svh,440px)}}

/* ---------- footer ---------- */
.footer{position:relative;z-index:2;padding:80px 0 40px;border-top:1px solid var(--line);background:var(--bg)}
.footer__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.footer__brand p{color:var(--t2);margin-top:12px;font-size:14px}
.footer__cols{display:flex;gap:clamp(30px,5vw,70px);flex-wrap:wrap}
.footer__cols h5{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:14px}
.footer__cols a{display:block;font-size:15px;color:var(--t2);margin-bottom:10px;transition:color .2s}
.footer__cols a:hover{color:var(--brand-text)}
.footer__base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--t3)}

/* ---------- HUD (day clock) ---------- */
.hud{position:fixed;left:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);
  opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
[dir="rtl"] .hud{left:auto;right:20px}
.hud.is-on{opacity:1;transform:none}
.hud__ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(245,194,66,.18);color:var(--fat);transition:.5s}
.hud__moon{display:none}
.hud.is-night .hud__ico{background:rgba(167,139,250,.18);color:var(--weight)}
.hud.is-night .hud__sun{display:none}.hud.is-night .hud__moon{display:block}
.hud__time{font-family:var(--display);font-size:18px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hud__label{font-size:13px;color:var(--t2);font-weight:500}

/* ---------- mobile: pinned scenes stack copy over the phone ---------- */
@media (max-width:900px){
  :root{--navh:70px}
  .split{grid-template-columns:1fr;gap:0;align-content:start;padding-top:calc(var(--navh) + 18px)}
  .split--rev .copy{order:0}
  .scene .copy{text-align:center}
  .scene .copy .body{margin-inline:auto;font-size:15px;margin-top:10px}
  .scene .ticks,.scene .sources{display:none}
  .scene .h2{font-size:clamp(28px,8vw,40px)}
  .scene .tag{margin-bottom:12px}
  .scene .stage{height:auto;margin-top:16px}
  .scene .stage .slot{height:min(46svh,420px)}
  .det{min-width:0;padding:8px 10px;gap:8px}
  .det__e{width:30px;height:30px;font-size:18px}
  .det b{font-size:12px}.det em{font-size:13px}
  .det--1{left:0}.det--2{right:0}.det--3{left:0}
  .det--sum{right:0;bottom:2%}
  .det .big{font-size:24px}
  .search{right:0;left:auto;bottom:0;width:min(300px,88%)}
  .split--rev .search{left:auto;right:0}
  .results li:nth-child(3){display:none}
  .split--demo{gap:36px}
  .split--demo .copy{max-width:none}
  .intro--right{text-align:start}
  .split--chart{grid-template-columns:1fr}
  .captions{min-height:250px;text-align:center}
  .cap .body{font-size:14px;margin-inline:auto}
  .cap{top:34px}
  .chart{padding:16px}
  .chart__head b{font-size:20px}
  .formula{font-size:11px}
  .newtarget{padding:12px 14px;inset-inline:10px;bottom:10px}
  .newtarget b{font-size:26px}
  .hud{left:12px;bottom:12px;padding:6px 12px 6px 8px}
  .hud__label{display:none}
}

/* ---------- static mode (no WebGL or motion off): unpin everything ---------- */
.static .scene{height:auto}
.static .pin{position:relative;height:auto;min-height:100svh;overflow:visible;padding:40px 0}
.static .under{display:none}
.static .under+.pin{margin-top:0}
.static .split{height:auto}
.static .slot--center{position:relative;left:auto;top:auto;transform:none;margin:calc(var(--navh) + 30px) auto 30px}
.static #reveal .statement,.static .yours__copy,.static .level__foot,.static .level__copy{position:relative;left:auto;bottom:auto;top:auto;translate:none;margin:20px auto;inset:auto}
.static .xp{position:relative;display:inline-flex;margin:4px;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;translate:none!important}
.static #level .pin{text-align:center}
.static .cap{position:relative;top:auto;margin-bottom:28px}
.static .captions{min-height:0}
.static .newtarget{position:relative;inset:auto;margin-top:16px}
.static .rv{opacity:1;transform:none;transition:none}
.static .hchip,.static .curtain__tile,.static .caret,.static .laser,.static .cue i::after{animation:none}
.static .scanline{display:none}
@media (prefers-reduced-motion:reduce){.motion .hero .display .line>span{animation-duration:.01s}}

/* ---------- cookie banner (consent.js) ---------- */
.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(--bg2);border:1px solid var(--line);border-radius:20px;padding:15px 18px;box-shadow:var(--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(--brand-text);font-weight:700;white-space:nowrap}
.consent__btns{display:flex;gap:10px;flex:none}
.consent__btn{font-weight:700;font-size:13px;padding:10px 18px;border-radius:999px;border:1px solid var(--line)}
.consent__btn--ghost{color:var(--t2)}
.consent__btn--accept{background:var(--brand-fill);color:#fff;border-color:var(--brand-fill)}
@media (max-width:560px){.consent{bottom:0;width:100%;border-radius:20px 20px 0 0}.consent__btns{flex:1 1 100%}.consent__btn{flex:1}}