/* Freedom Digital — главная.
   Палитра: тёмно-зелёный и кремовый.
   Один шрифт Inter Tight 400/500, сетка 12 колонок. Блоки идут в порядке страницы. */

/* ================= ТОКЕНЫ ================= */
/* тёмные зоны: первый экран, меню, подвал, итог цены. Белые: всё остальное. Тема задаётся атрибутом data-theme */
/* на всём сайте один цвет: глубокий тёмно-синий, остальное оттенки серого из него */
:root, [data-theme="dark"], [data-theme="photo"], [data-theme="blue"] { --black: #0a0a0a; --white: #ffffff; --blue: #ffffff; --on-blue: #0a0a0a; }
[data-theme="light"] { --black: #ffffff; --white: #0a0a0a; --blue: #0a0a0a; --on-blue: #ffffff; }
[data-theme="brand"] { --black: #0a0a0a; --white: #ffffff; --blue: #ffffff; --on-blue: #0a0a0a; }
:root, [data-theme] {
  --gray: var(--white);
  --gray-2: var(--m92);
  --mute: var(--m70);
  --d30: color-mix(in srgb, #000 30%, var(--black));
  --d10: color-mix(in srgb, #000 10%, var(--black));
  --m4: color-mix(in srgb, var(--white) 4%, var(--black));
  --m6: color-mix(in srgb, var(--white) 6%, var(--black));
  --m8: color-mix(in srgb, var(--white) 8%, var(--black));
  --m13: color-mix(in srgb, var(--white) 13%, var(--black));
  --m16: color-mix(in srgb, var(--white) 16%, var(--black));
  --m20: color-mix(in srgb, var(--white) 20%, var(--black));
  --m23: color-mix(in srgb, var(--white) 23%, var(--black));
  --m25: color-mix(in srgb, var(--white) 25%, var(--black));
  --m28: color-mix(in srgb, var(--white) 28%, var(--black));
  --m33: color-mix(in srgb, var(--white) 33%, var(--black));
  --m42: color-mix(in srgb, var(--white) 42%, var(--black));
  --m52: color-mix(in srgb, var(--white) 52%, var(--black));
  --m60: color-mix(in srgb, var(--white) 60%, var(--black));
  --m70: color-mix(in srgb, var(--white) 70%, var(--black));
  --m74: color-mix(in srgb, var(--white) 74%, var(--black));
  --m82: color-mix(in srgb, var(--white) 82%, var(--black));
  --m92: color-mix(in srgb, var(--white) 92%, var(--black));
  --a80: color-mix(in srgb, var(--blue) 80%, var(--white));
  --deep: var(--m28);
  --blue-2: var(--a80);
  --card: var(--m4);
  --card-2: var(--m8);
  --line: color-mix(in srgb, var(--white) 11%, transparent);
  --soft: color-mix(in srgb, var(--white) 62%, transparent);
}
:root, [data-theme] { --tone: var(--m42); }
:root {
  --green: #2bd46b;
  --mark: url('assets/mark-w.png');

  --pad: clamp(12px, 1.4vw, 20px);
  --gap: 16px;
  --nav-h: 60px;

  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --t-s: 14px;
  --t-m: 16px;
  --t-l: clamp(18px, 1.4vw, 21px);
  --t-xl: clamp(24px, 2.1vw, 32px);
  --t-h: clamp(32px, 3.8vw, 56px);
  --t-d: clamp(42px, 5.6vw, 88px);
  --sec: clamp(72px, 8.4vw, 132px);

  --fs-display: var(--t-d);
  --fs-h2: var(--t-h);
  --fs-h3: var(--t-xl);
  --fs-lead: var(--t-l);
}

/* ================= БАЗА ================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { font-family: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: var(--t-m); line-height: 1.5; letter-spacing: -0.01em; color: var(--black); background: var(--black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; text-align: inherit; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
b { font-weight: 400; }
::selection { background: var(--blue); color: var(--on-blue); }
.is-loading { overflow: hidden; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { padding-inline: var(--pad); }
[data-theme="dark"], [data-theme="photo"], [data-theme="blue"] { color: var(--white); }

/* ================= ТИПОГРАФИКА ================= */
.t-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; font-weight: 400; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; font-weight: 400; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.025em; font-weight: 400; }
.t-lead { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.01em; }
.t-label { font-size: var(--t-s); line-height: 1.3; font-weight: 400; color: var(--mute); }

/* ================= КОМПОНЕНТЫ ================= */
.link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-m); font-weight: 400; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link-big { font-size: var(--t-xl); font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); }
.link-big:hover { background-size: 0 1px; background-position: 100% 100%; }

.tag { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 6px; font-size: var(--t-m); font-weight: 400; background: var(--tag-bg, color-mix(in srgb, var(--white) 12%, transparent)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: background .3s, color .3s, opacity .4s, transform .5s var(--ease); }
.tag:hover { background: var(--tag-hover, color-mix(in srgb, var(--white) 22%, transparent)); }
.live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: live 2s infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(43, 212, 107, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(43, 212, 107, 0); } }

/* знак: маска по картинке, цвет — из текста */
.mark { display: block; width: 22px; aspect-ratio: 256 / 224; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; background: currentColor; }

/* фирменный перелив: синие пятна медленно перетекают друг в друга */
.flow { position: absolute; inset: -40%; background:
    radial-gradient(40% 40% at 30% 35%, var(--a80), transparent 70%),
    radial-gradient(35% 35% at 70% 60%, var(--a80), transparent 70%),
    radial-gradient(45% 45% at 55% 25%, var(--m13), transparent 70%),
    radial-gradient(30% 30% at 25% 75%, var(--m70), transparent 70%);
  filter: blur(24px); animation: flow 14s linear infinite; pointer-events: none; }
@keyframes flow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }

/* ================= ПРЕЛОАДЕР ================= */

/* ================= ШАПКА ================= */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 95; height: var(--nav-h); padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--white); pointer-events: none; transition: color .4s; }
.nav > * { pointer-events: auto; }
.nav[data-on="light"] { color: var(--black); --tag-bg: color-mix(in srgb, var(--white) 85%, transparent); --tag-hover: color-mix(in srgb, var(--white) 95%, transparent); }
.nav[data-on="photo"] { --tag-bg: color-mix(in srgb, var(--black) 30%, transparent); --tag-hover: color-mix(in srgb, var(--black) 50%, transparent); }
.nav[data-on="blue"] { --tag-bg: color-mix(in srgb, var(--white) 16%, transparent); }
.nav-l { position: relative; display: flex; align-items: center; gap: 6px; }
.nav-links { display: flex; gap: 6px; }
.nav-links .tag, .nav .lang { transition: opacity .4s, transform .6s var(--ease), background .3s; }
.nav-menu { display: none; padding-left: 10px; }
.nav-menu-ic { position: relative; width: 14px; height: 8px; }
.nav-menu-ic i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.nav-menu-ic i:first-child { top: 0; } .nav-menu-ic i:last-child { top: 6.5px; }
.menu-open .nav-menu-ic i:first-child { top: 3.25px; transform: rotate(45deg); }
.menu-open .nav-menu-ic i:last-child { top: 3.25px; transform: rotate(-45deg); }
.nav-mark-link { position: absolute; left: 0; padding: 6px 0; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity .4s, transform .6s var(--ease); }
.nav-mark-link .mark { width: 26px; }
.nav-logo { font-size: var(--t-l); font-weight: 400; letter-spacing: -0.025em; transition: opacity .4s, transform .6s var(--ease); }
.nav-r { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.lang { display: flex; height: 34px; padding: 3px; border-radius: 6px; background: var(--tag-bg, color-mix(in srgb, var(--white) 12%, transparent)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lang a { display: grid; place-items: center; width: 32px; border-radius: 4px; font-size: var(--t-s); font-weight: 400; opacity: .5; transition: opacity .2s; }
.lang a:hover, .lang a.on { opacity: 1; }
.lang a.on { background: rgba(127, 127, 127, .2); }
.sound { width: 34px; padding: 0; justify-content: center; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq i { width: 2px; height: 45%; background: currentColor; border-radius: 1px; transition: height .3s; }
.sound.on .eq i { animation: eq 1s var(--ease-io) infinite alternate; }
.sound.on .eq i:nth-child(2) { animation-delay: -.4s; } .sound.on .eq i:nth-child(3) { animation-delay: -.7s; animation-duration: .8s; } .sound.on .eq i:nth-child(4) { animation-delay: -.2s; animation-duration: 1.2s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
/* после первого экрана: знак слева и кнопка справа */
.nav.compact .nav-links .tag, .nav.compact .lang { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.nav.compact .nav-links .tag:nth-child(2) { transition-delay: .03s; } .nav.compact .nav-links .tag:nth-child(3) { transition-delay: .06s; } .nav.compact .nav-links .tag:nth-child(4) { transition-delay: .09s; }
.nav.compact .nav-logo { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.nav.compact .nav-mark-link { opacity: 1; transform: none; pointer-events: auto; }

/* ================= МЕНЮ (телефон и планшет) ================= */
.menu { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.mn-panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; padding: calc(var(--nav-h) + 24px) var(--pad) var(--pad); background: var(--black); color: var(--white); clip-path: inset(var(--t, 12px) var(--r, 90%) var(--b, 90%) var(--l, 12px) round 6px); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s .7s; }
.menu-open .menu { pointer-events: auto; }
.menu-open .mn-panel { clip-path: inset(0 round 0); visibility: visible; transition-delay: 0s; }
.mn-list a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent); font-size: var(--t-h); line-height: 1.05; letter-spacing: -0.025em; font-weight: 400; opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s var(--ease); }
.mn-list a span { width: 24px; font-size: var(--t-s); letter-spacing: 0; color: var(--mute); }
.menu-open .mn-list a { opacity: 1; transform: none; }
.menu-open .mn-list a:nth-child(2) { transition-delay: .04s; } .menu-open .mn-list a:nth-child(3) { transition-delay: .08s; } .menu-open .mn-list a:nth-child(4) { transition-delay: .12s; } .menu-open .mn-list a:nth-child(5) { transition-delay: .16s; }
.mn-contacts a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--white) 10%, transparent); font-size: var(--t-m); font-weight: 400; }
.mn-contacts a span { color: var(--mute); }
.menu-open .nav { color: var(--white); --tag-bg: color-mix(in srgb, var(--white) 12%, transparent); }

/* ================= MAIN поверх подвала ================= */
main { position: relative; z-index: 1; background: var(--black); margin-bottom: 100vh; margin-bottom: 100svh; }

/* ================= ГЛАВНЫЙ ЭКРАН ================= */
.hero { position: relative; height: 540vh; background: var(--black); }
.hero-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero-photo { position: absolute; inset: 0; will-change: transform; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

/* экран ноутбука: тёмная карточка, фирменный синий перетекает из угла */
.dev { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

.hero-copy { position: absolute; left: 0; right: 0; bottom: 40px; color: var(--white); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.hero-title { grid-column: 1 / span 8; max-width: 12em; }
.hero-title .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hero-title .wi { display: inline-block; }
.hero-lead { grid-column: 1 / span 5; margin-top: 24px; opacity: .85; max-width: 480px; }
.btns { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-copy .btns { grid-column: 1 / span 6; margin-top: 28px; }

/* ================= РАБОТЫ ================= */
.works { position: relative; padding-top: 22vh; padding-bottom: 20vh; background: var(--black); }
.works-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.works-head h2 { max-width: 15em; }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 40px var(--gap); }
.w { display: flex; flex-direction: column; cursor: none; }
.w.big { grid-column: span 2; grid-row: span 2; }
.w.right { grid-column: 2 / span 2; }
.w.left { grid-column: 1; }
.w-img { position: relative; overflow: hidden; background: var(--m6); aspect-ratio: 16 / 9; }
.w.big .w-img { aspect-ratio: auto; flex: 1; min-height: 320px; }
.w-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.1s var(--ease); }
.w:hover .w-img img { transform: scale(1.045); }
.w-cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.w-cap h3 { font-size: var(--t-xl); letter-spacing: -0.025em; font-weight: 400; }
.w-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.w-tags span { padding: 4px 8px; border-radius: 4px; background: color-mix(in srgb, var(--white) 10%, transparent); font-size: var(--t-s); font-weight: 400; }
.w > p { margin-top: 6px; max-width: 440px; font-size: var(--t-s); color: var(--mute); }
/* курсор над работами: плашка «Смотреть» */
.peek { position: fixed; left: 0; top: 0; z-index: 80; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 6px; background: var(--white); color: var(--black); font-size: 14px; font-weight: 400; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .25s, transform .35s var(--ease); }
.peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.peek i { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 4px; background: var(--blue); color: var(--on-blue); font-style: normal; font-size: 11px; }

/* ================= ПОДХОД ================= */
.approach { background: var(--white); padding-top: 20vh; padding-bottom: 16vh; }
.statement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.st-label { grid-column: 1 / span 2; padding-top: .6em; font-size: 14px; line-height: 1.25; font-weight: 400; }
.st-text { grid-column: 4 / span 8; font-size: clamp(28px, 3.3vw, 52px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; }
.reveal .w8 { color: var(--rv-off, var(--m70)); transition: color .3s; }
.reveal .w8.on { color: var(--rv-on, var(--black)); }
.shift .reveal, [data-theme="dark"] .reveal, [data-theme="light"] .reveal { --rv-off: var(--m33); --rv-on: var(--white); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: 14vh; }
.step { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; height: clamp(380px, 31vw, 470px); padding: 24px; background: var(--gray); }
.step-n { display: block; margin-bottom: 14px; font-size: var(--t-s); font-weight: 400; color: var(--mute); }
.step p { max-width: 300px; font-size: var(--t-m); line-height: 1.45; color: var(--m52); }
.step.glow { position: relative; background: var(--black); color: var(--white); animation: glow 6s var(--ease-io) infinite alternate; }
.step.glow p { color: color-mix(in srgb, var(--white) 80%, transparent); }
@keyframes glow { from { box-shadow: inset 0 0 60px color-mix(in srgb, var(--blue) 50%, transparent); } to { box-shadow: inset 0 0 110px color-mix(in srgb, var(--blue) 80%, transparent); } }
.center { display: flex; justify-content: center; margin-top: 48px; }

/* ================= КОМАНДА + ПОЧЕМУ + УСЛУГИ: фон темнеет по прокрутке ================= */
.shift { background: var(--white); color: var(--black); }
.shift.dark { color: var(--white); }
.team { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.team-title { position: relative; z-index: 2; padding-top: 14vh; text-align: center; max-width: 10em; margin: 0 auto; pointer-events: none; }
.pit { position: absolute; inset: 0; z-index: 1; }
.pill { position: absolute; left: 0; top: 0; padding: 9px 16px; border-radius: 6px; font-size: var(--t-m); font-weight: 400; letter-spacing: -0.015em; white-space: nowrap; user-select: none; cursor: grab; will-change: transform; visibility: hidden; }
.pill.ready { visibility: visible; }
.pill:active { cursor: grabbing; }
.pill.round { border-radius: 999px; }

/* ================= ЦИФРЫ ================= */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-top: var(--pad); background: var(--white); }
.stat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 8px; height: clamp(260px, 24vw, 360px); padding: 20px 24px 24px; background: var(--gray); }
.stat b { font-size: var(--t-d); line-height: .9; letter-spacing: -0.025em; font-weight: 400; font-variant-numeric: tabular-nums; }
.stat em { align-self: end; padding-bottom: .3em; font-style: normal; font-size: var(--t-xl); letter-spacing: -0.025em; font-weight: 400; }
.stat span { grid-column: 1 / -1; align-self: end; font-size: var(--t-s); color: var(--m52); max-width: 220px; }
.stat.accent { background: var(--blue); color: var(--on-blue); }
.stat.accent span { color: color-mix(in srgb, var(--white) 80%, transparent); }

/* ================= КАЛЬКУЛЯТОР ================= */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 210px; padding: 20px; border-radius: 12px; background: var(--gray); transition: background .4s, color .4s, box-shadow .5s; }
.plan:hover { background: var(--gray-2); }
.plan b { font-size: var(--t-m); letter-spacing: -0.02em; }
.plan span { font-size: var(--t-s); color: var(--mute); }
.plan .pl-price { margin-top: auto; font-size: var(--t-h); line-height: 1; letter-spacing: -0.025em; font-weight: 400; color: inherit; }
.plan .pl-price small { font-size: .38em; letter-spacing: -0.01em; color: var(--mute); margin-right: .25em; vertical-align: .55em; }
.plan i { position: absolute; top: 20px; right: 20px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--m70); transition: border .3s; }
.plan.on { background: var(--black); color: var(--white); box-shadow: inset 0 0 70px color-mix(in srgb, var(--blue) 55%, transparent); }
.plan.on i { border: 5px solid var(--blue); background: var(--white); }
@keyframes add { from { opacity: 0; transform: translateY(-6px); } }

/* ================= ВОПРОСЫ ================= */

/* ================= ПРИЗЫВ ================= */

/* ================= ПОДВАЛ ================= */
.ft { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--blue); color: var(--on-blue); }
.ft-in { position: relative; padding-top: calc(var(--nav-h) + 40px); }
.foot-langs a { opacity: .55; }
.ft-word { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad); overflow: hidden; pointer-events: none; }
.ft-word span { display: inline-block; white-space: nowrap; font-size: 18vw; line-height: .78; letter-spacing: -0.025em; font-weight: 400; color: color-mix(in srgb, var(--white) 20%, transparent); margin-bottom: -.05em; transform: translateY(var(--wy, 30%)); }

/* заголовки выезжают по словам из-под маски */
.split .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .wi { display: inline-block; will-change: transform; }

/* ================= ПЛАНШЕТ ================= */
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .nav .nav-menu { display: inline-flex; }
  .nav-mark-link { display: none; }
  .hero-title { grid-column: 1 / span 11; }
  .hero-lead { grid-column: 1 / span 8; }
  .works-grid { grid-template-columns: 1fr 1fr; }
  .w.big { grid-column: span 2; grid-row: auto; }
  .w.big .w-img { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .w.right { grid-column: span 2; }
  .w.left { grid-column: auto; }
  .st-label { grid-column: 1 / -1; margin-bottom: 24px; }
  .st-text { grid-column: 1 / -1; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step { height: 320px; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ================= ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  :root { --nav-h: 54px; --gap: 8px; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-logo { justify-self: center; font-size: 19px; }
  .nav.compact .nav-logo { opacity: 1; transform: none; pointer-events: auto; }
  .nav .lang { display: none; }
  .nav .cta-t { display: none; }
  
  .hero { height: 500vh; }
  .hero-copy { bottom: 28px; }
  .hero-title, .hero-lead, .hero-copy .btns { grid-column: 1 / -1; }
  .hero-title { font-size: 42px; }
  .hero-lead { margin-top: 16px; }
  .hero-copy .btns { margin-top: 22px; }

  .works { padding-top: 16vh; padding-bottom: 12vh; }
  .works-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .works-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .w.big, .w.right, .w.left { grid-column: auto; }
  .w { cursor: pointer; }
  .w-cap { flex-wrap: wrap; }
  .w-cap h3 { font-size: 21px; }

  .approach { padding-top: 14vh; padding-bottom: 12vh; }
  .st-text { font-size: 28px; }
  .steps { grid-template-columns: 1fr; margin-top: 8vh; gap: 8px; }
  .step { height: auto; min-height: 220px; }

  .team { height: 88svh; min-height: 560px; }
  .team-title { padding: 12vh var(--pad) 0; }

  .stats { gap: 8px; }
  .stat { height: 200px; padding: 14px; }
  .stat b { font-size: 48px; }
  .stat em { font-size: 16px; }
  .stat span { font-size: 13px; }

  .plans { grid-template-columns: 1fr; }
  .plan { min-height: 0; display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .plan .pl-price { grid-column: 2; grid-row: 1 / span 3; font-size: 32px; }
  .plan i { display: none; }


  .ft-in { padding-top: calc(var(--nav-h) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.eq i:nth-child(2) { height: 80%; } .eq i:nth-child(3) { height: 60%; } .eq i:nth-child(4) { height: 30%; }

/* ================= V24: КНОПКА =================
   Склеенная плашка: синий квадрат со стрелкой, при наведении разворачивается на всю кнопку, стрелки бегут */
.cta { position: relative; display: inline-flex; align-items: center; height: 44px; border-radius: 6px; overflow: hidden; background: var(--black); color: var(--white); font-size: var(--t-m); font-weight: 400; letter-spacing: -0.015em; white-space: nowrap; box-shadow: 0 12px 20px -14px rgba(0, 0, 0, .7); }
.cta-t { display: flex; align-items: center; height: 100%; padding: 0 18px 0 58px; background: none; color: inherit; border-radius: 0; }
.cta-a { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; display: flex; align-items: center; border-radius: 0; background: var(--blue); color: var(--on-blue); overflow: hidden; transition: width .55s var(--ease-io); }
.chev { display: flex; gap: 5px; padding-left: 16px; }
.chev i { flex: none; width: 11px; height: 14px; opacity: 0; }
.chev i:first-child { opacity: 1; }
.chev svg { display: block; width: 100%; height: 100%; fill: currentColor; animation: none !important; stroke: none; }
.cta:hover .cta-a { width: 100%; }
.cta:hover .chev i { opacity: .25; animation: chev 1.1s linear infinite; animation-delay: calc(var(--i) * .08s); }
@keyframes chev { 0%, 100% { opacity: .22; } 35% { opacity: 1; } }
.cta-light { background: var(--white); color: var(--black); }
.cta-soft { background: var(--gray-2); color: var(--black); }
.cta:hover .cta-t { background: none; color: inherit; }
.nav .cta { height: 36px; }
.nav .cta-a { width: 36px; }
.nav .chev { padding-left: 12px; }
.nav .cta-t { padding-left: 50px; padding-right: 14px; }
.nav:not([data-on="light"]) .cta { background: var(--white); color: var(--black); }
.nav:not([data-on="light"]) .cta-t { background: none; color: inherit; }
.nav .cta:hover .cta-t { background: none; color: inherit; }
.menu-open .nav .cta { background: var(--white); color: var(--black); }
.menu-open .nav .cta-t { background: none; color: inherit; }

/* ================= V24: ПРЕЛОАДЕР ================= */

/* ================= V25: ГЛАВНЫЙ ЭКРАН ================= */
.hero { height: 640vh; }
.hero-photo { background: #0b0b0b; }
/* экран на фото без рамки; когда он оторвался от фото, появляется рамка планшета */

/* ================= V25: РАБОТЫ ================= */
.fw { position: relative; height: 420vh; background: var(--black); color: var(--white); }
.fw-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(70% 55% at 50% 108%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 72%), radial-gradient(40% 40% at 8% 6%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 70%), radial-gradient(40% 40% at 94% 12%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 70%); }
.fw-top { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; padding: 0 var(--pad); text-align: center; will-change: transform, opacity; }
.fw-top h2 { max-width: 15em; margin: 0 auto; }
.fw-top p { margin-top: 12px; color: var(--mute); font-size: var(--t-m); }
.fw-stack { position: absolute; inset: 0; }
.fc { position: absolute; left: 50%; top: 53%; width: min(1060px, 76vw); height: min(74vh, 680px); display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--white); color: var(--black); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); transform-origin: 50% 0; transform: translate(-50%, -50%) translateY(120vh); will-change: transform; cursor: none; }
.fc::after { content: ''; position: absolute; inset: 0; background: var(--black); opacity: var(--dim, 0); pointer-events: none; }
.fc-bar { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 38px; padding: 0 14px; font-size: var(--t-s); font-weight: 400; }
.fc-bar span:last-child { color: var(--m60); }
.fc-img { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.fc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.fc:hover .fc-img img { transform: scale(1.03); }
.fc-txt { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 90px 22px 20px; color: var(--white); background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent); pointer-events: none; }
.fc-txt h3 { font-size: var(--t-h); line-height: 1; letter-spacing: -0.025em; font-weight: 400; }
.fc-txt p { margin-top: 8px; max-width: 460px; font-size: var(--t-m); opacity: .85; }
.fw-count { position: absolute; left: calc(var(--pad) + 8px); bottom: 20px; display: flex; align-items: baseline; gap: 6px; font-size: var(--t-s); color: var(--mute); }
.fw-count b { font-size: var(--t-xl); letter-spacing: -0.025em; color: var(--white); font-variant-numeric: tabular-nums; }

/* ================= V25: ОСТАЛЬНЫЕ ПРОЕКТЫ ================= */

/* ================= V25: ПОДХОД НА ТЁМНОМ ================= */
.approach { background: var(--black); color: var(--white); padding-top: 12vh; padding-bottom: 12vh; }

/* ================= V25: ЭТАПЫ ================= */


/* ================= V25: ОДНА СТУДИЯ, ПОЧЕМУ С НАМИ ПРОСТО ================= */
.shift { background: var(--black); color: var(--white); }

/* ================= V25: ЧТО ВЫ ПОЛУЧАЕТЕ ================= */

/* ================= V25: ГОЛОСОВЫЕ ================= */

/* ================= V24: БИЛЕТЫ В КАЛЬКУЛЯТОРЕ ================= */
.plans { gap: 12px; padding: clamp(14px, 2vw, 28px); border-radius: 14px; background: radial-gradient(70% 90% at 50% 0, var(--blue), var(--m82) 70%, var(--m74)); }
.plan { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--d30) 28%, transparent)); transition: none; }
.plan:hover { background: none; }
.plan:hover .tk-stub { transform: rotate(1deg) translate(1px, 2px); }
.plan.on { background: none; box-shadow: none; }
.plan .tk-top, .plan .tk-stub { position: relative; display: flex; flex-direction: column; background: var(--white); color: var(--black); }
.plan .tk-top { flex: 1; gap: 6px; min-height: 170px; padding: 16px 16px 20px; border-radius: 10px 10px 0 0; -webkit-mask: radial-gradient(8px at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(8px at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(8px at 0 100%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(8px at 100% 100%, transparent 98%, #000) right / 51% 100% no-repeat; }
.plan .tk-top b { font-size: var(--t-xl); line-height: 1.05; letter-spacing: -0.025em; color: var(--blue); }
.plan .tk-top span { font-size: var(--t-s); color: var(--m52); }
.plan .tk-stub { gap: 8px; padding: 14px 16px 12px; border-top: 1.5px dashed var(--m70); border-radius: 0 0 10px 10px; transform-origin: 100% 0; transition: transform .6s var(--ease), background .4s, color .4s; -webkit-mask: radial-gradient(8px at 0 0, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(8px at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(8px at 0 0, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(8px at 100% 0, transparent 98%, #000) right / 51% 100% no-repeat; }
.plan .tk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plan .tk-row small { font-size: var(--t-s); letter-spacing: .04em; text-transform: uppercase; color: var(--mute); }
.plan .pl-price { margin: 0; font-size: var(--t-xl); }
.plan .pl-price small { display: none; }
.plan .tk-bar { display: block; height: 22px; width: 100%; color: var(--blue); opacity: .85; }
.plan .tk-bar svg { display: block; width: 100%; height: 100%; }
.plan i { display: none; }
.plan .tk-sel { display: grid; place-items: center; height: 40px; border-radius: 5px; background: var(--m92); color: var(--blue); font-size: var(--t-m); font-weight: 400; font-style: normal; letter-spacing: -0.01em; transition: background .3s, color .3s; }
.plan:hover .tk-sel { background: var(--blue); color: var(--on-blue); }
.plan.on .tk-sel { background: var(--blue); color: var(--on-blue); }
.plan.on .tk-stub { transform: rotate(2.5deg) translate(3px, 6px); }

/* ================= V24: ФАЙЛ ПРОЕКТА ================= */

/* ================= V24: ПЛАНШЕТ И ТЕЛЕФОН ================= */
@media (max-width: 1100px) {
}
@media (max-width: 760px) {
  .nav .cta { width: 34px; height: 34px; }
  .nav .cta-a { width: 34px; }
  .nav .chev { padding-left: 11px; }
  .hero { height: 600vh; }
  .nt-moon { right: 8%; top: 9%; width: 30vw; }
  .fc { width: 92vw; height: 62vh; cursor: pointer; }
  .fc-txt { flex-direction: column; align-items: flex-start; padding: 60px 14px 14px; }
  .fw-top { top: 17vh; }
  .fw-count { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan .tk-top { min-height: 0; }
}

/* ================= V25: ПОДВАЛ С НАШИМ ПОЛЕМ НОЧЬЮ ================= */
.ft-word span { color: color-mix(in srgb, var(--white) 92%, transparent); }

@media (max-width: 1100px) {
}
@media (max-width: 760px) {
  .hero { height: 600vh; }
  .fc { width: 92vw; height: 62vh; cursor: pointer; }
  .fc-txt { flex-direction: column; align-items: flex-start; padding: 60px 14px 14px; }
  .fw-count { display: none; }
}

/* ================= V26: ОДИН СТИЛЬ =================
   Чёрный фон, тёмные карточки, плоский синий как единственный акцент, без градиентов и свечений */
.block-gap { padding-top: 11vh; }
.fw-pin { background: none; }

/* ================= V28: ПРЕЛОАДЕР: тёмный градиент, глаза отдыхают ================= */
.loader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--black); color: var(--white); will-change: transform; }
.ld-logo { display: flex; align-items: center; gap: 12px; }
.ld-logo .mark { width: 30px; }
.ld-word { font-size: 24px; font-weight: 400; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.ld-word i { font-style: normal; opacity: .4; }
.ld-word i.on { opacity: 1; }

/* ================= V27: ГЛАВНЫЙ ЭКРАН ================= */
.hero { height: 480vh; }
.hero-sticky { background: var(--black); }
/* слой фото вдвое больше окна и уменьшен: при наезде картинка остаётся чёткой */
.hero-photo { inset: auto; left: 0; top: 0; width: 200%; height: 200%; transform-origin: 0 0; background: none; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--black) 82%, transparent), color-mix(in srgb, var(--black) 30%, transparent) 45%, color-mix(in srgb, var(--black) 0%, transparent) 62%), linear-gradient(to bottom, color-mix(in srgb, var(--black) 35%, transparent), transparent 20%); }
.scr { --bz: 0; position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--black); color: var(--white); container-type: inline-size; border-radius: calc(var(--bz) * 30px); box-shadow: 0 0 0 calc(var(--bz) * 18px) var(--m6), 0 0 0 calc(var(--bz) * 19px) color-mix(in srgb, var(--white) 16%, transparent); }
.scr-in { position: absolute; inset: 0; }
.scr-mark { position: absolute; top: 5cqw; left: 5cqw; width: 4.4cqw; transition: opacity .3s; }
.scr-say { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; height: 20cqw; }
.scr-h { position: absolute; left: 0; bottom: 0; max-width: 80%; font-size: 7.4cqw; line-height: 1.02; letter-spacing: -0.025em; font-weight: 400; text-wrap: balance; }
.scr-h .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.scr-h .wi { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.scr-h.on .wi { transform: none; }
.scr-h.out .wi { transform: translateY(-110%); transition-duration: .5s; }
.scr-h .wm:nth-child(2) .wi { transition-delay: .04s; } .scr-h .wm:nth-child(3) .wi { transition-delay: .08s; } .scr-h .wm:nth-child(4) .wi { transition-delay: .12s; }
.scr-h .wm:nth-child(5) .wi { transition-delay: .16s; } .scr-h .wm:nth-child(6) .wi { transition-delay: .2s; } .scr-h .wm:nth-child(7) .wi { transition-delay: .24s; }
.scr-dots { position: absolute; top: 5.6cqw; right: 5cqw; display: flex; gap: 1cqw; transition: opacity .3s; }
.scr-dots i { width: 4cqw; height: .4cqw; background: color-mix(in srgb, var(--white) 25%, transparent); transition: background .4s; }
.scr-dots i.on { background: var(--white); }
.fw { margin-top: -100vh; margin-top: -100svh; background: none; }
.fw-top > *, .fw-count { opacity: var(--in, 0); }

/* ================= V28: ОСТАЛЬНЫЕ ПРОЕКТЫ ================= */

/* ================= V27: ЭТАПЫ ================= */
.ws { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; pointer-events: none; }
.ws.on { opacity: 1; }
.ws-img { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.ws.on .ws-img { clip-path: inset(0); }
.ws-img img { display: block; width: 100%; height: auto; transition: transform 10s linear; }
.ws.on .ws-img img { transform: translateY(-14%); }
.ok { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ws h4 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 400; }
.ws-doc { height: 100%; display: flex; flex-direction: column; padding: clamp(16px, 2.2vw, 32px); background: var(--white); color: var(--black); }
.ws-doc div { position: relative; padding: 11px 30px 11px 0; border-top: 1px solid var(--m82); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .6s var(--ease); }
.ws-doc h4 + div { margin-top: 14px; }
.ws.on .ws-doc div { opacity: 1; transform: none; }
.ws-doc div:nth-of-type(2) { transition-delay: .15s; } .ws-doc div:nth-of-type(3) { transition-delay: .3s; } .ws-doc div:nth-of-type(4) { transition-delay: .45s; }
.ws-doc span { display: block; font-size: 13px; color: var(--m60); }
.ws-doc b { font-size: clamp(16px, 1.35vw, 19px); letter-spacing: -0.02em; }
.ws-doc .ok { position: absolute; right: 0; top: 16px; color: var(--deep); }
.ws-doc em { margin-top: auto; padding: 12px 14px; border-radius: 6px; background: var(--blue); color: var(--on-blue); font-style: normal; font-weight: 400; opacity: 0; transition: opacity .4s .7s; }
.ws.on .ws-doc em { opacity: 1; }
.ws-map { display: grid; place-items: center; height: 100%; padding: 12px; }
.ws-badge { position: absolute; left: 12px; top: 12px; padding: 8px 12px; border-radius: 6px; background: var(--blue); color: var(--on-blue); font-style: normal; font-size: 15px; font-weight: 400; }
.ws-note { position: absolute; left: var(--x); top: var(--y); padding: 7px 11px; border-radius: 6px; background: var(--black); color: var(--white); font-size: 14px; font-weight: 400; opacity: 0; transform: translateY(10px); transition: opacity .4s .5s, transform .6s var(--ease) .5s; }
.ws-note:nth-of-type(3) { transition-delay: .65s; } .ws-note:nth-of-type(4) { transition-delay: .8s; } .ws-note:nth-of-type(5) { transition-delay: .95s; }
.ws.on .ws-note { opacity: 1; transform: none; }
.ws-kit { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 8px; background: var(--black); opacity: 0; transform: translateY(12px); transition: opacity .4s .6s, transform .6s var(--ease) .6s; }
.ws.on .ws-kit { opacity: 1; transform: none; }
.ws-kit i { width: 30px; height: 30px; border-radius: 5px; }
.ws-kit b { padding: 0 8px; font-size: 22px; letter-spacing: -0.025em; }
.ws-sp { position: relative; display: grid; place-items: center; height: 100%; overflow: hidden; }
.ws-sp img { position: absolute; inset: 0; width: 100%; height: auto; opacity: .16; }
.ws-sp > div { position: relative; display: flex; flex-direction: column; align-items: center; width: min(84%, 420px); text-align: center; }
.ws-sp p { font-size: 17px; color: var(--soft); }
.ws-bar { width: 100%; height: 10px; margin-top: 14px; border-radius: 5px; overflow: hidden; background: var(--card-2); }
.ws-bar i { display: block; width: 100%; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; }
.ws.on .ws-bar i { transform: none; transition: transform .9s cubic-bezier(.3, 0, .2, 1); }
.ws-tick { width: 84px; height: 84px; display: grid; place-items: center; margin-top: 22px; border-radius: 50%; background: #2bd46b; color: #05240f; opacity: 0; transform: scale(.5); }
.ws-tick .ok { width: 44px; height: 44px; }
.ws.on .ws-tick { opacity: 1; transform: none; transition: opacity .25s .9s, transform .6s var(--ease) .9s; }
.ws-sp b { margin-top: 14px; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.025em; opacity: 0; }
.ws.on .ws-sp b { opacity: 1; transition: opacity .4s 1.1s; }
.ws-chat { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; height: 100%; padding: clamp(16px, 2.2vw, 30px); background: #0c1a16; }
.ws-chat h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; opacity: 0; transform: translateY(-10px); transition: opacity .4s, transform .6s var(--ease); }
.ws.on .ws-chat h4 { opacity: 1; transform: none; }
.ws-chat span { max-width: 88%; padding: 12px 14px; border-radius: 12px 12px 12px 3px; background: #292929; font-size: clamp(16px, 1.3vw, 19px); opacity: 0; transform: translateY(14px) scale(.96); transform-origin: 0 100%; transition: opacity .35s, transform .5s var(--ease); }
.ws.on .ws-chat span { opacity: 1; transform: none; }
.ws-chat span:nth-of-type(1) { transition-delay: .25s; } .ws-chat span:nth-of-type(2) { transition-delay: .6s; } .ws-chat span:nth-of-type(3) { transition-delay: .95s; }
.ws-chat em { display: flex; align-items: center; gap: 8px; align-self: flex-end; margin-top: 8px; padding: 10px 14px; border-radius: 6px; background: var(--blue); font-style: normal; font-weight: 400; opacity: 0; transition: opacity .4s 1.3s; color: var(--on-blue); }
.ws.on .ws-chat em { opacity: 1; }
.ws-dep { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: clamp(16px, 2.2vw, 32px); }
.ws-url { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 11px 14px; border-radius: 6px; background: var(--card-2); font-size: 16px; font-weight: 400; }
.ws-dep p { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.4vw, 20px); opacity: 0; transform: translateX(-12px); transition: opacity .35s, transform .5s var(--ease); }
.ws-dep .ok { flex: none; color: #2bd46b; }
.ws.on .ws-dep p { opacity: 1; transform: none; }
.ws-dep p:nth-of-type(2) { transition-delay: .3s; } .ws-dep p:nth-of-type(3) { transition-delay: .6s; } .ws-dep p:nth-of-type(4) { transition-delay: .9s; }
.ws-dep b { margin-top: 18px; font-size: clamp(30px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.025em; opacity: 0; }
.ws.on .ws-dep b { opacity: 1; transition: opacity .5s 1.25s; }
.ws-mob { display: grid; place-items: center; height: 100%; background: var(--d10); overflow: hidden; }
.ws-mob img:first-child { position: absolute; inset: 0; width: 100%; height: auto; opacity: .25; }
.ws-mob img:last-child { position: relative; height: 92%; width: auto; border-radius: 18px; box-shadow: 0 0 0 6px var(--m13), 0 0 0 7px color-mix(in srgb, var(--white) 22%, transparent); transform: translateY(60px); opacity: 0; transition: transform .9s var(--ease), opacity .4s; }
.ws.on .ws-mob img:last-child { transform: none; opacity: 1; }

/* ================= V27: ОДНА СТУДИЯ ================= */
.team { height: 60vh; height: 60svh; min-height: 440px; }
.team-title { padding: 4vh var(--pad) 0; max-width: none; text-align: left; }
.pill { padding: 12px 20px; font-size: var(--t-xl); letter-spacing: -0.02em; }
.pill.word { padding: 0; background: none; color: var(--white); font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; }

/* ================= V29: ПОЧЕМУ С НАМИ ПРОСТО ================= */

/* ================= V30: УСЛУГИ ================= */

/* ================= V28: ЧТО ГОВОРЯТ КЛИЕНТЫ ================= */

/* ================= V30: ЧТО У ВАС БУДЕТ ================= */

/* ================= V26: КАЛЬКУЛЯТОР ================= */
.plans { padding: 0; background: none; border-radius: 0; }
.plan { filter: none; }
.plan .tk-top, .plan .tk-stub { background: var(--card); color: var(--white); }
.plan .tk-top b { color: var(--white); }
.plan .tk-top span { color: var(--soft); }
.plan .tk-stub { border-top-color: color-mix(in srgb, var(--white) 22%, transparent); }
.plan .tk-bar { color: var(--white); opacity: .5; }
.plan .tk-sel { background: var(--card-2); color: var(--white); }
.plan:hover .tk-sel, .plan.on .tk-sel { background: var(--blue); color: var(--on-blue); }
.plan.on .tk-top, .plan.on .tk-stub { background: var(--blue); color: var(--on-blue); }
.plan.on .tk-top span { color: color-mix(in srgb, var(--on-blue) 72%, transparent); }
.plan.on .tk-sel { background: var(--white); color: var(--on-blue); }
.plan.on .tk-stub { transform: none; }
.plan:hover .tk-stub { transform: none; }

/* ================= V29: КАЛЬКУЛЯТОР ================= */
.plan .tk-top { min-height: 140px; }
.plan .tk-top b { font-size: var(--t-xl); }
.plan .tk-top span { font-size: var(--t-m); }
.plan .tk-sel { height: 44px; font-size: var(--t-m); }

/* ================= V29: ВОПРОСЫ ================= */

/* ================= V26: ЭКСПРЕСС-РАЗБОР ================= */

/* ================= V26: ФАЙЛ ПРОЕКТА: стеклянная папка ================= */
.file { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; visibility: hidden; color: var(--white); }
.file.on { visibility: visible; }
.fl-bg { position: absolute; inset: 0; background: color-mix(in srgb, var(--d30) 86%, transparent); opacity: 0; }
.fl-box { position: relative; width: min(720px, 100%); height: min(600px, calc(100svh - 32px)); }
.fl-sheets { position: absolute; inset: 0; clip-path: inset(-200px -200px 0 -200px); pointer-events: none; }
.fl-back { position: absolute; left: 0; right: 0; bottom: 0; top: 19%; border-radius: 0 16px 16px 16px; background: var(--card-2) center / cover no-repeat; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.fl-back::before { content: ''; position: absolute; left: 0; top: -26px; width: 36%; height: 27px; border-radius: 14px 14px 0 0; background: var(--card-2); }
.fl-back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(0, 0, 0, .55); }
.fl-sheet { position: absolute; top: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .75); will-change: transform; }
.fl-s1 { left: 7%; width: 56%; height: 58%; background: var(--d30); }
.fl-s1 img { width: 100%; height: 100%; object-fit: cover; }
.fl-s2 { right: 7%; top: 5%; width: 42%; height: 56%; padding: 16px; background: var(--white); color: var(--black); }
.fl-s2 > span { display: block; font-size: var(--t-s); line-height: 1.3; font-weight: 400; color: var(--m60); }
.fl-s2 ul { list-style: none; margin-top: 10px; }
.fl-s2 li { padding: 8px 0; border-top: 1px solid var(--m92); font-size: var(--t-m); font-weight: 400; line-height: 1.2; }
.fl-front { position: absolute; left: 0; right: 0; bottom: 0; height: 49%; display: flex; flex-direction: column; padding: 20px 22px 22px; border-radius: 16px; background: color-mix(in srgb, var(--m8) 66%, transparent); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 22%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent); transform-origin: 50% 100%; }
.fl-front h3 { font-size: var(--t-h); line-height: 1; letter-spacing: -0.025em; font-weight: 400; }
.fl-front p { margin-top: 8px; max-width: 34em; color: color-mix(in srgb, var(--white) 78%, transparent); }
.fl-front .btns { margin-top: auto; }
.fl-x { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 6px; background: color-mix(in srgb, var(--white) 14%, transparent); text-align: center; font-size: var(--t-l); line-height: 1; transition: background .3s; }
.fl-x:hover { background: var(--blue); color: var(--on-blue); }

/* ================= V26: ПОДВАЛ ================= */

.ft-in { position: relative; padding-top: calc(var(--nav-h) + 16px); }
.ft-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.ft-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: var(--gap); margin-top: 5vh; }
.ft-c { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ft-c span { margin-bottom: 6px; font-size: var(--t-s); font-weight: 400; color: color-mix(in srgb, var(--white) 66%, transparent); }
.ft-c a, .ft-c p { font-size: var(--t-m); line-height: 1.3; font-weight: 400; }
.ft-c a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.ft-c a:hover { background-size: 100% 1px; }
.ft-mid { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 4vh; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--white) 22%, transparent); font-size: var(--t-s); font-weight: 400; }
.ft-meta, .foot-langs { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }

/* ================= V26: ПЛАНШЕТ ================= */
@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: 1fr 1fr; row-gap: 22px; }
}

/* ================= V26: ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  .team { height: 62svh; min-height: 420px; }
  .pill { padding: 9px 14px; font-size: 15px; }
  .fl-box { height: calc(100svh - 32px); }
  .fl-front { height: 54%; }
  .fl-s1 { height: 46%; width: 60%; left: 3%; }
  .fl-s2 { height: 40%; width: 46%; right: 3%; padding: 12px; }
}

/* ================= V30: ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  .ft-head { flex-direction: column; align-items: flex-start; }
  .ft-grid { margin-top: 3vh; gap: 14px; }
  .ft-mid { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ================= V31: ОСТАЛЬНЫЕ ПРОЕКТЫ ================= */
.rc { padding: 8vh var(--pad) 7vh; background: var(--black); color: var(--white); }
.rc-box { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 9fr); gap: var(--gap); min-height: 520px; padding: clamp(18px, 2.2vw, 32px); border-radius: 12px; background: var(--card); overflow: hidden; }
.rc-l { display: flex; flex-direction: column; justify-content: space-between; }
.rc-nav { display: flex; gap: 6px; }
.rc-nav button { width: 44px; height: 44px; border-radius: 6px; background: color-mix(in srgb, var(--white) 10%, transparent); text-align: center; transition: background .3s; }
.rc-nav button:hover { background: var(--blue); color: var(--on-blue); }
.rc-r { position: relative; overflow: hidden; }
.rc-belt { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 12px; transition: transform .8s var(--ease); will-change: transform; }
.rc-belt.jump, .rc-belt.jump .rc-c, .rc-belt.jump .rc-info { transition: none; }
.rc-c { flex: none; width: clamp(240px, 23vw, 340px); display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--card-2); box-shadow: inset 0 0 0 2px transparent; opacity: .5; transform: scale(.94); text-align: left; cursor: pointer; transition: opacity .5s, transform .7s var(--ease), box-shadow .5s; }
.rc-c.on { opacity: 1; transform: none; box-shadow: inset 0 0 0 2px var(--blue); cursor: none; }
.rc-route { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-s); line-height: 1.2; color: var(--soft); }
.rc-route b { font-size: var(--t-xl); line-height: 1; letter-spacing: -0.025em; color: var(--white); }
.rc-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--d30); }
.rc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rc-info { display: block; padding: 12px; border-radius: 6px; background: var(--m23); text-align: center; font-size: var(--t-m); font-weight: 400; transition: background .5s; }
.rc-c.on .rc-info { background: var(--blue); color: var(--on-blue); }

/* ================= V31: ЭТАПЫ ================= */
.sg { position: relative; height: 640vh; background: var(--black); color: var(--white); }
.sg-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sg-intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 0 var(--pad); will-change: transform, opacity; }
.sg-intro > span { font-size: var(--t-l); font-weight: 400; color: var(--a80); }
.sg-intro p { max-width: 19em; font-size: var(--t-d); line-height: 1.04; letter-spacing: -0.025em; font-weight: 400; }
.sg-intro .w8 { color: var(--m28); transition: color .3s; }
.sg-intro .w8.on { color: var(--white); }
.sg-rule { position: absolute; left: var(--pad); right: var(--pad); bottom: 24px; height: 2px; background: var(--line); opacity: 0; }
.sg-rule i { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
.sg-end { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0; pointer-events: none; }
.sg-end h3 { font-size: var(--t-h); letter-spacing: -0.025em; font-weight: 400; }
.sg-end p { font-size: var(--t-m); color: var(--soft); }
.sg-end .cta { margin-top: 12px; }
.ws h4 { font-size: clamp(20px, 2vw, 30px); }
.ws-doc, .ws-an, .ws-tx, .ws-chat, .ws-dep { padding: clamp(14px, 1.8vw, 24px); }
.ws-doc div { padding: 8px 28px 8px 0; }
.ws-doc b { font-size: clamp(15px, 1.2vw, 17px); }
.ws-dep p { padding: 8px 0; font-size: clamp(15px, 1.2vw, 18px); }
.ws-dep b { margin-top: 12px; font-size: clamp(26px, 2.8vw, 42px); }
.ws-url { margin-bottom: 8px; padding: 9px 12px; }

/* ================= V31: ПОЧЕМУ С НАМИ ПРОСТО ================= */

/* ================= V31: УСЛУГИ ================= */

/* ================= V31: ЧТО У ВАС БУДЕТ ================= */

/* ================= V31: ЧТО ГОВОРЯТ КЛИЕНТЫ ================= */
.vo-say span { color: var(--a80); }
.vo-msg { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--card); }
.vo-play { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--on-blue); }
.vo-play i { width: 0; height: 0; margin-left: 3px; border-left: 13px solid var(--on-blue); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.vo-play.play i { width: 13px; height: 15px; margin: 0; border: 0; border-left: 4px solid var(--on-blue); border-right: 4px solid var(--on-blue); }
.vo-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 44px; min-width: 0; }
.vo-wave i { flex: 1; min-width: 2px; border-radius: 1px; background: var(--m33); transition: background .15s; }
.vo-wave i.on { background: var(--white); }
.vo-time { flex: none; font-size: var(--t-s); color: var(--soft); font-variant-numeric: tabular-nums; }

/* ================= V31: ПОДВАЛ: ночь без синего, широкий луч фонарика ================= */

