/* Scalify: свои компоненты поверх base.css (ч/б вариант frem-design, тот же, что у лендинга X Radar).
   Белый — единственный акцент, серые — второй план.
   Анимируются только transform и opacity; prefers-reduced-motion всё останавливает. */

.ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:0 0 auto}

/* ---------- герой: текст слева, телефон с перепиской справа ---------- */
.hero2{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:56px 40px;position:relative}
.hero2 > *{min-width:0}
.hero2 h1{font-size:clamp(40px,7vw,104px);font-weight:500;letter-spacing:-.02em;text-transform:uppercase;line-height:.92}
.hero2 h1 .ln{display:block;animation:up 1.1s var(--ease) both}
.hero2 h1 .ln:nth-child(2){animation-delay:.12s}
.hero2 h1 .ln:nth-child(3){animation-delay:.24s}
.hero2 .lead{color:var(--text-2);max-width:46ch;margin:24px 0 32px}
.hero2 .cta{display:flex;gap:14px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);padding:10px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--line) inset;margin-bottom:26px}
.pill i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:blink 1.6s ease-in-out infinite;flex:0 0 auto}
@keyframes blink{50%{opacity:.25}}

/* телефон: iPhone в настоящих пропорциях 9:19.5 — титановая рамка, чёрная кромка, остров, статус-бар, полоска «домой» */
.phone-wrap{position:relative;width:min(100%,318px);margin-inline:auto}
.iphone{position:relative;aspect-ratio:9/19.5;border-radius:56px;padding:4px;
  background:linear-gradient(135deg,#8d8d92 0%,#3b3b3f 14%,#1d1d20 38%,#2a2a2d 62%,#57575c 86%,#9a9aa0 100%);
  box-shadow:0 0 0 1px #000,0 50px 100px -40px rgba(255,255,255,.28),0 30px 60px -30px #000}
.iphone::before{content:"";position:absolute;inset:4px;border-radius:52px;background:#000}
.iphone .side{position:absolute;width:3px;border-radius:2px;background:linear-gradient(180deg,#6a6a6e,#2a2a2d 30%,#2a2a2d 70%,#5a5a5e)}
.iphone .l1{left:-3px;top:15.5%;height:4%}
.iphone .l2{left:-3px;top:22.5%;height:7.5%}
.iphone .l3{left:-3px;top:32%;height:7.5%}
.iphone .r1{right:-3px;top:26%;height:12%}
.scr{position:relative;height:100%;margin:0;border-radius:44px;overflow:hidden;background:#0a0a0b;display:grid;grid-template-rows:auto auto 1fr auto;
  transform:translateZ(0);inset:0;box-shadow:0 0 0 8px #000}
.iphone > .scr{position:absolute;inset:12px;height:auto}
.island{position:absolute;left:50%;top:11px;translate:-50% 0;width:31%;height:27px;border-radius:20px;background:#000;z-index:3}
.island::after{content:"";position:absolute;right:9px;top:50%;translate:0 -50%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b2f3a,#0a0a0c 60%)}
.status{display:flex;justify-content:space-between;align-items:center;height:50px;padding:6px 26px 0 30px;background:#161618;color:#fff;
  font:600 15px/1 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;letter-spacing:-.01em}
.status b{font-weight:600}
.status span{display:flex;align-items:center;gap:5px}
.status svg{fill:currentColor;display:block}
.chat-top{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:6px;padding:4px 12px 9px;background:#161618;border-bottom:1px solid rgba(255,255,255,.08)}
.chat-top .back{color:#fff;display:grid;place-items:center start;padding-left:2px}
.chat-top .ttl{text-align:center;min-width:0}
.chat-top b{display:block;font:600 16px/1.2 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif}
.chat-top small{display:block;font:400 12px/1.3 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;color:#8e8e93}
.chat-top .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,#fff,#b9b9bd);color:#000;display:grid;place-items:center;font:600 13px/1 var(--f-body)}
.chat{padding:14px 14px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:9px;min-height:0;overflow:hidden;background:#0a0a0b}
.msg{max-width:78%;padding:9px 13px 8px;border-radius:19px;font:400 15px/1.33 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;opacity:0;animation:14s var(--ease-out) infinite}
.msg small{display:block;margin-top:4px;font:400 10.5px/1 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;opacity:.5;text-align:right}
.msg.in{align-self:flex-start;background:#232326;color:#fff;border-bottom-left-radius:5px}
.msg.out{align-self:flex-end;background:#fff;color:#000;border-bottom-right-radius:5px}
.msg.out small::after{content:" ✓✓";letter-spacing:-.25em}
.msg.m1{animation-name:m1}.msg.m2{animation-name:m2}.msg.m3{animation-name:m3}.msg.m4{animation-name:m4}
@keyframes m1{0%,3%{opacity:0;transform:translateY(10px)}8%,93%{opacity:1;transform:none}100%{opacity:0}}
@keyframes m2{0%,17%{opacity:0;transform:translateY(10px)}22%,93%{opacity:1;transform:none}100%{opacity:0}}
@keyframes m3{0%,33%{opacity:0;transform:translateY(10px)}38%,93%{opacity:1;transform:none}100%{opacity:0}}
@keyframes m4{0%,47%{opacity:0;transform:translateY(10px)}52%,93%{opacity:1;transform:none}100%{opacity:0}}
.chat-input{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:7px 10px 28px;background:#161618;border-top:1px solid rgba(255,255,255,.08);color:#8e8e93}
.chat-input span{height:34px;border-radius:17px;background:#0a0a0b;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;display:flex;align-items:center;padding:0 13px;
  font:400 15px/1 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;color:#6e6e73}
.home{position:absolute;left:50%;bottom:8px;translate:-50% 0;width:36%;height:5px;border-radius:3px;background:#fff;z-index:3}
/* уведомление владельцу — как баннер iOS, висит у верхнего края телефона, над пустой частью чата */
.lead-card{position:absolute;left:-92px;top:56px;width:292px;border-radius:24px;background:rgba(246,246,248,.97);color:#000;padding:13px 15px 14px;z-index:4;
  box-shadow:0 30px 70px -20px #000,0 0 50px -10px rgba(255,255,255,.35);display:grid;gap:5px;opacity:0;animation:lead 14s var(--ease-out) infinite}
@keyframes lead{0%,60%{opacity:0;transform:translateY(-16px) scale(.94)}66%,93%{opacity:1;transform:none}100%{opacity:0}}
.lead-card .k{display:flex;align-items:center;gap:8px;font:500 12px/1 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;color:#5c5c61;letter-spacing:.02em;text-transform:uppercase}
.lead-card .k i{width:22px;height:22px;border-radius:6px;background:#000;color:#fff;display:grid;place-items:center;font-size:12px;font-style:normal}
.lead-card .k em{margin-left:auto;font-style:normal;text-transform:none;color:#8e8e93}
.lead-card b{font:600 15px/1.25 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif}
.lead-card dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:2px 0 0;font:400 14px/1.3 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif}
.lead-card dt{color:#6b6b70}
.lead-card dd{margin:0;text-align:right;font-weight:600}
.demo-note{font:500 12px/1.4 var(--f-mono);color:var(--dim);letter-spacing:.04em;margin:44px 0 0;text-align:center}

/* ---------- цифры ---------- */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.num{border-radius:var(--r-md);background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;padding:22px 22px 20px;display:grid;gap:8px}
.num b{font:700 clamp(32px,3.6vw,52px)/1 var(--f-mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.num span{font:500 12px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- калькулятор потерь (тихий режим) ---------- */
.calc{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.calc > *{min-width:0}
.calc .form > div{min-width:0}
.calc .summary .big{font-size:clamp(40px,4.6vw,66px);flex-wrap:wrap}
.calc .summary p{margin:0;color:var(--muted);font-size:15px}

/* ---------- услуги: плитки с иконками ---------- */
.steps6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.st{position:relative;border-radius:var(--r-md);background:rgba(6,6,6,.9);box-shadow:0 0 0 1.5px rgba(255,255,255,.18) inset;padding:26px;display:grid;gap:14px;
  align-content:start;transition:transform .35s var(--ease),box-shadow .35s}
.st:hover{transform:translateY(-4px);box-shadow:0 0 0 1.5px #fff inset,0 0 30px rgba(255,255,255,.08)}
.st .ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#fff;color:#000;font-size:24px;transition:transform .5s var(--ease)}
.st:hover .ic{transform:rotate(-8deg) scale(1.08)}
.st .metal{position:absolute;right:20px;top:18px;font-size:56px}
.st h3{font-size:21px;font-weight:400}
.st p{margin:0;color:var(--muted)}
.st .for{font:500 11px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

/* ---------- контакт ---------- */
.join{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
.join > *{min-width:0}
.join .form p{margin:0;color:var(--text-2)}
.join ol{margin:0;padding-left:22px;display:grid;gap:10px;color:var(--text-2)}
.join ol b{color:#fff;font-weight:600}

/* ---------- вопросы ---------- */
.faq{display:grid;gap:12px}
.faq details{border-radius:var(--r-md);background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;transition:box-shadow .3s}
.faq details[open]{box-shadow:0 0 0 1px var(--line-2) inset}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 22px;position:relative;font:400 clamp(17px,1.6vw,20px)/1.3 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;translate:0 -50%;font:300 28px/1 var(--f-display);color:#fff;transition:rotate .3s var(--ease)}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0;padding:0 22px 22px;color:var(--text-2);max-width:70ch}

.trust.three{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:980px){
  .hero2{grid-template-columns:1fr;padding-top:36px}
  .phone-wrap{width:min(100%,300px)}
  .lead-card{left:-22px;width:270px}
  .nums{grid-template-columns:1fr 1fr}
  .steps6{grid-template-columns:1fr 1fr}
  .calc,.join{grid-template-columns:1fr}
  .trust.three{grid-template-columns:1fr}
}
@media (max-width:640px){
  .steps6{grid-template-columns:1fr}
  .hero2 .cta .btn{width:100%}
  .phone-wrap{width:min(100%,290px)}
  .lead-card{left:-14px;top:54px;width:262px}
}
@media (prefers-reduced-motion:reduce){
  .msg,.lead-card{opacity:1}
}

/* ================= инфографика ================= */

/* ---------- сутки: два циферблата на 24 часа ---------- */
.day-panel{border-radius:var(--r-lg);background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;padding:28px;display:grid;gap:22px}
.rng label{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}
.rng label b{font:700 15px/1.2 var(--f-mono);color:#fff}
input[type=range]{appearance:none;-webkit-appearance:none;padding:0;height:28px;background:none;box-shadow:none;border-radius:0;cursor:pointer}
input[type=range]:hover,input[type=range]:focus{background:none;box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:#2c2c2c}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-9px;box-shadow:0 0 0 5px rgba(255,255,255,.12)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#2c2c2c}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12)}
input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:4px}
.day-out{border-top:1px solid rgba(255,255,255,.08);padding-top:20px;display:grid;gap:8px;color:var(--muted)}
.day-out > b{font:700 clamp(40px,4.4vw,62px)/1 var(--f-mono);letter-spacing:-.04em;color:#fff;text-shadow:0 0 30px rgba(255,255,255,.2)}
.day-out span b{color:#fff;font-weight:600}

/* ---------- путь заявки ---------- */
.path{display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,150px) 170px minmax(60px,150px) minmax(0,1.25fr);align-items:stretch;height:400px}
.path .src,.path .dst{display:grid;align-items:center}
.path .src{grid-template-rows:repeat(4,1fr)}
.path .dst{grid-template-rows:repeat(3,1fr)}
.node{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r);background:rgba(6,6,6,.9);box-shadow:0 0 0 1.5px rgba(255,255,255,.22) inset;
  font:400 17px/1.2 var(--f-display);min-width:0;transition:box-shadow .35s,transform .35s var(--ease)}
.node:hover{box-shadow:0 0 0 1.5px #fff inset,0 0 26px rgba(255,255,255,.1)}
.src .node:hover{transform:translateX(4px)}
.dst .node:hover{transform:translateX(-4px)}
.node > .ico{font-size:22px}
.node.big{padding:18px 20px;border-radius:var(--r-md);gap:16px}
.node.big > .ico{width:44px;height:44px;padding:11px;border-radius:13px;background:#fff;color:#000}
.node.big b{display:block;font-weight:400}
.node.big small{display:block;margin-top:5px;font:500 14px/1.35 var(--f-body);color:var(--muted)}
.wire{width:100%;height:100%;overflow:visible}
.wire path{fill:none;vector-effect:non-scaling-stroke}
.wire .base path{stroke:rgba(255,255,255,.2);stroke-width:1.5}
.wire .run path{stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:2 26;animation:wire 1.4s linear infinite}
.wire .run path:nth-child(2){animation-delay:-.5s}.wire .run path:nth-child(3){animation-delay:-.9s}.wire .run path:nth-child(4){animation-delay:-.2s}
@keyframes wire{to{stroke-dashoffset:-28}}
.hub{position:relative}
.hub .core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:112px;height:112px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-size:46px;
  box-shadow:0 0 0 12px rgba(255,255,255,.06),0 0 70px rgba(255,255,255,.35)}
.hub .core::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px #fff;animation:ripple 2.4s var(--ease-out) infinite}
@keyframes ripple{from{transform:scale(1);opacity:.7}to{transform:scale(2);opacity:0}}
.hub .cap{position:absolute;left:-20px;right:-20px;top:calc(50% + 84px);text-align:center;display:grid;gap:6px}
.hub .cap b{font:400 18px/1 var(--f-display)}
.hub .cap small{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- одна ночь: две дорожки ---------- */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.lane{border-radius:var(--r-lg);padding:30px;display:grid;gap:22px;align-content:start;grid-template-rows:auto 1fr auto;min-width:0}
.lane.bad{background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset}
.lane.good{background:var(--card);box-shadow:0 0 0 2px var(--line-3) inset,0 0 40px rgba(255,255,255,.1)}
.lane.good .kicker{color:#fff}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0;align-content:start}
.tl li{position:relative;display:grid;grid-template-columns:92px 1fr;column-gap:34px;padding-bottom:24px}
.tl li::before{content:"";position:absolute;left:104px;top:5px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px var(--muted-2) inset;background:#000;z-index:1}
.tl li::after{content:"";position:absolute;left:109px;top:10px;bottom:-5px;width:1.5px;background:rgba(255,255,255,.22)}
.tl li:last-child{padding-bottom:0}
.tl li:last-child::after{display:none}
.tl time{font:700 17px/1.2 var(--f-mono);color:var(--text-2);text-align:right;white-space:nowrap}
.tl b{font:400 18px/1.2 var(--f-display);grid-column:2}
.tl span{grid-column:2;color:var(--muted);font-size:15px;margin-top:5px}
.lane.good .tl li::before{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7)}
.lane.good .tl li::after{background:#fff}
.lane.good .tl time{color:#fff}
.lane.bad .tl b{color:var(--text-2)}
/* провал: длинная пунктирная пауза */
.tl li.gap{padding-block:26px 50px}
.tl li.gap::before{display:none}
.tl li.gap::after{top:-14px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.35) 0 4px,transparent 4px 10px)}
.tl li.gap time{font-size:14px;color:var(--muted-2)}
.tl li.gap b{color:var(--dim)}
.res{font:500 14px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:16px 20px;border-radius:var(--r);text-align:center}
.lane.bad .res{color:var(--muted-2);box-shadow:0 0 0 1px rgba(255,255,255,.16) inset;text-decoration:line-through;text-decoration-color:rgba(255,255,255,.35)}
.lane.good .res{background:#fff;color:#0a0a0a;font-weight:700}

/* ---------- точки в калькуляторе ---------- */
.dots-box{display:grid;gap:12px}
.dots{display:flex;flex-wrap:wrap;gap:6px;min-height:12px}
.dots i,.dots-cap .d{width:12px;height:12px;border-radius:50%;background:#2b2b2b;flex:0 0 auto}
.dots i.on,.dots-cap .d.on{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6)}
.dots-cap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px!important;color:var(--muted-2)!important}
.dots-cap .d.on{margin-left:10px}
.stp .kicker{color:var(--muted)}

@media (max-width:980px){
  .lanes{grid-template-columns:1fr}
  /* путь заявки складывается в столбик: каналы, узел, результаты */
  .path{grid-template-columns:1fr;height:auto;gap:0}
  .path .wire{display:none}
  .path .src{grid-template-rows:none;grid-template-columns:1fr 1fr;gap:10px}
  .path .dst{grid-template-rows:none;gap:10px}
  .hub{display:grid;justify-items:center;gap:16px;padding-block:44px}
  .hub::before,.hub::after{content:"";position:absolute;left:50%;width:1.5px;height:32px;background:linear-gradient(rgba(255,255,255,.1),#fff)}
  .hub::before{top:6px}.hub::after{bottom:6px}
  .hub .core,.hub .cap{position:relative;left:auto;right:auto;top:auto;translate:none}
}
@media (max-width:640px){
  .lane{padding:22px}
  .tl li{grid-template-columns:74px 1fr;column-gap:30px}
  .tl li::before{left:84px}.tl li::after{left:89px}
  .tl time{font-size:15px}
  .node{font-size:15px;padding:13px 14px}
  .day-panel{padding:20px}
}

/* узкий телефон: уведомление короче, чтобы не закрывало первое сообщение */
@media (max-width:980px){
  .lead-card dl{display:none}
  .msg{font-size:14px}
}

/* ---------- цветные значки сервисов ----------
   Страница остаётся ч/б; цвет несут только значки WhatsApp, Telegram, Авито и т.п. */
.app{width:1em;height:1em;display:inline-block;flex:0 0 auto;vertical-align:-.14em}
.node > .app{font-size:32px}
.node.big > .app{font-size:48px}
.lead-card .k .app{font-size:22px}
.st .ic.apps{background:none;width:auto;height:52px;display:flex;justify-content:flex-start;gap:8px;font-size:52px;border-radius:0;transform-origin:26px 50%}
.st .ic.apps .app{filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.num{position:relative}
.num .apps-row{position:absolute;right:18px;top:20px;display:flex;gap:6px;font-size:26px;font-style:normal}
.mq .app{font-size:.82em;margin-right:.28em;vertical-align:-.1em}
@media (max-width:640px){
  .node > .app{font-size:26px}
  .node.big > .app{font-size:44px}
  .num .apps-row{font-size:20px;gap:4px;right:14px}
}

/* ---------- неделя: сетка 7 x 24 ---------- */
.week{display:grid;grid-template-columns:1.7fr 1fr;gap:28px;align-items:center}
.week > *{min-width:0}
.wk-main{display:grid;gap:12px}
.wk-hours{display:flex;justify-content:space-between;margin-left:40px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--muted-2)}
.wk-grid{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:5px 4px;align-items:center}
.wk-grid b{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.c{position:relative;display:block;aspect-ratio:1;border-radius:22%;background:#141414;box-shadow:0 0 0 1px rgba(255,255,255,.07) inset;overflow:hidden}
.c::before,.c::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .45s var(--ease)}
.c::before{background:#fff}                                   /* вы на связи */
.c::after{background:linear-gradient(135deg,#8c8c8c,#4a4a4a);transition-delay:calc(var(--h,0) * 22ms + var(--d,0) * 30ms)}  /* автоответ: волна слева направо */
.c.on::before{opacity:1}
.wk-grid.auto .c:not(.on)::after,.c.auto::after{opacity:1}
.c.on{box-shadow:0 0 10px rgba(255,255,255,.35)}
.wk-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:6px 0 0 40px;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wk-legend span{display:inline-flex;align-items:center;gap:8px}
.wk-legend .c{width:14px;flex:0 0 auto}
.wk-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wk-days button{border:0;cursor:pointer;padding:10px 0;border-radius:10px;background:#151515;color:var(--dim);font:500 12px/1 var(--f-mono);letter-spacing:.04em;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;transition:background-color .2s,color .2s}
.wk-days button[aria-pressed="true"]{background:#fff;color:#000;box-shadow:none}
.day-out > b small{font:500 .3em/1 var(--f-mono);letter-spacing:.02em;color:var(--muted);text-shadow:none}
.sw{display:flex;align-items:center;gap:14px;width:100%;border:0;cursor:pointer;padding:14px 16px;border-radius:16px;background:#151515;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;font:500 15px/1 var(--f-display);text-align:left;transition:box-shadow .3s}
.sw i{position:relative;width:52px;height:30px;border-radius:15px;background:#2c2c2c;flex:0 0 auto;transition:background-color .3s}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#8a8a8a;transition:translate .35s var(--ease),background-color .3s}
.sw em{margin-left:auto;font:500 12px/1 var(--f-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.sw[aria-checked="true"]{box-shadow:0 0 0 1.5px #fff inset,0 0 26px rgba(255,255,255,.14)}
.sw[aria-checked="true"] i{background:#fff}
.sw[aria-checked="true"] i::after{translate:22px 0;background:#000}
.sw[aria-checked="true"] em{color:#fff}
@media (max-width:980px){
  .week{grid-template-columns:1fr}
}
@media (max-width:640px){
  .wk-grid{grid-template-columns:24px repeat(24,minmax(0,1fr));gap:3px 2px}
  .wk-grid b{font-size:10px;letter-spacing:0}
  .wk-hours,.wk-legend{margin-left:26px}
  .c.on{box-shadow:none}
}

/* ---------- переключатель ниши над телефоном ---------- */
.niche{display:flex;justify-content:center;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.niche button{border:0;cursor:pointer;padding:10px 14px;border-radius:999px;background:none;color:var(--muted);font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 0 0 1px var(--line) inset;transition:color .25s,background-color .25s,box-shadow .25s}
.niche button:hover{color:#fff;box-shadow:0 0 0 1px var(--line-2) inset}
.niche button[aria-pressed="true"]{background:#fff;color:#000;box-shadow:none}

/* ---------- секундомер ---------- */
.wait{padding-block:72px 0;display:grid;gap:14px}
.wait-row{display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:end}
.wait-t{font:700 clamp(84px,17vw,250px)/.82 var(--f-mono);letter-spacing:-.06em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 0%,#d6d6d6 40%,#5a5a5a 80%,#1c1c1c 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wait-row p{margin:0 0 .5em;max-width:30ch;font:400 clamp(18px,1.9vw,26px)/1.25 var(--f-display);color:var(--text-2)}

/* ---------- полоса сравнения ---------- */
.cmp{margin-top:28px;border-radius:var(--r-lg);background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;padding:26px 30px;display:grid;gap:16px}
.cmp-row{display:grid;grid-template-columns:170px 1fr 170px;gap:20px;align-items:center}
.cmp-row > span{color:var(--muted);font-size:15px}
.cmp-row > b{font:700 17px/1.2 var(--f-mono);text-align:right;white-space:nowrap}
.cbar{height:22px;border-radius:6px;background:rgba(255,255,255,.04);overflow:hidden}
.cbar i{display:block;height:100%;width:4px;border-radius:6px;background:#fff;box-shadow:0 0 14px #fff}
.cbar.long i{width:100%;background:repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 3px,transparent 3px 9px);box-shadow:none}
.cmp-row:first-of-type > b{color:var(--muted)}

/* ---------- три глагола ---------- */
.verbs{padding-block:40px 0;display:grid}
.vb{display:flex;align-items:baseline;gap:12px 28px;flex-wrap:wrap;padding-block:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.vb b{font:500 clamp(34px,7.6vw,112px)/1 var(--f-display);text-transform:uppercase;letter-spacing:-.02em}
.vb b.o{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.7)}
.vb span{font:500 clamp(11px,1vw,13px)/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){
  .wait-row{grid-template-columns:1fr}
  .cmp-row{grid-template-columns:1fr auto;gap:8px 16px}
  .cmp-row .cbar{grid-column:1 / -1;grid-row:2}
}
@media (max-width:640px){
  .cmp{padding:20px}
  .vb b.o{-webkit-text-stroke-width:1px}
}

/* путь заявки: SVG-провода не должны растягивать строку сетки выше 400px */
@media (min-width:981px){
  .path{grid-template-rows:minmax(0,1fr)}
  .path > *{min-height:0}
}

/* ================= версия «сайт, который продаёт» (14.11.2026, вечер) ================= */
/* ---------- пример сайта внутри телефона ---------- */
.sbar{padding:4px 12px 9px;background:#161618;border-bottom:1px solid rgba(255,255,255,.08)}
.sbar span{display:flex;align-items:center;justify-content:center;gap:6px;height:32px;border-radius:10px;background:#0a0a0b;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  font:400 13px/1 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;color:#c7c7cc}
.site{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:#0a0a0b}
.s-hero{padding:20px 16px 18px;display:grid;gap:9px;background:radial-gradient(120% 100% at 85% 0%,#44444a 0%,#17171a 55%,#0a0a0b 100%)}
.s-hero small{font:500 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#a3a3a3}
.s-hero b{font:500 20px/1.08 var(--f-display);text-transform:uppercase;letter-spacing:-.01em}
.s-hero em{font:400 12.5px/1.35 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;font-style:normal;color:#cfcfcf}
.s-list{padding:12px;display:grid;gap:8px}
.s-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 13px;border-radius:14px;background:#161618;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  font:500 14px/1.2 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;opacity:0;animation:14s var(--ease-out) infinite}
.s-row b{font:700 12.5px/1 var(--f-mono);white-space:nowrap}
.s-row.m1{animation-name:m1}.s-row.m2{animation-name:m2}.s-row.m3{animation-name:m3}
.sfoot{padding:9px 12px 28px;background:#161618;border-top:1px solid rgba(255,255,255,.08)}
.sfoot span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:14px;background:#fff;color:#000;
  font:600 15px/1 -apple-system,"SF Pro Text","Onest",system-ui,sans-serif;animation:tap 14s var(--ease-out) infinite}
@keyframes tap{0%,52%{transform:none;box-shadow:0 0 0 0 rgba(255,255,255,0)}56%{transform:scale(.95);box-shadow:0 0 0 7px rgba(255,255,255,.28)}60%,100%{transform:none;box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ---------- проверка сайта: список тумблеров ---------- */
.chk{display:grid;gap:10px}
.chk .sw{line-height:1.3;font-size:clamp(14px,1.25vw,16px)}
.chk .sw span{flex:1;min-width:0}
.chk .sw em{margin-left:0}
.day-panel > .btn{width:100%}

/* ---------- пример поисковой выдачи и ответа нейросети ---------- */
.serp{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.serp-card{border-radius:var(--r-md);background:var(--plane);box-shadow:0 0 0 1px var(--line-soft) inset;padding:24px;display:grid;gap:13px;align-content:start;min-width:0}
.serp-card.ai{background:var(--card);box-shadow:0 0 0 1.5px var(--line-2) inset,0 0 40px rgba(255,255,255,.07)}
.serp-q{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:999px;background:#151515;box-shadow:0 0 0 1px var(--line) inset;font:500 15px/1.25 var(--f-body);color:var(--text-2)}
.serp-q .ico{font-size:18px;color:#fff}
.serp-card .u{font:500 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--muted-2)}
.serp-card h3{font-size:clamp(18px,1.7vw,21px);font-weight:400}
.serp-card p{margin:0;color:var(--muted);font-size:15px}
.serp-card p.ans{color:var(--text-2);font-size:17px;line-height:1.45}
.serp-card p.ans b{color:#fff;font-weight:600}
.serp-meta{display:flex;flex-wrap:wrap;gap:8px}
.serp-meta span{padding:8px 12px;border-radius:999px;box-shadow:0 0 0 1px var(--line-2) inset;font:500 12px/1 var(--f-mono);letter-spacing:.04em;white-space:nowrap}
.serp-card .kicker{line-height:1.5;margin-top:4px}
.serp-note{grid-column:1 / -1;margin:0;font:500 12px/1.4 var(--f-mono);letter-spacing:.04em;color:var(--dim)}

/* ---------- опции: тише основных карточек ---------- */
.steps6.opt .st{background:var(--plane);box-shadow:0 0 0 1px var(--line) inset}
.steps6.opt .st .metal{font-size:48px;top:14px}

@media (max-width:980px){
  .serp{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .s-row{opacity:1}
  .sfoot span{animation:none}
}
/* уведомление о заявке — над кнопкой «Записаться», чтобы не закрывать заголовок и цены */
#phone .lead-card{top:auto;bottom:98px}

/* SEO: плашка «Создание лендингов…» теперь внутри h1, поэтому строки заголовка сдвинулись на один номер */
.hero2 h1 .pill{display:flex;width:max-content;max-width:100%}
.hero2 h1 .ln:nth-child(2){animation-delay:0s}
.hero2 h1 .ln:nth-child(3){animation-delay:.12s}
.hero2 h1 .ln:nth-child(4){animation-delay:.24s}