/* ============================================================
   ЛЮБИ · лендинг · sections.css
   Стили секций по порядку страницы. Каждая секция начинается с комментария.
   ============================================================ */
/* ---------- 0 · шапка: логотип из иконки приложения, навигация в капсуле, CTA ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:1000;padding:calc(16px + env(safe-area-inset-top,0px)) var(--pad) 0;transition:transform .45s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.hdr .bar{pointer-events:auto}
.hdr.hide{transform:translateY(-120%)}
.hdr .bar{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 22px;min-height:76px;border-radius:999px;background:rgba(15,78,97,.62);border:1px solid rgba(252,249,251,.16);box-shadow:0 20px 50px -24px rgba(0,0,0,.55);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .3s}
.hdr.solid .bar{background:rgba(15,78,97,.9)}
.hdr.onlight .bar{background:rgba(252,249,251,.75);border-color:rgba(26,26,30,.06)}
.hdr.onlight .logo,.hdr.onlight .nav a{color:var(--n-900)}
.logo{display:flex;align-items:center;gap:12px;font:600 21px/1 var(--f-head);color:var(--fg);text-decoration:none}
.logo img{width:44px;height:44px;flex:none;border-radius:13px;display:block;box-shadow:0 6px 14px -6px rgba(255,97,191,.6)}
.logo img.wm{width:auto;height:26px;border-radius:0;box-shadow:none;margin-left:2px}
.logo{flex:none}
.nav{display:flex;gap:2px}
.nav a{color:var(--fg);text-decoration:none;font:600 15px/1 var(--f-text);padding:13px 18px;border-radius:999px;opacity:.85;transition:background .25s,opacity .25s}
.nav a:hover{opacity:1;background:rgba(255,255,255,.1)}
.hdr.onlight .nav a:hover{background:rgba(26,26,30,.06)}
@media (max-width:900px){.nav{display:none}.burger{display:grid}.hdr .bar .rs.compact .tx small{display:none}.hdr .bar .rs.compact{padding:8px 12px 8px 8px}.hdr .bar .rs.compact svg{width:26px;height:26px}.hdr .bar .rs.compact .tx b{font-size:14px}}
.burger{display:grid;width:44px;height:44px;border-radius:50%;border:0;background:rgba(252,249,251,.12);place-items:center;cursor:pointer;margin-left:auto;flex:none}
.burger svg{width:24px;height:24px;fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round}
.burger .ic-close{display:none}.burger[aria-expanded="true"] .ic-open{display:none}.burger[aria-expanded="true"] .ic-close{display:block}
.hdr.onlight .burger{background:rgba(26,26,30,.08)}.hdr.onlight .burger svg{stroke:var(--n-900)}

.mmenu{display:none;margin:10px auto 0;max-width:1240px;background:var(--teal);border-radius:24px;padding:10px;flex-direction:column;gap:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mmenu.open{display:flex}
.mmenu a{color:var(--fg);text-decoration:none;font:600 17px/1 var(--f-head);padding:16px 18px;border-radius:16px}
.mmenu a:active{background:rgba(255,255,255,.1)}
@media (min-width:901px){.burger,.mmenu{display:none!important}}

/* ---------- 1 · первый экран ---------- */
.pin{height:100svh;position:relative;overflow:hidden;isolation:isolate}
.hero{height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding:90px var(--pad) 56px}
.glow{position:absolute;z-index:-1;border-radius:50%;filter:blur(110px);pointer-events:none;will-change:transform,background}
.g1{width:720px;height:720px;right:-160px;top:-200px;background:var(--teal-2);opacity:.95}
.g2{width:560px;height:560px;left:-200px;bottom:-200px;background:var(--glow);opacity:.32;transition:background 1s}
.g3{width:320px;height:320px;right:22%;bottom:4%;background:var(--accent);opacity:.3;transition:background 1s}
.copy{max-width:640px}
h1{font-size:clamp(36px,5.2vw,66px);line-height:1.04;margin-bottom:20px;overflow:hidden}
h1 .w{display:inline-block;will-change:transform}
.sub{font:500 clamp(16px,1.3vw,19px)/1.5 var(--f-text);opacity:.86;max-width:32em;margin-bottom:24px}
.live{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.live .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 25%,transparent);transition:background .6s,box-shadow .6s}
.live .txt{font:600 clamp(14px,1.15vw,17px)/1.3 var(--f-head)}
.live em{font-style:normal;color:var(--accent-txt);transition:color .6s}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.soonline{font:500 13px/1.4 var(--f-text);opacity:.7}.soonline b{font-weight:600}
.trust{display:flex;gap:22px;margin-top:38px;font:500 13px/1.35 var(--f-text);opacity:.8;flex-wrap:wrap}
.trust span{padding-left:14px;position:relative}
.trust span::before{content:"";position:absolute;left:0;top:.45em;width:6px;height:6px;border-radius:50%;background:var(--mint-400)}
.phases{display:grid;grid-template-columns:repeat(4,max-content);gap:8px;margin-top:22px}
@media (max-width:1240px){#phases{grid-template-columns:repeat(2,max-content)}}
.phases button{font:500 12px/1 var(--f-text);padding:10px 14px;border-radius:999px;border:1px solid rgba(252,249,251,.22);background:transparent;color:var(--fg);cursor:pointer;transition:background .35s,color .35s}
.phases button[aria-current="true"]{background:var(--accent);color:#fff;border-color:transparent}

.stage{position:relative;display:grid;place-items:center;perspective:1600px;height:100%}
/* кольцо цикла: сегменты — ЗА телефоном; точка и след — над ним */
.orbit{position:absolute;inset:0;margin:auto;width:min(660px,88vw);aspect-ratio:1;z-index:0;pointer-events:none}
.orbit svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible;fill:none}
.orbit .seg{stroke-width:9;opacity:.22;stroke-linecap:round}   /* будущее — просвечивает */
.orbit .fill{stroke-width:9;stroke-linecap:round}               /* пройденное — покрыто цветом фазы */
.orbit .seg.on{opacity:.45}
.orbit .knob{fill:#fff}.orbit .knob-halo{fill:#fff;opacity:.18}.orbit .knob-ring{stroke:#fff;stroke-width:1.5;opacity:.7}
.tilt{position:relative;z-index:2;transform-style:preserve-3d;will-change:transform}
.tilt .phone{width:300px}
.tilt .screen{height:640px;display:flex;flex-direction:column}
.tilt .ring{width:156px;height:156px}
.tilt .card p{min-height:34px}
.tabimg{display:block;width:calc(100% - 20px);margin:auto 10px 10px;height:auto;flex:none}
.tabbar{margin:auto 10px 12px;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;background:var(--teal);border:1px solid rgba(255,255,255,.12);border-radius:34px;height:66px;box-shadow:0 12px 30px -16px rgba(15,78,97,.6)}
.tabbar i{width:46px;height:46px;border-radius:50%;background:transparent;display:grid;place-items:center;font-style:normal;position:relative}
.tabbar i.c::after{content:"Главная";position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:-8px;font:500 8px/1 var(--f-text);color:rgba(255,255,255,.8);white-space:nowrap}
.tabbar i.c{align-content:start;padding-top:6px}
.tabbar i svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.orbwrap .tabbar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none}
.tabbar i.on{background:var(--pink-500)}.tabbar i.on svg{stroke:#fff}.tabbar .home{display:none}
.tabbar .home{position:absolute;bottom:calc(12px + 8px);left:50%;transform:translateX(-50%);display:grid;place-items:center;font:500 9px/1 var(--f-text);color:var(--n-500);gap:4px}
/* облачка-сообщения вокруг телефона: свои на каждую фазу */
.bubble{position:absolute;z-index:3;background:var(--pink-50);color:var(--n-900);border-radius:20px;padding:12px 16px;box-shadow:0 30px 60px -22px rgba(0,0,0,.45);font:500 13px/1.35 var(--f-text);max-width:210px;will-change:transform,opacity;opacity:0;pointer-events:none}
.bubble b{display:block;font:700 13px/1.2 var(--f-head);margin-bottom:3px;color:var(--accent);transition:color .6s}
.bubble.b1{left:calc(50% - 340px);top:16%}.bubble.b2{right:calc(50% - 340px);top:50%}.bubble.b3{left:calc(50% - 310px);bottom:12%}
.bubble.b1::after,.bubble.b3::after{content:"";position:absolute;right:-6px;bottom:14px;width:14px;height:14px;background:inherit;border-radius:3px;transform:rotate(45deg)}
.bubble.b2::after{content:"";position:absolute;left:-6px;bottom:14px;width:14px;height:14px;background:inherit;border-radius:3px;transform:rotate(45deg)}

/* телефон · общий компонент */
.phone{width:300px;position:relative;border-radius:58px;padding:12px;background:linear-gradient(155deg,#5c5e66 0%,#1d1e22 28%,#2a2b30 55%,#6a6c74 100%);box-shadow:0 80px 120px -40px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.12)}
/* кнопки корпуса */
.phone::before,.phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(#55575e,#2a2b30)}
.phone::before{left:-3px;top:118px;height:64px;box-shadow:0 90px 0 0 #3a3b41}
.phone::after{right:-3px;top:160px;height:96px}
.screen{border-radius:46px;overflow:hidden;background:var(--purple-200);color:var(--n-900);font-family:var(--f-text);position:relative;box-shadow:inset 0 0 0 4px #0a0a0c}
/* Dynamic Island */

.top{background:var(--teal);color:#fff;padding:26px 18px 26px;border-radius:0 0 34px 34px}
.top .t{font:600 15px/1 var(--f-head);display:flex;align-items:center;gap:10px}
.top .t::before{content:"‹";font-size:22px;line-height:0}
.pill{display:inline-block;margin-top:10px;font:600 10px/1 var(--f-text);padding:6px 9px;border-radius:999px;background:var(--mint-500);color:#fff}
.ring{width:150px;height:150px;margin:14px auto 0;position:relative}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .c b{font:700 34px/1 var(--f-display);color:var(--accent-txt);transition:color .6s}
.ring .c small{font:500 11px/1 var(--f-text);opacity:.8;margin-top:6px}
.card{background:var(--pink-50);margin:14px 12px 0;border-radius:22px;padding:14px}
.card .p{font:600 10px/1 var(--f-text);color:#fff;background:var(--accent);padding:6px 9px;border-radius:999px;display:inline-block;transition:background .6s}
.card .d{font:500 10px/1 var(--f-text);color:var(--n-500);margin-left:8px}
.card h4{font:700 16px/1.2 var(--f-head);margin:10px 0 6px}
.card p{font:400 11px/1.45 var(--f-text);color:var(--n-600);min-height:32px}
.bar{height:6px;border-radius:99px;background:var(--n-50);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:4%;background:var(--mint-500);border-radius:99px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 12px 16px}
.chips span{font:500 10px/1 var(--f-text);padding:7px 10px;border-radius:999px;background:var(--accent-soft);color:var(--n-900);transition:background .6s}
.hint{position:absolute;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;font:500 12px/1 var(--f-text);opacity:.7;display:flex;align-items:center;gap:8px;transition:opacity .4s}
.hint i{width:18px;height:28px;border:1.5px solid rgba(252,249,251,.6);border-radius:10px;position:relative}
.hint i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--fg);animation:wheel 1.6s infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* ---------- 2 · боль ---------- */
.pain{position:relative;overflow:hidden;background:var(--teal);transition:background 1.2s}
.pain.calm{background:var(--purple-200);color:var(--n-900)}
.pain h2{max-width:14em;margin-bottom:56px}
.chat{display:flex;flex-direction:column;gap:18px;max-width:760px;margin:0 auto}
.msg{max-width:min(520px,86%);padding:18px 22px;border-radius:26px;font:500 clamp(15px,1.25vw,18px)/1.45 var(--f-text);background:rgba(252,249,251,.1);border:1px solid rgba(252,249,251,.16);backdrop-filter:blur(6px);will-change:transform,opacity}
.msg.me{align-self:flex-end;border-bottom-right-radius:8px}
.msg.them{align-self:flex-start;border-bottom-left-radius:8px}
.msg.lyubi{align-self:flex-start;background:var(--pink-50);color:var(--n-900);border-color:transparent;border-bottom-left-radius:8px;box-shadow:0 30px 60px -24px rgba(26,26,30,.35);display:flex;gap:12px;align-items:flex-start}
.msg.lyubi img{width:34px;height:34px;border-radius:10px;flex:none}
.msg.lyubi b{display:block;font:600 12px/1 var(--f-head);color:var(--pink-700);margin-bottom:6px}
.pain.calm .msg:not(.lyubi){background:#fff;border-color:transparent;color:var(--n-900)}

/* ---------- 3 · что умеет · фон, кольцо-ореол, плавающие данные ---------- */
.feat{background:var(--purple-200);color:var(--n-900);position:relative;overflow:hidden}
.feat .bgdots{position:absolute;inset:0;background-image:radial-gradient(rgba(165,112,199,.16) 1.2px,transparent 1.3px);background-size:26px 26px;pointer-events:none;mask-image:radial-gradient(ellipse at 70% 50%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 30%,transparent 75%)}
.feat .fglow{position:absolute;right:8%;top:50%;width:640px;height:640px;margin-top:-320px;border-radius:50%;filter:blur(120px);background:var(--pink-200);opacity:.9;transition:background 1s;pointer-events:none}
.feat .pinwrap{position:relative;min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:90px var(--pad)}
.feat h2{margin-bottom:12px}
.fnum{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.fnum span{font:600 12px/1 var(--f-text);padding:9px 12px;border-radius:999px;background:#fff;color:var(--n-600);box-shadow:0 8px 20px -12px rgba(26,26,30,.25)}
.flist{display:flex;flex-direction:column;gap:8px;margin-top:30px;counter-reset:f}
.fitem{padding:18px 20px;border-radius:22px;cursor:pointer;transition:background .4s,box-shadow .4s;background:rgba(255,255,255,.45);border:1px solid transparent;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.fitem .ic{width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;color:var(--n-500);transition:background .3s,color .3s}
.fitem .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fitem h3{font-size:clamp(17px,1.5vw,22px);margin-bottom:4px;transition:color .3s}
.fitem p{font:500 14px/1.5 var(--f-text);color:var(--n-500);max-height:0;overflow:hidden;opacity:0;transition:max-height .5s,opacity .4s}
.fitem.on{background:#fff;box-shadow:0 30px 60px -30px rgba(165,112,199,.45)}
.fitem.on p{max-height:120px;opacity:1}
.fitem.on h3{color:var(--pink-700)}
.fitem.on .ic{background:var(--pink-500);color:#fff}
.fprog{height:3px;background:var(--purple-500);border-radius:3px;margin-top:22px;overflow:hidden}
.fprog i{display:block;height:100%;width:0;background:var(--pink-700)}
.fstage{position:relative;display:grid;place-items:center;min-height:640px}
.fhalo{position:absolute;width:min(520px,80vw);aspect-ratio:1;border-radius:50%;border:2px dashed rgba(165,112,199,.3);animation:spin 90s linear infinite}
.fhalo.h2{width:min(400px,62vw);border:14px solid rgba(255,255,255,.5);animation:none}
.fstage .ftilt{position:relative;z-index:2;transform-style:preserve-3d;will-change:transform}
.fstage{perspective:1400px}
.fstage .phone{width:290px}
.fscreens{height:600px;position:relative}
.fscr.img{padding:0}.fscr.img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.lockscr{position:absolute;inset:0;background:linear-gradient(180deg,#2A1E33,#1A1A1E);color:#fff;padding:30px 14px 20px}
.lockscr .time{text-align:center;font:600 40px/1 var(--f-display);margin-top:10px}.lockscr .date{text-align:center;font:500 12px/1 var(--f-text);opacity:.7;margin:8px 0 22px}
.push{background:rgba(255,255,255,.93);color:var(--n-900);border-radius:18px;padding:11px 13px;margin-bottom:9px;opacity:0;transform:translateY(14px);box-shadow:0 12px 30px -16px rgba(0,0,0,.6)}
.push .a{display:flex;align-items:center;gap:7px;font:500 10px/1 var(--f-text);color:var(--n-500);margin-bottom:6px}.push .a img{width:16px;height:16px;border-radius:5px}.push .a span{margin-left:auto}
.push b{display:block;font:600 12px/1.25 var(--f-text);margin-bottom:3px}.push p{font:400 11px/1.35 var(--f-text);color:var(--n-600)}
.fscr.on .push{animation:pushin .55s cubic-bezier(.2,.7,.2,1) forwards}.fscr.on .push:nth-child(3){animation-delay:.12s}.fscr.on .push:nth-child(4){animation-delay:.24s}.fscr.on .push:nth-child(5){animation-delay:.36s}
@keyframes pushin{to{opacity:1;transform:none}}
.fscr{position:absolute;inset:0;padding:20px 16px;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.fscr.on{opacity:1;transform:none}
.fscr .h{font:600 15px/1.2 var(--f-head);margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.fscr .h small{font:500 10px/1 var(--f-text);color:var(--n-500)}
/* плавающие данные вокруг телефона — по одному набору на сцену */
.fbub{position:absolute;z-index:3;background:#fff;border-radius:18px;padding:11px 14px;box-shadow:0 24px 50px -22px rgba(26,26,30,.35);font:500 12px/1.3 var(--f-text);color:var(--n-600);opacity:0;pointer-events:none;will-change:transform,opacity;max-width:190px}
.fbub b{display:block;font:700 15px/1.1 var(--f-display);color:var(--n-900);margin-bottom:3px}
.fbub.p1{left:calc(50% - 300px);top:16%}.fbub.p2{right:calc(50% - 300px);top:40%}.fbub.p3{left:calc(50% - 280px);bottom:16%}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal span{aspect-ratio:1;display:grid;place-items:center;font:500 10px/1 var(--f-text);border-radius:50%;background:#fff;color:var(--n-600)}
.cal .m{background:var(--ph-m);color:#fff}.cal .f{background:var(--ph-f);color:#fff}.cal .o{background:var(--ph-o);color:#fff}.cal .l{background:var(--ph-l);color:#fff}.cal .today{outline:2px solid var(--pink-700);outline-offset:2px}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.legend span{font:500 9px/1 var(--f-text);display:flex;align-items:center;gap:5px;color:var(--n-600)}.legend i{width:8px;height:8px;border-radius:50%}
.mood{display:flex;justify-content:space-between;margin:4px 0 14px}.mood span{width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:16px}.mood .sel{background:var(--pink-200);outline:2px solid var(--pink-700)}
.slider{margin:10px 0}.slider small{font:500 10px/1 var(--f-text);color:var(--n-500)}.slider .tr{height:6px;border-radius:99px;background:#fff;margin-top:6px;position:relative}.slider .tr i{position:absolute;left:0;top:0;height:100%;border-radius:99px;background:var(--mint-500)}.slider .tr b{position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--mint-500);margin-left:-8px}
.sym{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.sym span{font:500 10px/1 var(--f-text);padding:7px 10px;border-radius:999px;background:#fff;color:var(--n-900)}.sym .sel{background:var(--pink-500);color:#fff}
.cyc{display:flex;flex-direction:column;gap:10px}.cyc div{background:#fff;border-radius:14px;padding:10px 12px}.cyc .r{display:flex;justify-content:space-between;font:600 11px/1 var(--f-text);margin-bottom:8px}.cyc .r small{font-weight:500;color:var(--n-500)}.cyc .bars{display:flex;height:8px;border-radius:99px;overflow:hidden}.cyc .bars i{display:block;height:100%}
.ntf{display:flex;flex-direction:column;gap:10px}.ntf div{background:#fff;border-radius:16px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ntf b{display:block;font:600 11px/1.2 var(--f-text)}.ntf small{font:400 10px/1.3 var(--f-text);color:var(--n-500)}
.tg{width:34px;height:20px;border-radius:99px;background:var(--mint-500);position:relative;flex:none}.tg::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff}.tg.off{background:var(--n-100)}.tg.off::after{right:auto;left:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 4 · устройства · светлый фон, объёмные иллюстрации ---------- */
.dev{background:linear-gradient(180deg,var(--purple-200) 0%,var(--pink-100) 100%);color:var(--n-900);position:relative;overflow:hidden}
.dev .inner{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;min-height:100svh;padding:90px var(--pad)}
.dev h2{margin-bottom:16px}
.dev .lead{margin-bottom:26px}
.dlabel{min-height:130px;padding:22px 0 0;border-top:1px solid rgba(42,69,90,.15);transition:opacity .4s}
.dlabel b{display:block;font:600 clamp(20px,1.8vw,26px)/1.15 var(--f-head);margin-bottom:8px;color:var(--n-900)}
.dlabel p{font:500 clamp(15px,1.15vw,17px)/1.5 var(--f-text);color:var(--n-600);max-width:30em}
.dlabel .brand{display:inline-block;margin-top:12px;font:500 12px/1 var(--f-text);color:var(--n-500);padding:7px 10px;border-radius:999px;background:#fff}
.dnotes{display:grid;gap:10px;margin-top:22px;max-width:36em}
.dnote{display:flex;gap:12px;align-items:flex-start;font:500 14px/1.5 var(--f-text);color:var(--n-600)}
.dnote i{flex:none;width:28px;height:28px;border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--purple-600);font:700 13px/1 var(--f-display);font-style:normal}
.orbwrap{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:660px;width:100%;margin:120px auto;perspective:1400px}
.orbwrap .bigring{position:absolute;inset:-14%;border-radius:50%;border:1.5px dashed rgba(165,112,199,.3);animation:spin 80s linear infinite}
.orbwrap .bigring.r2{inset:15%;border:18px solid rgba(255,255,255,.55);animation:none}
.orbwrap .phone{width:300px;z-index:2}.orbwrap .screen{border-radius:39px}
.orbwrap .screen{background:var(--teal)}
.dscr{padding:26px 14px 0;color:#fff;display:flex;flex-direction:column;min-height:0;flex:1}
.dscreen{background:var(--teal);display:flex;flex-direction:column;height:640px}
.dh i u{text-decoration:none;display:inline-block;background:rgba(255,255,255,.14);padding:4px 7px;border-radius:999px;margin-right:6px;font-weight:600;opacity:1}
.dlistwrap{flex:1;min-height:0;overflow:hidden;margin:0 -2px;position:relative}
.dlistwrap::after{content:"";position:absolute;inset-inline:0;bottom:0;height:34px;background:linear-gradient(transparent,var(--teal))}
.dlist{display:flex;flex-direction:column;gap:8px;padding:2px;will-change:transform}
.dcard{background:var(--pink-50);color:var(--n-900);border-radius:18px;padding:10px 12px;opacity:.55;transition:opacity .4s,box-shadow .4s,transform .4s}
.dcard.on{opacity:1;box-shadow:0 0 0 2px var(--pink-500),0 18px 34px -22px rgba(15,78,97,.8)}
.dcard.done{opacity:.92}
.dc-h{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center}
.dc-h i{width:34px;height:34px;border-radius:11px;background:var(--pink-200);display:grid;place-items:center;transition:background .4s}
.dc-h i svg{width:18px;height:18px;fill:none;stroke:var(--n-900);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dcard.on .dc-h i,.dcard.done .dc-h i{background:var(--pink-500)}.dcard.on .dc-h i svg,.dcard.done .dc-h i svg{stroke:#fff}
.dc-h b{display:block;font:700 12px/1.15 var(--f-head)}.dc-h small{display:block;font:400 9px/1.2 var(--f-text);color:var(--n-500);margin-top:2px}
.dc-h .st{font:500 8px/1 var(--f-text);color:var(--n-500);font-style:normal;padding:5px 7px;border-radius:999px;background:var(--purple-200);white-space:nowrap;transition:background .4s,color .4s}
.dcard.on .st,.dcard.done .st{background:var(--teal);color:#fff}
.dc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.dc-chips span{background:var(--purple-300);border-radius:10px;padding:5px 8px;min-width:46px;transition:background .3s}
.dc-chips small{display:block;font:400 8px/1 var(--f-text);color:var(--n-500);margin-bottom:3px}.dc-chips b{display:block;font:700 10px/1 var(--f-text);min-height:10px}
.dc-chips span.lit{background:var(--pink-100)}
.dh{display:flex;flex-direction:column;gap:3px;margin-bottom:12px}.dh span{font:600 15px/1.1 var(--f-head)}.dh i{font:500 10px/1.2 var(--f-text);opacity:.65;font-style:normal}
.dlist2{display:flex;flex-direction:column;gap:6px}
.dsync{margin-top:12px;font:500 10px/1 var(--f-text);opacity:.55;display:flex;align-items:center;gap:6px}.dsync::before{content:"";width:6px;height:6px;border-radius:50%;background:#84C2C2}
.dval{background:rgba(255,255,255,.08);border-radius:12px;padding:9px 12px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;transition:background .4s,box-shadow .4s}
.dval b{font:700 14px/1 var(--f-display);white-space:nowrap}.dval em{font:500 10px/1.2 var(--f-text);opacity:.75;font-style:normal}
.dval.pulse{background:rgba(242,119,227,.35);box-shadow:inset 0 0 0 1px rgba(242,119,227,.6)}
/* объёмное устройство: карточка с тенью + SVG с градиентами, наклон за курсором */
.device{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px;border:0;background:transparent;cursor:pointer;z-index:3;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.device .obj{width:100%;height:100%;display:grid;place-items:center;transform:translateZ(0);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .4s;filter:drop-shadow(0 22px 26px rgba(42,69,90,.22))}
.device svg{width:134px;height:134px;overflow:visible}
.device:hover .obj,.device.on .obj{transform:translateY(-10px) scale(1.08);filter:drop-shadow(0 36px 36px rgba(242,119,227,.4))}
.device[data-label=up] span{top:auto;bottom:100%;margin:0 0 -6px}
.device span{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-6px;white-space:nowrap;font:600 12px/1 var(--f-text);color:var(--n-600);background:#fff;padding:6px 10px;border-radius:999px;box-shadow:0 8px 16px -10px rgba(26,26,30,.25)}
.dots{position:absolute;inset:0;pointer-events:none;z-index:2}
.dots i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--pink-700);box-shadow:0 0 12px var(--pink-700);opacity:0}
.artring{position:absolute;left:50%;top:0;width:60vmax;height:60vmax;margin-left:-30vmax;margin-top:-30vmax;border-radius:50%;border:16px solid var(--pink-500);opacity:.25;pointer-events:none;will-change:transform,opacity;z-index:0}


/* ---------- 5 · подсказки под твой цикл ---------- */
.tips{background:var(--pink-50);color:var(--n-900);position:relative;overflow:hidden}
.tips .inner{max-width:1440px;margin:0 auto;padding:clamp(72px,9vw,128px) var(--pad)}
.thead{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:end;margin-bottom:34px}
.phases.big{display:grid;grid-template-columns:repeat(2,max-content);justify-content:end;gap:10px}.phases.big button{font-size:14px;padding:13px 18px;text-align:center}
.tips h2{margin-bottom:14px}
.seg{display:inline-flex;background:var(--purple-200);border-radius:999px;padding:4px;margin-top:26px}
.seg button{font:600 13px/1 var(--f-text);padding:11px 16px;border-radius:999px;border:0;background:transparent;color:var(--n-600);cursor:pointer;transition:background .3s,color .3s}
.seg button[aria-pressed="true"]{background:#fff;color:var(--n-900);box-shadow:0 8px 18px -12px rgba(26,26,30,.35)}
.tips .phases{margin-top:26px}
.tips .phases button{border-color:rgba(26,26,30,.14);color:var(--n-600)}
.tips .phases button[aria-current="true"]{color:#fff}
.tips .soonrow{display:flex;align-items:center;gap:10px;margin-top:26px;font:500 13px/1.4 var(--f-text);color:var(--n-500)}
.tips .disc{margin-top:28px;padding:16px 18px;border-radius:16px;background:#fff;border:1px solid var(--purple-500);font:500 13px/1.5 var(--f-text);color:var(--n-600);max-width:30em}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tcard{border-radius:26px;padding:20px 22px;min-height:168px;transition:opacity .4s,transform .4s;will-change:transform;color:var(--n-900)}
.tcard .th{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.tcard .th img{width:52px;height:52px;border-radius:50%;flex:none}
.tcard h3{font:700 clamp(15px,1.25vw,18px)/1.2 var(--f-head)}
.tcard p{font:500 14px/1.5 var(--f-text);color:var(--n-900);opacity:.85}

/* ---------- 6 · как из отметок получаются подсказки ---------- */
.how{background:var(--teal);color:var(--fg);position:relative;overflow:hidden}
.how .inner{max-width:1440px;margin:0 auto;padding:clamp(72px,9vw,128px) var(--pad)}
.how h2{max-width:14em;margin-bottom:56px}
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.steps svg.line{position:absolute;left:0;right:0;top:44px;height:6px;width:100%;pointer-events:none}
.step{position:relative;background:rgba(252,249,251,.06);border:1px solid rgba(252,249,251,.12);border-radius:26px;padding:26px 24px 24px}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--pink-500);color:var(--n-900);display:grid;place-items:center;font:700 15px/1 var(--f-display);margin-bottom:18px;position:relative;z-index:1}
.step h3{font-size:clamp(18px,1.5vw,22px);margin-bottom:8px}
.step p{font:500 14px/1.55 var(--f-text);opacity:.85}
.step .demo{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.step .demo span{font:500 11px/1 var(--f-text);padding:7px 10px;border-radius:999px;background:rgba(252,249,251,.1);opacity:0;transform:translateY(6px)}
.step.on .demo span{animation:chipin .5s forwards}.step.on .demo span:nth-child(2){animation-delay:.12s}.step.on .demo span:nth-child(3){animation-delay:.24s}.step.on .demo span:nth-child(4){animation-delay:.36s}
@keyframes chipin{to{opacity:1;transform:none}}
.step .demo span.hot{background:var(--pink-500);color:var(--n-900)}
.flag{margin-top:40px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;background:var(--pink-50);color:var(--n-900);border-radius:24px;padding:22px 24px;max-width:860px}
.flag i{width:44px;height:44px;border-radius:14px;background:var(--pink-500);display:grid;place-items:center;font:700 20px/1 var(--f-display);color:#fff;font-style:normal}
.flag b{display:block;font:600 17px/1.2 var(--f-head);margin-bottom:6px}
.flag p{font:500 14px/1.55 var(--f-text);color:var(--n-600)}

/* ---------- 7 · Медбокс ---------- */
.mb{background:var(--purple-200);color:var(--n-900);position:relative;overflow:hidden}
.mb .inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:clamp(72px,9vw,128px) var(--pad)}
.mb h2{margin-bottom:14px}
.mb .lead{margin-bottom:26px}
.mb h4{font:600 13px/1 var(--f-head);color:var(--n-500);margin:22px 0 10px}
.mb .per{display:flex;gap:8px;flex-wrap:wrap}
.mb .per button{font:600 13px/1 var(--f-text);padding:11px 16px;border-radius:999px;border:1px solid rgba(26,26,30,.14);background:transparent;color:var(--n-600);cursor:pointer;transition:background .3s,color .3s}
.mb .per button[aria-pressed="true"]{background:var(--pink-500);color:#fff;border-color:transparent}
.layers{display:flex;flex-direction:column;gap:8px}
.layer{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:center;background:#fff;border-radius:16px;padding:12px 14px;cursor:pointer;border:1px solid transparent;transition:border-color .3s,opacity .3s;user-select:none}
.layer .cb{width:22px;height:22px;border-radius:7px;border:2px solid var(--n-200);display:grid;place-items:center;transition:background .3s,border-color .3s}
.layer .cb::after{content:"";width:10px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.layer[aria-checked="true"] .cb{background:var(--pink-500);border-color:var(--pink-500)}.layer[aria-checked="true"] .cb::after{opacity:1}
.layer b{display:block;font:600 14px/1.2 var(--f-head)}.layer small{display:block;font:400 12px/1.3 var(--f-text);color:var(--n-500);margin-top:2px}
.layer.lock{cursor:default;background:var(--purple-300);opacity:.9}.layer.lock .cb{border-style:dashed;background:transparent}.layer.lock .cb::after{display:none}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.way{background:#fff;border-radius:16px;padding:14px 12px;border:1.5px solid transparent;position:relative}
.way.sel{border-color:var(--pink-700)}
.way b{display:block;font:600 13px/1.2 var(--f-head);margin-bottom:4px}.way small{font:400 11px/1.3 var(--f-text);color:var(--n-500)}
.way .soon{position:absolute;top:10px;right:10px}
.mbstage{display:grid;place-items:center;position:relative}
.mbstage .phone{width:300px}
.mbscr{background:var(--pink-100);height:640px;display:flex;flex-direction:column;padding:26px 14px 0;color:var(--n-900)}
.mbscr .h{font:600 17px/1.15 var(--f-head)}.mbscr .h small{display:block;font:400 11px/1.3 var(--f-text);color:var(--n-500);margin-top:4px}
.qrbox{background:#fff;border-radius:22px;padding:14px;margin-top:14px}
.qrbox svg{display:block;width:100%;height:auto}
.qrbox .tm{display:flex;align-items:center;gap:6px;font:400 10px/1.3 var(--f-text);color:var(--n-500);margin-top:8px}
.inside{background:#fff;border-radius:22px;padding:12px 14px;margin-top:10px}
.inside b{display:block;font:600 13px/1 var(--f-head);margin-bottom:8px}
.inside div{display:flex;justify-content:space-between;font:500 11px/1 var(--f-text);padding:5px 0;color:var(--n-600)}
.inside div em{font-style:normal;font-weight:700;color:var(--n-900)}
.inside div.off{opacity:.45}
.mbscr .foot{margin-top:auto;padding:10px 0 14px;font:400 9px/1.3 var(--f-text);color:var(--n-500);text-align:center}
.mb .mbnote{margin-top:20px;font:500 13px/1.5 var(--f-text);color:var(--n-500);max-width:32em}




@media (max-width:980px){
  .mb .inner{grid-template-columns:minmax(0,1fr);gap:28px}
  .tgrid{grid-template-columns:1fr 1fr;gap:10px}.tcard{min-height:0;padding:14px;border-radius:18px}.tcard .th{gap:8px;margin-bottom:8px;align-items:flex-start}.tcard .th img{width:36px;height:36px}.tcard h3{font-size:13px}.tcard p{font-size:12px}.thead{grid-template-columns:1fr;gap:18px}.phases.big{justify-content:start}
  .steps{grid-template-columns:1fr}.steps svg.line{display:none}
  .ways{grid-template-columns:1fr}
  .mbstage .phone{width:min(300px,84vw)}
}



.dl{background:var(--teal);color:var(--fg);position:relative;overflow:hidden}
.dl .inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:clamp(72px,9vw,128px) var(--pad)}
.dlart{position:relative;display:grid;place-items:center;min-height:720px}
.dlart .phone{width:300px;position:relative;z-index:1}
.dring{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px;border-radius:50%;border:2px solid rgba(242,119,227,.55);will-change:transform,opacity;pointer-events:none}
.dring.r2{border-color:rgba(191,152,255,.5)}.dring.r3{border-color:rgba(252,249,251,.35)}.dring.r4{border-color:rgba(242,119,227,.35);border-width:14px}
.startscr{height:640px;position:relative;background:#FCF9FB}
.startscr img{display:block;width:100%;height:100%;object-fit:cover}
.startscr .tag2{position:absolute;left:0;right:0;top:57.5%;text-align:center;font:600 19px/1.25 var(--f-head);color:var(--teal)}
.dl{overflow:hidden}
.dl h2{margin-bottom:12px}
.dl .lead{margin-bottom:28px}
.dl .row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.qrcard{background:var(--pink-50);border-radius:20px;padding:12px;display:grid;gap:8px;justify-items:center}
.qrcard svg{width:110px;height:110px}
.qrcard small{font:500 10px/1.2 var(--f-text);color:var(--n-500)}
.form{background:rgba(252,249,251,.06);border:1px solid rgba(252,249,251,.12);border-radius:26px;padding:26px 24px}
.form h3{font-size:18px;margin-bottom:6px}
.form p{font:500 13px/1.5 var(--f-text);opacity:.8;margin-bottom:18px}
.form .in{display:flex;gap:8px}
.form input{flex:1;min-width:0;font:500 15px/1 var(--f-text);padding:16px 18px;border-radius:999px;border:1px solid rgba(252,249,251,.2);background:rgba(0,0,0,.15);color:var(--fg);outline:none}
.form input:focus{border-color:var(--pink-500)}
.form input::placeholder{color:rgba(252,249,251,.5)}
.form .btn{padding:16px 22px}
.form label{display:flex;gap:10px;align-items:flex-start;font:400 12px/1.45 var(--f-text);opacity:.8;margin-top:14px;cursor:pointer}
.form label input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--pink-700);padding:0;border-radius:4px}
.form label a{color:var(--fg)}
.form .ok{display:none;font:600 14px/1.4 var(--f-head);color:var(--pink-500);margin-top:12px}
.form.sent .in,.form.sent label{display:none}.form.sent .ok{display:block}

/* ---------- 13 · вопросы ---------- */
.faq{background:var(--pink-50);color:var(--n-900)}
.faq .inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;padding:clamp(72px,9vw,128px) var(--pad)}
.faq h2{margin-bottom:12px}
.acc{display:grid;gap:8px}
.q{background:#fff;border-radius:18px;overflow:hidden}
.q button{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 16px/1.3 var(--f-head);padding:18px 20px;border:0;background:transparent;color:var(--n-900);cursor:pointer}
.q button i{width:28px;height:28px;border-radius:50%;background:var(--purple-300);display:grid;place-items:center;flex:none;position:relative;transition:transform .3s}
.q button i::before,.q button i::after{content:"";position:absolute;background:var(--n-900);border-radius:1px}
.q button i::before{width:12px;height:2px}.q button i::after{width:2px;height:12px;transition:opacity .3s}
.q.open button i{transform:rotate(90deg)}.q.open button i::after{opacity:0}
.q .a{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1)}
.q .a p{padding:0 20px 18px;font:500 14px/1.55 var(--f-text);color:var(--n-600)}

/* ---------- подвал ---------- */
.foot{background:var(--n-900);color:var(--pink-50);padding:48px var(--pad) calc(32px + env(safe-area-inset-bottom,0px))}
.foot .inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.foot .logo{margin-bottom:14px}
.foot p{font:400 13px/1.55 var(--f-text);opacity:.7;max-width:34em}
.foot h5{font:600 12px/1 var(--f-text);letter-spacing:.04em;text-transform:uppercase;opacity:.5;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{color:var(--pink-50);text-decoration:none;font:500 14px/1.3 var(--f-text);opacity:.85}
.foot a:hover{opacity:1;text-decoration:underline}
.foot .bottom{max-width:1440px;margin:36px auto 0;padding-top:20px;border-top:1px solid rgba(252,249,251,.12);display:flex;justify-content:space-between;align-items:center;gap:12px;white-space:nowrap;font:400 12px/1.4 var(--f-text);opacity:.6}
.foot .age{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1.5px solid rgba(252,249,251,.5);font:700 12px/1 var(--f-display);margin-right:10px;vertical-align:middle}

@media (max-width:980px){
  .dl .inner,.faq .inner{grid-template-columns:minmax(0,1fr);gap:28px}.dl .inner>div:first-child{text-align:center}.dl .row{justify-content:center}.dlart{min-height:0;padding:30px 0}.dl .lead{margin-inline:auto}
  .foot .inner{grid-template-columns:1fr;gap:26px}
}
@media (max-width:560px){.dl .row{gap:14px}}