/* ---------- webfont ---------- */
@font-face{font-family:"DM Sans"; src:url("/fonts/dm-sans-variable.woff2") format("woff2-variations"); font-weight:100 1000; font-style:normal; font-display:swap; unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.14; text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px; top:0; background:var(--bg-2); color:var(--text); padding:10px 16px; border:1px solid var(--line); border-radius:8px; z-index:99}
.skip:focus{left:12px; top:12px}
.wrap{width:100%; max-width:1104px; margin:0 auto; padding:0 24px}
section{scroll-margin-top:80px}
/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:40; background:var(--bg); background:color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent; transition:border-color .2s ease; }
@supports not (backdrop-filter:blur(1px)){.site-head{background:var(--bg)}}
.site-head.is-stuck{border-bottom-color:var(--line)}
.head-in{display:flex; align-items:center; gap:22px; height:60px}
.brand{display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-weight:600; letter-spacing:-.017em; font-size:16.5px}
.brand .mark{width:23px; height:23px; border-radius:6px; flex:none}
.head-nav{display:flex; align-items:center; gap:24px; margin-left:auto; font-size:14.5px; color:var(--text-2)}
.head-nav a{text-decoration:none}
.head-nav a:hover{color:var(--text)}
/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:15px; font-weight:550; letter-spacing:-.01em; padding:10px 17px; border-radius:10px; text-decoration:none; border:1px solid transparent; transition:background-color .15s ease, border-color .15s ease, color .15s ease; white-space:nowrap; }
.btn .ico{width:16px; height:16px; flex:none}
/* ---------- hero ---------- */
.hero{padding:84px 0 8px; position:relative}
.hero::before{content:""; position:absolute; inset:-140px 0 auto; height:620px; z-index:-1; background:radial-gradient(60% 52% at 50% 0%, var(--accent-soft), transparent 70%); pointer-events:none; }
.hero h1{font-size:clamp(2.1rem,6.1vw,3.65rem); letter-spacing:-.033em; max-width:16ch}
.hero .lede{margin-top:22px; font-size:clamp(1.05rem,2.4vw,1.24rem); color:var(--text-2); max-width:56ch; line-height:1.55}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.cta-note{margin-top:16px; font-size:13.5px; color:var(--text-3); max-width:52ch; line-height:1.55}
.plat-row{list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin:18px 0 0; padding:0}
.plat{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-2); background:var(--bg-2); border:1px solid var(--line); border-radius:999px; padding:6px 13px; white-space:nowrap}
.plat svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; opacity:.85}
.plat b{font-weight:600; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); margin-left:1px}
/* ---------- product proof ---------- */
.product-proof{margin-top:52px; padding-bottom:52px}
.proof-stage{display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,23vw,286px); align-items:end; }
.proof-view{margin:0; min-width:0}
.proof-view--desktop{grid-area:1 / 1 / 2 / 3; padding-right:clamp(188px,19vw,224px); }
.proof-view--telegram{grid-area:1 / 2 / 2 / 3; position:relative; z-index:2; transform:translateY(48px); }
.proof-media{overflow:hidden; background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--shadow-l); }
.proof-caption{margin-top:10px; color:var(--text-3); font-size:12.5px; line-height:1.5; }
.proof-label{display:block}
.lights{display:flex; gap:7px}
.lights i{width:11px; height:11px; border-radius:50%; display:block}
.lights i:nth-child(1){background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.chip{font-size:10.5px; font-weight:550; color:var(--text-2); background:var(--bg-2); border:1px solid var(--line); padding:2px 7px; border-radius:5px; white-space:nowrap}
/* ---------- charts ---------- */
.chart text{font-family:var(--sans); font-size:11px; fill:var(--text-3); letter-spacing:.005em}
.chart .lbl{font-size:11.5px; font-weight:550}
.s-fit{stroke:var(--fitness)} .s-fat{stroke:var(--fatigue)} .s-form{stroke:var(--form)}
.chart .t-fit{fill:var(--fitness)} .chart .t-fat{fill:var(--fatigue)} .chart .t-form{fill:var(--form)}
.b-fit{background:var(--fitness)} .b-fat{background:var(--fatigue)} .b-form{background:var(--form)}
.zero{stroke:var(--line-2); stroke-dasharray:3 4}
.dot{fill:var(--bg-2)}
/* ---------- generic section ---------- */
.sec-hd{max-width:62ch}
.sec h2{font-size:clamp(1.6rem,3.6vw,2.15rem); letter-spacing:-.028em}
.sec .sub{margin-top:16px; color:var(--text-2); font-size:1.05rem; max-width:60ch}
.rule{height:1px; background:var(--line); border:0; margin:0}
/* ---------- feature rows ---------- */
.feat{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:56px; align-items:center; padding:72px 0}
.feat + .feat{border-top:1px solid var(--line)}
.feat h3{font-size:clamp(1.35rem,2.9vw,1.72rem); letter-spacing:-.028em}
.feat p{margin-top:14px; color:var(--text-2); font-size:1.02rem}
.feat .n{font-size:12.5px; font-weight:600; color:var(--text-3); font-variant-numeric:tabular-nums; margin-bottom:12px; letter-spacing:.04em}
.ticks{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; color:var(--text-2)}
.ticks li{display:flex; gap:10px; line-height:1.5}
.ticks svg{width:15px; height:15px; flex:none; margin-top:4px; color:var(--accent)}
.figure{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-s); padding:18px 18px 14px; overflow:hidden}
.figure-hd{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.figure-hd h4{font-size:13px; letter-spacing:-.01em}
.figure-hd .meta{font-size:12px; color:var(--text-3); margin-left:auto}
.fig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.fig-scroll > svg{min-width:520px; display:block}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.chips .chip{font-size:12px; padding:4px 9px; background:var(--bg-3)}
.axis-row{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-3); margin-top:6px}
/* ---------- privacy ---------- */
.privacy{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.pgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:44px}
.pcell{background:var(--bg-2); padding:24px 22px}
.pcell h3{font-size:15px; letter-spacing:-.014em; display:flex; align-items:center; gap:9px}
.pcell h3 svg{width:16px; height:16px; color:var(--accent); flex:none}
.pcell p{margin-top:10px; font-size:14.5px; color:var(--text-2); line-height:1.6}
.pcell code{font-family:var(--mono); font-size:12.5px; background:var(--bg-3); padding:1px 4px; border-radius:4px; color:var(--text-2)}
.pnote{margin-top:26px; font-size:14.5px; color:var(--text-2)}
.pnote a{color:var(--accent-text); text-decoration-thickness:1px; text-underline-offset:3px}
/* ---------- providers ---------- */
.prov-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.prov{font-size:14px; color:var(--text-2); background:var(--bg-2); border:1px solid var(--line); border-radius:9px; padding:7px 13px; box-shadow:var(--shadow-s)}
.prov b{color:var(--text); font-weight:550}
/* ---------- pricing ---------- */
.price-card{margin-top:44px; border:1px solid var(--line); border-radius:18px; background:var(--bg-2); box-shadow:var(--shadow-s); padding:44px 40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:44px; align-items:center; }
.price-big{font-size:clamp(3rem,9vw,4.4rem); font-weight:600; letter-spacing:-.045em; line-height:1}
.price-sub{margin-top:12px; color:var(--text-2); font-size:15px}
.price-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.price-list li{display:flex; gap:12px; font-size:15px; color:var(--text-2); line-height:1.55}
.price-list svg{width:16px; height:16px; color:var(--accent); flex:none; margin-top:5px}
.price-list b{color:var(--text); font-weight:550}
/* ---------- npm block ---------- */
/* ---------- final cta ---------- */
.final{border-top:1px solid var(--line); background:var(--bg-2)}
.final .inner{padding:88px 0; text-align:center}
.final h2{font-size:clamp(1.7rem,4vw,2.4rem); letter-spacing:-.03em}
.final p{margin:16px auto 0; color:var(--text-2); max-width:50ch}
.final .cta-row{justify-content:center}
.final .cta-note{margin-left:auto; margin-right:auto; text-align:center}
/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:56px 0 44px; font-size:14px; color:var(--text-2)}
.foot-grid{display:grid; grid-template-columns:minmax(190px,1.2fr) repeat(4,minmax(0,1fr)); gap:28px}
.foot-brand p{margin-top:12px; font-size:13.5px; color:var(--text-3); max-width:34ch; line-height:1.6}
.foot-col h4{font-size:12.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); margin-bottom:12px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.foot-col a{text-decoration:none; color:var(--text-2)}
.foot-col a:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.foot-base{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 28px; font-size:12.5px; color:var(--text-3)}
.foot-base p{max-width:64ch; line-height:1.6}
/* ---------- responsive (base layer) ---------- */
@media (max-width:1000px){.feat{gap:40px}
.price-card{padding:36px 28px; gap:32px}
}
@media (max-width:860px){body{font-size:16.5px}
.hero{padding:64px 0 0}
.product-proof{margin-top:44px; padding-bottom:18px}
.proof-stage{display:flex; flex-direction:column; gap:30px}
.proof-view--desktop{padding-right:0}
.proof-view--telegram{width:min(360px,74vw); margin-left:auto; transform:none}
.feat{grid-template-columns:minmax(0,1fr); gap:30px; padding:56px 0}
.feat .figure{order:2}
.pgrid{grid-template-columns:minmax(0,1fr)}
.price-card{grid-template-columns:minmax(0,1fr); gap:30px}
.foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px}
}
@media (max-width:700px){.head-nav .hide-sm{display:none}
}
@media (max-width:640px){.wrap{padding:0 18px}
.proof-media--desktop{aspect-ratio:4 / 5}
.figure{padding:14px 14px 12px}
.fig-scroll > svg{min-width:460px}
.final .inner{padding:64px 0}
}
@media (max-width:420px){.foot-grid{grid-template-columns:minmax(0,1fr)}
.btn{width:100%}
.cta-row{gap:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
/* ============================================================ Control Plane skin. Overrides the base layer above. ============================================================ */
:root{color-scheme:dark; --bg:#09090b; --bg-2:#0c0c0e; --bg-3:#111113; --bg-4:#18181b; --text:#fafafa; --text-2:#a1a1aa; --text-3:#8a8a93; --line:#ffffff14; --line-2:#ffffff24; --accent:oklch(.68 .17 250); --accent-text:oklch(.76 .13 250); --accent-btn:#fafafa; --accent-btn-h:#e4e4e7; --accent-soft:oklch(.68 .17 250 / .15); --accent-line:oklch(.68 .17 250 / .32); --btn-fg:#09090b; --fitness:oklch(.68 .17 250); --fatigue:#cf7a44; --form:#8b8b95; --shadow-s:0 1px 2px rgba(0,0,0,.42); --shadow-l:0 1px 1px rgba(0,0,0,.35),0 24px 64px -28px rgba(0,0,0,.85); --radius:12px; --sans:"DM Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace; --cp-fg-faint:#7a7a83; --cp-wash:#ffffff05; --cp-wash-2:#ffffff08; --cp-tile-top:#ffffff04; --cp-grid:#ffffff12; }
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font-feature-settings:"ss01","ss02"; font-size:17px; line-height:1.62; }
body::after{content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:256px 256px; }
h1,h2,h3,h4{font-weight:500; letter-spacing:-.035em}
.wrap{max-width:1240px; padding-inline:32px}
.narrow{max-width:800px}
.skip{background:var(--bg-3); border-color:var(--line-2)}
::selection{background:var(--accent-soft); color:var(--text)}
/* chrome */
.site-head{background:color-mix(in srgb,var(--bg) 75%,transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.head-in{height:60px; gap:24px}
.brand{gap:9px; font-size:16px; font-weight:600; letter-spacing:-.025em}
.brand .mark{width:22px; height:22px; filter:none}
.head-nav{gap:22px; color:var(--text-2); font-size:14px}
.head-nav a:not(.btn){transition:color .18s}
/* controls */
.btn{padding:10px 18px; border-radius:8px; font-size:14px; font-weight:500; transition:transform .18s,background .18s,border-color .18s,color .18s,filter .18s; box-shadow:none; }
.btn-primary{background:var(--text); color:var(--btn-fg); font-weight:600}
.btn-primary:hover{background:var(--text); filter:brightness(1.08); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent; color:var(--text-2); border-color:var(--line)}
.btn-ghost:hover{background:var(--cp-wash); border-color:var(--line-2); color:var(--text)}
.btn-lg{padding:14px 22px; border-radius:10px; font-size:15px}
/* signal-field hero */
@keyframes cpDotPulse{0%{-webkit-mask-size:0 0;mask-size:0 0;opacity:0}
8%{-webkit-mask-size:8% 8%;mask-size:8% 8%;opacity:.3}
34%{-webkit-mask-size:58% 58%;mask-size:58% 58%;opacity:.72}
72%{-webkit-mask-size:170% 170%;mask-size:170% 170%;opacity:.35}
100%{-webkit-mask-size:300% 300%;mask-size:300% 300%;opacity:0}
}
.hero{border-top:0; padding:82px 0 68px; overflow:hidden; isolation:isolate}
.hero::before{inset:0; height:auto; z-index:-2; background-image:radial-gradient(circle at 1px 1px,var(--cp-grid) 1.3px,transparent 0); background-size:26px 26px; -webkit-mask-image:radial-gradient(78% 60% at 50% 17%,#000 22%,transparent 100%); mask-image:radial-gradient(78% 60% at 50% 17%,#000 22%,transparent 100%); }
.hero::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--accent) 78%,transparent) 1.7px,transparent 0); background-size:26px 26px; -webkit-mask-image:radial-gradient(circle,transparent 0 30%,#000 42%,#000 52%,transparent 68%); mask-image:radial-gradient(circle,transparent 0 30%,#000 42%,#000 52%,transparent 68%); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:50% 17%; mask-position:50% 17%; animation:cpDotPulse 9s linear infinite; }
.hero > .wrap:first-child{text-align:center; position:relative; z-index:1}
.eyebrow,.kicker,.proof-label{font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-size:11px; font-weight:500; }
.eyebrow{display:inline-block; padding:0; margin-bottom:0; border:0; border-radius:0; background:transparent; }
.hero h1{max-width:20ch; margin:0 auto; font-size:clamp(42px,5.8vw,76px); line-height:1.04; letter-spacing:-.046em; font-weight:500; }
.hero .lede{max-width:650px; margin:24px auto 0; color:var(--text-2); font-size:clamp(16px,1.5vw,19px); line-height:1.55; letter-spacing:-.005em; }
.hero .cta-row{justify-content:center; margin-top:34px}
.hero .cta-note{max-width:620px; margin:17px auto 0; text-align:center; color:var(--text-3)}
.product-proof{margin-top:64px; padding-bottom:50px}
.proof-wrap{max-width:1240px}
.proof-stage{grid-template-columns:minmax(0,1fr) clamp(262px,23vw,320px)}
.proof-view--desktop{padding-right:clamp(198px,19vw,256px)}
.proof-view--telegram{transform:translateY(46px)}
.proof-media{background:#0a0a0c; border-color:var(--line); box-shadow:0 28px 64px -28px #000000bf; }
.proof-media--desktop{border-radius:14px}
.proof-caption{margin-top:13px; color:var(--text-3); font-size:12.5px}
.proof-label{margin-bottom:4px; color:var(--accent); font-size:10px}
/* selectable HTML product screenshots, carried over from Direction 13 */
.cp-shot{container-type:inline-size; aspect-ratio:1490/1000; width:100%; background:#0a0a0c; position:relative; overflow:hidden; }
.cp-app{position:absolute; inset:0; display:flex; background:#0f1520; color:#e6ebf2; font:1.02cqw/1.5 -apple-system,"SF Pro Text",var(--sans); text-align:left; }
.cp-app *{box-sizing:border-box}
.cp-rail{width:17.5em; flex-shrink:0; display:flex; flex-direction:column; padding:.9em .8em; background:#0b101a; border-right:1px solid #24303f; }
.cp-lights{display:flex; gap:.5em; padding:.15em .3em .9em}
.cp-lights i{display:block; width:.85em; height:.85em; border-radius:50%; background:#3a4657}
.cp-lights i:first-child{background:#e0655a}
.cp-lights i:nth-child(2){background:#d9a441}
.cp-lights i:nth-child(3){background:#6fb383}
.cp-app-brand{padding:0 .35em .8em; font-size:1.15em; font-weight:650; letter-spacing:-.02em}
.cp-newbtn{display:flex; align-items:center; gap:.5em; margin-bottom:1.1em; padding:.6em .8em; border-radius:.7em; background:#82aed6; color:#0a1826; font-size:.95em; font-weight:600; }
.cp-nav-list{display:flex; flex-direction:column; gap:.15em; margin-bottom:1.2em}
.cp-nav-list div{display:flex; align-items:center; gap:.7em; padding:.5em .65em; border-radius:.6em; color:#93a0af; font-size:.95em; }
.cp-nav-list div span{width:1.1em; text-align:center; font-size:.9em}
.cp-nav-list div.on{background:#1c2c3f; color:#e6ebf2; font-weight:500}
.cp-sec-label{padding:0 .65em .5em; color:#93a0af; opacity:.75; font-size:.72em; letter-spacing:.1em; text-transform:uppercase; }
.cp-history{display:flex; flex:1; flex-direction:column; gap:.1em; overflow:hidden}
.cp-history div{padding:.45em .65em; overflow:hidden; border-radius:.5em; color:#93a0af; font-size:.88em; white-space:nowrap; text-overflow:ellipsis; }
.cp-history div.on{background:#161e2b; color:#e6ebf2}
.cp-rail-foot{display:flex; flex-direction:column; gap:.45em; padding-top:.7em; border-top:1px solid #24303f}
.cp-status{display:inline-flex; align-items:center; gap:.45em; color:#93a0af; font-size:.78em}
.cp-status-dot{display:block; width:.5em; height:.5em; border-radius:50%; background:#6fb383}
.cp-status-muted{color:#6f7d8e}
.cp-app-main{display:flex; flex:1; min-width:0; flex-direction:column; background:#0f1520}
.cp-app-top{display:flex; flex-shrink:0; align-items:center; justify-content:space-between; height:2.9em; padding:0 1.1em; border-bottom:1px solid #24303f; }
.cp-app-top .cp-app-title{font-size:.95em; font-weight:600; letter-spacing:-.01em; line-height:1.14}
.cp-pill{padding:.2em .7em; border:1px solid #24303f; border-radius:999px; color:#93a0af; font-size:.75em}
.cp-app-body{display:flex; flex:1; flex-direction:column; justify-content:flex-end; gap:.9em; padding:.96em 1.13em; overflow:hidden; font-size:1.15em; }
.cp-msg{max-width:82%; padding:.7em .9em; border-radius:.9em; font-size:.92em; line-height:1.55}
.cp-msg-me{align-self:flex-end; background:#1c2c3f; color:#e6ebf2; border-bottom-right-radius:.3em}
.cp-msg-coach{align-self:flex-start; max-width:92%; background:#161e2b; border:1px solid #24303f; border-bottom-left-radius:.3em; }
.cp-msg-coach p + p{margin-top:.65em}
.cp-msg-coach strong{color:#fff; font-weight:600}
.cp-number{color:#82aed6; font-weight:600}
.cp-workout{margin-top:.8em; overflow:hidden; border:1px solid #24303f; border-radius:.7em; background:#111a26}
.cp-workout-head{display:flex; align-items:center; gap:.5em; padding:.55em .75em; background:#16202e; border-bottom:1px solid #24303f; }
.cp-workout-head b{color:#e6ebf2; font-size:.95em; font-weight:600; letter-spacing:-.01em}
.cp-workout-head > span{margin-left:auto; color:#93a0af; font-size:.8em}
.cp-workout-meta{display:flex; flex-wrap:wrap; gap:.2em .9em; padding:.5em .75em; border-bottom:1px solid #24303f; color:#93a0af; font-size:.8em; }
.cp-workout-steps{display:flex; flex-direction:column; gap:.3em; padding:.5em .75em}
.cp-workout-steps div{display:flex; justify-content:space-between; gap:1em; color:#c3ccd8; font-size:.82em}
.cp-workout-steps div span{color:#82aed6; font-variant-numeric:tabular-nums; white-space:nowrap}
.cp-msg-system{display:flex; align-self:flex-start; align-items:center; gap:.5em; max-width:92%; padding:.5em .75em; border:1px solid #2c4436; border-radius:.6em; background:transparent; color:#6fb383; font-size:.82em; }
.cp-msg-system i{display:grid; flex-shrink:0; place-items:center; width:1.15em; height:1.15em; border-radius:50%; background:#6fb383; color:#0a1826; font-size:.75em; font-style:normal; font-weight:700; }
.cp-composer{display:flex; align-items:center; justify-content:space-between; gap:1em; margin:0 1.3em 1.2em; padding:.7em .9em; border:1px solid #24303f; border-radius:.8em; background:#161e2b; }
.cp-composer > span:first-child{color:#5f6d7d; font-size:1.06em}
.cp-send{display:grid; flex-shrink:0; place-items:center; width:2em; height:2em; border-radius:.5em; background:#82aed6; color:#0a1826; font-size:.85em; }
/* ---------- Telegram iOS dark-theme chat replica (.tg-shot) ---------- */
.tg-shot{--tg-ink:#ffffff; --tg-dim:#8e8e93; --tg-bot:#1e1c26; --tg-link:#6ab3f3; --tg-rose:#e08fa9; --tg-pin:#7eb2f7; --tg-blue:#3478f6; --tg-face:#0d0b12; --tg-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",system-ui,sans-serif; display:block; width:100%; font-family:var(--tg-sans); line-height:1.4; letter-spacing:normal; font-style:normal; text-align:left; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.tg-shot *{box-sizing:border-box}
.tg-shot .tg-shot__phone{position:relative; box-sizing:border-box; width:100%; max-width:360px; margin:0 auto; display:flex; flex-direction:column; border-radius:44px; border:1px solid #1c1926; background:var(--tg-face); overflow:hidden; color:var(--tg-ink); box-shadow:0 34px 74px -34px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.028); }
.tg-shot .tg-shot__wall{position:absolute; inset:0; pointer-events:none; background: radial-gradient(88% 52% at 14% 6%, rgba(138,108,240,.20), transparent 62%),radial-gradient(74% 46% at 94% 20%, rgba(74,176,198,.11), transparent 64%),radial-gradient(96% 60% at 46% 102%, rgba(122,92,222,.17), transparent 66%),linear-gradient(180deg,#13111c 0%,#0d0b12 52%,#110f18 100%); }
.tg-shot .tg-shot__doodle{position:absolute; inset:0; width:100%; height:100%; opacity:.055; pointer-events:none}
.tg-shot .tg-shot__stack{position:relative; display:flex; flex-direction:column; min-height:0}
.tg-shot .tg-shot__status{display:flex; align-items:center; justify-content:space-between; padding:13px 24px 6px; font-size:14px; font-weight:600; letter-spacing:.01em; }
.tg-shot .tg-shot__status-right{display:flex; align-items:center; gap:5px}
.tg-shot .tg-shot__status svg{display:block}
.tg-shot .tg-shot__batt{position:relative; display:inline-flex; align-items:center; justify-content:center; width:25px; height:12.5px; border:1px solid rgba(255,255,255,.42); border-radius:3.6px; margin-left:1px; }
.tg-shot .tg-shot__batt::after{content:""; position:absolute; right:-3.4px; top:50%; transform:translateY(-50%); width:1.8px; height:4.6px; border-radius:0 2px 2px 0; background:rgba(255,255,255,.42); }
.tg-shot .tg-shot__batt span{font-size:8.5px; font-weight:600; line-height:1; letter-spacing:0}
.tg-shot .tg-shot__nav{position:relative; display:flex; align-items:center; gap:6px; padding:5px 12px 9px 8px; background:rgba(19,17,26,.74); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); }
.tg-shot .tg-shot__back{flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:30px; color:var(--tg-link); }
.tg-shot .tg-shot__ident{flex:1 1 auto; min-width:0; text-align:center; padding:0 2px 0 10px}
.tg-shot .tg-shot__title{display:block; font-size:16px; font-weight:600; line-height:1.2; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-shot .tg-shot__sub{display:block; margin-top:1px; font-size:12px; line-height:1.25; color:var(--tg-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-shot .tg-shot__avatar{flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; letter-spacing:.01em; color:#fff; background:linear-gradient(150deg,#2fb8a6 0%,#3fc9c4 48%,#4ad9e6 100%); }
.tg-shot .tg-shot__pinned{position:relative; display:flex; align-items:center; gap:9px; padding:6px 12px 7px; background:rgba(255,255,255,.055); border-bottom:1px solid rgba(255,255,255,.06); }
.tg-shot .tg-shot__pinbars{flex:none; display:flex; flex-direction:column; gap:2px; width:2px}
.tg-shot .tg-shot__pinbars i{display:block; width:2px; height:12px; border-radius:1px; background:var(--tg-pin)}
.tg-shot .tg-shot__pinbars i:last-child{opacity:.35}
.tg-shot .tg-shot__pintext{flex:1 1 auto; min-width:0}
.tg-shot .tg-shot__pinlabel{display:block; font-size:13px; font-weight:500; line-height:1.25; color:var(--tg-pin)}
.tg-shot .tg-shot__pinline{display:block; font-size:13.5px; line-height:1.3; color:var(--tg-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-shot .tg-shot__pinicon{flex:none; color:rgba(255,255,255,.55); display:flex}
.tg-shot .tg-shot__chat{position:relative; display:flex; flex-direction:column; gap:11px; padding:12px 10px 16px}
.tg-shot .tg-shot__daterow{display:flex; justify-content:center; padding:2px 0 1px}
.tg-shot .tg-shot__date{display:inline-block; padding:3px 11px; border-radius:999px; background:rgba(255,255,255,.08); font-size:12px; font-weight:500; line-height:1.4; color:var(--tg-ink); }
.tg-shot .tg-shot__row{display:flex}
.tg-shot .tg-shot__row--in{justify-content:flex-start}
.tg-shot .tg-shot__row--out{justify-content:flex-end}
.tg-shot .tg-shot__bubble{position:relative; box-sizing:border-box; max-width:86%; padding:7px 11px 7px 11px; font-size:14.5px; line-height:1.45; letter-spacing:-.003em; word-break:break-word; }
.tg-shot .tg-shot__bubble--in{background:var(--tg-bot); color:var(--tg-ink); border-radius:16px 16px 16px 5px}
.tg-shot .tg-shot__bubble--out{background:linear-gradient(135deg,#8a6cf0 0%,#9d7bf5 100%); color:#fff; border-radius:16px 16px 5px 16px; }
.tg-shot .tg-shot__p{margin:0 0 6px}
.tg-shot .tg-shot__p:last-of-type{margin-bottom:0}
.tg-shot .tg-shot__bubble b{font-weight:600}
.tg-shot .tg-shot__link{color:var(--tg-link)}
.tg-shot .tg-shot__ok{margin-top:7px}
.tg-shot .tg-shot__pad{display:inline-block; width:42px; height:1px}
.tg-shot .tg-shot__pad--wide{width:58px}
.tg-shot .tg-shot__meta{position:absolute; right:10px; bottom:6px; display:flex; align-items:center; gap:3px; font-size:11px; line-height:1; font-weight:400; letter-spacing:.01em; color:var(--tg-dim); }
.tg-shot .tg-shot__meta--out{color:rgba(255,255,255,.82)}
.tg-shot .tg-shot__ticks{letter-spacing:-3.5px; padding-right:3px; font-size:11.5px}
.tg-shot .tg-shot__quote{display:block; margin:1px 0 6px; padding:3px 8px 4px 8px; border-left:3px solid var(--tg-rose); border-radius:4px 8px 8px 4px; background:rgba(255,255,255,.05); }
.tg-shot .tg-shot__quote-name{display:block; font-size:12.5px; font-weight:600; line-height:1.3; color:var(--tg-rose)}
.tg-shot .tg-shot__quote-line{display:block; font-size:13px; line-height:1.32; color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tg-shot .tg-shot__jump{position:absolute; right:10px; bottom:10px; width:32px; height:32px; border-radius:50%; background:#2a2833; color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.4); }
.tg-shot .tg-shot__inputbar{position:relative; display:flex; align-items:center; gap:7px; padding:8px 9px 6px; background:rgba(19,17,26,.82); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); border-top:1px solid rgba(255,255,255,.06); }
.tg-shot .tg-shot__menu{flex:none; display:flex; align-items:center; gap:5px; height:32px; padding:0 11px 0 9px; border-radius:16px; background:var(--tg-blue); color:#fff; font-size:13.5px; font-weight:500; letter-spacing:-.005em; }
.tg-shot .tg-shot__clip{flex:none; color:var(--tg-dim); display:flex; padding:0 1px}
.tg-shot .tg-shot__field{position:relative; flex:1 1 auto; min-width:0; height:33px; display:flex; align-items:center; padding:0 30px 0 12px; border-radius:17px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.05); font-size:14.5px; color:var(--tg-dim); white-space:nowrap; overflow:hidden; }
.tg-shot .tg-shot__field-icon{position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--tg-dim); display:flex}
.tg-shot .tg-shot__cam{flex:none; width:33px; height:33px; border-radius:50%; background:rgba(255,255,255,.07); color:rgba(255,255,255,.72); display:flex; align-items:center; justify-content:center; }
.tg-shot .tg-shot__home{position:relative; display:flex; justify-content:center; padding:6px 0 8px; background:rgba(19,17,26,.82); }
.tg-shot .tg-shot__home i{display:block; width:112px; height:4px; border-radius:2px; background:rgba(255,255,255,.30)}
/* sections and analytical UI */
main > .sec,main > .privacy,main > .final{border-top:1px solid var(--line)}
.sec{padding:96px 0}
.sec-hd{max-width:720px}
.kicker{margin-bottom:14px; color:var(--text-3)}
.hookline{margin-bottom:12px; color:var(--text-3); font-size:14px; line-height:1.5; letter-spacing:-.005em}
.sec h2{font-size:clamp(32px,4vw,48px); line-height:1.05; letter-spacing:-.04em}
.sec .sub{max-width:640px; margin-top:18px; color:var(--text-2); font-size:18px; line-height:1.55}
.rule{background:var(--line)}
.feat{gap:64px; padding:76px 0}
.feat + .feat{border-top-color:var(--line)}
.feat .n{font-family:var(--mono); color:var(--accent); font-size:11px; letter-spacing:.14em}
.feat h3{font-size:clamp(26px,3vw,36px); line-height:1.08; letter-spacing:-.038em}
.feat p{color:var(--text-2); line-height:1.65}
.ticks{gap:11px; color:var(--text-2)}
.ticks svg,.price-list svg,.pcell h3 svg{color:oklch(72% .16 150)}
.figure,.pcell,.price-card{background:linear-gradient(var(--cp-tile-top),transparent),var(--bg-2); border-color:var(--line); box-shadow:none; }
.figure{padding:20px 20px 15px; border-radius:var(--radius)}
.figure-hd{margin-bottom:16px}
.figure-hd h4{font-size:14px; font-weight:500; letter-spacing:-.012em}
.figure-hd .meta,.axis-row{font-family:var(--mono); font-size:10.5px; color:var(--text-3)}
.chart text{font-family:var(--mono); font-size:10.5px; fill:var(--text-3)}
.chart .lbl{font-size:11px; font-weight:500}
.chips{gap:8px}
.chip,.chips .chip{border:1px solid var(--line); background:var(--cp-wash); color:var(--text-2); border-radius:7px; font-family:var(--mono); font-weight:400; }
/* private/local, providers and pricing */
.privacy{background:var(--bg)}
.pgrid{margin-top:48px; border-color:var(--line); background:var(--line); border-radius:var(--radius)}
.pcell{padding:26px 24px}
.pcell h3{font-size:15px; font-weight:500}
.pcell p,.pnote{color:var(--text-2)}
.pcell code{background:var(--cp-wash-2); color:var(--text-2); border:1px solid var(--line)}
.pnote a{color:var(--accent)}
.prov-list{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin-top:32px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.prov{min-width:0; padding:22px 18px; border:0; border-right:1px solid var(--line); border-radius:0; background:linear-gradient(var(--cp-tile-top),transparent); box-shadow:none; font-family:var(--mono); font-size:12px; color:var(--text-3); transition:background .18s; }
.prov:last-child{border-right:0}
.prov:hover{background:var(--cp-wash-2)}
.prov b{display:block; margin-bottom:5px; color:var(--text); font-family:var(--sans); font-size:14px; font-weight:500}
.price-card{margin-top:48px; padding:48px 44px; border-radius:var(--radius-lg,16px); background:radial-gradient(90% 130% at 0 0,var(--accent-soft),transparent 58%),linear-gradient(var(--cp-tile-top),transparent),var(--bg-2); }
.price-big{font-size:clamp(64px,10vw,104px); font-weight:500; letter-spacing:-.06em}
.price-sub{color:var(--text-2)}
.price-list li{color:var(--text-2)}
/* terminal, final call to action, footer */
.final{background:var(--bg); position:relative; overflow:hidden}
.final::before{content:""; position:absolute; inset:auto 0 -45%; height:78%; pointer-events:none; background:radial-gradient(ellipse at center,var(--accent-soft),transparent 62%); opacity:.7; }
.final .inner{position:relative; padding:112px 32px}
.final h2{font-size:clamp(34px,4.5vw,56px); font-weight:500; letter-spacing:-.045em}
.final p{font-size:18px; color:var(--text-2)}
.site-foot{border-top-color:var(--line); padding:48px 0 36px}
.foot-brand p,.foot-base,.foot-col h4{color:var(--text-3)}
.foot-col h4{font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.14em}
.foot-col a{color:var(--text-2)}
.foot-base{border-top-color:var(--line)}
@media (max-width:1000px){.feat{gap:42px}
.prov-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.prov:nth-child(3){border-right:0}
.prov:nth-child(-n+3){border-bottom:1px solid var(--line)}
}
@media (max-width:860px){.hero{padding-top:64px}
.product-proof{margin-top:52px; padding-bottom:16px}
.proof-stage{gap:40px}
.proof-view--desktop{width:100%; padding-right:0}
.proof-view--telegram{width:min(360px,74vw); transform:none}
.prov-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.prov,.prov:nth-child(3){border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.prov:nth-child(even){border-right:0}
.prov:nth-last-child(-n+2){border-bottom:0}
.prov:last-child{border-right:0}
.feat{grid-template-columns:minmax(0,1fr); gap:32px; padding:58px 0}
.price-card{grid-template-columns:minmax(0,1fr)}
.sec{padding:76px 0}
.head-nav a:not(.btn){display:inline-flex; align-items:center; min-height:44px}
}
@media (max-width:700px){.wrap{padding-inline:22px}
.prov-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.prov,.prov:nth-child(3){border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.prov:nth-child(even){border-right:0}
.prov:nth-last-child(-n+2){border-bottom:0}
.prov:last-child{border-right:0}
}
@media (max-width:640px){.wrap{padding-inline:20px}
.head-in{gap:12px}
.brand{font-size:15.5px}
.head-nav{gap:8px}
.head-nav .btn{width:auto; padding:11px 15px}
.hero{padding-top:40px; padding-bottom:44px}
.hero h1{margin-top:26px; font-size:clamp(35px,10.5vw,50px); line-height:1.055}
.hero .lede{margin-top:18px}
.hero .cta-note{font-size:13px}
.product-proof{margin-top:42px; padding-bottom:6px}
.proof-stage{gap:34px}
.proof-view--desktop,.proof-view--telegram{width:100%; margin-left:0}
.proof-media--desktop{position:relative; aspect-ratio:4/5}
.proof-media--desktop .cp-shot{position:static; width:100%; height:100%; max-width:100%; aspect-ratio:auto; transform:none; }
.cp-app{font:10px/1.45 -apple-system,"SF Pro Text",var(--sans)}
.cp-rail{display:none}
.cp-app-top{height:40px; padding:0 12px}
.cp-app-top .cp-app-title{font-size:11.5px}
.cp-pill{display:none}
.cp-app-body{justify-content:flex-start; gap:8px; padding:11px 12px; font-size:11px}
.cp-app-body > .cp-msg:nth-child(1),.cp-app-body > .cp-msg:nth-child(2){display:none}
.cp-msg{max-width:92%; padding:7px 9px; font-size:1em}
.cp-msg-coach{max-width:100%}
.cp-msg-coach p:nth-of-type(2){display:none}
.cp-workout{margin-top:7px}
.cp-workout-head{padding:6px 8px}
.cp-workout-meta{padding:5px 8px}
.cp-workout-steps{gap:2px; padding:6px 8px}
.cp-msg-system{max-width:100%; font-size:10px}
.cp-composer{margin:0 12px 11px; padding:7px 9px}
.cp-composer > span:first-child{font-size:11px}
.proof-caption{margin-top:11px}
.sec{padding:68px 0}
.feat{gap:28px; padding:52px 0}
.figure{padding:16px 14px 13px}
.figure-hd{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; align-items:start}
.figure-hd .meta{margin-left:0; text-align:right}
.fig-scroll{overflow:hidden}
.fig-scroll > svg{width:100%; min-width:100%}
.chart text{font-size:16px}
.chart .lbl{font-size:16.5px}
.chips{gap:6px}
.chips .chip{font-size:11px; padding:4px 8px}
.pgrid{margin-top:36px}
.price-card{margin-top:36px; padding:34px 24px}
.final .inner{padding:84px 20px}
.final h2{font-size:32px}
.final p{font-size:16.5px}
.site-foot{padding-top:44px}
.foot-col ul{gap:2px}
.foot-col a{display:inline-block; padding:11px 0}
.foot-col h4{margin-bottom:6px}
}
@media (max-width:420px){.hero .cta-row{margin-top:26px}
.foot-grid{gap:22px}
}
@media (max-width:360px){.tg-shot .tg-shot__phone{border-radius:36px}
.tg-shot .tg-shot__status{padding:12px 18px 5px; font-size:13px}
.tg-shot .tg-shot__nav{padding:5px 9px 8px 6px}
.tg-shot .tg-shot__title{font-size:15px}
.tg-shot .tg-shot__sub{font-size:11.5px}
.tg-shot .tg-shot__avatar{width:31px; height:31px; font-size:14px}
.tg-shot .tg-shot__pinned{gap:8px; padding:6px 10px}
.tg-shot .tg-shot__pinline{font-size:12.5px}
.tg-shot .tg-shot__chat{padding:10px 8px 14px; gap:10px}
.tg-shot .tg-shot__bubble{max-width:89%; font-size:13.6px; padding:7px 10px}
.tg-shot .tg-shot__quote-line{font-size:12.2px}
.tg-shot .tg-shot__inputbar{gap:6px; padding:7px 7px 5px}
.tg-shot .tg-shot__menu{padding:0 9px 0 8px; font-size:13px}
.tg-shot .tg-shot__field{font-size:13.6px; padding:0 28px 0 11px}
.tg-shot .tg-shot__home i{width:96px}
}
@media (max-width:350px){.proof-media--desktop{aspect-ratio:2/3}
.prov-list{grid-template-columns:minmax(0,1fr)}
.prov,.prov:nth-child(even),.prov:nth-child(3),.prov:last-child{border-right:0}
.prov:not(:last-child){border-bottom:1px solid var(--line)}
.hero h1{font-size:33px}
.price-card{padding-inline:20px}
}
@media (prefers-reduced-motion:reduce){.hero::after{animation:none; opacity:.4}}
@media (max-width:640px){
.fig-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.fig-scroll > svg{min-width:460px; width:auto}
.brand{padding:10px; margin:-10px}
.head-nav a:not(.btn){display:none}
.head-in{justify-content:space-between}
}
/* language switcher */
.lang-switch{position:relative; flex:none}
.lang-switch summary{
  display:inline-flex; align-items:center; gap:6px; height:44px;
  list-style:none; cursor:pointer; color:var(--text-2); font-size:14px;
  letter-spacing:-.01em; user-select:none;
}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.7;
}
.lang-switch summary:hover{color:var(--text)}
.lang-switch-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  min-width:220px; max-height:min(70vh, 428px); overflow:auto;
  padding:6px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-2); box-shadow:0 16px 40px -24px #000000cc;
}
.lang-switch-panel a{
  display:block; padding:8px 10px; border-radius:6px; color:var(--text-2);
  font-size:14px; line-height:1.35; text-decoration:none;
}
.lang-switch-panel a:hover{color:var(--text); background:var(--cp-wash)}
.lang-switch-panel a.is-current{color:var(--text); background:var(--cp-wash-2)}
.foot-langs{margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.foot-langs h4{margin:0 0 12px; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.foot-langs ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px}
.foot-langs a{color:var(--text-2); text-decoration:none; font-size:13.5px}
.foot-langs a:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.foot-langs a.is-current{color:var(--text)}
@media (max-width:640px){
.lang-switch summary{min-height:44px; padding:0 4px}
.foot-langs a{display:inline-block; padding:11px 0}
}
