/* ==========================================================================
   Портфолио — стили
   Цвета, шрифт и скругления меняются в блоке :root ниже.
   ========================================================================== */

:root {
  /* палитра: тёплый белый, пастель и яркий лайм */
  --page: #f3f2ee;
  --white: #ffffff;
  --ink: #141416;
  --ink-2: #26262b;
  --muted: #66666d;
  --sage: #e1ebdc;
  --peach: #f8e4d6;
  --sky: #dde7f5;
  --butter: #f4eccf;
  --accent: #d4f458;
  --accent-hover: #c5ea38;
  --accent-ink: #141416;

  /* шрифт */
  --font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* размеры текста */
  --step-small: clamp(0.875rem, 0.84rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --step-head: clamp(2.5rem, 1.5rem + 3.8vw, 5rem);
  --step-display: clamp(3rem, 8.4vw, 9.5rem);

  /* скругления */
  --r-lg: clamp(24px, 2.6vw, 40px);
  --r-md: 20px;
  --r-sm: 14px;

  /* сетка */
  --gutter: 12px;
  --pad-x: clamp(20px, 4vw, 64px);
  --pad-y: clamp(72px, 9vw, 136px);
  --gap: clamp(12px, 2vw, 28px);
  --bar-h: 72px;

  /* движение */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + 8px); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p, h1, h2, h3, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.foot :focus-visible, .hero :focus-visible { outline-color: var(--accent); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: 999px; }
.skip:focus { top: 12px; }

/* полоска прогресса прокрутки */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--accent); transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- карточки-секции ---------- */
.card {
  margin: 0 var(--gutter) var(--gutter);
  border-radius: var(--r-lg);
  padding: var(--pad-y) var(--pad-x);
  position: relative;
}
.card--white  { background: var(--white); }
.card--peach  { background: var(--peach); }
.card--sky    { background: var(--sky); }
.card--sage   { background: var(--sage); }
.card--butter { background: var(--butter); }

