@font-face{font-family:"Figtree";src:url("/fonts/figtree.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --teal:#0B5359; --deep:#073235; --teal2:#2A7F86; --mint:#3FE6D8; --apricot:#E8903A; --pale:#E4F1F0;
  --ink:#131C1E; --slate:#3F5057; --canvas:#F4F8F7; --card:#FFFFFF; --line:#D6E5E3; --accent:#1F7178;
  --danger:#8A3232; --ok:#0B5359;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-bg:rgba(255,255,255,.88); --nav-fg:#131C1E; --nav-sub:#3F5057; --nav-chip:rgba(11,83,89,.07); --nav-br:#D6E5E3; --nav-on:#0B5359; --nav-on-fg:#fff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ink:#EAF2F1; --slate:#B3C4C6; --canvas:#0C1517; --card:#14211F; --line:#24373A; --pale:#17302F; --accent:#7FDCD4; --danger:#F0A3A3; --ok:#8FD3D8; --nav-bg:rgba(7,50,53,.93); --nav-fg:#fff; --nav-sub:#D6ECEB; --nav-chip:rgba(255,255,255,.1); --nav-br:rgba(255,255,255,.16); --nav-on:#fff; --nav-on-fg:#0B5359; color-scheme:dark; }
}
:root[data-theme="dark"]{ --ink:#EAF2F1; --slate:#B3C4C6; --canvas:#0C1517; --card:#14211F; --line:#24373A; --pale:#17302F; --accent:#7FDCD4; --danger:#F0A3A3; --ok:#8FD3D8; --nav-bg:rgba(7,50,53,.93); --nav-fg:#fff; --nav-sub:#D6ECEB; --nav-chip:rgba(255,255,255,.1); --nav-br:rgba(255,255,255,.16); --nav-on:#fff; --nav-on-fg:#0B5359; color-scheme:dark; }
:root{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);overflow-x:clip;
  font:17px/1.6 "Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent)}
h1,h2,h3{margin:0;line-height:1.02;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
h1 em,h2 em{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:560;letter-spacing:-.02em}
h2{font-size:clamp(2.2rem,4.8vw,3.9rem)}
h2 em{color:var(--accent)}
h3{font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.sec{padding:clamp(72px,8vw,104px) 0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.sub{font-size:1.2rem;color:var(--slate);max-width:32em;margin:22px 0 0}
.kicker{display:inline-flex;align-items:center;gap:12px;margin:0 0 20px;font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:30px;height:2px;border-radius:2px;background:var(--apricot)}
.k-dark{color:var(--mint)}

/* Entrance states (only when scripts run) */
.js .reveal{opacity:0}
.js .intro{opacity:0}
.js:not(.ready) h1 .wi{transform:translateY(112%)}
[id]{scroll-margin-top:96px}

/* Scroll progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--apricot),#FFBE55);transform:scaleX(0);transform-origin:0 50%}

/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 28px;transition:background .35s,padding .35s,box-shadow .35s}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 var(--nav-br),0 10px 30px -22px rgba(7,50,53,.5)}
.nav.scrolled .brand{color:var(--nav-fg)}
.nav.scrolled .langs,.nav.scrolled .theme{background:var(--nav-chip);border-color:var(--nav-br)}
.nav.scrolled .langs button{color:var(--nav-sub)}
.nav.scrolled .langs button[aria-pressed="true"]{background:var(--nav-on);color:var(--nav-on-fg)}
.nav.scrolled .theme{color:var(--nav-fg)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;transition:color .35s;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}
.mark{display:block;width:42px;height:42px;border-radius:11px;overflow:hidden;box-shadow:0 6px 14px -8px rgba(0,0,0,.5);transition:transform .5s var(--ease)}
.mark img{width:100%;height:100%}
.mark .ld{display:none}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .nav.scrolled .ll{display:none}:root:not([data-theme="dark"]) .nav.scrolled .ld{display:block}}
:root[data-theme="light"] .nav.scrolled .ll{display:none}
:root[data-theme="light"] .nav.scrolled .ld{display:block}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.nav-right{display:flex;align-items:center;gap:12px}
.langs{display:flex;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:3px}
.langs button{border:0;background:none;color:#D6ECEB;font:700 .82rem/1 inherit;padding:8px 11px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.langs button:hover{color:#fff}
.langs button[aria-pressed="true"]{background:#fff;color:var(--teal)}
.theme{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .25s,transform .5s var(--ease)}
.theme:hover{background:rgba(255,255,255,.2);transform:rotate(25deg)}
.theme svg{grid-area:1/1;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .5s var(--ease)}
.theme .moon,.theme.is-dark .sun{opacity:0;transform:rotate(-60deg) scale(.5)}
.theme.is-dark .moon{opacity:1;transform:none}
.nav-cta{order:-1;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease)}
.nav.scrolled .nav-cta{opacity:1;transform:none;pointer-events:auto}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font:800 1.05rem/1 inherit;border:0;border-radius:999px;padding:18px 28px;background:var(--teal);color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap;will-change:transform}
.btn-sm{padding:11px 18px;font-size:.9rem}
.btn-apricot{background:var(--apricot);color:#2E1600;box-shadow:0 14px 34px -12px rgba(232,144,58,.85),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-apricot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s var(--ease);pointer-events:none}
.btn-apricot:hover::after{background-position:-40% 0}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}
button[disabled]{opacity:.6;cursor:wait}
:focus-visible{outline:3px solid var(--apricot);outline-offset:3px}

/* Hero */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate;
  background:radial-gradient(900px 560px at 82% 34%,rgba(42,127,134,.8),transparent 70%),radial-gradient(520px 380px at 6% 108%,rgba(232,144,58,.24),transparent 70%),linear-gradient(160deg,#0B5359,#073235)}
.aurora{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 1.4s}
.aurora.on{opacity:1}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:180px;background:linear-gradient(transparent,rgba(5,30,32,.55));z-index:-1}
.hero-inner{width:100%;max-width:1240px;margin:0 auto;padding:118px 28px 138px;display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font-weight:700;font-size:.88rem;backdrop-filter:blur(6px)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--apricot);animation:ping 2.4s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(232,144,58,.65)}70%,100%{box-shadow:0 0 0 12px rgba(232,144,58,0)}}
h1{font-size:clamp(2.9rem,6.6vw,5.6rem);line-height:.98}
h1 em{color:#FFC98A}
h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .09em .16em 0;margin:-.04em -.09em -.16em 0}
h1 .wi{display:inline-block;will-change:transform}
.lead{font-size:1.22rem;color:#D3E9E8;max-width:31em;margin:28px 0 34px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.link-down{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.35);padding-bottom:3px;transition:border-color .25s}
.link-down:hover{border-color:#fff}
.link-down svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:36px 0 0;padding:0}
.chips li{font-size:.84rem;font-weight:650;padding:7px 13px 7px 30px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#E4F1F0;position:relative}
.chips li::before{content:"";position:absolute;left:11px;top:50%;width:12px;height:12px;margin-top:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233FE6D8' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E") center/contain no-repeat}

.stage{position:relative;width:100%;max-width:560px;aspect-ratio:560/600;margin-left:auto;perspective:1400px}
.orbit{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orbit path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.orbit-back{z-index:1}.orbit-front{z-index:4}
.orbit-front path{stroke:rgba(255,255,255,.75)}
.phone{position:relative;background:#05090A;border-radius:42px;padding:9px;box-shadow:0 50px 90px -30px rgba(0,0,0,.65),0 0 0 1.5px #56646A,0 0 0 4px #14191B,0 0 0 5px rgba(255,255,255,.08)}
.phone::before{content:"";position:absolute;inset:9px;border-radius:33px;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,transparent 34%);z-index:2;pointer-events:none}
.phone::after{content:"";position:absolute;right:-7px;top:21%;width:3px;height:9%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#14191B,#56646A);box-shadow:0 62px 0 0 #2a3336}
.phone{container-type:inline-size}
.phone img{border-radius:33px;width:100%}
.sbar{display:flex;align-items:center;justify-content:space-between;height:8.4cqw;padding:1.2cqw 7cqw 0;border-radius:33px 33px 0 0;background:#F2F7F6 radial-gradient(circle at 50% 56%,#0b1113 0 1.9cqw,transparent 2.1cqw);color:#1B2426;font:700 3.9cqw/1 "Figtree",system-ui,sans-serif;letter-spacing:.01em}
.sbar::before{content:"9:41"}
.sbar::after{content:"";width:17cqw;height:4.2cqw;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 17' fill='%231B2426'%3E%3Cpath d='M2 13h3v3H2zM7 10h3v6H7zM12 7h3v9h-3zM17 3h3v13h-3z'/%3E%3Cpath d='M34 5.500c3 0 5.600 1.200 7.500 3.100l-1.900 1.900A8 8 0 0 0 34 8.200a8 8 0 0 0-5.600 2.300l-1.900-1.900A10.600 10.600 0 0 1 34 5.500zm0 5.300c1.500 0 2.900.600 3.900 1.600L34 16.300l-3.900-3.900c1-1 2.400-1.600 3.900-1.600z'/%3E%3Crect x='47.700' y='4.200' width='16.600' height='9.600' rx='2.600' fill='none' stroke='%231B2426' stroke-width='1.400'/%3E%3Crect x='49.700' y='6.200' width='10.500' height='5.600' rx='1.200'/%3E%3Crect x='65.300' y='7' width='1.700' height='4' rx='.800'/%3E%3C/svg%3E") right center/contain no-repeat}
.sbar+img,.sbar+.screens{border-radius:0 0 33px 33px}
.stage .phone{position:absolute;left:27%;top:4.5%;width:46%;z-index:3;transform-style:preserve-3d;will-change:transform}
.bubble{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;z-index:2;background:#fff center/28px no-repeat;box-shadow:0 14px 30px -10px rgba(0,0,0,.5),inset 0 -3px 8px rgba(0,0,0,.08);will-change:transform}
/* Watch device: strap, two buttons, metal case, glass */
.watch,.face-dev{position:relative;display:block;aspect-ratio:1}
.wstrap{position:absolute;left:23%;right:23%;top:-36%;bottom:-36%;--strap:#1E2629;--stitch:rgba(255,255,255,.22)}
.wstrap::before,.wstrap::after{content:"";position:absolute;left:0;right:0;height:46%;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,0) 16%,rgba(255,255,255,.13) 46%,rgba(255,255,255,.04) 62%,rgba(0,0,0,0) 84%,rgba(0,0,0,.42)),var(--strap);
  outline:1.5px dashed var(--stitch);outline-offset:-7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 2px 3px rgba(255,255,255,.12),0 18px 26px -14px var(--w-drop,rgba(0,0,0,.6))}
.wstrap::before{top:0;border-radius:44% 44% 10% 10% / 20% 20% 4% 4%;-webkit-mask-image:linear-gradient(transparent 0%,#000 26%);mask-image:linear-gradient(transparent 0%,#000 26%)}
.wstrap::after{bottom:0;border-radius:10% 10% 44% 44% / 4% 4% 20% 20%;-webkit-mask-image:linear-gradient(#000 74%,transparent 100%);mask-image:linear-gradient(#000 74%,transparent 100%)}
.wbtn{position:absolute;left:50%;top:50%;width:10%;height:15%;margin:-7.5% 0 0 -5%;border-radius:22% / 16%;
  background:linear-gradient(90deg,#0d1112 0%,#2a3336 45%,#7c8a8f 78%,#39454a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.5),0 6px 10px -6px rgba(0,0,0,.6)}
.wbtn.b1{transform:rotate(-27deg) translateX(490%)}
.wbtn.b2{transform:rotate(27deg) translateX(490%)}
.wcase{position:absolute;inset:0;border-radius:50%;padding:6.5%;background:conic-gradient(from 210deg,#111618,#5d6b70 12%,#161b1d 30%,#0c0f10 50%,#4a565a 68%,#111618 84%,#111618);box-shadow:0 30px 50px -16px rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.12)}
.wcase::after{content:"";position:absolute;inset:6.5%;border-radius:50%;background:linear-gradient(125deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 26%,transparent 40%);box-shadow:inset 0 0 0 3px #000,inset 0 0 14px 4px rgba(0,0,0,.6);pointer-events:none}
.wface{display:block;width:100%;height:100%;border-radius:50%}
.hero-watch{position:absolute;left:3%;bottom:9%;width:27%;z-index:6;will-change:transform}
.trace{position:absolute;left:0;right:0;bottom:58px;width:100%;height:96px;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}

/* Icons */
.i-food{background-color:#FFE7CC;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F3800' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 3v8M4 3v5a3 3 0 0 0 6 0V3M7 11v10M17 21V3c-2.5 1-4 4-4 8h4'/%3E%3C/svg%3E")}
.i-drop{background-color:#CDF3FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300566A' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.5 4.2 6 7.300 6 10.500a6 6 0 0 1-12 0C6 10.300 8.500 7.200 12 3z'/%3E%3C/svg%3E")}
.i-moon{background-color:#DFE5FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B4E9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.500A8 8 0 1 1 9.500 4a6.500 6.500 0 0 0 10.500 10.500z'/%3E%3C/svg%3E")}
.i-run{background-color:#D2F5E8;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5359' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='14' cy='4' r='2'/%3E%3Cpath d='M6 21l4-7 3 2v5M8 10l4-3 3 3 3 1M11 13l-4-1'/%3E%3C/svg%3E")}
.i-lock{background-color:#E4F1F0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5359' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.i-leaf{background-color:#FFE0E0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A3232' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.200-6-10a6 6 0 0 1 12 0c0 4.800-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3C/svg%3E")}
.i-wave{background-color:#FFE7CC;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F3800' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 9c3-3 6 3 9 0s6 3 9 0M3 15c3-3 6 3 9 0s6 3 9 0'/%3E%3C/svg%3E")}
.i-globe{background-color:#DFE5FF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B4E9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.500 2.600 3.800 5.600 3.800 9s-1.300 6.400-3.800 9c-2.500-2.600-3.800-5.600-3.800-9S9.500 5.600 12 3z'/%3E%3C/svg%3E")}

/* Demo */
.demo{overflow-x:clip;position:relative;z-index:2;margin-top:-46px;border-radius:46px 46px 0 0;background:var(--canvas)}
.foods{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:34px;max-width:580px}
.food{display:flex;align-items:center;gap:10px;text-align:left;font:650 .98rem/1.2 inherit;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:16px 16px;cursor:pointer;transition:transform .25s var(--ease),border-color .25s,background .25s,color .25s,box-shadow .25s}
.food:hover{transform:translateY(-2px);border-color:var(--teal2);box-shadow:0 10px 24px -16px rgba(11,83,89,.5)}
.food:active{transform:scale(.97)}
.food span{flex:1}
.food b{font-weight:700;font-size:.85rem;color:var(--slate);font-variant-numeric:tabular-nums;white-space:nowrap}
.tick{flex:none;width:24px;height:24px;border-radius:50%;background:var(--pale);position:relative;transition:background .3s,transform .45s var(--ease)}
.tick::before,.tick::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:var(--teal2);transition:transform .45s var(--ease),width .3s,background .3s}
.tick::after{transform:rotate(90deg)}
.food[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.food[aria-pressed="true"] b{color:#BFE3E1}
.food[aria-pressed="true"] .tick{background:#fff;transform:rotate(360deg)}
.food[aria-pressed="true"] .tick::before{width:6px;transform:translate(-3px,2px) rotate(45deg);background:var(--teal)}
.food[aria-pressed="true"] .tick::after{width:11px;transform:translate(2px,0) rotate(-48deg);background:var(--teal)}
.food.is-walk[aria-pressed="true"]{background:#7F3800;border-color:#7F3800}
.food.is-walk[aria-pressed="true"] b{color:#FFD9B0}
.food.is-water .tick{background:#CDF3FF}
.food.bump{animation:bump .4s var(--ease)}
@keyframes bump{40%{transform:scale(.95)}100%{transform:none}}
.fine{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 0;font-size:.86rem;color:var(--slate)}
.reset{font:700 .86rem/1 inherit;color:var(--accent);background:none;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .2s}
.reset:hover{border-color:var(--accent)}

.dwrap{position:relative;max-width:520px;width:100%;margin-left:auto}
.dglow{position:absolute;inset:-12% -14%;background:radial-gradient(closest-side,rgba(42,127,134,.3),transparent);z-index:-1;filter:blur(10px)}
.dcard{color:#fff;border-radius:32px;padding:28px;background:radial-gradient(420px 260px at 90% 0,rgba(63,230,216,.22),transparent 70%),linear-gradient(155deg,#0E6068,#073235);box-shadow:0 40px 70px -34px rgba(7,50,53,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.dc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.dc-lbl{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.95rem;color:#D3E9E8}
.dc-lbl svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
.dc-big{white-space:nowrap;font-size:clamp(2.6rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.dc-side{text-align:right;font-weight:700;font-size:.98rem;line-height:1.5;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:7px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
.bar i{display:block;height:100%;width:100%;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.bar-lg{height:11px;margin:18px 0 22px}
.dc-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dc-macros b{display:block;font-size:.95rem;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.m-lbl{font-weight:650;font-size:.9rem;color:#D3E9E8;display:inline-flex;align-items:center;gap:6px}
.m-lbl::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c)}
.m-p{--c:#5FE0D4}.m-c{--c:#F5A85A}.m-f{--c:#B6ADFF}
#dPB{background:#5FE0D4}#dCB{background:#F5A85A}#dFB{background:#B6ADFF}
.dc-note{margin:14px 6px 0;font-size:.92rem;color:var(--slate)}
.dtiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.dtile{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;border-radius:22px;padding:16px;color:#10262B}
.t-water{background:#CDEFFA}.t-move{background:#FFE2C2}
.t-ico{width:38px;height:38px;border-radius:50%;background-size:22px;background-repeat:no-repeat;background-position:center;background-color:rgba(255,255,255,.7)}
.t-txt>span{display:block;font-size:.82rem;font-weight:700;opacity:.75}
.t-txt b{font-size:1rem;font-variant-numeric:tabular-nums}
.dtile .bar{grid-column:1/-1;background:rgba(16,38,43,.12)}
.t-water .bar i{background:#00566A}.t-move .bar i{background:#7F3800}

/* Story */
.story{padding-bottom:20px;overflow-x:clip}
.story-head{max-width:760px}
.story-grid{display:grid;grid-template-columns:minmax(0,560px) 400px;justify-content:space-between;gap:60px;align-items:start;margin-top:0}
.step{min-height:min(74vh,600px);display:flex;flex-direction:column;justify-content:center;max-width:520px;transition:opacity .5s}
.js .step{opacity:.28}
.js .step.is-on{opacity:1}
.num{font:560 italic 1.5rem/1 "Fraunces",Georgia,serif;color:var(--apricot);margin-bottom:18px;display:inline-flex;align-items:center;gap:14px}
.num::after{content:"";width:64px;height:1.5px;background:var(--line)}
.step h3{font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.035em;line-height:1.05}
.step p{font-size:1.15rem;color:var(--slate);margin:18px 0 22px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:34px;font-weight:650}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A7F86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.step-shot{display:none}
.story-pin{position:sticky;top:max(84px,calc(50vh - 330px));height:660px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.pin-glow{position:absolute;width:150%;aspect-ratio:1;left:-25%;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(closest-side,var(--pale),transparent 72%);z-index:-1}
.story-pin .phone{width:300px}
.screens{position:relative;aspect-ratio:540/1076;border-radius:33px;overflow:hidden}
.screens img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:top;border-radius:0;opacity:0;transform:translateY(22px) scale(.985);transition:opacity .55s,transform .7s var(--ease)}
.screens img.on{opacity:1;transform:none}
.pin-dots{display:flex;gap:8px}
.pin-dots i{width:8px;height:8px;border-radius:99px;background:var(--line);transition:width .4s var(--ease),background .3s}
.pin-dots i.on{width:28px;background:var(--teal2)}

.around{margin-top:56px}
.around h3{font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.03em;margin-bottom:24px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:grid;gap:4px;align-content:start;border-radius:28px;padding:22px;color:#10262B;transition:transform .45s var(--ease),box-shadow .45s}
.tile:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 26px 40px -28px rgba(11,83,89,.6)}
.tile .t-ico{width:46px;height:46px;background-size:26px;margin-bottom:12px}
.tl{font-size:.9rem;font-weight:700;opacity:.72}
.tile b{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.tile small{font-size:.86rem;line-height:1.4;opacity:.8;margin-top:6px}
.tl-sleep{background:#DCE3FF}.tl-water{background:#CDEFFA}.tl-fast{background:#E9E0FF}.tl-weight{background:#FFDDE6}
.i-clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B3FB8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.500 2M9 2h6'/%3E%3C/svg%3E")}
.i-scale{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C2F52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4'/%3E%3Cpath d='M8.500 9a5 5 0 0 1 7 0l-2 2.500h-3z'/%3E%3C/svg%3E")}
/* Watch */
.wrist{--w-bg:linear-gradient(180deg,#E3F0EE,#F4F8F7);--w-glow:rgba(42,127,134,.16);--w-fg:#131C1E;--w-sub:#3F5057;--w-em:#1F7178;--w-kick:#1F7178;--w-pill:#fff;--w-pill-br:#D6E5E3;--w-strap:#262D30;--w-stitch:rgba(255,255,255,.26);--w-halo:rgba(11,83,89,.28);--w-drop:rgba(7,50,53,.45);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wrist{--w-bg:#04090A;--w-glow:rgba(63,230,216,.13);--w-fg:#fff;--w-sub:#A9B9BB;--w-em:#3FE6D8;--w-kick:#3FE6D8;--w-pill:rgba(255,255,255,.04);--w-pill-br:rgba(255,255,255,.14);--w-strap:#222B2E;--w-stitch:rgba(255,255,255,.2);--w-halo:rgba(60,245,160,.3);--w-drop:rgba(0,0,0,.75);}}
:root[data-theme="dark"] .wrist{--w-bg:#04090A;--w-glow:rgba(63,230,216,.13);--w-fg:#fff;--w-sub:#A9B9BB;--w-em:#3FE6D8;--w-kick:#3FE6D8;--w-pill:rgba(255,255,255,.04);--w-pill-br:rgba(255,255,255,.14);--w-strap:#222B2E;--w-stitch:rgba(255,255,255,.2);--w-halo:rgba(60,245,160,.3);--w-drop:rgba(0,0,0,.75);}
.wrist{background:var(--w-bg);color:var(--w-fg);padding:110px 0 0;position:relative;overflow:hidden;border-radius:48px 48px 0 0}
.wrist::before{content:"";position:absolute;width:900px;height:900px;left:-260px;top:-200px;background:radial-gradient(closest-side,var(--w-glow),transparent);pointer-events:none}
.wrist h2 em{color:var(--w-em)}
.wrist .kicker{color:var(--w-kick)}
.wrist .sub{color:var(--w-sub)}
.face-wrap{display:grid;place-items:center}
.face-dev{width:min(400px,74vw)}
.face-dev .wstrap{top:-24%;bottom:-24%}
.face-dev .wstrap::before,.face-dev .wstrap::after{height:42%}
.wrist .wstrap{--strap:var(--w-strap);--stitch:var(--w-stitch)}
.wrist .wcase{box-shadow:0 30px 50px -16px var(--w-drop),inset 0 0 0 1px rgba(255,255,255,.12)}
.face{position:absolute;inset:0;border-radius:50%;background:#000;display:grid;place-items:center;border:14px solid transparent;background:linear-gradient(#000,#000) padding-box,conic-gradient(from 210deg,#111618,#5d6b70 12%,#161b1d 30%,#0c0f10 50%,#4a565a 68%,#111618 84%,#111618) border-box;box-shadow:0 0 120px -10px var(--w-halo),0 60px 90px -30px var(--w-drop)}
.face::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(125deg,rgba(255,255,255,.14),transparent 34%);box-shadow:inset 0 0 0 3px #000;pointer-events:none}
.face svg{grid-area:1/1;width:92%;overflow:visible}
.face-mid{color:#fff;grid-area:1/1;display:grid;justify-items:center;text-align:center;line-height:1.05}
.face-mid b{font-size:clamp(1.5rem,3.3vw,2.5rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.face-mid span{font-size:clamp(.72rem,1.2vw,.95rem);font-weight:650;color:#A9B9BB;margin-top:4px}
.track{opacity:.17}
.tr1,.rg1{stroke:#3CF5A0}.tr2,.rg2{stroke:#FF6B81}.tr3,.rg3{stroke:#FFBE55}
.rg1{filter:drop-shadow(0 0 6px rgba(60,245,160,.55))}.rg2{filter:drop-shadow(0 0 6px rgba(255,107,129,.5))}.rg3{filter:drop-shadow(0 0 6px rgba(255,190,85,.5))}
.stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:38px;margin:40px 0 0}
.stats dt{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:700;color:var(--w-sub)}
.sw{width:10px;height:10px;border-radius:50%}
.s1{background:#3CF5A0}.s2{background:#FF6B81}.s3{background:#FFBE55}
.stats dd{margin:6px 0 0;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.stats small{font-size:.4em;font-weight:700;letter-spacing:0;color:var(--w-sub)}
.watch-row{display:flex;align-items:flex-start;justify-content:center;gap:clamp(22px,6vw,76px);padding:190px 28px 70px}
.watch-row .watch{width:clamp(110px,15vw,190px);animation:bob 6s ease-in-out infinite}
.watch-row .watch:nth-child(2){animation-delay:-1.5s;margin-top:44px}
.watch-row .watch:nth-child(3){animation-delay:-3s}
.watch-row .watch:nth-child(4){animation-delay:-4.5s;margin-top:44px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.marquee{overflow:hidden;padding:40px 0 80px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mtrack{display:flex;gap:14px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.pill{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;border:1px solid var(--w-pill-br);background:var(--w-pill);font-weight:700;font-size:1.02rem;white-space:nowrap}
.pill i{width:12px;height:12px;border-radius:50%;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}

/* Principles */
.calm{background:var(--canvas)}
.nots{list-style:none;margin:6px 0 64px;padding:0;display:flex;flex-wrap:wrap;gap:.1em .55em;font-size:clamp(2.3rem,7vw,5.6rem);font-weight:800;letter-spacing:-.045em;line-height:1.04}
.nots li{position:relative;transition:color .7s .15s}
.nots li::after{content:"";position:absolute;left:-.06em;right:-.06em;top:54%;height:.085em;border-radius:99px;background:var(--apricot);transform:scaleX(0);transform-origin:0 50%;transition:transform .75s var(--ease)}
.nots.struck li{color:color-mix(in srgb,var(--ink) 28%,transparent)}
.nots.struck li::after{transform:scaleX(1)}
.nots li:nth-child(2),.nots li:nth-child(2)::after{transition-delay:.16s}
.nots li:nth-child(3),.nots li:nth-child(3)::after{transition-delay:.32s}
.nots li:nth-child(4),.nots li:nth-child(4)::after{transition-delay:.48s}
.nots li:nth-child(5),.nots li:nth-child(5)::after{transition-delay:.64s}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px}
.card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:34px;transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:0 30px 50px -34px rgba(11,83,89,.55);border-color:color-mix(in srgb,var(--teal2) 50%,var(--line))}
.spot::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(42,127,134,.16),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.spot:hover::before{opacity:1}
.c-wide{grid-column:span 2}
.ico{display:block;width:54px;height:54px;border-radius:17px;background-size:28px;background-repeat:no-repeat;background-position:center;transition:transform .5s var(--ease)}
.card:hover .ico{transform:rotate(-8deg) scale(1.08)}
.card h3{margin:22px 0 8px;font-size:1.45rem}
.card p{margin:0;color:var(--slate);max-width:34em}

/* Sign-up */
.join{position:relative;color:#fff;padding:104px 0;overflow:hidden;
  background:radial-gradient(800px 500px at 12% 10%,rgba(42,127,134,.75),transparent 70%),radial-gradient(520px 380px at 96% 100%,rgba(232,144,58,.26),transparent 70%),linear-gradient(160deg,#0B5359,#073235)}
.signup{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.join-logo{margin-bottom:26px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35))}
.join h2{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.join h2 em{color:#FFC98A}
.form-sub{margin:22px 0 0;color:#D3E9E8;font-size:1.2rem;max-width:26em}
.join-body{background:var(--card);color:var(--ink);border-radius:32px;padding:34px;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.card-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:6px 13px;border-radius:999px;background:var(--pale);color:var(--accent);font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.row{display:flex;flex-direction:column;gap:12px}
.row .btn{justify-content:center;padding:20px 28px;font-size:1.12rem}
.row input{flex:none;min-width:0;font:inherit;font-size:1.1rem;padding:19px 22px 19px 56px;background-color:var(--canvas);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A7F86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3.500 7.500l8.500 6 8.500-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:20px center;background-size:22px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.row input:focus{outline:0;border-color:var(--teal2);box-shadow:0 0 0 4px rgba(42,127,134,.22)}
.consent{display:flex;gap:10px;align-items:flex-start;margin:18px 4px 4px;font-size:.95rem;color:var(--slate);cursor:pointer}
.consent input{margin-top:3px;width:19px;height:19px;accent-color:var(--teal);flex:none}
.status{min-height:1.4em;margin:8px 4px 0;font-weight:700}
.status.ok{color:var(--ok);font-size:1.3rem;line-height:1.3;text-align:center;margin:10px 0 18px}.status.err{color:var(--danger)}
.note{margin:6px 4px 12px;font-size:.88rem;color:var(--slate)}
.privacy{font-size:.88rem;color:var(--slate);border-top:1px solid var(--line);padding:14px 4px 0}
.privacy summary{cursor:pointer;font-weight:700;color:var(--accent)}
.privacy p{margin:.6em 0}
.hp{position:absolute;left:-9999px}
.success{display:none;place-items:center;padding:8px 0 4px}
.success svg{width:84px;height:84px;fill:none;stroke:var(--teal2);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.success circle,.success path{stroke-dasharray:1;stroke-dashoffset:1}
.soon{display:none}
.soon h3{font-size:1.6rem;margin:0 0 10px}
.soon p{margin:0;color:var(--slate);font-size:1.05rem}
[data-signup="off"] .soon{display:block}
[data-signup="off"] .fields,[data-signup="off"] .status,[data-signup="off"] .note,[data-signup="off"] .privacy{display:none}
[data-signup="off"] .btn-apricot[href="#beta"] .arrow{display:none}
.signup.done .fields,.signup.done .card-kicker,.signup.done .note{display:none}
.signup.done .join-body{text-align:center}
.signup.done .privacy{text-align:left}
.signup.done .success{display:grid}
.signup.done .success circle{animation:draw .8s var(--ease) forwards}
.signup.done .success path{animation:draw .5s .55s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

footer{padding:36px 28px 48px;color:var(--slate);text-align:center}
footer p{margin:.35em 0}
.foot-brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:1.05rem}
.small{font-size:.82rem}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal,.js .intro{opacity:1}
  .js .step{opacity:1}
}

/* Tablet */
@media (max-width:980px){
  .sec{padding:90px 0}
  .two{grid-template-columns:1fr;gap:48px}
  .hero-inner{grid-template-columns:1fr;padding-top:120px;gap:10px}
  .stage{margin:0 auto;max-width:440px}
  .dwrap{margin:0 auto}
  .demo .two{gap:0}
  .demo .copy{display:contents}
  .demo .kicker{justify-self:start}
  .demo .dwrap{order:4;margin:36px auto 0}
  .demo .foods{order:5;max-width:none}
  .demo .fine{order:6}
  .story-grid{grid-template-columns:1fr}
  .story-pin{display:none}
  .step,.js .step{min-height:0;opacity:1;padding:46px 0;max-width:none}
  .step-shot{display:block;width:min(270px,74%);margin:34px auto 0}
  .face-wrap{order:2;padding:11% 0 4%}
  .wrist{padding-top:100px;border-radius:32px 32px 0 0}
  .watch-row{padding-top:80px}
  .bento{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .signup{grid-template-columns:1fr;gap:36px}
  .join{padding:90px 0}
}
/* Phone */
@media (max-width:600px){
  body{font-size:16px}
  .wrap,.hero-inner{padding-left:18px;padding-right:18px}
  .nav{padding:12px 16px}
  .brand{font-size:1.05rem}.mark{width:36px;height:36px;border-radius:10px}
  .nav-cta{display:none}
  .lead,.sub,.form-sub{font-size:1.08rem}
  .hero-actions{gap:18px}
  .bubble{width:44px;height:44px;margin:-22px 0 0 -22px;background-size:22px}
  .foods{grid-template-columns:1fr}
  .dcard{padding:22px;border-radius:26px}
  .dc-top{flex-direction:column;align-items:flex-start;gap:6px}
  .dc-side{font-size:.9rem;text-align:left;display:flex;gap:14px;flex-wrap:wrap}
  .dtile{padding:13px;gap:8px 9px}
  .t-ico{width:30px;height:30px;background-size:18px}
  .t-txt b{font-size:.9rem;white-space:nowrap}
  .dc-macros{gap:10px}
  .stats{gap:22px}
  .watch-row{display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:88px 10px;padding-top:110px;padding-bottom:60px}
  .watch-row .watch{width:124px}
  .watch-row .watch:nth-child(n){margin-top:0}
  .nots{margin-bottom:60px}
  .bento{grid-template-columns:1fr}
  .c-wide{grid-column:auto}
  .card{padding:26px;border-radius:24px}
  .row{flex-direction:column}
  .row .btn{justify-content:center}
  .join-body{padding:22px;border-radius:26px}
}