/* Underground — лендинг приложения. Токены и анимации взяты из DesignSystem приложения. */
html,body{margin:0;background:#08090A}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}a:hover{color:#FF9A3D}

.ug{--bg:#08090A;--surface:#141516;--surface2:#1C1D1F;--surface3:#1E1F21;--track:#26272A;--muted:#2A2B2E;--hatch:#1A1B1D;
--text:#F2F4F1;--text2:rgba(242,244,241,.64);--text3:rgba(242,244,241,.5);
--accent:#FF7700;--accentText:#FF9A3D;--onAccent:#1A0B00;--cool:#5AB8FF;--coolDeep:#1B5FA8;--green:#3BE37F;--amber:#FFC83D;
--ease:cubic-bezier(.2,.8,.2,1);
position:relative;overflow-x:clip;background:var(--bg);color:var(--text);color-scheme:dark;
font-family:'Onest',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.5}
.ug *,.ug *::before,.ug *::after{box-sizing:border-box}
.ug img,.ug video{display:block}
.ug h1,.ug h2,.ug h3,.ug p,.ug ul,.ug ol,.ug figure{margin:0}
.ug ul,.ug ol{padding:0;list-style:none}
:where(.ug) button{font:inherit;color:inherit}
.ug :focus-visible{outline:2px solid #FF9A3D;outline-offset:3px}
.ug svg{flex:none}

.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}
.doto{font-family:'Doto',ui-monospace,'SF Mono',Menlo,monospace;font-weight:900;font-variation-settings:'ROND' 0;letter-spacing:0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accentText)}
.h1{font-weight:600;font-size:clamp(40px,7vw,104px);line-height:.94;letter-spacing:-.045em;text-wrap:balance}
.h2{font-weight:600;font-size:clamp(36px,4.8vw,72px);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.h3{font-weight:600;font-size:clamp(23px,2.2vw,32px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.lead{font-size:clamp(17px,1.32vw,20px);line-height:1.55;color:var(--text2);text-wrap:pretty;max-width:34em}
.copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;border:0;font-weight:600;font-size:17px;line-height:1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--accent);color:var(--onAccent)}
.btn-primary:hover{background:#FF8B2B;color:var(--onAccent)}
.btn-glass{background:rgba(255,255,255,.08);color:var(--text);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn-glass:hover{background:rgba(255,255,255,.14);color:var(--text)}
.btn-light{background:var(--text);color:#0B0C0D}
.btn-light:hover{background:#fff;color:#0B0C0D}
.btn-cool{background:var(--cool);color:#03121F}
.btn-cool:hover{background:#7CC8FF;color:#03121F}
.btn-sm{min-height:44px;padding:0 20px;font-size:15px}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:rgba(8,9,10,.58);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px}
.wordmark{display:inline-flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text)}
.wordmark:hover{color:var(--text)}
.wordmark span{font-weight:800;font-size:16px;line-height:1;letter-spacing:.16em}
.wordmark i{display:block;width:36px;height:3px;border-radius:2px;background:var(--accent)}
.nav-links{display:flex;gap:30px;font-size:15px;font-weight:500}
.nav-links a{color:var(--text2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}

/* TopGlow — the app's warm light, one layer pinned to the top-left of the viewport for the whole page.
   Beams are soft by gradient + mask (no filter: blur), so their sway is pure compositing. */
.sky{position:sticky;top:0;height:0;z-index:0;pointer-events:none}
.sky-in{position:absolute;left:0;top:0;width:100%;height:1150px;overflow:hidden;opacity:var(--sky,1);transition:opacity .8s var(--ease)}
.tone{position:absolute;inset:0;transition:opacity 1.2s var(--ease)}
.core{position:absolute;width:1560px;height:1360px;left:-780px;top:-800px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,42,.96),rgba(194,70,12,.6) 50%,rgba(116,42,7,.22) 78%,rgba(194,70,12,0));animation:breathe 12s ease-in-out infinite;will-change:transform,opacity}
.beam{position:absolute;top:-200px;height:1500px;transform-origin:50% 0;transform:rotate(var(--a));background:linear-gradient(to bottom,rgba(255,176,118,.58),rgba(226,104,32,.13) 55%,rgba(194,70,12,0) 85%);-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.4) 24%,#000 50%,rgba(0,0,0,.4) 76%,transparent);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.4) 24%,#000 50%,rgba(0,0,0,.4) 76%,transparent);will-change:transform,opacity;animation:sway 10s ease-in-out infinite;opacity:calc(var(--o,1) * .7)}
.b1{left:-50px;width:290px;--a:-30deg;--o:1}
.b2{left:40px;width:150px;--a:-42deg;--o:.75;animation-delay:-3s}
.b3{left:-20px;width:250px;--a:-54deg;--o:1;animation-delay:-5s}
.b4{left:60px;width:124px;--a:-66deg;--o:.6;animation-delay:-7s}
.green .core{background:radial-gradient(closest-side,rgba(110,240,70,.9),rgba(38,175,34,.56) 50%,rgba(14,64,12,.22) 78%,rgba(38,175,34,0))}
.green .beam{background:linear-gradient(to bottom,rgba(180,250,150,.5),rgba(60,190,50,.13) 55%,rgba(38,175,34,0) 85%)}
.cool .core{background:radial-gradient(closest-side,rgba(90,184,255,.9),rgba(27,95,168,.58) 50%,rgba(10,36,66,.24) 78%,rgba(27,95,168,0))}
.cool .beam{background:linear-gradient(to bottom,rgba(170,215,255,.5),rgba(50,130,210,.13) 55%,rgba(27,95,168,0) 85%)}
/* only the active tone is visible and animating */
.t-green,.t-cool,[data-tone="green"] .t-warm,[data-tone="cool"] .t-warm{opacity:0}
[data-tone="green"] .t-green,[data-tone="cool"] .t-cool{opacity:1}
.t-green *,.t-cool *,[data-tone="green"] .t-warm *,[data-tone="cool"] .t-warm *{animation-play-state:paused}
[data-tone="green"] .t-green *,[data-tone="cool"] .t-cool *{animation-play-state:running}
@keyframes sway{0%,100%{transform:rotate(var(--a));opacity:calc(var(--o,1) * .5)}50%{transform:rotate(calc(var(--a) + 2deg));opacity:var(--o,1)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.84}50%{transform:scale(1.04);opacity:1}}

/* phone mockup */
.phone{position:relative;container-type:inline-size;width:var(--pw,300px);flex:none}
.pbody{position:relative;padding:3.4cqw;border-radius:16.2cqw;background:linear-gradient(150deg,#45464b 0%,#1d1e20 22%,#0d0e0f 55%,#1a1b1d 80%,#3a3b3f 100%);box-shadow:inset 0 0 0 .5cqw rgba(255,255,255,.05),inset 0 .4cqw .2cqw rgba(255,255,255,.14),0 6cqw 12cqw -4cqw rgba(0,0,0,.85),0 2cqw 4cqw rgba(0,0,0,.4)}
.pbody::before{content:"";position:absolute;right:-.9cqw;top:27%;width:1.2cqw;height:13%;border-radius:0 1cqw 1cqw 0;background:linear-gradient(90deg,#1f2022,#4a4b50)}
.pbody::after{content:"";position:absolute;left:-.9cqw;top:17%;width:1.2cqw;height:5.5%;border-radius:1cqw 0 0 1cqw;background:linear-gradient(270deg,#1f2022,#4a4b50);box-shadow:0 17cqw 0 0 #333438,0 33cqw 0 0 #333438}
.screen{position:relative;overflow:hidden;border-radius:12.8cqw;aspect-ratio:1206/2622;background:#000;box-shadow:0 0 0 .8cqw #000;isolation:isolate}
.screen .m{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .55s var(--ease),transform .9s var(--ease)}
.screen .m.is-on{opacity:1;transform:none}
.screen .m.is-past{transform:scale(.97) translateY(-2%)}
.screen .still{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover}

/* hero */
.hero{position:relative;padding-top:clamp(44px,4.6vw,72px);--hp:0;--mx:0;--my:0}
.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px}
.hero .lead{text-align:center;max-width:38em}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:6px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--text);background:rgba(255,255,255,.09);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green);animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
.ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.rise{animation:rise 1s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.stage{position:relative;z-index:1;margin-top:clamp(44px,4vw,60px);--cw:clamp(236px,25vw,350px);--sw:clamp(188px,20vw,288px);height:calc(var(--cw) * 1.66);perspective:1800px;-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.hp{position:absolute;left:50%;top:0;will-change:transform}
.hp-c{width:var(--cw);margin-left:calc(var(--cw) / -2);z-index:3;transform:translate3d(0,calc(var(--hp) * -110px),0)}
.hp-l{width:var(--sw);margin-left:calc(var(--sw) / -2);z-index:2;transform:translate3d(calc(var(--cw) * -.8 - var(--hp) * 90px),calc(var(--cw) * .2 - var(--hp) * 40px),0) rotate(calc(-8deg + var(--hp) * 5deg))}
.hp-r{width:var(--sw);margin-left:calc(var(--sw) / -2);z-index:2;transform:translate3d(calc(var(--cw) * .8 + var(--hp) * 90px),calc(var(--cw) * .2 - var(--hp) * 40px),0) rotate(calc(8deg - var(--hp) * 5deg))}
.tilt{transform:perspective(1400px) rotateY(calc(var(--mx) * 7deg)) rotateX(calc(var(--my) * -5deg));transition:transform .9s var(--ease)}
.hp-l .tilt,.hp-r .tilt{transform:perspective(1400px) rotateY(calc(var(--mx) * 10deg)) rotateX(calc(var(--my) * -6deg))}
.hp .phone{width:100%;animation:phoneIn 1.4s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes phoneIn{from{opacity:0;transform:translateY(90px) scale(.96)}}
.hp-l .screen::after,.hp-r .screen::after{content:"";position:absolute;inset:0;background:rgba(8,9,10,.22);z-index:5;pointer-events:none}
.long{position:absolute;left:0;top:0;width:100%;height:auto;animation:homeScroll 22s infinite;will-change:transform}
@keyframes homeScroll{
0%,9%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.55,0,.12,1)}
21%,33%{transform:translate3d(0,-20.5%,0);animation-timing-function:cubic-bezier(.55,0,.12,1)}
45%,57%{transform:translate3d(0,-41%,0);animation-timing-function:cubic-bezier(.55,0,.12,1)}
69%,84%{transform:translate3d(0,-62.72%,0);animation-timing-function:cubic-bezier(.6,0,.2,1)}
95%,100%{transform:translate3d(0,0,0)}}
.isl{position:absolute;left:34.41%;top:1.6%;width:31.18%;height:4.2%;border-radius:999px;background:#000;z-index:4}
.topfade{position:absolute;left:0;right:0;top:0;height:12%;background:linear-gradient(#08090A 0,rgba(8,9,10,.94) 48%,rgba(8,9,10,0));z-index:3;opacity:0;animation:topfade 22s infinite}
@keyframes topfade{0%,9%{opacity:0}11%,94.5%{opacity:1}96%,100%{opacity:0}}
/* While the home screen scrolls, the status bar stays put like on a real iPhone (the screenshot's own one scrolls away). */
.sbar{position:absolute;left:0;right:0;top:0;height:7.15%;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 9.3% 0 12.8%;color:#fff;font:600 3.75cqw/1 -apple-system,'SF Pro Text',system-ui,sans-serif;letter-spacing:-.01em;opacity:0;animation:sbar 22s infinite;pointer-events:none}
.sbar-icons{display:flex;align-items:center;gap:1.5cqw}
.sbar-icons svg{height:2.95cqw;width:auto}
.sbar-icons svg:last-child{height:3.25cqw}
@keyframes sbar{0%,9%{opacity:0}10.2%,94.8%{opacity:1}96%,100%{opacity:0}}
.tabov{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:3;-webkit-mask-image:linear-gradient(transparent,#000 42%);mask-image:linear-gradient(transparent,#000 42%)}

/* clubs band */
.band{position:relative;padding:clamp(24px,4vw,56px) 0 clamp(64px,8vw,120px)}
.band-head{display:flex;align-items:flex-end;gap:clamp(18px,2.4vw,32px);flex-wrap:wrap}
.band-num{font-size:clamp(104px,13vw,196px);line-height:.78;color:var(--accent)}
.band-text{font-size:clamp(21px,2.1vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.02em;max-width:17em;padding-bottom:.25em}
.band-text span{color:var(--text2)}
.marquee{margin-top:clamp(36px,4vw,56px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq{display:flex;width:max-content;animation:mq 70s linear infinite;will-change:transform}
.mq ul{display:flex}
.mq li{display:flex;align-items:center;gap:30px;padding-right:30px;font-size:clamp(28px,3.4vw,50px);font-weight:600;letter-spacing:-.03em;white-space:nowrap;color:rgba(242,244,241,.9)}
.mq li .doto{color:var(--accentText);font-size:1.02em;letter-spacing:.02em}
.mq li::after{content:"";width:.22em;height:.22em;border-radius:2px;background:var(--accent);opacity:.9}
@keyframes mq{to{transform:translate3d(-50%,0,0)}}

/* sections */
.sec{position:relative;padding:clamp(96px,10vw,160px) 0}
.sec > .wrap{position:relative;z-index:1}
.two{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(40px,6vw,104px);align-items:center}
.phone-col{display:flex;justify-content:center}

/* pass demo */
.demo{display:flex;align-items:center;gap:28px;width:100%;margin-top:6px;padding:24px;border-radius:28px;background:rgba(20,21,22,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.ring{--rs:196px;position:relative;width:var(--rs);height:var(--rs);flex:none}
.tk{position:absolute;left:calc(50% - 1.5px);top:0;width:3px;height:9%;border-radius:2px;background:#2E2F33;transform-origin:50% calc(var(--rs) / 2);transition:background-color .4s var(--ease)}
.tk.on{background:var(--accent);box-shadow:0 0 8px rgba(255,119,0,.45)}
.tk.ok{background:#6EF046;box-shadow:0 0 8px rgba(110,240,70,.5)}
.ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.ring-c .doto{font-size:calc(var(--rs) * .27);line-height:1}
.ring-c small{font-size:12px;color:var(--text3)}
.okmark{width:calc(var(--rs) * .44);height:calc(var(--rs) * .44);border-radius:50%;background:#3BE37F;color:#07140A;display:grid;place-items:center;box-shadow:0 0 50px rgba(110,240,70,.55);animation:pop .7s cubic-bezier(.3,1.6,.4,1) both}
.okmark svg{width:46%;height:46%}
@keyframes pop{from{transform:scale(.35);opacity:0}}
.demo-side{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
.demo-status{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.demo-sub{font-size:14px;color:var(--text2);margin-top:-8px}
.rows{display:flex;flex-direction:column;gap:2px;border-radius:22px;overflow:hidden;width:100%}
.row{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 18px;background:var(--surface);font-size:15.5px;line-height:1.35}
.row .ic{width:38px;height:38px;border-radius:12px;background:var(--surface3);display:grid;place-items:center;color:var(--accentText);flex:none}
.row .ic svg{width:20px;height:20px}
.row b{margin-left:auto;padding-left:12px;font-weight:600;color:var(--accentText);white-space:nowrap}
.row .tx{color:var(--text2)}
.pass-phone .phone{--pw:clamp(262px,26vw,340px)}

/* day */
.day-head{display:flex;flex-direction:column;gap:20px;max-width:900px}
.day-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);margin-top:clamp(24px,4vw,56px)}
.steps{display:flex;flex-direction:column}
.step{min-height:660px;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:.26;transition:opacity .6s var(--ease)}
.step.is-on{opacity:1}
.step-time{font-size:clamp(64px,6.6vw,104px);line-height:.86;color:var(--accent)}
.step .sp{color:var(--text2);max-width:29em;font-size:18px;line-height:1.55}
.step-media{display:none}
.day-dots{display:none}
.mnav-wrap{display:none}
.stage-col{position:relative}
.sticky{position:sticky;top:96px;display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px)}
.sticky .phone{--pw:clamp(264px,22vw,302px)}
.rail{position:relative;display:flex;flex-direction:column;align-items:center}
.rail::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:1.5px;margin-left:-.75px;background:rgba(242,244,241,.2)}
.rail button{position:relative;z-index:1;min-width:60px;min-height:30px;margin:12px 0;padding:0 10px;border:0;border-radius:999px;background:var(--bg);color:var(--text3);font-size:14px;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease)}
.rail button.is-on{background:var(--text);color:#0B0C0D}
/* scanner frame sits exactly on the machine photo card of the screenshot (16–40% of the screen height) */
.scan{position:absolute;left:3.9%;right:4.1%;top:16%;height:24.1%;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.scan.is-on{opacity:1}
.scan i{position:absolute;width:13%;height:auto;aspect-ratio:1;border:.95cqw solid var(--accent);filter:drop-shadow(0 0 6px rgba(255,119,0,.7))}
.scan i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:5.4cqw 0 0 0}
.scan i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 5.4cqw 0 0}
.scan i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 5.4cqw}
.scan i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 5.4cqw 0}
.scan-line{position:absolute;left:4%;right:4%;top:0;height:100%;animation:scanline 1.9s ease-in-out infinite alternate}
.scan-line::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,rgba(255,119,0,0),#FF9A3D,rgba(255,119,0,0));box-shadow:0 0 16px 3px rgba(255,119,0,.55)}
@keyframes scanline{from{transform:translateY(0)}to{transform:translateY(100%)}}

/* progress */
.prog-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.cards{display:flex;flex-direction:column;gap:12px}
.card{position:relative;border-radius:28px;background:var(--surface);padding:26px 26px 24px;overflow:hidden}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px;font-weight:600}
.card-top .eyebrow{letter-spacing:.1em}
.card-top .ct{color:var(--text3);font-weight:500;font-size:14px}
.xp{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:14px}
.xp .odo{font-size:clamp(82px,8.6vw,128px)}
.xp .of{font-size:clamp(22px,2.3vw,32px);color:var(--text3)}
.bar{position:relative;height:14px;border-radius:999px;margin-top:18px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 1.5px,rgba(255,255,255,0) 1.5px 6px),var(--hatch)}
.bar i{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,#FF3D1F,#FF7700 50%,#FFC83D);transform-origin:0 50%;transform:scaleX(.73);transition:transform 1.8s var(--ease) .25s}
[data-anim] [data-xp="0"] .bar i{transform:scaleX(0)}
.card-note{margin-top:14px;font-size:15px;color:var(--text2)}
.card-note b{color:var(--text);font-weight:600}
.streak-head{display:flex;align-items:center;gap:14px}
.streak-head .doto{font-size:64px;line-height:.9;color:var(--accent)}
.streak-head div{display:flex;flex-direction:column;gap:2px}
.streak-head strong{font-size:20px;font-weight:600;letter-spacing:-.01em}
.streak-head span{font-size:14px;color:var(--text2)}
.weeks{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:20px}
.wk{display:flex;flex-direction:column;align-items:center;gap:6px}
.dt{width:100%;max-width:22px;aspect-ratio:1;border-radius:50%;background:var(--muted)}
.dt.on{background:var(--accent)}
.dt.cur{background:transparent;box-shadow:inset 0 0 0 2px rgba(242,244,241,.85)}
[data-anim] [data-xp="0"] .dt.on{opacity:0;transform:scale(.4)}
[data-anim] [data-xp="1"] .dt.on{animation:pop .55s cubic-bezier(.3,1.6,.4,1) both}
.weeks-cap{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--text3)}
.duo{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-bottom:40px}
.duo .phone{--pw:clamp(232px,21vw,296px)}
.duo .phone.back{margin-left:-15%;margin-top:16%;z-index:0}
.duo .phone.back .screen::after{content:"";position:absolute;inset:0;background:rgba(8,9,10,.2);z-index:5}
.duo .phone.front{z-index:1}

/* membership */
.calc{display:flex;flex-direction:column;gap:18px;width:100%;padding:22px;border-radius:28px;background:rgba(20,21,22,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.calc-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;font-size:14px;color:var(--text2)}
.calc-top strong{color:var(--text);font-weight:600}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:18px;background:var(--surface2)}
.seg button{min-height:48px;border:0;border-radius:14px;background:transparent;color:var(--text2);font-weight:600;font-size:16px;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease)}
.seg button:hover{color:var(--text)}
.seg button.is-on{background:var(--text);color:#0B0C0D}
.fz{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:3px;height:38px}
.fz i{border-radius:4px;background:var(--cool);transition:background-color .45s var(--ease);transition-delay:var(--dl,0ms)}
.fz i.w{background:var(--accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--text2);margin-top:-6px}
.legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.legend span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cool)}
.legend span.w::before{background:var(--accent)}
.res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border-radius:20px;overflow:hidden}
.res > div{display:flex;flex-direction:column;gap:6px;padding:16px 18px;background:var(--surface)}
.res .wide{grid-column:1 / -1}
.res small{font-size:13px;color:var(--text3)}
.res .v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:16px;color:var(--text2)}
.res .v .doto{font-size:46px;line-height:1;color:var(--text)}
.res .v .odo{font-size:46px;color:var(--text)}
.res .v.cool .doto{color:var(--cool)}
.calc-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.calc-act span{font-size:14px;color:var(--text2)}
.mem-phone .phone{--pw:clamp(262px,26vw,340px)}
.guest{margin-top:clamp(110px,11vw,170px)}
.guest .phone{--pw:clamp(240px,23vw,310px)}
.gcount{display:flex;align-items:baseline;gap:12px}
.gcount .odo{font-size:clamp(84px,8vw,112px);color:var(--accent)}
.gcount .gl{font-size:22px;color:var(--text2)}
.gsegs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%;max-width:380px;margin-top:-6px}
.gsegs i{height:46px;border-radius:12px;display:grid;place-items:center;color:rgba(242,244,241,.42);background:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 1.5px,rgba(255,255,255,0) 1.5px 6px),var(--hatch);transition:background-color .45s var(--ease),color .45s var(--ease)}
.gsegs i.on{background:var(--accent);color:var(--onAccent)}
.gsegs svg{width:20px;height:20px}
.gnote{font-size:15px;color:var(--text2);min-height:1.5em}

/* tabs */
.tabs-sec .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.tabs-sec .lead{text-align:center}
.tabs-phone{margin-top:clamp(20px,3vw,40px)}
.tabs-phone .phone{--pw:clamp(250px,24vw,318px)}
.tabbar{display:flex;align-items:center;gap:10px;margin-top:10px}
.tb-cap{display:flex;gap:2px;padding:6px;border-radius:999px;background:rgba(40,41,44,.62);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.04)}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:78px;height:60px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--text);font-size:11.5px;font-weight:600;cursor:pointer;transition:background-color .4s var(--ease),color .4s var(--ease)}
.tb svg{width:24px;height:24px}
.tb.is-on{background:rgba(255,255,255,.13);color:var(--accent)}
.tb-qr{width:72px;height:72px;min-width:0;padding:0;border-radius:50%;background:rgba(40,41,44,.62);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.04)}
.tb-qr.is-on{background:rgba(255,119,0,.18)}
.tdesc{display:grid;max-width:36em;margin-top:6px}
.tdesc p{grid-area:1 / 1;font-size:18px;line-height:1.55;color:var(--text2);opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .7s var(--ease);pointer-events:none}
.tdesc p.is-on{opacity:1;transform:none;pointer-events:auto}
.tdesc p strong{color:var(--text);font-weight:600}

/* download */
.olist{display:flex;flex-direction:column;gap:2px;border-radius:22px;overflow:hidden;width:100%}
.olist li{display:flex;align-items:center;gap:18px;min-height:64px;padding:12px 20px;background:var(--surface);font-size:16.5px}
.olist .doto{font-size:30px;line-height:1;width:26px;text-align:center;color:var(--accent)}
.store{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.btn[aria-disabled="true"]{cursor:default}
.dl-phone .phone{--pw:clamp(250px,24vw,320px)}
.foot{position:relative;padding:48px 0 64px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.foot p{font-size:14px;color:var(--text3);max-width:44em}

/* odometer */
.odo{display:inline-flex;line-height:1;vertical-align:baseline}
.odo-c{display:inline-block;height:1.08em;overflow:hidden}
.odo-s{display:flex;flex-direction:column;transition:transform 1.6s var(--ease);will-change:transform}
.odo-s span{display:block;height:1.08em;line-height:1.08em}

/* reveal on scroll */
[data-anim] [data-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
[data-anim] [data-reveal][data-in]{opacity:1;transform:none}

@media (max-width:900px){
.two,.prog-grid,.day-grid{grid-template-columns:minmax(0,1fr)}
.stage-col{display:none}
/* «Один день» — swipeable cards instead of five stacked phones */
.day-grid{margin-top:28px}
.steps{--cw:min(86vw,440px);flex-direction:row;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 -32px;padding:2px max(16px,calc((100vw - var(--cw)) / 2)) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.steps::-webkit-scrollbar{display:none}
.step{flex:0 0 var(--cw);min-height:0;opacity:1;justify-content:flex-start;gap:10px;padding:24px 22px 22px;border-radius:28px;background:var(--surface);scroll-snap-align:center}
.step-time{font-size:56px}
.step .sp{font-size:16px}
.step-media{display:flex;justify-content:center;margin-top:auto;padding-top:16px}
.step-media .phone{--pw:min(220px,54vw)}
.day-dots{display:flex;justify-content:center;gap:2px;margin-top:14px}
.day-dots button{display:grid;place-items:center;width:44px;height:32px;padding:0;border:0;background:transparent;cursor:pointer}
.day-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:rgba(242,244,241,.28);transition:width .35s var(--ease),background-color .35s var(--ease)}
.day-dots button.is-on::before{width:26px;background:var(--accent)}
.nav-links{display:none}
.guest .phone-col{order:2}
/* floating tab bar like the app's — sticks to the bottom of the screen for the whole page */
.mnav-wrap{display:block;position:sticky;bottom:0;height:0;z-index:70}
.mnav{position:absolute;left:50%;bottom:calc(12px + env(safe-area-inset-bottom, 0px));display:flex;align-items:center;gap:8px;transform:translate3d(-50%,140%,0);opacity:0;pointer-events:none;transition:transform .55s var(--ease),opacity .4s var(--ease)}
.mnav.is-on{transform:translate3d(-50%,0,0);opacity:1;pointer-events:auto}
.mnav-cap{display:flex;gap:2px;padding:5px;border-radius:999px;background:rgba(30,31,33,.78);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.5)}
.mnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;height:52px;padding:0 6px;border-radius:999px;color:var(--text);font-size:10.5px;font-weight:600;line-height:1;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:background-color .35s var(--ease),color .35s var(--ease)}
.mnav a:hover{color:var(--text)}
.mnav a svg{width:21px;height:21px}
.mnav a.is-on{background:rgba(255,255,255,.13);color:var(--accentText)}
.mnav .mnav-dl{width:62px;min-width:0;height:62px;padding:0;background:var(--accent);color:var(--onAccent);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.mnav .mnav-dl:hover{color:var(--onAccent)}
.mnav .mnav-dl svg{width:24px;height:24px}
.foot{padding-bottom:110px}
}
@media (max-width:640px){
.wrap{padding:0 16px}
.sec{padding:76px 0}
.band{padding:8px 0 44px}
.hero{padding-top:28px}
.hero-copy{gap:18px}
.stage{margin-top:32px}
.lead{font-size:16px}
.h2{font-size:clamp(32px,9vw,40px)}
.copy{gap:18px}
.guest{margin-top:80px}
.prog-grid{margin-top:32px}
.mem-phone .phone,.pass-phone .phone,.guest .phone,.dl-phone .phone,.tabs-phone .phone{--pw:min(250px,64vw)}
.steps{margin:0 -16px}
.step{padding:22px 18px 18px}
.row{min-height:58px;padding:10px 14px;font-size:15px}
.olist li{min-height:58px;padding:10px 16px;font-size:15.5px}
.stage{--cw:min(232px,60vw);--sw:min(184px,46vw)}
.hp-l{transform:translate3d(calc(var(--cw) * -.74 - var(--hp) * 40px),calc(var(--cw) * .24),0) rotate(-8deg)}
.hp-r{transform:translate3d(calc(var(--cw) * .74 + var(--hp) * 40px),calc(var(--cw) * .24),0) rotate(8deg)}
.demo{flex-direction:column;align-items:stretch;padding:20px}
.demo-side{align-items:center;text-align:center}
.ring{--rs:176px;margin:0 auto}
.tb{min-width:58px;height:56px;padding:0 4px;font-size:10.5px}
.tb svg{width:22px;height:22px}
.tb-qr{width:60px;height:60px}
.tabbar{gap:6px}
.tb-cap{padding:4px}
.res .v .doto,.res .v .odo{font-size:38px}
.weeks{gap:4px}
.wk{gap:4px}
.btn{min-height:52px;padding:0 22px;font-size:16px}
.ctas .btn{flex:1 1 auto}
.duo .phone{--pw:min(200px,53vw)}
.duo .phone.back{margin-left:-30%}
.chip{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
.ug *,.ug *::before,.ug *::after{animation-duration:.001ms !important;animation-delay:0ms !important;animation-iteration-count:1 !important;transition-duration:.2s !important;transition-delay:0ms !important}
}
.ug[data-reduce] *,.ug[data-reduce] *::before,.ug[data-reduce] *::after{animation:none !important}
.ug[data-reduce] .topfade{opacity:0}

/* conditional blocks (pass ring states) */
.ifw{display:contents}
.ifw[hidden]{display:none}