/* ============================================================
   ORBITA — стили
   Палитра: фон #EEF0EA · поверхность #FFF · текст #0F1218
            акцент #2340FF · сигнал #FF5B2E · линии #D6D9D0
   ============================================================ */

:root {
  --bg: #EEF0EA;
  --surface: #FFFFFF;
  --ink: #0F1218;
  --ink-2: #181C25;
  --ink-3: #252A36;
  --muted: #5B6170;
  --line: #D6D9D0;
  --accent: #2340FF;
  --accent-2: #1A31CC;
  --accent-soft: #E3E7FF;
  --signal: #FF5B2E;
  --ok: #0E8A5F;

  --f-head: "Unbounded", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, sans-serif;

  --r-lg: 28px;
  --r: 20px;
  --r-sm: 12px;
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 90px; }
html.is-ready { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 17px/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 13px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--light { color: #9AA1B2; }
.h2 {
  font: 600 clamp(30px, 4.2vw, 54px)/1.08 var(--f-head);
  letter-spacing: -.02em;
}
.h2--xl { font-size: clamp(34px, 5.4vw, 72px); }
.h3 {
  font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--f-head);
  letter-spacing: -.01em;
}
.accent-text { color: var(--accent); }

.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 rgba(255, 91, 46, .6);
  animation: pulse 1.8s infinite;
  display: inline-block; flex: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 91, 46, .55); }
  70% { box-shadow: 0 0 0 10px rgba(255, 91, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 91, 46, 0); }
}