.h2 {
  font: 700 var(--step-head)/1 var(--font);
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.head {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: end; margin-bottom: clamp(48px, 6vw, 96px);
}
.head .h2 { grid-column: 1 / 8; }
.head p { grid-column: 8 / 13; font-size: var(--step-body); color: var(--muted); max-width: 46ch; }

/* ---------- кнопки: пилюли ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 0; border-radius: 999px;
  font: 500 var(--step-small)/1 var(--font);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .35s var(--spring), background-color .25s, color .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: var(--step-body); }
.btn--accent { background: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--ink-2); }
.btn--glass { background: rgba(255,255,255,.1); color: var(--white); }
.btn--glass:hover { background: rgba(255,255,255,.18); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(20,20,22,.18); }
.btn--ghost:hover { border-color: var(--ink); }
.btn__arrow { display: inline-block; transition: transform .35s var(--spring); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- шапка ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 calc(var(--gutter) + var(--pad-x) * .5);
  background: rgba(243, 242, 238, .82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: height .3s var(--ease);
}
.bar.scrolled { height: 62px; }
.bar__mark {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 1.25rem/1 var(--font); letter-spacing: -0.03em;
  text-decoration: none; white-space: nowrap; margin-right: auto;
}
.bar__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(212,244,88,.35); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(212,244,88,0); } }
.bar__nav { display: flex; gap: 4px; }
.bar__nav a {
  font-size: var(--step-small); font-weight: 500; text-decoration: none;
  padding: 10px 16px; border-radius: 999px;
  transition: background-color .25s;
}
.bar__nav a:hover { background: var(--white); }
.bar__menu { display: none; }

/* ---------- первый экран ---------- */
.hero {
  min-height: calc(100svh - var(--bar-h) - var(--gutter));
  --seam: 50%;
  overflow: hidden;
  padding: 0;
  color: var(--white);
}
.hero__fields { position: absolute; inset: 0; display: grid; grid-template-rows: var(--seam) 1fr; }
.hero__fields span:first-child { background: var(--sage); }
.hero__fields span:last-child { background: var(--ink); }

.hero__title {
  position: absolute; left: 0; right: 0;
  top: calc(var(--seam) - 1.22em);
  font: 700 var(--step-display)/.96 var(--font);
  letter-spacing: -0.055em;
  text-align: center;
  height: 1.92em;
}
.hero__copy { position: absolute; inset: 0; display: block; padding: 0 var(--pad-x); }
.hero__copy .l1, .hero__copy .l2 { display: block; white-space: nowrap; }
.hero__copy--top { color: var(--ink); clip-path: inset(0 0 calc(100% - 1.22em) 0); }
.hero__copy--bottom { color: var(--white); clip-path: inset(1.22em 0 0 0); }

.hero__foot {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(32px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero__lead { max-width: 34ch; font-size: var(--step-lead); line-height: 1.4; text-align: center; text-wrap: balance; color: rgba(255,255,255,.86); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- бегущая строка ---------- */
.ticker { overflow: hidden; margin: 0 0 var(--gutter); padding: 18px 0; }
.ticker__track {
  display: flex; align-items: center; gap: 28px; width: max-content;
  animation: ticker 36s linear infinite;
}
.ticker span { font: 600 clamp(1.25rem, 2.2vw, 2rem)/1 var(--font); letter-spacing: -0.03em; white-space: nowrap; }
.ticker i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- подход ---------- */
.stair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30%); column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.stair__text { font: 700 clamp(2.5rem, 5.8vw, 6.25rem)/1.02 var(--font); letter-spacing: -0.05em; }
.stair__text span { display: block; white-space: nowrap; }
.stair__text span:nth-child(2) { padding-left: 9vw; }
.stair__text mark { position: relative; z-index: 0; background: none; color: inherit; padding: 0 .1em; margin: 0 -.05em; }
.stair__text mark::before {
  content: ""; position: absolute; z-index: -1; inset: .1em 0 .02em;
  background: var(--accent); border-radius: .22em;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--ease) .45s;
}
.stair__text.in mark::before, html:not(.js) .stair__text mark::before { transform: scaleX(1); }
.stair__lead { margin-top: clamp(32px, 4vw, 56px); max-width: 38ch; font-size: var(--step-lead); line-height: 1.4; }
.stair__note { margin-top: 20px; max-width: 46ch; color: var(--muted); }
.stair__photos { display: grid; gap: 12px; }
.stair__photos img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-md);
  transition: transform .6s var(--ease), border-radius .6s var(--ease);
}
.stair__photos img:hover { transform: scale(1.03) rotate(-.6deg); }
.stair__photos img:nth-child(2) { margin-left: 18%; width: 82%; }

/* ---------- услуги ---------- */
.services__list { display: grid; gap: 8px; }
.services__list li {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap);
  align-items: center;
  padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 36px);
  background: rgba(255,255,255,.45); border-radius: var(--r-md);
  transition: background-color .3s, transform .4s var(--spring);
}
.services__list li:hover { background: var(--white); transform: translateY(-3px); }
.services__name { grid-column: 1 / 6; font: 600 clamp(1.5rem, 1rem + 1.8vw, 2.75rem)/1.05 var(--font); letter-spacing: -0.04em; }
.services__desc { grid-column: 6 / 12; color: var(--muted); max-width: 48ch; }
.services__go {
  grid-column: 12; justify-self: end;
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--white); font-size: 1.25rem;
  transition: background-color .3s, transform .45s var(--spring);
}
.services__list li:hover .services__go { background: var(--accent); transform: rotate(-45deg); }

/* ---------- работы ---------- */
.work__lead { max-width: 44ch; }
.workgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wcard {
  display: grid; gap: 0; background: var(--page); border-radius: var(--r-lg);
  padding: 12px; overflow: hidden;
  transition: transform .5s var(--spring), background-color .3s;
}
.wcard:hover { transform: translateY(-4px); }
.wcard:first-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.wcard__media { display: block; border-radius: var(--r-md); overflow: hidden; }
.wcard__media .shot, .wcard__media .still { border-radius: 0; transition: transform .8s var(--ease); }
.wcard:hover .wcard__media .shot, .wcard:hover .wcard__media .still { transform: scale(1.035); }
.wcard__body { padding: clamp(20px, 3vw, 44px); display: grid; gap: 14px; justify-items: start; }
.wcard__meta { font-size: var(--step-small); color: var(--muted); }
.wcard__title { font: 700 clamp(2rem, 1.2rem + 2.6vw, 3.75rem)/1 var(--font); letter-spacing: -0.045em; }
.wcard__desc { color: var(--muted); max-width: 46ch; }
.wcard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wcard__tags li { padding: 7px 14px; border-radius: 999px; background: var(--white); font-size: var(--step-small); }
.wcard__tags li:first-child { background: var(--accent); }
.wcard__btn { margin-top: 10px; }

