/* GrowApps — редизайн. Токены ------------------------------------------------ */
:root {
  --paper: #EDF0F2;
  --paper-2: #E2E7EB;
  --ink: #0B1015;
  --ink-2: #56616B;
  --line: #CCD3D9;
  --teal: #2BC6CF;
  --teal-deep: #08808A;
  --white: #fff;

  --f-display: 'Unbounded', 'Onest', system-ui, sans-serif;
  --f-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 4vw, 56px);
  --edge: max(var(--gutter), calc((100vw - 1440px) / 2 + var(--gutter)));
  --head-h: 76px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

@property --peel { syntax: '<length>'; inherits: true; initial-value: 46px; }
@property --aura { syntax: '<color>'; inherits: true; initial-value: rgba(43, 198, 207, .5); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: var(--white); border-radius: 10px; }
.skip:focus { top: 12px; }

/* Кнопки и ссылки ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font: 600 .98rem/1 var(--f-body); letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); background: #1d2630; }
.btn:active { transform: translateY(0); }
.btn--wide { width: 100%; }
.btn--ink:hover { background: #000; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: .15rem;
}
.link-arrow::after { content: '→'; transition: transform .35s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

.eyebrow {
  font: 500 .72rem/1 var(--f-mono); font-stretch: 87.5%;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 1.4rem;
}
.h2 {
  font: 600 clamp(1.75rem, 3.1vw, 3.1rem)/1.08 var(--f-display);
  letter-spacing: -.035em; max-width: 21ch; text-wrap: balance;
}
.lead { font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.5; color: var(--ink-2); }

/* Шапка ------------------------------------------------------------------- */
.head {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h);
  color: var(--ink);
  transition: color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.head__in {
  height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.5rem);
}
.logo {
  font: 600 1.28rem/1 var(--f-display); letter-spacing: -.045em;
  text-decoration: none; margin-right: auto;
}
.logo span { color: var(--teal-deep); transition: color .4s var(--ease); }
.nav { display: flex; gap: clamp(1rem, 2.2vw, 2.25rem); }
.nav a, .head__tel { font-weight: 500; font-size: .95rem; text-decoration: none; opacity: .78; transition: opacity .25s; }
.nav a:hover, .head__tel:hover { opacity: 1; }
.head__tel { font-variant-numeric: tabular-nums; }
.btn--head { min-height: 44px; padding: 0 1.2rem; font-size: .9rem; }
.head[data-theme="dark"] { color: var(--white); }
.head[data-theme="dark"] .logo span { color: var(--teal); }
.head[data-theme="dark"] .btn--head { background: var(--white); color: var(--ink); }
.head[data-theme="dark"] :focus-visible { outline-color: var(--white); }
.head.is-solid { background: rgba(237, 240, 242, .94); box-shadow: 0 1px 0 var(--line); }
.head.is-tinted { background: var(--hbg, #0B1015); background: color-mix(in srgb, var(--hbg, #0B1015) 94%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }

.burger { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.menu {
  position: fixed; inset: var(--head-h) 0 0; z-index: 49;
  background: var(--paper); padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 1.5rem;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: .4rem; }
.menu nav a { font: 600 2rem/1.25 var(--f-display); letter-spacing: -.04em; text-decoration: none; }
.menu__tel { margin-top: auto; font-weight: 600; font-size: 1.15rem; text-decoration: none; }

/* Сцена: первый экран + кейсы ------------------------------------------------- */
.stage { position: relative; }
.js .stage { height: 540vh; height: 540svh; }
.stage__pin { position: relative; overflow: hidden; }
.js .stage__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
.stage__bg { position: absolute; inset: 0; background: var(--paper); }
.stage.is-auto .stage__bg { transition: background-color 1.2s var(--ease); }
.stage.is-handoff .stage__bg { transition: background-color .4s var(--ease); }

.stage__names { position: absolute; inset: 0; pointer-events: none; }
.stage__names span {
  position: absolute; left: 0; top: 50%;
  font: 800 clamp(5rem, 15vw, 17rem)/1 var(--f-display);
  letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .16);
  opacity: 0; will-change: transform, opacity;
}

/* intro */
.intro {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: calc(var(--head-h) + clamp(1.5rem, 6vh, 4.5rem)); padding-top: calc(var(--head-h) + clamp(1.5rem, 6svh, 4.5rem));
  padding-bottom: clamp(1.25rem, 5vh, 3rem); padding-bottom: clamp(1.25rem, 5svh, 3rem);
  will-change: transform, opacity;
  pointer-events: none;
}
.intro > * { pointer-events: auto; }
.intro__title {
  font: 600 clamp(2rem, 5.55vw, 5.1rem)/1.04 var(--f-display);
  letter-spacing: -.045em;
}
.intro__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.intro__title .line > span { display: inline-block; }
.intro__title em { font-style: normal; color: var(--teal-deep); }
/* окончание фразы набирается и стирается; невидимые варианты держат место, чтобы заголовок не прыгал */
.type__box { display: inline-grid; vertical-align: top; }
.type__size, .type__text { grid-area: 1 / 1; }
.type__size { display: inline-grid; visibility: hidden; }
.type__size > span { grid-area: 1 / 1; }
.type__text { justify-self: start; align-self: start; }
.type__text::after { content: ''; display: inline-block; width: .07em; height: .78em; margin-left: .06em; vertical-align: -.04em; background: currentColor; border-radius: 1px; animation: caret 1.05s steps(1) infinite; }
.type.is-typing .type__text::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }

/* счётчик справа стоит от этого блока (раньше это держалось на сдвиге от анимации появления) */
.intro__foot { position: relative; margin-top: clamp(1.75rem, 5vh, 3.25rem); margin-top: clamp(1.75rem, 5svh, 3.25rem); }
.intro__lead { max-width: 25rem; }
.intro__lead p { font-size: clamp(1.02rem, 1.2vw, 1.15rem); line-height: 1.5; color: var(--ink-2); }
.intro__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.75rem; margin-top: 1.6rem; }

/* док в правом углу: значки приложений клиентов; активное — на телефоне; наведение показывает, клик открывает кейс */
.dock { position: absolute; right: 0; top: 0; display: grid; justify-items: end; }
.dock__label { font: 500 .66rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.dock__apps { display: flex; gap: 10px; margin-top: .85rem; padding: 9px 9px 13px; border-radius: 22px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 14px 30px -24px rgba(11, 16, 21, .4); }
.dock__app { position: relative; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--c); color: var(--white); font: 700 .76rem/1 var(--f-display); letter-spacing: -.05em; text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.dock__app::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity .3s; }
.dock__app.is-on { transform: translateY(-4px) scale(1.08); box-shadow: 0 12px 20px -10px rgba(11, 16, 21, .5); }
.dock__app.is-on::after { opacity: .75; }
@media (hover: hover) { .dock__app:hover { transform: translateY(-4px) scale(1.08); } }
.dock__app:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }


/* phone */
.phone {
  position: absolute; z-index: 2;
  left: 50%; top: calc(50% + var(--head-h) / 2);
  height: min(82vh, 860px); height: min(82svh, 860px); aspect-ratio: 671 / 1400;
  transform: translate(-50%, -50%) translateY(calc(var(--intro, 1) * var(--lift, 37vh))) scale(calc(1 - var(--intro, 1) * .06)); transform: translate(-50%, -50%) translateY(calc(var(--intro, 1) * var(--lift, 37svh))) scale(calc(1 - var(--intro, 1) * .06));
  perspective: 1800px;
  will-change: transform;
  transition: --aura 1s var(--ease);
}
.phone::before {
  content: ''; position: absolute; inset: -16% -75%; z-index: -1;
  background: radial-gradient(closest-side, var(--aura), transparent 72%);
}
.phone__lift { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
/* тень и затемнение (--dim: доворачиваясь при смене экрана, телефон чуть темнеет) — на общем слое:
   на самих картинках маска шторки обрезала бы тень по краю картинки */
.phone__shots { position: absolute; inset: 0; perspective: 1800px; filter: brightness(var(--dim, 1)) drop-shadow(0 30px 40px rgba(11, 16, 21, .28)); }
/* картинки подогнаны так, что корпус у всех одной высоты и по центру (--l/--t/--w/--h/--o — из build.py) */
.phone img {
  position: absolute; left: var(--l, 0%); top: var(--t, 0%); width: var(--w, 100%); height: var(--h, 100%);
  object-fit: contain; transform-origin: var(--o, 50% 50%);
  opacity: 0;
}
.phone img.is-on { opacity: 1; }
/* 3D-телефон (js/phone3d.js) поверх картинок: холст больше коробки телефона, чтобы при повороте
   его не обрезало; корпус в покое совпадает с картинкой. Картинки — пока грузится и без WebGL */
.phone__gl, .nf__gl { position: absolute; left: -15%; top: -6%; width: 130%; height: 112%; opacity: 0; pointer-events: none; transition: opacity .3s linear; }
.phone__gl { filter: drop-shadow(0 30px 40px rgba(11, 16, 21, .28)); }
.nf__gl { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .3)); }
.phone.is-3d .phone__gl, .nf__phone.is-3d .nf__gl { opacity: 1; }
.phone.is-3d-on .phone__shots, .nf__phone.is-3d-on .nf__shots { visibility: hidden; }
/* смена экрана шторкой: новый проходит слева направо, старый уходит вслед за ним; --wipe — из site.js.
   Маска шире картинки в 2,2 раза: при 100% мягкий край (11% ширины) целиком левее телефона, при 0% — правее */
