/* Главная (предпросмотр) — монохром, реальный интерфейс в кадре, крупная плотная типографика. */
:root{
  --black:#000;--panel:#111;--panel-2:#191919;--line-d:#232323;--white:#fff;--grey:#8C8C8C;--grey-2:#B5B5B5;
  --paper:#EDEDED;--paper-line:rgba(0,0,0,.06);--ink:#0A0A0A;--ink-2:#4D4D4D;
  --teal:#2EC4BE;--orange:#FF6B3D;--amber:#E9B44C;
  --font:'Inter Tight',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,.8,.22,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.hp{margin:0;background:var(--black);color:var(--white);font:17px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(.hp) a{color:inherit;text-decoration:none}
:where(.hp) :where(h1,h2,h3,p){margin:0}
:where(.hp) img{display:block;max-width:100%}
.hp :focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}
.w{width:min(1312px,calc(100% - 64px));margin:0 auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:#fff;color:#000;padding:8px 12px;border-radius:8px}
h1,h2,h3{font-weight:600;letter-spacing:-.045em;line-height:.98}

/* Кнопки */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:64px;padding:0 30px;border-radius:999px;font:500 17px var(--font);letter-spacing:-.01em;border:0;cursor:pointer;transition:transform .3s var(--ease),background .3s}
.pill:hover{transform:scale(1.03)}
.pill-white{background:#EDEDED;color:#000}
.pill-dark{background:#141414;color:#fff;border:1px solid #262626}
.pill-sm{height:56px;padding:0 22px;font-size:15px}
.pill svg{width:18px;height:18px}
.txt-link{font-size:15px;color:var(--grey-2);border-bottom:1px solid #3a3a3a;padding-bottom:2px;transition:color .2s,border-color .2s;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;font-family:inherit}
.txt-link:hover{color:#fff;border-color:#fff}

/* Шапка: светлеет над светлыми секциями */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:color .35s,background .35s,transform .45s var(--ease)}
.top.solid{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.top.solid.on-light{background:rgba(237,237,237,.86)}
.top.away{transform:translateY(-100%)}
body:has(.drawer:not([hidden])) .top{transform:none}
.top-in{display:flex;align-items:center;height:80px;gap:24px}
.logo{display:flex;align-items:center;gap:10px}
.logo img{width:26px;height:26px}.logo .wm{width:132px;height:auto}
.logo .wm-d{display:none}
.top.on-light{color:var(--ink)}
.top.on-light .wm-l{display:none}.top.on-light .wm-d{display:block}
.top nav{display:flex;gap:38px;margin:0 auto;font-size:15px;color:var(--grey-2)}
.top.on-light nav{color:var(--ink-2)}
.top nav a:hover{color:currentColor;opacity:.7}
.top .pill{height:56px}
.top.on-light .pill-dark{background:#fff;color:#000;border-color:#d6d6d6}
.burger{display:none;margin-left:auto;width:52px;height:52px;border-radius:50%;border:1px solid #2a2a2a;background:#141414;color:#fff;cursor:pointer;position:relative}
.top.on-light .burger{background:#fff;color:#000;border-color:#d6d6d6}
.burger span{position:absolute;left:16px;right:16px;height:1.6px;background:currentColor;transition:transform .3s var(--ease)}
.burger span:first-child{top:20px}.burger span:last-child{bottom:20px}
.burger[aria-expanded=true] span:first-child{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:49;background:#000;padding:110px 24px 32px;display:flex;flex-direction:column;gap:6px;font-size:28px;letter-spacing:-.03em}
.drawer[hidden]{display:none}
.drawer a{padding:10px 0;border-bottom:1px solid #1d1d1d}
.drawer .pill{margin-top:24px;font-size:17px}

/* 1. Первый экран: реальный интерфейс крупным планом */
.hero{position:relative;height:100svh;min-height:680px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;text-align:center}
.hero-shot{position:absolute;inset:-10% -20% 0;background:url('/assets/home/screen-desktop.webp') 30% 20%/cover no-repeat;transform:perspective(1400px) rotateX(18deg) rotateZ(-8deg) scale(1.35);filter:grayscale(1) contrast(1.15) brightness(.5);opacity:.9;animation:drift 24s ease-in-out infinite alternate}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,transparent 0%,rgba(0,0,0,.55) 55%,#000 100%),linear-gradient(180deg,rgba(0,0,0,.2) 0%,transparent 30%,rgba(0,0,0,.92) 78%,#000 100%)}
@keyframes drift{from{transform:perspective(1400px) rotateX(18deg) rotateZ(-8deg) scale(1.35) translate3d(0,0,0)}to{transform:perspective(1400px) rotateX(16deg) rotateZ(-6deg) scale(1.42) translate3d(-3%,2%,0)}}
.hero-copy{position:relative;z-index:2;padding-bottom:9vh;max-width:980px}
.hero h1{font-size:clamp(46px,7vw,96px)}
.hero p{margin:22px auto 34px;max-width:620px;font-size:clamp(17px,1.4vw,20px);color:var(--grey-2)}
.hero-more{display:flex;justify-content:center;flex-wrap:wrap;gap:28px;margin-top:26px}

/* Метка сцены */

/* Секции */
.sec{position:relative;padding:150px 0}
.light{background:var(--paper);color:var(--ink)}
.h2{font-size:clamp(40px,5.4vw,80px)}
.h2.c{text-align:center;margin-inline:auto}
.lead{font-size:clamp(18px,1.5vw,21px);font-weight:500;line-height:1.35;letter-spacing:-.01em}
.muted{color:var(--grey);font-size:17px;line-height:1.5}
.light .muted{color:var(--ink-2)}

/* 2. Сцены с телефоном */
.story{display:grid;grid-template-columns:1fr 1fr;gap:96px}
.story-stage{position:sticky;top:110px;height:calc(100svh - 150px);min-height:560px;max-height:760px;border-radius:32px;background:linear-gradient(160deg,#1a1a1a,#0b0b0b);overflow:hidden;display:grid;place-items:center}
.phone{position:relative;width:min(300px,62%);aspect-ratio:780/1688;border-radius:46px;padding:10px;background:#1e1e1e;box-shadow:0 0 0 1.5px #3a3a3a,0 40px 80px rgba(0,0,0,.6)}
.phone::before{content:'';position:absolute;top:19px;left:50%;translate:-50% 0;width:30%;height:24px;border-radius:14px;background:#000;z-index:2}
.phone::after{content:'9:41';position:absolute;top:10px;left:10px;right:10px;height:44px;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='12' viewBox='0 0 54 12'%3E%3Cg fill='%23111'%3E%3Crect x='0' y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5' width='3' height='7' rx='1'/%3E%3Crect x='10' y='2' width='3' height='10' rx='1'/%3E%3Crect x='15' y='0' width='3' height='12' rx='1'/%3E%3Crect x='29.6' y='.6' width='20' height='10.8' rx='3' fill='none' stroke='%23111' stroke-width='1.2'/%3E%3Crect x='31.5' y='2.5' width='14' height='7' rx='1.6'/%3E%3Crect x='51' y='4' width='2' height='4' rx='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 22px center/48px 11px;color:#111;font:600 14px/1 var(--font);letter-spacing:-.01em;display:flex;align-items:center;padding-left:28px;z-index:1}
.phone img{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);box-sizing:border-box;padding-top:44px;background:#fff;object-fit:cover;object-position:top;border-radius:37px;opacity:0;transition:opacity .6s var(--ease)}
.phone img.on{opacity:1}
.story-steps{display:grid}
.story-step{min-height:80svh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s var(--ease)}
.story-step.on{opacity:1}
.story-step h2{font-size:clamp(38px,4vw,58px);margin-bottom:34px}
.story-step .lead{margin-bottom:22px;max-width:520px}
.story-step .muted{max-width:520px}
.story-step .phone-m{display:none}

/* 3. Тёмные карточки с живыми виджетами */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wcard{border-radius:28px;background:linear-gradient(180deg,#171717,#0e0e0e);border:1px solid #1f1f1f;padding:34px 30px;min-height:470px}
.wcard h3{font-size:26px;letter-spacing:-.03em;text-align:center;margin-bottom:34px}
.ring{position:relative;width:220px;margin:0 auto}
.ring svg{width:100%;display:block;transform:rotate(-90deg)}
.ring .v{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .v small{color:var(--grey);font-size:13px}
.ring .v b{font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1.05}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.minis div{padding:14px 8px;border-radius:16px;background:#1c1c1c;text-align:center}
.minis b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em}
.minis small{color:var(--grey);font-size:12px}
.rows{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:14px;padding:16px;border-radius:18px;background:#1c1c1c}
.row .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--c,#262626)}
.row .ic img{width:22px;height:22px;filter:invert(1)}
.row b{display:block;font-weight:500;font-size:15px}
.row small{color:var(--grey);font-size:13px}
.row .st{margin-left:auto;flex:none;padding:6px 10px;border-radius:999px;font-size:12px;background:#262626;color:var(--grey-2)}
.row .st.new{background:rgba(46,196,190,.14);color:var(--teal)}
.row .ok{margin-left:auto;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#2b2b2b;color:#fff}
.row .ok.g{background:var(--teal);color:#000}
.row .ok svg{width:16px;height:16px}

/* 4. Светлая: что изменится */
.change-title{margin-bottom:120px}
.change{display:grid;grid-template-columns:1fr 1fr;gap:96px}
.change-steps{display:grid}
.change-step{min-height:70svh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .5s var(--ease)}
.change-step.on{opacity:1}
.sq{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#DADADA;margin-bottom:34px}
.sq svg{width:24px;height:24px}
.change-step h3{font-size:clamp(36px,3.6vw,56px);margin-bottom:22px}
.change-step p{max-width:470px;color:var(--ink-2);font-size:18px}
.change-stage{position:sticky;top:120px;height:calc(100svh - 170px);min-height:520px;max-height:720px;border-radius:32px;overflow:hidden;background:#d9d9d9}
.change-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform 1.2s var(--ease)}
.change-stage img.on{opacity:1;transform:none}
.change-step .shot-m{display:none}

/* 5. Кейсы: типографика */
.cases{display:grid;border-top:1px solid var(--line-d)}
.case{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:40px;align-items:end;padding:44px 0;border-bottom:1px solid var(--line-d)}
.case .big{font-size:clamp(64px,8vw,128px);font-weight:600;letter-spacing:-.06em;line-height:.85}
.case .who{display:flex;align-items:center;gap:18px}
.case .lg{flex:none;width:64px;height:64px;border-radius:18px;object-fit:cover;background:#fff}
.case .lg-txt{display:grid;place-items:center;background:#1c1c1c;color:#fff;font-size:15px;font-weight:600;letter-spacing:-.02em}
.case .who b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.case .who small{color:var(--grey);font-size:15px}
.case .what{color:var(--grey-2);font-size:17px}
.case .what s{color:var(--grey);text-decoration-color:var(--orange)}
.cases-more{display:inline-flex;margin-top:40px}

/* 6. Диагностика */
.diag{text-align:center}
.diag .h2{max-width:1050px}
.diag .muted{max-width:560px;margin:28px auto 0;font-size:19px}
.diag-card{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;max-width:920px;margin:72px auto 48px;padding:44px;border-radius:32px;background:linear-gradient(180deg,#171717,#0e0e0e);border:1px solid #1f1f1f;text-align:left}
.diag-card .ring{width:240px;margin:0}
.diag-card .loss{font-size:clamp(34px,3.6vw,52px);font-weight:600;letter-spacing:-.045em;color:var(--orange);margin:10px 0 6px}
.zone{display:inline-block;padding:6px 12px;border-radius:999px;background:rgba(255,107,61,.12);color:var(--orange);font-size:13px}
.bars{display:grid;gap:14px;margin-top:26px}
.bars div{display:grid;grid-template-columns:96px 1fr 40px;gap:14px;align-items:center;font-size:15px;color:var(--grey-2)}
.bars i{height:6px;border-radius:6px;background:#262626;overflow:hidden}
.bars i::after{content:'';display:block;height:100%;width:var(--v);background:var(--c)}
.bars b{text-align:right;font-weight:500;color:#fff}
.diag .facts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 32px;margin-top:28px;color:var(--grey);font-size:15px}

/* 7. Как работаем + доверие (светлая) */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:80px}
.steps4 div{padding-top:24px;border-top:1px solid #cfcfcf}
.steps4 span{font-size:15px;color:var(--ink-2)}
.steps4 h3{font-size:30px;letter-spacing:-.035em;margin:56px 0 12px}
.steps4 p{color:var(--ink-2)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:120px}
.trust b{display:block;font-size:clamp(48px,5vw,80px);font-weight:600;letter-spacing:-.055em;line-height:1}
.trust span{display:block;margin-top:10px;color:var(--ink-2)}
.partners{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;margin-top:96px;padding-top:40px;border-top:1px solid #cfcfcf}
.partners img{height:28px;width:auto;filter:grayscale(1) contrast(1.2);opacity:.65}
.partners .pt{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:600;letter-spacing:-.04em;color:#6b6b6b}
.partners .pt img{border-radius:7px}

/* 8. Тарифы */
.prices{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:1px solid #cfcfcf}
.prices div{padding:32px 28px 36px 0}
.prices div+div{padding-left:28px;border-left:1px solid #cfcfcf}
.prices h3{font-size:18px;font-weight:500;letter-spacing:-.01em;margin-bottom:56px}
.prices b{display:block;font-size:clamp(34px,3.2vw,48px);font-weight:600;letter-spacing:-.05em;line-height:1}
.prices small{display:block;margin-top:10px;color:var(--ink-2);font-size:15px}
.prices .pop{position:relative}
.prices .pop em{position:absolute;top:-13px;left:28px;font-style:normal;font-size:12px;padding:5px 10px;border-radius:999px;background:#000;color:#fff}
.price-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;padding-top:32px;border-top:1px solid #cfcfcf}
.price-foot p{color:var(--ink-2)}
.price-foot .acts{display:flex;gap:12px;flex-wrap:wrap}
.light .pill-dark{background:#000;border-color:#000}
.light .pill-ghost{background:transparent;color:#000;border:1px solid #bdbdbd}

/* 9. Вопросы */
.faq-g{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
.faq details{border-top:1px solid #cfcfcf}
.faq details:last-child{border-bottom:1px solid #cfcfcf}
.faq summary{display:flex;justify-content:space-between;gap:24px;padding:28px 0;font-size:22px;font-weight:500;letter-spacing:-.02em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:14px;height:14px;margin-top:8px;background:linear-gradient(#000,#000) center/14px 1.5px no-repeat,linear-gradient(#000,#000) center/1.5px 14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 30px;max-width:640px;color:var(--ink-2);font-size:18px}

/* 10. Финал */
.final{text-align:center;padding:180px 0}
.final .h2{font-size:clamp(46px,7vw,110px);max-width:1100px}
.final .acts{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:48px}

/* Появление */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.rv{opacity:1;transform:none;transition:none}
  .hero-shot{animation:none}.pill:hover{transform:none}
  .story-step,.change-step{opacity:1}.phone img,.change-stage img{transition:none}
}

/* Окна (общий app.js) */
.hp dialog{border:0;border-radius:24px;padding:28px;max-width:min(560px,calc(100% - 32px));width:100%;color:#000;font-family:var(--font)}
.hp dialog::backdrop{background:rgba(0,0,0,.8)}
.hp .media-dialog{max-width:min(960px,calc(100% - 32px))}
.hp #video-container iframe,.hp #video-container video{width:100%;aspect-ratio:16/9;border:0;border-radius:14px}
.hp .dialog-close{float:right;width:40px;height:40px;border:0;border-radius:50%;background:#eee;font-size:24px;cursor:pointer}
.hp dialog h2{font-size:28px;margin:6px 0 10px}
.hp dialog label{display:grid;gap:6px;margin:12px 0;font-weight:500}
.hp dialog input,.hp dialog textarea,.hp dialog select{font:inherit;padding:12px 14px;border:1px solid #d6d6d6;border-radius:12px}
.hp dialog button[type=submit]{height:56px;padding:0 26px;border:0;border-radius:999px;background:#000;color:#fff;font:500 16px var(--font);cursor:pointer}
.hp dialog .field-error{color:#c2410c;font-size:14px}
.hp .flow-demo-dialog{padding:0;width:min(1420px,calc(100vw - 48px));height:min(850px,calc(100svh - 48px));max-width:none;max-height:none;overflow:hidden}
.flow-demo-toolbar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #e5e5e5}
.flow-demo-toolbar small{margin-left:10px;color:#777;font-weight:400;font-size:12px}
.flow-demo-toolbar button{width:36px;height:36px;border-radius:50%;border:1px solid #ddd;background:#fff;font-size:22px;cursor:pointer}
.flow-demo-dialog iframe{display:block;width:100%;height:calc(100% - 56px);border:0}
body.dialog-open{overflow:hidden}

/* Планшет */
@media (max-width:1100px){
  .top nav{display:none}
  .story,.change{grid-template-columns:1fr;gap:0}
  .story-stage,.change-stage{display:none}
  .story-step,.change-step{min-height:0;opacity:1;padding:56px 0}
  .story-step .phone-m{display:block;margin:0 auto 44px;width:min(280px,72%)}
  .story-step .phone-m img{opacity:1}
  .change-step .shot-m{display:block;margin-top:36px;border-radius:24px;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:left top}
  .cards3{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .faq-g{grid-template-columns:1fr;gap:40px}
  .prices{grid-template-columns:repeat(2,1fr)}
  .prices div:nth-child(3){padding-left:0;border-left:0}
  .prices div:nth-child(n+3){border-top:1px solid #cfcfcf}
  .steps4,.trust{grid-template-columns:repeat(2,1fr);gap:40px 20px}
  .case{grid-template-columns:1fr 1fr;gap:16px 24px}
  .case .big{grid-column:1/-1}
}
@media (max-width:760px){
  .top .pill{display:none}
  .burger{display:block}
  .w{width:calc(100% - 32px)}
  .top-in{height:68px}
  .sec{padding:96px 0}
  .hero-copy{padding-bottom:7vh}
  .hero-shot{inset:2% -18% 34% -18%;background-image:url('/assets/home/screen-list.webp');background-size:cover;background-position:50% 22%;transform:perspective(900px) rotateX(14deg) rotateZ(-7deg) scale(.98);filter:brightness(.8);opacity:1;border-radius:34px}
  .hero-shot{animation:hp-float 9s ease-in-out infinite alternate}
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 14%,transparent 26%,rgba(0,0,0,.9) 46%,#000 62%)}
  .hero h1{font-size:clamp(42px,12.4vw,60px)}
  .hero .pill{width:100%}
  .change-title{margin-bottom:24px}
  .story-step h2{margin-bottom:22px}
  .diag-card{grid-template-columns:1fr;justify-items:center;padding:28px 22px;gap:28px;text-align:center}
  .diag-card .bars{text-align:left;width:100%}
  .diag-card .ring{width:200px}
  .prices{grid-template-columns:1fr}
  .prices div{padding:26px 0!important;border-left:0!important}
  .prices div+div{border-top:1px solid #cfcfcf}
  .prices h3{margin-bottom:24px}
  .prices .pop em{top:24px;left:auto;right:0}
  .steps4,.trust{grid-template-columns:1fr 1fr}
  .steps4 h3{font-size:24px;margin-top:28px}
  .case{grid-template-columns:1fr;padding:34px 0}
  .faq summary{font-size:18px;padding:22px 0}
  .final{padding:120px 0}
  .final .pill,.price-foot .pill,.diag .pill{width:100%}
  .partners{justify-content:center}
  .partners img{height:22px}
  .partners .pt{font-size:19px}
}

/* ---------- Живые детали ---------- */
.ch-live{margin-top:34px;max-width:520px}
.ch-row{display:flex;flex-wrap:wrap;gap:10px}
.ch-row button{width:52px;height:52px;border-radius:16px;border:0;background:var(--c,#222);display:grid;place-items:center;cursor:pointer;opacity:.7;transition:transform .35s var(--ease),opacity .35s,box-shadow .35s}
.ch-row img{width:24px;height:24px;filter:invert(1)}
.ch-row button:hover{opacity:.9;transform:translateY(-2px)}
.ch-row button.on{opacity:1;transform:translateY(-4px) scale(1.08);box-shadow:0 0 0 2px #000,0 0 0 4px #fff}
[data-ch=whatsapp]{--c:#25D366}[data-ch=instagram]{--c:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}
[data-ch=telegram]{--c:#229ED9}[data-ch=tiktok]{--c:#000}.ch-row [data-ch=tiktok]{outline:1px solid #2e2e2e;outline-offset:-1px}
[data-ch=threads]{--c:#1c1c1c}[data-ch=facebook]{--c:#1877F2}
[data-ch=mail]{--c:#EA4335}[data-ch=phone]{--c:#34C759}
.ch-row button:focus-visible,.dl-stages button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@keyframes hp-ping{50%{transform:scale(1.14)}}
.ch-row button.ping{animation:hp-ping .5s var(--ease)}
.ch-feed{margin-top:16px;padding:18px 20px 6px;border-radius:24px;background:#111;border:1px solid #222}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:15px;margin-bottom:6px}
.ch-head span{color:var(--grey-2);font-size:13px}
.ch-list{list-style:none;margin:0;padding:0;min-height:198px}
.ch-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #1e1e1e;animation:hp-in .5s var(--ease)}
.ch-list li:first-child{border-top:0}
@keyframes hp-in{from{opacity:0;transform:translateY(-12px)}}
.ch-list .ic,.dl-ic{width:36px;height:36px;border-radius:11px;background:var(--c,#1d1d1d);display:grid;place-items:center;flex:none}
.ch-list .ic img,.dl-ic img{width:18px;height:18px;filter:invert(1)}
.ch-list b{display:block;font-size:15px;font-weight:500}
.ch-list small{display:block;color:var(--grey-2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-list time{color:var(--grey-2);font-size:12px}
.ch-list li:first-child time{color:var(--teal)}

.deal-live{margin-top:34px;max-width:520px;padding:20px;border-radius:24px;background:#111;border:1px solid #222}
.dl-top{display:flex;gap:12px;align-items:center}
.dl-top b{display:block;font-size:15px;font-weight:500}
.dl-top small{color:var(--grey-2);font-size:13px}
.dl-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:18px}
.dl-stages button{height:40px;padding:0 6px;border-radius:999px;border:1px solid #2a2a2a;background:transparent;color:var(--grey-2);font:500 13px var(--font);cursor:pointer;transition:background .3s var(--ease),color .3s,border-color .3s}
.dl-stages button:hover{border-color:#5a5a5a}
.dl-stages button.done{color:#fff;border-color:#3a3a3a}
.dl-stages button.on{background:#fff;color:#000;border-color:#fff}
.dl-next{margin-top:14px;font-size:15px;color:#d8d8d8;min-height:1.5em}
.dl-next.paid{color:var(--teal)}


.airis-live{margin-top:34px;max-width:520px;padding:22px 22px 18px;border-radius:24px;background:#111;border:1px solid #222}
.al-head{display:flex;align-items:center;gap:10px;font-size:15px}
.al-av{width:32px;height:32px;border-radius:50%;object-fit:cover}
.al-state{margin-left:auto;color:var(--grey-2);font-size:13px;display:flex;align-items:center;gap:6px}
.al-state.think::after{content:'';width:22px;height:6px;background:radial-gradient(circle 3px,currentColor 95%,transparent) 0 50%/8px 6px repeat-x;animation:hp-dots 1s steps(3) infinite}
@keyframes hp-dots{0%{width:6px}100%{width:30px}}
.al-q{margin:16px 0 10px;color:var(--grey-2);font-size:14px}
.al-text{min-height:3.2em;font-size:18px;line-height:1.5;letter-spacing:-.01em}
.al-text.typing::after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--teal);animation:hp-caret .8s steps(2) infinite}
@keyframes hp-caret{50%{opacity:0}}
.al-acts{display:flex;gap:10px;margin-top:16px}
.al-acts button{height:42px;padding:0 18px;border-radius:999px;border:1px solid #2c2c2c;background:transparent;color:#fff;font:500 14px var(--font);cursor:pointer;transition:background .25s,border-color .25s}
.al-acts button:hover{border-color:#555}
.al-acts [data-al="send"]{background:#fff;color:#000;border-color:#fff}
.al-acts button:disabled{opacity:.45;cursor:default}
.al-acts button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

.sq{transition:background .4s var(--ease),color .4s var(--ease)}
.change-step.on .sq{background:#000;color:#fff}
.sq svg *{transform-box:fill-box}
@keyframes hp-hand{to{transform:rotate(360deg)}}
.change-step.on .a-hand{transform-origin:50% 100%;animation:hp-hand 2.4s linear infinite}
@keyframes hp-row{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.45)}}
.change-step.on .a-row{transform-origin:0 50%;animation:hp-row 1.8s var(--ease) infinite}.change-step.on .r2{animation-delay:-.9s}
@keyframes hp-spin{to{transform:rotate(360deg)}}
.change-step.on .a-spin{animation:hp-spin 2.8s var(--ease) infinite}
@keyframes hp-bar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.change-step.on .a-bar{transform-origin:50% 100%;animation:hp-bar 1.6s var(--ease) infinite}.change-step.on .b2{animation-delay:-.5s}.change-step.on .b3{animation-delay:-1s}

@media (prefers-reduced-motion:reduce){
  .change-step.on .sq svg *,.change-step.on .a-spin,.ch-list li,.ch-row button{animation:none}
}
@media (max-width:760px){
  .phone::after{font-size:12px;padding-left:22px;background-position:right 18px center;background-size:42px 10px}
  .phone img{padding-top:40px}
  .phone::after{height:40px}
  .phone::before{top:17px;height:20px}
  .h2.c.change-title{text-align:left}
  .change-step .shot-m{aspect-ratio:4/5}
  .sec{padding:80px 0}
  .airis-live{padding:18px 16px 14px}
  .al-text{font-size:16px}
  .al-acts button{flex:1}
  .ch-row{gap:6px}
  .ch-row button{width:38px;height:38px;border-radius:12px}
  .ch-row img{width:19px;height:19px}
  .ch-feed,.deal-live{padding-left:16px;padding-right:16px}
  .dl-stages button{font-size:12px}
}

/* Кольца и строки виджетов оживают при появлении */
.ring line.f{stroke:#2a2a2a;transition:stroke .25s linear;transition-delay:calc(var(--i) * 18ms)}
.ring.go line.f{stroke:var(--rc)}
.wcard .row{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wcard.in .row{opacity:1;transform:none}
.wcard.in .row:nth-child(2){transition-delay:.25s}.wcard.in .row:nth-child(3){transition-delay:.5s}
.wcard .ok{transform:scale(.4);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.wcard.in .ok{transform:none;opacity:1;transition-delay:.7s}
.wcard.in .row:nth-child(2) .ok{transition-delay:1s}.wcard.in .row:nth-child(3) .ok{transition-delay:1.3s}
@media (prefers-reduced-motion:reduce){.ring line.f{transition:none;stroke:var(--rc)}.wcard .row,.wcard .ok{opacity:1;transform:none;transition:none}}
@keyframes hp-float{from{translate:0 0}to{translate:0 -18px}}
@media (prefers-reduced-motion:reduce){.hero-shot{animation:none!important}}
.partners-sec{padding:72px 0}
.partners-t{margin:0;color:var(--ink-2);font-size:15px}
.partners-sec .partners{margin-top:24px}