/* превью сайта: нарисованный первый экран работы */
.still {
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  background: var(--s-bg); color: var(--s-ink);
  padding: max(16px, 5cqw) max(16px, 6cqw);
  display: flex; flex-direction: column;
  overflow: hidden; border-radius: var(--r-md);
}
.still__nav { display: flex; align-items: center; gap: max(12px, 3cqw); font: 500 max(13px, 2.4cqw)/1 var(--font); }
.still__nav b { font: 700 max(15px, 3.4cqw)/1 var(--font); letter-spacing: -0.03em; margin-right: auto; }
.still__h { margin-top: auto; font: 700 max(22px, 7.4cqw)/1 var(--font); letter-spacing: -0.05em; max-width: 84%; }
.still__row { display: flex; align-items: center; gap: max(12px, 3cqw); margin-top: 4cqw; font: 400 max(13px, 2.4cqw)/1.3 var(--font); }
.still__btn { background: var(--s-accent); color: var(--s-btn, var(--ink)); padding: max(8px, 1.8cqw) max(14px, 3.2cqw); font-weight: 500; border-radius: 999px; }
.shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; border-radius: var(--r-md); }

/* ---------- кейсы ---------- */
.case {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 32px;
  align-items: center;
}
.case + .case { margin-top: clamp(72px, 8vw, 128px); }
.case__text { grid-column: 1 / 6; }
.case__media { grid-column: 7 / 13; }
.case:nth-child(even) .case__text { grid-column: 8 / 13; grid-row: 1; }
.case:nth-child(even) .case__media { grid-column: 1 / 7; grid-row: 1; }
.case__media .still, .case__media .shot { transition: transform .6s var(--ease); }
.case__media:hover .still, .case__media:hover .shot { transform: scale(1.02) rotate(.4deg); }
.case__title { font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.5rem)/1.02 var(--font); letter-spacing: -0.045em; text-wrap: balance; }
.case__meta { margin: 16px 0 28px; font-size: var(--step-small); color: var(--muted); }
.case__text p + p { margin-top: 14px; }
.case__text b { font-weight: 600; }
.case__result { margin-top: 24px !important; padding: 22px 24px; background: var(--white); border-radius: var(--r-md); }
.case__link { display: inline-block; margin-top: 24px; font-size: var(--step-small); font-weight: 500; }
.case__cta { margin-top: 28px; }

/* ---------- визитка или продавец ---------- */
.versus { overflow: hidden; }
.versus__pair { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: end; }
.versus__item { grid-column: 1 / 6; }
.versus__item--ours { grid-column: 6 / 13; }
.versus__item figcaption { margin-top: 18px; font-weight: 500; }
.versus__word {
  display: inline-block;
  font: 700 clamp(4.5rem, 11vw, 12rem)/1 var(--font); letter-spacing: -0.06em;
  white-space: nowrap;
}
.versus__item:first-child .versus__word { color: #857e66; font-weight: 500; }
.versus__item--ours .versus__word { background: var(--accent); padding: .02em .28em .1em; border-radius: .32em; }
.versus__item--ours.in .versus__word { animation: wiggle 1.2s var(--spring) .3s both; }
@keyframes wiggle { 0% { transform: rotate(0) scale(.9); } 60% { transform: rotate(-2.5deg) scale(1.02); } 100% { transform: rotate(-1.5deg) scale(1); } }

/* ---------- фото-пауза ---------- */
.band__frame { padding: 0; overflow: hidden; }
.band__img { width: 100%; height: min(70svh, 52vw); object-fit: cover; transform-origin: 50% 60%; will-change: transform; }
.band__caption {
  position: absolute; left: 20px; bottom: 20px; max-width: calc(100% - 40px);
  padding: 12px 18px; border-radius: 999px;
  background: rgba(255,255,255,.88); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: var(--step-small); font-weight: 500;
}

/* ---------- процесс ---------- */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; counter-reset: step; }
.step {
  counter-increment: step;
  background: var(--page); border-radius: var(--r-md);
  padding: 28px 24px 32px; min-height: 260px;
  display: flex; flex-direction: column;
  transition: transform .45s var(--spring), background-color .3s;
}
.step:hover { transform: translateY(-6px); background: var(--sage); }
.step__n {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); font-weight: 600; font-size: var(--step-small);
  transition: background-color .3s;
}
.step__n::before { content: counter(step); }
.step:hover .step__n { background: var(--accent); }
.step h3 { margin-top: auto; padding-top: 40px; font: 600 1.375rem/1.15 var(--font); letter-spacing: -0.03em; }
.step p { margin-top: 10px; font-size: var(--step-small); color: var(--muted); line-height: 1.5; }