.phone img.is-wipe-in, .nf__phone img.is-wipe-in { -webkit-mask-image: linear-gradient(90deg, #000 47.5%, transparent 52.5%); mask-image: linear-gradient(90deg, #000 47.5%, transparent 52.5%); }
.phone img.is-wipe-out, .nf__phone img.is-wipe-out { -webkit-mask-image: linear-gradient(90deg, transparent 47.5%, #000 52.5%); mask-image: linear-gradient(90deg, transparent 47.5%, #000 52.5%); }
.phone img.is-wipe-in, .phone img.is-wipe-out, .nf__phone img.is-wipe-in, .nf__phone img.is-wipe-out {
  -webkit-mask-size: 220% 100%; mask-size: 220% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: var(--wipe, 100%) 0; mask-position: var(--wipe, 100%) 0;
}
/* карточка «как в сторе» у телефона: значок, категория, реальные цифры; меняется вместе с приложением */
.stores { position: absolute; top: 27%; left: 100%; margin-left: 1.2rem; width: 17rem; opacity: var(--intro, 1); }
.store {
  position: absolute; left: 0; top: 0; width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .85rem; align-items: center;
  padding: 1rem; border-radius: 22px; background: var(--white); color: var(--ink); text-decoration: none;
  box-shadow: 0 24px 50px -24px rgba(11, 16, 21, .35);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s;
}
.store.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.store__icon { grid-row: span 2; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; background: var(--c); color: var(--white); font: 700 1.05rem/1 var(--f-display); letter-spacing: -.05em; }
.store__name { display: flex; justify-content: space-between; gap: .5rem; font-size: 1rem; font-weight: 600; line-height: 1.15; }
.store__name i { font-style: normal; color: var(--ink-2); transition: transform .3s var(--ease); }
.store:hover .store__name i { transform: translateX(3px); }
.store__kind { font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.store__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid #E6EAED; font-size: .84rem; line-height: 1.3; }
.store__meta b { font-weight: 700; }
.store__meta span + span { color: var(--ink-2); }

/* панели кейсов */
.panels { position: absolute; inset: 0; z-index: 4; pointer-events: none; max-width: none; margin: 0; padding: 0; }
.panel {
  position: absolute; left: var(--edge); top: calc(50% + var(--head-h) / 2);
  width: min(27rem, 29vw);
  color: var(--white);
  opacity: 0; visibility: hidden;
  transform: translateY(calc(-50% + var(--dy, 0px)));
  will-change: transform, opacity;
}
.panel.is-live { pointer-events: auto; }
.panel__kind { font: 500 .7rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }
.panel__name { margin-top: 1rem; font: 600 clamp(1.5rem, 2.2vw, 2.25rem)/1.05 var(--f-display); letter-spacing: -.04em; hyphens: manual; }
.panel__text { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.5; opacity: .88; }
.panel__facts { margin-top: 1.8rem; display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .9rem; }
.panel__facts div { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(6.5rem, auto) 1fr; grid-template-columns: subgrid; align-items: baseline; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .22); }
.panel__facts dt { font: 500 1.5rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: -.04em; }
.panel__facts dd { font-size: .9rem; line-height: 1.4; opacity: .8; }
.panel .link-arrow { margin-top: 1.8rem; }
.panel :focus-visible { outline-color: var(--white); }

/* навигация по кейсам */
.rail {
  position: absolute; right: var(--edge); top: calc(50% + var(--head-h) / 2); z-index: 4;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  opacity: 0; pointer-events: none;
}
.rail.is-live { pointer-events: auto; }
.rail button {
  display: flex; align-items: center; gap: .7rem;
  padding: .45rem 0; border: 0; background: none;
  color: var(--white); opacity: .45;
  font: 500 .68rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase;
  transition: opacity .3s var(--ease);
}
.rail button::after { content: ''; width: 14px; height: 1.5px; background: currentColor; transition: width .4s var(--ease); }
.rail button:hover { opacity: .8; }
.rail button[aria-current="true"] { opacity: 1; }
.rail button[aria-current="true"]::after { width: 36px; }
.rail :focus-visible { outline-color: var(--white); }

/* Без JS: сцена превращается в обычный список кейсов */
html:not(.js) .intro { position: relative; min-height: 100vh; min-height: 100svh; }
html:not(.js) .phone, html:not(.js) .rail, html:not(.js) .stage__names { display: none; }
html:not(.js) .panels { position: relative; display: grid; gap: 2rem; padding: 4rem var(--gutter); background: var(--ink); }
html:not(.js) .panel { position: relative; left: 0; top: 0; transform: none; opacity: 1; visibility: visible; width: auto; }

/* Загрузка */
.js .intro__title .line > span { animation: rise 1.05s var(--ease) both; }
.js .intro__title .line:nth-child(2) > span { animation-delay: .09s; }
.js .intro__title .line:nth-child(3) > span { animation-delay: .18s; }
.js .intro__foot { animation: fade .9s var(--ease) .45s both; }
.js .phone__lift { animation: lift 1.3s var(--ease) .25s both; }
.js .head { animation: fade .8s var(--ease) both; }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lift { from { transform: translateY(38vh); transform: translateY(38svh); } to { transform: none; } }

/* Доверие и цифры ------------------------------------------------------------ */
.proof { padding-block: clamp(5rem, 10vw, 9.5rem) clamp(4rem, 8vw, 7.5rem); }
/* стена клиентов: одинаковые плашки; у клиентов с кейсом при наведении выезжает их цифра */
.proof__top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem 3rem; align-items: end; }
.proof__top .lead { max-width: 26rem; }
.clients { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.client { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 8.2; padding: 1rem; border-radius: 18px; background: var(--white); box-shadow: 0 1px 0 rgba(11, 16, 21, .05); overflow: hidden; }
.client img { max-width: 100%; max-height: 74px; width: auto; height: auto; border-radius: 10px; }
.client--link { color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.client--link:hover, .client--link.is-hover { transform: translateY(-4px); box-shadow: 0 20px 34px -22px rgba(11, 16, 21, .5); }
.client__fact { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: .5rem; padding: .55rem .8rem; background: var(--c); color: var(--white); font: 600 .78rem/1.2 var(--f-body); transform: translateY(101%); transition: transform .35s var(--ease); }
.client--link:hover .client__fact, .client--link:focus-visible .client__fact, .client--link.is-hover .client__fact { transform: none; }
.client--more { place-items: start; align-content: center; gap: .3rem; background: none; box-shadow: none; border: 1.5px dashed var(--line); }
.client--more b { font: 600 1.5rem/1 var(--f-display); letter-spacing: -.04em; }
.client--more span { font-size: .82rem; line-height: 1.3; color: var(--ink-2); }
.proof__nums { margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.proof__nums div { padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.proof__nums dt { font: 700 clamp(1.9rem, 3.2vw, 3.1rem)/1 var(--f-display); letter-spacing: -.05em; }
.proof__nums dd { margin-top: .6rem; font-size: .92rem; line-height: 1.4; color: var(--ink-2); max-width: 15rem; }
/* На телефоне и сенсорных экранах наведения нет: цифра не закрывает логотип,
   а становится подписью под ним — в цвете клиента. */
@media (max-width: 760px), (hover: none) {
  .client { aspect-ratio: auto; min-height: 7.5rem; align-content: center; gap: .1rem; padding: 1rem .7rem; }
  .client--link { padding-bottom: .85rem; }
  .client__fact { position: static; transform: none; padding: .5rem .1rem 0; background: none; color: var(--c); font-size: .7rem; line-height: 1.25; text-align: center; justify-content: center; }
  .client__fact i { display: none; }
}

/* Где ломаются продукты ------------------------------------------------------- */
/* Единственная тёмная полоса страницы. Прямая речь заказчика: сцена тише, удар громче. */
.pains { padding-block: clamp(4.5rem, 9vw, 8.5rem); background: var(--ink); color: var(--white); }
.pains__eyebrow { color: rgba(255, 255, 255, .5); }
.pains__head { max-width: 22ch; color: var(--white); }
.pains__grid { margin-top: clamp(3rem, 6vw, 5rem); display: grid; }
.pain {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end; gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.7rem, 3.2vw, 2.7rem);
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.pain:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.pain__t { font: 600 clamp(1.45rem, 3vw, 2.7rem)/1.1 var(--f-display); letter-spacing: -.045em; }
.pain__t span { display: block; color: rgba(255, 255, 255, .42); } /* сцена */
.pain__t b { display: block; font-weight: inherit; }               /* удар */
.pain__t b::before { content: '— '; color: var(--teal); }
.pain__p { max-width: 26ch; justify-self: end; text-align: right; padding-bottom: .35rem; color: rgba(255, 255, 255, .5); font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.5; }
.js .pain > * { transform: translateY(16px); opacity: 0; }
.pains.is-in .pain > * { transform: none; opacity: 1; transition: transform .75s var(--ease) calc(var(--i) * 110ms + var(--d, 0ms)), opacity .75s var(--ease) calc(var(--i) * 110ms + var(--d, 0ms)); }
.pain__p { --d: 110ms; }
.pains__out { margin-top: clamp(3rem, 6vw, 5rem); }
.pains__two { max-width: 34rem; color: rgba(255, 255, 255, .5); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; }
.pains__third { margin-top: clamp(1rem, 2vw, 1.5rem); font: 600 clamp(2rem, 4.6vw, 4.5rem)/1.08 var(--f-display); letter-spacing: -.05em; }
.pains__third span {
  background: linear-gradient(transparent 58%, rgba(43, 198, 207, .6) 0) no-repeat;
  background-size: 0 100%; padding-inline: .06em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .85s var(--ease) .15s;
}
.pains.is-in .pains__third span { background-size: 100% 100%; }
/* своего отступа у блока не было — воздух над заголовком давал нижний отступ блока боли.
   Тот стал тёмным, и заголовок упёрся в край полосы */
/* снизу тоже нужен отступ: иначе кружок подсказки под карточками упирается
   в волосяную линию следующего блока */
.versus { padding-block: clamp(4.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); }
.flips { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; perspective: 1400px; }
/* внешний слой — наклон вслед за курсором, средний — «вздрагивание»-намёк, внутренний — сам переворот */
.flip {
  position: relative; height: clamp(300px, 27vw, 380px); border-radius: 28px; cursor: pointer;
  transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--ease);
}
.flip.is-tilting { transition-duration: .15s; }
.flip:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 4px; }
.flip__tease { height: 100%; transform-style: preserve-3d; }
.flip.is-hint .flip__tease { animation: flip-tease 1.6s var(--ease) var(--d, 0s) both; }
@keyframes flip-tease {
  0%, 100% { transform: none; --peel: 46px; }
  28% { transform: rotateY(-14deg) rotateX(3deg); --peel: 104px; }
  58% { transform: rotateY(4deg); --peel: 60px; }
}
.flip.is-lifting { --peel: 70px; }
.flip__card { position: relative; height: 100%; transform-style: preserve-3d; transform: rotateY(calc(var(--f, 0) * 180deg)); transition: transform 1s cubic-bezier(.3, 1.3, .45, 1); }
.flip.is-flipped .flip__card { transform: rotateY(180deg); }
html:not(.js) .flip:hover .flip__card { transform: rotateY(180deg); }
.flips.is-scrub .flip__card { transition: none; }
.flip__side {
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: clamp(1.4rem, 2.3vw, 2rem); border-radius: 28px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.flip__who { font: 500 .72rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; }
.flip__claim { margin-top: auto; font: 600 clamp(1.45rem, 2.2vw, 2.05rem)/1.1 var(--f-display); letter-spacing: -.045em; text-wrap: balance; }
.flip__old { background: var(--white); }
.flip__old .flip__who { color: var(--ink-2); }
.flip__old .flip__claim { color: #9AA6B2; text-decoration: line-through; text-decoration-color: rgba(11, 16, 21, .3); text-decoration-thickness: 2px; }
.flip__quote { margin-top: 1rem; max-width: 80%; color: var(--ink-2); quotes: '«' '»'; }
/* загнутый уголок: под ним — тёмная обратная сторона с бирюзовым краем */
.flip__old::before, .flip__old::after {
  content: ''; position: absolute; right: 0; bottom: 0; width: var(--peel); height: var(--peel);
  pointer-events: none; transition: width .45s var(--ease), height .45s var(--ease);
}
.flip__old::before { background: linear-gradient(to top left, var(--paper) 50%, transparent calc(50% + .5px)); }
.flip__old::after {
  background: linear-gradient(to top left, transparent 50%, var(--teal) calc(50% + .5px), var(--teal) calc(50% + 2px), #27313A calc(50% + 2.5px), #0B1015 100%);
  border-top-left-radius: 12px; filter: drop-shadow(-4px -4px 8px rgba(11, 16, 21, .2));
}
.flip__new { background: var(--ink); color: var(--white); transform: rotateY(180deg); }
.flip__new .flip__who { color: var(--teal); }
.flip__new::after {
  content: ''; position: absolute; inset: 0 -40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
  transform: translateX(-70%);
}
.flip.is-flipped .flip__new::after, .flip.is-shown .flip__new::after { animation: flip-glare 1.2s var(--ease) .4s both; }
@keyframes flip-glare { to { transform: translateX(70%); } }
.flip__fact { margin-top: 1rem; color: rgba(255, 255, 255, .72); line-height: 1.45; }
.flip__fact em { font-style: normal; color: inherit; transition: color .6s ease; }
.flip.is-flipped .flip__fact em, .flip.is-shown .flip__fact em, html:not(.js) .flip__fact em { color: var(--teal); transition-delay: .55s; }
.flips__hint { display: flex; align-items: center; gap: .65rem; margin-top: 1.4rem; color: var(--ink-2); font-size: .95rem; transition: opacity .6s var(--ease); }
.flips__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--teal-deep); font-size: 1rem; }
.flips.is-used + .flips__hint { opacity: 0; }
@media (hover: hover) { .flips__hint-touch { display: none; } }
@media (hover: none) { .flips__hint-mouse { display: none; } }

/* Процесс -------------------------------------------------------------------- */
.process { padding-block: clamp(4.5rem, 9vw, 8rem); overflow: hidden; border-top: 1px solid var(--line); }
.process__top { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; align-items: end; }
.process__top .lead { max-width: 27rem; }
/* кривая роста: линия прорисовывается по мере прокрутки (site.js), точки событий лежат на ней */
.curve { margin-top: clamp(3rem, 6vw, 5rem); }
.curve__chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); height: clamp(200px, 26vw, 340px); }
.curve__zone { border-left: 1px dashed #BFC8CF; padding-left: 1.4rem; }
.curve__zone:first-child { border-left: 0; padding-left: 0; }
.curve__label { font: 500 .7rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); transition: color .3s; }
.curve__zone.is-on .curve__label { color: var(--teal-deep); }
.curve__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-60% calc(100% - var(--reveal, 300%)) -10% -2%); }
.curve__line { fill: none; stroke: var(--teal-deep); stroke-width: 4px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.curve__ev { position: absolute; width: 0; height: 0; }
.curve__ev i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--teal-deep); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.curve__ev span { position: absolute; left: -2px; top: 15px; white-space: nowrap; font-size: .85rem; line-height: 1.2; transition: opacity .4s, transform .4s; }
.curve__chart.is-live .curve__ev:not(.is-on) i { transform: scale(0); }
.curve__chart.is-live .curve__ev:not(.is-on) span { opacity: 0; transform: translateY(5px); }
/* «перо» на конце линии; к концу прокрутки уходит за край экрана вместе с линией */
.curve__pen { display: none; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--teal-deep); box-shadow: 0 0 0 7px rgba(43, 198, 207, .25); pointer-events: none; }
.curve__chart.is-live .curve__pen { display: block; }
.curve__steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); margin-top: 1.8rem; }
.curve__step { position: relative; padding-right: 2rem; }
.curve__step + .curve__step { padding-left: 1.4rem; }
.curve__title { margin-bottom: .8rem; font: 600 clamp(1.6rem, 2.4vw, 2.3rem)/1 var(--f-display); letter-spacing: -.045em; }
.curve__step p { color: var(--ink-2); max-width: 24rem; }
.curve__marks { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin-top: 1rem; font-size: .9rem; }
.curve__marks li { display: flex; align-items: center; gap: .5rem; }
.curve__marks li::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--teal-deep); }
.curve__step .curve__note { position: relative; margin-top: 1.5rem; max-width: 17.5rem; padding: .9rem 1rem 1rem; border-radius: 3px 3px 16px 3px; background: #FFE58A; color: #3A3100; font-size: .88rem; line-height: 1.45; box-shadow: 0 12px 20px -14px rgba(58, 49, 0, .55); transform: rotate(-2deg); transition: transform .35s var(--ease); }
.curve__note::before { content: ''; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); transform: rotate(3deg); }
@media (hover: hover) { .curve__note:hover { transform: rotate(0deg) scale(1.03); } }
.curve__years { margin-top: 1.2rem; font: 600 .74rem/1 var(--f-mono) !important; font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-deep) !important; }
.curve__years::after { content: ' →'; }
/* номер и название этапа видны в зоне графика; в тексте — только для экранных чтецов (на узких экранах — видно) */
.curve__kind, .curve__marks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1199px) {
  /* подписи событий на графике не помещаются — события перечислены под текстом этапа */
  .curve__ev span { display: none; }
  .curve__marks { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}

.scope {
  margin-top: clamp(3.5rem, 7vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(12rem, .5fr) 1.5fr; gap: 1rem 3rem;
}
.scope__title { font-weight: 600; }
.scope__list { display: flex; flex-wrap: wrap; gap: .5rem 0; }
.scope__list li { font-size: 1.02rem; }
.scope__list li:not(:last-child)::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); margin: 0 .9rem; vertical-align: middle; }