/* ================= V31: ПЛАНШЕТ ================= */
@media (max-width: 1100px) {
  .rc-box { grid-template-columns: 1fr; }
  .rc-r { height: 470px; }
  .rc-l { flex-direction: row; align-items: center; }
  .rc-c { width: 74vw; }
}

/* ================= V31: ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  .rc-c { width: 76vw; }
}

/* ================= V32: СТОИМОСТЬ, ВОПРОСЫ, РАЗБОР КАК БЫЛИ ================= */
.chip { display: inline-flex; padding: 5px 10px; border-radius: 4px; background: var(--gray); font-size: var(--t-s); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.calc { padding-top: 18vh; padding-bottom: 10vh; background: var(--white); }
.calc-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; margin-bottom: 64px; }
.calc-head p { max-width: 440px; color: var(--m52); }
.calc-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.calc-l { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: 14px; }
.calc-l .plans, .calc-l .addons { margin-bottom: 28px; }
.addons { border-bottom: 1px solid var(--m92); }
.addon { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; width: 100%; padding: 18px 0; border-top: 1px solid var(--m92); }
.addon b { display: block; font-size: var(--t-m); letter-spacing: -0.02em; }
.addon small { display: block; margin-top: 2px; font-size: var(--t-s); color: var(--mute); }
.addon em { font-style: normal; font-weight: 400; }
.sw { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--m82); transition: background .3s; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transition: transform .35s var(--ease); }
.addon.on .sw { background: var(--blue); color: var(--on-blue); }
.addon.on .sw::after { transform: translateX(16px); }
.calc-custom { font-size: var(--t-m); color: var(--m52); }
.calc-custom .link { color: var(--black); }
.sum { grid-column: 9 / -1; position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; min-height: 520px; padding: 24px; border-radius: 12px; background: var(--black); box-shadow: inset 0 0 100px color-mix(in srgb, var(--blue) 45%, transparent); }
.sum-plan { margin-top: 18px; padding-bottom: 18px; }
.sum-plan b { display: block; font-size: var(--t-xl); letter-spacing: -0.025em; }
.sum-plan span { font-size: var(--t-s); color: var(--mute); }
.sum-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid color-mix(in srgb, var(--white) 12%, transparent); font-size: var(--t-s); }
.sum-lines div span:first-child { color: color-mix(in srgb, var(--white) 70%, transparent); }
.sum-lines div.add { animation: add .5s var(--ease); }
.sum-foot { margin-top: auto; padding-top: 28px; }
.sum-total { margin-top: 6px; font-size: var(--t-d); line-height: 1; letter-spacing: -0.025em; font-weight: 400; font-variant-numeric: tabular-nums; }
.sum-total small { font-size: .3em; letter-spacing: -0.01em; color: color-mix(in srgb, var(--white) 70%, transparent); }
.sum-note { margin: 10px 0 20px; font-size: var(--t-s); color: color-mix(in srgb, var(--white) 60%, transparent); }
.sum-cta .cta-t { flex: 1; }
.sum-cta { display: flex; }
.calc-head { align-items: flex-start; text-align: left; }
.calc { padding-top: 9vh; padding-bottom: 9vh; background: var(--black); color: var(--white); }
.calc-head { margin-bottom: 40px; }
.calc-head p, .calc-custom { color: var(--soft); }
.calc-custom .link { color: var(--white); }
.chip { background: var(--card-2); }
.addons, .addon { border-color: var(--line); }
.sw { background: var(--m28); }
.sum { background: var(--card); box-shadow: none; }
.calc { padding-top: 7vh; }
.calc-l { gap: 10px; }
.calc-l .t-label, .sum .t-label { font-size: var(--t-m); color: var(--white); }
.calc-l .plans, .calc-l .addons { margin-bottom: 18px; }
.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border: 0; }
.addon { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 0; border-radius: 10px; background: var(--card); text-align: left; transition: box-shadow .3s; }
.addon:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 24%, transparent); }
.addon.on { box-shadow: inset 0 0 0 2px var(--blue); }
.addon b { padding-right: 46px; font-size: var(--t-l); }
.addon small { font-size: var(--t-m); line-height: 1.3; color: var(--soft); }
.addon em { margin-top: auto; font-size: var(--t-l); }
.addon .sw { position: absolute; right: 14px; top: 14px; }
.calc-custom { font-size: var(--t-m); }
.sum { padding: 20px; }
.sum-plan b { font-size: var(--t-xl); }
.sum-plan span { font-size: var(--t-m); color: var(--soft); }
.sum-lines div { font-size: var(--t-m); }
.sum-lines div span:first-child { color: var(--soft); }
.sum-note { color: var(--soft); }
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-top: 8vh; padding-bottom: 8vh; background: var(--black); color: var(--white); }
.faq > h2 { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; }
.faq-card { grid-column: 5 / -1; padding: 12px; border-radius: 12px; background: var(--card); }
.faq-tabs, .au-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--card-2); }
.faq-tabs button, .au-tabs button { flex: 1; height: 44px; padding: 0 12px; border-radius: 6px; text-align: center; font-size: var(--t-m); font-weight: 400; white-space: nowrap; color: color-mix(in srgb, var(--white) 72%, transparent); transition: background .3s, color .3s; }
.faq-tabs button:hover { color: var(--white); }
.faq-tabs button.on { background: var(--white); color: var(--black); }
.faq-list { margin-top: 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item.on { background: color-mix(in srgb, var(--white) 5%, transparent); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: 100%; padding: 20px 18px; font-size: var(--t-l); line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; text-align: left; }
.faq-q i { flex: none; width: 10px; height: 10px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--ease), margin .4s; }
.faq-item.on .faq-q i { margin-top: 4px; transform: rotate(-135deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { max-width: 40em; padding: 0 18px 22px; font-size: var(--t-l); line-height: 1.45; color: color-mix(in srgb, var(--white) 82%, transparent); }
.faq-item.on .faq-a { grid-template-rows: 1fr; }
.faq-ask { display: grid; place-items: center; min-height: 52px; padding: 8px 14px; text-align: center; margin-top: 10px; border-radius: 8px; background: var(--blue); font-size: var(--t-m); font-weight: 400; transition: opacity .3s; color: var(--on-blue); }
.faq-ask:hover { opacity: .85; }
.au { padding-top: 3vh; padding-bottom: 11vh; background: var(--black); color: var(--white); }
.au-card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: clamp(18px, 2.4vw, 36px); border-radius: 12px; background: var(--card-2); }
.au-l { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; }
.au-tabs { background: rgba(0, 0, 0, .22); }
.au-tabs button { color: color-mix(in srgb, var(--white) 80%, transparent); }
.au-tabs button.on { background: var(--white); color: var(--on-blue); }
.au-l h2 { margin-top: 4px; }
.au-ask { margin-top: 26px; margin-bottom: 8px; font-size: var(--t-m); font-weight: 400; }
.au-l > p { max-width: 34em; margin-top: 14px; font-size: var(--fs-lead); line-height: 1.4; }
.au-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 640px; margin-top: 14px; }
.au-form input { height: 48px; padding: 0 14px; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--white) 16%, transparent); color: var(--white); font-size: var(--t-m); outline: none; transition: background .3s; }
.au-form input::placeholder { color: color-mix(in srgb, var(--white) 75%, transparent); }
.au-form input:focus { background: color-mix(in srgb, var(--white) 26%, transparent); }
.au-form .cta { grid-column: 1 / -1; display: flex; height: 56px; font-size: var(--t-m); font-weight: 400; }
.au-form .cta-t { flex: 1; }
.au-form .cta-a { width: 56px; background: var(--black); }
.au-form .cta-t { padding-left: 72px; }
.au-r { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 8px; }
.au-box { flex: 1; padding: 18px; border-radius: 8px; background: rgba(0, 0, 0, .2); }
.au-box b { font-size: var(--t-m); }
.au-box ul, .au-box ol { list-style: none; margin-top: 10px; }
.au-box li { padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--white) 20%, transparent); font-size: var(--t-m); line-height: 1.3; }
@media (max-width: 1100px) {
  .calc-l, .sum { grid-column: 1 / -1; }
  .sum { position: relative; top: 0; min-height: 0; }
  .faq > h2, .faq-card { grid-column: 1 / -1; position: static; }
  .faq-card { margin-top: 20px; }
  .addons { grid-template-columns: 1fr; }
  .faq > h2, .faq-card { grid-column: 1 / -1; }
  .faq-card { margin-top: 24px; }
  .au-l, .au-r { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .calc { padding-top: 12vh; }
  .calc-head { margin-bottom: 36px; }
  .addon { gap: 14px; }
  .sum { padding: 18px; }
  .faq-tabs { flex-wrap: wrap; }
  .faq-tabs button { flex: 1 1 45%; padding: 0 6px; font-size: 15px; }
  .faq-q { padding: 16px 14px; }
  .faq-a p { padding: 0 14px 18px; font-size: 16px; }
  .au-form { grid-template-columns: 1fr; }
}

/* ================= V32: РАЗБОР НА ТЁМНОМ, КНОПКА ЗАМЕТНАЯ ================= */
.calc-head { align-items: flex-start; text-align: left; margin-bottom: 26px; }
.au-card { background: var(--card); }
.au-box { background: var(--card-2); }
.au-box li { border-top-color: var(--line); }
.au-tabs { background: var(--card-2); }
.au-tabs button.on { background: var(--white); color: var(--black); }
.au-form input { background: var(--card-2); }
.au-form .cta { background: var(--blue); color: var(--on-blue); }
.au-form .cta-a { background: rgba(0, 0, 0, .26); }

/* ================= V32: СЦЕНЫ ЭТАПОВ ================= */
.ws-dep .ws-url { font-size: 15px; }
.zm { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--m4); }
.zm-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 14px; font-weight: 400; }
.zm-top b { margin-left: auto; color: var(--soft); font-variant-numeric: tabular-nums; }
.zm-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 8px; }
.zm-t { position: relative; display: grid; place-items: center; border-radius: 8px; background: var(--m16); }
.zm-t span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 50%; background: var(--m25); font-size: 24px; font-weight: 400; }
.zm-t.talk { box-shadow: inset 0 0 0 2px #2bd46b; }
.zm-t.talk span { background: var(--blue); color: var(--on-blue); }
.zm-t small { position: absolute; left: 8px; bottom: 7px; padding: 3px 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); font-size: 12px; }
.zm-t u { position: absolute; right: 9px; top: 9px; display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.zm-t u i { width: 3px; height: 100%; border-radius: 1px; background: #2bd46b; animation: zm 1s ease-in-out infinite alternate; }
.zm-t u i:nth-child(2) { animation-delay: -.3s; } .zm-t u i:nth-child(3) { animation-delay: -.6s; } .zm-t u i:nth-child(4) { animation-delay: -.15s; }
@keyframes zm { from { height: 25%; } to { height: 100%; } }
.zm-notes { position: absolute; right: 16px; top: 42px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.zm-notes em { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: var(--white); color: var(--black); font-style: normal; font-size: 14px; font-weight: 400; opacity: 0; transform: translateX(14px); transition: opacity .35s, transform .5s var(--ease); }
.zm-notes .ok { width: 15px; height: 15px; color: var(--deep); }
.ws.on .zm-notes em { opacity: 1; transform: none; }
.zm-notes em:nth-child(1) { transition-delay: .5s; } .zm-notes em:nth-child(2) { transition-delay: 1s; } .zm-notes em:nth-child(3) { transition-delay: 1.5s; }
.zm-bar { flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; height: 46px; }
.zm-bar i { width: 30px; height: 30px; border-radius: 50%; background: var(--m25); }
.zm-bar b { width: 46px; height: 30px; border-radius: 15px; background: #e5484d; }
.xl { display: flex; flex-direction: column; height: 100%; background: var(--white); color: var(--m8); font-size: clamp(11px, 1vw, 14px); }
.xl-top { flex: none; padding: 7px 12px; background: #107c41; color: var(--white); font-size: 13px; font-weight: 400; }
.xl-fx { flex: none; display: flex; align-items: center; gap: 10px; padding: 5px 12px; border-bottom: 1px solid var(--m82); font-size: 13px; color: var(--m52); }
.xl-fx i { font-style: normal; font-weight: 400; color: #107c41; }
.xl table { flex: 1; width: 100%; border-collapse: collapse; table-layout: fixed; }
.xl th, .xl td { border: 1px solid var(--m92); padding: 0 8px; text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden; }
.xl th { background: var(--white); color: var(--m60); text-align: center; font-size: 12px; }
.xl tr > th:first-child { width: 30px; }
.xl .hd th { height: 24px; }
.xl tr:nth-child(2) td { font-weight: 400; background: var(--white); }
.xl .me td { box-shadow: inset 0 1px 0 #107c41, inset 0 -1px 0 #107c41; font-weight: 400; }
.xl .bad { background: #fde7e7; color: #b42318; }
.xl .good { background: #e6f5ec; color: #107c41; }
.xl .bl { display: inline-block; filter: blur(4px); user-select: none; }
.st { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: clamp(12px, 1.6vw, 22px); background: var(--m4); }
.st > b { margin-top: 6px; font-size: 15px; font-weight: 400; }
.st > u { width: 1px; height: 14px; margin-top: 6px; background: color-mix(in srgb, var(--white) 26%, transparent); }
.st-p { display: flex; flex-direction: column; gap: 4px; padding: 7px; border-radius: 6px; background: var(--m20); }
.st-p i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--white) 20%, transparent); }
.st-p i:first-child { flex: 2; }
.st-p.blue { background: var(--blue); color: var(--on-blue); }
.st-p.blue i { background: color-mix(in srgb, var(--white) 50%, transparent); }
.st-main { width: 22%; aspect-ratio: 4 / 3; background: var(--white); }
.st-main i { background: var(--m82); }
.st-main i:first-child { background: var(--blue); color: var(--on-blue); }
.st-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--white) 26%, transparent); }
.st-row > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .6s var(--ease); }
.ws.on .st-row > div { opacity: 1; transform: none; }
.st-row > div:nth-child(2) { transition-delay: .1s; } .st-row > div:nth-child(3) { transition-delay: .2s; } .st-row > div:nth-child(4) { transition-delay: .3s; } .st-row > div:nth-child(5) { transition-delay: .4s; }
.st-row .st-p { width: 100%; aspect-ratio: 3 / 4; }
.st-row span { font-size: clamp(11px, 1vw, 14px); font-weight: 400; white-space: nowrap; }
.ed { display: grid; grid-template-columns: 1fr 34%; gap: 12px; height: 100%; padding: clamp(10px, 1.3vw, 18px); background: var(--m92); color: var(--black); }
.ed-doc { display: flex; flex-direction: column; justify-content: center; padding: clamp(12px, 1.6vw, 22px); border-radius: 4px; background: var(--white); }
.ed-doc small { font-size: 12px; color: var(--m70); }
.ed-doc .old { margin-top: 8px; font-size: clamp(14px, 1.3vw, 19px); color: #b42318; text-decoration: line-through; }
.ed-doc .new { position: relative; margin-top: 6px; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 400; }
.ed-doc .new u { display: inline-block; width: 2px; height: .9em; margin-left: 3px; vertical-align: -.08em; background: var(--deep); animation: blink 1s steps(2) infinite; color: var(--on-blue); }
@keyframes blink { 50% { opacity: 0; } }
.ed-doc .q { margin-top: 14px; font-size: clamp(14px, 1.2vw, 17px); font-weight: 400; }
.ed-doc .a { margin-top: 2px; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.3; color: var(--m42); }
.ed aside { align-self: center; padding: 10px; border-radius: 6px; background: #fff3c4; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.25; opacity: 0; transform: translateX(12px); transition: opacity .4s .6s, transform .6s var(--ease) .6s; }
.ws.on .ed aside { opacity: 1; transform: none; }
.ed aside b { display: block; margin-bottom: 3px; }
.fin { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.fin .ws-dep { padding: clamp(12px, 1.5vw, 20px); }
.fin .ws-chat { padding: clamp(12px, 1.5vw, 20px); }
.fin .ws-chat h4 { font-size: clamp(16px, 1.5vw, 22px); }
.fin .ws-chat span { font-size: clamp(14px, 1.1vw, 16px); padding: 9px 11px; }
.fin .ws-chat em { font-size: clamp(13px, 1vw, 15px); padding: 8px 10px; }
.fin .ws-dep p { font-size: clamp(14px, 1.1vw, 16px); }
@media (max-width: 760px) {
  .ed { grid-template-columns: 1fr; }
  .ed aside { display: none; }
  .xl th:nth-child(5), .xl td:nth-child(5), .xl th:nth-child(6), .xl td:nth-child(6) { display: none; }
  .st-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fin .ws-dep p { padding: 4px 0; }
  .zm-t span { width: 54px; height: 54px; font-size: 18px; }
}

/* ================= V33: ОСЬ НА ЭКРАНЕ ПЛАНШЕТА ================= */

/* ================= V33: ПРЕЛОАДЕР, СЕТКА КВАДРАТОВ ================= */
.ld-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-logo { position: relative; }

/* ================= V33: ЭТАПЫ, СЦЕНА И ОГРОМНАЯ ЦИФРА ================= */
.sg-stage { position: absolute; left: var(--pad); right: var(--pad); top: 50%; translate: 0 -50%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); opacity: 0; will-change: transform, opacity; }
.sg-frame { position: relative; aspect-ratio: 16 / 10; max-height: calc(100vh - var(--nav-h) - 96px); }
.sg-art { position: absolute; inset: 0; overflow: hidden; background: var(--d30); }
.sg-side { display: flex; flex-direction: column; min-width: 0; padding-left: clamp(16px, 2.4vw, 40px); border-left: 1px solid var(--line); }
.sg-num { display: flex; align-items: flex-start; gap: 12px; }
.sg-roll { height: 1em; overflow: hidden; font-size: clamp(88px, 13vw, 210px); line-height: 1; letter-spacing: -0.025em; font-weight: 400; font-variant-numeric: tabular-nums; }
.sg-nums { transition: transform .8s var(--ease); }
.sg-nums b { display: block; height: 1em; font-weight: inherit; }
.sg-of { margin-top: 12px; font-size: var(--t-m); color: var(--soft); font-variant-numeric: tabular-nums; }
.sg-txts { position: relative; flex: 1; min-height: 120px; }
.sg-tx { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; transform: translateY(18px); transition: opacity .3s, transform .7s var(--ease); }
.sg-tx.on { opacity: 1; transform: none; transition-delay: .12s; }
.sg-tx h3 { font-size: var(--t-h); line-height: 1.06; letter-spacing: -0.025em; font-weight: 400; }
.sg-tx p { max-width: 24em; margin-top: 10px; font-size: var(--t-l); line-height: 1.35; color: var(--soft); }

/* ================= V33: ПОДВАЛ, ГРАДИЕНТ И ЧЕРТЁЖ ================= */
.ft-word { --a: -999px; --b: -999px; --c: 0px; --d: 0px; }
.ft-box { position: absolute; left: 0; top: 0; pointer-events: none; border: 1px solid color-mix(in srgb, var(--white) 30%, transparent); background: linear-gradient(color-mix(in srgb, var(--white) 10%, transparent) 1px, transparent 1px) 0 0 / 100% 25%, linear-gradient(90deg, color-mix(in srgb, var(--white) 10%, transparent) 1px, transparent 1px) 0 0 / 25% 100%; }

/* ================= V33: ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  .sg-stage { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sg-frame { order: 2; aspect-ratio: 4 / 5; max-height: 56vh; width: 100%; }
  .sg-side { order: 1; flex-direction: row; gap: 14px; min-height: 124px; padding-left: 0; border-left: 0; }
  .sg-roll { font-size: 68px; }
  .sg-of { display: none; }
  .sg-tx { top: 0; bottom: auto; }
  .sg-tx h3 { font-size: 26px; }
  .sg-tx p { margin-top: 6px; font-size: 15px; }
}

/* ================= V34: ПОДВАЛ, НАШЕ ПОЛЕ НОЧЬЮ И ЧЕРТЁЖ ================= */
.ft { background: var(--d30); color: var(--white); }
.ft-bg, .ft-lit { position: absolute; left: 0; top: -30%; width: 100%; height: 130%; object-fit: cover; object-position: 50% 100%; }
.ft-bg { filter: brightness(.72); }
.ft-lit { filter: brightness(1.5); -webkit-mask: radial-gradient(circle 48vw at var(--x, 50%) var(--y, 60%), #000 26%, transparent 100%); mask: radial-gradient(circle 48vw at var(--x, 50%) var(--y, 60%), #000 26%, transparent 100%); }
.ft-word span { color: transparent; background: linear-gradient(180deg, var(--white) 22%, color-mix(in srgb, var(--white) 62%, transparent) 62%, color-mix(in srgb, var(--white) 14%, transparent) 100%); -webkit-background-clip: text; background-clip: text; transform: translateY(var(--up, 30%)); clip-path: polygon(evenodd, 0 -20%, 100% -20%, 100% 120%, 0 120%, 0 -20%, var(--a) var(--c), var(--b) var(--c), var(--b) var(--d), var(--a) var(--d), var(--a) var(--c)); }
.ft-word .ft-wire { position: absolute; left: var(--pad); top: 0; margin: 0; background: none; -webkit-text-stroke: 1px color-mix(in srgb, var(--white) 80%, transparent); clip-path: polygon(var(--a) var(--c), var(--b) var(--c), var(--b) var(--d), var(--a) var(--d)); }

/* ================= V35: ЕДИНЫЙ СТИЛЬ =================
   Один вес, шесть размеров, плотность букв -2,5%, серые абзацы, тонкие линии между блоками. Всё тёмное */
.t-display, .t-h2, .t-h3 { line-height: 1.12; letter-spacing: -0.025em; }
.team, .svc, .calc, .vo, .faq, .au { border-top: 1px solid var(--line); }

/* ================= V35: ПРЕЛОАДЕР, ПЛАНШЕТ ================= */
.ld-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-logo { position: relative; }
.scr-axis { position: absolute; inset: 0; z-index: 2; background: var(--blue); color: var(--black); clip-path: inset(0 100% 0 0); visibility: hidden; pointer-events: none; will-change: clip-path; }
.scr-axis .scr-dots i { background: color-mix(in srgb, var(--black) 30%, transparent); }
.scr-axis .scr-dots i.on { background: var(--black); }

/* ================= V35: ЭТАПЫ НА ТЁМНОМ ================= */

/* ================= V35: РАБОТЫ И ФАЙЛ ================= */
.fc { background: var(--card); color: var(--white); }
.fc-bar span:last-child { color: var(--soft); }
.fl-s1 { height: 96%; }
.fl-s1 img { object-position: 50% 0; }
.fl-s2 { height: 92%; }
.fl-front { background: color-mix(in srgb, var(--m8) 95%, transparent); }

/* ================= V35: ОДНА СТУДИЯ ================= */
.team { padding-top: var(--sec); }
.team-title { padding: 0 var(--pad); }

/* ================= V35: СТОИМОСТЬ, ВОПРОСЫ, РАЗБОР ================= */
.calc { padding-top: var(--sec); padding-bottom: var(--sec); background: var(--black); color: var(--white); }
.plan .tk-top { min-height: 118px; }
.plan .tk-bar { height: 16px; opacity: .35; }
.calc-head { align-items: flex-start; text-align: left; margin-bottom: 36px; }
.faq { padding-top: var(--sec); padding-bottom: var(--sec); }
.au { padding-top: var(--sec); padding-bottom: var(--sec); }
.au-card { padding: 0; border-radius: 0; background: none; }
.au-l > p { color: var(--soft); }
.au-box { padding: 0; border-radius: 0; background: none; }

/* ================= V35: ПОДВАЛ ================= */
.ft-box { z-index: 1; }

.svc { padding: var(--sec) var(--pad); }

/* ================= V35: ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  .why { height: 380vh; }
  .why-say { width: 92vw; }
  .why-c { width: 58vw; aspect-ratio: 4 / 5; }
}

/* ================= V36: ОДНА ОСЬ НА ВСЮ СТРАНИЦУ =================
   Заголовок блока занимает колонки 1–4, содержимое всегда начинается с пятой */
.svc, .vo, .faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.team, .svc, .calc, .vo, .faq, .au { border-top: 1px solid var(--line); }

/* ================= V36: ОДНА СТУДИЯ ================= */
.team { height: 46vh; height: 46svh; min-height: 360px; }

/* ================= V36: ПОЧЕМУ С НАМИ ПРОСТО ================= */
.why { height: 380vh; }
.why-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.why-say { position: absolute; left: 50%; top: 50%; width: min(92vw, 15em); translate: -50% -50%; text-align: center; font-size: var(--t-d); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; pointer-events: none; }
.why-w { display: inline-block; white-space: nowrap; }
.why-w i { display: inline-block; font-style: normal; will-change: transform; }
.why-c { position: absolute; left: 50%; top: 52%; display: flex; flex-direction: column; width: clamp(200px, 18vw, 270px); aspect-ratio: 3 / 4.2; padding: 18px; border-radius: 0 10px 10px 10px; background: var(--card-2); opacity: 0; will-change: transform; }
.why-c::before { content: attr(data-n); position: absolute; left: 0; bottom: calc(100% - 1px); width: 42%; height: 28px; padding: 7px 14px 0; border-radius: 10px 10px 0 0; background: var(--card-2); font-size: var(--t-s); line-height: 1.2; color: var(--soft); }
.why-c h3 { font-size: clamp(20px, 1.7vw, 26px); line-height: 1.14; letter-spacing: -0.02em; font-weight: 400; }
.why-c p { margin-top: auto; font-size: var(--t-s); line-height: 1.35; color: var(--soft); }

/* ================= V38: ЧТО МЫ ДЕЛАЕМ: БОЛЬШОЙ СПИСОК И ФОТО ================= */
.sv-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 0 0 20px; }
.sv-list { grid-column: 1 / span 7; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line); }
.sv-list li { border-top: 1px solid var(--line); }
.sv-list button { display: block; width: 100%; padding: 10px 0 12px; text-align: left; font-size: var(--t-h); line-height: 1.12; letter-spacing: -0.025em; color: var(--m52); transition: color .25s; }
.sv-list button.on { color: var(--white); }
.sv-side { grid-column: 8 / -1; min-width: 0; }
.sv-fig { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 4px; background: var(--card); }
.sv-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.sv-fig img.on { opacity: 1; }
.sv-cap { max-width: 30em; min-height: 2.8em; margin-top: 12px; font-size: var(--t-m); line-height: 1.4; color: var(--soft); }

/* ================= V38: ЧТО У ВАС БУДЕТ: ФОТОГРАФИЯ НА ВЕСЬ ЭКРАН ================= */
.gt { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 100vh; min-height: 100svh; padding: var(--sec) var(--pad) var(--pad); color: var(--white); background: var(--d30) url('assets/hero-night.jpg') 50% 60% / cover no-repeat; }
.gt-top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.gt-say { max-width: 21em; font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.025em; }
.gt-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.gt-c { padding: 12px 14px 0 0; }
.gt-c + .gt-c { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--white) 30%, transparent); }
.gt-c h3 { font-size: var(--t-xl); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; }
.gt-c p { margin-top: 6px; font-size: var(--t-m); line-height: 1.35; color: color-mix(in srgb, var(--white) 78%, transparent); }

/* ================= V36: ЧТО ГОВОРЯТ КЛИЕНТЫ ================= */
.vo { padding-top: var(--sec); padding-bottom: var(--sec); background: var(--black); color: var(--white); }
.vo-l { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 20px; padding-right: var(--gap); }
.vo-pic { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--card); }
.vo-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-r { grid-column: 5 / -1; display: flex; flex-direction: column; min-width: 0; }
.vo-say { min-height: 2.3em; font-size: var(--t-h); line-height: 1.12; letter-spacing: -0.025em; font-weight: 400; }
.vo-who { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.vo-who b { font-size: var(--t-l); font-weight: 400; }
.vo-who span { font-size: var(--t-m); color: var(--soft); }
.vo-msg { margin-top: 16px; padding: 10px 12px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); background: none; }
.vo-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: auto; padding-top: 16px; }
.vo-thumbs button { display: block; overflow: hidden; aspect-ratio: 4 / 3; padding: 0; border-radius: 4px; opacity: .45; box-shadow: 0 0 0 0 var(--blue); transition: opacity .3s, box-shadow .3s; }
.vo-thumbs button:hover { opacity: .8; }
.vo-thumbs button.on { opacity: 1; box-shadow: 0 0 0 2px var(--blue); }
.vo-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vo-note { margin-top: 10px; font-size: var(--t-s); color: var(--soft); }

/* ================= V36: ПЛАНШЕТ И ТЕЛЕФОН ================= */
@media (max-width: 900px) {
  .svc, .vo { display: block; }
  .sv-side { margin-top: 16px; }
  .vo-l { margin-bottom: 16px; padding-right: 0; }
}
@media (max-width: 760px) {
  .svc { display: flex; flex-direction: column; }
  .sv-side { order: -1; margin: 0 0 12px; }
  .sv-head { order: -2; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
  .gt { background-position: 42% 60%; }
  .gt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-c, .gt-c + .gt-c { padding: 10px 10px 10px 0; border-left: 0; }
  .why-c { width: 58vw; aspect-ratio: 3 / 4.4; filter: drop-shadow(-4px 0 10px rgba(0, 0, 0, .6)); }
  .vo-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; }
  .plan { display: flex; flex-direction: column; align-items: stretch; }
  .plan .tk-top { min-height: 0; }
}

/* ================= V37: ОСТАЛЬНЫЕ ПРОЕКТЫ КАК БЫЛО ================= */
.rc-foot { display: flex; justify-content: center; padding-top: 26px; }
.rc { padding-top: var(--sec); padding-bottom: var(--sec); }

/* ================= V37: ЭТАПЫ: ОДИН АКЦЕНТ НА ШАГ =================
   Сцены проще, внутри них ничего не выезжает, смена только мягким проявлением */
.sg-frame { overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.ws { transition: opacity .35s; }
.ws-img { clip-path: none; }
.ws-img img { transform: none !important; }
.zm-t span { width: clamp(84px, 9vw, 130px); height: clamp(84px, 9vw, 130px); font-size: var(--t-xl); }
.xl-top { padding: 10px 16px; font-size: var(--t-m); }
.xl { font-size: var(--t-l); }
.xl tr > th:first-child { width: auto; }
.xl th, .xl td { padding: 0 16px; font-size: var(--t-l); }
.xl tr:first-child td { color: var(--m60); font-size: var(--t-m); }
.st { gap: 4px; }
.st-main { width: 26%; }
.st > b { font-size: var(--t-m); }
.st-row { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 70%; gap: 16px; }
.st-row span { font-size: var(--t-m); }
.ed { display: block; padding: 0; background: var(--white); }
.ed-doc { height: 100%; padding: clamp(20px, 3vw, 44px); border-radius: 0; }
.ed-doc .new { margin: 0; font-size: var(--t-h); line-height: 1.12; }
.ed-doc .q { margin-top: 22px; font-size: var(--t-l); }
.ed-doc .a { margin-top: 6px; font-size: var(--t-m); line-height: 1.4; }
.ws-sp > div { width: auto; gap: 18px; }
.ws-tick { width: clamp(96px, 10vw, 140px); height: clamp(96px, 10vw, 140px); margin: 0; opacity: 1; transform: none; }
.ws-tick .ok { width: 55%; height: 55%; }
.ws-sp b { margin: 0; font-size: var(--t-h); opacity: 1; }
.ws-mob img { position: relative; inset: auto; width: auto; height: 92%; opacity: 1; transform: none; border-radius: 18px; box-shadow: 0 0 0 6px var(--m13), 0 0 0 7px color-mix(in srgb, var(--white) 22%, transparent); }
.ws-chat { align-items: stretch; justify-content: center; padding: clamp(20px, 3vw, 44px); background: var(--m4); }
.ws-chat h4 { font-size: var(--t-h); opacity: 1; transform: none; }
.ws-chat span { align-self: flex-start; font-size: var(--t-l); opacity: 1; transform: none; }
.ws-chat em { font-size: var(--t-m); opacity: 1; }

/* ================= V37: ТЕЛЕФОН ================= */
@media (max-width: 760px) {
  .st-row { width: 100%; }
  .ws-sp b { font-size: 28px; text-align: center; }
  .ed-doc .new { font-size: 26px; }
}

/* ================= V39: меню снизу, услуги листами, цифры, отзывы ================= */
:root { --mw: min(520px, 42vw); --e: cubic-bezier(.76, 0, .24, 1); }
main { z-index: 2; transition: transform .85s var(--e), clip-path .85s var(--e); }
.cta-light .cta-a, .nav:not([data-on="light"]) .cta-a { background: var(--black); color: var(--white); }
.cta-a { color: var(--on-blue); }

/* шапка сверху: название и кнопка, навигация теперь снизу */
.nav { transition: color .4s, opacity .4s; }
.nav-menu, .nav-mark-link, .nav-links { display: none !important; }

/* кнопка меню внизу экрана */
.dock { position: fixed; z-index: 96; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 4px; transform: translateX(-50%); transition: left .85s var(--e); }
.dock-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--black); color: var(--white); box-shadow: 0 0 0 1px var(--line); transition: opacity .3s, transform .5s var(--e); }
.dock-mark .mark { width: 22px; }
.dock-btn { display: flex; align-items: center; justify-content: space-between; width: 208px; height: 46px; padding: 0 16px 0 20px; border-radius: 23px; background: var(--blue); color: var(--on-blue); font-size: var(--t-m); transition: background .4s, color .4s; }
.dock-t { display: block; height: 1.4em; overflow: hidden; line-height: 1.4; }
.dock-t span { display: block; transition: transform .5s var(--e); }
.menu-open .dock-t span { transform: translateY(-100%); }
.dock-ic { position: relative; width: 20px; height: 8px; }
.dock-ic i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .45s var(--e), top .45s var(--e); }
.dock-ic i:first-child { top: 0; } .dock-ic i:last-child { top: 6.5px; }
.menu-open .dock-ic i:first-child { top: 3.25px; transform: rotate(45deg); }
.menu-open .dock-ic i:last-child { top: 3.25px; transform: rotate(-45deg); }
.dock[data-on="light"] .dock-btn { background: var(--on-blue); color: var(--white); }
.menu-open .dock-mark { opacity: 0; pointer-events: none; transform: scale(.6); }

/* нижний край экрана постепенно размывается */
.pblur { position: fixed; z-index: 94; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; display: none; }
.nav.compact ~ .pblur { display: block; }
.nav[data-on="blue"] ~ .pblur, .menu-open .nav.compact ~ .pblur { display: none; }
.pblur i { position: absolute; inset: 0; -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); -webkit-mask: linear-gradient(to bottom, transparent var(--f), #000 var(--t)); mask: linear-gradient(to bottom, transparent var(--f), #000 var(--t)); }
.pblur i:nth-child(1) { --b: 2px; --f: 0%; --t: 40%; }
.pblur i:nth-child(2) { --b: 6px; --f: 30%; --t: 70%; }
.pblur i:nth-child(3) { --b: 14px; --f: 60%; --t: 100%; }

/* раскрытое меню: страница уезжает влево, панель лежит под ней */
.menu { z-index: 1; visibility: hidden; transition: visibility 0s .85s; }
.menu-open .menu { visibility: visible; transition-delay: 0s; }
.mn-panel { inset: 0; display: block; padding: 0; background: var(--blue); color: var(--on-blue); clip-path: none; visibility: inherit; transition: none; }
.menu-open .mn-panel { clip-path: none; }
.mn-in { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: var(--mw); padding: 18px 20px 82px; }
.mn-label { margin-bottom: 8px; font-size: var(--t-s); opacity: .6; }
.mn-list a { position: relative; display: flex; align-items: baseline; gap: .18em; margin: 0 -8px; padding: 1px 8px 3px; overflow: hidden; border: 0; opacity: 1; transform: none; isolation: isolate; font-size: clamp(34px, 3.5vw, 54px); line-height: 1.1; transition: color .25s; }
.mn-list a::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--on-blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--e); }
.mn-list b { display: block; transform: translateY(105%); transition: transform .7s var(--e); }
.mn-list a span { width: auto; font-size: .56em; letter-spacing: -.02em; color: inherit; opacity: .45; transform: translateY(105%); transition: transform .7s var(--e); }
.menu-open .mn-list b, .menu-open .mn-list a span { transform: none; transition-delay: calc(.22s + var(--i) * .05s); }
.mn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: auto; overflow: hidden; border: 1px solid color-mix(in srgb, var(--black) 16%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--black) 16%, transparent); }
.mn-grid a { position: relative; display: flex; align-items: center; height: clamp(44px, 6vh, 58px); padding: 0 12px; overflow: hidden; background: var(--blue); }
.mn-grid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .3s, transform .6s var(--ease); }
.mn-grid span { position: relative; transition: color .25s; }
.mn-talk { margin-top: 14px; }
.mn-contacts a { padding: 7px 0; border-top: 1px solid color-mix(in srgb, var(--black) 16%, transparent); font-size: var(--t-m); }
.mn-contacts a span { color: inherit; opacity: .55; }
.mn-veil { position: fixed; z-index: 3; left: 0; top: 10px; bottom: 10px; right: calc(var(--mw) + 10px); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--d30) 44%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; cursor: pointer; transition: opacity .6s, visibility 0s .6s; }
.menu-open .mn-veil { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (hover: hover) {
  .mn-list a:hover { color: var(--blue); }
  .mn-list a:hover::before { transform: scaleX(1); }
  .mn-grid a:hover img { opacity: 1; transform: none; filter: brightness(.55); }
  .mn-grid a:hover span { color: var(--white); }
}
@media (min-width: 761px) {
  .menu-open .nav { opacity: 0; pointer-events: none; }
  .menu-open .dock { left: calc(100% - var(--mw) / 2); }
  .menu-open .dock-btn { background: var(--on-blue); color: var(--white); }
}
@media (min-width: 761px) and (max-height: 720px) { .mn-grid { display: none; } .mn-talk { margin-top: auto; } }
@media (max-width: 760px) {
  .hero-copy { bottom: 78px; }
  .dock { bottom: 12px; }
  .dock-mark { width: 44px; height: 44px; }
  .dock-btn { width: 196px; height: 44px; }
  .menu { z-index: 90; }
  .mn-panel { inset: auto; left: var(--px, 20px); bottom: var(--pb, 12px); width: var(--pw, 196px); height: var(--ph, 44px); overflow: hidden; border-radius: 22px; transition: height .5s var(--e), border-radius .5s var(--e), width .4s var(--e) .25s, left .4s var(--e) .25s; }
  .menu-open .mn-panel { left: 10px; width: calc(100vw - 20px); height: var(--oh, 480px); border-radius: 16px; transition: width .4s var(--e), left .4s var(--e), height .5s var(--e) .25s, border-radius .5s var(--e); }
  .mn-in { top: auto; right: auto; left: 14px; bottom: 58px; display: block; width: calc(100vw - 48px); padding: 0; }
  .mn-label, .mn-grid { display: none; }
  .mn-list a { font-size: 44px; }
  .menu-open .mn-list b, .menu-open .mn-list a span { transition-delay: calc(.42s + var(--i) * .05s); }
  .mn-veil { inset: 0; z-index: 89; border-radius: 0; }
}

/* выбранный билет кремовый, всё на нём тёмное */
.plan.on .tk-top, .plan.on .tk-top b, .plan.on .tk-stub, .plan.on .tk-stub *:not(.tk-sel) { color: var(--on-blue); }
.plan.on .tk-sel { background: var(--on-blue); color: var(--white); }

/* услуги: каждая на своём листе, следующий лист накрывает предыдущий */
.svc { display: block; padding: 0; border-top: 0; background: var(--black); }
.sv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0; padding: var(--sec) var(--pad) 0; }
.sv-head h2 { font-size: var(--t-d); line-height: 1.02; }
.sv-s { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; height: 100svh; padding: calc(var(--nav-h) + 4px) var(--pad) var(--pad); overflow: hidden; background: var(--bg); color: var(--fg); transform-origin: 50% 0; will-change: transform; }
.sv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.sv-top h3 { max-width: 7.6em; font-size: clamp(52px, 8.6vw, 148px); line-height: .98; letter-spacing: -.035em; }
.sv-top span { font-size: clamp(52px, 8.6vw, 148px); line-height: .98; letter-spacing: -.035em; opacity: .5; }
.sv-b { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: auto; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.sv-l { grid-column: 1 / span 2; font-size: var(--t-s); opacity: .7; }
.sv-d { grid-column: 3 / span 3; font-size: var(--t-m); line-height: 1.35; }
.sv-i { grid-column: 6 / span 3; font-size: var(--t-m); line-height: 1.35; opacity: .75; }
.sv-b img { grid-column: 9 / -1; width: 100%; height: clamp(220px, 46vh, 520px); object-fit: cover; border-radius: 4px; }
@media (max-width: 760px) {
  .sv-head { flex-direction: column; gap: 12px; }
  .sv-head h2 { font-size: 42px; }
    .sv-top h3, .sv-top span { font-size: 42px; }
  .sv-top h3 { max-width: 8.4em; }
  .sv-s { padding-top: calc(var(--nav-h) + 2px); padding-bottom: 72px; }
  .sv-b { display: flex; flex-direction: column; gap: 8px; }
  .sv-l, .sv-i { display: none; }
  .sv-b img { order: -1; height: 34svh; }
  .sv-d { font-size: var(--t-m); }
}

/* что у вас будет: пять высоких карточек поверх тонких линий */
.gt { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; min-height: 100vh; min-height: 100svh; padding: var(--sec) var(--pad) 84px; overflow: hidden; background: var(--d30); }
.gt-top { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.gt-top h2 { grid-column: 1 / span 4; }
.gt-say { grid-column: 5 / span 5; }
.gt-top .cta { display: none; }
.gt-row { position: relative; flex: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-height: 54vh; border-top: 0; }
.gt-c, .gt-c + .gt-c { display: flex; flex-direction: column; padding: 12px 14px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--white) 4%, transparent); -webkit-backdrop-filter: blur(9px) brightness(1.25); backdrop-filter: blur(9px) brightness(1.25); transition: background .4s; }
.gt-c:hover { background: color-mix(in srgb, var(--white) 13%, transparent); }
.gt-c b { font-size: clamp(30px, 3.7vw, 60px); line-height: 1.02; letter-spacing: -.03em; }
.gt-c p { margin-top: auto; text-align: right; font-size: var(--t-l); line-height: 1.2; color: var(--white); }
@media (max-width: 760px) {
  .gt-top { display: flex; flex-direction: column; gap: 12px; }
  .gt-top .cta { display: inline-flex; align-self: flex-start; }
  .gt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .gt-c, .gt-c + .gt-c { min-height: 170px; padding: 10px; }
  .gt-c:last-child { grid-column: 1 / -1; min-height: 130px; }
  .gt-c b { font-size: 34px; }
  .gt-c p { font-size: var(--t-m); }
}

/* отзывы: фраза по центру, ниже ряд миниатюр, выбранная поднята и цветная */
.vo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vo h2 { font-size: var(--t-l); line-height: 1.3; letter-spacing: -.01em; }
.vo-say { max-width: 25em; min-height: 3.6em; margin-top: 26px; font-size: var(--t-h); line-height: 1.14; }
.vo-msg { width: min(420px, 100%); margin-top: 14px; padding: 8px 10px; }
.vo-play { width: 40px; height: 40px; }
.vo-wave { height: 32px; }
.vo-row { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 86px; }
.vo-thumbs { display: flex; gap: 10px; margin: 0; }
.vo-thumbs button { flex: none; width: clamp(64px, 6.8vw, 100px); aspect-ratio: 1; border-radius: 8px; opacity: 1; filter: grayscale(1) brightness(.8); box-shadow: none; transition: transform .45s var(--ease), filter .45s; }
.vo-thumbs button.on { filter: none; box-shadow: none; transform: translateY(-14px); }
.vo-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.vo-who { position: absolute; left: var(--x, 50%); bottom: calc(100% + 22px); flex-direction: column; align-items: center; gap: 0; margin: 0; white-space: nowrap; transform: translateX(-50%); transition: left .45s var(--ease); }
.vo-who span { font-size: var(--t-s); }
.vo-ar { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; transition: background .25s, color .25s; }
.vo-ar:hover { background: var(--blue); color: var(--on-blue); }
.vo-note { margin-top: 20px; font-size: var(--t-s); color: var(--soft); }
@media (max-width: 760px) {
  .vo-say { font-size: 28px; min-height: 5.8em; }
  .vo-row { width: 100%; margin-top: 74px; }
  .vo-ar { display: none; }
  .vo-thumbs { flex: 1; gap: 6px; }
  .vo-thumbs button { flex: 1; width: auto; min-width: 0; }
}

/* ================= V40: отступы меньше, меню поверх страницы, услуги простыми листами ================= */
main { transition: none; }

/* панель выезжает справа поверх страницы, страница стоит на месте */
.menu { z-index: 90; transition: visibility 0s .6s; }
.mn-panel { left: auto; width: var(--mw); transform: translateX(100%); transition: transform .6s var(--e); }
.menu-open .mn-panel { transform: none; }
.mn-in { position: absolute; inset: 0; width: 100%; }
.mn-panel { background: var(--white); color: var(--black); }
.mn-list a::before { background: var(--black); }
.mn-grid, .mn-grid a { border-color: color-mix(in srgb, var(--black) 16%, transparent); }
.mn-grid { background: color-mix(in srgb, var(--black) 16%, transparent); }
.mn-grid a { background: var(--white); }
.mn-contacts a { border-top-color: color-mix(in srgb, var(--black) 16%, transparent); }
.mn-veil { z-index: 89; top: 0; bottom: 0; right: 0; border-radius: 0; background: color-mix(in srgb, var(--d30) 55%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity .5s, visibility 0s .5s; }
.dock { transition: left .6s var(--e); }
.menu-open .dock-btn { background: var(--black); color: var(--white); }
.mn-grid a { height: clamp(38px, 5vh, 46px); }
@media (hover: hover) {
  .mn-grid a:hover { background: var(--black); color: var(--white); }
  .mn-list a:hover { color: var(--white); }
  .mn-grid a:hover span { color: inherit; }
}
@media (max-width: 760px) {
  .mn-panel { transform: none; left: var(--px, 20px); }
  .mn-in { inset: auto; left: 14px; bottom: 58px; width: calc(100vw - 48px); }
  .mn-veil { top: 0; left: 0; }
}

/* услуги: один тёмный тон, следующий лист просто наезжает на предыдущий */
.svc { border-top: 1px solid var(--line); }
.sv-head { padding: var(--sec) var(--pad) 12px; }
.sv-head h2 { font-size: var(--t-h); }
.sv-s { gap: 12px; padding: calc(var(--nav-h) + 4px) var(--pad) 84px; background: var(--black); border-top: 1px solid var(--line); will-change: auto; }
.sv-top h3, .sv-top span { font-size: clamp(44px, 6.4vw, 108px); }
.sv-top span { opacity: .35; }
.sv-b { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); margin-top: 0; border-top-color: var(--line); }
.sv-l { color: var(--soft); opacity: 1; }
.sv-i { color: var(--soft); opacity: 1; }
.sv-b img { height: 100%; min-height: 0; }
@media (max-width: 760px) {
  .sv-b { display: flex; flex-direction: column; }
  .sv-b img { flex: 1; height: auto; min-height: 0; }
  .sv-top h3, .sv-top span { font-size: 40px; }
}

/* что у вас будет: ровный фон и фраза вместо слова */
.gt { min-height: 0; padding: var(--sec) var(--pad); gap: 16px; overflow: visible; background: var(--black); }
.gt-row { min-height: 0; }
.gt-c, .gt-c + .gt-c { min-height: clamp(240px, 36vh, 340px); padding: 14px; border-radius: 6px; background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gt-c:hover { background: var(--card-2); }
.gt-c b { font-size: clamp(22px, 2vw, 30px); line-height: 1.12; letter-spacing: -.025em; }
.gt-c p { text-align: left; font-size: var(--t-m); color: var(--soft); }
@media (max-width: 760px) {
  .gt-c, .gt-c + .gt-c { min-height: 170px; }
  .gt-c b { font-size: 22px; }
  .gt-c:last-child { min-height: 110px; }
}

/* отзывы: вместо работ аватарки */
.vo-thumbs button { display: grid; place-items: center; background: var(--card-2); color: var(--soft); font-size: var(--t-l); filter: none; border-radius: 50%; }
.vo-thumbs button.on { background: var(--blue); color: var(--on-blue); filter: none; }

/* подвал: фото есть, даже если картинка ещё не подгрузилась */
.ft { background: var(--d30) url('assets/foot-night-sm.jpg') 50% 100% / cover no-repeat; }

/* v41: услуги снова стопкой карточек, тон меняется плавно, без резкого перехода */
.vo-msg[hidden] { display: none; }
.vo-say { min-height: 2.4em; }

/* выбор цветов на время утверждения */

/* ================= V42: без линий между блоками, этапы в одном стиле, иллюстрации услуг ================= */
.team, .svc, .calc, .vo, .faq, .au, .sv-s { border-top: 0; }
.pill { padding: 8px 14px; font-size: var(--t-m); letter-spacing: -0.01em; }
.sv-top h3, .sv-top span { font-size: clamp(38px, 4.8vw, 76px); }

/* этапы: окно одного размера и один набор деталей на все девять сцен */
.sg-stage { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; gap: clamp(20px, 3vw, 44px); }
.sg-frame { height: min(64vh, 520px); aspect-ratio: auto; border-radius: 12px; box-shadow: none; overflow: hidden; }
.sg-art { background: var(--card); }
.sg-side { justify-content: space-between; padding-left: 0; border-left: 0; }
.sg-roll { font-size: clamp(52px, 5.4vw, 84px); letter-spacing: -.03em; }
.sg-of { margin-top: 6px; font-size: var(--t-s); }
.sg-tx h3 { font-size: clamp(28px, 2.8vw, 42px); }
.sg-tx p { margin-top: 8px; font-size: var(--t-m); max-width: 26em; }
.w9 { position: absolute; inset: 0; display: flex; flex-direction: column; font-size: var(--t-s); line-height: 1.3; }
.w9-t { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; }
.w9-t small { font-size: var(--t-s); color: var(--soft); }
.w9-b { position: relative; flex: 1; min-height: 0; display: grid; gap: 8px; padding: 0 14px 14px; }
.ws .a { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .6s var(--ease); }
.ws.on .a { opacity: 1; transform: none; transition-delay: calc(.12s + var(--d, 0) * .07s); }
.c9 { min-width: 0; padding: 12px; border-radius: 8px; background: var(--card-2); }
.c9.ac { background: var(--blue); color: var(--on-blue); }
.ck { display: flex; align-items: center; gap: 8px; padding: 7px 0; }
.ck svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bar { display: block; height: 8px; border-radius: 3px; background: var(--m20); }
.b-call { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr); }
.b-call .c9:not(.lst) { display: grid; place-items: center; align-content: center; gap: 10px; }
.b-call .c9 i { display: grid; place-items: center; width: clamp(52px, 5.6vw, 76px); aspect-ratio: 1; border-radius: 50%; background: var(--m20); font-style: normal; font-size: var(--t-l); }
.b-call .c9.me i { background: var(--blue); color: var(--on-blue); }
.lst { display: flex; flex-direction: column; justify-content: center; }
.b-sheet { grid-template-rows: auto repeat(4, minmax(0, 1fr)); }
.r9 { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; }
.r9.h { color: var(--soft); padding-bottom: 2px; }
.r9.me, .r9.ot { background: var(--card-2); }
.r9.me { background: var(--blue); color: var(--on-blue); }
.r9 .bl { filter: blur(4px); }
.b-tree { grid-template-rows: auto auto minmax(0, 1fr); justify-items: center; }
.b-tree .root { width: 34%; text-align: center; }
.b-tree u { display: block; width: 80%; height: 16px; border: 1px solid var(--m33); border-bottom: 0; border-radius: 8px 8px 0 0; }
.b-tree .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.b-tree .row .c9 { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.b-tree .row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-tree .row .bar:nth-of-type(even) { width: 70%; }
.b-tree { align-content: center; }
.b-tree .row .c9 { min-height: 56%; }
.b-proto { grid-template-rows: 26px minmax(0, 1.5fr) minmax(0, 1fr); }
.b-proto .c9 { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.b-proto .top { display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }
.b-proto .tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 0; }
.tag9 { position: absolute; right: 10px; top: 10px; padding: 3px 8px; border-radius: 5px; background: var(--blue); color: var(--on-blue); font-size: 12px; white-space: nowrap; }
.b-text { grid-template-rows: minmax(0, 1fr) auto; }
.b-text .doc { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.b-text s { color: var(--soft); }
.b-text b { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.14; letter-spacing: -.02em; }
.b-text .q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
.b-text .q p + p { color: var(--soft); }
.b-design { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.b-design img, .b-mob img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 0; border-radius: 8px; }
.b-design .side { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.sw9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; height: 100%; padding: 8px; }
.sw9 i { border-radius: 6px; }
.b-design .aa { display: flex; align-items: flex-end; font-size: clamp(36px, 4vw, 60px); line-height: 1; letter-spacing: -.03em; }
.b-speed { grid-template-rows: minmax(0, 1fr) auto; }
.b-speed .big { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.b-speed .big b { font-size: clamp(56px, 6.4vw, 96px); line-height: 1; letter-spacing: -.04em; }
.b-speed .fill { display: block; height: 8px; border-radius: 3px; background: var(--m20); overflow: hidden; }
.b-speed .fill i { display: block; height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease) .3s; }
.ws.on .b-speed .fill i { transform: scaleX(.94); }
.b-speed .tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-speed .tri .ck { padding: 0; }
.b-mob { grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; align-items: stretch; }
.b-mob div { width: min(100%, 170px); min-height: 0; padding: 4px; border-radius: 16px; background: var(--card-2); }
.b-mob img { border-radius: 12px; }
.b-mob div:nth-child(2) img { object-position: 50% 45%; }
.b-mob div:nth-child(3) img { object-position: 50% 100%; }
.b-lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.b-lead .chat { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; }
.b-lead .chat span { padding: 8px 10px; border-radius: 10px 10px 10px 3px; background: var(--m20); }
.b-lead .chat em { align-self: flex-end; padding: 8px 10px; border-radius: 10px 10px 3px 10px; background: var(--blue); color: var(--on-blue); font-style: normal; }
@media (max-width: 760px) {
  .sg-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sg-frame { height: 46svh; }
  .sg-side { flex-direction: column; gap: 6px; }
  .sg-num { align-items: baseline; }
  .sg-roll { font-size: 40px; }
  .sg-txts { min-height: 104px; }
  .w9-t { padding: 10px; }
  .w9-b { padding: 0 10px 10px; gap: 6px; }
  .b-call { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; }
  .b-call .lst { grid-column: 1 / -1; padding: 6px 12px; }
  .b-call .ck { padding: 3px 0; }
  .r9 { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); padding: 0 8px; }
  .r9 > :nth-child(4) { display: none; }
  .b-tree .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .b-tree .row .c9:nth-child(n + 4) { display: none; }
  .b-text .q { grid-template-columns: minmax(0, 1fr); }
  .b-text .q p:first-child { display: none; }
  .b-design { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 64px; }
  .b-design .side { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b-speed .tri { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .b-lead { grid-template-columns: minmax(0, 1fr); }
}

/* иллюстрации услуг: один приём на все шесть */
.sv-b { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sv-art { grid-column: 8 / -1; display: grid; place-items: center; min-height: 0; overflow: hidden; border-radius: 10px; background: color-mix(in srgb, var(--white) 4%, transparent); color: var(--m42); }
.sv-i { grid-column: 5 / span 3; }
.sv-d { grid-column: 2 / span 3; }
.sv-l { grid-column: 1; }
.sv-art svg { display: block; width: 100%; height: 100%; }
.sv-art polygon, .sv-art path { fill: var(--sf, var(--m8)); stroke: currentColor; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-art .fl { --sf: var(--m16); }
.sv-art .fr { --sf: var(--m6); }
.sv-art .ac { --sf: var(--blue); stroke: color-mix(in srgb, var(--blue) 70%, var(--white)); }
.sv-art .acl { --sf: color-mix(in srgb, var(--blue) 72%, var(--black)); stroke: color-mix(in srgb, var(--blue) 70%, var(--white)); }
.sv-art .acr { --sf: color-mix(in srgb, var(--blue) 48%, var(--black)); stroke: color-mix(in srgb, var(--blue) 70%, var(--white)); }
.sv-art .ln { --sf: var(--m33); stroke: none; }
.sv-art .no { --sf: transparent; }
@media (max-width: 760px) {
  .sv-b { display: flex; }
  .sv-art { order: -1; flex: 1; width: 100%; min-height: 0; }
}

/* разбор: обычная понятная кнопка */
.au-go { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 8px; background: var(--blue); color: var(--on-blue); font-size: var(--t-l); transition: opacity .2s; }
.au-go:hover { opacity: .88; }
.au-go svg { width: 20px; height: 20px; fill: currentColor; }

/* ================= V45: БЕЛЫЙ САЙТ, ОДНА ОСЬ, РОВНЫЕ ОТСТУПЫ =================
   Тёмные только первый экран и подвал, цвет один: глубокий тёмно-синий #0a0a0a. Подпись блока слева, заголовок и содержимое справа, ось на 4/12 ширины.
   Между блоками одно расстояние: --sec снизу, сверху ничего. */
main { background: #fff; }
[data-theme="light"], [data-theme="brand"] { color: var(--white); background: var(--black); }
.t-h2, .hd h2 { font-size: var(--t-h); line-height: 1.08; letter-spacing: -.04em; }
:root { --t-h: clamp(30px, 3.5vw, 54px); }

.hd { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; margin: 0 0 clamp(32px, 3.6vw, 56px); }
.hd h2 { margin: 0; }
.hd-k { justify-self: start; padding: 6px 10px; border-radius: 4px; background: var(--m6); font-size: 13px; font-weight: 400; line-height: 1.2; letter-spacing: 0; color: var(--white); }

.team, .ab, .svc, .calc, .vo, .faq, .au, .rc { padding-top: 0; padding-bottom: var(--sec); }

/* кнопка: тонкая рамка, скобки по углам, при наведении расходятся, кнопка заливается */
.cta, .cta-light, .cta-soft, .au-go, .nav:not([data-on="light"]) .cta, .menu-open .nav .cta { background: none; color: var(--white); }
.cta, .au-go { --c: var(--white); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; overflow: visible; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--m16); font-size: var(--t-m); line-height: 1; letter-spacing: -.01em; white-space: nowrap; transition: background .3s, color .3s; }
.cta::after, .au-go::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--c), var(--c)) 0 0 / 11px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 11px, linear-gradient(var(--c), var(--c)) 100% 0 / 11px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 11px, linear-gradient(var(--c), var(--c)) 0 100% / 11px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 11px, linear-gradient(var(--c), var(--c)) 100% 100% / 11px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 11px; background-repeat: no-repeat; transition: inset .35s var(--ease); }
.cta:hover, .au-go:hover, .nav:not([data-on="light"]) .cta:hover { background: var(--white); color: var(--black); opacity: 1; }
.cta:hover::after, .au-go:hover::after { inset: -7px; }
.cta-t, .cta:hover .cta-t, .nav .cta-t, .nav .cta:hover .cta-t { display: inline; height: auto; padding: 0; background: none; color: inherit; }
.cta-a { display: none; }
.nav .cta { height: 36px; padding: 0 14px; font-size: var(--t-s); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 26%, transparent); }
.nav[data-on="light"] .cta { --c: var(--black); background: #fff; color: var(--black); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--black) 18%, transparent); }
.nav[data-on="light"] .cta:hover { background: var(--black); color: #fff; }
/* там, где решается заявка, кнопка залита сразу, скобки стоят чуть снаружи */
.sum-cta, .au-go { width: 100%; height: 54px; background: var(--white); color: var(--black); box-shadow: none; }
.sum-cta::after, .au-go::after { inset: -6px; }
.sum-cta .cta-t { flex: none; }
.sum-cta:hover, .au-go:hover { background: var(--white); color: var(--black); }
.sum-cta:hover::after, .au-go:hover::after { inset: -10px; }
.au-form { row-gap: 14px; }
.au-go { margin-top: 6px; }
.au-go svg { width: 19px; height: 19px; fill: currentColor; }

/* о нас */
.ab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); padding-top: 0; padding-bottom: 28px; }
.ab-l .hd-k { display: inline-block; background: none; padding: 0; font-size: var(--t-s); }
.ab-ph { display: flex; gap: 8px; margin-top: 12px; }
.ab-ph img { display: block; width: clamp(58px, 7vw, 108px); aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; background: var(--m6); }
.ab-n { margin-top: 20px; font-size: var(--t-s); line-height: 1.45; color: var(--soft); }
.ab-say { font-size: clamp(25px, 2.9vw, 44px); line-height: 1.17; letter-spacing: -.035em; }
.ab-say span { color: color-mix(in srgb, var(--white) 48%, transparent); }
.ab-wheel { position: relative; height: calc(3 * 1.24em); margin-top: clamp(36px, 4.4vw, 64px); overflow: hidden; font-size: clamp(27px, 3.1vw, 46px); line-height: 1.24; letter-spacing: -.035em; -webkit-mask: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); mask: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); }
.ab-wheel ul { list-style: none; margin: 0; padding: 0; transition: transform .7s var(--ease); }
.ab-wheel li { color: var(--m25); transition: color .5s; }
.ab-wheel li.on { color: var(--white); }
.ab-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap) clamp(16px, 2.4vw, 36px); margin-top: clamp(36px, 4.4vw, 64px); padding-top: 28px; border-top: 1px solid var(--line); }
.ab-cols svg { display: block; width: 24px; height: 24px; fill: var(--m42); }
.ab-cols h3 { margin-top: 16px; font-size: var(--t-l); line-height: 1.2; letter-spacing: -.02em; }
.ab-cols p { margin-top: 10px; font-size: var(--t-m); line-height: 1.45; color: var(--soft); }