/* ---------- отзывы ---------- */
.reviews__h { margin-bottom: clamp(56px, 7vw, 104px); }
.spread { font: 700 clamp(3rem, 8vw, 8.5rem)/1 var(--font); letter-spacing: -0.055em; }
.spread__line { display: flex; justify-content: space-between; gap: .3em; }
.spread__line + .spread__line { margin-top: .08em; }
.spread__by {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 40px; font: 500 var(--step-body)/1.3 var(--font); letter-spacing: 0; color: var(--muted);
}
.reviews__body {
  margin-top: clamp(64px, 8vw, 120px);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 48px;
  align-items: start;
}
.reviews__list { grid-column: 1 / 7; display: grid; gap: 16px; position: sticky; top: calc(var(--bar-h) + 32px); }
.review { background: rgba(255,255,255,.6); border-radius: var(--r-md); padding: 28px; }
.review__text { margin: 0; font-size: var(--step-lead); line-height: 1.4; }
.review__by { margin-top: 14px; font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.review--pending { opacity: .7; }
.reviews__empty { font-size: var(--step-lead); line-height: 1.4; max-width: 30ch; }

.rform { grid-column: 8 / 13; display: grid; gap: 18px; background: var(--white); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); }
.rform__h { font: 700 var(--step-lead)/1.15 var(--font); letter-spacing: -0.03em; }
.rform__sub { font-size: var(--step-small); margin-top: -8px; color: var(--muted); }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-size: var(--step-small); font-weight: 500; padding: 0; }
.field input, .field textarea {
  width: 100%; border-radius: var(--r-sm);
  border: 1.5px solid transparent; background: var(--page); color: var(--ink);
  padding: 14px 16px; font-size: 1rem;
  transition: border-color .2s, background-color .2s;
}
.field input:hover, .field textarea:hover { border-color: rgba(20,20,22,.12); }
.field input:focus, .field textarea:focus { outline: none; background: var(--white); border-color: var(--ink); }
.field textarea { resize: vertical; min-height: 130px; }
.field__hint { font-size: var(--step-small); color: var(--muted); }
.field [aria-invalid="true"] { border-color: #d64545; }
.rating__set { position: relative; display: flex; gap: 8px; margin-top: 4px; }
.rating__set input { position: absolute; opacity: 0; pointer-events: none; }
.rating__set label {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  background: var(--page); cursor: pointer; font-size: 1rem; font-weight: 600;
  transition: background-color .2s, color .2s, transform .35s var(--spring);
}
.rating__set label:hover { transform: translateY(-3px); }
.rating__set input:checked + label { background: var(--accent); }
.rating__set input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.rform .btn { justify-self: start; }
.rform__status { font-size: var(--step-small); font-weight: 500; min-height: 1.5em; }

/* ---------- контакты ---------- */
.brief { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); row-gap: 40px; }
.brief__head { grid-column: 1 / 7; }
.brief__head p { margin-top: 20px; max-width: 42ch; color: var(--muted); }
.brief__pick { grid-column: 1 / 7; display: grid; gap: 28px; align-content: start; }
.brief__pick legend { font-size: var(--step-small); color: var(--muted); margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--page); color: var(--ink); font-size: .9375rem;
  transition: background-color .25s, transform .35s var(--spring);
}
.chips button:hover { background: #e8e6df; }
.chips button:active { transform: scale(.94); }
.chips button[aria-pressed="true"] { background: var(--accent); }
.brief__out {
  grid-column: 8 / 13; grid-row: 1 / span 2; align-self: start;
  position: sticky; top: calc(var(--bar-h) + 24px);
  background: var(--sky); border-radius: var(--r-lg); padding: clamp(24px, 3vw, 36px);
}
.brief__label { font-size: var(--step-small); color: var(--muted); }
.brief__msg { margin: 12px 0 28px; font-size: var(--step-lead); line-height: 1.4; min-height: 5.6em; }
.brief__msg.flash { animation: flash .45s var(--ease); }
@keyframes flash { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.brief__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.brief__status { margin-top: 12px; font-size: var(--step-small); color: var(--muted); min-height: 1.5em; }

.ctiles { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ctile {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 132px; padding: 22px 24px; border-radius: var(--r-md);
  text-decoration: none; background: var(--page);
  transition: transform .45s var(--spring), background-color .3s;
}
.ctiles li:nth-child(1) .ctile { background: var(--sky); }
.ctiles li:nth-child(2) .ctile { background: var(--sage); }
.ctiles li:nth-child(3) .ctile { background: var(--peach); }
.ctiles li:nth-child(4) .ctile { background: var(--butter); }
a.ctile:hover { transform: translateY(-5px); }
.ctile__k { font-size: var(--step-small); color: var(--muted); }
.ctile__v { margin-top: auto; font-weight: 600; font-size: clamp(1rem, .9rem + .4vw, 1.1875rem); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ctile__go {
  position: absolute; top: 18px; right: 18px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); transition: background-color .3s, transform .45s var(--spring);
}
a.ctile:hover .ctile__go { background: var(--accent); transform: rotate(-45deg); }
.ctiles__note { grid-column: 1 / -1; margin-top: 14px; color: var(--muted); font-size: var(--step-small); display: flex; align-items: center; gap: 10px; }
.ctiles__note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4cc26a; box-shadow: 0 0 0 4px rgba(76,194,106,.2); }

/* ---------- подвал ---------- */
.foot {
  background: var(--ink); color: var(--white);
  overflow: hidden;
  min-height: 86svh;
  padding-bottom: 0;
  display: flex; flex-direction: column;
}
.foot__top { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.foot__invite { grid-column: 1 / 8; display: grid; gap: 36px; justify-items: start; }
.foot__title { font: 700 var(--step-head)/1 var(--font); letter-spacing: -0.045em; }
.foot__links { grid-column: 10 / 13; display: grid; gap: 6px; font-weight: 500; }
.foot__links a { text-decoration: none; display: inline-block; padding: 4px 0; transition: color .2s, transform .35s var(--spring); }
.foot__links a:hover { color: var(--accent); transform: translateX(4px); }
.foot__links .muted { color: #9a9aa2; font-weight: 400; }
.foot__legal {
  margin-top: auto; padding-top: 64px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: var(--step-small); color: #9a9aa2;
}
.foot__mark {
  font: 700 24vw/.8 var(--font); letter-spacing: -0.06em; color: var(--accent);
  white-space: nowrap; margin: 16px 0 0 -0.03em;
  transform: translateY(20%);
  height: .62em;
}

/* ---------- появление ---------- */
.js .rv { opacity: 0; transform: translateY(28px); }
.js .rv.in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
.js .hero__copy .l1, .js .hero__copy .l2 { animation: rise 1.1s var(--ease) both; }
.js .hero__copy .l2 { animation-delay: .1s; }
.js .hero__lead { animation: riseSmall 1s var(--ease) .3s both; }
.js .hero__actions { animation: riseSmall 1s var(--ease) .42s both; }
@keyframes rise { from { opacity: 0; translate: 0 .5em; } to { opacity: 1; translate: 0 0; } }
@keyframes riseSmall { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
  .band__img { transform: none !important; }
  .ticker__track { animation: none; }
}

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .wcard:first-child { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .ctiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .bar__nav {
    display: none; position: absolute; top: calc(100% + 4px); left: var(--gutter); right: var(--gutter);
    flex-direction: column; gap: 2px; padding: 10px;
    background: var(--white); border-radius: var(--r-md);
    box-shadow: 0 20px 50px rgba(20,20,22,.12);
  }
  .bar.open .bar__nav { display: flex; animation: riseSmall .35s var(--ease) both; }
  .bar__nav a { font-size: var(--step-lead); padding: 14px 16px; }
  .bar__nav a:hover { background: var(--page); }
  .bar__menu {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    background: var(--white); border: 0; border-radius: 999px; cursor: pointer;
    font-size: var(--step-small); font-weight: 500;
  }
  .bar { gap: 10px; }
  .bar__cta { min-height: 44px; padding: 0 18px; }

  .head .h2, .head p { grid-column: 1 / -1; }
  .head p { margin-top: 20px; }
  .stair { grid-template-columns: minmax(0, 1fr); }
  .stair__photos { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .stair__photos img:nth-child(2) { margin: 32px 0 0; width: 100%; }
  .services__name, .services__desc { grid-column: 1 / 12; }
  .services__desc { margin-top: 8px; }
  .services__go { grid-column: 12; grid-row: 1 / span 2; }

  .case__text, .case__media,
  .case:nth-child(even) .case__text, .case:nth-child(even) .case__media { grid-column: 1 / -1; grid-row: auto; }
  .case__media { order: -1; }

  .reviews__list, .rform { grid-column: 1 / -1; }
  .reviews__list { position: static; }
  .brief__head, .brief__pick, .brief__out { grid-column: 1 / -1; grid-row: auto; }
  .brief__out { position: static; }
  .foot__invite, .foot__links { grid-column: 1 / -1; }
  .foot__links { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
}

/* ---------- телефон ---------- */
@media (max-width: 640px) {
  :root { --gutter: 8px; --bar-h: 64px; }
  .bar { padding: 0 16px; }
  .bar.scrolled { height: 58px; }
  .bar__cta { display: none; }

  .hero { --seam: 40%; }
  .hero__title { font-size: 10.2vw; }
  .hero__lead { font-size: var(--step-body); max-width: 28ch; }
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }

  .ticker { padding: 12px 0; }
  .stair__text { font-size: 8.6vw; }
  .stair__text span:nth-child(2) { padding-left: 5vw; }
  .stair__lead { font-size: var(--step-body); }
  .stair__photos { gap: 8px; }

  .services__list li { padding: 18px; }
  .services__go { width: 40px; height: 40px; }

  .workgrid { grid-template-columns: 1fr; }
  .wcard { padding: 8px; }

  .versus__item, .versus__item--ours { grid-column: 1 / -1; }
  .versus__item--ours { margin-top: 36px; }
  .versus__word { font-size: 20vw; }

  .band__caption { left: 10px; right: 10px; bottom: 10px; border-radius: var(--r-sm); }
  .band__img { height: 64vw; }

  .steps { grid-template-columns: 1fr; }
  .step { min-height: 0; flex-direction: row; flex-wrap: wrap; gap: 0 16px; align-items: center; }
  .step h3 { margin-top: 0; padding-top: 0; flex: 1; }
  .step p { flex-basis: 100%; margin-top: 14px; }

  .spread { font-size: 12.4vw; }
  .spread__by { flex-direction: column; gap: 4px; font-size: .9375rem; }
  .spread__by span:nth-child(2) { align-self: center; }
  .spread__by span:nth-child(3) { align-self: flex-end; }

  .ctiles { grid-template-columns: 1fr; }
  .ctile { min-height: 104px; }

  .foot { min-height: 0; }
  .foot__invite .btn { width: 100%; }
  .foot__title { font-size: 9.2vw; }
  .foot__mark { font-size: 30vw; }
}

/* пометка на карточке работы, например «Демо-версия» */
.wcard__mwrap { position: relative; }
.wcard__badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  padding: 8px 14px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: var(--step-small); font-weight: 600;
  pointer-events: none;
}
.wcard__badge::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }