/* ===== On-premise landing: секции, анимации, вау-эффекты ===== */

/* --- Scroll reveal --- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,0,.2,1),transform .6s cubic-bezier(.2,0,.2,1);transition-delay:var(--d,0s)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* --- Логотип: при наведении ромб крутится на 90° по часовой, текст — фиолетовый --- */
a:hover > .klogo{--rhomb:90deg;--rhomb-t:.62s;color:var(--brand-100)}
a:hover > .klogo--f{color:#b79cff}

/* --- Навбар: тень при скролле --- */

/* ============ HERO ============ */
.hero--op{position:relative;overflow:hidden;padding:var(--sp-12) 0 0;background:
  radial-gradient(900px 420px at 50% -140px,var(--brand-12) 0%,rgba(239,233,249,0) 70%),
  linear-gradient(#fff,#fff)}
.op-glow{position:absolute;width:720px;height:520px;left:50%;top:-220px;transform:translateX(-50%);border-radius:9999px;
  background:linear-gradient(-90deg,#e298ff,#6fe5ff);filter:blur(220px);opacity:.28;pointer-events:none}
.hero__copy--op{position:relative;text-align:center;max-width:860px;margin:0 auto}
.hero__copy--op h1{font-size:var(--fs-5xl);line-height:var(--lh-5xl);font-weight:var(--fw-semi);letter-spacing:-1px}
.hero__copy--op .hero__sub{font-size:var(--fs-lg);line-height:var(--lh-lg);color:var(--text-title);margin-top:var(--sp-5);max-width:760px;margin-inline:auto}
.hero__copy--op .hero__cta{display:flex;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8);flex-wrap:wrap}

/* выделение «на вашем сервере» */
.hl-marker{color:var(--brand-100);white-space:nowrap}

/* --- Сцена «закрытый контур» --- */
.op-stage{margin:var(--sp-16) auto 0;max-width:1216px}
.op-contour{background:#F6F2FC;position:relative;width:1120px;max-width:100%;height:472px;margin:0 auto;border-radius:var(--radius-3xl);
  background:rgba(239,233,249,.28)}
.op-contour::before{content:"";position:absolute;inset:0;border-radius:var(--radius-3xl);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.5' y='1.5' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' rx='24' fill='none' stroke='%237d4ccf' stroke-width='2' stroke-dasharray='10 8'/%3E%3C/svg%3E")}
.op-contour{background:#F6F2FC;border:1px solid #EBE1F9}
.op-contour::before{display:none}
.op-lock{position:absolute;top:-16px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;
  background:#e6dcf8;color:var(--brand-100);font-size:var(--fs-sm);line-height:1;font-weight:var(--fw-med);
  padding:8px 14px;border-radius:9999px;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(125,76,207,.45);z-index:3}
.op-lock svg{width:14px;height:14px}

.op-links{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:1}
.op-links path{fill:none;stroke:rgba(125,76,207,.24);stroke-width:2;stroke-dasharray:5 6}
@keyframes lnkFlow{to{stroke-dashoffset:-44}}
.op-pulse{fill:url(#opGrad);opacity:0;offset-rotate:auto}
.p1{offset-path:path("M216 96 L476 96")}
.p2{offset-path:path("M216 235 L340 235 Q350 235 350 225 L350 156 Q350 146 360 146 L476 146")}
.p3{offset-path:path("M216 374 L410 374 Q420 374 420 364 L420 206 Q420 196 430 196 L476 196")}
.p4{offset-path:path("M904 96 L644 96")}
.p5{offset-path:path("M904 235 L780 235 Q770 235 770 225 L770 156 Q770 146 760 146 L644 146")}
.p6{offset-path:path("M904 374 L710 374 Q700 374 700 364 L700 206 Q700 196 690 196 L644 196")}
.p7{offset-path:path("M560 340 L560 238")}
.op-pulse{animation:pulseMove 3.6s cubic-bezier(.4,0,.6,1) infinite}

@keyframes pulseMove{0%{offset-distance:0%;opacity:0}12%{opacity:1}72%{opacity:1}88%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}

/* сервер */
.op-server{position:absolute;left:50%;top:48px;transform:translateX(-50%);width:196px;z-index:2;
  background:#fff;border:1px solid #D9C9F3;border-radius:var(--radius-2xl);padding:var(--sp-4);
  box-shadow:0 10px 22px -14px rgba(125,76,207,.25)}
.op-server__head{display:flex;align-items:center;justify-content:center;gap:8px;font-size:var(--fs-sm);font-weight:400;margin-bottom:var(--sp-3)}
.op-unit{display:flex;align-items:center;gap:5px;background:var(--k100);border:1px solid var(--k200);border-radius:var(--radius-lg);padding:8px 10px;margin-bottom:6px}
.op-led{width:7px;height:7px;border-radius:50%}
.led-g{background:#B49BE6;color:#B49BE6}
.op-led{opacity:.35;animation:ledWave 2.4s cubic-bezier(.4,0,.2,1) infinite}
.op-unit .op-led:nth-child(1){animation-delay:var(--row,0s)}
.op-unit .op-led:nth-child(2){animation-delay:calc(var(--row,0s) + .25s)}
.op-unit .op-led:nth-child(3){animation-delay:calc(var(--row,0s) + .5s)}
.op-unit + .op-unit{--row:.12s}
.op-unit + .op-unit + .op-unit{--row:.24s}
@keyframes ledWave{
  0%,100%{opacity:.5}
  45%{opacity:.95}
  70%{opacity:.65}
}
.op-vent{flex:1;height:4px;border-radius:2px;background:var(--k300)}
.op-vent:first-of-type{margin-left:6px}
.op-unit:last-of-type{margin-bottom:0}
.op-server__foot{font-size:11px;color:var(--text-secondary);text-align:center;margin-top:var(--sp-4)}

/* карточки-модули вокруг сервера */
.op-card{position:absolute;z-index:1;background:#fff;border:1px solid var(--k200);border-radius:var(--radius-xl);
  padding:var(--sp-3);width:190px;height:104px;display:flex;flex-direction:column;justify-content:flex-start;
  box-shadow:none}
.op-card > :last-child{margin-top:auto;margin-bottom:auto}
.op-card__t + *{margin-top:0}
.op-card__t{font-size:var(--fs-sm);font-weight:400;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.op-ci{width:18px;height:18px;flex:none}
@keyframes opFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.op-card--team{left:40px;top:48px}
.op-card--tasks{left:40px;top:187px}
.op-card--proj{left:40px;top:326px}
.op-card--docs{right:40px;top:48px}
.op-card--sd{right:40px;top:187px}
.op-card--sales{right:40px;top:326px}
.op-card--chat{left:50%;transform:translateX(-50%);top:326px}

.op-kan{display:flex;gap:5px}
.op-kcol{flex:1;display:flex;flex-direction:column;gap:4px}
.op-kcol + .op-kcol{border-left:1px solid var(--k200);padding-left:6px}
.kc{height:16px;border-radius:4px}
.kc-v{background:#F0F0F2}.kc-o{background:var(--orange-12)}.kc-g{background:#F0F0F2}
.kc-b{background:var(--green-12)}.kc-n{background:#FDE8E6}.kc-g2{background:var(--orange-12)}
.op-avs{display:flex;align-items:center}
.op-avs .av{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-left:-6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff}
.op-avs .av:first-child{margin-left:0}
.op-avs .av--plus{background:var(--k200);color:var(--text-secondary);border:2px solid #fff}
.op-gantt{position:relative;height:44px}
.op-gantt i{position:absolute;height:6px;border-radius:3px;top:1px}
.op-docx{display:flex;gap:8px}
.op-docx__side{width:46px;flex:none;display:flex;flex-direction:column;gap:5px;border-right:1px solid var(--k200);padding-right:7px}
.dxr{display:flex;align-items:center;gap:3px}
.dxr .dot{width:5px;height:5px;border-radius:2px;background:var(--k300);flex:none}
.dxr .ln{flex:1;height:5px;border-radius:3px;background:var(--k200)}
.dxr--act .dot{background:var(--brand-100)}
.dxr--act .ln{background:#d9c9f3}
.op-docx__page{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dx-t{height:6px;width:62%;border-radius:3px;background:var(--k300)}
.dx-callout{background:var(--blue-12);border-radius:4px;padding:4px 5px;display:flex;flex-direction:column;gap:3px}
.dx-callout i{display:block;height:4px;border-radius:2px;background:#c4ddf5}
.dx-l{height:5px;border-radius:3px;background:var(--k200)}
.op-sd{display:flex;flex-direction:column;width:100%}
.sd-row{display:flex;align-items:center;gap:5px;padding:5px 0;border-bottom:1px solid var(--k100)}
.sd-row:first-child{padding-top:1px}
.sd-row:last-child{border-bottom:0;padding-bottom:1px}
.sd-row .d{width:5px;height:5px;border-radius:50%;flex:none}
.sd-row .ln{height:5px;border-radius:3px;background:var(--k200)}
.sd-row b{margin-left:auto;font-size:8px;font-weight:600;line-height:1;white-space:nowrap}
.op-funnel{display:flex;flex-direction:column;gap:4px}
.op-funnel i{height:8px;border-radius:4px;background:var(--brand-12)}
.op-funnel i:nth-child(2){background:var(--blue-12)}
.op-funnel i:nth-child(3){background:var(--green-12)}
.op-funnel b{font-size:10px;font-weight:var(--fw-reg);color:var(--text-title);margin-top:2px}
.op-chat{display:flex;flex-direction:column;gap:6px}
.bub-line{display:flex;align-items:flex-end;gap:6px}
.bub-av{width:18px;height:18px;border-radius:50%;border:2px solid #fff;color:#fff;font-size:9px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bub-line .bub--in{width:60%}
.bub{height:16px;border-radius:5px;position:relative}
.bub::before,.bub::after{content:"";position:absolute;height:3px;border-radius:2px}
.bub::before{left:7px;right:7px;top:4px}
.bub::after{left:7px;right:45%;top:9px}
.bub--in::before,.bub--in::after{background:#dedee1}
.bub--out::before,.bub--out::after{background:#d9c5f5}
.bub--in{width:70%;background:var(--k100);border-top-left-radius:2px}
.bub--out{width:56%;background:var(--brand-12);align-self:flex-end;border-top-right-radius:2px}

/* trust line под сценой */
.hero--op .trust-line{margin-top:var(--sp-12)}

/* адаптив сцены: 768–1150 — та же композиция, масштабируется через .stf; ≤767 — сетка */
.op-stage .stf-inner{width:1120px}
.op-stage .stf{overflow:visible}
@media(max-width:767px){
  .op-contour{height:auto;padding:var(--sp-10) var(--sp-4) var(--sp-4)}
  .op-links{display:none}
  .op-server{position:static;transform:none;margin:0 auto}
  .op-card{position:static;width:auto;transform:none;animation:none !important}
  .op-card--chat{transform:none}
  .op-contour{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:var(--sp-3);align-items:start}
  .op-server{grid-column:1/-1;width:min(320px,100%);margin-inline:auto}
  .op-card{width:auto;height:104px;min-height:0}
  .op-lock{top:-15px}
  .op-stage .stf-inner{width:auto;transform:none !important}
  .op-stage .stf{height:auto !important;overflow:visible}
}
@media(max-width:767px){
  .hero--op{padding-top:var(--sp-6)}
  .hero__copy--op h1{font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls)}
  .hero__copy--op .hero__sub{font-size:var(--fs-md);line-height:var(--lh-md)}
  .op-stage{margin-top:var(--sp-8)}
}

/* ============ СЕКЦИИ: общее ============ */
.s--gray{background:var(--surface-section)}
.sec-badge{display:inline-flex;align-items:center;background:var(--brand-12);color:var(--brand-100);
  font-size:var(--fs-sm);font-weight:var(--fw-med);padding:4px 12px;border-radius:9999px}
/* заголовок «Локальная версия» — по центру на всех ширинах */
#onprem .sh--center{align-items:center;text-align:center;margin-inline:auto}
.tick{display:inline-flex;width:20px;height:20px;border-radius:50%;background:var(--green-12);color:var(--green-100);
  align-items:center;justify-content:center;flex:none}
.tick svg{width:11px;height:11px}

/* ============ ОТЗЫВЫ: поведение целиком из Trello-лендинга (правила в шелле) ============ */
.reviews-sec{padding-bottom:24px}
@media(min-width:768px){.reviews-sec{padding-bottom:32px}}
@media(min-width:1280px){.reviews-sec{padding-bottom:var(--sp-20)}}

/* ============ ИМПОРТОЗАМЕЩЕНИЕ ============ */
#importozam .sh--center{max-width:none}
@media(min-width:1024px){#importozam .sh__heading{white-space:nowrap}}
.imp-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-12)}
.imp-card{background:var(--surface-section);border-radius:var(--radius-lg);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4)}
.imp-card h3{font-size:var(--fs-xl);line-height:var(--lh-xl)}
.imp-head{display:flex;align-items:center;gap:var(--sp-4)}
.imp-ic{display:inline-flex;width:48px;height:48px;border-radius:10.286px;background:var(--brand-12);color:var(--brand-100);align-items:center;justify-content:center;flex:none}
.imp-ic svg{width:24px;height:24px}
.imp-card p{font-size:var(--fs-md);line-height:var(--lh-md);color:var(--text-title)}
.imp-card a{color:var(--brand-100);text-decoration:underline;text-underline-position:from-font}
.imp-card a:hover{color:var(--brand-hover)}
.imp-note{margin-top:auto}
.certs{background:var(--surface-section);border-radius:var(--radius-2xl);padding:var(--sp-8);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-8)}
.cert-card{position:relative;background:#fff;border-radius:var(--radius-xl);padding:var(--sp-4) var(--sp-4) 0;height:185px;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-4);align-items:center}
.cert-card p{width:100%;font-size:var(--fs-xs);line-height:var(--lh-xs);color:var(--text-title)}
.cert-card b{font-weight:var(--fw-semi)}
.cert-img{width:180px;max-width:100%;flex:none;margin-top:auto;height:105px;overflow:hidden;border-radius:4px 4px 0 0;box-shadow:0 0 6px rgba(0,0,0,.15)}
.cert-img img{width:100%;height:105px;object-fit:cover;object-position:top;display:block;transform:scale(1.07);transform-origin:center}
.cert-img{position:relative;transition:height .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s cubic-bezier(.22,.61,.36,1)}
.cert-img img{height:100%}
.cert-card:hover .cert-img{height:119px;box-shadow:0 0 12px rgba(0,0,0,.22)}
@media(prefers-reduced-motion:reduce){.cert-img{transition:none}.cert-card:hover .cert-img{height:105px}}
.cert-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.1));pointer-events:none}
@media(min-width:768px) and (max-width:1023px){.imp-duo{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
.certs-cta{display:flex;justify-content:center;margin-top:var(--sp-12)}
@media(min-width:768px) and (max-width:1023px){.certs-cta{margin-top:var(--sp-8)}}
@media(max-width:767px){.certs-cta{margin-top:var(--sp-6)}}
@media(max-width:600px){.certs-cta .btn{width:100%}}
@media(max-width:1023px){.certs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.imp-duo{grid-template-columns:1fr;gap:var(--sp-4)}}
@media(max-width:600px){.certs{grid-template-columns:1fr}.cert-card{height:auto;padding-bottom:0}}
@media(max-width:1279px){.imp-card{border-radius:var(--radius-lg)}.certs{border-radius:var(--radius-xl)}}

.onp-card--wide .term__body{min-height:0}

/* IconBox.tsx: size 48, color light — плашка EFE9F9 c inset-тенью, иконка 24 stroke 2.03 */
.onp-ic{display:inline-flex;width:48px;height:48px;border-radius:10.286px;background:var(--brand-12);
  color:var(--brand-100);align-items:center;justify-content:center;flex:none}
.onp-ic svg{width:24px;height:24px}
.onp-ic svg path,.onp-ic svg line,.onp-ic svg circle,.onp-ic svg rect{stroke-width:2.03175}
@media(max-width:1023px){
  .onp-card--wide .term__body{min-height:172px}}
.deploy .term{box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.term{background:#1b1626;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 30px 70px -35px rgba(27,22,38,.8);font-family:'JetBrains Mono',ui-monospace,Consolas,monospace}
.term__bar{display:flex;align-items:center;gap:6px;background:#251d36;padding:10px 14px}
.term__bar i{width:10px;height:10px;border-radius:50%;background:#4a3f63}
.term__bar i:first-child{background:#f44336}.term__bar i:nth-child(2){background:#ffa100}.term__bar i:nth-child(3){background:#4caf51}
.term__bar span{margin-left:8px;color:#8f82ab;font-size:11px}
.term__body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;min-height:172px}
.tl-line{color:#cfc6e4;font-size:12.5px;line-height:1.5;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.term.play .tl-line{opacity:1;transform:none}
.term.play .tl-line:nth-child(1){transition-delay:.1s}
.term.play .tl-line:nth-child(2){transition-delay:.55s}
.term.play .tl-line:nth-child(3){transition-delay:1s}
.term.play .tl-line:nth-child(4){transition-delay:1.45s}
.term.play .tl-line:nth-child(5){transition-delay:1.95s}
.term.play .tl-line:nth-child(6){transition-delay:2.45s}
.tl-line .tp{color:#78ffc7}
.tl-line .tk{color:#8f82ab}
.tl-line .ok{color:#78ffc7;font-weight:600}
.tl-line .lk{color:#b79cff;text-decoration:underline}
.cursor{display:inline-block;width:4px;height:14px;background:#b79cff;margin-left:6px;vertical-align:-2px;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}45%,65%{opacity:.25}}

/* ============ МОДУЛИ: flip-плитка ============ */
.modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);margin-top:var(--sp-12)}
.flip{position:relative;min-height:230px;outline:none}
.flip__in{position:relative;width:100%;height:100%;min-height:230px}
.flip__front,.flip__back{position:absolute;inset:0;border-radius:var(--radius-2xl);padding:var(--sp-6);display:flex;flex-direction:column}
.flip__front{background:var(--surface-section);transition:opacity .24s cubic-bezier(.2,0,.2,1);
  display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:var(--sp-3);align-items:center}
.flip__front .mic{grid-column:1;grid-row:1}
.flip__front h3{grid-column:2;grid-row:1;font-size:var(--fs-lg);line-height:var(--lh-lg);margin:0}
.flip__front p{grid-column:1/-1;grid-row:2;color:var(--text-secondary);font-size:var(--fs-sm);line-height:var(--lh-sm);margin-top:var(--sp-3)}
.flip__front .flip__more{grid-column:1/-1;grid-row:3;align-self:end}
.flip:hover .flip__more::after{transform:rotate(45deg) translate(2px,-2px)}
.mic{display:inline-flex;width:28px;height:28px;color:var(--brand-100);align-items:center;justify-content:center}
.mic svg{width:24px;height:24px}
.flip__back{background:var(--brand-12);z-index:1;
  opacity:0;pointer-events:none;
  transition:opacity .24s cubic-bezier(.2,0,.2,1)}
.flip:hover .flip__back,.flip:focus-visible .flip__back,.flip.flipped .flip__back{opacity:1;pointer-events:auto}
.flip__back{display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:var(--sp-3);align-items:center}
.flip__back .mic{grid-column:1;grid-row:1}
.flip__back h3{grid-column:2;grid-row:1;font-size:var(--fs-lg);line-height:var(--lh-lg);margin:0;color:var(--brand-100)}
.flip__back ul{grid-column:1/-1;grid-row:2;align-self:start;margin-top:var(--sp-6);list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.flip__back li{position:relative;padding-left:18px;font-size:var(--fs-sm);line-height:var(--lh-sm)}
.flip__back li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--brand-100)}
.flip__back li{opacity:0;transition:opacity .24s cubic-bezier(.2,0,.2,1)}
.flip:hover .flip__back li,.flip:focus-visible .flip__back li,.flip.flipped .flip__back li{opacity:1}
.flip:hover .flip__back li:nth-child(2),.flip.flipped .flip__back li:nth-child(2){transition-delay:.05s}
.flip:hover .flip__back li:nth-child(3),.flip.flipped .flip__back li:nth-child(3){transition-delay:.1s}
.mod-cta{display:flex;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-12);flex-wrap:wrap}
@media(max-width:1279px){.modgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1023px){.modgrid{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}}
@media(max-width:600px){.modgrid{grid-template-columns:1fr}.flip,.flip__in{min-height:0}.flip__in{min-height:210px}}

/* ============ БАЗЫ ДАННЫХ (темная секция) ============ */
.db-sec{position:relative;background:var(--surface-section);color:var(--text-title);overflow:hidden}
.db-sec .sh__heading{color:var(--text-title)}
.db-sec .sh__desc{color:var(--text-secondary)}
.db-pattern{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(125,76,207,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(125,76,207,.14) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(860px 460px at 50% 40%,#000 20%,transparent 76%);
  mask-image:radial-gradient(860px 460px at 50% 40%,#000 20%,transparent 76%);
  animation:gridDrift 26s linear infinite}
@keyframes gridDrift{to{background-position:44px 44px,44px 44px}}

/* ============ РЕШЕНИЕ + ПОДДЕРЖКА ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.duo-card{position:relative;background:#fff;border-radius:var(--radius-2xl);padding:var(--sp-12);overflow:hidden;
  display:flex;flex-direction:column;gap:var(--sp-4)}
.duo-card h3{font-size:var(--fs-2xl);line-height:var(--lh-2xl)}
.duo-card p{color:var(--text-secondary);font-size:var(--fs-md);line-height:var(--lh-md)}
.duo-card .btn{align-self:flex-start;margin-top:auto}
.duo-list .tick{margin-top:2px;background:var(--brand-12);color:var(--brand-100)}
.duo-card:hover .ddoc--2{transform:rotate(6deg) translateX(34px)}
.duo-card:hover .ddoc--3{transform:rotate(11deg) translateX(66px)}

.sup-op .on{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--green-100);border:2px solid #fff}
.dmsg .av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;flex:none}
@media(max-width:1023px){.duo{grid-template-columns:1fr;gap:var(--sp-4)}.duo-card{padding:var(--sp-8)}}
@media(max-width:767px){.duo-card{padding:var(--sp-6);border-radius:var(--radius-2xl)}}

/* ============ ТАРИФЫ ============ */
.buy-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-12)}
.buy-card{position:relative;background:var(--surface-section);border:1px solid transparent;border-radius:var(--radius-2xl);padding:var(--sp-10);
  overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-4);transition:transform .24s cubic-bezier(.2,0,.2,1),box-shadow .24s,border-color .24s}
.buy-card:hover{box-shadow:none}
.buy-card h3{font-size:var(--fs-2xl);line-height:var(--lh-2xl);padding-right:110px}
.buy-desc{color:var(--text-title);font-size:var(--fs-md);line-height:var(--lh-md)}
.buy-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.buy-list li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-md);line-height:var(--lh-md)}
.buy-list .tick{margin-top:2px;background:#fff;color:var(--brand-100)}
.buy-card .btn{margin-top:auto}
.buy-card--feat{background:var(--surface-section)}

.buy-card--feat:hover{box-shadow:none}
.hl-free{color:var(--brand-100);font-weight:var(--fw-semi)}
.hl-price{color:var(--brand-100);font-weight:var(--fw-semi);white-space:nowrap}
/* десктоп: 4 тарифа в один ряд */
@media(min-width:1280px){
  .buy-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
  .buy-card{padding:var(--sp-6)}
  .buy-card h3{padding-right:0;font-size:var(--fs-xl);line-height:var(--lh-xl)}
  .buy-list li,.buy-desc{font-size:var(--fs-sm);line-height:var(--lh-sm)}
  /* булиты во всех карточках начинаются на одном уровне: описание в 4 строки */
  .buy-desc{min-height:calc(var(--lh-sm) * 4)}
  .buy-flag{position:static;order:-1;align-self:flex-start}
}
@media(max-width:1023px){.buy-grid{grid-template-columns:1fr;gap:var(--sp-4)}.buy-card{padding:var(--sp-8)}.buy-card h3{padding-right:0}}
@media(max-width:767px){.buy-card{padding:var(--sp-6);border-radius:var(--radius-2xl)}}

/* ============ ТАЙМЛАЙН ВНЕДРЕНИЯ ============ */
.tl{position:relative;margin-top:0}
.tl.on .tl__bar{width:100%}
.tl.on .tl-step .tl-dot{background:var(--brand-100);color:#fff}
.tl.on .tl-step:nth-child(n+2):nth-child(-n+5) .tl-dot{background:var(--brand-12);border-color:var(--brand-12);color:var(--brand-100)}
.tl.on .tl-step:nth-child(1) .tl-dot{transition-delay:.15s}
.tl.on .tl-step:nth-child(2) .tl-dot{transition-delay:.5s}
.tl.on .tl-step:nth-child(3) .tl-dot{transition-delay:.85s}
.tl.on .tl-step:nth-child(4) .tl-dot{transition-delay:1.05s}
.tl.on .tl-step:nth-child(5) .tl-dot{transition-delay:1.3s}
.tl.on .tl-step:nth-child(6) .tl-dot{transition-delay:1.55s}
@media(max-width:1023px){
  .tl.on .tl__bar{height:100%;width:100%}
}

/* ============ МОБИЛЬНЫЙ ДОСТУП (макет Figma 10246:54300) ============ */
.mob2-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-12)}
.mob2-card{position:relative;background:var(--surface-section);border-radius:var(--radius-2xl);
  padding:var(--sp-8) 0 0 var(--sp-8);height:293px;overflow:hidden;
  display:flex;gap:var(--sp-5);justify-content:space-between}
.mob2-visual{position:relative}
.mob2-copy{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.mob2-badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:#fff;
  color:var(--brand-100);font-size:var(--fs-sm);line-height:var(--lh-sm);font-weight:var(--fw-med);
  padding:4px 12px;border-radius:9999px}
.mob2-badge svg{width:12px;height:12px;flex:none}
.mob2-card h3{font-size:var(--fs-xl);line-height:var(--lh-xl)}
.mob2-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-2)}
.mob2-list li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-md);line-height:var(--lh-md);color:var(--text-title)}
.ctick{width:20px;height:20px;border-radius:50%;background:#fff;color:var(--brand-100);
  display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:2px}
.ctick svg{width:11px;height:11px}
.mob2-visual{display:flex;gap:var(--sp-6);flex:none;align-items:flex-start;padding-top:var(--sp-1)}
@media(max-width:1279px){.mob2-grid{gap:var(--sp-4)}}
@media(max-width:767px){.mob2-grid{grid-template-columns:1fr}}
@media(max-width:600px){
  .mob2-card{flex-direction:column;height:auto;padding:var(--sp-6)}
  .mob2-visual{align-self:center}
}

/* ============ ПЕРЕЕЗД В КАЙТЕН (макет Figma 10246:54300) ============ */
#migrate .sh--center{max-width:none}
.mig2-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-12)}
.mig2-card{background:var(--surface-section);border-radius:var(--radius-2xl);padding:var(--sp-4) var(--sp-8) var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-4)}
.mig2-copy{padding:var(--sp-4) 0 var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)}
.mig2-card h3{font-size:var(--fs-xl);line-height:var(--lh-xl)}
.mig2-card p{font-size:var(--fs-md);line-height:var(--lh-md);color:var(--text-secondary)}
.mig2-img{margin-top:auto;display:flex;align-items:center;justify-content:center}
.mig2-img img{width:100%;max-width:none;height:auto;display:block}
@media(max-width:1023px){
  .mig2-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .mig2-card{padding-left:var(--sp-8);padding-right:var(--sp-8)}
  .mig2-copy{padding-left:0;padding-right:0}
}

/* ============ MARQUEE ЛОГОТИПОВ ============ */
.lmq{overflow:hidden;padding:var(--sp-12) 0}
.lmq-head{text-align:center;margin-bottom:var(--sp-12)}
.lmq-head h2{font-size:var(--fs-4xl);line-height:var(--lh-4xl);font-weight:var(--fw-semi)}
.lmq-head h2 b{color:var(--brand-100);font-weight:var(--fw-semi)}
.lmq-head p{margin-top:var(--sp-3);font-size:var(--fs-lg);line-height:var(--lh-lg);color:var(--text-title)}
.lmq__wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);overflow:hidden}
@media(max-width:767px){.lmq{padding:var(--sp-8) 0}.lmq-head h2{font-size:var(--fs-2xl);line-height:var(--lh-2xl)}}
.lmq__track{display:flex;width:max-content;animation:lmq 42s linear infinite}
.lmq__set{display:flex;align-items:center;gap:var(--sp-10);padding-right:var(--sp-10)}
.lmq__set img{height:48px;width:auto;opacity:.7;filter:grayscale(1);transition:opacity .18s,filter .18s}
.lmq__set img:hover{opacity:1;filter:none}
@keyframes lmq{to{transform:translateX(-50%)}}

@keyframes patDrift{to{background-position:260px 130px}}
@media(max-width:1023px){.fcta--op .fcta__cta{justify-content:center}}

/* FAQ: список внутри ответа */
/* FAQ: на десктопе ответ в узкой колонке — короче строка, легче читать */
@media(min-width:1024px){.faq-a p,.faq-a ul{max-width:900px}}
/* FAQ: абзацы внутри ответа ближе друг к другу, воздух только в конце */
@media(max-width:767px){.faq-a p{padding-bottom:var(--sp-2)}.faq-a > :last-child{padding-bottom:var(--sp-4)}}

/* DS: радиус блоков — десктоп 16/24, планшет и мобилка 12 */
@media(max-width:1279px){
  .imp-card,.onp-card,.flip__front,.flip__back,.db-card,.tl-plate,.mob2-card,.mig2-card,.certs,.buy-card,
  .duo-card,.deploy,.fcta,.op-contour,.term,.cert-card,.otziv,.rmap__card,.gnt,.sup2,.sup2__win,.dbviz__sql,
  .ci-server,.op-card,.op-server,.dbviz__sql,.flip{border-radius:var(--radius-xl)}
}

/* Секции: вертикальный ритм */
section.s{padding:var(--sp-24) 0}
@media(min-width:768px) and (max-width:1279px){section.s{padding:var(--sp-16) 0}}
@media(max-width:767px){section.s{padding:var(--sp-12) 0}}
@media(min-width:1024px){#modules{padding-top:var(--sp-24)}}

/* широкие логотипы отзывов — чуть крупнее */
.otziv-logo[src*="rosagro"],.otziv-logo[src*="remex"]{height:48px;max-width:210px}
/* перенос в hero-подзаголовке — только на десктопе */
.hero__copy--op .hero__sub{max-width:820px}
@media(max-width:1023px){.br-d{display:none}}

/* эмодзи в заголовках тарифов */
.buy-card h3{display:flex;align-items:center;gap:10px}

/* DS: fcta 16 на десктопе */
.fcta{border-radius:var(--radius-2xl)}

/* подзаголовок тарифов в одну строку */
#buy .sh--center{max-width:none}

/* CTAproduct.tsx: градиент фона и паддинги эталона */
.fcta{background:linear-gradient(90deg,#ece0ff,#cdecff);padding:48px 48px 0}
.fcta__blur{display:none}
@media(max-width:1023px){.fcta{background:linear-gradient(180deg,#ece0ff,#cdecff)}}
@media(max-width:559px){.fcta{padding:24px 24px 0}}

/* таймлайн из 6 шагов */
@media(min-width:1024px){
  .tl-step h3{font-size:var(--fs-md);line-height:var(--lh-md)}
  .tl-step p{font-size:var(--fs-sm);line-height:var(--lh-sm)}
  .tl__steps{gap:var(--sp-5)}
  .tl__track{right:calc((100% - 100px)/6 - 48px)}
}

.hl-word{color:var(--brand-100);font-weight:var(--fw-med)}

/* ховер кнопки при наведении на всю тарифную карточку */
.buy-card:hover .btn--fill{background:var(--brand-hover)}
.buy-card:hover .btn--outline{background:var(--brand-12);border-color:var(--brand-48k);color:var(--brand-hover)}

/* исходящее сообщение: аватарка сотрудника справа */
.bub-line--out{justify-content:flex-end}
.bub-line--out .bub--out{width:56%}

/* мобилка: заголовки по левому краю (как в шелле) */
@media(max-width:767px){
  .hero__copy--op{text-align:left}
  .hero__copy--op .hero__cta{justify-content:center}
  #onprem .sh--center{align-items:flex-start;text-align:left;margin-inline:0}
  .lmq-head{text-align:left}
}

/* скилл дизайнера: hero top 48/32/24 */
@media(min-width:768px) and (max-width:1279px){.hero--op{padding-top:var(--sp-8)}}

/* мобайл-секция: заголовок в 1 строку на десктопе */
@media(min-width:1280px){#mobile .sh--center{max-width:none}#mobile .sh__heading{white-space:nowrap}}

/* мобилка: кнопки hero в один ряд */
@media(max-width:767px){
  .hero__copy--op .hero__cta{flex-wrap:nowrap}
  .hero__copy--op .hero__cta .btn{padding-inline:var(--sp-4)}
}

/* мобилка: без теней под карточками сцены */
@media(max-width:767px){
  .op-card,.op-server{box-shadow:none}
}

/* мобилка: отступы вокруг кнопок hero 24/24 */
@media(max-width:767px){
  .hero__copy--op .hero__cta{margin-top:var(--sp-6)}
  .op-stage{margin-top:var(--sp-16)}
}

/* десктоп: без горизонтальной линии таймлайна */
@media(min-width:1024px){.tl__track{display:none}}

/* db-секция: темная подводка */
#db .sh__desc{color:var(--text-title)}

/* перенос в заголовке Подписная модель — только на десктопе */
@media(max-width:1279px){.br-buy{display:none}}

/* мобайл-секция: без нижнего отступа */
#mobile{padding-bottom:0}

.buy-b{font-weight:var(--fw-semi)}

/* «Подробнее» появляется по ховеру карточки */
@media(hover:hover){
  .flip__more{opacity:0;transition:opacity .18s cubic-bezier(.2,0,.2,1)}
  .flip:hover .flip__more,.flip:focus-visible .flip__more{opacity:1}
}

/* RFI и поддержка — два отдельных широких блока */
@media(min-width:1024px){
  .duo{grid-template-columns:1fr}
  .duo-card{display:grid;grid-template-columns:1fr 300px;column-gap:var(--sp-16);row-gap:var(--sp-4);align-items:center;padding:var(--sp-12)}
  .duo-card>.duo-docs,.duo-card>.duo-sup{grid-column:2;grid-row:1/span 3;justify-self:center;align-self:center;margin:0;height:auto}
  .duo-card>h3,.duo-card>p,.duo-card>.btn,.duo-card>.duo-list,.duo-card>.sup-feats{grid-column:1}
  .duo-card .btn{margin-top:var(--sp-2);justify-self:start}
}

/* CTA-блок RFI с конвертом */
.duo-card--cta{background:linear-gradient(180deg,#ece0ff,#cdecff)}
.duo-card--cta p{color:var(--text-title)}
@media(min-width:1024px){
  .duo-card>.rfi-flow{grid-column:2;grid-row:1/span 3;justify-self:center;align-self:center}
}

@media(min-width:1024px){
  .duo-card.duo-card--sup{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-16) var(--sp-12)}
}

/* иллюстрация финального CTA: сервер + карточка установки */
.cta-install{position:relative;margin:auto}
.ci-server{width:270px;background:#fff;border-radius:var(--radius-2xl);padding:var(--sp-6);
  box-shadow:none}
.ci-card{margin-bottom:var(--sp-4)}
.ci-title{font-size:13px;font-weight:var(--fw-semi);line-height:1.35;margin-bottom:10px}
.ci-title .ci-ok{color:var(--brand-100);font-weight:inherit}
.ci-bar{height:8px;border-radius:4px;background:var(--brand-12);overflow:hidden}
.ci-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--brand-100)}
.ci-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--text-secondary)}
.ci-meta b{color:var(--brand-100);font-weight:var(--fw-semi)}

/* RFI: документ с требованиями -> решение Кайтен */
.rfi-flow{display:flex;align-items:center;gap:14px;justify-content:center}
.rf-t{font-size:13px;font-weight:var(--fw-semi);color:var(--text-title)}
.rf-box.on{background:var(--brand-100);border-color:var(--brand-100)}

/* финальный CTA: текст слева, иллюстрация справа уже с 1024 */
@media(min-width:1024px){
  .fcta__in{grid-template-columns:minmax(0,1fr) 470px;text-align:left;gap:var(--sp-10);justify-items:stretch}
  .fcta__copy{margin:0;max-width:560px}
  .fcta__cta{justify-content:flex-start}
  .fcta__visual{justify-self:end;align-self:center;width:auto;max-width:none}
}

/* мини-иллюстрации на фронтах флип-карточек */
.flip__front .fmini{grid-column:1/-1;grid-row:2;margin-top:var(--sp-6);align-self:start;width:100%}
.fmini .card{width:240px;max-width:100%;height:176px;margin-inline:auto;box-shadow:0 0 6px 0 rgba(0,0,0,.1)}
.flip__front .fmini .op-docx__side{width:42px}
.fm-tgl .row{display:flex;align-items:center;gap:10px}
.fm-tgl .ln{flex:1;height:6px;border-radius:3px;background:var(--k200)}
.fm-time .track{flex:1;height:8px;border-radius:4px;background:var(--brand-12);overflow:hidden}
.fm-time .track i{display:block;height:100%;width:62%;background:var(--brand-100);border-radius:4px}
.fm-api .lnk{width:14px;height:2px;background:var(--k300);flex:none}

/* дорожная карта внедрения */
.rmap{position:relative;margin-top:var(--sp-16)}
.rmap__line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--brand-48k)}
.rmap__item{display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;row-gap:var(--sp-3)}
.rmap__dot{grid-row:2;display:inline-flex;width:36px;height:36px;border-radius:50%;background:var(--brand-100);color:#fff;
  align-items:center;justify-content:center;font-weight:var(--fw-semi);font-size:var(--fs-sm);border:4px solid var(--surface-section);z-index:1}
@media(max-width:1023px){
  .rmap__line{left:17px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .rmap__item{grid-template-rows:none;grid-template-columns:36px 1fr;column-gap:var(--sp-4);justify-items:start;align-items:center}
  .rmap__dot{grid-row:1;grid-column:1}
}

/* нижний отступ CTA (в шелле был 0 под старую иллюстрацию) */
.fcta{padding-bottom:var(--sp-12)}
@media(max-width:767px){.fcta{padding-bottom:var(--sp-12)}}

/* мобайл-секция: цельные картинки-композиции */
.mob2-pic{width:272px;max-width:100%;height:auto;display:block}

/* этапы внедрения: вариант-гантт */
.gnt{position:relative;margin-top:var(--sp-16);background:#fff;border-radius:var(--radius-2xl);padding:var(--sp-8);overflow:hidden}
.gnt__gridlines{position:absolute;top:var(--sp-8);bottom:var(--sp-8);left:calc(var(--sp-8) + 400px);right:var(--sp-8);pointer-events:none}
.gnt__gridlines i{position:absolute;top:0;bottom:0;width:1px;background:var(--k100)}
.gnt__gridlines i:nth-child(1){left:20%}
.gnt__gridlines i:nth-child(2){left:40%}
.gnt__gridlines i:nth-child(3){left:60%}
.gnt__gridlines i:nth-child(4){left:80%}
.gnt__row{display:grid;grid-template-columns:400px 1fr;align-items:center;column-gap:var(--sp-6);padding:var(--sp-3) 0}
.gnt__row + .gnt__row{border-top:0}
.gnt__label{display:flex;align-items:flex-start;gap:var(--sp-3);color:var(--text-title)}
.gnt__lt{display:flex;flex-direction:column;gap:2px}
.gnt__lt b{font-size:var(--fs-md);line-height:var(--lh-md);font-weight:var(--fw-med)}
.gnt__lt small{font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-secondary)}
.gnt__num{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--brand-100);color:#fff;
  align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:var(--fw-semi);flex:none}
.gnt__track{position:relative;height:14px}
.gnt__bar{position:absolute;top:0;height:14px;border-radius:7px}
@media(max-width:1023px){
  .gnt{padding:var(--sp-6)}
  .gnt__gridlines{display:none}
  .gnt__row{grid-template-columns:1fr;row-gap:var(--sp-2);padding:var(--sp-3) 0}
}
@media(max-width:767px){.gnt{border-radius:var(--radius-xl)}}

/* db-секция: без нижнего отступа */
#db{padding-bottom:0}

/* колонка под увеличенную RFI-иллюстрацию */
@media(min-width:1024px){.duo-card--cta{grid-template-columns:minmax(0,1fr) 470px}}
@media(max-width:1023px){.rfi-flow{flex-wrap:wrap}}

.rf-t,.rf-head{margin-bottom:5px}

/* мобайл-картинки без отступа сверху и снизу */
@media(min-width:768px){
  .mob2-visual{margin-top:-8px;padding-top:0;align-items:stretch}
  .mob2-pic{width:auto;height:269px}
}

/* RFI: текстовая колонка уже */
.duo-card--cta>h3,.duo-card--cta>p{max-width:480px}

/* белый (светлый) терминал в широкой карточке on-premise */
.onp-card--wide .term,.bnt--e .term{background:#fff;box-shadow:0 0 14px 0 rgba(125,76,207,.2)}
.onp-card--wide .term__bar,.bnt--e .term__bar{background:var(--k100);border-bottom:1px solid var(--k300)}
.onp-card--wide .term__bar span,.bnt--e .term__bar span{color:var(--text-secondary)}
.onp-card--wide .term__bar i:first-child,.bnt--e .term__bar i:first-child{background:#E9A6A0}
.onp-card--wide .term__bar i:nth-child(2),.bnt--e .term__bar i:nth-child(2){background:#EFCE93}
.onp-card--wide .term__bar i:nth-child(3),.bnt--e .term__bar i:nth-child(3){background:#A8CFA9}
.onp-card--wide .tl-line,.bnt--e .tl-line{color:var(--text-title)}
.onp-card--wide .tl-line .tp,.bnt--e .tl-line .tp{color:var(--brand-100)}
.onp-card--wide .tl-line .tk,.bnt--e .tl-line .tk{color:var(--text-secondary)}
.onp-card--wide .tl-line .ok,.bnt--e .tl-line .ok{color:#2f7d33}
.onp-card--wide .tl-line .lk,.bnt--e .tl-line .lk{color:var(--brand-100)}
.onp-card--wide .cursor,.bnt--e .cursor{background:var(--brand-100)}

/* фиксы поверх портированных стилей FeatureMocks */
.flip__front .fmini{background:transparent;padding:0;font-family:inherit}
.flip,.flip .flip__in{min-height:276px}
.fmini .card{overflow:hidden}

.sh__heading .hl-word{font-weight:inherit}

/* Локальная версия: отступ сверху 96 на десктопе */
@media(min-width:1280px){#onprem{padding-top:var(--sp-24,96px)}}

/* появление галок в карточке решения RFI: сброс всех разом, включение по очереди */
.rf-sol .rf-row:nth-of-type(1) .rf-box.on{animation:rfOn1 5.6s cubic-bezier(.2,0,.2,1) infinite}
.rf-sol .rf-row:nth-of-type(1) .rf-box.on svg{animation:rfTick1 5.6s cubic-bezier(.2,0,.2,1) infinite}
@keyframes rfOn1{
  0%,7%{background:#fff;border-color:var(--k300)}
  11%,90%{background:var(--brand-100);border-color:var(--brand-100)}
  94%,100%{background:#fff;border-color:var(--k300)}
}
@keyframes rfTick1{
  0%,7%{transform:scale(0);opacity:0}
  11%,90%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(0);opacity:0}
}
.rf-sol .rf-row:nth-of-type(2) .rf-box.on{animation:rfOn2 5.6s cubic-bezier(.2,0,.2,1) infinite}
.rf-sol .rf-row:nth-of-type(2) .rf-box.on svg{animation:rfTick2 5.6s cubic-bezier(.2,0,.2,1) infinite}
@keyframes rfOn2{
  0%,15%{background:#fff;border-color:var(--k300)}
  19%,90%{background:var(--brand-100);border-color:var(--brand-100)}
  94%,100%{background:#fff;border-color:var(--k300)}
}
@keyframes rfTick2{
  0%,15%{transform:scale(0);opacity:0}
  19%,90%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(0);opacity:0}
}
.rf-sol .rf-row:nth-of-type(3) .rf-box.on{animation:rfOn3 5.6s cubic-bezier(.2,0,.2,1) infinite}
.rf-sol .rf-row:nth-of-type(3) .rf-box.on svg{animation:rfTick3 5.6s cubic-bezier(.2,0,.2,1) infinite}
@keyframes rfOn3{
  0%,23%{background:#fff;border-color:var(--k300)}
  27%,90%{background:var(--brand-100);border-color:var(--brand-100)}
  94%,100%{background:#fff;border-color:var(--k300)}
}
@keyframes rfTick3{
  0%,23%{transform:scale(0);opacity:0}
  27%,90%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(0);opacity:0}
}
.rf-sol .rf-row:nth-of-type(4) .rf-box.on{animation:rfOn4 5.6s cubic-bezier(.2,0,.2,1) infinite}
.rf-sol .rf-row:nth-of-type(4) .rf-box.on svg{animation:rfTick4 5.6s cubic-bezier(.2,0,.2,1) infinite}
@keyframes rfOn4{
  0%,31%{background:#fff;border-color:var(--k300)}
  35%,90%{background:var(--brand-100);border-color:var(--brand-100)}
  94%,100%{background:#fff;border-color:var(--k300)}
}
@keyframes rfTick4{
  0%,31%{transform:scale(0);opacity:0}
  35%,90%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(0);opacity:0}
}
.rf-sol .rf-row:nth-of-type(5) .rf-box.on{animation:rfOn5 5.6s cubic-bezier(.2,0,.2,1) infinite}
.rf-sol .rf-row:nth-of-type(5) .rf-box.on svg{animation:rfTick5 5.6s cubic-bezier(.2,0,.2,1) infinite}
@keyframes rfOn5{
  0%,39%{background:#fff;border-color:var(--k300)}
  43%,90%{background:var(--brand-100);border-color:var(--brand-100)}
  94%,100%{background:#fff;border-color:var(--k300)}
}
@keyframes rfTick5{
  0%,39%{transform:scale(0);opacity:0}
  43%,90%{transform:scale(1);opacity:1}
  94%,100%{transform:scale(0);opacity:0}
}

/* таймлайн: отступ сверху 96 на десктопе */
@media(min-width:1280px){.tl{margin-top:96px}}

/* гантт: номера 2-5 светло-фиолетовые */
.gnt > .gnt__row:nth-of-type(n+3):nth-of-type(-n+6) .gnt__num{background:var(--brand-12);color:var(--brand-100)}

/* бейджи мобайл-карточек в одну строку */
.mob2-badge{white-space:nowrap}

/* десктоп: 3 отзыва в ряд, четвертый скрыт (в карусели планшета/мобилки виден) */

/* мобилка: карточки сцены в 2 ряда, пропорции как на десктопе (190:104) */
@media(max-width:767px){
  .op-contour{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-card{height:auto;aspect-ratio:190/104}
}

/* бейдж RFI у заголовка, светлый */
.rf-t{display:flex;align-items:center;gap:8px}
.rf-tag{background:var(--brand-12);color:var(--brand-100);font-size:10px;line-height:1;font-weight:var(--fw-semi);
  padding:0 8px;height:18px;border-radius:9999px;flex:none;display:inline-flex;align-items:center;justify-content:center}

/* планшет/мобилка: иллюстрация RFI под текстом */
@media(max-width:1023px){.duo-card--cta .rfi-flow{order:10;margin-top:var(--sp-4)}}

/* планшет: тарифы 2x2 */
@media(min-width:768px) and (max-width:1023px){.buy-grid{grid-template-columns:1fr 1fr}}

/* таймлайн: отступ сверху на планшете/мобилке */
@media(max-width:1279px){.tl{margin-top:var(--sp-12)}}

/* планшет: мобайл-карточки в 1 столбик */
@media(max-width:1023px){.mob2-grid{grid-template-columns:1fr}}

/* сцена: пропорции как на десктопе на всех ширинах мобильной сетки */
@media(min-width:560px) and (max-width:767px){.op-contour{grid-template-columns:1fr 1fr}}
@media(max-width:559px){.op-card{width:100%;max-width:360px;margin-inline:auto}}

/* ВАРИАНТ 2: премиум-панель линии поддержки */
.sup2{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:var(--sp-12);align-items:center;
  background:#fff;border-radius:var(--radius-2xl);padding:var(--sp-10);margin-bottom:var(--sp-8)}
.sup2__copy h3{font-size:var(--fs-3xl);line-height:var(--lh-3xl);margin-bottom:var(--sp-6)}
.sup2__list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-5)}
.sup2__list li{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-md);line-height:var(--lh-md);color:var(--text-title)}
.sup2__ic{display:inline-flex;width:44px;height:44px;border-radius:12px;background:var(--brand-12);color:var(--brand-100);align-items:center;justify-content:center;flex:none}
.sup2__ic svg{width:22px;height:22px}
.sup2__win{background:#fff;border-radius:var(--radius-xl);padding:var(--sp-5);box-shadow:0 0 14px 0 rgba(125,76,207,.2)}
.sup2__bar{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-4);border-bottom:1px solid var(--k100)}
.sup2__op{position:relative;display:inline-flex;width:40px;height:40px;flex:none}
.sup2__op img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.sup2__on{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:var(--green-100);border:2px solid #fff}
.sup2__meta b{display:block;font-size:var(--fs-md);line-height:1.3}
.sup2__meta span{font-size:var(--fs-sm);color:var(--text-secondary)}
.sup2__input{display:flex;align-items:center;gap:var(--sp-3);background:#fff;border:1px solid var(--k300);border-radius:10px;padding:4px 4px 4px var(--sp-4);margin-top:var(--sp-2)}
.sup2__ph{flex:1;font-size:var(--fs-sm);color:var(--k400)}
.sup2__send{display:inline-flex;width:30px;height:30px;border-radius:8px;background:var(--surface-section);color:var(--text-secondary);align-items:center;justify-content:center;flex:none}
.sup2__send svg{width:18px;height:18px}
@media(max-width:1023px){.sup2{grid-template-columns:1fr;gap:var(--sp-8);padding:var(--sp-8)}.sup2__win{max-width:500px;margin-inline:auto}}
@media(max-width:767px){.sup2{border-radius:var(--radius-xl);padding:var(--sp-6)}.sup2__copy h3{font-size:var(--fs-xl);line-height:var(--lh-xl)}}

/* естественное появление сообщений: каждое всплывает снизу, лента растет вверх */
.sc-view{height:210px;overflow:hidden}
.sc-feed{display:flex;flex-direction:column;justify-content:flex-end;min-height:100%}
.sc-row{--sc-gap:9px;display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;padding-bottom:0}
.sc-inr{display:flex;align-items:flex-start;gap:8px;min-height:0}
.sc-row--out .sc-inr{justify-content:flex-end}
.sc-av{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;flex:none}
.sc-av svg{width:15px;height:15px}
.sc-av--op{overflow:hidden}
.sc-av--op img{width:100%;height:100%;object-fit:cover;display:block}
.sc-av--me{background:linear-gradient(150deg,#9b6ee6,#7d4ccf 55%,#6a3bb8);color:#fff;
  box-shadow:0 0 0 2px #fff,0 2px 6px -2px rgba(125,76,207,.55)}
.sc-av--me svg{width:13px;height:13px;opacity:.95}
.sc-av--op{box-shadow:0 0 0 2px #fff,0 2px 6px -3px rgba(45,45,45,.3)}
.sc-bub{max-width:74%;font-size:12.5px;line-height:1.35;padding:8px 11px;border-radius:12px}
.sc-bub--in{background:var(--k100);color:var(--text-title)}
.sc-bub--out{background:var(--brand-12);color:var(--text-title)}
.sc-bub.sc-bub--in{border-top-left-radius:0}
.sc-bub.sc-bub--out{border-top-right-radius:0}
.sc-typing{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:12px;background:var(--k100);border-bottom-left-radius:4px}
.sc-typing i{width:5px;height:5px;border-radius:50%;background:var(--text-secondary);animation:scDot .9s ease-in-out infinite}
.sc-typing i:nth-child(2){animation-delay:.15s}.sc-typing i:nth-child(3){animation-delay:.3s}
@keyframes scDot{0%,60%,100%{opacity:.35}30%{opacity:1}}
/* тайминги: клиент → оператор печатает → ответ → клиент → ответ (цикл 14s) */
/* переписка стартует, когда блок появился на экране, — иначе посетитель доскроллит
   до готового чата и не увидит, как сообщения приходят по очереди */
.sup2.on .sc-feed .m1{animation:scM1 20s ease infinite}
.sup2.on .sc-feed .m2{animation:scM2 20s ease infinite}
.sup2.on .sc-feed .m3{animation:scM3 20s ease infinite}
.sup2.on .sc-feed .m4{animation:scM4 20s ease infinite}
.sup2__win:hover .sc-feed .sc-row{animation-play-state:paused}
@keyframes scM1{0%,3%{opacity:0;grid-template-rows:0fr;padding-bottom:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}8%,93%{opacity:1;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}97%{opacity:0;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}99%,100%{opacity:0;grid-template-rows:0fr;padding-bottom:0}}
@keyframes scM2{0%,13%{opacity:0;grid-template-rows:0fr;padding-bottom:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}17%,93%{opacity:1;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}97%{opacity:0;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}99%,100%{opacity:0;grid-template-rows:0fr;padding-bottom:0}}
@keyframes scM3{0%,32%{opacity:0;grid-template-rows:0fr;padding-bottom:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}37%,93%{opacity:1;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}97%{opacity:0;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}99%,100%{opacity:0;grid-template-rows:0fr;padding-bottom:0}}
@keyframes scM4{0%,43%{opacity:0;grid-template-rows:0fr;padding-bottom:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}47%,93%{opacity:1;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}97%{opacity:0;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}99%,100%{opacity:0;grid-template-rows:0fr;padding-bottom:0}}

/* точки набора живут внутри пузыря ответа и сменяются текстом на месте */
.sc-swap{display:grid;position:relative}
.sc-swap > .sc-txt{grid-area:1/1}
.sc-swap .sc-typing{position:absolute;left:11px;top:0;height:var(--sc-pill-h);background:none;padding:0}
.sc-swap{--sc-pill:56px;--sc-pill-h:calc(8px * 2 + 12.5px * 1.35);--sc-r:12px}
.sup2.on .sc-swap{animation:scBubGrow1 20s ease infinite}
.sup2.on .m4 .sc-swap{animation-name:scBubGrow2}
@keyframes scBubGrow1{0%,20%{clip-path:inset(0 calc(100% - var(--sc-pill)) calc(100% - var(--sc-pill-h)) 0 round 0 var(--sc-r) var(--sc-r) var(--sc-r));animation-timing-function:cubic-bezier(.22,.61,.36,1)}21.5%,100%{clip-path:inset(0 0 0 0 round 0 var(--sc-r) var(--sc-r) var(--sc-r))}}
@keyframes scBubGrow2{0%,50%{clip-path:inset(0 calc(100% - var(--sc-pill)) calc(100% - var(--sc-pill-h)) 0 round 0 var(--sc-r) var(--sc-r) var(--sc-r));animation-timing-function:cubic-bezier(.22,.61,.36,1)}51.5%,100%{clip-path:inset(0 0 0 0 round 0 var(--sc-r) var(--sc-r) var(--sc-r))}}
.sup2.on .sc-swap .sc-typing{animation:scDotsOut1 20s ease infinite}
.sup2.on .sc-swap .sc-txt{animation:scTextIn1 20s ease infinite}
.sup2.on .m4 .sc-swap .sc-typing{animation-name:scDotsOut2}
.sup2.on .m4 .sc-swap .sc-txt{animation-name:scTextIn2}
@keyframes scDotsOut1{0%,20%{opacity:1}21%,100%{opacity:0}}
@keyframes scTextIn1{0%,20%{opacity:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}22%,100%{opacity:1}}
@keyframes scDotsOut2{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes scTextIn2{0%,50%{opacity:0;animation-timing-function:cubic-bezier(.22,.61,.36,1)}52%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sc-feed .sc-row{animation:none;opacity:1;grid-template-rows:1fr;padding-bottom:var(--sc-gap)}}

.s.shw-sec{padding-bottom:0}
#importozam{padding-top:var(--sp-24)}
@media(min-width:768px) and (max-width:1023px){#importozam{padding-top:var(--sp-16)}}
@media(max-width:767px){#importozam{padding-top:var(--sp-12)}}
#importozam .s-head{margin:0;padding-bottom:var(--sp-12)}
@media(min-width:768px) and (max-width:1023px){#importozam .s-head{padding-bottom:var(--sp-8)}}
@media(max-width:767px){#importozam .s-head{padding-bottom:var(--sp-6)}}
#importozam .shw3-wrap--imp{margin-bottom:var(--sp-16)}
@media(max-width:767px){#importozam .shw3-wrap--imp{margin-top:var(--sp-12);margin-bottom:var(--sp-12)}}
#importozam .imp-duo{margin-top:0}
.shw3-wrap{max-width:1216px;margin:0 auto;padding:0 var(--sp-4)}
@media(min-width:1280px){.shw3-wrap{padding:0}}
/* мобилка: шоукейс во всю ширину, без боковых отступов */
@media(max-width:767px){.shw3-wrap{padding:0}}
.shw3{margin:0}
.shw3 img{display:block;width:100%;height:auto}

/* анимированная канбан-доска в шоукейсе — центр модуля (порт доски «Кайтен vs ClickUp») */
.shw3{position:relative}
.shw3-kb{position:absolute;z-index:2;left:25.74%;top:0%;width:48.52%;height:100%;overflow:hidden;border-radius:12px;background:#f1f1f4}
/* тень под доской */
.shw3-kb{box-shadow:0 26px 48px -26px rgba(45,45,45,.15)}
.shw3-kb .kb{position:absolute;top:0;left:0;width:720px;height:433px;transform-origin:top left;transform:scale(var(--kbs,.5),var(--kbsy,var(--kbs,.5)));
  --ts:#8a8a8f;--bd:#e8e8eb;background:#f1f1f4;border:1px solid #e8e8eb;border-top:0;border-bottom:0;border-radius:12px;overflow:hidden;
  font-family:Roboto,Arial,sans-serif;color:#2d2d2d;text-align:left}
.shw3-kb .kb *{box-sizing:border-box;margin:0;padding:0}
.shw3-kb .hdr{display:flex;align-items:center;gap:9px;padding:11px 14px}
.shw3-kb .grip{display:grid;grid-template-columns:repeat(2,3px);gap:3px}
.shw3-kb .grip i{width:3px;height:3px;border-radius:50%;background:#c4c4c9;display:block}
.shw3-kb .hdr .nm{font-size:14px;font-weight:600}
.shw3-kb .hdr .chev{margin-left:auto;color:var(--ts);display:flex}
.shw3-kb .hdr .chev svg{width:16px;height:16px}
.shw3-kb .colhdr{display:flex;padding:4px 8px 8px;border-bottom:1px solid var(--bd)}
.shw3-kb .colhdr .c{flex:1;display:flex;align-items:center;gap:6px;padding:0 7px;min-width:0}
.shw3-kb .colhdr .c .t{font-size:11.5px;font-weight:500;color:#2d2d2d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shw3-kb .colhdr .c .chk{color:#4a8a2f;display:flex;flex:none}
.shw3-kb .cnt{margin-left:auto;display:inline-flex;min-width:18px;height:18px;align-items:center;justify-content:center;background:#5f5e5a;color:#fff;border-radius:5px;padding:0 5px;font-size:10px;font-weight:600;line-height:1;flex:none}
.shw3-kb .lanebody{display:flex;padding:11px 6px}
.shw3-kb .col{flex:1;padding:0 7px;display:flex;flex-direction:column;gap:9px;position:relative;min-width:0}
.shw3-kb .col + .col::before{content:"";position:absolute;left:0;top:-11px;bottom:-11px;border-left:1px solid var(--bd)}
.shw3-kb .card{background:#fff;border:1px solid var(--bd);border-radius:9px;padding:10px;box-shadow:0 1px 2px rgba(45,45,45,.05);display:flex;flex-direction:column;gap:8px}
.shw3-kb .ct-row{display:flex;align-items:flex-start;justify-content:space-between;gap:7px}
.shw3-kb .ct{flex:1;min-width:0;font-size:11.5px;font-weight:500;line-height:1.35;color:#2d2d2d}
.shw3-kb .emo{flex:none;font-size:14px;line-height:1.15}
.shw3-kb .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.shw3-kb .tags{display:flex;flex-wrap:wrap;gap:5px}
.shw3-kb .tag{border-radius:999px;padding:2px 8px;font-size:10px;font-weight:500;white-space:nowrap}
.shw3-kb .t-prod{background:#ededf0;color:#6b6b70}
.shw3-kb .t-cx{background:#f7f0cf;color:#8a6a00}
.shw3-kb .t-big,.shw3-kb .t-jud{background:#efe9f9;color:#7d4ccf}
.shw3-kb .t-urg{background:#fbe3ec;color:#c2185b}
.shw3-kb .t-ok{background:#e7f3df;color:#2f7d33}
.shw3-kb .t-blue{background:#e2eefb;color:#2f6fb0}
.shw3-kb .t-teal{background:#d9f0ec;color:#0e7a66}
.shw3-kb .cmt{display:inline-flex;align-items:center;gap:4px;color:var(--ts);font-size:10px}
.shw3-kb .cmt svg{width:12px;height:12px}
.shw3-kb .prog{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:6px;border-radius:4px;background:#eef3f7;padding:3px 8px;font-size:10px;color:#4d6b86}
.shw3-kb .prog i{position:absolute;left:0;top:0;bottom:0;background:#dcebf7}
.shw3-kb .prog.done{color:#3f7a4a;background:#eef7ef}
.shw3-kb .prog.done i{background:#dff0e1}
.shw3-kb .prog .l{position:relative;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shw3-kb .prog .n{position:relative;font-weight:600;flex:none}
.shw3-kb .foot{display:flex;align-items:center;justify-content:space-between;gap:6px}
.shw3-kb .avs{display:flex;align-items:center}
.shw3-kb .av{width:19px;height:19px;border-radius:50%;border:2px solid #fff;margin-left:-6px;display:inline-flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:600;color:#757575;background:#e6e6e9;flex:none}
.shw3-kb .av:first-child{margin-left:0}
.shw3-kb .due{display:inline-flex;align-items:center;gap:4px;background:#f1f1f4;border-radius:999px;padding:2px 8px;color:#5b5b62;font-size:10px;white-space:nowrap}
.shw3-kb .due svg{width:11px;height:11px}
.shw3-kb .ghost{position:relative;height:107px;border-radius:9px;background:rgba(0,0,0,.05)}
.shw3-kb .drag-layer{position:absolute;top:0;left:0;right:0;z-index:30;animation:hsiTravel2 5s ease-in-out infinite}
.shw3-kb .drag-card{border:1px solid #e0d6f3;transform-origin:center;animation:hsiLift2 5s ease-in-out infinite}
.shw3-kb .hand{position:absolute;left:58%;top:66%;transform:translate(-50%,-50%);width:34px;height:34px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));animation:hsiHand2 5s ease-in-out infinite;z-index:31}
@keyframes hsiTravel2{0%,38%{transform:translate(0,0)}47%{transform:translate(3px,-8px)}64%,76%{transform:translate(172px,44px)}88%{transform:translate(3px,-8px)}100%{transform:translate(0,0)}}
@keyframes hsiLift2{0%,38%{transform:rotate(0) scale(1);box-shadow:0 1px 2px rgba(45,45,45,.06)}47%{transform:rotate(3deg) scale(1.03);box-shadow:0 14px 28px -10px rgba(45,45,45,.28)}88%{transform:rotate(3deg) scale(1.03);box-shadow:0 14px 28px -10px rgba(45,45,45,.28)}100%{transform:rotate(0) scale(1);box-shadow:0 1px 2px rgba(45,45,45,.06)}}
@keyframes hsiHand2{0%,38%{opacity:0}46%{opacity:1}88%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.shw3-kb .drag-layer,.shw3-kb .drag-card,.shw3-kb .hand{animation:none}.shw3-kb .drag-card{box-shadow:0 1px 2px rgba(45,45,45,.06)}}
/* CTA-вариант 2: конверт 1-в-1 по Figma 10449:80527 + анимированные чекбоксы */
.env-cta>.env-flow{display:flex;align-items:center;justify-content:center}
@media(min-width:1024px){.duo-card.env-cta>.env-flow{grid-column:2;grid-row:1/span 3;justify-self:center;align-self:center}}
.env{position:relative;width:250px;height:280px;overflow:hidden;border-radius:22px;filter:drop-shadow(0 16px 30px -22px rgba(45,45,45,.45))}
.env__flap{position:absolute;top:0;left:0;width:100%;height:104px;z-index:0}
.env__back{position:absolute;left:0;right:0;bottom:0;height:176px;background:#e9e9e9;border-radius:0 0 22px 22px;z-index:0}
.env__letter{position:absolute;left:8%;right:8%;top:118px;
  background:#fff;border-radius:8px 8px 0 0;padding:11px 13px 64px;display:flex;flex-direction:column;gap:6px;z-index:1;
  box-shadow:0 -2px 10px -6px rgba(45,45,45,.18);
  animation:envRise 17.5s cubic-bezier(.3,0,.2,1) infinite}
.env__front{position:absolute;left:0;right:0;bottom:0;width:100%;height:176px;z-index:2;pointer-events:none}
.env__letter .rf-t{font-size:12px;font-weight:var(--fw-semi);color:var(--text-title);display:flex;align-items:center;gap:8px;margin-bottom:2px}
.env-row{display:flex;align-items:center;gap:7px}
.env-box{position:relative;width:16px;height:16px;border-radius:5px;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--brand-12)}
.env-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:var(--fw-semi);font-style:normal;color:var(--brand-100);line-height:1}
.env-tick{width:9px;height:9px;color:#fff;opacity:0}
.env-ln{flex:1;height:5px;border-radius:3px;background:var(--k200)}
.env-row:nth-of-type(1) .env-box{animation:envBox1 17.5s ease infinite}.env-row:nth-of-type(1) .env-num{animation:envNum1 17.5s ease infinite}.env-row:nth-of-type(1) .env-tick{animation:envTick1 17.5s ease infinite}
.env-row:nth-of-type(2) .env-box{animation:envBox2 17.5s ease infinite}.env-row:nth-of-type(2) .env-num{animation:envNum2 17.5s ease infinite}.env-row:nth-of-type(2) .env-tick{animation:envTick2 17.5s ease infinite}
.env-row:nth-of-type(3) .env-box{animation:envBox3 17.5s ease infinite}.env-row:nth-of-type(3) .env-num{animation:envNum3 17.5s ease infinite}.env-row:nth-of-type(3) .env-tick{animation:envTick3 17.5s ease infinite}
.env-row:nth-of-type(4) .env-box{animation:envBox4 17.5s ease infinite}.env-row:nth-of-type(4) .env-num{animation:envNum4 17.5s ease infinite}.env-row:nth-of-type(4) .env-tick{animation:envTick4 17.5s ease infinite}
.env-row:nth-of-type(5) .env-box{animation:envBox5 17.5s ease infinite}.env-row:nth-of-type(5) .env-num{animation:envNum5 17.5s ease infinite}.env-row:nth-of-type(5) .env-tick{animation:envTick5 17.5s ease infinite}
@keyframes envBox1{0%,26%{background:var(--brand-12)}30%,86%{background:var(--brand-100)}90%,100%{background:var(--brand-12)}}
@keyframes envNum1{0%,26%{opacity:1}29%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes envTick1{0%,27%{opacity:0;transform:scale(.4)}30%,86%{opacity:1;transform:scale(1)}89%,100%{opacity:0;transform:scale(.4)}}
@keyframes envBox2{0%,30%{background:var(--brand-12)}34%,86%{background:var(--brand-100)}90%,100%{background:var(--brand-12)}}
@keyframes envNum2{0%,30%{opacity:1}33%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes envTick2{0%,31%{opacity:0;transform:scale(.4)}34%,86%{opacity:1;transform:scale(1)}89%,100%{opacity:0;transform:scale(.4)}}
@keyframes envBox3{0%,34%{background:var(--brand-12)}38%,86%{background:var(--brand-100)}90%,100%{background:var(--brand-12)}}
@keyframes envNum3{0%,34%{opacity:1}37%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes envTick3{0%,35%{opacity:0;transform:scale(.4)}38%,86%{opacity:1;transform:scale(1)}89%,100%{opacity:0;transform:scale(.4)}}
@keyframes envBox4{0%,38%{background:var(--brand-12)}42%,86%{background:var(--brand-100)}90%,100%{background:var(--brand-12)}}
@keyframes envNum4{0%,38%{opacity:1}41%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes envTick4{0%,39%{opacity:0;transform:scale(.4)}42%,86%{opacity:1;transform:scale(1)}89%,100%{opacity:0;transform:scale(.4)}}
@keyframes envBox5{0%,42%{background:var(--brand-12)}46%,86%{background:var(--brand-100)}90%,100%{background:var(--brand-12)}}
@keyframes envNum5{0%,42%{opacity:1}45%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes envTick5{0%,43%{opacity:0;transform:scale(.4)}46%,86%{opacity:1;transform:scale(1)}89%,100%{opacity:0;transform:scale(.4)}}
@media(prefers-reduced-motion:reduce){.env__letter{animation:none;transform:none}.env-box{background:var(--brand-100)}.env-num{opacity:0}.env-tick{opacity:1;transform:none}}
@media(max-width:1023px){.env{width:224px;height:227px}}
/* CTA-конверт: кнопка по центру, когда карточка в один столбец */
@media(max-width:1023px){.env-cta .btn{align-self:center}}

/* Гант этапов внедрения: полоски выезжают по мере скролла */
.gnt__bar{transform:scaleX(0);transform-origin:left center;opacity:0;transition:transform .7s cubic-bezier(.2,.7,.3,1),opacity .45s ease}
.gnt.on .gnt__bar{transform:scaleX(1);opacity:1}
.gnt.on .gnt__row:nth-child(2) .gnt__bar{transition-delay:.05s}
.gnt.on .gnt__row:nth-child(3) .gnt__bar{transition-delay:.18s}
.gnt.on .gnt__row:nth-child(4) .gnt__bar{transition-delay:.31s}
.gnt.on .gnt__row:nth-child(5) .gnt__bar{transition-delay:.44s}
.gnt.on .gnt__row:nth-child(6) .gnt__bar{transition-delay:.57s}
.gnt.on .gnt__row:nth-child(7) .gnt__bar{transition-delay:.70s}
@media(prefers-reduced-motion:reduce){.gnt__bar{transform:none;opacity:1;transition:none}}
/* мобилка: заголовок секции модулей — отступ снизу 24 */
@media(max-width:767px){#modules .s-head{margin-bottom:24px}}
/* мобилка: drag-анимацию доски не крутим — фиксируем кадр «карточка перенесена в следующий столбик» */
@media(max-width:767px){
  .shw3-kb .drag-layer{animation:none;transform:translate(88px,24px)}
  .shw3-kb .drag-card{animation:none;transform:rotate(3deg) scale(1.03);box-shadow:0 14px 28px -10px rgba(45,45,45,.28)}
  .shw3-kb .hand{animation:none;opacity:1}
}
/* отзывы: без вертикального скролла и обрезки по вертикали */
#cases .otziv-track{align-items:stretch;overflow-y:hidden}
#cases .otziv{height:auto}
/* мобилка: карточки сцены одинаковой высоты, ничего не режется */
@media(max-width:767px){
  .op-contour{align-items:stretch;grid-auto-rows:auto}
  .op-card{aspect-ratio:190/104;height:auto;min-height:100px;padding:10px}
  .op-card__t{margin-bottom:6px;font-size:12px}
  .op-ci{width:14px;height:14px}
  .op-server{margin-bottom:var(--sp-2);align-self:start}
}
/* мобилка: секция контура — меньше отступ снизу */
@media(max-width:767px){#loop{padding-bottom:0;padding-top:var(--sp-24)}#loop .op-stage{margin-top:0}}
/* модули: на планшете и мобилке — листалка вбок со стрелками */
@media(max-width:1279px){
  .modgrid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:var(--sp-4);
    margin-inline:calc(-1 * var(--sp-4));padding-inline:var(--sp-4);scroll-padding-left:var(--sp-4);
    -ms-overflow-style:none;scrollbar-width:none}
  .modgrid::-webkit-scrollbar{display:none}
  .modgrid>.flip{flex:0 0 296px;max-width:296px;scroll-snap-align:start}
  .modgrid>.flip:last-child{margin-right:var(--sp-4)}
  .mod-nav{margin-top:var(--sp-6)}
}
@media(max-width:600px){.modgrid>.flip{flex:0 0 272px;max-width:272px}}
/* мобилка: заголовок секции импортозамещения — отступ снизу 24 */
@media(max-width:1279px){#importozam .s-head{margin-bottom:16px}}
/* мобилка: чат поддержки компактнее и мельче */
@media(max-width:767px){
  .sup2__win{padding:var(--sp-4)}
  .sup2__op{width:34px;height:34px}
  .sup2__on{width:9px;height:9px}
  .sup2__bar{gap:var(--sp-2);padding-bottom:var(--sp-3)}
  .sup2__meta b{font-size:14px}
  .sup2__meta span{font-size:12px}
  .sc-view{height:186px}
  .sc-row{--sc-gap:7px}
  .sc-swap{--sc-pill-h:calc(6px * 2 + 11.5px * 1.32);--sc-r:10px}
  .sc-swap .sc-typing{left:9px}
  .sc-inr{gap:6px}
  .sc-av{width:22px;height:22px}
  .sc-av svg{width:13px;height:13px}
  .sc-bub{max-width:74%;font-size:11.5px;line-height:1.32;padding:6px 9px;border-radius:10px;max-width:78%}
  .sc-typing{height:26px;padding:0 10px}
  .sup2__input{padding:3px 3px 3px var(--sp-3);border-radius:9px}
  .sup2__ph{font-size:12px}
  .sup2__send{width:27px;height:27px;border-radius:7px}
  .sup2__send svg{width:15px;height:15px}
}
@keyframes envRise{0%,8%{transform:translateY(0)}25%,86%{transform:translateY(-105px)}96%,100%{transform:translateY(0)}}
@media(max-width:1023px){.env{width:224px;height:251px}.env__flap{height:93px}.env__back,.env__front{height:158px}.env__letter{top:106px}}
/* мобилка: карточки мобильного приложения — без отступа снизу */
@media(max-width:767px){.mob2-card{padding-bottom:0}.mob2-visual{padding-bottom:0}}
/* мобилка: заголовок миграции — без принудительного переноса (3-я строка возвращается) */
@media(max-width:767px){#migrate .sh__heading br{display:none}}
/* CTA: коробка продукта рядом с сервером */
.ci-box{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:340px;height:auto;display:block;z-index:1;
  filter:drop-shadow(0 20px 34px -20px rgba(45,45,45,.42))}
@media(max-width:767px){.ci-box{width:180px}}
/* мобилка: примечание тарифов — по левому краю, ссылка одной строкой */
@media(max-width:767px){.buy-note{text-align:left}.buy-note a{white-space:nowrap}}
/* мобилка: секция логотипов клиентов — без отступа сверху */
@media(max-width:767px){.lmq{padding-top:0}}
/* шоукейс: легкая тень снизу (по форме картинки, фон прозрачный) */
.shw3 img{filter:none}
.shw3{position:relative}
.shw3 img{position:relative;z-index:1;filter:drop-shadow(0 10px 14px rgba(45,45,45,.08))}
.shw3::after{content:"";position:absolute;left:4%;right:4%;bottom:-8px;height:34px;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 52% at 50% 46%,rgba(45,45,45,.17),rgba(45,45,45,0) 72%),
    radial-gradient(70% 60% at 50% 50%,rgba(45,45,45,.08),rgba(45,45,45,0) 76%)}
.shw3-kb .kb{box-shadow:0 22px 34px -20px rgba(45,45,45,.28)}
/* Гант в карточке «Проекты»: две вертикальные светло-серые линии */
.op-gantt::before,.op-gantt::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#e8e8ec;z-index:0}
.op-gantt::before{left:33%}
.op-gantt::after{left:66%}
.op-gantt i{z-index:1}
/* секция контура: меньше воздуха над бейджем «Закрытый контур компании» */
#loop .op-stage{margin-top:0}
@keyframes envFlap{
  0%,6%{transform:perspective(700px) rotateX(180deg);z-index:3}
  20%,82%{transform:perspective(700px) rotateX(0deg);z-index:0}
  94%,100%{transform:perspective(700px) rotateX(180deg);z-index:3}
}
@media(prefers-reduced-motion:reduce){.env__flap{animation:none;transform:none;z-index:0}}
/* мобилка: секция импортозамещения — без отступа снизу */
@media(max-width:1279px){#importozam{padding-top:0}}@media(max-width:767px){#importozam{padding-top:var(--sp-12);padding-bottom:24px}}
/* мобилка: подзаголовок импортозамещения — без принудительного переноса */
@media(max-width:767px){#importozam .sh__desc br{display:none}}
@media(max-width:767px){#onprem .s-head{margin-bottom:24px}}
@media(max-width:767px){.duo-card.env-cta{padding-bottom:var(--sp-8)}}
/* мобилка/планшет: конверт-визуал под текстом и кнопкой */
@media(max-width:767px){.duo-card.env-cta{display:flex;flex-direction:column}.duo-card.env-cta>.env-flow{order:9;margin-top:var(--sp-8)}}
/* секция контура: без отступа снизу на всех ширинах */
#loop{padding-bottom:0;padding-top:var(--sp-24)}
/* модули на телефоне: аккордеон — заголовок и текст сверху, картинка снизу */
@media(max-width:767px){
  #modules .modgrid{display:block;overflow:visible;margin:var(--sp-6) 0 0;padding:0}
  #modules .mod-nav{display:none}
  #modules .flip{width:auto;max-width:none;min-height:0;margin:0 0 12px;flex:none;cursor:pointer}
  #modules .flip__in{min-height:0;height:auto;display:flex;flex-direction:column}

  /* шапка аккордеона: иконка, заголовок и — в раскрытом виде — описание */
  #modules .flip__back{order:1;position:static;inset:auto;z-index:0;opacity:1;pointer-events:none;
    background:var(--surface-section);border-radius:var(--radius-xl);padding:var(--sp-4);
    transition:background .25s ease;
    display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:var(--sp-3);align-items:center}
  #modules .flip__back h3{grid-column:2;grid-row:1;color:var(--text-title);position:relative;padding-right:22px}
  #modules .flip__back h3::after{content:"";position:absolute;right:0;top:50%;width:9px;height:9px;
    border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);
    transform:translateY(-70%) rotate(45deg);transition:transform .3s ease}
  #modules .flip.open .flip__back h3::after{transform:translateY(-30%) rotate(-135deg)}
  /* раскрытие: высота едет плавно, без скачка display:none -> block */
  #modules .flip__back{transition:background .25s ease,padding-bottom .34s cubic-bezier(.3,0,.2,1)}
  #modules .flip__back ul{display:flex;gap:6px;margin-top:0;padding-left:22px;height:0;overflow:hidden;opacity:0;
    interpolate-size:allow-keywords;
    transition:height .34s cubic-bezier(.3,0,.2,1),margin-top .34s cubic-bezier(.3,0,.2,1),opacity .2s ease}
  #modules .flip__back li{opacity:1;transition:none}
  #modules .flip.open .flip__back{background:#EFE9F9;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding-bottom:var(--sp-3)}
  #modules .flip.open .flip__back ul{height:auto;opacity:1;margin-top:var(--sp-3)}

  /* картинка — под текстом, единым блоком с шапкой */
  #modules .flip__front{order:2;position:static;inset:auto;display:block;background:#EFE9F9;
    border-radius:0 0 var(--radius-xl) var(--radius-xl);padding:0 var(--sp-4);
    height:0;overflow:hidden;opacity:0;interpolate-size:allow-keywords;
    transition:height .34s cubic-bezier(.3,0,.2,1),padding-bottom .34s cubic-bezier(.3,0,.2,1),opacity .2s ease .05s}
  #modules .flip__front .mic,#modules .flip__front h3{display:none}
  #modules .flip__front .fmini{display:block;margin-top:0}
  #modules .flip.open .flip__front{height:auto;opacity:1;padding-bottom:var(--sp-4)}
}

@keyframes modOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#modules .flip.open .flip__front .fmini{animation:none}}

/* мобилка: отступ до кнопки в блоке переноса */
@media(max-width:767px){#migrate .mod-cta{margin-top:24px}}

/* дорожная карта: прогресс по мере скроллинга */
.rmap__line{overflow:hidden;border-radius:1px}
.rmap__item{opacity:0;transform:translateY(12px);
  transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
.rmap__item.on{opacity:1;transform:none}
.rmap__dot{background:var(--k300);transform:scale(.72);
  transition:background .3s ease,transform .3s cubic-bezier(.34,1.3,.64,1)}
.rmap__item.on .rmap__dot{background:var(--brand-100);transform:none}
@media(max-width:1023px){
  .rmap__item,.rmap__item--bot{transform:translateY(12px)}
  .rmap__item.on{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .rmap__item{opacity:1;transform:none;transition:none}
  .rmap__dot{background:var(--brand-100);transform:none}
}

/* CTA установки: коробка крупнее, блок выше */
@media(min-width:1024px){
  .fcta{padding-top:64px}
  .fcta__in{align-items:center}

  .ci-server{width:290px}
}

/* мобилка: отступ от заголовка секции on-premise до карточек */
@media(max-width:767px){#onprem .onp-grid{margin-top:24px}}

/* планшет/мобилка: отступ под кнопкой финального CTA */
@media(max-width:1023px){.fcta__cta{margin-bottom:var(--sp-10)}}

/* CTA-конверт: лишнюю высоту забирает последняя строка, а не отступ под заголовком */
@media(min-width:1024px){
  .duo-card--cta{grid-template-rows:auto auto 1fr}
  .duo-card--cta>h3,.duo-card--cta>p{align-self:start}
  .duo-card--cta>.btn{align-self:start}
}

/* тарифы: строки с выделением — целиком фиолетовые */
.buy-list li>span:has(.hl-free),.buy-list li>span:has(.hl-price){color:var(--brand-100)}
/* планшет: поля контейнера ровно 24px на всем диапазоне — без ограничения по ширине */
@media(min-width:768px) and (max-width:1279px){.container{max-width:none;padding:0 var(--sp-6)}}
@media(min-width:768px) and (max-width:1279px){.faq-section__container{max-width:none}}
@media(min-width:768px) and (max-width:1279px){.op-stage{max-width:none}.shw3-wrap{max-width:none;padding:0}}
/* планшет: заголовок блока поддержки по центру */
@media(min-width:768px) and (max-width:1023px){.sup2__copy h3{text-align:center;font-size:var(--fs-2xl);line-height:var(--lh-2xl)}
  .fcta__copy h2{font-size:var(--fs-2xl);line-height:var(--lh-2xl)}}

/* десктоп: лента логотипов в габаритах контейнера 1216 */
@media(min-width:1280px){.lmq__wrap{max-width:calc(var(--container) + var(--sp-8) * 2);padding:0 var(--sp-8);margin-inline:auto}}

/* CTA-конверт: меньше отступ под заголовком */
.duo-card--cta>h3{margin-bottom:calc(var(--sp-2) * -1)}

/* тарифы: подписная модель — фиолетовая обводка */
.buy-grid .buy-card:nth-child(4){border-color:var(--brand-100)}

/* десктоп: градиент CTA слева направо (на планшете и мобилке — сверху вниз) */
@media(min-width:1024px){.duo-card--cta{background:linear-gradient(90deg,#ece0ff,#cdecff)}}

/* планшет: подсказка-шеврон, что карточку модуля можно раскрыть по клику */
@media(min-width:768px) and (max-width:1023px){
  #modules .flip{cursor:pointer}
  #modules .flip__front h3,#modules .flip__back h3{position:relative;padding-right:26px}
  #modules .flip__front h3::after,#modules .flip__back h3::after{content:"";position:absolute;right:0;top:50%;
    width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;opacity:.55}
  #modules .flip__back h3::after{transform:translateY(-30%) rotate(-135deg);opacity:.7}
}

/* планшет: отступ сверху секции импортозамещения */
@media(min-width:768px) and (max-width:1279px){#importozam{padding-top:var(--sp-16)}}

/* CTA с карточками RFI: кнопка по центру */
@media(max-width:1023px){.duo>.duo-card--cta>.btn{justify-self:center;align-self:center;margin-inline:auto}}
@media(min-width:1024px){.duo>.duo-card--cta>.btn{justify-self:start;margin-inline:0}}

/* планшет: карточки модулей шире — заголовок в одну строку */
@media(min-width:768px) and (max-width:1023px){
  .modgrid>.flip{flex:0 0 360px;max-width:360px}
  #modules .flip__front h3,#modules .flip__back h3{white-space:nowrap}
}

/* планшет: заголовок первого экрана меньше */
@media(min-width:768px) and (max-width:1279px){.hero__copy--op h1{font-size:var(--fs-4xl);line-height:var(--lh-4xl);letter-spacing:var(--ls)}}

/* блок поддержки переехал вниз секции — отступ от CTA сверху */

/* десктоп: карточки этапов чуть шире — короткие заголовки в одну строку */
@media(min-width:1024px){
  .rmap__cols{column-gap:var(--sp-2)}
  .rmap__card{width:calc(100% + 22px);margin-inline:-11px}
}

/* планшет: боковые отступы блока сервера */

/* перенос только на планшете */
.br-t{display:none}
@media(min-width:768px) and (max-width:1279px){.br-t{display:inline}}
/* блок поддержки: больше воздуха сверху */

/* мобилка: отступ над кнопками секции модулей */
@media(max-width:767px){#modules .mod-cta{margin-top:24px}}

/* мобилка: компактнее карточки «своя база данных» */
@media(max-width:767px){
  #db .db-grid{gap:var(--sp-3);margin-top:var(--sp-6)}
  #db .db-card{padding:var(--sp-4);gap:var(--sp-3)}
  #db .db-card p{font-size:var(--fs-md);line-height:var(--lh-md)}
  #db .db-ic{width:40px;height:40px;border-radius:10px}
  #db .db-ic svg{width:20px;height:20px}
}

/* гантт-этапы: иконки у заголовков */
.gnt__lt b{display:flex;align-items:center;gap:8px}
.gnt__ic{flex:none;display:inline-flex;width:18px;height:18px;color:var(--brand-100)}
.gnt__ic svg{width:18px;height:18px}

/* тарифы: эмодзи справа, по центру заголовка */
.buy-card h3{display:flex;align-items:center;gap:var(--sp-2-5);padding-right:0}
.buy-ic{display:inline-flex;width:44px;height:44px;border-radius:9.4px;background:var(--brand-12);
  color:var(--brand-100);align-items:center;justify-content:center;flex:none}
.buy-ic svg{width:22px;height:22px}

.buy-ic svg path,.buy-ic svg line,.buy-ic svg circle,.buy-ic svg rect{stroke-width:2.03175}
@media(max-width:767px){.buy-ic{width:40px;height:40px;border-radius:8.5px}.buy-ic svg{width:22px;height:22px}}

/* мобилка: градиент светлого деплой-блока сверху вниз */
@media(max-width:767px){.deploy--light{background:linear-gradient(180deg,#ece0ff,#cdecff)}}

/* блок поддержки: внешний отступ сверху по брейкпоинтам */
#custom .sup2{margin-top:var(--sp-24)}
@media(max-width:1279px){#custom .sup2{margin-top:var(--sp-16)}}
@media(max-width:767px){#custom .sup2{margin-top:var(--sp-12)}}

/* засвет по нижнему краю секции внедрения (эталон из Figma 10508:71353) */
#steps{position:relative;overflow:hidden}
#steps>.container{position:relative;z-index:1}
#steps::after{content:"";position:absolute;left:0;right:0;bottom:0;height:360px;z-index:0;pointer-events:none;
  background:
    radial-gradient(62% 130% at 24% 118%, rgba(150,207,236,.3), rgba(150,207,236,0) 66%),
    radial-gradient(58% 125% at 82% 120%, rgba(206,168,240,.27), rgba(206,168,240,0) 66%),
    linear-gradient(180deg, rgba(224,232,250,0), rgba(224,232,250,.32));}
@media(max-width:1023px){#steps::after{height:240px}}
@media(max-width:767px){#steps::after{height:180px}}

/* заголовок над гантт-вариантом этапов */
.gnt-head{margin-top:var(--sp-24)}
@media(max-width:1279px){.gnt-head{margin-top:var(--sp-16)}}
@media(max-width:767px){.gnt-head{margin-top:var(--sp-12)}}
.gnt-head+.gnt{margin-top:var(--sp-12)}

.fld{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;line-height:1.2}
.fld + .fld{border-top:1px solid #f4f4f7}
.fld b{font-weight:500;color:var(--text-title)}
.fld i{font-style:normal;color:var(--text-secondary);font-size:10.5px}
.rel{position:relative;height:2px;background:transparent}
.rel::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(125,76,207,.45)}
.rel::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:#fff;border:2px solid var(--brand-100)}
@media(max-width:1023px){
  .rel{display:none}
}

/* этапы внедрения разделены на две секции */
#steps{padding-bottom:var(--sp-16)}
@media(max-width:1279px){#steps{padding-bottom:var(--sp-12)}}
@media(max-width:767px){#steps{padding-bottom:var(--sp-8)}}
#steps-gnt{position:relative;padding-top:var(--sp-16)}
#steps-gnt>.container{position:relative;z-index:1}
.gnt-head{margin-top:0}

/* CTA установки: блок сервера чуть левее */

/* мобилка: подпись сервера в одну строку */
@media(max-width:767px){.op-server__head span br{display:none}.op-server__head span{white-space:nowrap}}

/* мобилка: карточки импортозамещения — как карточки раздела on-premise */
@media(max-width:767px){
  #importozam .imp-card{padding:var(--sp-6);gap:var(--sp-3)}
  #importozam .imp-head{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  #importozam .imp-card h3{font-size:var(--fs-lg);line-height:var(--lh-lg)}
}

@media(min-width:768px) and (max-width:1279px){#steps-gnt{padding-top:var(--sp-16)}}
@media(max-width:767px){#steps-gnt{padding-top:var(--sp-12)}}
@media(max-width:767px){#steps-gnt{padding-top:var(--sp-8)}}
/* блок внедрения виден и ниже 1024: раскладка Ганта складывается в одну колонку */

/* CTA установки: текстовая колонка уже */
@media(min-width:1024px){.fcta__copy{max-width:560px}}

/* гантт: вертикальная линия между номерами этапов */
.gnt__row{position:relative}
.gnt__row:not(:last-child)::before{content:"";position:absolute;left:13px;top:38px;bottom:-12px;
  width:2px;background:var(--brand-48k);border-radius:1px;z-index:0}
.gnt__num{position:relative;z-index:1}
@media(max-width:1023px){.gnt__row:not(:last-child)::before{bottom:-8px}}

/* десктоп: карточки дорожной карты одинаковой высоты */
@media(min-width:1024px){
  .rmap__item--top .rmap__card,.rmap__item--bot .rmap__card{align-self:stretch}
  .rmap__card{display:flex;flex-direction:column;gap:var(--sp-1)}
}

/* карточки мобильного раздела: голубой засвет в правом нижнем углу */
.mob2-card{position:relative;overflow:hidden}
.mob2-card>*{position:relative;z-index:1}
.mob2-card::after{content:"";position:absolute;right:0;bottom:0;width:100%;height:100%;z-index:0;pointer-events:none;
  background:radial-gradient(130% 130% at 100% 72%,#E4F2FD 12%,rgba(228,242,253,0) 82%)}

/* вторая карточка (PWA) — фиолетовый засвет */
.mob2-grid .mob2-card:nth-child(2)::after{
  background:radial-gradient(130% 130% at 100% 72%,#EFE9F9 12%,rgba(239,233,249,0) 82%)}

/* CTA установки: текстовая колонка еще уже */
@media(min-width:1024px){.fcta__copy{max-width:490px}}

@keyframes rfArrow{
  0%{transform:translateX(-3px);opacity:.6}
  50%{transform:translateX(3px);opacity:1}
  100%{transform:translateX(-3px);opacity:.6}
}

/* гантт: разделитель начинается от текста, не пересекая линию этапов */
.gnt__row + .gnt__row::after{content:"";position:absolute;left:38px;right:0;top:0;height:1px;
  background:var(--k100);z-index:0}
@media(max-width:1023px){.gnt__row + .gnt__row::after{left:34px}}

/* контур, карточка «Задачи»: серые полоски-заголовки над столбцами */
.op-kcol::before{content:"";display:block;height:4px;border-radius:2px;background:var(--k200);margin-bottom:2px}
.op-kcol:nth-child(1)::before{width:70%}
.op-kcol:nth-child(2)::before{width:60%}
.op-kcol:nth-child(3)::before{width:78%}
.op-kcol:nth-child(4)::before{width:56%}

/* CTA установки: текст по вертикальному центру блока */
@media(min-width:1024px){.fcta__copy{align-self:center}}

/* десктоп: подписи сертификатов — не более двух строк */
@media(min-width:1024px){.cert-card p{font-size:14px;line-height:20px}
  .cert-card{height:auto;aspect-ratio:4/3}}
@media(min-width:1024px) and (max-width:1279px){
  .cert-card{gap:var(--sp-2)}
  .cert-card p{font-size:13px;line-height:18px}
  .cert-img{height:84px}
  .cert-card:hover .cert-img{height:96px}}

.crmv__col .ct{display:flex;align-items:center;gap:4px;font-size:9px;color:#6b6b70}
.crmv__col .ct i{font-style:normal;background:#e8e8ec;border-radius:6px;padding:1px 4px;font-size:8px}
.cdeal .cn{display:block;height:4px;border-radius:2px;background:#dcdce2}
.cdeal .cs{font-size:8.5px;font-weight:600;color:#2d2d2d;white-space:nowrap}

.burn__lg .ln{width:12px;height:2px;border-radius:1px;flex:none}

/* планшет и мобилка: больше воздуха от номера до текста, полоса — по колонке текста */
@media(max-width:1023px){
  .gnt__label{gap:var(--sp-4)}
  .gnt__track{margin-left:42px}
  .gnt__row:not(:last-child)::before{left:13px}
  .gnt__row + .gnt__row::after{left:42px}
}

/* мобильный раздел: первая карточка — синий акцент вместо фиолетового */
.mob2-grid .mob2-card:nth-child(1) .mob2-badge{color:#2196F3}
.mob2-grid .mob2-card:nth-child(1) .ctick{color:#2196F3}
/* планшет: иллюстрации переноса чуть меньше */
@media(min-width:768px) and (max-width:1023px){
  .mig2-img img{max-width:86%;margin-inline:auto;display:block}
}

/* планшет: CTA-конверт — текст слева, иллюстрация справа */
@media(min-width:768px) and (max-width:1023px){
  .duo-card.env-cta{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:var(--sp-8);
    grid-template-rows:auto auto 1fr;align-items:center}
  .duo-card.env-cta>h3,.duo-card.env-cta>p{grid-column:1;align-self:start}
  .duo-card.env-cta>.btn{grid-column:1;justify-self:start;align-self:start;margin-inline:0}
  .duo-card.env-cta>.env-flow{grid-column:2;grid-row:1/span 3;justify-self:center;align-self:center;margin-top:0}
}

/* планшет: модули сеткой 2 в ряд вместо листалки */
@media(min-width:768px) and (max-width:1023px){
  #modules .modgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);
    overflow:visible;padding-inline:0;margin-inline:0;margin-top:var(--sp-8)}
  #modules .modgrid>.flip{flex:none;width:auto;max-width:none}
  #modules .modgrid>.flip:last-child{margin-right:0}
  #modules .mod-nav{display:none !important}
}

/* планшет: градиент CTA-конверта слева направо */
@media(min-width:768px) and (max-width:1023px){.duo-card--cta{background:linear-gradient(90deg,#ece0ff,#cdecff)}}

/* конверт: значок @ на светлом фиолетовом круге */
.env__at{position:absolute;left:50%;top:70%;bottom:auto;transform:translate(-50%,-50%);z-index:4;
  width:56px;height:56px;border-radius:50%;background:#EFE9F9;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;line-height:0;font-weight:600;color:var(--brand-100);padding-bottom:2px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}
@media(max-width:1023px){.env__at{width:48px;height:48px;font-size:27px}}

/* дорожная карта: этапы 2–5 светлее */
.rmap__item:nth-child(n+2):nth-child(-n+5).on .rmap__dot{background:#EFE9F9;color:var(--brand-100)}
/* гантт: еще больше воздуха от номера до текста */
.gnt__label{gap:var(--sp-4)}
@media(max-width:1023px){.gnt__label{gap:var(--sp-5)}.gnt__track{margin-left:46px}.gnt__row + .gnt__row::after{left:46px}}

/* планшет и мобилка: полосы гантта вдвое ниже */
@media(max-width:1023px){.gnt__track{height:7px}.gnt__bar{height:7px;border-radius:4px}}

/* заголовок гантт-секции: отступ снизу по брейкпоинтам */
@media(min-width:768px) and (max-width:1279px){.gnt-head{margin-bottom:32px}}
@media(max-width:767px){.gnt-head{margin-bottom:24px}.gnt-head+.gnt{margin-top:24px}}

/* гантт: белая обводка у номеров этапов */
.gnt__num{box-shadow:0 0 0 3px #fff}
/* дорожная карта: этапы 2–5 — чуть контрастнее */
.rmap__item:nth-child(n+2):nth-child(-n+5).on .rmap__dot{background:#e9dffa;color:var(--brand-100)}
/* гантт: появление строк по мере скролла */
.gnt__row{opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.gnt__row.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.gnt__row{opacity:1;transform:none;transition:none}}
/* мокап диаграммы сгорания из FeatureMocks */
.fmini .card>.ttl{font-size:11.5px;font-weight:600;color:#2d2d2d;margin-bottom:4px}
.fmini .card>svg[viewBox="0 0 280 150"]{width:100%;height:auto;flex:1;min-height:0}

.fld{padding:6px 10px;font-size:10.5px}
.fld i{font-size:9.5px}

/* мобилка: RFI-схема как на десктопе, пропорционально уменьшенная */
@media(max-width:767px){
  .duo .rfi-flow{flex-wrap:nowrap;width:464px;transform-origin:top center;
    margin-inline:auto;translate:none;margin-left:calc(50% - 232px);
    transform:scale(var(--rfi-s,.62));margin-bottom:var(--rfi-mb,-72px)}
}

/* десктоп: схема баз ближе к карточкам */
@media(min-width:1024px){.dbviz{margin-top:var(--sp-6)}}

/* конверт: пока лист внутри — он пустой, контент проявляется после выезда */
.env__letter .rf-t,.env__letter .env-row{animation:envContent 17.5s ease infinite}
@keyframes envContent{0%,14%{opacity:0}24%,88%{opacity:1}93%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.env__letter .rf-t,.env__letter .env-row{animation:none;opacity:1}}

/* планшет: схема баз — та же композиция, что на десктопе, только компактнее */
@media(min-width:768px) and (max-width:1023px){
  .dbsch{display:grid;grid-template-columns:1fr 30px 1fr 30px 1fr;max-width:100%;gap:0}
  .dbsch .rel{display:block}
  .dbsch .tbl:nth-of-type(2){grid-column:auto}
  .tbl__h{padding:6px 8px;font-size:10px}
  .fld{padding:5px 8px;font-size:9.5px}
  .fld i{font-size:8.5px}
}
/* мобилка: одна колонка, таблицы одинаковой ширины */
@media(max-width:767px){
  .dbsch{display:grid;grid-template-columns:1fr;gap:var(--sp-3);max-width:340px}
  .dbsch .rel{display:none}
  .dbsch .tbl:nth-of-type(2){grid-column:auto}
}

/* мокап диаграммы сгорания: легенда мелким шрифтом */
.fmini .card>.row span{display:inline-flex;align-items:center;gap:4px;font-size:8.5px;line-height:1.2;
  color:#6b6b70;white-space:nowrap}
.fmini .card>.row i{flex:none}

/* планшет: модули страницами 2×2 с листанием вбок */
@media(min-width:768px) and (max-width:1023px){
  #modules .modgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
    grid-auto-columns:calc((100% - var(--sp-6)) / 2);grid-template-columns:none;
    gap:var(--sp-6);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    padding-inline:0;margin-inline:0;scrollbar-width:none;-ms-overflow-style:none}
  #modules .modgrid::-webkit-scrollbar{display:none}
  #modules .modgrid>.flip{width:auto;max-width:none;flex:none;scroll-snap-align:start}
  #modules .mod-nav{display:flex !important;margin-top:var(--sp-6)}
}

/* мобилка: засвет в карточках приложения — по центру снизу */
@media(max-width:767px){
  .mob2-card::after{background:radial-gradient(120% 80% at 50% 100%,#E4F2FD 10%,rgba(228,242,253,0) 78%)}
  .mob2-grid .mob2-card:nth-child(2)::after{background:radial-gradient(120% 80% at 50% 100%,#EFE9F9 10%,rgba(239,233,249,0) 78%)}
}

/* мобилка: иллюстрации переноса — по краям вровень с текстом карточки */
@media(max-width:767px){
  .mig2-img{margin-inline:calc(-1 * var(--sp-4));padding-inline:var(--sp-4)}
  .mig2-img img{width:100%;max-width:none}
}

/* ===== CTA установки: композиция фиксированного размера, масштабируется целиком ===== */
.cta-install{position:relative;display:flex;align-items:center;width:560px;min-height:360px;
  margin-inline:0;margin-left:calc(50% - 260px);transform-origin:top center;flex:none}
.ci-server{position:relative;width:290px;left:-8px;flex:none;padding:var(--sp-6)}
.ci-box{position:absolute;width:340px;right:8px;top:50%;transform:translateY(-50%)}
.fcta__visual{overflow:visible}

/* мобилка: воздух вокруг терминала и мини-мокапа в раскрытом модуле */
@media(max-width:767px){
  .deploy__term{margin-top:var(--sp-6)}
  #modules .flip.open .flip__front .fmini{margin-top:var(--sp-3);margin-bottom:var(--sp-2)}
}

/* мобилка: схема баз скрыта */
@media(max-width:767px){.dbviz{display:none}}

/* CTA установки: контейнер визуала во всю колонку — иначе масштаб считается от схлопнутой ширины */
.fcta__visual{width:100%}

/* секция баз: убрать фоновую сетку */
.db-pattern{display:none}

/* десктоп: карточки этапов — радиус 16 */
@media(min-width:1280px){.rmap__card{border-radius:var(--radius-2xl)}}

/* мобилка: отступ под заголовком секции импортозамещения */
@media(max-width:767px){#importozam .s-head{margin-bottom:24px}}

/* блок поддержки: последний в секции — без нижнего отступа */
#custom .sup2{margin-bottom:0}

@media(max-width:767px){#buy .s-head{margin-bottom:24px}}

/* CTA-конверт: текстовая колонка по центру по вертикали */
@media(min-width:1024px){.duo-card.env-cta{grid-template-rows:1fr min-content min-content min-content 1fr}
  .duo-card.env-cta>h3{grid-row:2}
  .duo-card.env-cta>p{grid-row:3}
  .duo-card.env-cta>.btn{grid-row:4}
  .duo-card.env-cta>.env-flow{grid-row:1/6;align-self:center}}

/* десктоп: три кейса в кадре, четвертый — по стрелке */
@media(min-width:1280px){
  #cases .otziv-track{scroll-snap-type:x proximity}
  #cases .otziv{flex:0 0 calc((100% - 64px) / 3);max-width:calc((100% - 64px) / 3);scroll-snap-align:start}
  #cases .otziv-nav{display:flex;margin:48px 0 0}
  #cases{padding-bottom:48px}
}

/* планшет: картинка приложения не наезжает на текст */
@media(min-width:768px) and (max-width:1023px){
  .mob2-card{column-gap:var(--sp-4)}
  .mob2-visual{min-width:0;flex:none;align-items:flex-end;margin-top:0}
  .mob2-pic{width:auto;height:288px;max-width:100%;align-self:flex-end;flex:none;display:block}
  .mob2-card{align-items:flex-end;height:320px}
  .mob2-copy{align-self:flex-start;padding-bottom:var(--sp-4)}
  .mob2-list br{display:none}
}

/* планшет: те же 3 столбика, что на десктопе */
@media(min-width:768px) and (max-width:1023px){
  #db .db-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:0}
  #db .db-card{flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-5)}
  #db .db-card p{font-size:var(--fs-sm);line-height:var(--lh-sm)}
  .dbfl{--dbg:32px}
}

/* вторая дорожка канбана внизу */
.shw3-kb .kb .hdr--2{margin-top:0;padding-top:14px;border-top:1px solid #DDDDE2}

/* мобилка: композиция центрируется по видимым чернилам (у PNG коробки справа ~16% прозрачного поля) */
@media(max-width:767px){.cta-install{margin-left:calc(50% - 260px + 10px)}}

@media(max-width:767px){.certs{margin-top:48px}#importozam{padding-bottom:48px}}

@media(max-width:767px){#db .s-head{margin-bottom:24px}}

@media(max-width:767px){#buy .buy-grid{margin-top:24px}}

@media(max-width:767px){#cta .fcta__cta{margin-bottom:8px}#cta .fcta__in{row-gap:16px}
  #migrate .sh{margin-bottom:24px}#migrate .mig2-grid,#migrate .mig-grid{margin-top:0}}

@media(max-width:767px){#steps{padding-bottom:48px}}

@media(max-width:767px){#mobile .s-head{margin-bottom:24px}#mobile .mob2-grid{margin-top:24px}}

/* планшет: единый отступ 32 под заголовками секций */
@media(min-width:768px) and (max-width:1023px){
  #mobile .sh,#migrate .sh,#steps .sh,#steps-gnt .sh,#buy .sh,#db .sh,#onprem .sh{margin-bottom:32px}
  #mobile .mob2-grid,#migrate .mig2-grid,#steps .rmap,#steps-gnt .gnt,
  #buy .buy-grid,#db .dbviz,#onprem .onp-grid{margin-top:0}
}

@media(min-width:768px) and (max-width:1023px){#importozam .certs{margin-top:24px}#importozam .imp-duo{margin-bottom:0}}

/* планшет: текстовая колонка RFI/конверта — по центру по вертикали, кнопка ближе к тексту */
@media(min-width:768px) and (max-width:1023px){
  #custom .duo-card--cta{grid-template-rows:auto auto auto;align-content:center;row-gap:12px}
  #custom .duo-card--cta>h3,#custom .duo-card--cta>p,#custom .duo-card--cta>.btn{align-self:center}
  #custom .duo-card--cta>.btn{justify-self:start;margin-top:4px}
}

/* мобилка: все h2 секций — 24/32 */
@media(max-width:767px){
  .sh__heading,.faq-section__title,.lmq h2,.s-head h2{font-size:24px;line-height:32px}
}

@media(max-width:767px){.mob2-list br{display:none}}

@media(max-width:767px){#steps .s-head{margin-bottom:24px}#steps .rmap{margin-top:24px}}

@media(max-width:767px){#importozam .imp-duo{margin-top:24px}}

/* планшет: все h2 секций — 24/32 */
@media(min-width:768px) and (max-width:1023px){
  .sh__heading,.faq-section__title,.lmq h2,.s-head h2{font-size:24px;line-height:32px}
}

@media(min-width:768px) and (max-width:1023px){#importozam .imp-head h3{font-size:18px;line-height:26px}}

/* мобилка: сертификаты в 2 столбика */
@media(max-width:767px){
  #importozam .certs{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);padding:var(--sp-4)}
  #importozam .cert-card{padding:var(--sp-3) var(--sp-3) 0}
  #importozam .cert-card p{font-size:11px;line-height:15px}
  #importozam .cert-card{height:auto;gap:var(--sp-3)}
  #importozam .cert-img{width:calc(100% - 40px);height:84px}
  #importozam .cert-img img{width:100%;height:100%;object-fit:cover;object-position:top}
  #importozam .cert-card:hover .cert-img{height:84px}
}

/* === ВАРИАНТ: карточки-баннеры БД (референс Yandex Cloud, палитра Кайтен) === */
.db2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
.db2-card{position:relative;overflow:hidden;border-radius:var(--radius-2xl);padding:var(--sp-8);
  min-height:300px;display:grid;grid-template-columns:auto 1fr;align-content:start;align-items:center;
  column-gap:var(--sp-4);isolation:isolate}
.db2-card h3{font-size:var(--fs-md);line-height:var(--lh-md);font-weight:400;max-width:26ch;position:relative;z-index:2;grid-column:2;grid-row:1}
.db2-ic{display:inline-flex;width:48px;height:48px;border-radius:10.2px;align-items:center;justify-content:center;flex:none;position:relative;z-index:2;grid-column:1;grid-row:1;align-self:start}
.db2-ic svg{width:24px;height:24px}

/* 1 — насыщенный фиолетовый + волны */
.db2-card--solid{background:#fff;color:var(--text-title)}
.db2-card--solid .db2-ic{background:var(--brand-12);color:var(--brand-100)}
.db2-art{position:absolute;pointer-events:none;z-index:1}

/* 2 — светло-фиолетовый + сетка кружков */
.db2-card--soft{background:#fff;color:var(--text-title)}
.db2-card--soft .db2-ic{background:var(--brand-12);color:var(--brand-100)}
.db2-art--chart{left:calc(50% + 16px);right:auto;transform:translateX(-50%);bottom:24px;width:320px;height:200px;padding:0}
.chw{position:absolute;left:50%;margin-left:-107px;bottom:0;width:214px;aspect-ratio:4/3;z-index:3;
  background:#fff;border:1px solid #EFEAF7;border-radius:12px;padding:12px}
.chw--add{position:absolute;left:auto;right:0;bottom:6px;width:136px;aspect-ratio:4/3;z-index:1;padding:0 24px 0 0;
  display:flex;align-items:center;justify-content:flex-end;
  background:#FAF7FE;border:0}
.chw-plus{width:26px;height:26px;border-radius:50%;background:var(--brand-12);color:var(--brand-100);
  display:inline-flex;align-items:center;justify-content:center}
.chw-plus svg{width:14px;height:14px}
.chw__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chw__head i{flex:1;height:6px;border-radius:3px;background:#DCCDF5;max-width:96px}
.chw__pill{width:34px;height:14px;border-radius:9999px;background:var(--brand-12)}
.chw__plot{position:relative;height:88px}
.chw__line{position:absolute;left:0;right:0;top:0;width:100%;height:64px;z-index:2}
.chw__bars{position:absolute;left:0;right:0;bottom:0;height:74px;display:flex;align-items:flex-end;gap:8px}
.chw__bars i{flex:1;border-radius:4px 4px 2px 2px;background:#F0EBFA}
.chw__bars i.on{background:#CDB8EE}

.db2-card--tint{background:#fff;color:var(--text-title)}
.db2-card--tint .db2-ic{background:var(--brand-12);color:var(--brand-100)}
.db2-art--hub{left:50%;right:auto;transform:translateX(-50%);bottom:24px;width:300px;height:178px}
.hub-bg{position:absolute;inset:0;width:100%;height:100%}
.hub-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;
  border-radius:16px;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 6px 16px rgba(125,76,207,.28))}
.hub-core svg{width:52px;height:52px}
.hub-node{position:absolute;box-sizing:border-box;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--brand-100);
  border:1px solid #EFEAF7;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -8px rgba(45,45,45,.28)}
.hub-node svg{width:20px;height:20px}
.hub-node--n svg{width:23px;height:23px}
.hub-node--n{left:50%;top:-5px;transform:translateX(-50%)}
.hub-node--s{left:50%;bottom:-5px;transform:translateX(-50%)}
.hub-node--w{left:24px;top:50%;transform:translateY(-50%)}
.hub-node--e{right:24px;top:50%;transform:translateY(-50%)}

@media(max-width:1023px){.db2-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .db2-card{min-height:0;padding:var(--sp-6);border-radius:var(--radius-xl)}
  .db2-card h3{max-width:22ch}}

/* === БЕНТО-РАСКЛАДКА (вариант блока on-premise) === */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:min-content 1fr;gap:var(--sp-6);margin-top:var(--sp-12)}
.bnt{position:relative;overflow:hidden;background:#fff;border-radius:var(--radius-2xl);padding:var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.bnt h3{font-size:var(--fs-lg);line-height:var(--lh-lg)}
.bnt p{color:var(--text-secondary);font-size:var(--fs-md);line-height:var(--lh-md)}
.bnt--a{grid-column:span 4;grid-row:span 2;min-height:396px;justify-content:flex-end}
.bnt--b{grid-column:span 4;grid-row:span 2;min-height:320px}
/* десктоп: карточка «Соблюдение…» тянется до плашки иконок — отступ снизу ровно gap */
@media(min-width:1024px){.bento{grid-template-rows:1fr min-content}}
.bnt-mini{grid-column:span 4;align-self:start;background:#fff;border-radius:var(--radius-2xl);padding:var(--sp-5);
  display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.mini-ic{aspect-ratio:1/1;border-radius:8px;background:var(--k100);display:flex;align-items:center;justify-content:center}
.mini-ic img{width:22px;height:22px;display:block;filter:grayscale(1) brightness(1.64)}
.bnt--d{grid-column:span 4;align-self:stretch}

.bnt--e{grid-column:span 8;display:grid;grid-template-columns:1fr 344px;align-items:start;gap:var(--sp-6);padding:var(--sp-6) var(--sp-6) var(--sp-5)}
.bnt--f{grid-column:span 4;padding:var(--sp-6) var(--sp-6) var(--sp-4)}

/* A — светлая плитка «закрытый контур» */
.bnt--a{background:#fff;justify-content:flex-start}
/* Контур компании: вся композиция в cqw от ширины .bnt__art — рамка, сервер и плашка
   масштабируются одним куском, пропорции десктопа сохраняются. База: art 384px = 100cqw. */
.bnt__art{container-type:inline-size;position:absolute;inset:0;pointer-events:none}
.bnt-frame{position:absolute;left:50%;top:auto;bottom:6.25cqw;transform:translateX(-50%);
  width:77.604cqw;aspect-ratio:298/158;
  border:1px dashed #D7C7F2;border-radius:4.167cqw;background:#FBF9FF}
.bnt-srv{position:absolute;left:50%;top:auto;bottom:26.823cqw;transform:translate(-50%,50%);width:46.875cqw;background:#fff;
  border:1px solid #EFEAF7;border-radius:3.646cqw;padding:2.604cqw;display:flex;flex-direction:column;gap:1.563cqw;
  box-shadow:none}
.srv-unit{display:flex;align-items:center;gap:1.302cqw;background:var(--k100);border-radius:2.083cqw;padding:1.563cqw 2.344cqw}
.srv-unit b{flex:none;width:1.823cqw;aspect-ratio:1;border-radius:50%;background:#C9B6EC}
.srv-unit i{flex:1;height:1.302cqw;border-radius:0.781cqw;background:#E4E4E4}
.srv-unit i:first-of-type{margin-left:1.302cqw}
.bnt-lock{position:absolute;left:50%;top:auto;bottom:43.75cqw;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:1.563cqw;padding:1.563cqw 3.125cqw;border-radius:9999px;background:var(--brand-12);
  color:var(--brand-100);font-size:3.125cqw;font-weight:var(--fw-med);white-space:nowrap;
  box-shadow:0 8px 20px -14px rgba(125,76,207,.45)}
.bnt-lock svg{width:3.646cqw;height:3.646cqw}
.bnt__copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--sp-3)}

/* мини-плитки */
.mini{background:#fff;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;
  color:var(--brand-100);aspect-ratio:1/1}
.mini svg{width:26px;height:26px}

/* D — светлая тонированная */
.bnt--tint{background:#fff}
.bnt-cert{margin-top:auto;padding-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-4)}
.cert-sheet{flex:1;min-width:0}
.cert-sheet{position:relative;background:#fff;border-radius:14px;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.cert-row{display:flex;align-items:center;gap:10px}
.cert-chk{flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand-12);color:var(--brand-100);
  display:inline-flex;align-items:center;justify-content:center}
.cert-chk svg{width:11px;height:11px}
.cert-row i{flex:1;height:7px;border-radius:4px;background:var(--k100)}

/* F — оффлайн: локальный контур работает без интернета */
.bnt--soft{background:#fff}
.bnt-lan{margin-top:-42px;padding-top:0;display:flex;justify-content:flex-end}
.off{position:relative;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;margin-bottom:4px}
.off-cloud{color:#DCCDF5;display:inline-flex}
.off-cloud svg{width:180px;height:129px}

@media(max-width:1279px){
  .bnt--a,.bnt--b{grid-column:span 6;grid-row:auto;min-height:0}
  .bnt-mini{grid-column:span 6;grid-template-columns:repeat(7,1fr)}
  .bnt--d{grid-column:span 6}
  .bnt--e{grid-column:span 12;grid-template-columns:1fr}
  .bnt--f{grid-column:span 6}
  .bnt--a{min-height:340px}
}
@media(max-width:767px){
  .bento{grid-template-columns:1fr;gap:var(--sp-4)}
  .bnt,.bnt-mini{grid-column:span 1 !important}
  .bnt{border-radius:var(--radius-xl);padding:var(--sp-5)}
  .bnt--a{min-height:320px}
  .bnt-mini{grid-template-columns:repeat(7,1fr);gap:6px;padding:var(--sp-4)}
}

/* гант: больше воздуха между номером и текстом на десктопе */
@media(min-width:1280px){#steps-gnt .gnt__label{gap:var(--sp-6)}}

/* автоматизации: правило «Когда → Выполнить» */
.au-rule{grid-column:1/-1;position:relative;z-index:2;margin:var(--sp-6) 0 -8px;display:flex;flex-direction:column;gap:10px}
.au-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.au-cap{font-size:11px;line-height:1;font-weight:var(--fw-semi);letter-spacing:.02em;color:var(--brand-100);text-transform:uppercase}
.au-fld{position:relative;display:flex;align-items:baseline;gap:8px;background:#fff;border:1px solid #E3D8F5;border-radius:9px;
  padding:9px 30px 9px 13px}
.au-fld em{flex:none;font-style:normal;font-size:10px;line-height:14px;color:var(--text-secondary);margin:0}
.au-fld b{flex:1;min-width:0;font-size:12px;line-height:16px;font-weight:400;color:var(--text-title);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-fld svg{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:13px;height:13px;color:var(--text-secondary)}

/* бенто: терминал на сером фоне */
.bnt--e .term{background:var(--k100)}
.bnt--e .term__body{padding:12px 14px 14px;background:var(--k100)}

/* прогресс установки: плавность и зеленый финал */
.ci-bar i{transition:width .18s linear,background-color .5s ease}
.ci-bar i.done{background:var(--brand-100)}

/* тарифы: больше воздуха между иконкой и заголовком на планшете и мобилке */
@media(max-width:1023px){.buy-card h3{gap:var(--sp-5)}}

/* бенто-блок: отступ под заголовком по брейкпоинтам */
@media(min-width:768px) and (max-width:1023px){#onprem-2 .s-head{margin-bottom:var(--sp-8)}#onprem-2 .bento{margin-top:0}}
@media(max-width:767px){#onprem-2 .s-head{margin-bottom:var(--sp-6)}#onprem-2 .bento{margin-top:0}}

/* бенто: терминал без подсветки-тени */
.bnt--e .term{box-shadow:none}

/* третье окно: круговая диаграмма слева */
.chw--pie{position:absolute;left:-34px;margin-left:0;bottom:6px;width:136px;aspect-ratio:4/3;z-index:1;padding:12px;background:#FAF7FE;border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.pie{width:52px;height:52px;border-radius:50%;
  background:conic-gradient(#7D4CCF 0 42%, #C9B6EC 42% 72%, #EFE9F9 72% 100%)}
.pie-legend{display:flex;flex-direction:column;gap:4px;width:100%}
.pie-legend i{height:5px;border-radius:3px;background:#DCCDF5}

/* оффлайн: текст уже, облако правее и выше */
.bnt--f p{max-width:24ch;position:relative;z-index:1}

/* установка: фиолетовая часть заголовка */
.ci-title .ci-run{color:var(--brand-100);font-weight:inherit}

/* тарифы: воздух между иконкой и заголовком на десктопе */
@media(min-width:1024px){.buy-card h3{gap:var(--sp-4)}}

/* инфраструктура: текст в узкой колонке */
.bnt--e .bnt__copy p{max-width:38ch}

/* второй блок on-premise: без отступа сверху */
#onprem{padding-top:0}

/* правило автоматизации: больше воздуха перед блоком «Выполнить» */
.au-rule .au-col + .au-col{margin-top:var(--sp-2)}

/* иллюстрации блока БД: пропорциональное ужимание под ширину карточки */
.db2-art--chart{transform-origin:bottom center;transform:translateX(-50%) scale(var(--ka,1))}
.db2-art--hub{transform-origin:bottom center;transform:translateX(-50%) scale(var(--kh,1))}
@media(min-width:1280px){.db2-grid{--ka:.92;--kh:1}}
@media(min-width:1200px) and (max-width:1279px){.db2-grid{--ka:.87;--kh:.98}}
@media(min-width:1120px) and (max-width:1199px){.db2-grid{--ka:.80;--kh:.90}}
@media(min-width:1024px) and (max-width:1119px){.db2-grid{--ka:.72;--kh:.80}}
@media(max-width:479px){.db2-grid{--ka:.86;--kh:.94}}

/* бенто: плашка иконок под карточкой требований (десктоп) */
@media(min-width:1024px){
  .bnt--b{grid-column:1/span 4}
  .bnt--a{grid-column:5/span 4}
  .bnt--d{grid-column:9/span 4;grid-row:1;align-self:stretch}
  .bnt-mini{grid-column:9/span 4;grid-row:2;align-self:end}
}

/* инфраструктура: терминал по центру плитки */
@media(min-width:1024px){.bnt--e .bnt__term{align-self:center}}

/* планшет: блок про инфраструктуру — в самый низ бенто */
@media(min-width:768px) and (max-width:1023px){.bnt--e{order:10}}

/* планшет: плашка иконок — своей строкой, без пустоты под ней */
@media(min-width:768px) and (max-width:1023px){.bnt-mini{grid-column:7/span 6;order:5;
  grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}}

/* планшет: терминал справа от текста */
@media(min-width:768px) and (max-width:1023px){
  .bnt--e{grid-template-columns:minmax(0,1fr) 320px;align-items:center}
  .bnt--e .bnt__copy p{max-width:34ch}
}

/* планшет: широкая карточка с терминалом — в конец, оффлайн поднимается */
@media(min-width:768px) and (max-width:1023px){#onprem .onp-card--wide{order:10}}

/* планшет и мобилка: иллюстрация контура в потоке под текстом — текст не наезжает */
@media(max-width:1023px){
  .bnt--a{min-height:0}
  .bnt--a .bnt__copy{order:1}
  .bnt--a .bnt__art{position:relative;inset:auto;order:2;height:auto;aspect-ratio:384/190;margin-top:var(--sp-4);
    margin-inline:calc(var(--sp-6) * -1);margin-bottom:calc(var(--sp-6) * -1)}
}

/* планшет и мобилка: иллюстрации блока БД — в потоке под заголовком */
@media(max-width:1023px){
  .db2-card{grid-template-columns:auto 1fr;row-gap:var(--sp-4)}
  .db2-art--chart,.db2-art--hub{position:relative;left:auto;right:auto;bottom:auto;top:auto;
    grid-column:1/-1;grid-row:2;justify-self:center;transform:none;margin-top:var(--sp-2)}
  .db2-art--chart{width:340px;height:200px}
  .db2-art--hub{width:300px;height:178px}
  .au-rule{grid-row:2}
}
@media(max-width:767px){
  .db2-art--chart{zoom:.86;left:17px}
  .db2-art--hub{zoom:.94}
}

/* планшет 768–1023: блок БД — три плашки в ряд */
@media(min-width:768px) and (max-width:1023px){
  .db2-grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  /* планшет: иллюстрации прижаты к нижнему краю карточки */
  .db2-card{align-content:space-between}
  /* композиция графика оптически по центру: диаграмма свисает влево, плюс упирается вправо */
  .db2-art--chart{left:13px}
  .db2-card{padding:var(--sp-5);grid-template-columns:1fr;row-gap:var(--sp-3);min-height:0}
  .db2-ic{grid-column:1;grid-row:1;width:44px;height:44px;border-radius:9.4px}
  .db2-ic svg{width:22px;height:22px}
  .db2-card h3{grid-column:1;grid-row:2;max-width:none;font-size:15px;line-height:22px}
  .au-rule{grid-row:3;margin:var(--sp-2) 0 0;width:320px;justify-self:center;zoom:.58}
  .db2-art--chart,.db2-art--hub{grid-row:3;margin-top:0}
  .db2-art--chart{zoom:.55}
  .db2-art--hub{zoom:.6}
}
@media(min-width:900px) and (max-width:1023px){
  .au-rule{zoom:.7}
  .db2-art--chart{zoom:.68}
  .db2-art--hub{zoom:.74}
}

/* планшет: оффлайн-плитка ниже, облако мельче, колонки вровень */
@media(min-width:768px) and (max-width:1023px){
  .bnt--d{grid-row:span 2}
  .bnt--f{align-self:start}
  .off-cloud svg{width:124px;height:89px}
  .bnt-lan{margin-top:-28px}
  .off{margin-bottom:-11px;padding-right:0;margin-right:-16px}
  .bnt-cert{zoom:.78}
}

/* мобилка: заголовки тарифных карточек мельче */
@media(max-width:767px){.buy-card h3{font-size:var(--fs-lg);line-height:var(--lh-lg)}}
/* планшет: заголовки тарифов не крупнее десктопных */
@media(min-width:768px) and (max-width:1023px){.buy-card h3{font-size:var(--fs-xl);line-height:var(--lh-xl)}}

/* «Гибкость конфигурации»: конструктор карточки — свои поля, пустой слот.
   Вся геометрия в cqw от ширины блока: пропорция карточки (300×170) одинакова на любой ширине.
   База — десктоп: блок 384px = 128.000cqw, карточка 300px = 99.968cqw. */
.bnt-cfg{container-type:inline-size;
  margin-top:auto;margin-inline:calc(var(--sp-6) * -1);margin-bottom:calc(var(--sp-6) * -1);
  padding:var(--sp-4) 12.5% var(--sp-6);display:flex;gap:12px}
.cf-card{flex:1;min-width:0;background:#fff;border-radius:var(--radius-xl);border:1px solid var(--k200);
  aspect-ratio:300/170;
  padding:2.666cqw 4.000cqw 4.000cqw;display:flex;flex-direction:column;gap:3.000cqw}
.cf-title{display:flex;align-items:center;gap:2.333cqw}
.cf-title b{height:2.333cqw;border-radius:1.334cqw;background:var(--k200);flex:1;align-self:flex-start;margin-top:3.000cqw}
.cf-title u{width:6.001cqw;aspect-ratio:1;border-radius:50%;background:var(--brand-12);flex:none;align-self:flex-start;margin-top:1.334cqw}
.cf-gear{width:13.334cqw;aspect-ratio:1;color:#DCCDF5;
  display:flex;align-items:center;justify-content:center;flex:none;margin-left:auto;margin-bottom:-4.000cqw}
.cf-gear svg{width:100%;height:100%}
.cf-fields{display:flex;flex-direction:column;gap:2.333cqw}
.cf-f{display:grid;grid-template-columns:16.667cqw minmax(0,1fr);align-items:center;gap:2.666cqw}
.cf-f span{width:14.666cqw;height:1.667cqw;border-radius:1.000cqw;background:#E0E0E0}
.cf-f em{height:6.001cqw;border-radius:2.001cqw;background:#F5F5F5;justify-self:start;width:100%}
.cf-f em.pill{max-width:26.001cqw;border:0}
.cf-slot{margin-top:0.667cqw;height:8.667cqw;border-radius:2.666cqw;
  background:var(--brand-12);display:flex;align-items:center;justify-content:center;color:var(--brand-100)}
.cf-slot svg{width:5.334cqw;height:5.334cqw}
@media(max-width:767px){
  .bnt-cfg{margin-inline:calc(var(--sp-5) * -1);margin-bottom:calc(var(--sp-5) * -1);
    padding:var(--sp-4) 12.5% var(--sp-5)}
  /* мобилка: облако оффлайна ближе к правому краю плитки */
  .off-cloud svg{width:202px;height:145px}
  .off{padding-right:0;margin-right:-25px;margin-bottom:-30px}
  /* мобилка: контур крупнее — контейнер иллюстрации в край плитки, композиция масштабируется целиком */
  .bnt--a .bnt__art{margin-inline:calc(var(--sp-5) * -1)}
}

/* карточка RFI: на десктопе без верхнего отступа, ниже 1024 — прежние 32px */
@media(min-width:768px) and (max-width:1023px){.env-cta{margin-top:0}}

/* планшет 1024–1279: бенто как на десктопе — a/b на два ряда, терминал рядом с текстом, оффлайн-плитка сбоку */
@media(min-width:1024px) and (max-width:1279px){
  .bnt--a,.bnt--b{grid-row:span 2}
  .bnt--e{grid-column:span 8;grid-template-columns:minmax(0,1fr) 300px}
  .bnt--f{grid-column:span 4}
}

/* Дрожание текста в контуре: сцена растянута дробным множителем, и на
   промотированном слое текст пересэмплируется при каждой перерисовке импульсов.
   Снимаем промотирование со сцены — текст растрируется сразу в конечном
   масштабе; импульсы уводим на собственный слой, чтобы их анимация
   не пачкала область с текстом. */
.stf-inner{will-change:auto}
.op-links{will-change:transform}

/* 1024-1279: колонка текста узкая — бейдж переносится, а не уезжает под картинку.
   Карточка растет под контент, телефон прижат к низу и сохраняет вылет на 8px. */
@media(min-width:1024px) and (max-width:1279px){
  /* облако оффлайна: отступы равны внутреннему полю плитки */
  .bnt-lan{margin-top:auto}
  .off{padding-right:0;margin-right:-23px;margin-bottom:-19px}
  .mob2-copy{flex:0 0 242px}
  .mob2-visual{flex:1 1 auto;min-width:0;align-self:flex-end;margin-bottom:-8px}
  .mob2-pic{width:100%;max-width:282px;height:auto;margin-left:auto}
}

/* планшет 1024-1279: модули в две строки с листанием вбок, поля по бокам 24px */
@media(min-width:1024px) and (max-width:1279px){
  #modules .modgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
    grid-auto-columns:calc((100% - var(--sp-6) * 2) / 3);grid-template-columns:none;
    gap:var(--sp-6);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
    padding-inline:0;margin-inline:0;scrollbar-width:none;-ms-overflow-style:none}
  #modules .modgrid::-webkit-scrollbar{display:none}
  #modules .modgrid>.flip{width:auto;max-width:none;flex:none;scroll-snap-align:start}
  #modules .mod-nav{display:flex !important;margin-top:var(--sp-6)}
}

/* планшет: единый шаг сетки между блоками — 24px по обеим осям */
@media(min-width:768px) and (max-width:1279px){
  .modgrid,.buy-grid,.db2-grid,.mob2-grid,.mig2-grid,.duo,.bento{gap:var(--sp-6)}
}

/* планшет: отступ сверху у блоков переезда и локальной версии — 96, как на десктопе */
@media(min-width:768px) and (max-width:1279px){#migrate,#onprem-2{padding-top:var(--sp-24)}}

/* десктоп: импортозамещение — шаг сеток 24 по обеим осям */
@media(min-width:1280px){.imp-duo,.certs{gap:var(--sp-6)}.certs{margin-top:var(--sp-6)}}

/* мобилка: правило автоматизации — снизу столько же, сколько по бокам */
@media(max-width:767px){.au-rule{margin-bottom:0}}