.sv-g .sa { stroke: #fff; }
.sv-g .sb { stroke: color-mix(in srgb, #fff 20%, transparent); }

/* один цвет на всём, что активно */
.hd-k { background: var(--card-2); color: var(--white); }
.ab-l .hd-k { color: var(--white); }
.ab-wheel li.on { color: var(--white); }
.ab-cols svg { fill: var(--m42); }
[data-theme="light"] .cta { --c: var(--white); box-shadow: inset 0 0 0 1px var(--m16); }
[data-theme="light"] .cta:hover { background: var(--white); color: var(--black); }
.nav[data-on="light"] .cta { --c: var(--on-blue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-blue) 22%, transparent); }
.nav[data-on="light"] .cta:hover { background: var(--on-blue); color: #fff; }
.au-go, .au-go:hover { --c: var(--white); background: var(--white); color: var(--black); }
.sum .sum-cta, .sum .sum-cta:hover { --c: #fff; background: #fff; color: var(--on-blue); box-shadow: none; }
.faq-tabs button.on, .au-tabs button.on { background: var(--white); color: var(--black); }
.faq-ask { background: var(--white); color: var(--black); }
.plan.on .tk-sel { background: #fff; color: var(--blue); }
.plan.on .tk-bar { color: #fff; opacity: .6; }
.plan.on .tk-stub { border-top-color: color-mix(in srgb, #fff 34%, transparent); }
[data-theme="brand"] { color: var(--white); background: var(--black); }
.team { z-index: 3; height: clamp(170px, 22vh, 220px); min-height: 0; padding: 0; margin-bottom: var(--sec); overflow: visible; }

/* вопросы на той же оси */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); }
.faq .hd { grid-column: 1 / -1; }
.faq-card { grid-column: 2; }

/* белый лист наезжает на тёмный первый экран */
.fw { border-radius: 22px 22px 0 0; }

/* подвал: фото темнее, текст читается лучше */
.ft-bg { filter: brightness(.68) saturate(1.12); }
.ft-lit { filter: brightness(1.4) saturate(1.1); }

@media (max-width: 760px) {
  .hd, .ab, .faq { grid-template-columns: minmax(0, 1fr); }
  .faq-card { grid-column: 1; }
  .hd { gap: 12px; }
  .ab { gap: 28px; }
  .ab-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
  .nav .cta { display: none; }
  .nav.compact { opacity: 0; pointer-events: none; transition: opacity .3s; }
  .au-r { margin-top: 28px; }
}

/* кнопка закрытия и ссылки файла над листами */
.fl-front { z-index: 2; background: var(--m8); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fl-sheet { will-change: transform; }

/* ================= ЕДИНАЯ ТИПОГРАФИКА =================
   На всём сайте пять размеров. Заголовок блока, название в карточке, описание, текст интерфейса, подпись.
   Крупнее только главный экран и слово в подвале. Новый текст берёт один из этих размеров, своих не заводим. */
:root {
  --t-h: clamp(28px, 3.2vw, 46px);
  --t-xl: clamp(21px, 1.8vw, 26px);
  --t-l: clamp(16px, 1.25vw, 18px);
  --t-m: 16px;
  --t-s: 14px;
}
/* заголовок блока */
.t-h2, .hd h2, .au h2.t-display, .ft-head h2, #sgSay, .why-say, .ab-say, .ab-wheel, .sum-total, .sg-roll { font-size: var(--t-h); line-height: 1.12; letter-spacing: -.035em; }
.ab-wheel { line-height: 1.24; }
/* название в карточке */
.fc-txt h3, .rc-route b, .why-c h3, .sg-tx h3, .sg-end h3, .sv-tx h3, .plan .tk-top b, .plan .pl-price, .sum-plan b, .ab-cols h3, .fl-front h3 { font-size: var(--t-xl); line-height: 1.14; letter-spacing: -.025em; }
/* описание */
.fw-top p, .sg-tx p, .sg-end p, .why-c p, .ab-cols p, .sv-d, .addon b, .addon em, .faq-q, .faq-a, .faq-list p, .au-l > p, .sum-lines div, .fl-front p, .hero-lead { font-size: var(--t-l); line-height: 1.38; letter-spacing: -.012em; }
/* текст интерфейса */
.link-big, .pill, .addon small, .au-box b, .au-box li { font-size: var(--t-m); }
/* подпись */
.hd-k, .sv-n, .sum-note, .sum-foot .t-label, .t-label, .ab-n, .rc-route, .plan .tk-top span, .plan .tk-row small, .calc-custom, .fw-count, .au-ask { font-size: var(--t-s); }
.hd-k { letter-spacing: -.005em; }
.rc-route b { display: block; margin-bottom: 2px; }

/* стоимость: одна высота, ровные поля, спокойные подписи, итог не кричит */
.calc-body { align-items: stretch; column-gap: 10px; }
.calc-l { gap: 10px; }
.calc-l > .t-label { color: var(--soft); }
.calc-l .plans { margin-bottom: 18px; gap: 10px; }
.calc-l .addons { margin-bottom: 14px; gap: 10px; }
.plan .tk-top { min-height: 118px; padding: 16px 16px 14px; gap: 4px; }
.plan .tk-stub { gap: 10px; padding: 12px 16px 14px; }
.plan .tk-row small { letter-spacing: 0; text-transform: none; }
.plan .tk-bar { height: 14px; }
.plan .tk-sel { height: 40px; border-radius: 6px; font-size: var(--t-m); }
.plan.on { filter: none; }
.addon { gap: 8px; padding: 14px 16px; border-radius: 10px; }
.addon b { padding-right: 44px; }
.addon em { color: var(--white); }
.addon small { color: var(--soft); line-height: 1.32; }
.sum { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 12px; }
.sum .t-label { color: var(--soft); }
.sum-plan { margin-top: 12px; }
.sum-plan span { display: block; margin-top: 4px; font-size: var(--t-s); line-height: 1.3; color: var(--soft); }
.sum-lines { margin-top: 12px; }
.sum-lines div { padding: 9px 0; font-size: var(--t-s); }
.sum-foot { margin-top: auto; padding-top: 18px; }
.sum-total { margin-top: 4px; letter-spacing: -.04em; }
.sum-total small { font-size: var(--t-s); letter-spacing: 0; }
.sum-note { margin-top: 8px; line-height: 1.35; color: var(--soft); }
.sum-cta { margin-top: 16px; }
.calc-custom { margin-top: 2px; color: var(--soft); }
@media (max-width: 760px) {
  .sg-roll { font-size: var(--t-h); }
  .sg-tx h3 { font-size: var(--t-xl); }
  .sg-tx p { font-size: var(--t-l); margin-top: 6px; }
}

/* проекты: чистая обложка с Behance, сверху только название и тип работы, карточка в пропорции обложки */
.fc { width: min(1040px, 84vw, calc((76vh - 38px) * 1.5556)); height: auto; }
.fc-img { flex: none; aspect-ratio: 14 / 9; }
.fc-img img { object-position: 50% 50%; }
.fc-bar { font-size: var(--t-s); }
.rc-img img { object-position: 50% 50%; }
@media (max-width: 760px) { .fc { width: calc(100vw - 2 * var(--pad)); } }

/* ================= V48: ПРАВКИ ПО СПИСКУ ================= */
/* шапка: знак и название слева, при прокрутке всё исчезает, остаётся меню внизу */
.nav { grid-template-columns: 1fr 1fr; transition: color .4s, opacity .35s; }
.nav-l { display: none; }
.nav-logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: var(--t-l); line-height: 1; letter-spacing: -.02em; }
.nav-logo .mark { width: 26px; }
.nav.compact { opacity: 0; pointer-events: none; }
.nav.compact > * { pointer-events: none; }
.nav .cta { background: none; }

/* почему с нами просто: фраза едет вместе с блоком */
.why-say { translate: -50% calc(-50% + var(--yo, 0vh)); }

/* стоимость: только главное */
.calc-l { gap: 10px; }
.calc-l .plans, .calc-l .addons { margin: 0; }
.plan .tk-top { min-height: 92px; justify-content: flex-start; }
.addon { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; min-height: 64px; padding: 12px 58px 12px 16px; }
.addon > span:first-child { flex: 1; }
.addon b { padding: 0; }
.addon em { margin: 0; font-size: var(--t-m); color: var(--soft); white-space: nowrap; }
.addon .sw { top: 50%; right: 14px; transform: translateY(-50%); }
.sum { min-height: 0; padding: 20px; }
.sum-plan { margin-top: 0; padding-bottom: 12px; }
.sum-lines div:first-child { border-top: 0; }

/* разбор на сетке вопросов */
.au { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap); }
.au .hd { grid-column: 1 / -1; }
.au-card { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); padding: clamp(14px, 1.6vw, 22px); border-radius: 12px; background: var(--card); }
.au-l, .au-r { grid-column: auto; min-width: 0; }
.au-l { display: block; }
.au-l > p { margin: 0 0 16px; }
.au-ask { display: block; margin-bottom: 8px; color: var(--soft); }
.au-tabs { display: inline-flex; margin-bottom: 12px; background: var(--card-2); }
.au-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.au-form input { width: 100%; background: #fff; }
.au-r { display: grid; gap: 18px; align-content: start; margin: 0; }

/* подвал: цвет снимка остаётся, текст стоит на тёмной подложке */
.ft-in { z-index: 1; }
.ft-in::before { content: ''; position: absolute; inset: -20vh 0 -4vh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(9, 9, 9, .78) 0, rgba(9, 9, 9, .62) 62%, transparent); }

@media (max-width: 760px) {
  .au { grid-template-columns: minmax(0, 1fr); }
  .au-card { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
  .addon { min-height: 58px; }
}

/* проекты: тень мягкая, её почти не видно на белом */
.fc { box-shadow: 0 22px 60px -36px rgba(16, 16, 16, .34); }

/* этапы: как в v47, сцены в одном окне, справа цифра и текст */

/* услуги: как в выбранном референсе. Следующая карточка накрывает прошлую целиком, та уходит вглубь с наклоном и поворотом. Карточки идут светлая, тёмная, поэтому без теней и обводок */
.svc { --sh: clamp(300px, 42vh, 390px); padding-inline: var(--pad); }
.sv-deck { display: block; }
.sv-s { position: sticky; top: calc((100vh - var(--sh)) / 2); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; height: var(--sh); min-height: 0; margin: 0 0 clamp(90px, 15vh, 150px); padding: 8px 8px 8px 20px; overflow: hidden; border: 0; border-radius: 14px; background: var(--card); color: var(--white); box-shadow: none; opacity: 1; transform: perspective(1500px) translate3d(0, calc(var(--dp, 0) * -3vh), 0) rotateX(calc(var(--dp, 0) * 8deg)) rotateZ(calc(var(--dp, 0) * 1.6deg)) scale(calc(1 - var(--dp, 0) * .1)); transform-origin: 50% 100%; will-change: transform; }
.sv-s:last-child { margin-bottom: 0; }
.sv-s[data-theme="brand"] { background: var(--black); }
.sv-s::after { content: ''; position: absolute; inset: 0; background: #0a0a0a; opacity: calc(var(--dp, 0) * .06); pointer-events: none; }
.sv-c { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 12px 0; }
.sv-n { display: block; font-size: var(--t-s); line-height: 1; color: var(--soft); }
.sv-h h3 { margin-top: 12px; font-size: var(--t-xl); font-weight: 400; line-height: 1.14; letter-spacing: -.025em; }
.sv-tx { display: block; }
.sv-d { max-width: 24em; margin: 0; color: var(--white); }
.sv-p { margin: 8px 0 0; font-size: var(--t-s); line-height: 1.3; color: var(--soft); }
.sv-g { position: relative; min-height: 0; overflow: hidden; border-radius: 10px; background: #f3f4f8; }
.sv-s[data-theme="brand"] .sv-g { background: #282828; }
.sv-g canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* разбор: без плашек, списки разделены воздухом и тонкими линиями */
.au-r { gap: clamp(22px, 2.6vw, 34px); }
.au-box { padding: 0; border-radius: 0; background: none; }
.au-box b { display: block; margin: 0 0 8px; font-size: var(--t-s); font-weight: 400; line-height: 1.2; color: var(--soft); }
.au-box ul, .au-box ol { display: block; margin: 0; padding: 0; list-style: none; }
.au-box li { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--t-m); line-height: 1.32; }
.au-ok { margin: 0; font-size: var(--t-xl); line-height: 1.2; letter-spacing: -.02em; }

@media (max-width: 760px) {
  .svc { --sh: 460px; }
  .sv-s { top: calc((100svh - var(--sh)) / 2); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; margin-bottom: 72px; padding: 8px; }
  .sv-c { gap: 14px; padding: 8px 8px 0; }
}

/* стоимость: левая и правая часть одной высоты */
.calc-l { display: flex; flex-direction: column; }
.calc-l .plans { flex: 1; }
.plan { height: 100%; }
.plan .tk-top { flex: 1; }
.calc-l .addons { flex: none; }
.sum { position: static; }
@media (max-width: 760px) { .au-r { margin-top: 22px; } }
#auForm[hidden], #auToggle[hidden], .au-ask[hidden], .au-ok[hidden] { display: none; }

/* главный экран: на экране ноутбука настоящий рабочий стол. Размеры через --u, это сотая часть ширины экрана, поэтому всё уменьшается вместе с ним */
.hero { height: 660vh; }
.dev { --bz: 0; --u: 1px; }
.scr { --bz: inherit; overflow: hidden; border-radius: calc(var(--bz) * var(--u) * 1.3); background: #0a0a0a; box-shadow: 0 0 0 calc(var(--bz) * var(--u) * .9) #0a0a0a, 0 0 0 calc(var(--bz) * var(--u) * 1) #5d5d5d; }
.mac-base { position: absolute; left: -9%; right: -9%; top: calc(100% + var(--u) * 1); height: calc(var(--u) * 1.7); border-radius: 0 0 calc(var(--u) * 1.5) calc(var(--u) * 1.5); background: linear-gradient(#eceDf0, #cfd1d6 34%, #a5a5a5 78%, #6f6f6f); opacity: var(--bz); }
.mac-base::before { content: ''; position: absolute; left: 50%; top: 0; width: 13%; height: 46%; translate: -50% 0; border-radius: 0 0 calc(var(--u) * .7) calc(var(--u) * .7); background: linear-gradient(#9e9e9e, #c8cacf); }
.mac-base::after { content: ''; position: absolute; left: 4%; right: 4%; top: 100%; height: calc(var(--u) * 4); background: radial-gradient(50% 100% at 50% 0, rgba(255, 255, 255, .13), transparent); }
.os { position: absolute; inset: 0; overflow: hidden; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Inter Tight', Arial, sans-serif; }
.os-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.os-bar { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: calc(var(--u) * 1.3); height: calc(var(--u) * 2); padding: 0 calc(var(--u) * 1.3); background: rgba(15, 15, 15, .34); font-size: calc(var(--u) * .9); line-height: 1; white-space: nowrap; }
.os-bar .mark { width: calc(var(--u) * 1.3); }
.os-bar b { font-weight: 600; }
.os-time { margin-left: auto; }
.os-notch { position: absolute; left: 50%; top: 0; z-index: 5; width: calc(var(--u) * 12); height: calc(var(--u) * 2.1); translate: -50% 0; border-radius: 0 0 calc(var(--u) * .8) calc(var(--u) * .8); background: #0a0a0a; opacity: var(--bz); }
.os-files { position: absolute; right: calc(var(--u) * 1.5); top: calc(var(--u) * 3.6); z-index: 1; display: grid; gap: calc(var(--u) * 1.4); justify-items: center; }
.os-file { display: grid; justify-items: center; gap: calc(var(--u) * .3); font-size: calc(var(--u) * .85); line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.os-file svg { display: block; width: calc(var(--u) * 4.2); }
.os-dock { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * .8); z-index: 3; display: flex; align-items: flex-end; gap: calc(var(--u) * .6); width: fit-content; margin: 0 auto; padding: calc(var(--u) * .55) calc(var(--u) * .65); border-radius: calc(var(--u) * 1.5); background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); }
.os-ic { position: relative; display: block; flex: none; width: calc(var(--u) * 4); height: calc(var(--u) * 4); overflow: hidden; border-radius: 23%; transform-origin: 50% 100%; box-shadow: 0 calc(var(--u) * .15) calc(var(--u) * .4) rgba(0, 0, 0, .3); will-change: transform; }
.os-ic svg { display: block; width: 100%; height: 100%; }
.os-ic i { position: absolute; border-radius: 50%; }
.os-c1 { inset: 13%; background: conic-gradient(from -60deg, #ea4335 0 120deg, #34a853 0 240deg, #fbbc05 0); }
.os-c2 { inset: 33%; background: #7e7e7e; box-shadow: 0 0 0 calc(var(--u) * .24) #fff; }
.os-win { position: absolute; left: calc(var(--u) * 7); right: calc(var(--u) * 7); top: calc(var(--u) * 3.3); bottom: calc(var(--u) * 7.6); z-index: 2; display: flex; flex-direction: column; overflow: hidden; border-radius: calc(var(--u) * .9); background: #fff; box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14); visibility: hidden; will-change: transform, opacity; }
.os-top { flex: none; display: flex; align-items: center; gap: calc(var(--u) * 1.1); height: calc(var(--u) * 3.1); padding: 0 calc(var(--u) * 1.1); background: #e9ebef; color: #3c4043; font-size: calc(var(--u) * .92); line-height: 1; white-space: nowrap; }
.os-lights { display: flex; gap: calc(var(--u) * .55); }
.os-lights i { width: calc(var(--u) * .86); height: calc(var(--u) * .86); border-radius: 50%; background: #ff5f57; }
.os-lights i:nth-child(2) { background: #febc2e; }
.os-lights i:nth-child(3) { background: #28c840; }
.os-tab { display: flex; align-items: center; height: calc(var(--u) * 2.2); padding: 0 calc(var(--u) * 1.3); border-radius: calc(var(--u) * .6); background: #fff; }
.os-url { flex: 1; display: flex; align-items: center; height: calc(var(--u) * 1.9); padding: 0 calc(var(--u) * 1); border-radius: calc(var(--u) * 1); background: #fff; color: #626262; }
.os-page { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--black); color: var(--white); font-family: inherit; }
.os-page .scr-in, .os-page .scr-axis { position: absolute; inset: 0; font-family: 'Inter Tight', Arial, sans-serif; }
.os-page .scr-mark { top: calc(var(--u) * 1.8); left: calc(var(--u) * 3.4); width: calc(var(--u) * 2.4); z-index: 1; }
.os-nav { position: absolute; top: calc(var(--u) * 1.75); right: calc(var(--u) * 3.4); z-index: 1; display: flex; gap: calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.15); line-height: 1.3; }
.os-page .scr-say { position: absolute; inset: 0; height: 100%; transform: translateY(calc(var(--sy, 0) * -200%)); }
.os-page .scr-h { left: calc(var(--u) * 3.4); bottom: auto; top: 54%; max-width: calc(var(--u) * 64); font-size: calc(var(--u) * 5.6); line-height: 1.04; transform: translateY(-50%); }
.os-page .scr-h:nth-child(2) { top: 154%; }
.os-page .scr-h:nth-child(3) { top: 254%; }
.os-sb { position: absolute; right: calc(var(--u) * .35); top: calc(var(--u) * .5); z-index: 3; width: calc(var(--u) * .44); height: 34%; border-radius: calc(var(--u) * 1); background: rgba(30, 30, 30, .26); transform: translateY(calc(var(--sy, 0) * 185%)); }
.os-cur { position: absolute; left: 0; top: 0; z-index: 6; width: calc(var(--u) * 2.6); opacity: 0; transform-origin: 20% 10%; will-change: transform, opacity; pointer-events: none; }
.os-cur path { fill: #0b0c10; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
@media (max-width: 760px) {
  .os-files { display: none; }
  .os-nav { display: none; }
  .os-page .scr-h { max-width: calc(var(--u) * 74); font-size: calc(var(--u) * 7.4); }
}

/* заголовок по центру, как в «Почему с нами просто»: буквы проявляются и разлетаются */
.ctr { position: absolute; left: 50%; top: 50%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(92vw, 900px); translate: -50% calc(-50% + var(--yo, 0vh)); text-align: center; pointer-events: none; }
.ctr .hd-k { transition: opacity .3s; }
.ctr h2 { width: min(92vw, 15em); font-size: var(--t-h); line-height: 1.12; letter-spacing: -.04em; font-weight: 400; }

/* этапы: шаг на тёмной карточке слева, сюда попадает взгляд первым, сцена справа спокойная */
.sg-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.sg-side { order: -1; justify-content: space-between; min-width: 0; padding: clamp(20px, 2.4vw, 34px); border-radius: 12px; background: var(--black); color: var(--white); }
.sg-num { align-items: flex-start; }
.sg-roll { font-size: clamp(60px, 6.4vw, 100px); }
.sg-of { margin-top: 8px; color: color-mix(in srgb, var(--white) 62%, transparent); }
.sg-tx h3 { font-size: clamp(30px, 3vw, 46px); line-height: 1.06; }
.sg-tx p { max-width: 24em; margin-top: 12px; font-size: var(--t-l); line-height: 1.38; color: color-mix(in srgb, var(--white) 80%, transparent); }

/* о нас: значки в уголках, как кнопки сайта */
.ab-ic { --c: var(--white); display: grid; place-items: center; width: 48px; height: 48px; color: var(--white); background: linear-gradient(var(--c), var(--c)) 0 0 / 9px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 9px, linear-gradient(var(--c), var(--c)) 100% 0 / 9px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 9px, linear-gradient(var(--c), var(--c)) 0 100% / 9px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 9px, linear-gradient(var(--c), var(--c)) 100% 100% / 9px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 9px; background-repeat: no-repeat; }
.ab-cols .ab-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* услуги: заголовок по центру, дальше карточки падают стопкой, прошлые отходят вглубь и остаются видны углами */
.svc { --sh: clamp(340px, 56vh, 490px); display: block; height: 640vh; padding: 0; border: 0; }
.sv-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sv-deck { position: absolute; left: 50%; top: 50%; width: min(1120px, calc(100% - var(--pad) * 2 - 40px)); height: var(--sh); translate: -50% -50%; }
.sv-s { position: absolute; inset: 0; top: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: stretch; height: 100%; margin: 0; padding: 10px 10px 10px 24px; overflow: hidden; border: 0; border-radius: 16px; background: var(--card); color: var(--white); box-shadow: none; opacity: 1; visibility: hidden; transform: none; transform-origin: 50% 62%; will-change: transform; }
.sv-s[data-theme="brand"] { background: var(--black); }
.sv-s::after { z-index: 2; background: #0a0a0a; opacity: calc(var(--dp, 0) * .1); }
.sv-c { padding: 14px 0; }
.sv-h h3 { font-size: clamp(26px, 2.4vw, 36px); }
.sv-g { border-radius: 10px; background: var(--m8); }
.sv-g img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.16 - var(--in, 1) * .16)); }
.svc.sv-flat { height: auto; }
.sv-flat .sv-pin { position: static; height: auto; overflow: visible; }
.sv-flat .ctr { position: static; translate: none; margin: 0 auto 28px; }
.sv-flat .sv-deck { position: static; width: auto; height: auto; margin: 0 var(--pad); translate: none; }
.sv-flat .sv-s { position: relative; height: var(--sh); margin-bottom: 16px; visibility: visible; }

@media (max-width: 760px) {
  .sg-stage { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sg-side { order: 1; flex-direction: column; gap: 10px; padding: 16px; }
  .sg-frame { order: 2; height: 40svh; }
  .sg-roll { font-size: 40px; }
  .sg-tx h3 { font-size: var(--t-xl); }
  .sg-tx p { margin-top: 6px; }
  .svc { --sh: min(72svh, 520px); }
  .sv-deck { width: calc(100% - var(--pad) * 2); }
  .sv-s { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding: 8px; }
  .sv-c { gap: 12px; padding: 8px 8px 0; }
}

/* Mac: настоящие значки, Chrome с двумя строками, страница как блок работ: заголовок по центру, снизу только логотип и меню */
.os-bar { background: rgba(15, 15, 15, .3); -webkit-backdrop-filter: blur(calc(var(--u) * 1.2)); backdrop-filter: blur(calc(var(--u) * 1.2)); }
.os-apple { flex: none; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.3); fill: currentColor; }
.os-st { display: flex; align-items: center; gap: calc(var(--u) * .9); margin-left: auto; }
.os-st svg { display: block; height: calc(var(--u) * .95); fill: currentColor; }
.os-time { margin-left: 0; }
.os-file img { display: block; width: calc(var(--u) * 4.6); }
.os-dock { gap: calc(var(--u) * .25); padding: calc(var(--u) * .35) calc(var(--u) * .5); border-radius: calc(var(--u) * 1.7); background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(calc(var(--u) * 1.4)) saturate(1.5); backdrop-filter: blur(calc(var(--u) * 1.4)) saturate(1.5); }
.os-ic { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); overflow: visible; border-radius: 0; box-shadow: none; }
.os-ic img { display: block; width: 100%; height: 100%; }
.os-top { display: block; height: auto; padding: 0; background: none; font-size: calc(var(--u) * .86); }
.os-tabs { display: flex; align-items: flex-end; gap: calc(var(--u) * 1); height: calc(var(--u) * 2.5); padding: 0 calc(var(--u) * 1); background: #e2e2e2; }
.os-lights { align-self: center; }
.os-tab { gap: calc(var(--u) * .5); width: calc(var(--u) * 15); height: calc(var(--u) * 2.1); padding: 0 calc(var(--u) * .9); border-radius: calc(var(--u) * .7) calc(var(--u) * .7) 0 0; }
.os-tab .mark { flex: none; width: calc(var(--u) * 1); color: #0a0a0a; }
.os-tool { display: flex; align-items: center; gap: calc(var(--u) * .9); height: calc(var(--u) * 2.5); padding: 0 calc(var(--u) * 1); background: #fff; box-shadow: inset 0 -1px 0 #e4e6ea; }
.os-tool svg { flex: none; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); fill: none; stroke: #626262; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.os-url { height: calc(var(--u) * 1.8); background: #f0f2f5; }
.os-who { flex: none; width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; background: #0a0a0a; }
.os-page .scr-say { transform: translateY(calc(var(--ty, 0) * -31%)); }
.os-page .scr-h { left: calc(var(--u) * 6); right: calc(var(--u) * 6); max-width: none; font-size: calc(var(--u) * 3.7); line-height: 1.1; text-align: center; }
.os-page .scr-h:nth-child(2), .os-page .scr-h:nth-child(3) { top: 54%; }
.os-page .scr-h .tn { color: var(--tone); }
.scr-axis .scr-h .tn { color: inherit; opacity: .62; }
.os-stack { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.os-fc { position: absolute; left: 50%; top: 44%; width: calc(var(--u) * 56); margin-left: calc(var(--u) * -28); overflow: hidden; border-radius: calc(var(--u) * .8); background: var(--card); color: var(--white); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(16, 16, 16, .16); transform: translateY(150%); transform-origin: 50% 0; will-change: transform; }
.os-fc::after { content: ''; position: absolute; inset: 0; background: #0a0a0a; opacity: var(--dim, 0); }
.os-fb { display: flex; justify-content: space-between; padding: calc(var(--u) * .7) calc(var(--u) * 1); font-size: calc(var(--u) * .95); line-height: 1.2; }
.os-fb span:last-child { color: var(--soft); }
.os-fc img { display: block; width: 100%; aspect-ratio: 14 / 9; object-fit: cover; }
.os-dk { position: absolute; left: 50%; bottom: calc(var(--u) * 1.3); z-index: 4; display: flex; align-items: center; gap: calc(var(--u) * .3); translate: -50% 0; color: #fff; font-size: calc(var(--u) * 1.1); line-height: 1; }
.os-dk-m { display: grid; place-items: center; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); border-radius: 50%; background: #0a0a0a; }
.os-dk-m .mark { width: calc(var(--u) * 1.5); }
.os-dk-b { display: flex; align-items: center; justify-content: space-between; width: calc(var(--u) * 14.5); height: calc(var(--u) * 3.2); padding: 0 calc(var(--u) * 1.2) 0 calc(var(--u) * 1.4); border-radius: calc(var(--u) * 1.6); background: #0a0a0a; }
.os-dk-b i { display: block; width: calc(var(--u) * 1.4); height: calc(var(--u) * .55); border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.os-sb { z-index: 5; width: calc(var(--u) * .4); height: 22%; transform: translateY(calc(var(--sy, 0) * 340%)); }
@media (max-width: 760px) {
  .os-page .scr-h { left: calc(var(--u) * 4); right: calc(var(--u) * 4); max-width: none; font-size: calc(var(--u) * 5.2); }
  .os-fc { width: calc(var(--u) * 66); margin-left: calc(var(--u) * -33); }
}

/* этапы: сначала крупная сцена в окне Mac по центру, потом она отъезжает вправо, а слева появляется текст */
.sg { height: 820vh; }
.sg-stage { --fw: min(980px, 68vw); --fh: min(620px, 70vh); display: block; height: var(--fh); }
.sg-frame { --u: 13px; position: absolute; left: 50%; top: 0; width: var(--fw); height: 100%; max-height: none; aspect-ratio: auto; margin-left: calc(var(--fw) / -2); overflow: visible; border-radius: 14px; box-shadow: none; transform-origin: 100% 50%; will-change: transform; }
.sg-art { overflow: visible; background: none; }
.ws { padding: 0; }
.sg-side { position: absolute; left: 0; top: 50%; display: block; order: 0; width: calc(100% - var(--fw) * .74 - clamp(24px, 4vw, 64px)); min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--white); opacity: 0; translate: 0 -50%; will-change: transform, opacity; }
.sg-of { display: block; margin: 0 0 14px; font-size: var(--t-s); line-height: 1; color: var(--soft); }
.sg-of b { font-weight: 400; color: var(--white); }
.sg-txts { position: relative; flex: none; min-height: 190px; }
.sg-tx { top: 0; bottom: auto; }
.sg-tx h3 { font-size: var(--t-h); line-height: 1.08; letter-spacing: -.04em; }
.sg-tx p { max-width: 22em; margin-top: 14px; font-size: var(--t-l); line-height: 1.38; color: var(--soft); }
.mw { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: #fff; color: #0a0a0a; box-shadow: 0 34px 70px -34px rgba(16, 16, 16, .42), 0 0 0 1px rgba(16, 16, 16, .07); }
.mw-t { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; background: #f1f2f5; font-size: var(--t-s); line-height: 1; color: #515151; }
.mw-t img { display: block; width: 24px; height: 24px; }
.mw-b { position: relative; flex: 1; min-height: 0; padding: clamp(20px, 2.8vw, 40px); }
.b-call { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.mc { display: grid; place-items: center; align-content: center; gap: 10px; border-radius: 12px; background: #eef0f5; }
.mc b { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #0a0a0a; color: #fff; font-size: 26px; font-weight: 400; }
.mc.me { background: #0a0a0a; color: #fff; }
.mc.me .mark { width: 72px; }
.mc small { font-size: var(--t-s); }
.b-call em { position: absolute; right: calc(clamp(20px, 2.8vw, 40px) + 12px); top: calc(clamp(20px, 2.8vw, 40px) + 12px); padding: 6px 12px; border-radius: 16px; background: rgba(255, 255, 255, .16); color: #fff; font-size: var(--t-s); font-style: normal; }
.ml { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--t-l); }
.ml span { display: inline-flex; align-items: center; gap: 8px; }
.mw-b svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.b-sheet { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mt { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: center; justify-items: center; min-height: 58px; padding: 0 18px; border-radius: 10px; background: #eef0f5; font-size: var(--t-l); }
.mt > span:first-child { justify-self: start; }
.mt.h { min-height: 30px; background: none; font-size: var(--t-s); color: #727272; }
.mt.me { background: #0a0a0a; color: #fff; }
.mt i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.mt i.yes { background: #fff; color: #0a0a0a; }
.mt i.no { color: currentColor; opacity: .5; }
.mt i svg { width: 16px; height: 16px; }
.b-tree { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.b-tree b, .b-tree strong { padding: 16px 34px; border-radius: 12px; font-size: var(--t-xl); font-weight: 400; line-height: 1; }
.b-tree b { background: #eef0f5; }
.b-tree strong { background: #0a0a0a; color: #fff; }
.b-tree u { display: block; width: 1px; height: clamp(18px, 3.4vh, 34px); background: #0a0a0a; opacity: .4; }
.b-tree div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: min(100%, 620px); }
.b-tree div span { padding: 16px 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(30, 30, 30, .2); font-size: var(--t-l); line-height: 1; text-align: center; }
.b-text { display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.4vw, 30px); background: #fffdf4; }
.b-text s { font-size: var(--t-xl); line-height: 1.2; color: #919191; }
.b-text p { max-width: 15em; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -.04em; }
.b-img { padding: 0; }
.b-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.b-lead { background: #f4f5f8; }
.mp { display: grid; gap: 14px; max-width: 56%; padding-top: 12px; }
.mp span { display: block; height: 16px; border-radius: 6px; background: #e2e2e2; }
.mp span:first-child { width: 86%; height: 40px; background: #0a0a0a; }
.mp span:last-child { width: 62%; }
.mn { position: absolute; right: 22px; top: 22px; display: flex; align-items: center; gap: 12px; width: min(420px, 74%); padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 18px 44px -14px rgba(16, 16, 16, .34), 0 0 0 1px rgba(16, 16, 16, .06); }
.mn img { flex: none; width: 46px; height: 46px; }
.mn p { min-width: 0; margin: 0; font-size: var(--t-m); line-height: 1.3; }
.mn b { display: block; font-weight: 600; }

/* о нас: значки как круглая кнопка со знаком внизу экрана */
.ab-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--white); color: var(--black); }
.ab-cols .ab-ic svg { width: 22px; height: 22px; stroke-width: 1.8; }

/* услуги: чертёж вместо картинки */
.sv-g { background: #fff; }
.sv-s[data-theme="brand"] .sv-g { background: #262626; }
.sv-g canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Mac: обои студии с логотипом, текст ровно посередине в две строки */
.os-logo { position: absolute; left: 0; right: 0; top: 24%; z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.4); color: #fff; font-family: 'Inter Tight', Arial, sans-serif; font-size: calc(var(--u) * 4.6); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.os-logo .mark { width: calc(var(--u) * 5); }
.os-page .scr-h, .os-page .scr-h:nth-child(2), .os-page .scr-h:nth-child(3) { top: 50%; left: calc(var(--u) * 6); right: calc(var(--u) * 6); max-width: none; font-size: calc(var(--u) * 4.6); line-height: 1.1; text-align: center; transform: translateY(-50%); }
.os-page .scr-h br { display: block; }
.os-page .scr-say { transform: none; }

@media (max-width: 760px) {
  .sg { height: 760vh; }
  .sg-stage { --fw: 100%; --fh: 74svh; }
  .sg-frame { --u: 10px; left: 0; width: 100%; height: 44svh; margin-left: 0; transform-origin: 50% 0; }
  .sg-side { left: 0; right: 0; top: calc(44svh + 18px); width: auto; translate: none; }
  .sg-txts { min-height: 120px; }
  .sg-tx h3 { font-size: var(--t-xl); }
  .mw-b { padding: 14px; }
  .mc b { width: 60px; height: 60px; font-size: 18px; }
  .mc.me .mark { width: 44px; }
  .ml { gap: 6px 14px; font-size: var(--t-s); }
  .b-call em { right: 26px; top: 26px; }
  .mt { min-height: 44px; padding: 0 10px; font-size: var(--t-s); }
  .mt i { width: 24px; height: 24px; }
  .b-tree b, .b-tree strong { padding: 12px 22px; font-size: var(--t-l); }
  .b-tree div span { padding: 12px 4px; font-size: var(--t-s); }
  .b-text p { font-size: var(--t-h); }
  .mn { right: 12px; top: 12px; width: 88%; }
  .os-page .scr-h, .os-page .scr-h:nth-child(2), .os-page .scr-h:nth-child(3) { left: calc(var(--u) * 3); right: calc(var(--u) * 3); font-size: calc(var(--u) * 6.4); }
  .os-logo { font-size: calc(var(--u) * 5.6); }
  .os-logo .mark { width: calc(var(--u) * 6); }
}

/* этапы: сцены «Дизайн» и «Запуск» */
.b-tree b, .b-tree strong { padding: 20px 44px; font-size: var(--t-h); letter-spacing: -.03em; }
.b-tree div { width: 100%; }
.b-tree div span { padding: 22px 8px; font-size: var(--t-xl); }
.b-img { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(20px, 2.6vw, 36px); background: #e8eaef; }
.b-img .fg { position: relative; height: 100%; min-width: 0; outline: 1.5px solid #0d99ff; }
.b-img .fg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.fg i { position: absolute; z-index: 1; width: 9px; height: 9px; background: #fff; box-shadow: 0 0 0 1.5px #0d99ff; }
.fg i:nth-of-type(1) { left: -5px; top: -5px; } .fg i:nth-of-type(2) { right: -5px; top: -5px; } .fg i:nth-of-type(3) { left: -5px; bottom: -5px; } .fg i:nth-of-type(4) { right: -5px; bottom: -5px; }
.fs { display: grid; gap: 12px; justify-items: center; }
.fs span { display: block; width: 44px; height: 44px; border-radius: 50%; background: #0a0a0a; }
.fs span:nth-child(2) { background: #fff; box-shadow: inset 0 0 0 1px rgba(30, 30, 30, .16); }
.fs span:nth-child(3) { background: #939393; }
.fs b { font-size: 26px; font-weight: 400; line-height: 1.2; }
.b-lead { padding: 0; background: #fff; }
.b-lead .mp { position: absolute; inset: 0; display: block; width: 100%; max-width: none; height: 100%; padding: 0; object-fit: cover; object-position: 50% 0; }
.mn { width: min(480px, 76%); padding: 16px 18px; }
@media (max-width: 760px) {
  .b-tree b, .b-tree strong { padding: 12px 22px; font-size: var(--t-l); }
  .b-tree div span { padding: 12px 4px; font-size: var(--t-s); }
  .b-img { gap: 12px; padding: 14px; }
  .fs span { width: 28px; height: 28px; }
  .fs b { font-size: 18px; }
  .mn { width: 88%; padding: 10px 12px; }
}
@media (max-width: 760px) { .mt { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 2px; } .mt.h { padding: 0 10px; font-size: 10.5px; letter-spacing: -.02em; } }

/* Mac: спокойный свет вокруг ноутбука, заголовок выше, строки и буквы плотнее */
.hero-sticky { background: radial-gradient(70% 62% at 50% 56%, #2d2d2d 0%, #1b1b1b 46%, var(--black) 78%); }
.os-page .scr-h, .os-page .scr-h:nth-child(2), .os-page .scr-h:nth-child(3) { top: 45%; line-height: .98; letter-spacing: -.062em; }

/* этапы: окна едут вместе с прокруткой, смена без переключений */
.sg { height: 860vh; }
.sg-frame { box-shadow: none; transform: none; will-change: auto; }
.ws { position: absolute; inset: 0; display: block; opacity: 1; padding: 0; transform-origin: 100% 50%; transition: none; visibility: hidden; will-change: transform; }
.sg-side { top: 0; height: 100%; opacity: 1; translate: none; }
.sg-tx { position: absolute; left: 0; right: 0; top: 50%; bottom: auto; opacity: 0; transform: translateY(calc(var(--tf, -50%) + var(--ty, 0px))); transition: none; }
.sg-tx.on { opacity: 0; transform: translateY(calc(var(--tf, -50%) + var(--ty, 0px))); }
.sg-of { margin-bottom: 14px; }
.ws .a { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .7s var(--ease); }
.ws.on .a { opacity: 1; transform: none; transition-delay: calc(.1s + var(--d, 0) * .06s); }

/* таблица как в Excel */
.b-sheet { display: flex; flex-direction: column; padding: 0; background: #fff; }
.xf { flex: none; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid #dfe1e6; font-size: var(--t-s); color: #3c4043; }
.xf b { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #8f8f8f; }
.xg { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 38px 1.6fr repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.xg > span { display: flex; align-items: center; min-width: 0; padding: 0 12px; overflow: hidden; border-right: 1px solid #e3e5ea; border-bottom: 1px solid #e3e5ea; font-size: var(--t-m); white-space: nowrap; }
.xg .xh { justify-content: center; padding: 0; background: #f4f5f7; color: #727272; font-size: var(--t-s); }
.xg .xc.yes { background: #e2f3e7; color: #1c7a3e; }
.xg .xc.no { background: #fbe4e4; color: #c03030; }
.xs { position: absolute; z-index: 1; left: 38px; top: 40%; width: calc((100% - 38px) * .3077); height: 20%; outline: 2px solid #1a7f45; outline-offset: -1px; pointer-events: none; }
.xb { flex: none; display: flex; align-items: center; height: 32px; padding: 0 10px; background: #f4f5f7; border-top: 1px solid #dfe1e6; font-size: var(--t-s); color: #1a7f45; }
.xb span { padding: 4px 14px; border-radius: 6px 6px 0 0; background: #fff; }

/* структура: главная, скобка и страницы, строки дорисовываются */
.b-tree { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(18px, 2.4vw, 32px); }
.b-tree b { flex: none; padding: 14px 44px; border-radius: 10px; background: #0a0a0a; color: #fff; font-size: var(--t-l); letter-spacing: 0; }
.tb { flex: none; display: block; width: 80.5%; height: 26px; border: 1px solid rgba(30, 30, 30, .3); border-bottom: 0; border-radius: 8px 8px 0 0; margin-top: 16px; }
.tc { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.b-tree .tc section { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 14px; border-radius: 10px; background: #eef0f5; }
.tc section span { margin-bottom: 6px; font-size: var(--t-m); line-height: 1.2; }
.tc u { display: block; height: 8px; border-radius: 3px; background: #d3d3d3; text-decoration: none; transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.tc u:nth-of-type(2) { width: 82%; } .tc u:nth-of-type(4) { width: 60%; }
.ws.on .tc u { transform: none; transition-delay: calc(.2s + var(--d, 0) * .07s); }

/* заметка в приложении: слева список, справа текст */
.b-text { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 0; padding: 0; background: #fff; }
.b-text aside { padding: 16px 10px; border-right: 1px solid #ececef; background: #f7f7f5; }
.b-text h6 { margin: 0 8px 12px; font-size: var(--t-s); font-weight: 600; color: #6b6b6b; }
.b-text aside span { display: block; padding: 10px 10px; border-radius: 8px; }
.b-text aside span.on { background: #ffd84d; }
.b-text aside b { display: block; font-size: var(--t-s); font-weight: 600; line-height: 1.25; }
.b-text aside small, .ne small { font-size: 12px; color: #8b8b8b; }
.ne { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, 2.6vw, 38px); }
.ne small { margin-bottom: 12px; }
.ne h5 { margin: 0 0 18px; font-size: var(--t-l); font-weight: 600; }
.ne s { font-size: var(--t-xl); line-height: 1.2; color: #919191; }
.ne p { max-width: 14em; margin: 14px 0 0; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.04em; }
.ne p .a { display: inline-block; }

/* CRM: заявки сами падают в первую колонку */
.b-crm { display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 0; background: #f4f5f8; }
.b-crm aside { display: grid; align-content: start; justify-items: center; gap: 12px; padding-top: 18px; background: #0a0a0a; }
.b-crm aside span { width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .16); }
.b-crm aside span.on { background: #fff; }
.cb { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px; }
.cb section { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cb h6 { flex: none; margin: 0 0 10px; font-size: var(--t-s); font-weight: 400; color: #727272; }
.cm { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.cl { display: grid; gap: 8px; }
.cc { min-width: 0; height: 72px; padding: 12px 14px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 16, .08); }
.cc b { display: block; overflow: hidden; font-size: var(--t-s); font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.cc small { font-size: 12px; color: #919191; }
.cn { animation: crdrop 12s var(--ease) infinite; animation-play-state: paused; }
.ws.on .cn { animation-play-state: running; }
@keyframes crdrop { 0%, 22% { transform: translateY(-240px); } 33%, 55% { transform: translateY(-160px); } 66%, 88% { transform: translateY(-80px); } 100% { transform: translateY(0); } }
.b-crm .mn { top: 14px; right: 14px; z-index: 2; width: min(380px, 62%); }

/* услуги: ось скана уже */
@media (max-width: 760px) {
  .sg { height: 780vh; }
  .sg-side { top: calc(44svh + 18px); height: 150px; }
  .sg-tx { top: 0; --tf: 0px; }
  .xf { height: 30px; padding: 0 10px; font-size: 12px; }
  .xg { grid-template-columns: 22px 1.5fr repeat(4, minmax(0, 1fr)); }
  .xg > span { padding: 0 4px; font-size: 10.5px; }
  .xg .xh { font-size: 10px; }
  .xs { left: 22px; width: calc((100% - 22px) * .2727); }
  .xb { height: 24px; font-size: 11px; }
  .tb { height: 14px; margin-top: 8px; }
  .tc { gap: 4px; }
  .b-tree .tc section { gap: 5px; padding: 6px; }
  .tc section span { font-size: 9.5px; margin-bottom: 3px; }
  .tc u { height: 4px; }
  .b-text { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .b-text aside { padding: 10px 6px; }
  .b-text aside span { padding: 6px; }
  .b-text aside b { font-size: 11px; }
  .ne { padding: 12px; }
  .ne h5 { margin-bottom: 8px; font-size: var(--t-s); }
  .ne s { font-size: var(--t-s); }
  .ne p { margin-top: 8px; font-size: var(--t-xl); }
  .b-crm { grid-template-columns: 34px minmax(0, 1fr); }
  .b-crm aside span { width: 18px; height: 18px; }
  .cb { gap: 5px; padding: 8px; }
  .cc { padding: 8px; }
  .cc b { font-size: 11px; }
  .cc small { display: none; }
}

/* этапы: точная сетка Excel, пять страниц в структуре, карточки CRM крупнее */
.xs { top: 33.34%; height: 16.67%; width: calc((100% - 38px) * .2857); }
.b-tree .tc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: 100%; }
.b-tree .tc span { padding: 0; box-shadow: none; border-radius: 0; font-size: var(--t-m); line-height: 1.2; text-align: left; }
.cc { height: 84px; padding: 16px; }
@keyframes crdrop { 0%, 22% { transform: translateY(-276px); } 33%, 55% { transform: translateY(-184px); } 66%, 88% { transform: translateY(-92px); } 100% { transform: translateY(0); } }
@media (max-width: 760px) {
  .xs { width: calc((100% - 22px) * .2727); }
  .b-tree .tc { gap: 4px; }
  .b-tree .tc span { font-size: 9.5px; }
  .cc { height: 60px; padding: 8px; }
  @keyframes crdrop { 0%, 22% { transform: translateY(-204px); } 33%, 55% { transform: translateY(-136px); } 66%, 88% { transform: translateY(-68px); } 100% { transform: translateY(0); } }
}
.b-tree .tc u { width: 100%; }
.b-tree .tc u:nth-of-type(2) { width: 82%; } .b-tree .tc u:nth-of-type(4) { width: 60%; }

/* Mac: ночные обои, на экране только строка меню и док, в окне своя шапка, не похожая на меню сайта */
.os-files { display: none; }
.os-win { left: calc(var(--u) * 6); right: calc(var(--u) * 6); top: calc(var(--u) * 3.4); bottom: calc(var(--u) * 7.2); }
.os-ic { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); }
.os-hd { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 5); padding: 0 calc(var(--u) * 3.2); font-size: calc(var(--u) * 1.2); line-height: 1; letter-spacing: -.02em; }
.os-br, .os-mn { display: inline-flex; align-items: center; gap: calc(var(--u) * .7); }
.os-br .mark { width: calc(var(--u) * 1.9); }
.os-mn i { display: block; width: calc(var(--u) * 1.5); height: calc(var(--u) * .55); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.os-page .scr-h, .os-page .scr-h:nth-child(2), .os-page .scr-h:nth-child(3) { top: 47%; }
.os-sb { height: 26%; transform: translateY(calc(var(--sy, 0) * 270%)); }

/* плашки: своим слоем, без перерисовки страницы */
.team { overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 44px); mask-image: linear-gradient(to bottom, transparent, #000 44px); }
.pill { will-change: transform; }

/* этапы: сверху шаги с полосой, посередине лента окон, соседние видны по краям, снизу текст и подсказка */
.sg { height: 760vh; }
.sg-rule { display: none; }
.sg-stage { --fw: min(calc((100vh - 340px) * 1.62), 72vw); position: absolute; left: 0; right: 0; top: clamp(44px, 6.4vh, 72px); bottom: clamp(108px, 13vh, 128px); display: flex; flex-direction: column; height: auto; translate: none; opacity: 0; }
.sgt { position: relative; flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 var(--pad); padding-top: 12px; }
.sgt-l { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; border-radius: 2px; background: var(--m8); }
.sgt-l b { display: block; height: 100%; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
.sgt-b { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 0; color: var(--m42); font-size: var(--t-m); line-height: 1.2; text-align: left; transition: color .3s; }
.sgt-b span { font-size: var(--t-s); }
.sgt-b b { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.sgt-b:hover, .sgt-b.done { color: var(--m70); }
.sgt-b.on { color: var(--white); }
.sg-frame { position: relative; left: auto; top: auto; flex: 1; width: auto; min-height: 0; height: auto; margin: clamp(14px, 2.2vh, 24px) 0; overflow: visible; }
.ws { left: 50%; top: 0; right: auto; bottom: auto; width: var(--fw); height: 100%; margin-left: calc(var(--fw) / -2); inset-inline-end: auto; transform-origin: 50% 50%; }
.sg-side { position: relative; left: auto; top: auto; order: 0; flex: none; width: auto; height: clamp(88px, 11.5vh, 108px); margin: 0 var(--pad); opacity: 1; text-align: center; }
.sg-tx, .sg-tx.on { left: 0; right: 0; top: 0; transform: translateX(var(--ty, 0px)); }
.sg-tx p { max-width: none; margin-top: 6px; }
.sg-of { display: none; }
.sg-hint { position: absolute; left: 0; right: 0; bottom: -28px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--t-s); line-height: 1; color: var(--soft); pointer-events: none; }
.sg-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sgdown 1.5s var(--ease) infinite; }
@keyframes sgdown { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* о нас: рамочки как у кнопок и плотные значки */
.ab-ic { --c: var(--white); width: 48px; height: 48px; border-radius: 0; color: var(--white); background: linear-gradient(var(--c), var(--c)) 0 0 / 9px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 9px, linear-gradient(var(--c), var(--c)) 100% 0 / 9px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 9px, linear-gradient(var(--c), var(--c)) 0 100% / 9px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 9px, linear-gradient(var(--c), var(--c)) 100% 100% / 9px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 9px; background-repeat: no-repeat; }
.ab-cols .ab-ic svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.ab-cols .ab-ic svg .cut { fill: none; stroke: var(--black); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .team { height: 280px; }
  .sg { height: 700vh; }
  .sg-stage { --fw: calc(100vw - var(--pad) * 2 - 28px); top: 40px; bottom: 96px; }
  .sgt-b { padding-bottom: 6px; }
  .sgt-b b { display: none; }
  .sg-frame { order: 0; flex: none; height: 46svh; }
  .sg-side { order: 0; height: 118px; }
  .sg-tx h3 { font-size: var(--t-xl); }
  .sg-tx p { font-size: var(--t-m); }
  .sg-hint { bottom: -24px; }
}
.sg-hint { font-size: var(--t-m); color: var(--white); }
.sg-hint svg { width: 16px; height: 16px; }

/* браузер: настоящий Chrome, один на Mac и сцену CRM */
.os-top { flex: none; }
.os-tabs { align-items: flex-end; gap: calc(var(--u) * .25); height: calc(var(--u) * 2.75); padding: 0 calc(var(--u) * .8) 0 calc(var(--u) * 1); background: #dee1e6; }
.os-lights { align-self: center; margin-right: calc(var(--u) * .9); }
.os-tab { position: relative; flex: 0 1 calc(var(--u) * 14); gap: calc(var(--u) * .55); width: auto; min-width: 0; height: calc(var(--u) * 2.2); padding: 0 calc(var(--u) * .6) 0 calc(var(--u) * .85); border-radius: calc(var(--u) * .7) calc(var(--u) * .7) 0 0; background: none; color: #484848; }
.os-tab.on { background: #fff; color: #1f1f1f; }
.os-tab.on::before, .os-tab.on::after { content: ''; position: absolute; bottom: 0; width: calc(var(--u) * .7); height: calc(var(--u) * .7); background: radial-gradient(circle at 0 0, transparent calc(var(--u) * .7), #fff calc(var(--u) * .7 + .5px)); }
.os-tab.on::before { left: calc(var(--u) * -.7); }
.os-tab.on::after { right: calc(var(--u) * -.7); transform: scaleX(-1); }
.os-tab .mark { width: calc(var(--u) * 1.05); }
.os-tt { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.2; }
.os-x, .os-plus { flex: none; display: grid; place-items: center; font-style: normal; line-height: 1; color: #626262; }
.os-x { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); font-size: calc(var(--u) * 1.05); }
.os-plus { align-self: center; width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); margin-left: calc(var(--u) * .4); font-size: calc(var(--u) * 1.3); }
.os-tool { gap: calc(var(--u) * .8); height: calc(var(--u) * 2.9); padding: 0 calc(var(--u) * 1); background: #fff; }
.os-tool > svg, .os-url svg { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); fill: none; stroke: #474a4f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.os-tool > svg:nth-of-type(2) { stroke: #b6b9bd; }
.os-url { flex: 1; min-width: 0; gap: calc(var(--u) * .6); height: calc(var(--u) * 2.1); padding: 0 calc(var(--u) * .9); border-radius: calc(var(--u) * 1.05); background: #f1f1f1; color: #1f1f1f; }
.os-url span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.os-who { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); }
.os-dots { flex: none; width: calc(var(--u) * .3); height: calc(var(--u) * 1.2); background: radial-gradient(circle, #474a4f 58%, transparent 62%) 50% 0 / 100% 33.4% repeat-y; }

/* созвон: панель звонка и индикатор голоса */
.mc { position: relative; }
.mq { position: absolute; left: 14px; top: 14px; display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.mq i { width: 3px; height: 40%; border-radius: 2px; background: #0a0a0a; animation: eq .7s ease-in-out infinite alternate; animation-play-state: paused; }
.mq i:nth-child(2) { animation-delay: -.25s; } .mq i:nth-child(3) { animation-delay: -.5s; }
.ws.on .mq i { animation-play-state: running; }
.mk { position: absolute; left: 0; right: 0; bottom: calc(clamp(20px, 2.8vw, 40px) + 62px); display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.mk i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(30, 30, 30, .78); color: #fff; }
.mk i.end { background: #e5484d; }
.mk svg { width: 20px; height: 20px; stroke-width: 2; }
.mk i.end svg { fill: currentColor; stroke: none; }

/* анализ: Excel с лентой, формулой, итогами и диаграммой */
.mw-t.ex-t { background: #107c41; color: #fff; }
.mw-t .ex-ic { width: 20px; height: 20px; }
.ex-t em { margin-left: auto; font-size: 12px; font-style: normal; opacity: .78; }
.b-ex { display: flex; flex-direction: column; padding: 0; background: #fff; font-size: 12px; line-height: 1; color: #272727; }
.ex-rb { flex: none; background: #f5f6f7; }
.ex-tb { display: flex; gap: 20px; padding: 9px 16px 0; color: #515151; }
.ex-tb span { padding-bottom: 7px; }
.ex-tb span.on { color: #107c41; box-shadow: inset 0 -2px 0 #107c41; }
.ex-tl { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 16px; background: #fff; border-bottom: 1px solid #e0e2e7; color: #3c4043; }
.ex-tl b { font-size: 13px; font-weight: 600; }
.ex-tl b:nth-child(2) { font-weight: 400; }
.ex-tl b:nth-child(3) { font-weight: 400; text-decoration: underline; }
.ex-tl u { width: 1px; height: 16px; background: #e0e2e7; text-decoration: none; }
.ex-tl span { padding: 5px 9px; border-radius: 5px; background: #f0f2f4; }
.ex-tl .sg-sum { margin-left: auto; font-size: 15px; font-weight: 400; }
.ex-f { flex: none; display: flex; align-items: center; gap: 12px; height: 30px; padding-right: 12px; border-bottom: 1px solid #e0e2e7; color: #3c4043; }
.ex-f u { width: 58px; padding: 9px 0; border-right: 1px solid #e0e2e7; text-align: center; text-decoration: none; }
.ex-f b { font-weight: 400; color: #8f8f8f; }
.ex-s { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 29%); }
.ex-g { position: relative; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)) minmax(0, .7fr); grid-auto-rows: 1fr; }
.ex-g > span { display: flex; align-items: center; min-width: 0; padding: 0 8px; overflow: hidden; border-right: 1px solid #e6e8ec; border-bottom: 1px solid #e6e8ec; font-size: 13px; white-space: nowrap; }
.ex-g .xh { justify-content: center; padding: 0; background: #f5f6f7; color: #727272; font-size: 12px; }
.ex-g .th { font-weight: 600; background: #fbfbfc; }
.ex-g .yes { background: #e2f3e7; color: #1c7a3e; }
.ex-g .no { background: #fbe4e4; color: #c03030; }
.ex-g .me { font-weight: 600; }
.ex-g .tot { justify-content: center; font-weight: 600; }
.ex-sel { position: absolute; left: 30px; right: 0; top: calc(100% / 7 * 2); height: calc(100% / 7); outline: 2px solid #107c41; outline-offset: -1px; pointer-events: none; }
.ex-ch { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-left: 1px solid #e0e2e7; }
.ex-ch h6 { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.2; }
.ex-bars { display: grid; gap: 9px; }
.ex-bars > div { display: grid; grid-template-columns: minmax(0, 76px) minmax(0, 1fr) 10px; align-items: center; gap: 8px; color: #515151; }
.ex-bars span { overflow: hidden; white-space: nowrap; }
.ex-bars i { display: block; height: 10px; overflow: hidden; border-radius: 2px; background: #eef0f3; }
.ex-bars u { display: block; height: 100%; background: #33a06c; transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease); }
.ws.on .ex-bars u { transform: scaleX(var(--v)); transition-delay: calc(.12s + var(--d, 0) * .07s); }
.ex-bars .me { color: #272727; font-weight: 600; }
.ex-bars .me u { background: #d13438; }
.ex-bars b { font-weight: 600; text-align: right; }
.ex-n { margin: auto 0 0; padding: 10px 12px; background: #fff5cc; box-shadow: inset 3px 0 0 #e8b400; font-size: 13px; line-height: 1.3; }
.xb em { padding: 4px 14px; font-style: normal; color: #727272; }

/* структура: дерево страниц сходится к заявке, рядом стикер */
.b-tree { padding: 18px clamp(18px, 2.4vw, 32px); }
.b-tree > b { padding: 11px 40px; }
.b-tree .tb { height: 16px; margin-top: 10px; }
.b-tree .tc section { padding: 12px; }
.b-tree .tc u:first-of-type { width: 100%; height: clamp(26px, 5vh, 46px); border-radius: 6px; background: #e3e3e3; }
.b-tree .tb2 { height: 14px; margin: 0; border: 1px solid rgba(30, 30, 30, .3); border-top: 0; border-radius: 0 0 8px 8px; }
.b-tree > strong { position: relative; flex: none; padding: 10px 40px; margin-top: 12px; border-radius: 10px; background: #0a0a0a; color: #fff; font-size: var(--t-l); line-height: 1; }
.b-tree > strong::before { content: ''; position: absolute; left: 50%; top: -12px; width: 1px; height: 12px; background: rgba(30, 30, 30, .3); }
.ts { position: absolute; right: 22px; bottom: 16px; width: 158px; margin: 0; padding: 12px 14px; background: #ffe27a; box-shadow: 0 8px 18px -10px rgba(16, 16, 16, .4); font-size: 14px; line-height: 1.25; rotate: 2deg; }

/* дизайн: холст Figma, спокойные фреймы едут вниз */
.b-fig { display: grid; grid-template-columns: 148px minmax(0, 1fr) 148px; padding: 0; background: #eceef1; font-size: 12px; line-height: 1.2; color: #383838; }
.b-fig aside { min-width: 0; padding: 14px 12px; background: #fff; }
.fi-l { border-right: 1px solid #e4e6ea; }
.fi-r { border-left: 1px solid #e4e6ea; }
.b-fig h6 { margin: 0 0 10px; font-size: 12px; font-weight: 600; line-height: 1.2; }
.fi-l > span { display: flex; align-items: center; gap: 7px; padding: 6px 6px; border-radius: 5px; }
.fi-l > span i { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 2px; opacity: .55; }
.fi-l > span.on { background: #f1f1f1; }
.fi-t span { display: block; padding: 5px 6px 5px 22px; color: #727272; }
.fi-r p { margin: 0 0 6px; color: #727272; }
.fi-r h6:not(:first-child) { margin-top: 16px; }
.fi-sw { display: flex; gap: 7px; }
.fi-sw i { width: 22px; height: 22px; border-radius: 50%; background: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(30, 30, 30, .14); }
.fi-sw i:nth-child(2) { background: #939393; } .fi-sw i:nth-child(3) { background: #e3e3e3; } .fi-sw i:nth-child(4) { background: #fff; }
.fi-c { position: relative; min-width: 0; overflow: hidden; }
.fi-p { position: absolute; left: 22px; right: 22px; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .42fr); gap: 20px; align-items: start; animation: fipan 22s ease-in-out infinite alternate; animation-play-state: paused; }
.ws.on .fi-p { animation-play-state: running; }
@keyframes fipan { to { transform: translateY(calc(-100% + 300px)); } }
.fi-f small { display: block; margin-bottom: 6px; font-size: 11px; color: #818181; }
.fr { padding: 8px 10px 0; background: #fff; box-shadow: 0 1px 3px rgba(16, 16, 16, .08); font-size: 7px; line-height: 1.2; color: #0a0a0a; }
.fr nav { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.fm { width: 10px; height: 10px; margin-right: auto; border-radius: 3px; background: #0a0a0a; }
.fr nav u { width: 16px; height: 2px; border-radius: 1px; background: #d3d3d3; text-decoration: none; }
.fr nav b { width: 22px; height: 8px; border-radius: 4px; background: #e3e3e3; }
.fr h5 { position: relative; margin: 0 0 8px; font-size: 15px; font-weight: 400; line-height: 1.04; letter-spacing: -.03em; }
.fr h5.sel { outline: 1px solid #0d99ff; outline-offset: 2px; }
.fr h5 em { position: absolute; left: 0; bottom: -15px; padding: 1px 4px; border-radius: 2px; background: #0d99ff; color: #fff; font-size: 7px; font-style: normal; letter-spacing: 0; line-height: 1.3; }
.fx { margin: 0 0 8px; }
.fx u, .fo u { display: block; height: 2px; margin-bottom: 4px; border-radius: 1px; background: #e3e3e3; text-decoration: none; }
.fi-btn { display: inline-block; margin-bottom: 12px; padding: 4px 8px; border-radius: 3px; background: #e9e9e9; color: #0a0a0a; }
.fp { height: 92px; margin-bottom: 14px; border-radius: 3px; background: linear-gradient(170deg, #edf0f5, #dedede); }
.fp.s { height: 62px; }
.fr h6 { margin: 0 0 6px; font-size: 9px; font-weight: 400; letter-spacing: -.01em; }
.f3, .f2, .f1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f1 { grid-template-columns: minmax(0, 1fr); }
.f3 i, .f2 i, .f1 i { height: 46px; border-radius: 3px; background: #f1f3f7; }
.f2 i { height: 58px; }
.fo { margin-bottom: 14px; }
.fo > div { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: center; padding: 7px 0; border-top: 1px solid #edf0f4; }
.fo i { width: 16px; height: 16px; border-radius: 3px; background: #edf0f5; }
.fo u:last-child { margin-bottom: 0; }
.ff { height: 42px; margin: 0 -10px; background: #eef0f5; }
.fi-cur { position: absolute; left: 34%; top: 104px; display: flex; align-items: flex-start; animation: ficur 9s ease-in-out infinite alternate; animation-play-state: paused; }
.ws.on .fi-cur { animation-play-state: running; }
@keyframes ficur { to { transform: translate(110px, 160px); } }
.fi-cur svg { width: 15px; height: 15px; fill: #0d99ff; stroke: #fff; stroke-width: 1.5; }
.fi-cur em { margin: 12px 0 0 -3px; padding: 2px 6px; border-radius: 4px; background: #0d99ff; color: #fff; font-size: 11px; font-style: normal; line-height: 1.3; }

/* запуск: CRM в Chrome, заявки падают в первую колонку, карточка едет по воронке */
.b-cr { display: grid; grid-template-columns: 54px minmax(0, 1fr); padding: 0; background: #f4f5f8; --st: 82px; --gap: 10px; }
.cr-a { display: grid; align-content: start; justify-items: center; gap: 8px; padding-top: 14px; background: #0a0a0a; color: #fff; }
.cr-a .mark { width: 22px; margin-bottom: 8px; }
.cr-a i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: rgba(255, 255, 255, .55); }
.cr-a i.on { background: rgba(255, 255, 255, .14); color: #fff; }
.cr-a svg { width: 18px; height: 18px; stroke-width: 1.8; }
.cr-m { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cr-h { flex: none; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; background: #fff; border-bottom: 1px solid #e6e8ee; font-size: 13px; line-height: 1; }
.cr-h h6 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.cr-ok { display: inline-flex; align-items: center; gap: 6px; color: #606060; }
.cr-ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #2fb36a; }
.cr-add { margin-left: auto; padding: 8px 12px; border-radius: 8px; background: #0a0a0a; color: #fff; }
.cr-b { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: 12px 14px 0; overflow: hidden; }
.cr-b > section { position: relative; min-width: 0; min-height: 0; }
.cr-b h6 { display: flex; align-items: center; justify-content: space-between; height: 22px; margin: 0 0 8px; font-size: 13px; font-weight: 500; line-height: 1; color: #404040; }
.cr-b h6 i { min-width: 20px; padding: 3px 5px; border-radius: 9px; background: #e7e7e7; font-size: 11px; font-style: normal; text-align: center; color: #606060; }
.cr-l { display: grid; gap: 8px; }
.cr-c, .cr-slot { height: calc(var(--st) - 8px); }
.cr-c { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 11px 12px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 16, .08); }
.cr-c b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.cr-c small { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11px; line-height: 1; white-space: nowrap; color: #818181; }
.cr-c small span { padding: 3px 6px; border-radius: 4px; background: #eef0f5; color: #404040; }
.cr-slot { border-radius: 10px; box-shadow: inset 0 0 0 1px #d9d9d9; }
.cr-w { position: relative; height: 100%; overflow: hidden; }
.cr-l.cn { animation: crfeed 12s var(--ease) -3s infinite; animation-play-state: paused; }
.ws.on .cr-l.cn { animation-play-state: running; }
@keyframes crfeed { 0%, 22% { transform: translateY(calc(var(--st) * -3)); } 33%, 55% { transform: translateY(calc(var(--st) * -2)); } 66%, 88% { transform: translateY(calc(var(--st) * -1)); } 100% { transform: none; } }
.cr-ring { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--st) - 8px); border-radius: 10px; box-shadow: inset 0 0 0 2px #0a0a0a; opacity: 0; animation: crring 4s linear -3s infinite; animation-play-state: paused; }
.ws.on .cr-ring { animation-play-state: running; }
@keyframes crring { 0%, 12% { opacity: 1; } 42%, 100% { opacity: 0; } }
.cr-g { position: absolute; left: 0; right: 0; top: 30px; z-index: 2; animation: crdrag 12s var(--ease) infinite; animation-play-state: paused; }
.ws.on .cr-g { animation-play-state: running; }
.cr-g svg { position: absolute; right: 20px; bottom: -8px; width: 18px; height: 18px; fill: #0a0a0a; stroke: #fff; stroke-width: 1.4; opacity: 0; animation: crhand 12s linear infinite; animation-play-state: paused; }
.ws.on .cr-g svg { animation-play-state: running; }
@keyframes crdrag { 0%, 14% { transform: none; } 18% { transform: rotate(-1.5deg) scale(1.03); } 40% { transform: translateX(calc(100% + var(--gap))) rotate(1.5deg) scale(1.03); } 44%, 92% { transform: translateX(calc(100% + var(--gap))); opacity: 1; } 96% { transform: translateX(calc(100% + var(--gap))); opacity: 0; } 97% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes crhand { 0%, 8% { opacity: 0; } 14%, 44% { opacity: 1; } 50%, 100% { opacity: 0; } }
.b-cr .mn { top: 12px; right: 14px; z-index: 3; width: min(340px, 56%); padding: 12px 14px; animation: mnin 12s var(--ease) -3s infinite; animation-play-state: paused; }
.ws.on .b-cr .mn { animation-play-state: running; }
@keyframes mnin { 0%, 28% { opacity: 0; transform: translateY(-16px); } 34%, 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-16px); } }
.b-cr .mn img { width: 38px; height: 38px; }

@media (max-width: 760px) {
  .mk { bottom: 84px; gap: 6px; }
  .mk i { width: 32px; height: 32px; }
  .mk svg { width: 15px; height: 15px; }
  .ex-tb { gap: 12px; padding: 7px 10px 0; font-size: 11px; }
  .ex-tl { display: none; }
  .ex-f { height: 26px; font-size: 11px; }
  .ex-f u { width: 34px; padding: 7px 0; }
  .ex-s { grid-template-columns: minmax(0, 1fr); }
  .ex-ch { display: none; }
  .ex-g { grid-template-columns: 18px minmax(0, 1.9fr) repeat(5, minmax(0, 1fr)) minmax(0, .6fr); }
  .ex-g > span { padding: 0 3px; font-size: 9px; }
  .ex-g .xh { font-size: 9px; }
  .ex-sel { left: 18px; }
  .b-tree { padding: 12px; }
  .b-tree > b { padding: 8px 22px; }
  .b-tree > strong { padding: 8px 22px; font-size: var(--t-m); }
  .ts { display: none; }
  .b-fig { grid-template-columns: minmax(0, 1fr); }
  .b-fig aside { display: none; }
  .fi-p { left: 12px; right: 12px; gap: 10px; }
  .b-cr { grid-template-columns: 36px minmax(0, 1fr); --st: 64px; --gap: 6px; }
  .cr-a .mark { width: 16px; }
  .cr-a i { width: 26px; height: 26px; }
  .cr-a svg { width: 14px; height: 14px; }
  .cr-ok, .cr-add { display: none; }
  .cr-h { height: 36px; padding: 0 10px; }
  .cr-b { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px 8px 0; }
  .cr-b > section:nth-child(4) { display: none; }
  .cr-c { padding: 7px; }
  .cr-c b { font-size: 10px; }
  .cr-c small { font-size: 9px; }
  .cr-c small span { padding: 2px 3px; }
  .cr-b h6 { font-size: 11px; }
}

/* телефон на холсте Figma: свой маленький экран со скруглением, ничего не вылезает */
.fi-p { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .56fr); }
.fi-f.fa2 .fr { position: relative; overflow: hidden; padding: 12px 7px 8px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(30, 30, 30, .16), 0 2px 6px rgba(16, 16, 16, .1); }
.fi-f.fa2 .fn { position: absolute; left: 50%; top: 4px; width: 26%; height: 4px; border-radius: 3px; background: #e3e3e3; transform: translateX(-50%); }
.fi-f.fa2 nav { gap: 0; margin-bottom: 10px; }
.fi-f.fa2 nav b { width: 14px; height: 7px; }
.fi-f.fa2 h5 { margin-bottom: 6px; font-size: 9px; line-height: 1.08; letter-spacing: -.02em; }
.fi-f.fa2 .fx { margin-bottom: 6px; }
.fi-f.fa2 .fi-btn { display: block; margin-bottom: 8px; padding: 4px 2px; font-size: 6px; text-align: center; white-space: nowrap; overflow: hidden; }
.fi-f.fa2 .fp { height: 62px; margin-bottom: 8px; }
.fi-f.fa2 .f1 { gap: 5px; margin-bottom: 0; }
.fi-f.fa2 .f1 i { height: 34px; }

/* шаги сверху не спорят с окном: тише и размыты, текущий чёткий, при наведении читаются все */
.sgt-l { height: 1px; background: var(--m8); }
.sgt-l b { background: var(--m42); }
.sgt-b { color: var(--m33); filter: blur(1.6px); transition: color .3s, filter .3s; }
.sgt-b.done { color: var(--m33); }
.sgt-b.on { color: var(--m60); filter: none; }
@media (hover: hover) { .sgt:hover .sgt-b { color: var(--m60); filter: none; } }

/* заголовок первого экрана в три строки */
.hero-title { grid-column: 1 / -1; max-width: none; }

/* линии в меню тише */
.mn-grid { border-color: color-mix(in srgb, var(--black) 8%, transparent); background: color-mix(in srgb, var(--black) 8%, transparent); }
.mn-contacts a { border-top-color: color-mix(in srgb, var(--black) 8%, transparent); }

/* телефон: блоки короче, заголовки и тарифы под узкий экран */
@media (max-width: 760px) {
  :root { --sec: 56px; }
  .hero { height: 380vh; height: 380svh; }
  .fw { height: 300vh; height: 300svh; }
  .sg { height: 450vh; height: 450svh; }
  .why { height: 270vh; height: 270svh; }
  .svc { height: 400vh; height: 400svh; }
  .hero-title { font-size: 8.1vw; line-height: 1.08; letter-spacing: -.03em; }
  .hero-shade { background: linear-gradient(to top, rgba(16, 16, 16, .68), rgba(16, 16, 16, .42) 46%, rgba(16, 16, 16, 0) 70%); }
  .fw-top { top: 19svh; translate: 0 0; }
  .fc { top: 56%; }
  .sgt-b { padding-bottom: 18px; }
  .plans { padding: 8px; gap: 6px; }
  .plan, .plan.on { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--white); color: var(--black); filter: none; }
  .plan { background: var(--card); color: var(--white); }
  .plan.on { background: var(--white); color: var(--black); }
  .calc-l .plan .tk-top, .calc-l .plan .tk-stub, .calc-l .plan.on .tk-top, .calc-l .plan.on .tk-stub { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; -webkit-mask: none; mask: none; box-shadow: none; transform: none; }
  .calc-l .plan .tk-top b, .calc-l .plan .tk-top span, .calc-l .plan .tk-row small, .calc-l .plan .pl-price { color: inherit; }
  .calc-l .plan .tk-top span, .calc-l .plan .tk-row small { opacity: .6; }
  .plan .tk-bar, .plan .tk-sel { display: none; }
  .plan .tk-stub { gap: 0; }
  .plan .tk-row { gap: 5px; }
  .cr-c small { font-size: 0; }
  .cr-c small span { font-size: 9px; }
  .cr-b h6 i { display: none; }
}

/* окно заказа: панель справа, на телефоне лист снизу */
.zk-veil { position: fixed; inset: 0; z-index: 130; background: rgba(16, 16, 16, .5); opacity: 0; pointer-events: none; transition: opacity .35s; }
.zk-veil.on { opacity: 1; pointer-events: auto; }
.zk { position: fixed; z-index: 131; top: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; width: min(500px, calc(100vw - 20px)); padding: 20px 24px 24px; overflow: auto; overscroll-behavior: contain; border-radius: 14px; background: var(--black); color: var(--white); visibility: hidden; transform: translateX(calc(100% + 20px)); transition: transform .6s var(--e), visibility 0s .6s; }
.zk.on { visibility: visible; transform: none; transition: transform .6s var(--e); }
html.zk-on .dock { opacity: 0; pointer-events: none; }
.zk-t { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-s); color: color-mix(in srgb, var(--white) 62%, transparent); }
.zk-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--white) 12%, transparent); color: var(--white); font-size: 20px; line-height: 1; }
.zk-h h3 { margin-top: 22px; font-size: var(--t-h); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; }
.zk-h p { margin-top: 10px; font-size: var(--t-m); line-height: 1.3; color: color-mix(in srgb, var(--white) 68%, transparent); }
.zk-bar { flex: none; height: 2px; margin: 20px 0; border-radius: 2px; background: color-mix(in srgb, var(--white) 14%, transparent); }
.zk-bar i { display: block; height: 100%; width: 33%; background: var(--white); transition: width .5s var(--e); }
.zk-st { display: none; }
.zk-st.on { display: block; animation: zkin .5s var(--e); }
@keyframes zkin { from { opacity: 0; transform: translateY(10px); } }
.zk-q { margin-bottom: 12px; font-size: var(--t-xl); line-height: 1.15; letter-spacing: -.02em; }
.zk-ops { display: grid; gap: 8px; margin-bottom: 20px; }
.zk-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zk-op { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 50px; padding: 12px 14px; border-radius: 8px; background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); font-size: var(--t-m); line-height: 1.2; text-align: left; transition: background .25s, color .25s; }
.zk-op small { flex: none; font-size: var(--t-s); color: color-mix(in srgb, var(--white) 60%, transparent); transition: color .25s; }
.zk-op.on { background: var(--white); color: var(--black); }
.zk-op.on small { color: color-mix(in srgb, var(--black) 62%, transparent); }
.zk-in { display: block; width: 100%; height: 50px; margin-bottom: 8px; padding: 0 14px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--white) 8%, transparent); color: var(--white); font: inherit; font-size: 16px; }
.zk-in[hidden] { display: none; }
.zk-st .zk-in#zkLink { margin: -12px 0 20px; }
.zk-in::placeholder { color: color-mix(in srgb, var(--white) 52%, transparent); }
.zk-in:focus { outline: 1px solid color-mix(in srgb, var(--white) 50%, transparent); }
.zk-note { margin-top: 8px; font-size: var(--t-s); line-height: 1.3; color: color-mix(in srgb, var(--white) 62%, transparent); }
.zk-or { margin-top: 18px; font-size: var(--t-s); color: color-mix(in srgb, var(--white) 62%, transparent); }
.zk-or a { margin-left: 8px; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.zk-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.zk-back { color: color-mix(in srgb, var(--white) 68%, transparent); font-size: var(--t-m); }
.zk-back[hidden], .zk-next[hidden] { display: none; }
.zk-next { flex: 1; display: flex; align-items: center; justify-content: center; max-width: 240px; height: 50px; margin-left: auto; border-radius: 8px; background: var(--white); color: var(--black); font-size: var(--t-m); }
.zk-next[disabled] { opacity: .4; cursor: default; }
@media (max-width: 760px) {
  html.zk-on { overflow: hidden; }
  .zk { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: calc(100svh - 16px); padding: 16px 16px 16px; transform: translateY(calc(100% + 20px)); }
  .zk[data-s="1"] .zk-h, .zk[data-s="2"] .zk-h, .zk[data-s="3"] .zk-h { display: none; }
  .zk-h h3 { margin-top: 12px; }
  .zk-bar { margin: 14px 0; }
  .zk-next { max-width: none; }
  .zk-ops { margin-bottom: 16px; }
  .zk-op { min-height: 46px; padding: 10px 12px; }
}

/* вопросы: только текст и тонкие линии, чтобы блок не повторял разбор */
.faq .hd-k { display: none; }
.faq .hd h2 { grid-column: 2; }
.faq-card { padding: 0; border-radius: 0; background: none; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 8px clamp(20px, 2.6vw, 36px); padding: 0 0 14px; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.faq-tabs button, .faq-tabs button.on { flex: none; height: auto; padding: 0; border-radius: 0; background: none; font-size: var(--t-m); line-height: 1.3; }
.faq-tabs button { color: var(--soft); }
.faq-tabs button.on { color: var(--white); }
.faq-list { margin-top: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item + .faq-item { border-top: 0; }
.faq-item.on { background: none; }
.faq-q { min-height: 62px; padding: 18px 0; }
.faq-q i, .faq-item.on .faq-q i { position: relative; width: 14px; height: 14px; margin: 0; border: 0; transform: none; }
.faq-q i::before, .faq-q i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .4s var(--ease); }
.faq-q i::after { transform: rotate(90deg); }
.faq-item.on .faq-q i::after { transform: none; }
.faq-a p { max-width: 36em; padding: 0 0 20px; color: var(--soft); }
.faq-ask { display: inline-flex; min-height: 0; margin-top: 18px; padding: 0; border-radius: 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; color: var(--white); line-height: 1.5; }
@media (max-width: 760px) {
  .faq .hd h2 { grid-column: 1; }
  .faq-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .faq-tabs { gap: 0 16px; padding-bottom: 6px; }
  .faq-tabs button, .faq-tabs button.on { padding: 9px 0; text-align: left; }
  .faq-ask { margin-top: 10px; padding: 10px 0; background: none; text-decoration: underline; text-underline-offset: 3px; }
  .faq-q { min-height: 56px; padding: 15px 0; }
  .faq-a p { padding: 0 0 16px; }
}

/* телефон, второй проход */
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.fc-go { display: none; }
@media (max-width: 760px) {
  .why { height: 320vh; height: 320svh; }
  .fc-go { position: absolute; right: 10px; bottom: 10px; display: block; padding: 7px 12px; border-radius: 16px; background: rgba(255, 255, 255, .92); color: #0a0a0a; font-size: var(--t-s); line-height: 1; }
  .rc-box { min-height: 0; gap: 12px; padding: 14px; }
  .rc-r { height: 350px; touch-action: pan-y; }
  .rc-foot { padding-top: 16px; }
  .fl-box { height: min(580px, calc(100svh - 32px)); }
  .fl-front { height: auto; padding: 16px 16px 18px; }
  .fl-front .btns { margin-top: 18px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .zk-h p { display: none; }
  .zk-op { min-height: 42px; padding: 8px 12px; }
  .zk-ops { gap: 6px; }
}

/* телефон, третий проход: тени легче, отступы меньше, вертикальный экран */
@media (max-width: 760px) {
  :root { --sec: 40px; }
  .why-c { width: 66vw; filter: drop-shadow(0 6px 14px rgba(16, 16, 16, .1)); }
  .mw { box-shadow: 0 14px 28px -20px rgba(16, 16, 16, .24), 0 0 0 1px rgba(30, 30, 30, .07); }
  .fc { box-shadow: 0 12px 26px -20px rgba(16, 16, 16, .2); }
  .hd { gap: 10px; margin-bottom: 20px; }
  .why { margin-top: -22svh; }
  .ab { gap: 16px; margin-top: -9svh; padding-bottom: 8px; }
  .ab-cols { gap: 18px; }
  .team { height: 250px; margin-bottom: 0; }
  .sg-end { top: 46%; }
  .mac-base { display: none; }
  .os-win { left: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); top: calc(var(--u) * 3.6); bottom: calc(var(--u) * 7.8); }
  .os-bar span:not(:first-of-type) { display: none; }
  .os-notch { width: calc(var(--u) * 16); }
  .os-logo { top: 14%; font-size: calc(var(--u) * 5); }
  .os-bg { object-position: 50% 62%; }
  .os-page .scr-h, .os-page .scr-h:nth-child(2), .os-page .scr-h:nth-child(3) { top: 46%; left: calc(var(--u) * 2.4); right: calc(var(--u) * 2.4); font-size: calc(var(--u) * 7.4); line-height: 1.02; }
}

/* сцены на всех языках: подписи не подрезаются */
.cr-c b { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ex-g .th { padding: 0 3px 0 6px; font-size: 11.5px; letter-spacing: -.02em; }
.ex-g .xc, .ex-g .tot { padding-inline: 6px; }
@media (max-width: 1000px) {
  .sgt-b b { display: none; }
  .ex-s { grid-template-columns: minmax(0, 1fr); }
  .ex-ch { display: none; }
  .cr-b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cr-b > section:nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  .ex-g .th { padding: 0 2px; font-size: 8.5px; }
  .ex-g .xc, .ex-g .tot { padding-inline: 3px; }
  .cr-c b { font-size: 10px; line-height: 1.2; }
}

/* после нырка сразу работы: блок заходит под экран ноутбука и проявляется, как только страница стала белой */
.fw { margin-top: -200vh; margin-top: -200svh; }
.fw-pin::before { content: ''; position: absolute; inset: 0; background: var(--black); opacity: var(--in, 0); }
.fw-stack { opacity: var(--in, 0); pointer-events: none; }
.fw-stack .fc { pointer-events: auto; }
.sg-hint { color: color-mix(in srgb, var(--white) 52%, transparent); }
.fw-top h2 .wi { color: var(--white) !important; }

/* белая подложка блока работ включена только через --in, иначе она наезжает на экран ноутбука */
#cases { background: none; }
/* другие проекты идут сразу за последней работой */
.rc { position: relative; z-index: 1; padding-top: clamp(28px, 4vh, 44px); }
@media (max-width: 760px) {
  .hero { height: 460vh; height: 460svh; }
  .rc { padding-top: 24px; }
}

/* расчёт из калькулятора в окне заказа: заново ничего выбирать не нужно */
.zk-sum { margin-bottom: 20px; padding: 14px; border-radius: 8px; background: color-mix(in srgb, var(--white) 8%, transparent); font-size: var(--t-m); line-height: 1.25; }
.zk-sum[hidden] { display: none; }
.zk-sum-t, .zk-sum-l, .zk-sum-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.zk-sum-t { margin-bottom: 10px; font-size: var(--t-s); color: color-mix(in srgb, var(--white) 62%, transparent); }
.zk-sum-e { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.zk-sum-l + .zk-sum-l { margin-top: 4px; }
.zk-sum-l span:last-child { flex: none; color: color-mix(in srgb, var(--white) 62%, transparent); }
.zk-sum-tot { margin-top: 12px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent); font-size: var(--t-s); color: color-mix(in srgb, var(--white) 62%, transparent); }
.zk-sum-tot b { flex: none; font-size: var(--t-xl); font-weight: 400; letter-spacing: -.02em; color: var(--white); }