/* Призыв --------------------------------------------------------------------- */
.cta { background: var(--teal); color: var(--ink); padding-block: clamp(4.5rem, 9vw, 8.5rem); }
/* заголовок и офисы слева, переписка справа; на планшете переписка под заголовком, офисы рядом */
.cta__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "head talk" "info talk"; gap: 0 4rem; }
.cta__head { grid-area: head; }
.cta__title { font: 700 clamp(3rem, 6.8vw, 7rem)/.9 var(--f-display); letter-spacing: -.065em; }
.cta__lead { margin-top: 1.8rem; max-width: 30rem; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; }
.cta__info { grid-area: info; margin-top: clamp(2.5rem, 5vw, 4rem); }
.cta__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; max-width: 42rem; }
.office { display: grid; gap: .45rem; justify-items: start; padding-top: 1.1rem; border-top: 1.5px solid rgba(11, 16, 21, .25); }
.office__city { font: 600 .72rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.office a[href^="tel"] { font-weight: 600; font-size: 1.2rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.office__route { margin-top: .3rem; font-size: .92rem; text-underline-offset: 3px; }
.cta__hours { margin-top: 2rem; font: 500 .72rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; }

/* Переписка в телефоне ---------------------------------------------------------- */
.talk { grid-area: talk; }
.talk__phone { position: relative; width: 380px; height: 680px; padding: 11px; border-radius: 46px; background: var(--ink); box-shadow: inset 0 0 0 2px #3A4148, 0 0 0 1.5px #A7B0B8, 0 50px 70px -35px rgba(11, 16, 21, .6); }
.talk__screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 36px; overflow: hidden; background: #EEF2F4; }
.talk__screen::before { content: ''; position: absolute; top: 10px; left: 50%; z-index: 3; width: 84px; height: 22px; margin-left: -42px; border-radius: 12px; background: var(--ink); }
.talk__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 42px; display: flex; justify-content: space-between; align-items: center; padding: 1px 22px 0 34px; font-size: .84rem; font-weight: 600; letter-spacing: -.01em; }
.talk__status, .sent__status { display: flex; align-items: center; gap: 5px; }
.talk__status svg, .sent__status svg { display: block; fill: currentColor; }
/* полоска «домой» внизу экрана */
.talk__screen::after { content: ''; position: absolute; bottom: 8px; left: 50%; z-index: 3; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: var(--ink); }
.talk__head { display: flex; gap: .6rem; align-items: center; padding: 46px 14px 12px 10px; background: var(--white); border-bottom: 1px solid #E1E6EA; }
.talk__back { display: grid; color: var(--teal-deep); margin-right: -.3rem; }
.talk__who { flex: 1; min-width: 0; }
.talk__call { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #E4F7F8; color: var(--teal-deep); transition: background-color .2s; }
.talk__call:hover { background: #CDEFF1; }
.talk__call:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.talk__ava { flex: none; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); font: 700 .8rem/1 var(--f-display); letter-spacing: -.05em; }
/* «GA» как в логотипе на тёмном: G белая, A бирюзовая */
.talk__ava span, .push__icon span { color: var(--teal); }
.talk__name { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.talk__sub { font-size: .72rem; line-height: 1.3; color: var(--ink-2); }
.talk__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; }
.talk__log::-webkit-scrollbar { display: none; }
.talk__log::before { content: ''; margin-top: auto; } /* сообщения прижаты к полю ввода, как в мессенджере */
.talk__msg { align-self: flex-start; max-width: 86%; padding: .6rem .8rem; border-radius: 18px 18px 18px 6px; background: var(--white); font-size: .86rem; line-height: 1.4; box-shadow: 0 1px 1px rgba(11, 16, 21, .05); animation: talk-in .35s var(--ease) both; }
.talk__msg b { font-weight: 600; }
.talk__msg--me { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--teal-deep); color: var(--white); }
.talk__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 2px 0 4px; animation: talk-in .35s .15s var(--ease) both; }
.talk__chip { max-width: 100%; padding: .45rem .75rem; border: 1.5px solid var(--teal-deep); border-radius: 18px; background: var(--white); color: var(--teal-deep); font: 500 .8rem/1.3 var(--f-body); text-align: right; transition: background-color .2s, color .2s, opacity .2s; }
.talk__chip[aria-pressed="true"] { background: var(--teal-deep); color: var(--white); }
.talk__chips.is-chosen .talk__chip[aria-pressed="false"] { opacity: .45; }
.talk__chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .talk__chip:hover { background: #E4F7F8; opacity: 1 !important; } .talk__chip[aria-pressed="true"]:hover { background: var(--teal-deep); } }
/* появление при первом показе: приветствие, затем варианты по одному (без JS — просто видны) */
.talk--play [data-intro] { animation: talk-intro .45s var(--ease) .35s both; }
.talk--play .talk__chips { animation: none; }
.talk--play .talk__chip { animation: talk-intro .4s var(--ease) both; }
.talk--play .talk__chip:nth-child(1) { animation-delay: .8s; }
.talk--play .talk__chip:nth-child(2) { animation-delay: .9s; }
.talk--play .talk__chip:nth-child(3) { animation-delay: 1s; }
.talk--play .talk__chip:nth-child(4) { animation-delay: 1.1s; }
@keyframes talk-intro { from { opacity: 0; transform: translateY(8px); } }
.talk__typing { align-self: flex-start; display: flex; gap: 4px; padding: .8rem .9rem; border-radius: 18px 18px 18px 6px; background: var(--white); }
.talk__typing i { width: 6px; height: 6px; border-radius: 50%; background: #9AA6B0; animation: talk-dot 1s infinite; }
.talk__typing i:nth-child(2) { animation-delay: .15s; }
.talk__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes talk-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes talk-dot { 30% { transform: translateY(-3px); background: var(--ink-2); } }
.talk__form[hidden] { display: none; }
.talk__form { display: grid; gap: 10px; padding: 12px 16px 36px; background: var(--white); border-top: 1px solid #E1E6EA; }
.talk__fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
.talk__fields input { width: 100%; height: 40px; padding: 0 .95rem; border: 1.5px solid transparent; border-radius: 20px; background: #EEF2F4; color: var(--ink); font: inherit; font-size: .88rem; }
.talk__fields input::placeholder { color: #8B97A1; }
.talk__fields input:focus { outline: none; border-color: var(--teal-deep); background: var(--white); }
.talk__fields [aria-invalid="true"] { border-color: #C0362C; }
.talk__send { width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--teal-deep); color: var(--white); }
.talk__send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.talk__ok { display: flex; gap: .5rem; align-items: center; padding-left: 2px; font-size: .7rem; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.talk__ok input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--teal-deep); }
.talk__ok a { color: inherit; text-underline-offset: 2px; }
.talk__error { font-size: .75rem; line-height: 1.35; font-weight: 500; color: #B42318; }
html:not(.js) .talk { display: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cta :focus-visible { outline-color: var(--ink); }

/* Подвал --------------------------------------------------------------------- */
.foot { background: var(--ink); color: rgba(255, 255, 255, .62); padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom)); }
.foot__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem 4rem; flex-wrap: wrap; }
.logo--foot { color: var(--white); margin: 0; }
.logo--foot span { color: var(--teal); }
.foot__legal { font-size: .85rem; line-height: 1.7; text-wrap: pretty; }
.foot__tel { white-space: nowrap; }
.foot__legal a { text-underline-offset: 3px; }
.foot__credit { opacity: .65; }
.foot :focus-visible { outline-color: var(--white); }

/* Форма ---------------------------------------------------------------------- */
.brief {
  width: min(540px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100svh - 24px);
  padding: 0; border: 0; border-radius: 28px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 100px rgba(11, 16, 21, .35);
}
.brief::backdrop { background: rgba(11, 16, 21, .6); }
.brief[open] { animation: pop .45s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.brief__form { position: relative; padding: clamp(1.75rem, 5vw, 2.75rem); }
.brief__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper-2); font-size: 1.5rem; line-height: 1; }
.brief__title { font: 600 clamp(1.5rem, 4vw, 1.9rem)/1.1 var(--f-display); letter-spacing: -.04em; padding-right: 3rem; }
.brief__lead { margin: .8rem 0 1.8rem; color: var(--ink-2); }
.field { display: grid; gap: .45rem; margin-bottom: 1rem; }
.field span { font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.field i { font-style: normal; opacity: .7; font-weight: 400; }
.field input, .field textarea {
  width: 100%; padding: .95rem 1.05rem; border: 1.5px solid transparent; border-radius: 14px;
  background: var(--white); color: var(--ink); font: inherit; resize: vertical;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--teal-deep); }
.field [aria-invalid="true"] { border-color: #C0362C; }
.check { display: flex; gap: .7rem; align-items: flex-start; margin: .4rem 0 1.4rem; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.check a { color: var(--ink); text-underline-offset: 2px; }
.brief__error { margin: -.4rem 0 1rem; color: #B42318; font-size: .9rem; font-weight: 500; }

/* Экран после отправки заявки: тёмная заливка расходится кругом от кнопки, на телефоне приходит пуш */
.sent { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: auto; overscroll-behavior: contain; background: var(--ink); color: var(--white); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .85s cubic-bezier(.7, 0, .2, 1), opacity .35s; }
.sent[open] { display: flex; }
.sent.is-open { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); }
.sent.is-closing { opacity: 0; }
.sent::backdrop { background: transparent; }
.sent__in { width: 100%; max-width: 1440px; margin: auto; padding: 5rem var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem clamp(3rem, 7vw, 7rem); align-items: center; }
.sent__eyebrow { font: 500 .72rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.sent__title { margin-top: 1.4rem; font: 700 clamp(3rem, 8vw, 8rem)/.92 var(--f-display); letter-spacing: -.065em; overflow-wrap: anywhere; }
.sent__title em { font-style: normal; color: var(--teal); }
.sent__lead { margin-top: 1.8rem; max-width: 30rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.5; color: rgba(255, 255, 255, .75); }
.sent__close { margin-top: 2.4rem; }
.btn--teal { background: var(--teal); color: var(--ink); }
.btn--teal:hover { background: #6BDDE3; }
.sent :focus-visible { outline-color: var(--teal); }
.sent.is-open .sent__text > * { animation: sent-up .7s var(--ease) both; }
.sent.is-open .sent__text > :nth-child(1) { animation-delay: .35s; }
.sent.is-open .sent__text > :nth-child(2) { animation-delay: .45s; }
.sent.is-open .sent__text > :nth-child(3) { animation-delay: .6s; }
.sent.is-open .sent__text > :nth-child(4) { animation-delay: .7s; }
@keyframes sent-up { from { opacity: 0; transform: translateY(26px); } }
/* телефон: экран блокировки с настоящими датой и временем; пуш прилетает, телефон вздрагивает */
.sent__phone { position: relative; width: 300px; height: 610px; padding: 10px; border-radius: 44px; background: #05080B; box-shadow: inset 0 0 0 2px #2A3138, 0 0 0 1.5px #56616B, 0 60px 110px -40px rgba(43, 198, 207, .5); }
.sent.is-open .sent__phone { animation: sent-rise 1s var(--ease) .45s both, buzz .4s linear 1.85s; }
@keyframes sent-rise { from { opacity: 0; transform: translateY(70px) rotate(-5deg); } }
@keyframes buzz { 20% { transform: translateX(-5px) rotate(-1.2deg); } 40% { transform: translateX(5px) rotate(1.2deg); } 60% { transform: translateX(-3px) rotate(-.6deg); } 80% { transform: translateX(2px); } }
.sent__screen { height: 100%; border-radius: 34px; overflow: hidden; padding: 70px 20px 20px; text-align: center; background: radial-gradient(130% 75% at 50% 0%, var(--teal) 0%, var(--teal-deep) 42%, var(--ink) 100%); }
.sent__screen::before { content: ''; position: absolute; top: 20px; left: 50%; width: 88px; height: 24px; margin-left: -44px; border-radius: 14px; background: #05080B; }
.sent__status { position: absolute; top: 24px; right: 30px; }
.sent__date { font-size: .92rem; font-weight: 500; opacity: .92; }
.sent__btn { position: absolute; bottom: 34px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.sent__btn--l { left: 34px; }
.sent__btn--r { right: 34px; }
.sent__screen::after { content: ''; position: absolute; bottom: 18px; left: 50%; width: 110px; height: 4px; margin-left: -55px; border-radius: 2px; background: rgba(255, 255, 255, .8); }
.sent__time { margin-top: .1rem; font: 300 4.8rem/1 var(--f-body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.push { position: absolute; left: 20px; right: 20px; top: 200px; display: flex; gap: .65rem; align-items: flex-start; padding: .75rem .85rem; border-radius: 20px; background: rgba(245, 247, 248, .94); color: var(--ink); text-align: left; box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .55); }
.sent.is-open .push { animation: push-in .75s cubic-bezier(.2, 1.35, .4, 1) 1.45s both; }
@keyframes push-in { from { opacity: 0; transform: translateY(-46px) scale(.94); } }
.push__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--white); font: 700 .8rem/1 var(--f-display); letter-spacing: -.05em; }
.push__body { min-width: 0; }
.push__head { display: flex; justify-content: space-between; gap: .5rem; font-size: .68rem; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-2); }
.push__head b { font-weight: 600; }
.push__title { margin-top: .15rem; font-size: .9rem; font-weight: 600; }
.push__text { font-size: .82rem; line-height: 1.35; }

/* Страница 404: «4 [телефон] 4», телефон листает приложения клиентов, фон — в цвет клиента */
.nf { --nf-h: clamp(220px, 40vh, 420px); --nf-h: clamp(220px, 40svh, 420px); --nf-d: min(calc(var(--nf-h) * .78), 26vw);
  position: relative; overflow: hidden; display: grid; min-height: 100vh; min-height: 100svh; background: var(--c); color: var(--white); transition: background-color .9s var(--ease); }
.nf__in { display: grid; justify-items: center; align-content: center; text-align: center; padding-block: calc(var(--head-h) + 1.5rem) 3.5rem; }
.nf__eyebrow { font: 500 .72rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.nf__code { display: flex; align-items: center; justify-content: center; gap: clamp(.4rem, 1.6vw, 1.6rem); margin-top: clamp(1rem, 3vh, 2.2rem); perspective: 1400px; }
.nf__digit { font: 800 var(--nf-d)/.8 var(--f-display); letter-spacing: -.06em; }
.nf__phone { position: relative; height: var(--nf-h); aspect-ratio: 720 / 1400; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nf__phone::before { content: ''; position: absolute; inset: -35% -80%; z-index: -1; background: radial-gradient(closest-side, var(--aura), transparent 72%); transition: background .9s var(--ease); pointer-events: none; }
.nf__phone img { position: absolute; left: var(--l, 0%); top: var(--t, 0%); width: var(--w, 100%); height: var(--h, 100%); object-fit: contain; transform-origin: var(--o, 50% 50%); opacity: 0; }
.nf__shots { position: absolute; inset: 0; filter: brightness(var(--dim, 1)) drop-shadow(0 30px 40px rgba(0, 0, 0, .3)); }
.nf__phone img.is-on { opacity: 1; }
.nf__title { text-wrap: balance; margin-top: clamp(1.3rem, 4vh, 2.4rem); font: 700 clamp(2rem, 4.2vw, 3.6rem)/1 var(--f-display); letter-spacing: -.05em; }
.nf__lead { margin-top: 1rem; max-width: 30rem; font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.5; opacity: .88; }
.nf__now { margin-top: 1.1rem; font: 500 .74rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; }
.nf__now a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.nf__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: #E4F7F8; }
.nf :focus-visible { outline-color: var(--white); }

/* Общее для внутренних страниц ------------------------------------------------ */
.nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.menu nav a[aria-current="page"] { color: var(--teal-deep); }
.scope__more { grid-column: 2; justify-self: start; margin-top: .4rem; }

.facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; row-gap: .9rem; }
.facts div { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(6.5rem, auto) 1fr; grid-template-columns: subgrid; align-items: baseline; padding-top: .9rem; border-top: 1px solid rgba(255, 255, 255, .24); }
.facts dt { font: 500 1.5rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: -.04em; }
.facts dd { font-size: .92rem; line-height: 1.4; opacity: .82; }

.page-hero { padding-top: calc(var(--head-h) + clamp(1.75rem, 5vw, 4rem)); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.page-hero__title { font: 600 clamp(1.8rem, 9.2vw, 6.2rem)/1 var(--f-display); letter-spacing: -.055em; max-width: 13ch; text-wrap: balance; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.page-hero__lead { margin-top: clamp(1.25rem, 2.5vw, 2rem); max-width: 36rem; font-size: clamp(1.08rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--ink-2); }

/* Кейс: шапка в цвете клиента ------------------------------------------------ */
.case-hero { position: relative; overflow: hidden; background: var(--c); color: var(--white); }
.case-hero__name {
  position: absolute; left: 2vw; bottom: -.16em;
  font: 800 clamp(5rem, 15vw, 17rem)/1 var(--f-display); letter-spacing: -.05em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .09); pointer-events: none;
}
.case-hero__in {
  position: relative; min-height: min(100vh, 1000px); min-height: min(100svh, 1000px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-top: calc(var(--head-h) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.back { display: inline-flex; align-items: center; gap: .55rem; font: 500 .72rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; opacity: .78; transition: opacity .25s; }
.back::before { content: '←'; font-family: var(--f-body); font-size: 1rem; transition: transform .35s var(--ease); }
.back:hover { opacity: 1; }
.back:hover::before { transform: translateX(-4px); }
.case-hero__kind { margin-top: clamp(2rem, 5vw, 3.5rem); font: 500 .72rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.case-hero__title { margin-top: 1rem; font: 600 clamp(2.2rem, 5.2vw, 5.2rem)/1 var(--f-display); letter-spacing: -.05em; hyphens: manual; text-wrap: balance; }
.case-hero__lead { margin-top: 1.4rem; max-width: 32rem; font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.5; opacity: .9; }
.facts--hero { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 32rem; }
.case-hero__phone { display: flex; justify-content: center; }
.case-hero__phone img { height: min(76vh, 760px); height: min(76svh, 760px); width: auto; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .3)); }
.case-hero :focus-visible { outline-color: var(--white); }
.js .case-hero__copy > * { animation: fade .9s var(--ease) both; }
.js .case-hero__copy > :nth-child(2) { animation-delay: .06s; }
.js .case-hero__copy > :nth-child(3) { animation-delay: .12s; }
.js .case-hero__copy > :nth-child(4) { animation-delay: .18s; }
.js .case-hero__copy > :nth-child(5) { animation-delay: .24s; }
.js .case-hero__phone img { animation: lift 1.3s var(--ease) .15s both; }

/* Кейс: блоки ---------------------------------------------------------------- */
.blocks { padding-block: clamp(4.5rem, 9vw, 8rem); display: grid; gap: clamp(4.5rem, 10vw, 9rem); }
.block { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.block:nth-child(even) .block__text { order: 2; }
.block__title { font: 600 clamp(1.55rem, 2.6vw, 2.5rem)/1.1 var(--f-display); letter-spacing: -.04em; text-wrap: balance; }
.block__title::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--c); margin-bottom: 1.5rem; }
.block__text p { margin-top: 1rem; max-width: 34rem; color: var(--ink-2); }
.block__text p:first-of-type { margin-top: 1.3rem; }
.tags__label { margin-top: 1.8rem !important; font: 500 .7rem/1 var(--f-mono) !important; font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; max-width: 34rem; }
.tags__label + .tags { margin-top: .9rem; }
.tags li { padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .55); font-size: .86rem; line-height: 1.25; }
.block__media { margin: 0; display: flex; justify-content: center; }
.block__media img { width: 100%; max-height: min(78vh, 720px); max-height: min(78svh, 720px); object-fit: contain; }
.block__media--card img { width: auto; max-width: 100%; border-radius: 28px; background: var(--white); box-shadow: 0 30px 60px -30px rgba(11, 16, 21, .25); }

/* Кейс: галерея, витрина, следующий кейс ------------------------------------- */
.gallery { background: var(--c); padding-block: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.gallery__row { display: flex; justify-content: center; gap: clamp(1rem, 3vw, 3rem); max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.gallery__row li { flex: 0 1 270px; min-width: 0; }
.gallery__row li:nth-child(even) { transform: translateY(2.5rem); }
.gallery__row img { width: 100%; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .3)); }
.gallery + .showcase { margin-top: clamp(4rem, 8vw, 7rem); }
.showcase { margin-block: clamp(4rem, 8vw, 7rem) 0; }
.showcase img { width: 100%; border-radius: 28px; }

.next { display: block; margin-top: clamp(4.5rem, 9vw, 8rem); background: var(--c); color: var(--white); text-decoration: none; overflow: hidden; }
.next__in { display: grid; gap: 1.1rem; padding-block: clamp(4rem, 9vw, 8rem); }
.next__label { font: 500 .72rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.next__name { display: flex; align-items: baseline; gap: .15em; font: 700 clamp(2.4rem, 7vw, 7rem)/.95 var(--f-display); letter-spacing: -.055em; hyphens: manual; transition: transform .6s var(--ease); }
.next__name::after { content: '→'; font-family: var(--f-body); font-weight: 400; transition: transform .6s var(--ease); }
.next:hover .next__name { transform: translateX(.6rem); }
.next:hover .next__name::after { transform: translateX(.6rem); }
.next__kind { font-size: clamp(1rem, 1.3vw, 1.2rem); opacity: .82; }
.next:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; border-radius: 0; }

/* Услуги: путь продукта ------------------------------------------------------ */
/* Услуги: шапка с фактами и три этапа карточками */
.page-hero--split .page-hero__in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.5rem 3rem; align-items: start; }
/* первая линейка фактов выровнена по верху заголовка слева */
.page-hero__facts { display: grid; gap: 1.4rem; padding-top: 2.1rem; }
.page-hero__facts div { padding-top: .9rem; border-top: 2px solid var(--ink); }
.page-hero__facts dt { font: 700 clamp(1.5rem, 2.4vw, 2.3rem)/1 var(--f-display); letter-spacing: -.05em; }
.page-hero__facts dd { margin-top: .4rem; font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.stack { padding-bottom: clamp(4rem, 8vw, 7rem); }
.stack__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.stack__col { display: grid; gap: 12px; align-content: start; }
.stack__head { display: flex; align-items: baseline; gap: .7rem; padding-bottom: .8rem; border-bottom: 2px solid var(--ink); font: 600 1.15rem/1.15 var(--f-display); letter-spacing: -.03em; }
.stack__head b { font: 500 .78rem/1 var(--f-mono); font-stretch: 87.5%; color: var(--teal-deep); }
.svc { padding: 1.2rem 1.3rem 1.3rem; border-radius: 20px; background: var(--white); box-shadow: 0 1px 0 rgba(11, 16, 21, .05); }
.svc__title { font: 600 1.22rem/1.15 var(--f-display); letter-spacing: -.03em; }
.svc p { margin-top: .6rem; font-size: .94rem; line-height: 1.45; color: var(--ink-2); }
.svc__res { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--ink) !important; font-size: .9rem; line-height: 1.35; }
.svc__res b { display: block; margin-bottom: .35rem; font: 500 .66rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

.work { padding-block: clamp(4.5rem, 9vw, 8rem); border-top: 1px solid var(--line); }
.tiles { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  min-height: clamp(9.5rem, 14vw, 13rem); padding: clamp(1.2rem, 2vw, 1.6rem);
  border-radius: 22px; background: var(--c); color: var(--white); text-decoration: none;
  transition: transform .45s var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile__kind { font: 500 .66rem/1.35 var(--f-mono); font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; opacity: .78; overflow-wrap: anywhere; }
.tile__name { font: 600 clamp(1.25rem, 2vw, 1.9rem)/1.05 var(--f-display); letter-spacing: -.045em; hyphens: manual; }
.tile:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Контакты ------------------------------------------------------------------- */
.places { padding-bottom: clamp(4rem, 8vw, 7rem); }
.places__in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.place { display: grid; grid-template-rows: auto 1fr; border-radius: 28px; overflow: hidden; background: var(--white); }
.place__map { aspect-ratio: 16 / 10; background: var(--paper-2); }
.place__map iframe { display: block; width: 100%; height: 100%; border: 0; }
.place__info { display: grid; gap: .55rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.25rem); }
.place__city { font: 600 clamp(1.5rem, 2.4vw, 2.1rem)/1.05 var(--f-display); letter-spacing: -.045em; }
.place__addr { color: var(--ink-2); }
.place__tel { margin-top: .4rem; font-weight: 600; font-size: clamp(1.3rem, 2vw, 1.6rem); text-decoration: none; font-variant-numeric: tabular-nums; }
.place__hours { font: 500 .7rem/1.4 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.place__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.2rem; }

/* «сейчас открыто» — время считается по Москве, оба офиса в одном поясе */
/* фраза — одним блоком, чтобы переносилась целиком (вечером она длиннее: «офис уже закрыт — …») */
.now { display: none; align-items: flex-start; gap: .55rem; margin-top: 1.6rem; font-size: 1rem; color: var(--ink-2); }
.now__text { min-width: 0; }
.now.is-ready { display: flex; }
.now b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.now__dot { flex: none; margin-top: .5em; width: 9px; height: 9px; border-radius: 50%; background: #C0362C; box-shadow: 0 0 0 4px rgba(192, 54, 44, .18); }
.now.is-open .now__dot { background: var(--teal-deep); box-shadow: 0 0 0 4px rgba(43, 198, 207, .25); }
.place__now { display: none; align-items: center; gap: .4rem; }
.place__now.is-ready { display: inline-flex; }
.place__now::before { content: '·'; margin-right: .2rem; }
.place__now i { width: 7px; height: 7px; border-radius: 50%; background: #C0362C; }
.place__now.is-open i { background: var(--teal-deep); }
.place__now.is-open { color: var(--teal-deep); }

.legal { padding-block: clamp(3.5rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.legal__in { display: grid; grid-template-columns: minmax(15rem, .45fr) 1fr; gap: 2rem 3rem; align-items: start; }
/* отметка о годах на рынке: не однодневка */
.legal__badge { padding: clamp(1.5rem, 3vw, 2rem); border-radius: 26px; background: var(--ink); color: var(--white); }
.legal__years { display: flex; align-items: baseline; gap: .5rem; font: 700 clamp(1.4rem, 2vw, 1.8rem)/1 var(--f-display); letter-spacing: -.04em; }
.legal__years b { font-size: clamp(3.6rem, 6vw, 5.4rem); line-height: .85; color: var(--teal); }
.legal__since { margin-top: .9rem; font: 500 .72rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; }
.legal__note { margin-top: .9rem; font-size: .92rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.copy { display: inline-flex; align-items: baseline; gap: .6rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.copy i { font-style: normal; font: 500 .62rem/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); opacity: 0; transition: opacity .2s; }
.copy:hover i, .copy:focus-visible i, .copy.is-done i { opacity: 1; }
.copy.is-done i { color: var(--teal-deep); }
.legal__title { font: 600 clamp(1.4rem, 2.2vw, 2rem)/1.1 var(--f-display); letter-spacing: -.04em; }
.legal__list div { display: grid; grid-template-columns: minmax(10rem, .45fr) 1fr; gap: .5rem 2rem; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.legal__list div:first-child { border-top: 1px solid var(--line); }
.legal__list dt { color: var(--ink-2); font-size: .95rem; }
.legal__list dd { font-weight: 500; }

/* Адаптив -------------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* на планшете телефон крупнее не делаем — он начинает задевать панель кейса */
  .phone { height: min(74vh, 760px); height: min(74svh, 760px); }
  .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta__in { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head head" "talk info"; gap: 0 clamp(1.5rem, 4vw, 3rem); }
  .cta__title { font-size: clamp(3rem, 10vw, 7rem); }
  .talk { margin-top: 2.5rem; }
  .cta__info { margin-top: 2.5rem; }
  .cta__offices { grid-template-columns: 1fr; }
  .nav, .head__tel { display: none; }
  .burger { display: block; }
  .panel { width: min(24rem, 34vw); }
  .panel__name { font-size: clamp(1.3rem, 2.8vw, 1.9rem); }
  .rail { display: none; }
  .phone { left: 62%; }
  .stores, .dock { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .places__in { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
  .stack__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curve__label span { display: none; }
  .curve__steps { display: flex; gap: 12px; margin: 1.4rem calc(-1 * var(--gutter)) 0; padding: 6px var(--gutter) 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .curve__steps::-webkit-scrollbar { display: none; }
  .curve__step, .curve__step + .curve__step { flex: 0 0 min(84%, 25rem); scroll-snap-align: start; padding: 1.25rem 1.25rem 1.4rem; border-radius: 22px; background: var(--white); box-shadow: 0 1px 0 rgba(11, 16, 21, .04), 0 18px 34px -26px rgba(11, 16, 21, .45); }
  .curve__zone { cursor: pointer; transition: background-color .35s; }
  .curve__zone.is-on { background: linear-gradient(rgba(43, 198, 207, .18), rgba(43, 198, 207, 0) 85%); }
  .curve__zone.is-on .curve__label { font-weight: 700; }
  .curve__step .curve__note { max-width: none; margin-top: 1.3rem; }
  .curve__kind { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-bottom: .7rem; font: 500 .7rem/1.3 var(--f-mono); font-stretch: 87.5%; letter-spacing: .07em; text-transform: uppercase; color: var(--teal-deep); }
  .flips { grid-template-columns: 1fr; gap: 12px; }
  .flip { height: clamp(250px, 44vw, 300px); }
}

@media (max-width: 760px) {
  .pain { grid-template-columns: 1fr; gap: .8rem; }
  .pain__p { justify-self: start; text-align: left; max-width: 36ch; padding-bottom: 0; }
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .client { border-radius: 14px; }
  :root { --head-h: 64px; }
  body { font-size: 1rem; }
  .btn--head { display: none; }

  .intro { padding-top: calc(var(--head-h) + 1.5rem); }
  .intro__title { font-size: clamp(1.75rem, 8.4vw, 2.6rem); }
  .intro__foot { flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .intro__lead { max-width: none; }
  .intro__lead p { font-size: 1rem; }
  .intro__actions { margin-top: 1.1rem; }
  .intro__actions .btn { flex: 1; }

  .phone { left: 50%; top: var(--ph-y, 39%); height: var(--ph-h, min(55vh, 500px)); height: var(--ph-h, min(55svh, 500px)); transform: translate(-50%, -50%) translateY(calc(var(--intro, 1) * var(--lift, 54vh))) scale(calc(1 - var(--intro, 1) * .12)); transform: translate(-50%, -50%) translateY(calc(var(--intro, 1) * var(--lift, 54svh))) scale(calc(1 - var(--intro, 1) * .12)); }
  .stage__names span { top: var(--ph-y, 39%); font-size: 26vw; }
  .cta__title { font-size: 11vw; }
  .sent__in { grid-template-columns: minmax(0, 1fr); padding-block: 9.5rem 3rem; }
  .sent__phone { position: static; width: auto; height: auto; padding: 0; background: none; box-shadow: none; }
  .sent.is-open .sent__phone { animation: none; }
  .sent__screen { display: none; }
  .push { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; }
  .sent.is-open .push { animation: push-in .75s cubic-bezier(.2, 1.35, .4, 1) 1.1s both, buzz .4s linear 1.9s; }
  .nf { --nf-h: clamp(170px, 30vh, 260px); --nf-h: clamp(170px, 30svh, 260px); --nf-d: 30vw; }
  .cta__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "talk" "info"; }
  .talk { margin-top: 2.2rem; }
  .talk__phone { width: auto; height: auto; padding: 0; border-radius: 24px; background: none; box-shadow: 0 30px 60px -30px rgba(11, 16, 21, .5); }
  .talk__screen { border-radius: 24px; }
  .talk__screen::before, .talk__screen::after, .talk__bar, .talk__back { display: none; }
  .talk__head { padding: 14px 14px 12px; }
  .talk__form { padding-bottom: 18px; }
  .talk__fields input { height: 44px; }
  .talk__log { overflow: visible; min-height: 17rem; }
  .talk__msg { font-size: .95rem; }
  .talk__chip { font-size: .88rem; }
  .talk__fields { grid-template-columns: minmax(0, 1fr) auto; }
  .talk__name-field { grid-column: 1 / -1; }
  .talk__fields input { font-size: 1rem; }
  .talk__ok { font-size: .78rem; }
  .cta__offices { grid-template-columns: 1fr; }
  .panel { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translateY(var(--dy, 0px)); }
  .panel__name { margin-top: .5rem; font-size: clamp(1.2rem, 7.3vw, 1.6rem); }
  .panel__text { display: none; }
  .panel__facts { margin-top: 1rem; gap: .5rem; }
  .panel__facts { column-gap: 1rem; }
  .panel__facts div { padding-top: .5rem; }
  .panel__facts dt { font-size: 1.15rem; }
  .panel__facts dd { font-size: .82rem; }
  .panel .link-arrow { margin-top: 1rem; }

  .proof__top, .process__top, .scope { grid-template-columns: 1fr; }
  .curve__zone { padding-left: .7rem; }
  .scope__more { grid-column: auto; }

  .case-hero { overflow-x: clip; overflow-y: visible; z-index: 1; }
  .case-hero__in { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; padding-bottom: 0; }
  .case-hero__name { bottom: 16vh; bottom: 16svh; font-size: 26vw; }
  .case-hero__kind { margin-top: 1.75rem; }
  .case-hero__phone { margin-bottom: -18vh; margin-bottom: -18svh; }
  .case-hero__phone img { height: min(66vh, 560px); height: min(66svh, 560px); }
  .facts { column-gap: 1rem; }
  .facts dt { font-size: 1.2rem; }
  .blocks { padding-top: calc(18vh + 3rem); padding-top: calc(18svh + 3rem); }
  .block { grid-template-columns: 1fr; gap: 2rem; }
  .block:nth-child(even) .block__text { order: 0; }
  .block__media img { max-height: 70vh; max-height: 70svh; }
  .gallery__row { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2.5rem; scrollbar-width: none; }
  .gallery__row::-webkit-scrollbar { display: none; }
  .gallery__row li { flex: 0 0 58vw; scroll-snap-align: center; }
  .showcase img { border-radius: 18px; }
  .next__name { font-size: clamp(1.9rem, 10vw, 3rem); }

  .page-hero--split .page-hero__in { grid-template-columns: 1fr; }
  .page-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding-top: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { min-height: 8.5rem; padding: 1rem; border-radius: 18px; }
  .tile__name { font-size: clamp(1.02rem, 5.2vw, 1.4rem); }
  .legal__in, .legal__list div { grid-template-columns: 1fr; }
  .legal__list div { gap: .2rem; }
  .place { border-radius: 22px; }
}

@supports not (overflow: clip) {
  @media (max-width: 760px) {
    .case-hero { overflow: hidden; }
    .case-hero__phone { margin-bottom: 0; }
    .case-hero__in { padding-bottom: 2.5rem; }
    .blocks { padding-top: clamp(4.5rem, 9vw, 8rem); }
  }
}

@media (max-width: 400px) {
  .proof__nums { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .stack__cols { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .page-hero__facts { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 6.75rem; gap: 1.25rem; }
  .tile__name { font-size: clamp(1.3rem, 6.4vw, 1.6rem); }
}

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