/* ---------- buttons ---------- */
.btn {
  --h: 56px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 8px 0 26px;
  border-radius: 999px;
  font: 700 16px/1 var(--f-body);
  transition: transform .3s var(--ease), background .3s, color .3s, box-shadow .3s;
  white-space: nowrap;
}
.btn__arrow {
  width: calc(var(--h) - 14px); height: calc(var(--h) - 14px);
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16);
  transition: transform .4s var(--ease);
  font-size: 18px;
}
.btn:hover .btn__arrow { transform: rotate(-45deg); }
.btn:active { transform: scale(.97); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: 0 10px 30px -12px rgba(35, 64, 255, .7); }
.btn--accent:hover { background: var(--accent-2); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--accent); }
.btn--ghost { padding: 0 26px; border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--sm { --h: 46px; font-size: 15px; padding-left: 20px; }
.btn--sm:not(:has(.btn__arrow)) { padding-right: 20px; }
.btn--wide { width: 100%; justify-content: space-between; }
.btn--icon { --h: 48px; width: 48px; padding: 0; font-size: 20px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.is-scrolled {
  background: rgba(238, 240, 234, .82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 32px; height: 78px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--f-head); letter-spacing: .02em; }
.logo__mark {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor;
  position: relative; display: block;
}
.logo__mark i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  top: 50%; left: 50%; margin: -4px 0 0 -4px;
  animation: orbit 4s linear infinite;
}
@keyframes orbit {
  from { transform: rotate(0) translateX(13px); }
  to { transform: rotate(360deg) translateX(13px); }
}
.logo--light { color: #fff; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-weight: 600; font-size: 15px; }
.nav__links a { position: relative; padding: 6px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(15, 18, 24, .06); flex: none; }
.lang__btn {
  min-width: 38px; height: 32px; padding: 0 10px; border-radius: 999px;
  font: 700 12.5px/1 var(--f-body); letter-spacing: .04em; color: var(--muted);
  transition: background .25s, color .25s;
}
.lang__btn:hover { color: var(--ink); }
a.lang__btn { display: inline-flex; align-items: center; justify-content: center; }
.lang__btn.is-active { background: var(--ink); color: #fff; }
.nav__burger { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: #fff; transition: transform .3s; }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
.nav__mobile { display: none; }

/* ---------- hero ---------- */
.hero { padding: 140px 0 0; position: relative; }
.hero::before {
  /* сетка-подложка */
  content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 10%, transparent 70%);
  opacity: .7;
}
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero__title {
  font: 600 clamp(34px, 4.6vw, 64px)/1.04 var(--f-head);
  letter-spacing: -.03em;
  margin: 22px 0 26px;
}
.rotator {
  display: block; position: relative; height: 1.12em; overflow: hidden; color: var(--accent);
}
.rotator span { display: block; white-space: nowrap; line-height: 1.12em; transition: transform .6s var(--ease); will-change: transform; }
.hero__lead { font-size: 19px; color: var(--muted); max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 52px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.hero__stats dt { font: 600 28px/1 var(--f-head); letter-spacing: -.02em; }
.hero__stats dd { margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

/* console */
.console {
  background: var(--ink); color: #E8EAF0; border-radius: var(--r-lg);
  padding: 18px; position: relative;
  box-shadow: 0 50px 80px -40px rgba(15, 18, 24, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .8s var(--ease);
}
.console:hover { transform: none; }
.console__head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; font-size: 13px; }
.console__dots { display: flex; gap: 6px; }
.console__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-3); }
.console__title { color: #8D94A6; font-family: ui-monospace, Consolas, monospace; }
.console__live { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .1em; font-size: 11px; color: var(--signal); }
.console__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.console__metrics div { background: var(--ink-2); border-radius: 14px; padding: 14px; }
.console__metrics small { display: block; font-size: 11px; color: #8D94A6; line-height: 1.3; }
.console__metrics b { display: block; margin-top: 8px; font: 600 22px/1 var(--f-head); font-variant-numeric: tabular-nums; }
.console__feed { list-style: none; margin: 10px 0 0; padding: 0; height: 318px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.feed-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center;
  background: var(--ink-2); border-radius: 14px; padding: 11px 14px;
  animation: feedIn .6s var(--ease) both;
}
@keyframes feedIn { from { opacity: 0; transform: translateY(-14px) scale(.98); } to { opacity: 1; transform: none; } }
.feed-item__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.feed-item__ico.k-call { background: rgba(255, 91, 46, .14); color: var(--signal); }
.feed-item__ico.k-bot { background: rgba(35, 64, 255, .22); color: #8C9BFF; }
.feed-item__ico.k-auto { background: rgba(14, 138, 95, .2); color: #3CD39A; }
.feed-item__ico.k-ai { background: rgba(255, 255, 255, .08); color: #fff; }
.feed-item b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.feed-item small { display: block; font-size: 12.5px; color: #8D94A6; line-height: 1.35; }
.feed-item time { font-size: 12px; color: #6B7286; font-family: ui-monospace, Consolas, monospace; }
.console__foot { text-align: center; font-size: 12px; color: #6B7286; padding: 12px 0 2px; }

/* marquee */
.marquee { margin-top: 90px; border-block: 1px solid var(--line); overflow: hidden; padding: 22px 0; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: marquee 45s linear infinite; }
.marquee__track span { font: 500 20px/1 var(--f-head); color: #9196A0; white-space: nowrap; }
.marquee__track span::before { content: "✦"; margin-right: 56px; color: var(--accent); font-size: 12px; vertical-align: middle; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { padding: 130px 0; }
.section--tight { padding-top: 40px; }
.section__head { max-width: 780px; margin-bottom: 56px; }
.section__head .h2 { margin-top: 18px; }
.section__head--row { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.section__lead { margin-top: 20px; color: var(--muted); font-size: 18px; max-width: 560px; }
.section--dark { background: var(--ink); color: #fff; border-radius: 48px; margin: 0 12px; }
.section__head--light .section__lead { color: #9AA1B2; }

/* ---------- bento ---------- */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
}
.tile {
  background: var(--surface); border-radius: var(--r-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 22px; min-width: 0;
  border: 1px solid rgba(15, 18, 24, .04);
}
.tile__top .h3 { margin-top: 14px; max-width: 520px; }
.tile__top--row { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.tile--voice { grid-column: span 7; grid-row: span 2; }
.tile--chat { grid-column: span 5; grid-row: span 2; }
.tile--auto { grid-column: span 12; }
.tile--ai { grid-column: span 5; }
.tile--web { grid-column: span 7; }
.tile--soft { grid-column: span 12; flex-direction: row; align-items: stretch; }
.tile--soft .tile__top { flex: 0 0 34%; }
.tile--dark { background: var(--ink); color: #fff; }

.tag {
  display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px;
  background: var(--bg); font-size: 13px; font-weight: 700;
}
.tag--light { background: rgba(255, 255, 255, .08); color: #C6CBD8; }
:is(.showcase, .dmodal) .tag { white-space: nowrap; flex: none; }
.tile__list { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tile__list li { font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: #C6CBD8; }

/* voice */
.voice { background: var(--ink-2); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.voice__wave { height: 74px; display: flex; align-items: center; gap: 3px; }
.voice__wave i {
  flex: 1; border-radius: 3px; background: #3A4050; height: 8%;
  transition: height .12s linear, background .3s;
}
.voice__wave.is-ai i { background: var(--accent); }
.voice__wave.is-client i { background: var(--signal); }
.voice__transcript { flex: 1; min-height: 230px; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; scrollbar-width: none; }
.voice__transcript::-webkit-scrollbar { display: none; }
.voice__transcript {
  /* верхние реплики плавно уходят, а не обрезаются */
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  padding-top: 24px;
}
.voice__hint--ring { animation: blink 1.2s infinite; }

/* выбор голоса ИИ */
.voices { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--ink-3); }
.voices__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voices__label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8C9BFF; }
.voices__tip { font-size: 12.5px; color: #6B7286; }
.voices__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.vchip {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 14px;
  background: var(--ink-3); color: #C6CBD8; text-align: left; min-width: 0;
  border: 1.5px solid transparent; transition: background .25s, border-color .25s, color .25s;
}
.vchip:hover { background: #2E3442; color: #fff; }
.vchip.is-active { border-color: var(--accent); background: rgba(35, 64, 255, .18); color: #fff; }
.vchip__ava {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px var(--f-head); color: #fff; background: #3A4152; position: relative;
}
.vchip[data-g="f"] .vchip__ava { background: linear-gradient(135deg, #2340FF, #7360F2); }
.vchip[data-g="m"] .vchip__ava { background: linear-gradient(135deg, #0E8A5F, #2340FF); }
.vchip.is-playing .vchip__ava::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent);
  animation: ringPulse 1.1s ease-out infinite;
}
@keyframes ringPulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.vchip__txt { min-width: 0; }
.vchip__txt b { display: block; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vchip__txt small { display: block; font-size: 11px; color: #8D94A6; }
.line.line--switch { grid-template-columns: 1fr; font-size: 12.5px; color: #8C9BFF; font-weight: 700; }

.voice__more {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--r);
  border: 1px dashed #3A4152; font-size: 14px; color: #B5BBC9; line-height: 1.45;
}
.voice__more p { flex: 1; }
.voice__moreBtn {
  flex: none; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--ink);
  font-weight: 800; font-size: 13.5px; transition: background .25s, color .25s;
}
.voice__moreBtn:hover { background: var(--accent); color: #fff; }
.voice__hint { color: #8D94A6; font-size: 15px; margin: auto 0; text-align: center; padding: 0 20px; }
.line { display: grid; grid-template-columns: 82px 1fr; gap: 12px; font-size: 15px; line-height: 1.5; animation: feedIn .4s var(--ease) both; }
.line__who { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-top: 4px; }
.line--ai .line__who { color: #8C9BFF; }
.line--client .line__who { color: var(--signal); }
.line--sys { grid-template-columns: 1fr; font-size: 13px; color: #3CD39A; font-weight: 700; }
.voice__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.voice__timer { margin-left: auto; font-family: ui-monospace, Consolas, monospace; color: #8D94A6; font-variant-numeric: tabular-nums; }
.play-ico { width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
#callBtn.is-on .play-ico { width: 10px; height: 10px; border: 0; background: #fff; border-radius: 2px; }
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #8D94A6; cursor: pointer; user-select: none; }
.switch input { appearance: none; width: 36px; height: 20px; border-radius: 99px; background: var(--ink-3); position: relative; cursor: pointer; transition: background .3s; margin: 0; }
.switch input::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: transform .3s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }

/* chat */
.phone { background: var(--bg); border-radius: var(--r); display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 470px; }
.phone__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.phone__head b { display: block; font-size: 15px; line-height: 1.2; }
.phone__head small { color: var(--ok); font-size: 12.5px; font-weight: 700; }
.phone__ava { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 15px var(--f-head); }
.phone__body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 340px; scrollbar-width: none; }
.phone__body::-webkit-scrollbar { display: none; }
.msg { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; animation: feedIn .35s var(--ease) both; white-space: pre-line; }
.msg--bot { background: var(--surface); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg--me { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.msg--typing { display: inline-flex; gap: 4px; padding: 14px; }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: #A0A5B0; animation: blink 1s infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.phone__replies { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 16px; }
.phone__replies button {
  padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--accent);
  color: var(--accent); font-size: 13.5px; font-weight: 700; transition: background .2s, color .2s;
  animation: feedIn .35s var(--ease) both;
}
.phone__replies button:hover { background: var(--accent); color: #fff; }

/* segmented */
.seg { display: inline-flex; padding: 4px; background: var(--bg); border-radius: 999px; flex: none; }
.seg__btn { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--muted); transition: background .25s, color .25s; }
.seg__btn.is-active { background: var(--ink); color: #fff; }

/* automation flow */
.flow { position: relative; padding: 0 0 34px; }
.flow::after {
  /* рельс, по которому бегут данные */
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 14px);
}
.flow__nodes { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.node {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 2;
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.node.is-hit { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 14px 30px -16px rgba(35, 64, 255, .6); }
.node__ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 17px; margin-bottom: 10px; }
.node b { font-size: 15px; }
.node small { font-size: 13px; color: var(--muted); }
.flow.is-manual .node__ico { background: #FFE6DE; color: var(--signal); }
.flow.is-manual .node.is-hit { border-color: var(--signal); box-shadow: 0 14px 30px -16px rgba(255, 91, 46, .6); }
.flow__packets { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.packet {
  position: absolute; bottom: 11px; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px rgba(35, 64, 255, .18);
}
.flow.is-manual .packet { background: var(--signal); box-shadow: 0 0 0 5px rgba(255, 91, 46, .18); }
.flow__result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 6px; border-top: 1px solid var(--line); padding-top: 20px; }
.flow__result small { display: block; font-size: 13px; color: var(--muted); }
.flow__result b { font: 600 26px/1.2 var(--f-head); transition: color .3s; }
.flow.is-manual ~ .flow__result b { color: var(--signal); }

/* ask */
.ask { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ask__out { background: var(--bg); border-radius: var(--r); padding: 18px; min-height: 170px; font-size: 15px; line-height: 1.55; display: flex; flex-direction: column; gap: 10px; }
.ask__placeholder { color: var(--muted); margin: auto 0; }
.ask__q { font-weight: 800; }
.ask__a { color: var(--ink); }
.ask__a .src { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--accent); vertical-align: -2px; margin-left: 2px; animation: blink .8s infinite; }
.ask__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ask__chips button { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: var(--bg); transition: background .2s; }
.ask__chips button:hover { background: var(--accent-soft); color: var(--accent); }
.ask__form { display: flex; gap: 8px; }
.ask__form input { flex: 1; min-width: 0; height: 48px; border-radius: 999px; border: 1.5px solid var(--line); padding: 0 18px; font: inherit; font-size: 15px; background: var(--surface); outline: none; transition: border-color .2s; }
.ask__form input:focus { border-color: var(--accent); }

/* dash */
.dash { flex: 1; display: grid; grid-template-columns: 200px 1fr; gap: 24px; background: var(--bg); border-radius: var(--r); padding: 22px; align-items: end; }
.dash__kpi small { display: block; font-size: 13px; color: var(--muted); }
.dash__kpi b { display: block; font: 600 28px/1.15 var(--f-head); margin: 8px 0; font-variant-numeric: tabular-nums; }
.up { font-size: 13px; font-weight: 800; color: var(--ok); background: rgba(14, 138, 95, .12); padding: 4px 10px; border-radius: 99px; }
.dash__chart { height: 150px; display: flex; align-items: end; gap: 6px; }
.dash__chart i {
  flex: 1; background: #CDD2C6; border-radius: 6px 6px 3px 3px; height: 10%;
  transition: height .9s var(--ease), background .4s;
}
.dash__chart i:last-child { background: var(--accent); }

/* ---------- лента мини-презентаций ---------- */
.showcase {
  --H: 640px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: 26px 0 30px; cursor: grab; overscroll-behavior-x: contain;
}
.showcase::-webkit-scrollbar { display: none; }
.showcase.is-dragging { cursor: grabbing; user-select: none; }
.showcase__track {
  display: flex; gap: 14px; width: max-content;
  padding: 0;
}
.scol { flex: none; width: var(--w); height: var(--H); transform: translateY(var(--y, 0px)); }
.scol--tall > .tile { height: 100%; }
.scol--stack { display: flex; flex-direction: column; gap: 14px; }
.scol--stack > .tile:first-child { flex: 0 0 var(--h); }
.scol--stack > .tile:last-child { flex: 1; }
:is(.showcase, .dmodal) .tile { position: relative; min-height: 0; overflow: hidden; padding: 22px; gap: 14px; border-radius: 26px; }
:is(.showcase, .dmodal) .tile__top .h3 { margin-top: 12px; padding-right: 36px; }
.showcase__hint { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.showcase__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulseB 1.8s infinite; }
@keyframes pulseB { 0% { box-shadow: 0 0 0 0 rgba(35, 64, 255, .5); } 70% { box-shadow: 0 0 0 9px rgba(35, 64, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(35, 64, 255, 0); } }
.showcase.is-paused .showcase__dot { animation: none; }
#demos { padding-bottom: 90px; }
#demos .section__head--row { align-items: end; }
#demos .section__head--row .section__lead { margin: 0; max-width: 400px; }

.h3--sm { font-size: 16px !important; line-height: 1.3; margin-top: 10px !important; }
.tile__top--mini { display: flex; align-items: center; gap: 10px; padding-right: 40px; min-height: 30px; flex: none; }
.tile__tools { display: flex; align-items: center; gap: 8px; flex: none; }
.seg--sm { padding: 3px; margin-left: auto; }
.seg--sm .seg__btn { padding: 6px 11px; font-size: 12px; }
:is(.showcase, .dmodal) .tile__top--mini + .h3 { margin-top: 8px; padding-right: 0; }
.tile__ask {
  position: absolute; top: 18px; right: 18px; z-index: 3; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; background: var(--bg); color: var(--ink);
  transition: background .25s, color .25s, transform .3s var(--ease);
}
.tile__ask:hover { background: var(--accent); color: #fff; transform: rotate(45deg); }
.tile--dark .tile__ask { background: var(--ink-3); color: #fff; }
.tile__tools .tile__ask { position: static; }

/* адаптации старых демо под ленту */
.tile--voice .voice { padding: 16px; gap: 12px; min-height: 0; }
.tile--voice .voices { padding-bottom: 12px; }
.tile--voice .voice__wave { height: 54px; flex: none; }
.tile--voice .voice__transcript { min-height: 0; max-height: none; flex: 1; }
.voice__moreLink { align-self: flex-start; font-size: 13.5px; font-weight: 700; color: #B5BBC9; text-align: left; transition: color .2s; }
.voice__moreLink:hover { color: #fff; }
.tile--chat { padding: 18px !important; }
.tile--chat .phone { min-height: 0; flex: 1; }
.tile--chat .phone__body { max-height: none; flex: 1; min-height: 0; padding: 12px 14px; }
.tile--chat .phone__body > :first-child { margin-top: auto; }
.tile--chat .phone__replies { padding: 8px 12px 12px; }
.tile--chat .phone__head { padding: 10px 14px; }
.tile--auto .flow { padding-bottom: 30px; }
.tile--auto .node { padding: 12px; }
.tile--auto .node__ico { margin-bottom: 6px; width: 30px; height: 30px; }
.tile--auto .flow__result { padding-top: 12px; }
.tile--auto .flow__result b { font-size: 21px; }
.tile--ai .ask__out { flex: 1; min-height: 0; overflow: auto; }
.tile--web .browser { min-height: 0; overflow: hidden; }
.tile--analytics .dash { grid-template-columns: 190px 1fr; padding: 18px; }
.tile--analytics .dash__kpi b { font-size: 24px; white-space: nowrap; }
.tile--analytics .dash__chart { height: 100%; min-height: 90px; }

/* CRM: канбан */
.kanban { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kanban__col { background: var(--bg); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.kanban__col > b { font-size: 12px; font-weight: 800; color: var(--muted); display: flex; justify-content: space-between; }
.kanban__col:last-child > b { color: var(--ok); }
.kcard { background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.3; box-shadow: 0 1px 0 rgba(15, 18, 24, .06); animation: feedIn .45s var(--ease) both; }
.kcard b { display: block; font-size: 12.5px; }
.kcard small { color: var(--muted); font-size: 11.5px; }
.kanban__col:nth-child(2) .kcard { border-left: 3px solid var(--accent); }
.kanban__col:nth-child(3) .kcard { border-left: 3px solid var(--ok); }
.kanban__foot { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); flex: none; }
.kanban__foot b { font: 600 20px var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Парсинг: терминал */
.term { flex: 1; min-height: 0; font: 12.5px/1.65 ui-monospace, Consolas, monospace; color: #8D94A6; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.term p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: feedIn .3s var(--ease) both; }
.term p b { color: #3CD39A; font-weight: 700; }
.term .bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--accent); vertical-align: middle; margin-left: 6px; transition: width .4s linear; }
.parse__result { flex: none; padding: 10px 12px; border-radius: 12px; background: var(--ink-3); color: #E8EAF0; font-size: 13px; line-height: 1.4; }
.parse__result b { color: #3CD39A; }

/* Підтримка: моніторинг */
.support__uptime { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.support__uptime b { color: var(--ok); font-size: 13px; }
.mon { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mon li { display: grid; grid-template-columns: 10px 110px 1fr; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; }
.mon__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(14, 138, 95, .18); }
.mon__dot.is-warn { background: #F2A40C; box-shadow: 0 0 0 3px rgba(242, 164, 12, .2); }
.mon__bars { display: flex; gap: 2px; height: 16px; }
.mon__bars i { flex: 1; border-radius: 2px; background: #9FD9C2; }
.mon__bars i.w { background: #F5C36A; }
.mon__status { flex: none; font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 12px; background: rgba(14, 138, 95, .1); color: var(--ok); transition: background .3s, color .3s; }
.mon__status.is-warn { background: rgba(242, 164, 12, .14); color: #A86A00; }

/* Програма для бізнесу: таблиця */
.tbl__search { margin-left: auto; width: 150px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1.5px solid var(--line); font: inherit; font-size: 12.5px; background: var(--bg); outline: none; }
.tbl__search:focus { border-color: var(--accent); background: #fff; }
.tbl { flex: 1; min-height: 0; overflow: hidden; font-size: 12.5px; }
.tbl table { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 700; padding: 0 6px 6px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 7px 6px; border-bottom: 1px solid #ECEEE8; font-weight: 600; white-space: nowrap; }
.tbl td:nth-child(2) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.tbl td:nth-child(3) { font-variant-numeric: tabular-nums; }
.st { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; transition: background .3s, color .3s; }
.st--0 { background: #FFE6DE; color: #B23A12; }
.st--1 { background: var(--accent-soft); color: var(--accent); }
.st--2 { background: rgba(14, 138, 95, .12); color: var(--ok); }
.tbl tr.is-flash td { animation: flash 1s ease; }
@keyframes flash { from { background: #FFF6D6; } to { background: transparent; } }
.tbl__none { padding: 18px 6px; color: var(--muted); }

@media (max-width: 860px) {
  .tile--auto .flow { padding-bottom: 30px; }
  .tile--auto .flow::after, .tile--auto .packet { display: block; }
  .tile--auto .flow__nodes { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .tile--auto .node { flex-direction: column; align-items: flex-start; gap: 2px; }
  .tile--auto .node small { margin-left: 0; }
}
@media (max-width: 640px) {
  .showcase { --H: 600px; padding-top: 18px; }
  .showcase__track { gap: 12px; }
  .scol { width: min(var(--w), 86vw); }
  .scol--stack { gap: 12px; }
  :is(.showcase, .dmodal) .tile { padding: 16px; border-radius: 22px; }
  .tile--auto .node small, .tile--auto .node b { display: none; }
  .tile--auto .flow__nodes { grid-template-columns: repeat(5, 1fr); }
  .tile--auto .node { flex-direction: column; justify-content: center; padding: 8px; }
  .tile--auto .tile__top--row { flex-direction: column; }
  .tile--web .tile__top--row, .tile--analytics .tile__top--row { flex-direction: column; }
  .tile--analytics .dash { grid-template-columns: 1fr; }
  .tbl__search { width: 110px; }
  :is(.showcase, .dmodal) .h3 { font-size: 17px; }
  .tile--voice .voices__tip { display: none; }
  .tile--voice .voices__list { grid-template-columns: 1fr 1fr; }
  .tile--voice .vchip { padding: 7px 8px; }
  .tile--voice .voice { padding: 12px; gap: 10px; }
  .tile--voice .voice__wave { height: 40px; }
  .tile--voice .voice__bar { flex-wrap: nowrap; gap: 10px; }
  .tile--voice .voice__bar .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
  .tile--voice .switch span { display: none; }
  .voice__moreLink { font-size: 12.5px; flex: none; }
  .mon li { grid-template-columns: 10px 90px 1fr; }
  #demos .section__head--row .section__lead { max-width: none; }
}

/* ---------- блоки ленты: наведение и клик ---------- */
.showcase .tile { cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s; }
.showcase .tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), 0 24px 44px -28px rgba(35, 64, 255, .55); }
.showcase .tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tile-ph { border-radius: 26px; border: 1.5px dashed var(--line); background: repeating-linear-gradient(45deg, rgba(15, 18, 24, .03) 0 10px, transparent 10px 20px); }

/* ---------- всплывающее окно презентации ---------- */
.dmodal { border: 0; padding: 0; margin: 0; background: transparent; width: 100vw; height: 100dvh; max-width: none; max-height: none; overflow: hidden; }
.dmodal[open] { display: grid; place-items: center; }
.dmodal::backdrop { background: rgba(15, 18, 24, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadeIn .35s ease; }
.dmodal.is-closing::backdrop { animation: fadeOut .42s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.dmodal__box { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dmodal__stage .tile {
  width: min(var(--ew, 760px), calc(100vw - 32px)); height: min(var(--eh, 560px), calc(100dvh - 150px));
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .7); cursor: auto;
}
.dmodal__close {
  position: fixed; top: 18px; right: 18px; z-index: 5; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; font-size: 26px; line-height: 1; display: grid; place-items: center; transition: transform .3s var(--ease);
}
.dmodal__close:hover { transform: rotate(90deg); }
.dmodal__foot {
  width: min(760px, calc(100vw - 32px)); display: flex; align-items: center; gap: 16px;
  padding: 8px 8px 8px 22px; border-radius: 99px; background: #fff; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .5);
}
.dmodal__info { flex: 1; min-width: 0; }
.dmodal__info b { display: block; font: 600 15px/1.3 var(--f-head); }
.dmodal__info small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dmodal.is-closing .dmodal__foot, .dmodal.is-closing .dmodal__close { opacity: 0; transition: opacity .2s; }
.tile.is-expanded .tile__ask { display: none; }
.dmodal .tile--voice { --ew: 600px; --eh: 780px; }
.dmodal .tile--chat { --ew: 460px; --eh: 660px; }
.dmodal .tile--support { --ew: 620px; --eh: 420px; }
.dmodal .tile--auto { --ew: 960px; --eh: 520px; }
.dmodal .tile--integr { --ew: 820px; --eh: 540px; }
.dmodal .tile--ai { --ew: 560px; --eh: 740px; }
.dmodal .tile--crm { --ew: 820px; --eh: 540px; }
.dmodal .tile--parse { --ew: 720px; --eh: 460px; }
.dmodal .tile--web { --ew: 920px; --eh: 660px; }
.dmodal .tile--design { --ew: 800px; --eh: 540px; }
.dmodal .tile--app, .dmodal .tile--mini { --ew: 420px; --eh: 800px; }
.dmodal .tile--shop { --ew: 560px; --eh: 800px; }
.dmodal .tile--analytics { --ew: 900px; --eh: 440px; }
.dmodal .tile--table { --ew: 780px; --eh: 520px; }

/* ---------- звонок: сценарии ---------- */
.scen { display: flex; flex-direction: column; gap: 6px; flex: none; }
.scen__list { display: flex; gap: 6px; }
.schip {
  flex: 1; padding: 8px 10px; border-radius: 10px; background: var(--ink-3); color: #C6CBD8;
  font-size: 12.5px; font-weight: 800; border: 1.5px solid transparent; transition: background .25s, border-color .25s, color .25s;
}
.schip:hover { color: #fff; }
.schip.is-active { border-color: var(--signal); background: rgba(255, 91, 46, .14); color: #fff; }
.scen__desc { font-size: 12px; color: #8D94A6; margin: 0; }
.line.line--scen { grid-template-columns: 1fr; font-size: 12px; font-weight: 800; color: var(--signal); letter-spacing: .02em; }
.tile--voice .voices { padding-bottom: 10px; }

/* ---------- автоматизация: ровный рельс, точка строго по нему ---------- */
.tile--auto .flow { padding-bottom: 26px; }
.tile--auto .flow::after { display: none !important; }
.flow__rail { position: absolute; bottom: 12px; height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); }
.tile--auto .packet {
  display: block !important; top: auto; bottom: 6px; margin: 0 0 0 -7px;
  box-shadow: 0 0 0 5px rgba(35, 64, 255, .16), 0 0 14px rgba(35, 64, 255, .55);
}
.tile--auto.is-manual .packet { box-shadow: 0 0 0 5px rgba(255, 91, 46, .16), 0 0 14px rgba(255, 91, 46, .5); }
.tile--auto.is-manual .flow__result b { color: var(--signal); }
.tile--auto .flow__result { flex: none; }
.flow__note { display: none; margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.tile.is-expanded .flow__note { display: block; }
.tile--auto.is-expanded .node { padding: 16px; }
.tile--auto.is-expanded .node b { font-size: 15px; }

/* ---------- ИИ-консультант: чат ---------- */
.aichat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.aichat__head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--bg); }
.aichat__ava { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #7360F2); color: #fff; display: grid; place-items: center; font-size: 16px; flex: none; }
.aichat__head b { display: block; font-size: 14px; line-height: 1.2; }
.aichat__head small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok); }
.aichat__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(14, 138, 95, .18); }
.aichat__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px; scrollbar-width: thin; }
.aichat__empty { margin: auto; max-width: 260px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.5; }
.amsg { max-width: 88%; padding: 10px 13px; border-radius: 18px; font-size: 14px; line-height: 1.5; animation: feedIn .35s var(--ease) both; }
.amsg p { margin: 0; }
.amsg--me { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.amsg--ai { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.amsg__src { display: inline-flex; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 9px; border-radius: 99px; }
.amsg__typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.amsg__typing i { width: 6px; height: 6px; border-radius: 50%; background: #A0A5B0; animation: blink 1s infinite; }
.amsg__typing i:nth-child(2) { animation-delay: .15s; }
.amsg__typing i:nth-child(3) { animation-delay: .3s; }
.tile--ai .ask__chips { flex: none; }
.tile--ai .ask__chips button { white-space: nowrap; }
.tile--ai .ask__form { flex: none; }

/* ---------- интеграции ---------- */
.tile--integr { background: linear-gradient(160deg, #F4F6FF, #fff 60%); }
.integ { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.integ__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.integ__svg path { fill: none; stroke: #D5DAEE; stroke-width: 1.5; transition: stroke .3s; }
.integ__svg path.is-on { stroke: var(--accent); stroke-width: 2; }
.integ__dot { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(35, 64, 255, .9)); }
.integ__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
#integL { align-items: flex-start; }
#integR { align-items: flex-end; }
.integ__app { display: flex; align-items: center; gap: 8px; }
#integR .integ__app { flex-direction: row-reverse; }
.integ__app span {
  width: 36px; height: 36px; border-radius: 11px; background: var(--c); color: #fff; font: 700 12px var(--f-head);
  display: grid; place-items: center; box-shadow: 0 8px 16px -10px var(--c); transition: transform .3s var(--ease), box-shadow .3s;
}
.integ__app small { font-size: 12px; font-weight: 700; color: var(--muted); transition: color .3s; white-space: nowrap; }
.integ__app.is-on span { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.integ__app.is-on small { color: var(--ink); }
.integ__core {
  position: relative; z-index: 1; padding: 14px 16px; border-radius: 18px; background: var(--ink); color: #fff; text-align: center;
  box-shadow: 0 18px 30px -18px rgba(15, 18, 24, .7); transition: box-shadow .4s;
}
.integ__core span { display: block; font: 700 14px var(--f-head); letter-spacing: .04em; }
.integ__core small { font-size: 10.5px; color: #8D94A6; }
.integ__core.is-on { box-shadow: 0 0 0 7px rgba(35, 64, 255, .14), 0 18px 34px -16px rgba(35, 64, 255, .8); }
.integ__log { flex: none; min-height: 48px; }
.integ__evt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); animation: feedIn .4s var(--ease) both; }
.integ__evt span { display: flex; flex: none; }
.integ__evt i { width: 14px; height: 14px; border-radius: 5px; display: block; }
.integ__evt i + i { margin-left: -5px; box-shadow: 0 0 0 2px #fff; }
.integ__evt p { flex: 1; min-width: 0; margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.integ__evt p b { display: block; color: var(--ink); }
.integ__evt time { font: 11px ui-monospace, Consolas, monospace; color: var(--muted); }

/* ---------- CRM ---------- */
.kmore { font-size: 11.5px; font-weight: 700; color: var(--muted); text-align: center; padding: 6px; border-radius: 10px; border: 1px dashed #CFD3CA; }

/* ---------- сайт: макет всегда целиком ---------- */
.tile--web .browser { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px; background: var(--bg); border-radius: 18px; align-items: stretch; }
.mock-fit { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mock {
  --t: #2340FF; position: absolute; left: 50%; top: 50%; transform-origin: center;
  width: 560px; padding: 16px; border-radius: 14px; background: #fff; display: flex; flex-direction: column; gap: 14px;
}
.mock[data-theme="b"] { --t: #FF5B2E; }
.mock[data-theme="c"] { --t: #0E8A5F; }
.mock__nav { display: flex; align-items: center; gap: 10px; }
.mock__nav b { font: 700 15px var(--f-head); color: var(--t); margin-right: auto; transition: color .4s; }
.mock__nav span { width: 44px; height: 7px; border-radius: 4px; background: #E6E8E2; }
.mock em { font-style: normal; align-self: flex-start; padding: 7px 14px; border-radius: 99px; background: var(--t); color: #fff; font-size: 11px; font-weight: 800; transition: background .4s; }
.mock__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: center; }
.mock__copy { display: flex; flex-direction: column; gap: 8px; }
.mock__copy strong { font: 700 22px/1.15 var(--f-head); }
.mock__copy small { font-size: 12px; color: var(--muted); }
.mock__img { aspect-ratio: 4/3; border-radius: 14px; position: relative; overflow: hidden; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--t) 45%, #fff), var(--t)); transition: background .4s; }
.mock__img::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .35); right: -8%; bottom: -10%; }
.mock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock__cards div { display: grid; grid-template-columns: 30px 1fr; gap: 0 8px; align-items: center; padding: 10px; border-radius: 12px; background: #F4F5F1; border-top: 3px solid var(--t); transition: border-color .4s; }
.mock__cards i { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-style: normal; background: color-mix(in srgb, var(--t) 14%, #fff); color: var(--t); }
.mock__cards b { font-size: 12px; }
.mock__cards small { font-size: 11px; color: var(--muted); }
.browser.is-mobile .browser__bar { display: none; }
.browser.is-mobile .mock { width: 240px; padding: 12px; border-radius: 28px; border: 7px solid var(--ink); gap: 12px; }
.browser.is-mobile .mock__nav span, .browser.is-mobile .mock__nav em { display: none; }
.browser.is-mobile .mock__nav::after { content: "≡"; font-size: 18px; line-height: 1; }
.browser.is-mobile .mock__hero { grid-template-columns: 1fr; }
.browser.is-mobile .mock__img { order: -1; aspect-ratio: 16/10; }
.browser.is-mobile .mock__copy strong { font-size: 18px; }
.browser.is-mobile .mock__cards { grid-template-columns: 1fr; gap: 8px; }

/* ---------- дизайн: до / после ---------- */
.ba { position: relative; flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; --p: 55%; }
.ba__pane { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.ba__before { background: #E9E9E9; }
.ba__after { clip-path: inset(0 0 0 var(--p)); background: linear-gradient(135deg, #E9ECFF, #FFE9E2); }
.ba__label { position: absolute; top: 10px; left: 12px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8F8F8F; }
.ba__label--after { left: auto; right: 12px; color: var(--accent); }
.bad { width: 84%; max-width: 310px; display: flex; gap: 6px; padding: 6px; background: #fff; border: 1px solid #9A9A9A; font-family: "Times New Roman", serif; color: #333; }
.bad__img { flex: none; width: 74px; height: 74px; background: #C9C9C9; display: grid; place-items: center; font-size: 11px; color: #777; }
.bad__txt { display: flex; flex-direction: column; gap: 1px; font-size: 12px; }
.bad__txt b { font-size: 15px; }
.bad__txt small { font-size: 10px; color: #A3A3A3; }
.bad__txt span { color: #E00; font-weight: 700; }
.bad__txt u { color: #00E; }
.dcard { width: 84%; max-width: 310px; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: 0 18px 34px -18px rgba(35, 64, 255, .45); }
.dcard__img { position: relative; height: 100%; min-height: 96px; border-radius: 14px; background: radial-gradient(circle at 35% 30%, #9A7656, #3B2A1E); }
.dcard__img span { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 99px; background: var(--signal); color: #fff; white-space: nowrap; }
.dcard__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dcard__txt > b { font: 600 15px var(--f-head); }
.dcard__txt > small { color: var(--muted); font-size: 12px; }
.dcard__rate { color: #F2A40C; font-size: 11px; letter-spacing: 1px; }
.dcard__rate small { color: var(--muted); letter-spacing: 0; }
.dcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.dcard__price b { font: 700 16px var(--f-head); }
.dcard__price s { font-size: 11px; color: var(--muted); }
.dcard__btn { padding: 6px 12px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; }
.ba__chips { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 6px; }
.ba__chips span { font-size: 10.5px; font-weight: 800; padding: 4px 9px; border-radius: 99px; background: #fff; color: var(--ok); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: var(--accent); pointer-events: none; }
.ba__handle span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: 0 4px 12px rgba(35, 64, 255, .4); }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* ---------- мобильное приложение ---------- */
.tile--app { background: linear-gradient(180deg, #fff, #EEF1FF); }
.device { flex: 1; min-height: 0; display: flex; justify-content: center; }
.device__screen {
  position: relative; width: 100%; max-width: 270px; height: 100%; border-radius: 38px; background: #F4F5FA;
  border: 8px solid var(--ink); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 26px 44px -26px rgba(15, 18, 24, .6);
}
.device__status { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 7px 16px 3px; font-size: 11px; }
.device__notch { width: 70px; height: 18px; border-radius: 12px; background: var(--ink); }
.device__bat { width: 20px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); position: relative; }
.device__bat::after { content: ""; position: absolute; inset: 1px 4px 1px 1px; background: var(--ink); border-radius: 1px; }
.app__view { flex: 1; min-height: 0; overflow: hidden; padding: 8px 12px; display: flex; flex-direction: column; gap: 9px; animation: feedIn .35s var(--ease); }
.app__view h4 { margin: 0; font: 600 15px var(--f-head); }
.app__head { display: flex; justify-content: space-between; align-items: center; }
.app__head small { font-size: 10px; color: var(--muted); }
.app__bell { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--signal); font-size: 9px; box-shadow: 0 2px 8px rgba(15, 18, 24, .08); }
.app__card { border-radius: 16px; padding: 12px; background: linear-gradient(135deg, var(--accent), #7360F2); color: #fff; }
.app__card small { display: block; font-size: 10.5px; opacity: .8; }
.app__card b { font: 600 22px var(--f-head); }
.app__card span { display: block; font-size: 11px; opacity: .9; }
.app__prog { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: 8px 0 4px; }
.app__prog i { display: block; height: 100%; border-radius: 3px; background: #fff; }
.app__card .app__next { font-size: 10px; opacity: .8; }
.app__acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.app__acts span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; }
.app__acts i { width: 38px; height: 38px; border-radius: 13px; background: #fff; display: grid; place-items: center; font-style: normal; color: var(--accent); font-size: 15px; box-shadow: 0 2px 8px rgba(15, 18, 24, .06); }
.app__promo { border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg, #FFE6DE, #FFD2C2); color: #B23A12; font-size: 11.5px; font-weight: 800; }
.app__box { background: #fff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.app__box > b { font-size: 11.5px; }
.app__order { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.app__view > .app__order { background: #fff; border-radius: 13px; padding: 9px; }
.app__thumb { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--c); }
.app__order div { flex: 1; min-width: 0; }
.app__order b { display: block; font-size: 12px; }
.app__pill { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.app__pill.ok { background: rgba(14, 138, 95, .12); color: var(--ok); }
.app__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.app__steps span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8.5px; color: var(--muted); text-align: center; }
.app__steps i { width: 12px; height: 12px; border-radius: 50%; background: #D7DAE3; }
.app__steps .done { color: var(--ink); font-weight: 700; }
.app__steps .done i { background: var(--accent); }
.app__steps .now i { box-shadow: 0 0 0 4px var(--accent-soft); }
.app__eta { font-size: 10.5px; font-weight: 700; color: var(--ok); }
.app__prof { display: flex; align-items: center; gap: 10px; }
.app__prof small { font-size: 11px; color: var(--muted); }
.app__ava { flex: none; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--signal), #7360F2); display: grid; place-items: center; color: #fff; font: 700 20px var(--f-head); }
.app__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.app__stats span { background: #fff; border-radius: 12px; padding: 8px 4px; text-align: center; font-size: 10px; color: var(--muted); }
.app__stats b { display: block; font: 600 15px var(--f-head); color: var(--ink); }
.app__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff; font-size: 12px; font-weight: 700; }
.app__tgl { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #D7DAE3; }
.app__tgl::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.app__tgl.on { background: var(--ok); }
.app__tgl.on::after { left: 14px; }
.app__tabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-top: 1px solid var(--line); }
.app__tabs button { padding: 9px 4px 12px; font-size: 10.5px; font-weight: 700; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.app__tabs button i { width: 18px; height: 18px; border-radius: 6px; background: #D7DAE3; transition: background .25s; }
.app__tabs button.is-active { color: var(--accent); }
.app__tabs button.is-active i { background: var(--accent); }
.app__push {
  position: absolute; left: 8px; right: 8px; top: 30px; z-index: 5; padding: 9px 11px; border-radius: 14px;
  background: rgba(15, 18, 24, .92); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.35;
  transform: translateY(-140%); opacity: 0; transition: transform .5s var(--ease), opacity .4s;
}
.app__push b { display: block; font-size: 10px; letter-spacing: .06em; color: #8C9BFF; text-transform: uppercase; }
.app__push.is-shown { transform: none; opacity: 1; }

/* ---------- Telegram Mini App ---------- */
.tile--mini { padding: 16px !important; gap: 10px !important; }
.tg { flex: 1; min-height: 0; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.tg__bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #EEF0F3; }
.tg__bar div { flex: 1; text-align: center; line-height: 1.2; }
.tg__bar b { display: block; font-size: 13px; }
.tg__bar small { font-size: 10.5px; color: #8D94A6; }
.tg__back { color: #2AABEE; font-size: 24px; line-height: 1; }
.tg__more { color: #2AABEE; font-weight: 800; }
.tg__app { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: #F2F3F6; overflow: hidden; }
.tg__hero { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px; background: linear-gradient(135deg, #2AABEE, #2340FF); color: #fff; }
.tg__logo { flex: none; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font: 700 17px var(--f-head); }
.tg__hero b { display: block; font: 600 15px var(--f-head); }
.tg__hero small { font-size: 11px; opacity: .88; }
.tg__cats { flex: none; display: flex; gap: 6px; padding: 10px 12px 6px; }
.tg__cats button { padding: 6px 13px; border-radius: 99px; background: #fff; font-size: 12px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.tg__cats button.is-active { background: var(--ink); color: #fff; }
.tg__list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: none; }
.tg__list::-webkit-scrollbar { display: none; }
.tg__item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: #fff; animation: feedIn .35s var(--ease) both; }
.tg__pic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #6B4A2E; }
.tg__txt { flex: 1; min-width: 0; }
.tg__txt b { display: block; font-size: 13px; }
.tg__txt small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg__txt span { font-size: 12.5px; font-weight: 800; }
.tg__add { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2AABEE; color: #fff; font-size: 17px; font-weight: 800; }
.tg__step { flex: none; display: flex; align-items: center; gap: 6px; padding: 3px; border-radius: 99px; background: #E3F4FD; }
.tg__step button { width: 24px; height: 24px; border-radius: 50%; background: #2AABEE; color: #fff; font-weight: 800; }
.tg__step b { min-width: 12px; text-align: center; font-size: 12.5px; }
.tg__main { flex: none; margin: 0 10px 10px; padding: 12px; border-radius: 14px; background: #2AABEE; color: #fff; font-size: 13.5px; font-weight: 800; transition: background .2s; }
.tg__main:disabled { background: #B9DDF0; cursor: default; }
.tg__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 8px;
  padding: 10px 14px 14px; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -14px 34px rgba(15, 18, 24, .2);
  transform: translateY(105%); transition: transform .45s var(--ease);
}
.tg__sheet.is-open { transform: none; }
.tg__grip { align-self: center; display: block; width: 38px; height: 4px; border-radius: 2px; background: #D7DAE3; cursor: pointer; }
.tg__sh { font: 600 15px var(--f-head); }
.tg__line { display: flex; justify-content: space-between; font-size: 13px; }
.tg__line--total { border-top: 1px solid var(--line); padding-top: 8px; font-weight: 800; }
.tg__pay { padding: 12px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 800; }
.tg__done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 4px; text-align: center; }
.tg__check { width: 54px; height: 54px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 24px; animation: pop .5s var(--ease); }
.tg__done b { font: 600 17px var(--f-head); }
.tg__done small { font-size: 12.5px; color: var(--muted); }
.tg__prog { width: 80%; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tg__prog i { display: block; height: 100%; background: var(--ok); animation: prog 3s linear forwards; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
@keyframes prog { from { width: 0; } to { width: 100%; } }

/* ---------- интернет-магазин ---------- */
.store { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.store__top { flex: none; display: flex; align-items: center; gap: 10px; }
.store__logo { font: 700 15px var(--f-head); }
.store__search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--bg); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.store__cart { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 14px; }
.store__cart i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--signal); font-style: normal; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.store__banner { flex: none; position: relative; overflow: hidden; padding: 14px 16px; border-radius: 16px; background: linear-gradient(120deg, #0F1218, #2340FF); color: #fff; }
.store__banner b { position: relative; z-index: 1; display: block; font: 600 16px var(--f-head); }
.store__banner small { position: relative; z-index: 1; font-size: 11.5px; opacity: .8; }
.store__banner::after { content: ""; position: absolute; right: -24px; top: -34px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 91, 46, .6); }
.store__cats { flex: none; display: flex; gap: 6px; overflow: hidden; }
.store__cats button { padding: 6px 12px; border-radius: 99px; background: var(--bg); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s; }
.store__cats button.is-active { background: var(--ink); color: #fff; }
.shop__grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 8px; }
.prod { min-height: 0; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 16px; background: var(--bg); animation: feedIn .35s var(--ease) both; }
.prod__img { position: relative; flex: 1; min-height: 50px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 26px; }
.prod__img em { position: absolute; top: 6px; left: 6px; font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 99px; background: #fff; color: var(--signal); }
.prod > b { font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod__rate { font-size: 10.5px; font-weight: 700; color: #C88A00; }
.prod__row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.prod__row span { font-size: 13px; font-weight: 800; white-space: nowrap; }
.prod__row s { margin-left: 4px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.prod__add { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 16px; font-weight: 800; line-height: 1; transition: background .2s, transform .2s; }
.prod__add:hover { background: var(--accent); }
.prod__add.is-bump { transform: scale(1.18); }
.shop__bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 7px 7px 16px; border-radius: 99px; background: var(--ink); color: #fff; }
.shop__cart { font-size: 14px; font-weight: 800; }
.shop__done { position: absolute; inset: 0; z-index: 4; border-radius: 16px; background: var(--ok); color: #fff; display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 16px; line-height: 1.5; animation: feedIn .4s var(--ease); }
.shop__done small { font-weight: 600; opacity: .85; font-size: 12.5px; }
.store__toast { position: absolute; left: 50%; top: 46px; z-index: 3; padding: 7px 14px; border-radius: 99px; background: var(--ok); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(-50%, -14px); transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.store__toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 640px) {
  .dmodal__stage .tile { width: calc(100vw - 20px); height: calc(100dvh - 128px); }
  .dmodal__foot { width: calc(100vw - 20px); padding-left: 16px; }
  .dmodal__info small { display: none; }
  .dmodal__foot .btn { font-size: 13px; padding-left: 14px; }
  .dmodal__close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .scen__desc { display: none; }
  .integ__app small { display: none; }
  .mock { width: 480px; }
}

/* ---------- пакеты ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.price { background: var(--surface); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.price__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.price__head h3 { font: 600 22px/1.2 var(--f-head); }
.price__badge { font-size: 12px; font-weight: 800; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.price__desc { color: var(--muted); font-size: 15px; min-height: 2.9em; }
.price__sum { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 16px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--muted); }
.price__sum b { font: 600 40px/1 var(--f-head); letter-spacing: -.03em; color: var(--ink); }
.price__list { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price__list li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; }
.price__list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--accent-soft); color: var(--accent);
}
.price--accent { background: var(--accent); color: #fff; box-shadow: 0 30px 60px -30px rgba(35, 64, 255, .8); }
.price--accent .price__desc, .price--accent .price__sum { color: rgba(255, 255, 255, .75); }
.price--accent .price__sum { border-color: rgba(255, 255, 255, .2); }
.price--accent .price__sum b { color: #fff; }
.price--accent .price__list li::before { background: #fff; color: var(--accent); }
.price--accent .btn--accent { background: #fff; color: var(--accent); box-shadow: none; }
.price--accent .btn--accent .btn__arrow { background: var(--accent-soft); }
.price--accent .btn--accent:hover { background: var(--ink); color: #fff; }

/* ---------- страница политики ---------- */
.legal-page .nav__inner { justify-content: space-between; }
.legal-page .lang { margin-left: auto; }
.legal { max-width: 820px; padding-top: 130px; padding-bottom: 40px; }
.legal__back { display: inline-block; font-weight: 700; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.legal__back:hover { color: var(--accent); }
.legal__date { color: var(--muted); margin: 14px 0 36px; font-size: 15px; }
.legal__body { background: var(--surface); border-radius: var(--r-lg); padding: 36px 40px; }
.legal__body h2 { font: 600 19px/1.3 var(--f-head); margin: 30px 0 10px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p, .legal__body li { color: #343946; font-size: 16px; line-height: 1.65; }
.legal__body ul { padding-left: 20px; margin: 8px 0; }
.legal__body a { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) {
  .legal { padding-top: 96px; }
  .legal .h2 { font-size: 24px; }
  .legal__body { padding: 22px 18px; border-radius: 22px; }
}

.footer__link { text-decoration: underline; text-underline-offset: 3px; }
.footer__link:hover { color: #fff; }
.form__note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- builder ---------- */
.builder { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: start; }
.builder__pains { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pain {
  text-align: left; padding: 20px; border-radius: var(--r); background: var(--ink-2);
  border: 1.5px solid var(--ink-3); color: #D8DBE4; font-size: 16px; font-weight: 600; line-height: 1.4;
  display: flex; gap: 14px; align-items: flex-start; transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.pain:hover { border-color: #3B4252; transform: translateY(-2px); }
.pain__check { flex: none; width: 24px; height: 24px; border-radius: 8px; border: 2px solid #4A5163; margin-top: 1px; position: relative; transition: background .25s, border-color .25s; }
.pain__check::after { content: ""; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease); }
.pain.is-on { border-color: var(--accent); background: rgba(35, 64, 255, .14); color: #fff; }
.pain.is-on .pain__check { background: var(--accent); border-color: var(--accent); }
.pain.is-on .pain__check::after { transform: rotate(45deg) scale(1); }
.pain:last-child:nth-child(odd) { grid-column: span 2; }
.plan { background: var(--surface); color: var(--ink); border-radius: var(--r-lg); padding: 28px; min-height: 100%; position: sticky; top: 100px; }
.plan__empty { min-height: 380px; display: grid; place-items: center; align-content: center; gap: 24px; text-align: center; color: var(--muted); }
.orbit { width: 120px; height: 120px; border-radius: 50%; border: 1.5px dashed var(--line); position: relative; }
.orbit::before { content: ""; position: absolute; inset: 30px; border-radius: 50%; border: 1.5px solid var(--line); }
.orbit i { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: var(--accent); animation: orbit2 5s linear infinite; }
.orbit i:nth-child(2) { background: var(--signal); animation-duration: 3.5s; animation-direction: reverse; width: 9px; height: 9px; margin: -4.5px; }
.orbit i:nth-child(3) { background: var(--ink); animation-duration: 8s; width: 7px; height: 7px; margin: -3.5px; }
@keyframes orbit2 { from { transform: rotate(0) translateX(60px); } to { transform: rotate(360deg) translateX(60px); } }
.orbit i:nth-child(2) { animation-name: orbit3; }
@keyframes orbit3 { from { transform: rotate(0) translateX(30px); } to { transform: rotate(360deg) translateX(30px); } }
.plan__label { font: 600 13px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan__list { list-style: none; padding: 0; margin: 16px 0 22px; display: flex; flex-direction: column; gap: 8px; }
.plan__list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; background: var(--bg); border-radius: 14px; animation: feedIn .4s var(--ease) both; }
.plan__list b { font-size: 15px; display: block; line-height: 1.3; }
.plan__list small { font-size: 13px; color: var(--muted); }
.plan__list span { font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.plan__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.plan__sum div { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.plan__sum small { display: block; font-size: 12.5px; color: var(--muted); }
.plan__sum b { font: 600 clamp(16px, 1.5vw, 20px)/1.3 var(--f-head); white-space: nowrap; }
.plan__note { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: s; position: relative; }
.step {
  background: var(--surface); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 300px;
  transition: background .35s, color .35s, transform .35s var(--ease);
}
.step:hover { background: var(--accent); color: #fff; transform: translateY(-6px); }
.step:hover p, .step:hover .step__t { color: rgba(255, 255, 255, .85); }
.step:hover .step__n { color: #fff; }
.step__n { font: 600 14px var(--f-head); color: var(--accent); padding-bottom: 36px; transition: color .35s; }
.step h3 { font: 600 20px/1.2 var(--f-head); }
.step p { font-size: 15px; color: var(--muted); line-height: 1.5; transition: color .35s; }
.step__t { margin-top: auto; font-size: 13px; font-weight: 800; color: var(--ink); padding-top: 12px; border-top: 1px solid currentColor; border-color: rgba(15, 18, 24, .12); transition: color .35s; }

/* ---------- cases ---------- */
.cases__nav { display: flex; gap: 8px; }
.round { width: 54px; height: 54px; border-radius: 50%; border: 1.5px solid var(--ink); font-size: 18px; transition: background .25s, color .25s; }
.round:hover { background: var(--ink); color: #fff; }
.cases {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px;
}
.cases::-webkit-scrollbar { display: none; }
.case { scroll-snap-align: start; background: var(--surface); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 400px; }
.case__niche { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--bg); }
.case h3 { font: 600 21px/1.25 var(--f-head); letter-spacing: -.01em; }
.case p { color: var(--muted); font-size: 15.5px; }
.case__metric { margin-top: auto; display: flex; align-items: end; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.case__metric b { font: 600 46px/1 var(--f-head); letter-spacing: -.03em; color: var(--accent); }
.case__metric span { font-size: 13px; color: var(--muted); line-height: 1.35; padding-bottom: 4px; }
.case--accent { background: var(--accent); color: #fff; }
.case--accent p, .case--accent .case__metric span { color: rgba(255, 255, 255, .78); }
.case--accent .case__niche { background: rgba(255, 255, 255, .16); }
.case--accent .case__metric { border-color: rgba(255, 255, 255, .2); }
.case--accent .case__metric b { color: #fff; }
.case--dark { background: var(--ink); color: #fff; }
.case--dark p, .case--dark .case__metric span { color: #9AA1B2; }
.case--dark .case__niche { background: var(--ink-3); }
.case--dark .case__metric { border-color: var(--ink-3); }
.case--dark .case__metric b { color: var(--signal); }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq__side { position: sticky; top: 110px; }
.faq__side .h2 { margin-top: 18px; }
.faq__list details { border-bottom: 1px solid var(--line); }
.faq__list summary {
  list-style: none; cursor: pointer; padding: 26px 56px 26px 0; position: relative;
  font: 600 19px/1.35 var(--f-head); letter-spacing: -.01em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%;
  background: var(--surface); display: grid; place-items: center; font: 400 22px/1 var(--f-body); transition: transform .35s var(--ease), background .3s, color .3s;
}
.faq__list details[open] summary::after { transform: rotate(45deg); background: var(--accent); color: #fff; }
.faq__list details p { padding: 0 56px 26px 0; color: var(--muted); font-size: 16.5px; animation: feedIn .4s var(--ease); }

/* ---------- contact ---------- */
.section--contact { padding-top: 40px; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__links { margin-top: 40px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.contact__links a { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--line); font: 600 18px var(--f-head); transition: color .25s, padding .35s var(--ease); }
.contact__links a:hover { color: var(--accent); padding-left: 10px; }
.form { background: var(--surface); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.field input, .field textarea {
  font: inherit; font-size: 16px; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px;
  background: var(--bg); outline: none; transition: border-color .2s, background .2s; resize: vertical; width: 100%;
}
.field input:focus, .field textarea:focus { border-color: var(--accent); background: #fff; }
.field input.is-error { border-color: var(--signal); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips i { display: block; font-style: normal; font-size: 14px; font-weight: 700; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--line); transition: all .2s; }
.chips input:checked + i { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.form__note { font-size: 12.5px; color: var(--muted); text-align: center; }
.form__ok { position: absolute; inset: 0; background: var(--surface); display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: 32px; animation: feedIn .5s var(--ease); }
.form__ok[hidden] { display: none; }
.form__ok-ico { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 32px; }
.form__ok h3 { font: 600 24px var(--f-head); }
.form__ok p { color: var(--muted); }

.form__err { font-size: 14px; font-weight: 600; color: var(--signal); background: #FFEDE7; border-radius: 12px; padding: 12px 14px; }
.field em { font-style: normal; font-weight: 500; opacity: .7; }

/* ---------- мессенджеры ---------- */
.contact__or { margin-top: 36px; font-weight: 700; font-size: 15px; }
.msgrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.msgr {
  --b: #229ED9;
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; border-radius: 16px;
  background: var(--b); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s, filter .3s;
}
.msgr svg { width: 22px; height: 22px; flex: none; }
.msgr:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -14px var(--b); filter: brightness(1.06); }
.msgr--viber { --b: #7360F2; }
.msgr--wa { --b: #1FAF54; }

/* ---------- плавающая кнопка ---------- */
.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 22px 0 18px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 16px 36px -12px rgba(35, 64, 255, .75);
  transform: translateY(120px); opacity: 0; transition: transform .5s var(--ease), opacity .4s, background .3s;
}
.fab.is-shown { transform: none; opacity: 1; }
.fab:hover { background: var(--accent-2); }
.fab__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: pulseW 1.8s infinite; }
@keyframes pulseW { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

/* ---------- окно заявки ---------- */
.modal {
  border: 0; padding: 0; background: transparent; color: var(--ink);
  width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: visible;
}
.modal::backdrop { background: rgba(15, 18, 24, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[open] { animation: modalIn .45s var(--ease); }
.modal[open]::backdrop { animation: fadeIn .3s ease; }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } }
.modal__box {
  position: relative; background: var(--surface); border-radius: var(--r-lg); padding: 32px;
  max-height: calc(100dvh - 24px); overflow-y: auto; overflow-x: hidden;
}
.modal__close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); font-size: 24px; line-height: 1; display: grid; place-items: center; transition: background .2s, transform .3s var(--ease);
}
.modal__close:hover { background: var(--line); transform: rotate(90deg); }
.modal__step { animation: feedIn .4s var(--ease); }
.modal__title { font: 600 26px/1.15 var(--f-head); letter-spacing: -.02em; padding-right: 44px; }
.modal__lead { color: var(--muted); font-size: 15.5px; margin: 10px 0 22px; }
.modal__back { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 14px; }
.modal__back:hover { color: var(--accent); }
.choice {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 18px; border-radius: var(--r); background: var(--ink); color: #fff;
  transition: background .3s, transform .3s var(--ease);
}
.choice:hover { background: var(--accent); transform: translateY(-2px); }
.choice__ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; flex: none; }
.choice__ico svg { width: 24px; height: 24px; }
.choice__txt { flex: 1; }
.choice__txt b { display: block; font-size: 17px; }
.choice__txt small { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .7); line-height: 1.4; margin-top: 2px; }
.choice__arrow { font-size: 20px; transition: transform .3s var(--ease); }
.choice:hover .choice__arrow { transform: translateX(4px); }
.modal__or { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.modal__or::before, .modal__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form--modal { padding: 0; margin-top: 20px; overflow: visible; gap: 16px; position: static; }
.form--modal .form__ok { border-radius: var(--r-lg); }
.chips { gap: 6px; }
.chips i { font-size: 13.5px; padding: 8px 13px; }
.form--modal .chips i { font-size: 13px; padding: 7px 12px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #9AA1B2; margin-top: 40px; padding: 48px 0 0; overflow: hidden; border-radius: 48px 48px 0 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 14px; }
/* большое «ORBITA» — готовый контур (svg), а не обводка шрифта: у шрифта внутри букв видны стыки */
.footer__giant {
  display: block; width: min(97vw, 1525px); height: auto; margin: 40px auto 0; overflow: visible;
  fill: none; stroke: #3A4152; stroke-width: 1.5px; transform: translateY(12%); user-select: none;
}

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1100px) {
  .nav__links { gap: 20px; }
  .hero__grid { grid-template-columns: 1fr; }
  .console { transform: none; max-width: 640px; }
  .tile--voice, .tile--chat { grid-column: span 12; grid-row: auto; }
  .tile--ai, .tile--web { grid-column: span 12; }
  .builder { grid-template-columns: 1fr; }
  .plan { position: static; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .prices { grid-template-columns: 1fr; max-width: 560px; }
  .step { min-height: 240px; }
  .cases { grid-auto-columns: calc((100% - 16px) / 2); }
  .faq, .contact { grid-template-columns: 1fr; gap: 40px; }
  .faq__side { position: static; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__inner { gap: 12px; }
  .nav__burger { display: block; flex: none; }
  .lang { margin-left: auto; }
  .lang__btn { min-width: 34px; padding: 0 8px; }
  .nav__mobile {
    display: flex; flex-direction: column; gap: 4px; padding: 0 20px;
    max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), padding .45s;
    background: rgba(238, 240, 234, .97); backdrop-filter: blur(14px);
  }
  .nav__mobile a:not(.btn) { padding: 14px 0; font: 600 20px var(--f-head); border-bottom: 1px solid var(--line); }
  .nav__mobile .btn { margin: 16px 0 4px; }
  .nav.is-open { background: rgba(238, 240, 234, .97); }
  .nav.is-open .nav__mobile { max-height: 820px; padding-bottom: 20px; }
  .tile--soft { flex-direction: column; }
  .flow__nodes { grid-template-columns: 1fr; gap: 10px; }
  .node { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
  .node__ico { margin: 0; }
  .node small { margin-left: auto; }
  .flow { padding-bottom: 0; }
  .flow::after, .packet { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .nav__inner { height: 66px; }
  .hero { padding-top: 104px; }
  .hero__lead { font-size: 17px; }
  .hero__stats { grid-template-columns: 1fr; gap: 16px; }
  .hero__stats div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
  .hero__stats dd { margin: 0; }
  .hero__stats dt { font-size: 22px; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: space-between; }
  .hero__actions .btn--ghost { justify-content: center; }
  .console { padding: 12px; border-radius: 22px; }
  .console__metrics b { font-size: 17px; }
  .console__feed { height: 280px; }
  .feed-item { grid-template-columns: 30px 1fr; padding: 10px 12px; }
  .feed-item time { display: none; }
  .marquee { margin-top: 60px; }
  .section { padding: 84px 0; }
  .section--dark { margin: 0 6px; border-radius: 30px; }
  .section__head { margin-bottom: 36px; }
  .section__head--row { flex-direction: column; align-items: start; }
  .tile { padding: 18px; border-radius: 22px; }
  .tile__top--row { flex-direction: column; }
  .voice { padding: 14px; }
  .line { grid-template-columns: 1fr; gap: 2px; }
  .voice__more { flex-direction: column; align-items: stretch; text-align: left; }
  .flow__result { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .flow__result b { font-size: 18px; }
  .flow__result small { font-size: 11.5px; line-height: 1.3; }
  .node small { display: none; }
  .dash { grid-template-columns: 1fr; }
  .builder__pains { grid-template-columns: 1fr; }
  .pain:last-child:nth-child(odd) { grid-column: auto; }
  .plan { padding: 20px; }
  .plan__sum b { font-size: 16px; }
  .plan__empty { min-height: 260px; }
  .steps { grid-template-columns: 1fr; }
  .price { padding: 22px; }
  .price__sum b { font-size: 34px; }
  .step { min-height: 0; }
  .step__n { padding-bottom: 12px; }
  .cases { grid-auto-columns: 86%; }
  .form { padding: 20px; }
  .form--modal { padding: 0; }
  .modal__box { padding: 22px 18px; border-radius: 22px; }
  .modal__title { font-size: 21px; }
  .msgr { flex-direction: column; gap: 4px; height: 70px; font-size: 13px; }
  .fab { right: 12px; bottom: 12px; height: 50px; }
  .form__row { grid-template-columns: 1fr; }
  .faq__list summary { font-size: 17px; }
  .footer { border-radius: 30px 30px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* автоматизация в ленте — компактно (подписи узлов и пояснение — в крупном окне) */
.showcase .tile--auto .node small { display: none; }
.showcase .tile--auto .node { padding: 10px 12px; }
.showcase .tile--auto .flow__result b { font-size: 19px; }
/* служебные ряды блоков не сжимаются, растягивается только «экран» демо */
:is(.showcase, .dmodal) .tile__top, .tile .swatches, .tile .swatch, .tile .voice__moreLink { flex: none; }
.tile--design.is-expanded .bad, .tile--design.is-expanded .dcard { transform: scale(1.45); }
.tile--design.is-expanded .ba__chips span { font-size: 12px; padding: 5px 11px; }
.swatches { display: flex; gap: 10px; align-items: center; }
.swatches__label { font-size: 13px; color: var(--muted); font-weight: 600; margin-right: 4px; }
.swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff, 0 0 0 4px transparent; transition: box-shadow .25s; }
.swatch.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); }
.browser { background: var(--bg); border-radius: var(--r); padding: 12px; display: flex; flex-direction: column; }
.browser__bar { width: 100%; display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; flex: none; }
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #C9CCC4; }
.browser__bar span { margin-left: 10px; flex: 1; max-width: 260px; background: var(--surface); border-radius: 99px; font-size: 12px; color: var(--muted); padding: 4px 12px; }
.design__hint { font-size: 12px; color: var(--muted); font-weight: 600; }
@media (max-width: 640px) {
  .dmodal__info { display: none; }
  .dmodal__foot { padding: 6px; }
  .dmodal__foot .btn { width: 100%; justify-content: space-between; }
}

/* ---------- чат-бот: поле ввода отделено, ответы-карточки ---------- */
.phone__composer { flex: none; background: #fff; border-top: 1px solid var(--line); }
.tile--chat .phone__replies { padding: 10px 12px 2px; }
.tile--chat .phone__replies:empty { display: none; }
.phone__replies button { background: #fff; }
.phone__input {
  display: flex; align-items: center; gap: 8px; margin: 8px 12px 12px; height: 40px; padding: 0 6px 0 14px;
  border-radius: 99px; background: var(--bg); color: var(--muted); font-size: 13px; border: 1.5px solid transparent; transition: border-color .2s, color .2s;
}
.phone__input span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.phone__input i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 12px; }
.phone__input:has(.is-typing) { border-color: var(--accent); color: var(--ink); }
.phone__input .is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink .8s infinite; }
.tile--chat .phone__body { padding-bottom: 14px; }
.msg--card { background: #fff; padding: 12px 14px; max-width: 92%; display: flex; flex-direction: column; gap: 6px; white-space: normal; border-bottom-left-radius: 4px; box-shadow: 0 1px 0 rgba(15, 18, 24, .05); }
.mcard__t { font-size: 14px; }
.mcard__r { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; line-height: 1.35; }
.mcard__r span { color: var(--muted); white-space: nowrap; }
.mcard__r b { text-align: right; font-weight: 700; }
.mcard__bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin-top: 2px; }
.mcard__bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.mcard__n { font-size: 11.5px; font-weight: 700; color: var(--ok); }

/* ---------- график: подсказка над столбиком ---------- */
.dash__chart { position: relative; padding-top: 48px; }
.dash__chart i { cursor: pointer; transition: height .9s var(--ease), background .2s, opacity .2s; }
.dash__chart:hover i:not(.is-hover) { opacity: .55; }
.dash__chart i.is-hover { background: var(--accent) !important; opacity: 1; }
.chart__tip {
  position: absolute; z-index: 2; transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 10px;
  background: var(--ink); color: #fff; font-size: 12.5px; white-space: nowrap; text-align: center; line-height: 1.25;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.chart__tip small { display: block; font-size: 10.5px; color: #9AA1B2; }
.chart__tip.is-shown { opacity: 1; transform: translate(-50%, 0); }
.chart__tip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; background: var(--ink); transform: rotate(45deg); }

/* ---------- интеграции: аккуратные линии и подписи ---------- */
.integ { gap: 26px; padding: 0 6px; }
.integ__col { gap: 14px; }
#integL { align-items: flex-start; }
#integR { align-items: flex-end; }
#integL .integ__app { flex-direction: row-reverse; }
#integR .integ__app { flex-direction: row; }
.integ__app { gap: 10px; }
.integ__app span { width: 34px; height: 34px; border-radius: 10px; font-size: 11.5px; box-shadow: none; }
.integ__app small { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.integ__app.is-on span { transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.integ__app.is-on small { color: var(--ink); font-weight: 800; }
.integ__svg path { stroke: #E2E6F2; stroke-width: 1.5; }
.integ__svg path.is-on { stroke: var(--accent); stroke-width: 2; }
.integ__port { fill: #fff; stroke: #CBD1E6; stroke-width: 1.5; }
.integ__port.is-on { stroke: var(--accent); fill: var(--accent); }
.integ__core { padding: 16px 22px; border-radius: 20px; }

/* ---------- дизайн: современная карточка против «как было» ---------- */
.old { width: 86%; max-width: 330px; border-collapse: collapse; background: #fff; font: 13px/1.3 "Times New Roman", serif; color: #222; border: 2px outset #BDBDBD; }
.old td { border: 1px solid #9C9C9C; padding: 5px; vertical-align: top; }
.old__h { background: #000080; color: #FF0; font-weight: 700; text-align: center; font-size: 14px; letter-spacing: .05em; }
.old__img { width: 70px; height: 70px; background: #CFCFCF; color: #777; text-align: center; vertical-align: middle !important; font-size: 11px; }
.old u { color: #00E; }
.pcard {
  width: 90%; max-width: 380px; display: grid; grid-template-columns: 42% 1fr; overflow: hidden;
  border-radius: 22px; background: rgba(255, 255, 255, .92); box-shadow: 0 26px 50px -26px rgba(35, 64, 255, .55), 0 0 0 1px rgba(255, 255, 255, .7) inset;
}
.pcard__img { position: relative; min-height: 170px; background: radial-gradient(circle at 30% 25%, #C69B6D, #6B4325 55%, #2E1D12); overflow: hidden; }
.pcard__badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 9px; border-radius: 99px; background: var(--signal); color: #fff; font-size: 11px; font-weight: 800; }
.pcard__bean { position: absolute; width: 46%; aspect-ratio: .72; border-radius: 50%; background: linear-gradient(135deg, #8C5A33, #3A2414); right: 12%; bottom: 14%; transform: rotate(-24deg); box-shadow: inset -6px 0 0 rgba(0, 0, 0, .18); }
.pcard__bean::after { content: ""; position: absolute; left: 47%; top: 10%; bottom: 10%; width: 3px; border-radius: 3px; background: rgba(0, 0, 0, .35); transform: rotate(8deg); }
.pcard__bean--2 { width: 32%; right: 46%; bottom: 46%; transform: rotate(32deg); opacity: .9; }
.pcard__body { padding: 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pcard__brand { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.pcard__title { font: 600 16px/1.2 var(--f-head); }
.pcard__sub { font-size: 11.5px; color: var(--muted); }
.pcard__rate { font-size: 11px; color: #F2A40C; letter-spacing: 1px; }
.pcard__rate small { color: var(--muted); letter-spacing: 0; }
.pcard__seg { display: flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--bg); align-self: flex-start; }
.pcard__seg button { padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--muted); transition: background .2s, color .2s; }
.pcard__seg button.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(15, 18, 24, .12); }
.pcard__buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.pcard__price b { font: 700 17px var(--f-head); margin-right: 5px; }
.pcard__price s { font-size: 11px; color: var(--muted); }
.pcard__cta { padding: 7px 12px; border-radius: 99px; background: linear-gradient(135deg, var(--accent), #6A4BFF); color: #fff; font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 16px -8px rgba(35, 64, 255, .8); }
.pcard__ship { font-size: 10.5px; color: var(--ok); font-weight: 700; }
.ba__after { background: radial-gradient(circle at 80% 10%, #FFE3D8, transparent 45%), radial-gradient(circle at 10% 90%, #DDE3FF, transparent 50%), #F6F7FB; }
.ba__tokens { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; white-space: nowrap; }
.ba__tokens span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, .85); font-size: 10.5px; font-weight: 700; color: var(--muted); backdrop-filter: blur(6px); }
.ba__tokens i { width: 9px; height: 9px; border-radius: 50%; margin-right: -2px; }
.ba__tokens b { font: 700 11px var(--f-head); color: var(--ink); }
.ba__tokens em { width: 10px; height: 10px; border: 1px solid #C5CABE; background: repeating-linear-gradient(90deg, #C5CABE 0 1px, transparent 1px 3px); }


/* ---------- телефон с правильными пропорциями ---------- */
.device__screen { aspect-ratio: 9 / 19; width: auto; height: 100%; max-width: 100%; }
.dmodal .tile--app { --ew: 400px; --eh: 760px; }

/* ---------- клиенты: список и карточка ---------- */
.tile--table { position: relative; }
.tbl { overflow: auto; scrollbar-width: thin; }
.tbl thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.tbl tbody tr { cursor: pointer; transition: background .15s; }
.tbl tbody tr:hover td { background: #F6F7F3; }
.tbl tbody tr.is-open td { background: var(--accent-soft); }
.tbl__hint { flex: none; margin: 0; font-size: 12px; color: var(--muted); }
.showcase .tbl__hint { display: none; }
.cdrawer {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: min(360px, 92%); padding: 20px; overflow-y: auto;
  background: #fff; box-shadow: -24px 0 50px -30px rgba(15, 18, 24, .5); border-radius: 26px 0 0 26px;
  transform: translateX(105%); transition: transform .4s var(--ease); display: flex; flex-direction: column; gap: 14px;
}
.cdrawer.is-open { transform: none; }
.cdrawer__head { display: flex; align-items: center; gap: 12px; }
.cdrawer__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cdrawer__head b { font: 600 16px/1.2 var(--f-head); }
.cdrawer__ava { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), #7360F2); color: #fff; font: 700 16px var(--f-head); }
.cdrawer__x { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); font-size: 20px; }
.cdrawer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.cdrawer__grid div { padding: 10px 12px; border-radius: 12px; background: var(--bg); }
.cdrawer__grid dt { font-size: 11px; color: var(--muted); }
.cdrawer__grid dd { margin: 2px 0 0; font-size: 13px; font-weight: 700; }
.cdrawer__note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #FFF6E5; font-size: 13px; line-height: 1.45; }
.cdrawer__h { font-size: 13px; }
.cdrawer__hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cdrawer__hist li { display: grid; grid-template-columns: 60px 1fr auto; gap: 8px; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cdrawer__hist li span:nth-child(2) { color: var(--muted); }

.integ__app small { width: 84px; overflow: hidden; text-overflow: ellipsis; }
#integL .integ__app small { text-align: right; }
#integR .integ__app small { text-align: left; }

.pcard__price { white-space: nowrap; }
.pcard__buy { flex-wrap: wrap; row-gap: 6px; }

/* интеграции: настоящие иконки сервисов */
.integ__app span { background: #fff; overflow: hidden; padding: 0; border: 1px solid var(--line); }
.integ__app img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* дизайн: фиксированный размер карточек, масштаб подбирает скрипт */
.ba .pcard { width: 380px; max-width: none; flex: none; transform-origin: center; }
.ba .old { width: 330px; max-width: none; transform-origin: center; }
.ba__tokens { display: none; }
.tile.is-expanded .ba__tokens { display: flex; }
.ba .old { table-layout: fixed; }

/* событие интеграции: две настоящие иконки внахлёст */
.integ__evt span img { width: 22px; height: 22px; border-radius: 7px; object-fit: cover; display: block; background: #fff; border: 1px solid var(--line); }
.integ__evt span img + img { margin-left: -7px; box-shadow: 0 0 0 2px #fff; }

/* шапка: пункты меню не переносятся; на средних экранах — меню в «бургере» */
.nav__links a { white-space: nowrap; }
@media (max-width: 1260px) and (min-width: 861px) {
  .nav__links { display: none; }
  .nav__burger { display: block; flex: none; }
  .lang { margin-left: auto; }
  .nav__mobile { display: flex; flex-direction: column; gap: 4px; padding: 0 28px; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease), padding .45s; background: rgba(238, 240, 234, .97); }
  .nav__mobile a:not(.btn) { padding: 14px 0; font: 600 20px var(--f-head); border-bottom: 1px solid var(--line); }
  .nav__mobile .btn { margin: 16px 0 4px; align-self: flex-start; }
  .nav.is-open { background: rgba(238, 240, 234, .97); }
  .nav.is-open .nav__mobile { max-height: 820px; padding-bottom: 20px; }
}

/* ---------- ровные галочки (SVG вместо повёрнутой рамки) ---------- */
:root {
  --chk-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chk-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.3 4.3L19 7.2' fill='none' stroke='%232340FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pain__check::after {
  left: 0; top: 0; width: 100%; height: 100%; border: 0;
  background: var(--chk-w) center / 15px no-repeat; transform: scale(0);
}
.pain.is-on .pain__check::after { transform: scale(1); }
.price__list li::before, .prc__inc li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-soft) var(--chk-a) center / 12px no-repeat;
}
.price--accent .price__list li::before, .prc--accent .prc__inc li::before { background: #fff var(--chk-a) center / 12px no-repeat; }
.prc--dark .prc__inc li::before { background-color: rgba(255, 255, 255, .12); background-image: var(--chk-w); }

/* ---------- лента цен ---------- */
.pstrip { --H: 500px; padding-top: 24px; }
.pcol.scol--stack > .prc { flex: 1; min-height: 0; }
.scol--tall > .prc { height: 100%; }
.prc {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 24px;
  background: var(--surface); overflow: hidden; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s;
}
.prc:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), 0 24px 44px -28px rgba(35, 64, 255, .55); }
.prc:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.prc .tag { align-self: flex-start; white-space: nowrap; }
.prc__desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.prc__price { display: flex; align-items: baseline; gap: 6px; }
.prc__price small { font-size: 13px; font-weight: 700; color: var(--muted); }
.prc__price b { font: 600 32px/1 var(--f-head); letter-spacing: -.02em; }
.prc__price span { font-size: 16px; font-weight: 800; }
.prc--tall .prc__price b { font-size: 38px; }
.prc__note { margin-top: -6px; font-size: 12px; font-weight: 700; color: var(--signal); }
.prc__inc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.prc__inc li { position: relative; padding-left: 27px; font-size: 13.5px; line-height: 1.4; }
.prc__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.prc__foot b { color: var(--ink); }
.prc__go { flex: none; padding: 7px 13px; border-radius: 99px; background: var(--ink); color: #fff; font-weight: 800; font-size: 12.5px; transition: background .25s; }
.prc:hover .prc__go { background: var(--accent); }
.prc--accent { background: var(--accent); color: #fff; }
.prc--accent .tag { background: rgba(255, 255, 255, .16); color: #fff; }
.prc--accent .prc__desc, .prc--accent .prc__price small, .prc--accent .prc__foot { color: rgba(255, 255, 255, .78); }
.prc--accent .prc__foot { border-color: rgba(255, 255, 255, .22); }
.prc--accent .prc__foot b { color: #fff; }
.prc--accent .prc__note { color: #FFD2C2; }
.prc--accent .prc__go, .prc--accent:hover .prc__go { background: #fff; color: var(--accent); }
.prc--dark { background: var(--ink); color: #fff; }
.prc--dark .tag { background: var(--ink-3); color: #C6CBD8; }
.prc--dark .prc__desc, .prc--dark .prc__price small, .prc--dark .prc__foot { color: #9AA1B2; }
.prc--dark .prc__foot { border-color: var(--ink-3); }
.prc--dark .prc__foot b { color: #fff; }
.prc--dark .prc__go { background: #fff; color: var(--ink); }
.packs__title { margin: 54px 0 22px; font: 600 clamp(20px, 2vw, 26px)/1.2 var(--f-head); }

/* ---------- пометка о демо-голосе ---------- */
.voice__demo { flex: none; margin: 0; font-size: 12px; line-height: 1.4; color: #8D94A6; padding-left: 12px; border-left: 2px solid var(--signal); }

@media (max-width: 640px) {
  .pstrip { --H: 390px; }
  .prc { padding: 16px; border-radius: 22px; }
  .prc--tall .prc__price b { font-size: 32px; }
  .packs__title { margin-top: 36px; }
}

/* мессенджеры: официальные иконки в белой «подложке» */
.msgr__ico { flex: none; width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: #fff; object-fit: contain; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.msgr--viber .msgr__ico { border-radius: 9px; padding: 0; }

/* ---------- карточка цены: подсказка «что входит» ---------- */
.prc__more { align-self: flex-start; margin-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--accent); border-bottom: 1.5px dashed currentColor; line-height: 1.3; }
.prc--accent .prc__more, .prc--dark .prc__more { color: #fff; }
.pcol.scol--stack .prc__more { display: none; }

/* ---------- окно «что входит в цену» ---------- */
.pmodal { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: visible; }
.pmodal::backdrop { background: rgba(15, 18, 24, .58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fadeIn .3s ease; }
.pmodal[open] .pmodal__box { animation: pmIn .5s var(--ease); }
.pmodal.is-closing .pmodal__box { animation: pmOut .26s ease forwards; }
.pmodal.is-closing::backdrop { animation: fadeOut .26s ease forwards; }
@keyframes pmIn { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pmOut { to { opacity: 0; transform: translateY(16px) scale(.97); } }
.pmodal__box {
  position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 30px; border-radius: 28px; background: #fff;
  display: flex; flex-direction: column; gap: 16px;
}
.pmodal__x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); font-size: 24px; line-height: 1; display: grid; place-items: center; transition: transform .3s var(--ease); }
.pmodal__x:hover { transform: rotate(90deg); }
.pmodal__head { display: flex; flex-direction: column; gap: 10px; padding: 20px; margin: -6px -6px 0; border-radius: 22px; background: linear-gradient(135deg, #F1F3FF, #FFF1EC); }
.pmodal__head .tag { align-self: flex-start; background: #fff; }
.pmodal__title { margin: 0; padding-right: 30px; font: 600 19px/1.3 var(--f-head); }
.pmodal__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pmodal__row .prc__price b { font-size: 40px; }
.pmodal__term { font-size: 13.5px; color: var(--muted); }
.pmodal__term b { color: var(--ink); }
.pmodal__head .prc__note:empty { display: none; }
.pmodal__h { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pmodal__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.pmodal__list li {
  position: relative; padding: 10px 12px 10px 40px; border-radius: 14px; background: var(--bg); font-size: 14px; line-height: 1.4;
  animation: feedIn .45s var(--ease) both;
}
.pmodal__list li::before {
  content: ""; position: absolute; left: 12px; top: 11px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent) var(--chk-w) center / 12px no-repeat;
}
.pmodal__custom {
  display: flex; gap: 14px; padding: 16px 18px; border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 100% 0, rgba(255, 91, 46, .55), transparent 55%), linear-gradient(135deg, var(--ink), #232A3D);
}
.pmodal__spark { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: rgba(255, 255, 255, .1); color: #FFB59E; }
.pmodal__custom b { display: block; font: 600 15px/1.3 var(--f-head); margin-bottom: 4px; }
.pmodal__custom p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #C6CBD8; }
.pmodal__foot { display: flex; gap: 10px; flex-wrap: wrap; }
.pmodal__foot .btn { flex: 1 1 auto; justify-content: space-between; }
.pmodal__foot .btn--ghost { justify-content: center; }
@media (max-width: 640px) {
  .pmodal__box { padding: 20px 16px; border-radius: 24px; }
  .pmodal__list { grid-template-columns: 1fr; }
  .pmodal__row .prc__price b { font-size: 32px; }
}

/* ---------- мессенджеры: светлые кнопки, логотипы в полном цвете ---------- */
.msgr {
  --b: #229ED9; --bg-b: #E8F5FC;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line); gap: 10px;
  transition: background .25s, border-color .25s, color .25s, transform .3s var(--ease), box-shadow .3s;
}
.msgr--viber { --b: #7360F2; --bg-b: #F0EDFF; }
.msgr--wa { --b: #1FAF54; --bg-b: #E7F8EE; }
.msgr:hover { background: var(--bg-b); border-color: var(--b); color: var(--ink); filter: none; box-shadow: 0 14px 28px -18px var(--b); }
.msgr__ico { width: 30px; height: 30px; padding: 0; background: none; box-shadow: none; border-radius: 50%; }
.msgr--viber .msgr__ico { border-radius: 8px; }

/* ---------- сенсорные экраны: без «залипшего» наведения, карточки не обрезаются ---------- */
@media (hover: none) {
  .showcase .tile:hover, .prc:hover { transform: none; box-shadow: none; }
  .prc:hover .prc__go { background: var(--ink); }
  .prc--dark:hover .prc__go { background: #fff; }
}
@media (max-width: 640px) {
  .pstrip { --H: 500px; }
  .showcase { --H: 660px; }
  .tile--support .support__uptime small { display: none; }
  .mon { gap: 6px; }
  .scol--stack > .tile--analytics:first-child { flex-basis: 392px; }
}

/* ---------- окно презентации на телефоне: высота по содержимому, без пустоты ---------- */
@media (max-width: 640px) {
  .dmodal__stage .tile { height: min(var(--mh, 100dvh), calc(100dvh - 172px)); }
  .dmodal .tile--support { --mh: 400px; }
  .dmodal .tile--auto { --mh: 540px; }
  .dmodal .tile--integr { --mh: 470px; }
  .dmodal .tile--parse { --mh: 380px; }
  .dmodal .tile--web { --mh: 500px; }
  .dmodal .tile--design { --mh: 480px; }
  .dmodal .tile--analytics { --mh: 480px; }
  .dmodal .tile--crm { --mh: 580px; }
  .dmodal .tile--table { --mh: 600px; }
  .dmodal .tile--chat { --mh: 580px; }
}

/* автоматизация на телефоне: под иконкой этапа — его название */
@media (max-width: 640px) {
  .tile--auto .flow__nodes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .tile--auto .node { min-width: 0; align-items: center; gap: 6px; padding: 8px 4px !important; }
  .tile--auto .node b { display: block; font-size: 11px !important; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .showcase .tile--auto .node { padding: 8px 2px !important; }
  .showcase .tile--auto .node b { font-size: 10px !important; letter-spacing: -.01em; }
}

/* обновление страницы: без анимации появления, страница сразу стоит на месте */
html.no-reveal .reveal { transition: none !important; }

/* лента цен рисуется скриптом — место под неё занято заранее, страница не прыгает */
#priceTrack { min-height: var(--H); }

/* шапка блока: если тег и переключатель не влезают в строку, переключатель уходит вниз, а не под кнопку ↗ */
.tile__top--mini { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 640px) {
  .showcase { --H: 700px; }
  .scol--stack > .tile--auto:first-child { flex-basis: 376px; }
}

/* счётчики в hero: при отсчёте цифр высота не меняется (иначе на iPhone прыгает вся страница) */
.hero__stats dt { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .hero__stats div { grid-template-columns: 120px 1fr; }
  html[lang="en"] .hero__stats div { grid-template-columns: 168px 1fr; }
}

/* ---------- портфолио ---------- */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proj {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.proj--main { grid-column: span 2; grid-row: span 2; padding: 36px; background: radial-gradient(circle at 100% 0, rgba(35, 64, 255, .12), transparent 55%), var(--surface); }
.proj:nth-child(5) { grid-column: span 2; }
.proj__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.proj__ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 600 22px var(--f-head); background: var(--accent-soft); color: var(--accent); }
.proj--main .proj__ico { width: 64px; height: 64px; border-radius: 18px; font-size: 34px; background: var(--accent); color: #fff; box-shadow: 0 16px 30px -14px rgba(35, 64, 255, .7); }
.proj__tag { font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--bg); }
.proj__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; color: var(--ok); }
.proj__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(14, 138, 95, .18); animation: pulseB 2s infinite; }
.proj__count { margin-left: auto; font: 600 13px var(--f-head); padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.proj__h { margin: 4px 0 0; font: 600 21px/1.25 var(--f-head); letter-spacing: -.01em; }
.proj--main .proj__h { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; max-width: 620px; }
.proj__p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.proj--main .proj__p { font-size: 17px; max-width: 620px; }
.proj__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.proj__list li { font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line); }
.proj--main .proj__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.proj--main .proj__list li { position: relative; padding: 12px 14px 12px 40px; border: 0; border-radius: 14px; background: var(--bg); font-size: 14px; }
.proj--main .proj__list li::before { content: ""; position: absolute; left: 12px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%; background: var(--accent) var(--chk-w) center / 12px no-repeat; }
.proj__link { align-self: flex-start; font-weight: 800; color: var(--accent); border-bottom: 1.5px solid currentColor; line-height: 1.3; }
.proj__plat { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; }
.proj__plat span { font-size: 12px; font-weight: 800; letter-spacing: .02em; padding: 5px 10px; border-radius: 8px; background: var(--bg); color: var(--ink); }
.proj--dark { background: var(--ink); color: #fff; }
.proj--dark .proj__ico { background: #F3BA2F; color: var(--ink); }
.proj--dark .proj__tag, .proj--dark .proj__plat span { background: var(--ink-3); color: #C6CBD8; }
.proj--dark .proj__p { color: #9AA1B2; }
.proj--dark .proj__list li { border-color: var(--ink-3); color: #C6CBD8; }
.proj--dark .proj__plat { border-color: var(--ink-3); }
.proj--accent { background: var(--accent); color: #fff; }
.proj--accent .proj__ico { background: rgba(255, 255, 255, .16); }
.proj--accent .proj__tag, .proj--accent .proj__plat span { background: rgba(255, 255, 255, .16); color: #fff; }
.proj--accent .proj__p { color: rgba(255, 255, 255, .8); }
.proj--accent .proj__list li { border-color: rgba(255, 255, 255, .3); }
.proj--accent .proj__plat { border-color: rgba(255, 255, 255, .22); }

/* ---------- про нас ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: stretch; }
.about__card {
  display: flex; flex-direction: column; gap: 6px; padding: 36px; border-radius: var(--r-lg); color: #fff;
  background: radial-gradient(circle at 0 0, rgba(35, 64, 255, .55), transparent 55%), radial-gradient(circle at 100% 100%, rgba(255, 91, 46, .35), transparent 50%), var(--ink);
}
.about__photo { position: relative; width: 148px; height: 148px; margin-bottom: 22px; }
.about__photo img, .about__init { position: absolute; inset: 14px; border-radius: 50%; object-fit: cover; }
.about__init { display: grid; place-items: center; font: 600 40px var(--f-head); letter-spacing: -.02em; background: linear-gradient(135deg, var(--accent), #6D7BFF); color: #fff; }
.about__orbit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); animation: orbitSpin 14s linear infinite; }
.about__orbit::after { content: ""; position: absolute; top: 50%; left: -6px; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.about__card .eyebrow { color: #9AA1B2; }
.about__name { margin: 6px 0 0; font: 600 clamp(28px, 2.8vw, 38px)/1.1 var(--f-head); letter-spacing: -.02em; }
.about__role { margin: 0; font-weight: 700; color: #FFB59E; }
.about__bio { margin: 18px 0 0; color: #C6CBD8; font-size: 16px; line-height: 1.6; }
.about__why { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: var(--r-lg); background: var(--surface); }
.about__why .h2 { margin: 0 0 6px; }
.about__lbl { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.about__why p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.about__why .about__lead { color: var(--ink); font-size: 18px; }
.about__list { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.about__list li { position: relative; padding: 9px 14px 9px 38px; border-radius: 99px; background: var(--bg); font-size: 14px; font-weight: 700; }
.about__list li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%; background: var(--accent) var(--chk-w) center / 12px no-repeat; }
.about__why .btn { align-self: flex-start; margin-top: auto; }

@media (max-width: 1000px) {
  .projects { grid-template-columns: 1fr 1fr; }
  .proj--main { grid-row: auto; }
  .proj--main .proj__list { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .projects { grid-template-columns: 1fr; }
  .proj, .proj--main, .proj:nth-child(5) { grid-column: auto; padding: 22px; }
  .proj--main .proj__list { grid-template-columns: 1fr; }
  .about__card, .about__why { padding: 24px; }
  .about__photo { width: 120px; height: 120px; }
  .about__init { font-size: 32px; }
  .about__why .btn { align-self: stretch; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .about__orbit { animation: none; } }

/* єПостер: схематичные экраны Web / iPhone / Android */
.devs { position: relative; display: flex; align-items: flex-end; gap: 14px; margin: 10px 0 4px; min-height: 210px; }
.devs small { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.devs__web { position: relative; flex: 1 1 auto; max-width: 420px; height: 210px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 24px 40px -28px rgba(15, 18, 24, .35); display: flex; flex-direction: column; }
.devs__bar { display: flex; gap: 5px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.devs__bar b { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.devs__ui { flex: 1; display: flex; gap: 10px; padding: 10px; min-height: 0; }
.devs__side { flex: 0 0 22%; border-radius: 8px; background: repeating-linear-gradient(180deg, var(--bg) 0 14px, transparent 14px 22px); }
.devs__main { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 38px 1fr; gap: 8px; }
.devs__kpi { border-radius: 8px; background: var(--accent-soft); }
.devs__kpi:nth-child(2) { background: #E7F8EE; }
.devs__kpi:nth-child(3) { background: #FFE9E2; }
.devs__chart { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6px; padding: 8px; border-radius: 8px; background: var(--bg); }
.devs__chart em { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: #C9D0FF; }
.devs__chart em:last-child { background: var(--accent); }
.devs__phone { position: relative; flex: none; width: 92px; height: 186px; border-radius: 20px; background: var(--ink); padding: 18px 7px 8px; box-shadow: 0 24px 40px -24px rgba(15, 18, 24, .5); }
.devs__phone--and { height: 172px; border-radius: 14px; }
.devs__notch { position: absolute; top: 6px; left: 50%; width: 30px; height: 7px; margin-left: -15px; border-radius: 99px; background: #000; }
.devs__hole { position: absolute; top: 7px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #000; }
.devs__list { height: 100%; border-radius: 12px; background: #fff; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.devs__phone--and .devs__list { border-radius: 8px; }
.devs__list span { height: 24px; border-radius: 6px; background: linear-gradient(90deg, #FFE3D8 0 24px, var(--bg) 24px); }
.devs__list .devs__btn { margin-top: auto; height: 20px; border-radius: 99px; background: var(--accent); }
.devs__list .devs__qr { flex: 1; margin-top: 2px; background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / 10px 10px; border: 4px solid #fff; outline: 1px solid var(--line); }
.proj__link { margin-top: 18px; }
@media (max-width: 640px) {
  .devs { min-height: 150px; gap: 8px; }
  .devs__web { height: 150px; }
  .devs__phone { width: 64px; height: 132px; padding: 14px 5px 6px; border-radius: 14px; }
  .devs__phone--and { height: 122px; border-radius: 10px; }
  .devs__list span { height: 16px; }
}
@media (min-width: 1001px) {
  .devs { min-height: 270px; }
  .devs__web { height: 270px; max-width: 480px; }
  .devs__phone { width: 112px; height: 236px; border-radius: 24px; }
  .devs__phone--and { height: 218px; border-radius: 16px; }
  .devs__list span { height: 30px; }
}
.proj--main .devs { flex: 1 0 auto; align-items: center; }
@media (max-width: 640px) {
  .proj--main .proj__list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .proj--main .proj__list li { padding: 10px 10px 10px 34px; font-size: 12.5px; line-height: 1.3; }
  .proj--main .proj__list li::before { left: 9px; width: 17px; height: 17px; margin-top: -8.5px; background-size: 11px; }
  .proj__live { margin-left: 0; }
}

/* ---------- интеграции: каталог ---------- */
.intg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.intg__col { padding: 22px; border-radius: 22px; background: var(--surface); }
.intg__col:nth-child(5) { grid-column: span 2; }
.intg__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 16px/1.2 var(--f-head); }
.intg__h i { font: 700 11px var(--f-body); font-style: normal; color: var(--accent); padding: 4px 7px; border-radius: 7px; background: var(--accent-soft); }
.intg__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.intg__col li { font-size: 13.5px; font-weight: 700; padding: 7px 11px; border-radius: 10px; background: var(--bg); }
.intg__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 22px 24px; border-radius: 22px; border: 1.5px dashed var(--line); }
.intg__note { margin: 0; max-width: 680px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.intg__foot .btn { flex: none; }

/* ---------- гарантии ---------- */
.guar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.guar__item { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 24px; background: var(--surface); border-top: 4px solid var(--accent); }
.guar__item:nth-child(even) { border-top-color: var(--signal); }
.guar__n { font: 600 13px var(--f-head); color: var(--muted); }
.guar__item h3 { margin: 0; font: 600 19px/1.25 var(--f-head); }
.guar__item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- предложение первым клиентам ---------- */
.offer {
  display: flex; align-items: center; gap: 26px; margin-top: 46px; padding: 26px 28px; border-radius: 28px; color: #fff;
  background: radial-gradient(circle at 100% 0, rgba(255, 91, 46, .55), transparent 50%), linear-gradient(120deg, var(--ink), #1E2640);
}
.offer__badge { flex: none; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; font: 600 30px var(--f-head); background: var(--signal); box-shadow: 0 0 0 10px rgba(255, 91, 46, .18); transform: rotate(-8deg); }
.offer__body { flex: 1; min-width: 0; }
.offer__tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFB59E; }
.offer__title { margin: 6px 0 6px; font: 600 clamp(22px, 2.4vw, 30px)/1.15 var(--f-head); }
.offer__text { margin: 0; color: #C6CBD8; font-size: 15.5px; line-height: 1.55; max-width: 640px; }
.offer__btn { flex: none; }

/* ---------- сравнение ---------- */
.cmp__wrap { border-radius: 24px; background: var(--surface); overflow: hidden; }
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font: 600 15px var(--f-head); color: var(--muted); }
.cmp tbody th { font-weight: 700; width: 28%; }
.cmp td { color: var(--muted); }
.cmp .cmp__us { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.cmp thead .cmp__us { background: var(--accent); color: #fff; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__minus th::after { content: " *"; color: var(--signal); }
.cmp__minus .cmp__us { background: #FFF1EC; }
.cmp__bad { margin: 14px 4px 0; font-size: 13.5px; color: var(--muted); }
.cmp__bad::before { content: "* "; color: var(--signal); font-weight: 800; }
.nb { margin-top: 22px; padding: 26px 28px; border-radius: 24px; border-left: 4px solid var(--signal); background: var(--surface); }
.nb__title { margin: 0 0 8px; font: 600 20px/1.25 var(--f-head); }
.nb__text { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; max-width: 900px; }

/* ---------- контакты ---------- */
.cinfo { margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cinfo div { padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.cinfo dt { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cinfo dd { margin: 4px 0 0; font-weight: 700; font-size: 15px; line-height: 1.4; }
.cinfo a { color: var(--accent); }

@media (max-width: 1000px) {
  .intg { grid-template-columns: 1fr 1fr; }
  .intg__col:nth-child(5) { grid-column: auto; }
  .intg__col:last-child { grid-column: span 2; }
  .guar { grid-template-columns: 1fr 1fr; }
  .intg__foot { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .intg { grid-template-columns: 1fr; }
  .intg__col:last-child { grid-column: auto; }
  .intg__foot .btn { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
  .guar { grid-template-columns: 1fr; }
  .offer { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }
  .offer__badge { width: 84px; height: 84px; font-size: 24px; }
  .offer__btn { width: 100%; justify-content: space-between; }
  .cinfo { grid-template-columns: 1fr; }
  /* таблица сравнения на телефоне — карточки по строкам */
  .cmp thead { display: none; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
  .cmp tr { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { padding: 0 0 8px; border: 0; width: auto; }
  .cmp td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 0; border-radius: 10px; font-size: 14px; }
  .cmp td::before { content: attr(data-l); font-weight: 700; color: var(--muted); flex: none; }
  .cmp td.cmp__us::before { color: var(--accent); }
  .cmp td { text-align: right; }
}

/* ---------- презентация «Реклама» ---------- */
.tile--ads { background: linear-gradient(160deg, #fff 55%, #F1F3FF); }
.ads__title { margin: 4px 0 0; }
.ads__ch { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.ads__ch button { padding: 7px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 800; background: var(--bg); transition: background .25s, color .25s; }
.ads__ch button.is-active { background: var(--ink); color: #fff; }
.ads__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.ads__kpis div { padding: 12px; border-radius: 14px; background: var(--bg); min-width: 0; }
.ads__kpis small { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ads__kpis b { display: block; margin-top: 6px; font: 600 18px/1 var(--f-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ads__kpis div:nth-child(2) b { color: var(--accent); }
.ads__chart { flex: 1; min-height: 90px; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg); }
.ads__chart small { font-size: 11px; color: var(--muted); }
.ads__bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 0; }
.ads__bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: #C9D0FF; transition: height .6s var(--ease); }
.ads__bars i:last-child { background: var(--accent); }
.ads__note { flex: none; margin: 0; font-size: 12px; color: var(--muted); padding-left: 10px; border-left: 2px solid var(--signal); }
.dmodal .tile--ads { --ew: 560px; --eh: 620px; }
.tile.is-expanded .ads__kpis b { font-size: 24px; }
@media (max-width: 640px) { .dmodal .tile--ads { --mh: 560px; } .ads__kpis b { font-size: 15px; } }
.pmodal__more { align-self: flex-start; font-weight: 800; color: var(--accent); border-bottom: 1.5px solid currentColor; line-height: 1.3; }
.footer__svcs { display: flex; gap: 14px 28px; padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--ink-3); font-size: 14px; }
.footer__svcs b { flex: none; color: #fff; }
.footer__svcs nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer__svcs a:hover { color: #fff; }
@media (max-width: 640px) { .footer__svcs { flex-direction: column; } }

/* ---------- страница услуги ---------- */
.svcp { padding-top: 110px; padding-bottom: 40px; }
.svcp__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); }
.svcp__crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.svcp__crumbs b { color: var(--ink); }
.svcp__hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px; align-items: start; margin-top: 22px; }
.svcp__intro { display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: var(--r-lg); background: var(--surface); }
.svcp__intro .h2 { margin: 0; }
.svcp__lead { margin: 0; font-size: 19px; line-height: 1.5; color: var(--muted); }
.svcp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, #F1F3FF, #FFF1EC); }
.svcp__price small { font-weight: 700; color: var(--muted); }
.svcp__price b { font: 600 46px/1 var(--f-head); letter-spacing: -.02em; }
.svcp__price span { font-weight: 800; font-size: 18px; }
.svcp__price em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--muted); }
.svcp__price strong { color: var(--ink); }
.svcp__note { margin: -6px 0 0; font-size: 13px; font-weight: 700; color: var(--signal); }
.svcp__audit { margin: 0; font-size: 15px; line-height: 1.55; padding-left: 12px; border-left: 3px solid var(--accent); }
.svcp__actions .btn { justify-content: space-between; }
.svcp__write { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.svcp__card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border-radius: var(--r-lg); background: var(--surface); position: sticky; top: 100px; }
.svcp__card .pmodal__list { grid-template-columns: 1fr; }
.svcp__how { margin-top: 70px; }
.svcp__how .h2 { margin-bottom: 26px; }
.svcp__other { margin-top: 60px; }
.svcp__h { margin: 0 0 16px; font: 600 22px/1.2 var(--f-head); }
.svcp__links { display: flex; flex-wrap: wrap; gap: 8px; }
.svcp__links a { padding: 10px 16px; border-radius: 99px; background: var(--surface); font-weight: 700; font-size: 14px; transition: background .25s, color .25s; }
.svcp__links a:hover { background: var(--accent); color: #fff; }
@media (max-width: 1000px) { .svcp__hero { grid-template-columns: 1fr; } .svcp__card { position: static; } }
@media (max-width: 640px) {
  .svcp { padding-top: 90px; }
  .svcp__intro, .svcp__card { padding: 22px; }
  .svcp__price b { font-size: 36px; }
  .svcp__price em { margin-left: 0; width: 100%; }
  .svcp__actions .btn { width: 100%; }
}

/* портфолио: настоящие логотипы */
.proj__ico { background: #fff !important; box-shadow: 0 0 0 1px var(--line); }
.proj__ico img { width: 62%; height: 62%; object-fit: contain; }
.proj--main .proj__ico { background: transparent !important; box-shadow: 0 16px 30px -14px rgba(15, 18, 24, .6); overflow: hidden; }
.proj--main .proj__ico img { width: 100%; height: 100%; }
.proj--dark .proj__ico { background: var(--ink-3) !important; box-shadow: none; }
.proj--accent .proj__ico { box-shadow: none; }

/* єПостер: настоящие скриншоты в рамках устройств */
.devs figure { margin: 0; }
.devs__web { overflow: visible; }
.devs__web img { flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: left top; border-radius: 0 0 13px 13px; }
.devs__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 12px; background: #fff; }
.devs__phone--ios img { object-position: center 6%; }
.devs__phone--and img { border-radius: 8px; }
.devs__phone { padding: 8px 6px; }
.devs__notch, .devs__hole { z-index: 2; }

/* портфолио без экранов устройств: єПостер на 2 колонки в одну строку, остальные — по одной */
@media (min-width: 1001px) {
  .proj--main { grid-row: auto; }
  .proj:nth-child(5) { grid-column: auto; }
}
.proj__link { margin-top: 4px; }

/* ---------- hero: фон-орбиты и живая схема ORBITA ---------- */
.hero { overflow: clip; }
.hero::before {
  mask-image: none; -webkit-mask-image: none; opacity: 1; height: 100%;
  background-image: radial-gradient(circle at 78% 38%, rgba(35, 64, 255, .12), transparent 42%), radial-gradient(circle at 8% 92%, rgba(255, 91, 46, .08), transparent 38%);
  background-size: auto;
}
.orb { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin: 0 auto; --icon: 50px; }
.orb__bg, .orb__bg i { position: absolute; border-radius: 50%; pointer-events: none; }
.orb__bg { inset: 0; z-index: -1; }
.orb__bg i { left: 50%; top: 50%; border: 1px solid rgba(35, 64, 255, .10); transform: translate(-50%, -50%); animation: orbSpinC 90s linear infinite; }
.orb__bg i:nth-child(1) { width: 150%; height: 150%; }
.orb__bg i:nth-child(2) { width: 210%; height: 210%; border-color: rgba(35, 64, 255, .08); animation-duration: 130s; animation-direction: reverse; }
.orb__bg i:nth-child(3) { width: 280%; height: 280%; border-color: rgba(35, 64, 255, .06); animation-duration: 170s; }
.orb__bg i:nth-child(4) { width: 360%; height: 360%; border-color: rgba(35, 64, 255, .045); animation-duration: 220s; animation-direction: reverse; }
.orb__bg i::after { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.orb__bg i:nth-child(2)::after { left: auto; right: -4px; background: var(--signal); box-shadow: 0 0 12px var(--signal); }
.orb__bg i:nth-child(3)::after { top: -4px; left: 50%; margin: 0 0 0 -4px; }
.orb__bg i:nth-child(4)::after { top: auto; bottom: -4px; left: 50%; margin: 0 0 0 -4px; background: var(--signal); box-shadow: 0 0 12px var(--signal); }
@keyframes orbSpinC { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbSpinBack { to { transform: rotate(-360deg); } }

.orb__glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(35, 64, 255, .22), transparent 65%); filter: blur(18px); }
.orb__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(35, 64, 255, .22); }
.orb__ring--1 { inset: 26%; border-style: dashed; }
.orb__ring--2 { inset: 13%; }
.orb__ring--3 { inset: 1%; border-color: rgba(35, 64, 255, .14); }
.orb__comet {
  position: absolute; inset: -1.5px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(35, 64, 255, .9) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: orbSpin 5s linear infinite;
}
.orb__ring--2 .orb__comet { background: conic-gradient(from 180deg, transparent 0 78%, rgba(255, 91, 46, .9) 100%); animation-duration: 7s; }
.orb__ring--3 .orb__comet { animation-duration: 11s; animation-direction: reverse; background: conic-gradient(from 90deg, rgba(35, 64, 255, .7) 0, transparent 22% 100%); }
.orb__spin { position: absolute; inset: 0; animation: orbSpin 38s linear infinite; }
.orb__ring--2 .orb__spin { animation-duration: 56s; animation-direction: reverse; }
.orb__ring--3 .orb__spin { animation-duration: 80s; }
.orb__p { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.orb__p i {
  position: absolute; left: 50%; top: 0; width: var(--icon); height: var(--icon); margin: calc(var(--icon) / -2) 0 0 calc(var(--icon) / -2);
  transform: rotate(calc(-1 * var(--a))); display: block;
}
.orb__p img {
  display: block; width: 100%; height: 100%; padding: 22%; border-radius: 30%; object-fit: contain; background: #fff;
  box-shadow: 0 10px 24px -10px rgba(15, 18, 24, .35), 0 0 0 1px rgba(15, 18, 24, .05);
  animation: orbSpinBack 38s linear infinite;
}
.orb__ring--2 .orb__p img { animation-name: orbSpin; animation-duration: 56s; }
.orb__ring--3 .orb__p img { animation-duration: 80s; }

.orb__core {
  position: absolute; inset: 36%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: #fff; background: radial-gradient(circle at 30% 25%, #2A3350, var(--ink) 70%);
  box-shadow: 0 0 0 10px rgba(35, 64, 255, .08), 0 0 0 22px rgba(35, 64, 255, .05), 0 20px 60px -10px rgba(35, 64, 255, .55);
}
.orb__core b { font: 600 clamp(15px, 1.6vw, 19px) var(--f-head); letter-spacing: .02em; }
.orb__mark { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; }
.orb__mark i { position: absolute; right: -6px; top: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.orb__live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--signal); }

.orb__stat {
  position: absolute; z-index: 3; padding: 10px 14px; border-radius: 16px; min-width: 132px;
  background: rgba(255, 255, 255, .78); border: 1px solid rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 18px 40px -22px rgba(15, 18, 24, .45);
  animation: orbFloat 6s ease-in-out infinite;
}
.orb__stat small { display: block; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.orb__stat b { display: block; margin-top: 4px; font: 600 22px/1 var(--f-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.orb__stat--1 { top: 2%; left: -4%; }
.orb__stat--2 { top: 24%; right: -6%; animation-delay: -2s; }
.orb__stat--2 b { color: var(--accent); }
.orb__stat--3 { bottom: 26%; left: -8%; animation-delay: -4s; }
@keyframes orbFloat { 50% { transform: translateY(-8px); } }

.orb__toast { position: absolute; z-index: 4; right: -2%; bottom: 0; width: 320px; height: 66px; }
.orb__evt {
  position: absolute; inset: 0; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 0 14px;
  border-radius: 18px; color: #fff; background: rgba(15, 18, 24, .92); box-shadow: 0 24px 50px -24px rgba(15, 18, 24, .7);
  animation: orbIn .55s var(--ease) both;
}
.orb__evt b { display: block; font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb__evt small { display: block; font-size: 11.5px; color: #8D94A6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb__evt div { min-width: 0; }
.orb__evt time { font: 11px ui-monospace, Consolas, monospace; color: #6B7286; }
.orb__evt.is-out { animation: orbOut .45s ease forwards; }
@keyframes orbIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes orbOut { to { opacity: 0; transform: translateY(-14px) scale(.97); } }

@media (max-width: 1000px) { .orb { width: min(100%, 480px); margin-top: 20px; } }
@media (max-width: 640px) {
  .orb { width: min(100%, 360px); --icon: 38px; margin-top: 28px; margin-bottom: 40px; }
  .orb__stat { min-width: 0; padding: 8px 10px; border-radius: 12px; }
  .orb__stat small { font-size: 9.5px; }
  .orb__stat b { font-size: 16px; }
  .orb__stat--1 { left: 0; top: -2%; }
  .orb__stat--2 { right: 0; top: 20%; }
  .orb__stat--3 { left: 0; bottom: 24%; }
  .orb__toast { left: 0; right: 0; width: auto; bottom: -10%; height: 58px; }
  .orb__evt { grid-template-columns: 30px 1fr; }
  .orb__evt time { display: none; }
  .orb__core b { font-size: 13px; }
  .orb__mark { width: 22px; height: 22px; border-width: 2.5px; }
  .orb__mark i { width: 8px; height: 8px; right: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .orb *, .orb__bg i { animation: none !important; }
}
@media (min-width: 1001px) {
  .orb__stat--1 { top: 4%; left: -12%; }
  .orb__stat--2 { top: 14%; right: -12%; }
  .orb__stat--3 { bottom: 30%; left: -14%; }
}
.nb { border-left-color: var(--accent); }

/* ---------- ИИ-консультант: кнопка и окно чата ---------- */
.cw-launch {
  position: fixed; right: 24px; bottom: 24px; z-index: 41; display: inline-flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 20px 0 8px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 16px 36px -14px rgba(15, 18, 24, .7); transition: bottom .5s var(--ease), transform .3s var(--ease), background .3s;
}
.cw-launch:hover { transform: translateY(-2px); background: #1D2333; }
.fab.is-shown ~ .cw-launch { bottom: 90px; }
.cw-launch__ico { position: relative; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #3A4BFF, var(--accent) 70%); box-shadow: 0 0 0 4px rgba(35, 64, 255, .25); }
.cw-launch__ico::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 2.5px solid #fff; }
.cw-launch__ico i { position: absolute; right: 7px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: pulseB 1.8s infinite; }
html.cw-on .cw-launch, html.cw-on .fab { opacity: 0; pointer-events: none; }

.cw {
  position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 390px; height: min(620px, calc(100dvh - 48px));
  display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--bg);
  box-shadow: 0 40px 80px -30px rgba(15, 18, 24, .55), 0 0 0 1px rgba(15, 18, 24, .06);
  opacity: 0; transform: translateY(18px) scale(.97); transform-origin: bottom right; transition: opacity .25s, transform .3s var(--ease);
}
.cw.is-open { opacity: 1; transform: none; }
.cw__head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(35, 64, 255, .55), transparent 60%), var(--ink); }
.cw__ava { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2A3350, #0B0E14 70%); box-shadow: 0 0 0 3px rgba(35, 64, 255, .35); }
.cw__ava::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; border: 2.5px solid #fff; }
.cw__ava i { position: absolute; right: 8px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.cw__who { flex: 1; min-width: 0; }
.cw__who b { display: block; font: 600 15px/1.2 var(--f-head); }
.cw__who small { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: #9AA1B2; }
.cw__on { width: 7px; height: 7px; border-radius: 50%; background: #3CD39A; box-shadow: 0 0 0 3px rgba(60, 211, 154, .2); }
.cw__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; line-height: 1; color: #C6CBD8; background: rgba(255, 255, 255, .08); transition: background .2s; }
.cw__icon:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.cw__body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.cw__msg { max-width: 88%; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; line-height: 1.5; background: #fff; box-shadow: 0 1px 0 rgba(15, 18, 24, .05); animation: feedIn .3s var(--ease) both; }
.cw__msg p { margin: 0; }
.cw__msg p + p, .cw__msg p + ul, .cw__msg ul + p { margin-top: 8px; }
.cw__msg ul { margin: 6px 0 0; padding-left: 18px; }
.cw__msg li + li { margin-top: 3px; }
.cw__msg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cw__msg--bot { align-self: flex-start; border-bottom-left-radius: 6px; }
.cw__msg--me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--accent); color: #fff; }
.cw__msg--sys { background: #FFF1EC; }
.cw__msgrs { display: flex; gap: 8px; margin-top: 10px; }
.cw__msgrs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: #fff; border: 1px solid var(--line); font-size: 13px; font-weight: 800; color: var(--ink); text-decoration: none; }
.cw__typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.cw__typing i { width: 7px; height: 7px; border-radius: 50%; background: #B9BFCC; animation: cwDot 1.2s infinite; }
.cw__typing i:nth-child(2) { animation-delay: .15s; }
.cw__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cwDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.cw__sugg { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px; }
.cw__sugg:not(:empty) { padding-bottom: 10px; }
.cw__sugg button { padding: 8px 12px; border-radius: 99px; border: 1.5px solid var(--accent); color: var(--accent); background: #fff; font-size: 13px; font-weight: 700; transition: background .2s, color .2s; }
.cw__sugg button:hover { background: var(--accent); color: #fff; }
.cw__form { flex: none; display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px 6px 6px 14px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1.5px var(--line); }
.cw__form:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.cw__form textarea { flex: 1; min-height: 24px; max-height: 120px; padding: 7px 0; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 15px; line-height: 1.4; }
.cw__send { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 15px; transition: background .2s; }
.cw__send:hover { background: var(--accent-2); }
.cw__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 12px; font-size: 11px; line-height: 1.35; color: var(--muted); }
.cw__lead { flex: none; padding: 6px 11px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 800; }

@media (max-width: 640px) {
  .cw-launch { right: 12px; bottom: 12px; height: 50px; padding-right: 16px; font-size: 14px; }
  .cw-launch__ico { width: 34px; height: 34px; }
  .fab.is-shown ~ .cw-launch { bottom: 72px; }
  .cw { inset: 0; width: auto; height: 100dvh; border-radius: 0; }
  .cw__form textarea { font-size: 16px; } /* iOS не увеличивает страницу при вводе */
}
@media (max-width: 640px) { html.cw-on, html.cw-on body { overflow: hidden; } }
.cw__msgrs { flex-wrap: wrap; }

/* интеграции: логотипы сервисов */
.intg__col { padding: 24px; transition: transform .3s var(--ease), box-shadow .3s; }
.intg__col:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(15, 18, 24, .35); }
.intg__h { margin-bottom: 16px; }
.intg__h em { margin-left: auto; font: 700 12px var(--f-body); font-style: normal; color: var(--muted); padding: 3px 8px; border-radius: 99px; background: var(--bg); }
.intg__col ul { gap: 8px; }
.intg__col li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 12px; background: var(--bg); font-size: 13.5px; transition: background .2s, box-shadow .2s; }
.intg__col li:hover { background: #fff; box-shadow: 0 0 0 1.5px var(--line); }
.intg__ico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 2px rgba(15, 18, 24, .08); overflow: hidden; }
.intg__ico img { width: 20px; height: 20px; object-fit: contain; }
.intg__feat { background: var(--accent-soft) !important; color: var(--accent); }
.intg__feat .intg__ico { color: var(--accent); font-size: 15px; font-weight: 800; }

/* портфолио: стоимость проекта */
.proj__cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: auto; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #F1F3FF, #FFF1EC); }
.proj__cost small { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.proj__cost b { font: 600 26px/1.05 var(--f-head); letter-spacing: -.02em; white-space: nowrap; }
.proj__cost-s { font-size: 13px; font-weight: 700; color: var(--muted); }
.proj--main .proj__cost b { font-size: 34px; }
.proj__cost + .proj__plat { margin-top: 0; }
.proj__link + .proj__cost { margin-top: 6px; }
.proj--dark .proj__cost { background: var(--ink-2); }
.proj--dark .proj__cost small, .proj--dark .proj__cost-s { color: #9AA1B2; }
.proj--dark .proj__cost b { color: #F3BA2F; }
.proj--accent .proj__cost { background: rgba(255, 255, 255, .14); }
.proj--accent .proj__cost small, .proj--accent .proj__cost-s { color: rgba(255, 255, 255, .78); }
.proj__link + .proj__cost { margin-top: auto; }
/* интеграции: «кладка» без пустот — карточки разной высоты плотно друг под другом */
.intg { display: block; column-count: 4; column-gap: 14px; }
.intg__col { break-inside: avoid; margin-bottom: 14px; display: inline-block; width: 100%; }
.intg__col:nth-child(5), .intg__col:last-child { grid-column: auto; }
@media (max-width: 1000px) { .intg { column-count: 2; } }
@media (max-width: 640px) { .intg { column-count: 1; } }

/* ==========================================================================
   Визуальные эффекты (React Bits-стиль)
   ========================================================================== */

/* 1. Заголовки по словам из размытия */
.fx-split .fx-w { display: inline-block; }
.fx-split:not(.fx-in) .fx-w { opacity: 0; filter: blur(10px); transform: translateY(.35em); }
.fx-split.fx-in .fx-w { animation: fxWord .7s var(--ease) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes fxWord { from { opacity: 0; filter: blur(10px); transform: translateY(.35em); } to { opacity: 1; filter: none; transform: none; } }
html.no-reveal .fx-split .fx-w { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }

/* 2. Блик */
.fx-shiny {
  background-image: linear-gradient(110deg, currentColor 40%, rgba(255, 255, 255, .95) 50%, currentColor 60%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fxShine 3.6s linear infinite;
}
.eyebrow.fx-shiny, .offer__title.fx-shiny { background-image: linear-gradient(110deg, currentColor 42%, #9AA8FF 50%, currentColor 58%); }
.offer__title.fx-shiny { background-image: linear-gradient(110deg, #fff 42%, #FFB59E 50%, #fff 58%); }
@keyframes fxShine { from { background-position: 125% 0; } to { background-position: -125% 0; } }

/* 3. Цифры при расшифровке не дёргают соседей */
.fx-num { font-variant-numeric: tabular-nums; }

/* 4 + 7. Свечение за курсором: заливка внутри карточки и светящийся край у соседних */
.fx-card { position: relative; isolation: isolate; }
.fx-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(35, 64, 255, .09), transparent 60%),
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(35, 64, 255, .75), transparent 45%) border-box;
  border: 1.5px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
}
.fx-bento.is-lit .fx-card::after { opacity: 1; }
.proj--dark.fx-card::after, .proj--accent.fx-card::after, .price--accent.fx-card::after, .prc--dark.fx-card::after, .prc--accent.fx-card::after {
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 60%),
    radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .8), transparent 45%) border-box;
}

/* 5. Наклон — плавный выход задаётся из скрипта */
.proj, .price { will-change: transform; }

/* 6. Бегущая светящаяся рамка */
@property --fx-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.price--accent, .offer { position: relative; }
.fx-star {
  position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; z-index: 3; padding: 2px;
  background: conic-gradient(from var(--fx-ang), transparent 0 70%, #fff 80%, #FFB59E 86%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxStar 4s linear infinite;
}
.offer .fx-star { background: conic-gradient(from var(--fx-ang), transparent 0 70%, #FF5B2E 80%, #FFD2C2 86%, transparent 92%); }
@keyframes fxStar { to { --fx-ang: 360deg; } }

/* 8. Магнитные кнопки — плавный возврат */
.fx-mag { transition: translate .35s var(--ease), transform .5s var(--ease), opacity .4s, background .3s, bottom .5s var(--ease); }

/* 9. Слой для искр */
.fx-spark { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

/* 11. Частицы в тёмном разделе */
#builder { position: relative; overflow: hidden; isolation: isolate; }
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .fx-shiny, .fx-star, .fx-split .fx-w { animation: none !important; }
}
/* свечение: заливка (::before) и светящийся край (::after) отдельно */
.fx-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(35, 64, 255, .07), transparent 65%);
}
.fx-card::after {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(35, 64, 255, .85), transparent 45%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.fx-bento.is-lit .fx-card::before { opacity: 1; }
.proj--dark.fx-card::before, .proj--accent.fx-card::before, .price--accent.fx-card::before, .prc--dark.fx-card::before, .prc--accent.fx-card::before {
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 65%);
}
.proj--dark.fx-card::after, .proj--accent.fx-card::after, .price--accent.fx-card::after, .prc--dark.fx-card::after, .prc--accent.fx-card::after {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .85), transparent 45%) border-box;
}
.fx-star { inset: 0; padding: 2.5px; }
.fx-star { padding: 3px; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7));
  background: conic-gradient(from var(--fx-ang), transparent 0 55%, rgba(255, 255, 255, .9) 72%, #FFB59E 84%, transparent 96%); }
.offer .fx-star { filter: drop-shadow(0 0 6px rgba(255, 91, 46, .8));
  background: conic-gradient(from var(--fx-ang), transparent 0 55%, #FF5B2E 72%, #FFD2C2 84%, transparent 96%); }

/* портфолио: єПостер во всю ширину (текст слева, возможности справа), остальные 4 проекта — в ряд */
@media (min-width: 1001px) {
  .projects { grid-template-columns: repeat(4, 1fr); }
  .proj--main { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 44px; row-gap: 14px; align-content: start; }
  .proj--main > * { grid-column: 1; }
  .proj--main .proj__list { grid-column: 2; grid-row: 1 / span 6; align-self: center; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .proj--main .proj__cost { margin-top: 6px; }
  .proj--main .proj__h { font-size: clamp(24px, 2.2vw, 32px); }
  .proj--main .proj__p { font-size: 16px; }
  .proj:not(.proj--main) { padding: 24px; }
  .proj:not(.proj--main) .proj__h { font-size: 19px; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .proj--main { grid-column: 1 / -1; }
}
@media (min-width: 1001px) {
  .projects { grid-template-columns: 1fr 1fr; }
  .proj--main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .proj:not(.proj--main) { padding: 28px; }
  .proj:not(.proj--main) .proj__h { font-size: 21px; }
}

/* ==========================================================================
   Портфолио: слайдер по страницам (3 / 2 / 1 карточка)
   ========================================================================== */
.pf { --gap: 20px; --per: 3; }
.pf__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: -24px -12px; padding: 24px 12px; outline: none; }
.pf__view::-webkit-scrollbar { display: none; }
.pf__track { display: flex; gap: var(--gap); align-items: stretch; }
.pfc {
  position: relative; flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align: start;
  display: flex; flex-direction: column; border-radius: 28px; overflow: hidden; background: var(--surface);
  box-shadow: 0 1px 0 rgba(15, 18, 24, .04), 0 24px 50px -40px rgba(15, 18, 24, .45);
  transition: box-shadow .4s var(--ease);
}
.pfc:hover { box-shadow: 0 1px 0 rgba(15, 18, 24, .04), 0 34px 60px -34px rgba(35, 64, 255, .4); }

/* обложка */
.pfc__cover { position: relative; flex: none; height: 150px; display: flex; align-items: flex-end; padding: 22px 24px; overflow: hidden;
  background: radial-gradient(circle at 85% 0%, rgba(35, 64, 255, .28), transparent 55%), radial-gradient(circle at 0% 100%, rgba(255, 91, 46, .16), transparent 50%), #EEF0FF; }
.pfc__cover::before { content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(35, 64, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(35, 64, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px; -webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); }
.pfc--dark .pfc__cover { background: radial-gradient(circle at 85% 0%, rgba(243, 186, 47, .35), transparent 55%), radial-gradient(circle at 0% 100%, rgba(35, 64, 255, .3), transparent 50%), #161B26; }
.pfc--dark .pfc__cover::before { background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); }
.pfc--accent .pfc__cover { background: radial-gradient(circle at 85% 0%, rgba(255, 255, 255, .35), transparent 55%), radial-gradient(circle at 0% 100%, rgba(255, 91, 46, .4), transparent 50%), #1A35E6; }
.pfc--accent .pfc__cover::before { background-image: linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .1) 1px, transparent 1px); }
.pfc__logo { position: relative; width: 68px; height: 68px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; background: #fff;
  box-shadow: 0 18px 30px -16px rgba(15, 18, 24, .55), 0 0 0 1px rgba(15, 18, 24, .05); transition: transform .5s var(--ease); }
.pfc__logo img { width: 62%; height: 62%; object-fit: contain; }
.pfc[data-p="1"] .pfc__logo img { width: 100%; height: 100%; }
.pfc:hover .pfc__logo { transform: translateY(-4px) rotate(-4deg); }
.pfc__num { position: absolute; right: 18px; bottom: -14px; font: 600 92px/1 var(--f-head); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(35, 64, 255, .22); }
.pfc--dark .pfc__num { -webkit-text-stroke-color: rgba(255, 255, 255, .14); }
.pfc--accent .pfc__num { -webkit-text-stroke-color: rgba(255, 255, 255, .3); }
.pfc__live { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 12px; font-weight: 800; color: var(--ok); }
.pfc__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(14, 138, 95, .2); animation: pulseB 2s infinite; }
.pfc__live--count { color: var(--accent); }

/* содержимое */
.pfc__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 22px; }
.pfc__tag { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.pfc__h { margin: 0; font: 600 20px/1.25 var(--f-head); letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pfc__p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.65em; }
.pfc__list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pfc__list li { font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: 9px; background: var(--bg); }
.pfc__list li:nth-child(n+4) { display: none; }
.pfc__list::after { content: attr(data-more); font-size: 12.5px; font-weight: 800; padding: 6px 10px; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.pfc__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.pfc__price small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pfc__price b { display: block; margin-top: 4px; font: 600 26px/1 var(--f-head); letter-spacing: -.02em; white-space: nowrap; }
.pfc__sub { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pfc__more { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 16px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; transition: background .25s; }
.pfc__more i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: rgba(255, 255, 255, .14); transition: transform .3s var(--ease); }
.pfc__more:hover { background: var(--accent); }
.pfc__more:hover i { transform: translateX(3px); }
.pfc__plat { display: flex; flex-wrap: wrap; gap: 6px; }
.pfc__plat span { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 7px; color: var(--muted); border: 1px solid var(--line); }

/* тёмная и синяя */
.pfc--dark { background: var(--ink); color: #fff; }
.pfc--dark .pfc__tag { color: #F3BA2F; }
.pfc--dark .pfc__p, .pfc--dark .pfc__price small, .pfc--dark .pfc__sub { color: #9AA1B2; }
.pfc--dark .pfc__list li { background: var(--ink-2); color: #C6CBD8; }
.pfc--dark .pfc__list::after { background: rgba(243, 186, 47, .14); color: #F3BA2F; }
.pfc--dark .pfc__foot { border-color: var(--ink-3); }
.pfc--dark .pfc__price b { color: #F3BA2F; }
.pfc--dark .pfc__more { background: #fff; color: var(--ink); }
.pfc--dark .pfc__more i { background: var(--bg); }
.pfc--dark .pfc__plat span { border-color: var(--ink-3); color: #9AA1B2; }
.pfc--accent { background: var(--accent); color: #fff; }
.pfc--accent .pfc__tag { color: #FFD2C2; }
.pfc--accent .pfc__p, .pfc--accent .pfc__price small, .pfc--accent .pfc__sub { color: rgba(255, 255, 255, .78); }
.pfc--accent .pfc__list li { background: rgba(255, 255, 255, .14); }
.pfc--accent .pfc__list::after { background: #fff; color: var(--accent); }
.pfc--accent .pfc__foot { border-color: rgba(255, 255, 255, .22); }
.pfc--accent .pfc__more { background: #fff; color: var(--accent); }
.pfc--accent .pfc__more i { background: var(--accent-soft); }
.pfc--accent .pfc__plat span { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }

/* навигация */
.pf__nav { display: flex; align-items: center; gap: 24px; margin-top: 30px; }
.pf__count { flex: none; display: flex; align-items: baseline; gap: 6px; font: 600 15px var(--f-head); color: var(--muted); font-variant-numeric: tabular-nums; }
.pf__count b { font-size: 28px; color: var(--ink); }
.pf__bar { flex: 1; display: flex; gap: 6px; }
.pf__bar button { position: relative; flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pf__bar button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.pf__bar button.is-on::after { transform: scaleX(1); }
.pf__bar button::before { content: ""; position: absolute; inset: -10px 0; } /* большая зона нажатия */
.pf__arrows { flex: none; display: flex; gap: 10px; }
.pf__arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: var(--surface); box-shadow: 0 0 0 1.5px var(--line); transition: background .25s, color .25s, box-shadow .25s, opacity .25s; }
.pf__arrow:hover:not(:disabled) { background: var(--ink); color: #fff; box-shadow: none; }
.pf__arrow:disabled { opacity: .35; cursor: default; }

/* окно деталей проекта */
.pfm .pmodal__box { padding: 0; gap: 0; }
.pfm__cover { position: relative; height: 130px; flex: none; }
.pfm__cover .pfc__logo { position: absolute; left: 28px; bottom: -28px; z-index: 2; }
.pfm__in { display: flex; flex-direction: column; gap: 14px; padding: 44px 28px 28px; }
.pfm__in .pfc__h { display: block; min-height: 0; font-size: 22px; padding-right: 0; }
.pfm__in .pfc__p { display: block; min-height: 0; font-size: 15px; }
.pfm__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pfm__list li { position: relative; padding: 10px 12px 10px 38px; border-radius: 12px; background: var(--bg); font-size: 13.5px; line-height: 1.35; }
.pfm__list li::before { content: ""; position: absolute; left: 11px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--accent) var(--chk-w) center / 11px no-repeat; }
.pfm__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #F1F3FF, #FFF1EC); }
.pfm__row .pfc__price b { font-size: 32px; }
.pfm__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.pfm__acts .btn { flex: 1 1 auto; justify-content: space-between; }
.pfm .pmodal__x { z-index: 3; background: rgba(255, 255, 255, .9); }

@media (max-width: 1100px) { .pf { --per: 2; } }
@media (max-width: 700px) {
  .pf { --gap: 14px; }
  .pfc { flex-basis: 86%; }
  .pf__nav { gap: 14px; margin-top: 22px; }
  .pf__count b { font-size: 22px; }
  .pf__arrow { width: 44px; height: 44px; }
  .pfm__list { grid-template-columns: 1fr; }
  .pfm__in { padding: 40px 18px 20px; }
}
.pfc__h { -webkit-line-clamp: 3; min-height: 3.75em; }
.pf__view { margin: -24px 0; padding: 24px 0; }
.pfm__cover, .pfm__cover .pfc__cover { overflow: visible; }
.pfm__cover .pfc__cover { border-radius: 28px 28px 0 0; }
.pfm__cover .pfc__live { right: 66px; }
.pfm__cover .pfc__num { bottom: 0; }
.pfc { cursor: pointer; } .pfc:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- окно проекта: широкое на ПК (паспорт слева + возможности справа) ---------- */
.pfm { width: min(1080px, calc(100vw - 32px)); }
.pfm .pmodal__box { padding: 0; overflow: hidden; max-height: calc(100dvh - 32px); }
.pfm2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 0; max-height: calc(100dvh - 32px); }
.pfm2__side {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; overflow-y: auto;
  background: radial-gradient(circle at 100% 0%, rgba(35, 64, 255, .2), transparent 55%), radial-gradient(circle at 0% 100%, rgba(255, 91, 46, .14), transparent 50%), #F1F3FF;
}
.pfm2__head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; min-height: 74px; margin-bottom: 6px; }
.pfm2__head .pfc__num { position: static; font-size: 80px; line-height: .8; }
.pfm2__head .pfc__live { top: -10px; right: auto; left: 86px; }
.pfm2__h { margin: 0; font: 600 clamp(22px, 2.1vw, 28px)/1.18 var(--f-head); letter-spacing: -.01em; }
.pfm2__p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pfm2__price { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(15, 18, 24, .1); }
.pfm2__price small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pfm2__price b { display: block; margin-top: 6px; font: 600 38px/1 var(--f-head); letter-spacing: -.02em; }
.pfm2__price span { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.pfm2__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.pfm2__acts .btn { flex: 1 1 auto; justify-content: space-between; }
.pfm2__main { padding: 32px; overflow-y: auto; background: #fff; }
.pfm2__main .pmodal__h { margin: 4px 0 16px; }
.pfm2__main .pfm__list { grid-template-columns: 1fr; gap: 10px; }
.pfm2__main .pfm__list li { padding: 13px 14px 13px 44px; font-size: 14.5px; }
.pfm2__main .pfm__list li::before { left: 14px; width: 20px; height: 20px; margin-top: -10px; background-size: 12px; }
.pfm .pmodal__x { top: 18px; right: 18px; }

/* тёмная (P2P) и синяя (вода) левые панели */
.pfm2--dark .pfm2__side { background: radial-gradient(circle at 100% 0%, rgba(243, 186, 47, .3), transparent 55%), radial-gradient(circle at 0% 100%, rgba(35, 64, 255, .3), transparent 50%), var(--ink); color: #fff; }
.pfm2--dark .pfc__tag { color: #F3BA2F; }
.pfm2--dark .pfm2__p, .pfm2--dark .pfm2__price small, .pfm2--dark .pfm2__price span { color: #9AA1B2; }
.pfm2--dark .pfm2__price { border-color: var(--ink-3); }
.pfm2--dark .pfm2__price b { color: #F3BA2F; }
.pfm2--dark .pfc__plat span { border-color: var(--ink-3); color: #9AA1B2; }
.pfm2--dark .pfc__num { -webkit-text-stroke-color: rgba(255, 255, 255, .16); }
.pfm2--dark .btn--accent { background: #fff; color: var(--ink); }
.pfm2--accent .pfm2__side { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .3), transparent 55%), radial-gradient(circle at 0% 100%, rgba(255, 91, 46, .4), transparent 50%), var(--accent); color: #fff; }
.pfm2--accent .pfc__tag { color: #FFD2C2; }
.pfm2--accent .pfm2__p, .pfm2--accent .pfm2__price small, .pfm2--accent .pfm2__price span { color: rgba(255, 255, 255, .8); }
.pfm2--accent .pfm2__price { border-color: rgba(255, 255, 255, .25); }
.pfm2--accent .pfc__plat span { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .85); }
.pfm2--accent .pfc__num { -webkit-text-stroke-color: rgba(255, 255, 255, .3); }
.pfm2--accent .btn--accent { background: #fff; color: var(--accent); }

/* телефон и узкие экраны — одна колонка, как раньше */
@media (max-width: 860px) {
  .pfm2 { grid-template-columns: 1fr; overflow-y: auto; }
  .pfm2__side, .pfm2__main { overflow: visible; padding: 22px 18px; }
  .pfm2__head .pfc__num { font-size: 64px; }
  .pfm2__price b { font-size: 30px; }
  .pfm2__main .pfm__list li { padding: 11px 12px 11px 40px; font-size: 13.5px; }
}

/* проверка формы заявки */
.field__hint { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: var(--signal); animation: feedIn .3s var(--ease) both; }
.field textarea.is-error { border-color: var(--signal); }
.chips.is-error { border-radius: 14px; box-shadow: 0 0 0 2px rgba(255, 91, 46, .55); padding: 6px; }
.form__trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* «Передзвоніть мені за 5 хвилин» */
.choice--call .choice__ico { background: #E7F8EE; color: var(--ok); }
.form--call .field input { font-size: 20px; font-weight: 700; letter-spacing: .02em; }

/* ---------- окно «перед уходом» ---------- */
.xm { width: min(520px, calc(100% - 24px)); }
.xm__box {
  position: relative; overflow: hidden; border-radius: 28px; padding: 40px 36px 32px; color: #fff; text-align: center;
  background: radial-gradient(circle at 100% 0, rgba(255, 91, 46, .55), transparent 55%), radial-gradient(circle at 0 100%, rgba(93, 120, 255, .28), transparent 50%), linear-gradient(140deg, var(--ink), #1E2640);
}
.xm__close { background: rgba(255, 255, 255, .1); color: #fff; }
.xm__close:hover { background: rgba(255, 255, 255, .2); }
.xm__badge {
  width: 104px; height: 104px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  font: 600 30px var(--f-head); background: var(--signal); box-shadow: 0 0 0 10px rgba(255, 91, 46, .18); transform: rotate(-8deg);
  animation: xmPop .7s var(--ease) .15s both;
}
@keyframes xmPop { from { transform: rotate(-40deg) scale(.4); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 1; } }
.xm__title { margin: 8px 0 10px; font: 600 clamp(24px, 3vw, 30px)/1.15 var(--f-head); letter-spacing: -.02em; }
.xm__text { margin: 0 auto; max-width: 400px; color: #C6CBD8; font-size: 15.5px; line-height: 1.55; }
.xm__list { list-style: none; margin: 20px auto 0; padding: 0; display: grid; gap: 8px; max-width: 360px; text-align: left; }
.xm__list li { position: relative; padding-left: 28px; font-size: 15px; color: #E4E7EF; }
.xm__list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255, 91, 46, .22); color: #FFB59E; }
.xm__foot { margin-top: 26px; display: grid; gap: 10px; justify-items: center; }
.xm__foot .btn { width: 100%; justify-content: center; }
.xm__no { font-size: 14px; font-weight: 600; color: #9AA1B2; padding: 6px 10px; }
.xm__no:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .xm__badge { animation: none; } }

/* ---------- безпека даних ---------- */
.sec {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center;
  padding: 48px; border-radius: 36px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(circle at 0 0, rgba(93, 120, 255, .35), transparent 45%), radial-gradient(circle at 100% 100%, rgba(40, 199, 120, .16), transparent 45%), linear-gradient(140deg, var(--ink), #1A2138);
}
.sec__intro .h2 { margin-top: 14px; color: #fff; font-size: clamp(30px, 3.3vw, 46px); }
.sec__lead { margin: 18px 0 0; color: #9AA1B2; font-size: 17px; line-height: 1.6; max-width: 420px; }
.sec__lock { position: relative; width: 84px; height: 84px; margin-bottom: 26px; display: grid; place-items: center; color: #8FA3FF; }
.sec__lock svg { position: relative; width: 46px; height: 46px; }
.sec__lock i { position: absolute; inset: 0; border-radius: 26px; border: 1.5px solid rgba(143, 163, 255, .45); background: rgba(143, 163, 255, .08); }
.sec__lock i + i { inset: -12px; border-radius: 34px; border-color: rgba(143, 163, 255, .18); background: none; animation: secPulse 3s ease-in-out infinite; }
@keyframes secPulse { 50% { transform: scale(1.08); opacity: .3; } }
.sec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec__item {
  position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); transition: background .3s, border-color .3s;
}
.sec__item:hover { background: rgba(255, 255, 255, .08); border-color: rgba(143, 163, 255, .35); }
.sec__ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(143, 163, 255, .14); color: #A9B8FF; }
.sec__ico svg { width: 22px; height: 22px; }
.sec__item h3 { margin: 0 0 6px; font: 600 16.5px/1.25 var(--f-head); color: #fff; }
.sec__item p { margin: 0; font-size: 14px; line-height: 1.55; color: #9AA1B2; }
@media (max-width: 1100px) { .sec { grid-template-columns: 1fr; gap: 32px; } .sec__lead { max-width: 600px; } }
@media (max-width: 640px) {
  .sec { padding: 30px 20px; border-radius: 28px; }
  .sec__grid { grid-template-columns: 1fr; }
  .sec__lock { width: 68px; height: 68px; margin-bottom: 20px; }
  .sec__lock svg { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .sec__lock i + i { animation: none; } }

/* ---------- страница 404 ---------- */
.nf-page { min-height: 100dvh; background: radial-gradient(ellipse 60% 50% at 50% 0, rgba(35, 64, 255, .10), transparent 70%), var(--bg); }
.nf { max-width: 760px; padding-top: 130px; padding-bottom: 72px; text-align: center; }
.nf__code { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 18px); font: 700 clamp(96px, 20vw, 180px)/1 var(--f-head); letter-spacing: -.04em; color: var(--ink); margin-bottom: 30px; }
.nf__orbit { position: relative; width: .78em; height: .78em; display: grid; place-items: center; }
.nf__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); }
.nf__ring--2 { inset: 18%; border-style: dashed; border-color: rgba(35, 64, 255, .3); }
.nf__core { width: 26%; height: 26%; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 8px rgba(15, 18, 24, .06); }
.nf__spin { position: absolute; inset: 0; animation: nfSpin 6s linear infinite; }
.nf__planet { position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(35, 64, 255, .18), 0 0 18px rgba(35, 64, 255, .6); }
@keyframes nfSpin { to { transform: rotate(360deg); } }
.nf .eyebrow { justify-content: center; }
.nf__title { margin: 16px auto 0; max-width: 620px; font: 600 clamp(30px, 4.4vw, 50px)/1.1 var(--f-head); letter-spacing: -.03em; }
.nf__text { margin: 18px auto 0; max-width: 520px; color: var(--muted); font-size: 17.5px; line-height: 1.6; }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.nf__links { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.nf__links p { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nf__links div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nf__links a { padding: 9px 15px; border-radius: 999px; background: var(--surface); font-size: 14.5px; font-weight: 600; transition: background .25s, color .25s, transform .25s var(--ease); }
.nf__links a:hover { background: var(--ink); color: #fff; transform: translateY(-2px); }
@media (max-width: 640px) { .nf { padding-top: 110px; } .nf__actions .btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .nf__spin { animation: none; } }

/* ---------- блог ---------- */
.blog, .post { padding-top: 110px; padding-bottom: 60px; }
.blog__head { max-width: 760px; margin: 26px 0 40px; }
.blog__head .h2 { margin-top: 14px; }
.blog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.blog__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bcover {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--b) 80%, transparent), transparent 55%), linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 70%, #000));
}
.bcover i { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); width: 70%; aspect-ratio: 1; }
.bcover i + i { width: 46%; border-style: dashed; border-color: rgba(255, 255, 255, .3); }
.bcover svg { position: relative; width: 20%; max-width: 110px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .25)); }
.bcover--big { aspect-ratio: 3 / 1; margin: 34px 0 0; border-radius: 30px; }
.bcover--big svg { width: 11%; }
.bcover--big i { width: 38%; } .bcover--big i + i { width: 24%; }
.bcard { display: flex; flex-direction: column; gap: 0; padding: 10px; border-radius: 30px; background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s; }
.bcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(15, 18, 24, .35); }
.bcard .bcover svg { transition: transform .5s var(--ease); }
.bcard:hover .bcover svg { transform: scale(1.1) rotate(-6deg); }
.bcard__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px 14px; flex: 1; }
.bcard__meta { font-size: 13px; color: var(--muted); }
.bcard__meta b { color: var(--accent); }
.bcard h3 { margin: 0; font: 600 20px/1.25 var(--f-head); letter-spacing: -.01em; }
.bcard p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.bcard__more { margin-top: auto; padding-top: 6px; font-weight: 800; font-size: 14px; color: var(--accent); }
.bcard--lead { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
.bcard--lead .bcover { flex: 0 0 56%; aspect-ratio: auto; min-height: 300px; }
.bcard--lead .bcard__body { justify-content: center; padding: 28px 34px; }
.bcard--lead h3 { font-size: clamp(24px, 2.6vw, 34px); }
.bcard--lead p { font-size: 16.5px; }
.post__head { max-width: 820px; margin-top: 26px; }
.post__tag { display: inline-block; padding: 6px 12px; border-radius: 99px; background: rgba(35, 64, 255, .1); color: var(--accent); font-size: 13px; font-weight: 800; }
.post__title { margin: 16px 0 0; font: 600 clamp(30px, 4.4vw, 54px)/1.08 var(--f-head); letter-spacing: -.03em; }
.post__lead { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--muted); }
.post__meta { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; font-size: 14px; color: var(--muted); line-height: 1.45; }
.post__meta b { color: var(--ink); }
.post__ava { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 600 14px var(--f-head); }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin-top: 40px; }
.post__body { max-width: 720px; font-size: 17.5px; line-height: 1.75; color: #2A2F3B; }
.post__body > :first-child { margin-top: 0; font-size: 19px; color: var(--ink); }
.post__body h2 { margin: 42px 0 12px; font: 600 clamp(22px, 2.4vw, 28px)/1.2 var(--f-head); letter-spacing: -.02em; color: var(--ink); }
.post__body p { margin: 0 0 16px; }
.post__body ul, .post__body ol { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; counter-reset: li; }
.post__body li { position: relative; padding-left: 34px; }
.post__body ul li::before { content: ""; position: absolute; left: 8px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.post__body ol li { counter-increment: li; }
.post__body ol li::before { content: counter(li); position: absolute; left: 0; top: .15em; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 12.5px/1 var(--f-head); }
.post__body b { color: var(--ink); }
.post__aside { position: sticky; top: 100px; }
.post__cta { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 26px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(255, 91, 46, .5), transparent 55%), linear-gradient(140deg, var(--ink), #1E2640); }
.post__cta-tag { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFB59E; }
.post__cta-price small { color: #9AA1B2; font-weight: 700; }
.post__cta-price b { font: 600 34px/1 var(--f-head); }
.post__cta-price span { font-weight: 800; font-size: 18px; }
.post__cta p { margin: 0; color: #C6CBD8; font-size: 14.5px; line-height: 1.55; }
.post__cta .btn { justify-content: space-between; }
.post__svc { font-size: 14px; font-weight: 700; color: #C6CBD8; text-align: center; }
.post__svc:hover { color: #fff; }
.post__end { margin-top: 64px; padding: 44px 32px; border-radius: 32px; background: var(--surface); text-align: center; }
.post__ctah { margin: 0; font: 600 clamp(24px, 3vw, 34px)/1.15 var(--f-head); letter-spacing: -.02em; }
.post__end p { max-width: 520px; margin: 12px auto 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
.post__also { margin-top: 64px; }
.post__also-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.post__also-head a { font-weight: 800; font-size: 14px; color: var(--accent); }
@media (max-width: 1000px) {
  .blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcard--lead { flex-direction: column; } .bcard--lead .bcover { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  .post__grid { grid-template-columns: 1fr; gap: 32px; } .post__aside { position: static; }
}
@media (max-width: 640px) {
  .blog, .post { padding-top: 90px; }
  .blog__grid, .blog__grid--2 { grid-template-columns: 1fr; }
  .bcard--lead .bcard__body { padding: 18px 14px 14px; }
  .bcover--big { aspect-ratio: 16 / 9; border-radius: 24px; } .bcover--big svg { width: 20%; }
  .post__body { font-size: 16.5px; }
  .post__end { padding: 32px 20px; }
  .post__end .btn { width: 100%; justify-content: center; }
}

/* шапка с пунктом «Блог»: на ноутбуках чуть плотнее, чтобы всё влезало */
@media (min-width: 1261px) { .nav__inner { gap: 14px; } .nav__links { gap: 15px; font-size: 14.5px; } }
/* на больших экранах шапке даём больше места, чем контенту */
@media (min-width: 1480px) { .nav__inner { max-width: calc(var(--wrap) + 140px); gap: 20px; } .nav__links { gap: 20px; font-size: 15px; } }

/* блог: фото-обложки и фильтр рубрик */
.bcover--photo { background: var(--line); }
.bcover--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.bcard:hover .bcover--photo img { transform: scale(1.05); }
.bcover--photo.bcover--big img { object-position: center 40%; }
.bfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: -12px 0 26px; }
.bfilter button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--surface); font-weight: 700; font-size: 14.5px; transition: background .25s, color .25s; }
.bfilter button span { min-width: 22px; padding: 2px 7px; border-radius: 99px; background: var(--bg); font-size: 12px; color: var(--muted); }
.bfilter button:hover { background: var(--line); }
.bfilter button.is-active { background: var(--ink); color: #fff; }
.bfilter button.is-active span { background: rgba(255, 255, 255, .16); color: #fff; }
.bcard[hidden] { display: none; }
@media (max-width: 640px) { .bfilter { flex-wrap: nowrap; overflow-x: auto; margin: -8px -16px 22px; padding: 0 16px; scrollbar-width: none; } .bfilter button { flex: none; } }

/* логотип крупнее: знак 38px и надпись 24px (на телефоне — чуть меньше) */
.logo { font-size: 24px; gap: 12px; }
.logo__mark { width: 38px; height: 38px; border-width: 2.5px; }
.logo__mark i { --r: 16px; width: 10px; height: 10px; margin: -5px 0 0 -5px; animation-name: orbitR; }
@keyframes orbitR { from { transform: rotate(0) translateX(var(--r)); } to { transform: rotate(360deg) translateX(var(--r)); } }
@media (max-width: 640px) {
  .logo { font-size: 21px; gap: 10px; }
  .logo__mark { width: 34px; height: 34px; }
  .logo__mark i { --r: 14px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
}

/* бегущие слова в заголовке: края плавно растворяются, чтобы при смене слова не было «наезда» */
.rotator { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%); }
.rotator span { transition-duration: .5s; }

/* кнопка «Подзвонити» в шапке: круглая, номер — в подсказке при наведении */
.nav__call {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ok); color: #fff; box-shadow: 0 6px 16px -6px rgba(14, 138, 95, .55); transition: background .25s, box-shadow .25s;
}
.nav__call svg { width: 21px; height: 21px; }
.nav__call:hover { background: #0B7650; box-shadow: 0 0 0 5px rgba(14, 138, 95, .16); }
.nav__call svg { transition: transform .3s var(--ease); }
.nav__call:hover svg { transform: rotate(-14deg) scale(1.08); }
.nav__call::after {
  content: attr(data-num); position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px);
  padding: 8px 12px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.nav__call:hover::after, .nav__call:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.nav__mcall { justify-content: center; }
@media (max-width: 860px) { .nav__call { display: none; } }
.nav__mobile .nav__mcall { margin-bottom: -8px; }
.nav__mcall b { font-weight: 800; color: var(--ok); }

/* кнопка звонка в шапке: залитая трубка, без размытой тени — чётко на любом экране */
.nav__call { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.nav__call:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 4px rgba(14, 138, 95, .18); }
.nav__call svg { width: 20px; height: 20px; }

/* «або передзвонимо за 5 хвилин»: зелёная «таблетка», трубка с расходящимся кольцом, стрелка уезжает при наведении */
.hero__call {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 5px 16px 5px 5px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: var(--ink); background: rgba(14, 138, 95, .08); border: 1px solid rgba(14, 138, 95, .2);
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.hero__call:hover { background: rgba(14, 138, 95, .14); border-color: rgba(14, 138, 95, .4); }
.hero__call:active { transform: scale(.98); }
.hero__call-ico { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ok); }
.hero__call-ico svg { width: 17px; height: 17px; animation: cbShake 4s ease-in-out infinite; }
.hero__call-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: cbPing 2s cubic-bezier(0, 0, .2, 1) infinite; }
.hero__call-arr { color: var(--ok); transition: transform .3s var(--ease); }
.hero__call:hover .hero__call-arr { transform: translateX(4px); }
.hero__call:hover .hero__call-ico svg { animation-duration: .9s; }
@keyframes cbPing { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes cbShake { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(-16deg); } 86% { transform: rotate(14deg); } 90% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .hero__call-ico svg, .hero__call-ico::after { animation: none; } }

/* кнопки звонка тоже притягиваются к курсору: плавный сдвиг + их собственные переходы */
.nav__call.fx-mag, .hero__call.fx-mag { transition: translate .35s var(--ease), background .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease); }

/* баннер согласия на cookie: поверх страницы, высоту страницы не меняет */
.ck {
  position: fixed; left: 16px; bottom: 16px; z-index: 9000; width: min(440px, calc(100% - 32px)); padding: 16px 18px;
  border-radius: 18px; background: var(--ink); color: #fff; box-shadow: 0 18px 50px -18px rgba(15, 18, 24, .6);
}
.ck p { margin: 0; font-size: 14px; line-height: 1.5; color: #D6DAE4; }
.ck a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ck div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.ck button { min-height: 40px; padding: 0 16px; border-radius: 99px; font-size: 14px; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); transition: background .2s; }
.ck button:hover { background: rgba(255, 255, 255, .2); }
.ck button[data-c="yes"] { background: var(--accent); }
.ck button[data-c="yes"]:hover { background: var(--accent-2); }
.ck-open { color: inherit; font-size: inherit; cursor: pointer; }

/* лента цен на телефоне: своя высота по содержимому, не как у презентаций услуг (700px) */
@media (max-width: 640px) { .showcase.pstrip { --H: 510px; } }
@media (max-width: 350px) { .showcase.pstrip { --H: 570px; } }