/* Шрифт — Raleway (владелец 09.10 выбрал №9 из 15: деловой и читабельный).
   Заголовки — 600, текст — 400. Prata/Golos и Playfair/Jost отклонены. */
/* WebFi — PR-центр Искандера Бреды.
   Обложка дорогого журнала: масштабный мастхед, портрет, регалии как анонсы
   номера. Графит и шампань-золото — перекличка с клубом VERUM.
   Без внешних скриптов и шрифтов: всё своё, чтобы открывалось во встроенном
   браузере Telegram. */

@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-cyr.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-lat.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #0b0a0a;      /* фон обложки — в тон студийному фону портрета */
  --deep: #12100f;
  --graphite: #1c1917;
  --ivory: #efe7d8;
  --smoke: #b9af9f;  /* светлее: Raleway тоньше прежних шрифтов */
  --gold: #c9a45c;
  --gold-hi: #e8d3a2;
  --gold-line: rgba(201, 164, 92, .34);
  --hair: rgba(239, 231, 216, .1);
  --metal: linear-gradient(176deg, #f6edda 0%, #e2c991 46%, #b68f45 78%, #8a6a2f 100%);
  --serif: 'Raleway', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --sans: 'Raleway', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --r: 10px;            /* скругление карточек и фото — одно на весь сайт */
  --r-btn: 6px;
  --card-bg: linear-gradient(180deg, rgba(255, 246, 225, .035), rgba(255, 246, 225, .012)), #13110f;
  --card-line: rgba(201, 164, 92, .2);
  --wrap: 1180px;
  --gut: 20px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--ivory);
  font: 500 18px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* У Raleway цифры по умолчанию «старинные» (13 прыгает по высоте); а шорткат font:
   сбрасывает font-variant, поэтому прописные цифры закрепляем на всех элементах. */
*, *::before, *::after { font-variant-numeric: lining-nums !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--gold); color: var(--night); padding: 10px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ── Кнопки ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--metal); color: #17120a;
  font: 600 16px/1 var(--sans); letter-spacing: .01em; text-decoration: none;
  border: 0; border-radius: var(--r-btn); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -12px rgba(201, 164, 92, .55);
  transition: filter .2s ease, transform .16s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.08); } }
.btn:active { transform: scale(.97); }
.btn--ghost {
  background: transparent; color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--gold); filter: none; }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 15px; }
.btn--wide { width: 100%; }

/* ── Карточка: все повторяющиеся блоки в сетках выглядят одинаково ── */
.who__grid > div, .svc__group, .brief, .steps__note {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: var(--r);
  padding: 24px 22px 26px;
}
/* фото и видео: одно скругление, без обводок */
.who__photo img, .club__photo img, .steps__photo, .lead__photo, .feature__hero img,
.feature__strip img, .reel video, .person__photo img { border-radius: var(--r); box-shadow: none; }

/* ── Верхняя планка ─────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 var(--gut);
  padding-top: env(safe-area-inset-top);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.bar.is-solid {
  background: rgba(11, 10, 10, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hair);
}
.bar__logo { display: block; line-height: 0; }
.bar__logo img { height: 32px; width: auto; }
.bar__logo { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.bar.is-solid .bar__logo { opacity: 1; visibility: visible; }
.bar__nav { display: none; gap: 26px; margin-left: auto; }
.bar__nav a { text-decoration: none; color: var(--smoke); font-size: 15px; transition: color .2s; }
.bar__nav a:hover { color: var(--ivory); }
.bar .btn--small { margin-left: auto; white-space: nowrap; }
@media (min-width: 900px) {
  .bar { padding: 0 32px; }
  .bar__nav { display: flex; }
  .bar .btn--small { margin-left: 0; }
}

/* ── Обложка ────────────────────────────────────────── */
.cover {
  position: relative;
  padding: 84px var(--gut) 40px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(201, 164, 92, .10), transparent 70%),
    var(--night);
  overflow: hidden;
}

.cover__mast {
  position: relative; z-index: 1; margin: 0;
  width: min(66vw, 560px);
  animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
.cover__mast img { width: 100%; height: auto; }

/* Подпись под логотипом: плашка «PR-центр» с точкой «в эфире», значки пиара
   по бокам вспыхивают по очереди, имя печатается по буквам (pr.js). */
.cover__kicker {
  position: relative; z-index: 3;
  margin: 18px 0 26px; display: grid; justify-items: center; gap: 14px;
  text-align: center;
}
.kick__row { display: flex; align-items: center; gap: 8px; }
.kick__badge {
  position: relative; isolation: isolate; margin: 0 4px;
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px;
  border-radius: 999px; border: 1px solid rgba(232, 200, 120, .45);
  background: linear-gradient(135deg, rgba(232, 200, 120, .16), rgba(201, 164, 92, .04));
  font: 700 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-hi);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .2), 0 0 24px rgba(201, 164, 92, .18);
}
.kick__badge::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 48%; z-index: -1;
  border-radius: inherit; border-bottom-left-radius: 40% 30%; border-bottom-right-radius: 40% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03));
}
.kick__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 10px var(--gold); }
.kick__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--gold-hi); animation: onair 2s ease-out infinite;
}
@keyframes onair { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.kick__ic {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  color: var(--gold); border: 1px solid rgba(232, 211, 162, .2);
  background: linear-gradient(180deg, rgba(255, 246, 225, .07), rgba(255, 246, 225, .01));
  animation: icIn .7s var(--ease-soft) both, icGlow 4.8s ease-in-out infinite;
  animation-delay: calc(1.2s + var(--k) * .12s), calc(2.4s + var(--k) * 1.2s);
}
@keyframes icIn { from { opacity: 0; transform: translateY(8px) scale(.6); } }
@keyframes icGlow {
  0%, 30%, 100% { color: var(--gold); border-color: rgba(232, 211, 162, .2); box-shadow: none; }
  12% { color: #fff4dc; border-color: rgba(240, 214, 150, .75); box-shadow: 0 0 18px rgba(232, 200, 120, .45); }
}
.kick__name {
  margin: 0; font: 600 clamp(19px, 5.4vw, 26px)/1.1 var(--sans);
  letter-spacing: .26em; text-transform: uppercase; padding-left: .26em;
  background: linear-gradient(100deg, #b68f45 0%, #f3e2b4 30%, #fff8e6 42%, #e2c991 55%, #b68f45 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: nameSheen 7s 3.4s ease-in-out infinite;
}
@keyframes nameSheen { 0%, 70% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
/* печать по буквам: буквы проявляются из размытия, за ними бежит каретка */
.kick__name .ch { display: inline-block; opacity: 0; transform: translateY(.35em); filter: blur(6px);
  animation: chIn .55s var(--ease-soft) forwards; animation-delay: calc(1.5s + var(--i) * .06s);
  color: #ecd49a; -webkit-text-fill-color: #ecd49a; }
.kick__name .sp { display: inline-block; width: .5em; }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
.kick__name.is-typed::after {
  content: ""; display: inline-block; width: 2px; height: .95em; margin-left: .1em; vertical-align: -.1em;
  background: var(--gold-hi); animation: caret .9s steps(1) 4, caretOut .4s 3.6s forwards;
  animation-delay: 1.5s, calc(1.5s + var(--n) * .06s + 2.2s);
}
@keyframes caret { 50% { opacity: 0; } }
@keyframes caretOut { to { opacity: 0; width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kick__ic, .kick__dot::after, .kick__name { animation: none; }
  .kick__name .ch { opacity: 1; transform: none; filter: none; animation: none; }
  .kick__name.is-typed::after { display: none; }
}

.cover__photo {
  position: relative; z-index: 2;
  width: min(100%, 520px);
  margin-top: -6px;
  /* фон студии чуть светлее страницы: гасим и верх-низ, и бока */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0, #000 14%, #000 64%, transparent 97%),
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0, #000 14%, #000 64%, transparent 97%),
    linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
  animation: appear 1.4s .2s ease-out both;
}
.cover__photo img { width: 100%; }

.cover__lead {
  position: relative; z-index: 3;
  max-width: 760px;
  margin-top: -120px;
  text-align: center;
}
.cover__lead h1 {
  font: 600 clamp(32px, 7.4vw, 64px)/1.06 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.cover__lead p {
  margin: 18px auto 0; max-width: 46ch;
  color: var(--smoke); font-size: 17px;
}
.cover__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.cover__lines {
  position: relative; z-index: 3;
  width: 100%; max-width: 520px; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.cover__lines--left { margin-top: 36px; }
.cover__lines--right { margin-top: 12px; }
/* на телефоне заголовок идёт сразу за портретом, анонсы — после */
.cover__lead { order: 1; }
.cover__lines { order: 2; }

@media (min-width: 1200px) {
  .cover {
    min-height: 100vh;
    padding: 96px 40px 56px;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 500px) minmax(0, 1fr);
    grid-template-areas:
      "mast  mast  mast"
      "kick  kick  kick"
      "left  photo right"
      "lead  lead  lead";
    column-gap: 40px;
    align-items: start;
  }
  .cover__mast { grid-area: mast; }
  .cover__kicker { grid-area: kick; }
  .cover__photo { grid-area: photo; width: 100%; margin-top: 10px; }
  .cover__lines { grid-template-columns: 1fr; max-width: 270px; margin: 0; align-self: center; }
  .cover__lines--left { grid-area: left; justify-self: end; text-align: right; margin-top: -40px; }
  .cover__lines--right { grid-area: right; justify-self: start; margin-top: -40px; }
  .cover__lead { grid-area: lead; margin-top: -150px; order: 0; }
  .cover__lines { order: 0; }
}
@supports (min-height: 100svh) { @media (min-width: 1200px) { .cover { min-height: 100svh; } } }

@keyframes rise { from { opacity: 0; transform: translateY(18%); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }

/* ── Общие секции ───────────────────────────────────── */
.h2 {
  max-width: 20ch;
  font: 600 clamp(34px, 5.2vw, 60px)/1.08 var(--serif);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.h2::before {
  content: ""; display: block; width: 44px; height: 1px; margin-bottom: 26px;
  background: var(--gold);
}

/* Для кого */
.lede {
  margin-top: 34px; max-width: 38ch;
  font: 600 clamp(21px, 2.6vw, 28px)/1.5 var(--serif);
}
.who__grid { margin-top: 48px; display: grid; gap: 12px; }
.who__grid h3 { font: 600 18px/1.3 var(--sans); }
.who__grid p { margin-top: 8px; color: var(--smoke); }
.who__gain {
  margin-top: 48px; padding-top: 22px; max-width: 46ch;
  border-top: 1px solid var(--gold-line);
  font: 600 clamp(20px, 2.4vw, 26px)/1.45 var(--serif); color: var(--gold-hi);
}
@media (min-width: 760px) { .who__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Услуги */
.svc__lead { margin-top: 16px; max-width: 40ch; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--ivory); }
.svc__groups { margin-top: 40px; display: grid; gap: 14px; }
.svc__group h3 {
  font: 600 30px/1.15 var(--serif); color: var(--gold-hi);
  padding-bottom: 16px; border-bottom: 1px solid var(--gold-line);
}
.svc__group dl { margin-top: 6px; }
.svc__group dt { margin-top: 20px; font-weight: 600; font-size: 17px; }
.svc__group dd { margin-top: 4px; color: var(--smoke); }

@media (min-width: 900px) { .svc__groups { grid-template-columns: 1fr 1fr; gap: 16px; } .svc__group { padding: 32px 32px 34px; } }

/* Как работаем */
.steps { background: var(--deep); }
.steps__note {
  margin-top: 56px; max-width: 70ch;
  font: 600 19px/1.55 var(--serif);
}

/* Кейсы */
.feature { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.feature__hero img { width: 100%; border-radius: 2px; }
.feature__tag { font-size: 14px; color: var(--gold-hi); letter-spacing: .03em; }
.feature__title { margin-top: 10px; font: 600 clamp(36px, 5vw, 56px)/1.05 var(--serif); }
.feature__sub { margin-top: 12px; font: 600 21px/1.45 var(--serif); color: var(--gold-hi); }
.feature__body > p:not([class]) { margin-top: 18px; color: var(--smoke); max-width: 60ch; }
.feature__facts { margin-top: 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature__facts > div { padding-top: 14px; border-top: 1px solid var(--gold-line); }
.feature__facts dt { font: 600 clamp(20px, 6vw, 34px)/1.05 var(--serif); color: var(--ivory); white-space: nowrap; }
.feature__facts dd { margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--smoke); hyphens: auto; -webkit-hyphens: auto; }
.feature__src { margin-top: 26px; font-size: 14px; color: var(--smoke); }
.feature__src a, .brief a, .lead__alt a {
  color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.feature__src a:hover, .brief a:hover, .lead__alt a:hover { color: var(--gold-hi); }

.feature--second { margin-top: 96px; padding-top: 44px; border-top: 1px solid var(--gold-line); }
@media (min-width: 900px) {
  .feature--second { grid-template-columns: minmax(0, 1fr); }
  .feature--second .feature__body { max-width: 780px; }
}

/* лента кадров: на телефоне листается вбок, запас под тени внутри */
.feature__strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 46%;
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 calc(50% - 50vw); padding: 4px var(--gut) 10px;  /* ровно во всю ширину экрана */
  scrollbar-width: none;
}
.feature__strip::-webkit-scrollbar { display: none; }
.feature__strip li { scroll-snap-align: start; }
.feature__strip img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 2px; }
@media (min-width: 900px) {
  .feature { gap: 32px 56px; align-items: start; }
  .feature__strip { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; overflow: visible; }
}

/* Фото по разделам */
.who__photo { margin: 40px 0 0; max-width: 420px; }
.who__photo img, .club__photo img, .steps__photo, .lead__photo { width: 100%; border-radius: 2px; box-shadow: 0 0 0 1px var(--gold-line); }
@media (min-width: 900px) {
  .who .wrap {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: 72px;
    grid-template-areas: "eyebrow photo" "h2 photo" "lede photo" "grid grid" "gain gain";
  }
  .who .eyebrow { grid-area: eyebrow; justify-self: start; align-self: end; } .who .h2 { grid-area: h2; } .who .lede { grid-area: lede; }
  .who__photo { grid-area: photo; margin: 0; align-self: end; }
  .who__grid { grid-area: grid; } .who__gain { grid-area: gain; }
}
.steps__foot { margin-top: 56px; display: grid; gap: 28px; align-items: center; }
.steps__foot .steps__note { margin-top: 0; }
.steps__photo { max-width: 320px; }
@media (min-width: 900px) { .steps__foot { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; } }
.lead__photo { display: block; margin-top: 32px; max-width: 300px; }

/* Видео: по тапу, грузятся только после нажатия (preload none) */
.reels { margin-top: 80px; display: grid; gap: 28px; }
.reel video {
  display: block; width: 100%; height: auto; background: #000;
  border-radius: 2px; box-shadow: 0 0 0 1px var(--gold-line);
}
.reel--tall { width: min(100%, 300px); justify-self: center; }
.reel figcaption { margin-top: 12px; font-size: 14px; color: var(--smoke); text-align: center; text-wrap: balance; }
@media (min-width: 900px) {
  .reels { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); gap: 40px; align-items: end; }
  .reel--tall { width: auto; justify-self: stretch; }
  .reel figcaption { text-align: left; }
}

.briefs { margin-top: 64px; display: grid; gap: 12px; }
.brief h3 { font: 600 26px/1.15 var(--serif); }
.brief p { margin-top: 10px; color: var(--smoke); }
.brief .brief__num {
  margin-top: 12px; font: 600 40px/1 var(--serif);
  background: var(--metal);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brief .brief__num + p { margin-top: 8px; }
.brief a { display: inline-block; margin-top: 12px; font-size: 15px; }
@media (min-width: 640px) { .briefs { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (min-width: 1000px) { .briefs { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Искандер */
.person { background: var(--deep); }
.person__wrap { display: grid; gap: 44px; }
.person__photo { position: relative; max-width: 460px; }
.person__photo img { position: relative; width: 100%; border-radius: 2px; }
.person__titles { margin-top: 30px; }
.person__titles li {
  padding: 12px 0 12px 22px; position: relative;
  border-bottom: 1px solid var(--hair); font-size: 17px;
}
.person__titles li::before {
  content: ""; position: absolute; left: 2px; top: 22px; width: 6px; height: 6px;
  background: var(--gold); transform: rotate(45deg);
}

@media (min-width: 900px) {
  .person__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
}

/* VERUM */
.club {
  background:
    radial-gradient(70% 40% at 50% 30%, rgba(201, 164, 92, .14), transparent 70%),
    var(--night);
}

/* Заявка */
.lead__wrap { display: grid; gap: 44px; }
.lead__intro p { margin-top: 22px; max-width: 42ch; color: var(--smoke); font-size: 18px; }
.lead__intro .lead__alt { color: var(--ivory); }
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field span { font-size: 14px; color: var(--smoke); }
.field em { font-style: normal; opacity: .7; margin-left: 6px; }
.field input, .field textarea {
  width: 100%; padding: 12px 0 14px;
  background: transparent; color: var(--ivory);
  font: 500 18px/1.4 var(--sans);
  border: 0; border-bottom: 1px solid rgba(239, 231, 216, .24); border-radius: 0;
  transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field.is-bad input { border-bottom-color: #d27a6a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { margin-top: 8px; }
.form .btn[disabled] { opacity: .6; cursor: default; }
.form__legal { font-size: 14px; color: var(--smoke); }
.form__status { min-height: 1.6em; font-size: 16px; }
.form__status.is-ok { color: var(--gold-hi); font: 600 21px/1.45 var(--serif); }
.form__status.is-err { color: #e3a090; }
@media (min-width: 900px) { .lead__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; } }

/* ── Движение ───────────────────────────────────────────
   Всё на transform/opacity/clip-path, без библиотек. Класс .js ставит
   скрипт: без него (или при «уменьшить движение») всё видно сразу. */
.js .rv { opacity: 0; transform: translateY(12px); }
.js .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out) var(--d, 0s), transform .5s var(--ease-out) var(--d, 0s);
}
/* фото открываются шторкой снизу вверх. Шторка — на самой картинке, а следим
   за обёрткой: Chrome считает обрезанный clip-path элемент невидимым. */
.js .rv-img img { clip-path: inset(0 0 22% 0); opacity: .001; }
.js .rv-img.is-in img { opacity: 1; }
.js .rv-img.is-in img { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-out) var(--d, 0s), opacity .5s ease var(--d, 0s); }
/* диаграмма: столбики растут слева */
/* логотип: один матовый блик после появления */
.cover__mast::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 225, .55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-mask: url(/pr/i/webfi-logo-b.svg) center / 100% 100% no-repeat;
  mask: url(/pr/i/webfi-logo-b.svg) center / 100% 100% no-repeat;
  animation: sheen 1.8s 1.1s var(--ease-in-out) both;
}
@keyframes sheen { to { background-position: -30% 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cover__mast, .cover__photo, .cover__mast::after { animation: none; }
  .js .rv, .js .rv-img img { opacity: 1; transform: none; clip-path: none; }
  * { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   ПРЕМИУМ-СЛОЙ (владелец 09.10: «банально, сделай дорого»).
   Плавающее стеклянное меню, кнопки-таблетки со стрелкой в кружке,
   карточки с двойным кантом (оправа + сердцевина), мозаика вместо
   одинаковых сеток, бегущая строка площадок, зерно плёнки.
   ════════════════════════════════════════════════════════════════ */
:root {
  --r: 16px;
  --shell: rgba(255, 246, 225, .035);
  --shell-line: rgba(255, 246, 225, .07);
  --core: #121010;
  --core-hi: inset 0 1px 0 rgba(255, 246, 225, .07);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
}
body {
  background:
    radial-gradient(900px 600px at 85% 8%, rgba(201, 164, 92, .07), transparent 60%),
    radial-gradient(800px 700px at 0% 55%, rgba(201, 164, 92, .05), transparent 60%),
    var(--night);
}
/* зерно плёнки — неподвижный слой поверх всего, клики не ловит */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sec { padding: 64px 0; }
@media (min-width: 900px) { .sec { padding: clamp(96px, 9vw, 140px) 0; } }
.steps, .person { background: transparent; }

/* метка раздела вместо золотой чёрточки */
.h2::before { content: none; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: var(--shell); box-shadow: inset 0 0 0 1px var(--shell-line);
  font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.h2 { font-weight: 500; letter-spacing: -.02em; font-size: clamp(36px, 5.6vw, 68px); }

/* ── Плавающее стеклянное меню ── */
.bar {
  inset: max(12px, env(safe-area-inset-top)) 12px auto 12px; height: 60px; padding: 0 8px 0 18px;
  border-radius: 999px; gap: 18px;
  background: transparent; box-shadow: none;
  transition: transform .45s var(--ease-soft), background-color .3s ease, box-shadow .3s ease;
}
.bar.is-solid {
  background: rgba(18, 16, 15, .72);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 225, .06);
}
.bar.is-hidden { transform: translateY(calc(-100% - 24px)); }
@media (min-width: 900px) { .bar { transform: translateX(-50%); } .bar.is-hidden { transform: translate(-50%, calc(-100% - 24px)); } }
/* кнопка меню — отдельный кружок вне панели: у панели есть transform и blur,
   внутри них position: fixed раскрытого меню считался бы от панели */
@media (max-width: 899px) { .bar { padding-right: 64px; } }
/* наверху страницы логотип уже на обложке — в панели его нет */
.bar__logo { opacity: 0; visibility: hidden; }
.bar.is-solid .bar__logo { opacity: 1; visibility: visible; }
.bar__logo img { height: 28px; }
.bar__nav a { font-size: 15px; font-weight: 500; }
@media (min-width: 900px) {
  .bar { left: 50%; right: auto; width: min(1100px, calc(100% - 48px)); padding: 0 8px 0 24px; }
}

/* ── Кнопки-таблетки, стрелка в своём кружке ── */
.btn {
  min-height: 56px; padding: 0 8px 0 26px; gap: 14px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 34px -14px rgba(201, 164, 92, .6);
  transition: transform .5s var(--ease-soft), filter .3s ease;
}
.btn__ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(23, 18, 10, .12); color: #17120a;
  transition: transform .5s var(--ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__ic { transform: translate(2px, -2px) scale(1.06); }
}
.btn:active { transform: scale(.98); }
.btn--ghost { background: var(--shell); color: var(--ivory); box-shadow: inset 0 0 0 1px var(--shell-line); }
.btn--ghost .btn__ic { background: rgba(255, 246, 225, .08); color: var(--gold-hi); }
.btn--small { min-height: 44px; padding: 0 5px 0 18px; font-size: 15px; gap: 10px; }
.btn--small .btn__ic { width: 34px; height: 34px; }
.btn--wide { justify-content: space-between; }

/* ── Двойной кант: сердцевина + оправа кольцом через box-shadow ── */
.who__grid > div, .svc__group, .brief, .steps__note, .form {
  background: rgba(255, 246, 225, .022);
  border: 0; border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 225, .06);
}
.who__grid, .svc__groups, .briefs { gap: 14px !important; }
.who__grid > div, .brief { padding: 28px 26px 30px; }
/* фото и видео — в той же оправе */
.who__photo img, .club__photo img, .steps__photo, .lead__photo, .feature__hero img,
.feature__strip img, .reel video, .person__photo img {
  border-radius: var(--r);
  box-shadow: none;
}
.feature__strip { padding: 0 var(--gut) 4px; gap: 12px; }
@media (min-width: 900px) { .feature__strip { padding: 0; gap: 14px; } }

/* Услуги и короткие кейсы — ровные сетки: колонки одной ширины, карточки в ряду одной высоты */
.brief .brief__num { font-weight: 500; letter-spacing: -.02em; }

.steps__note { padding: 32px 34px; }

/* диаграмма и форма — панелями */
.form { padding: 30px 28px 32px; }

/* ── Бегущая строка площадок ── */
.marq {
  padding: 26px 0; overflow: hidden;
  border-block: 1px solid var(--shell-line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marq__track { display: flex; width: max-content; animation: marq 38s linear infinite; }
.marq ul { display: flex; gap: 56px; padding-right: 56px; margin: 0; }
.marq li {
  display: flex; align-items: center; gap: 56px; white-space: nowrap;
  font: 500 clamp(18px, 2vw, 24px)/1 var(--serif); color: rgba(239, 231, 216, .55); letter-spacing: .01em;
}
.marq li::after { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); opacity: .7; }
@keyframes marq { to { transform: translateX(-50%); } }

/* обложка: анонсы — стеклянные плашки */
.cover__lead h1 { font-weight: 500; letter-spacing: -.025em; }
@media (min-width: 900px) { .cover__lead h1 { font-size: 72px; } }

/* появление: мягче и «тяжелее» */
.js .rv { transform: translateY(20px); filter: blur(4px); }
.js .rv.is-in { filter: none; transition: opacity .6s var(--ease-soft) var(--d, 0s), transform .6s var(--ease-soft) var(--d, 0s), filter .6s var(--ease-soft) var(--d, 0s); }

@media (prefers-reduced-motion: reduce) {
  .marq__track { animation: none; }
  .js .rv { filter: none; }
}

@media (min-width: 900px) { .cover { padding-top: 112px; } }

/* лента кадров: прилипает с отступом, кольца оправы не срезаются у края */
.feature__strip { scroll-padding-inline: var(--gut); }

/* ════════════════════════════════════════════════════════════════
   МЕНЮ НА ТЕЛЕФОНЕ. Один блок вместо прежних слоёв.
   Шторка справа со своей шапкой и крестиком, пункты выезжают лесенкой,
   за шторкой затемнение; закрытие — в pr.js.
   ════════════════════════════════════════════════════════════════ */
.menu { position: fixed; z-index: 30; top: calc(max(12px, env(safe-area-inset-top)) + 8px); right: 20px; margin: 0; }
.menu summary {
  position: relative; z-index: 2; list-style: none; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-content: center; gap: 6px;
  border-radius: 50%; background: rgba(18, 16, 15, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--shell-line);
  transition: box-shadow .4s ease, background-color .4s ease;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 1.5px; background: var(--ivory); transition: transform .45s var(--ease-soft), width .45s var(--ease-soft); }
.menu summary span:last-child { width: 12px; justify-self: end; }
.menu[open] summary { background: rgba(201, 164, 92, .12); box-shadow: inset 0 0 0 1px var(--gold-line); }
.menu[open] summary span { width: 18px; background: var(--gold-hi); }
.menu[open] summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 1200px) { .menu { display: none; } }

/* шторка справа на всю высоту; страница за ней затемняется */
.menu::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(5, 5, 5, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s ease;
}
.menu[open]::before { opacity: 1; pointer-events: auto; }
.menu.is-closing::before { opacity: 0; }
.menu[open] summary { opacity: 0; pointer-events: none; }
html.menu-lock { overflow: hidden; }
.menu__panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 3;
  width: min(86vw, 360px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  border-left: 1px solid rgba(255, 246, 225, .12); border-radius: 22px 0 0 22px;
  background:
    radial-gradient(80% 40% at 100% 0%, rgba(201, 164, 92, .10), transparent 70%),
    linear-gradient(180deg, rgba(30, 29, 27, .97), rgba(11, 10, 10, .98));
  box-shadow: -30px 0 60px rgba(0, 0, 0, .55);
}
.menu[open] .menu__panel { animation: sheetIn .55s var(--ease-soft) both; }
.menu.is-closing .menu__panel { animation: sheetOut .3s var(--ease-in-out) both; }
@keyframes sheetIn { from { transform: translateX(100%); } }
@keyframes sheetOut { to { transform: translateX(100%); } }
.menu__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--hair); }
.menu__head img { height: 30px; width: auto; }
.menu__x {
  position: relative; isolation: isolate; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; border: 1px solid rgba(255, 246, 225, .2); color: var(--ivory); cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(18, 17, 16, .75));
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .18);
}
.menu__x::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 48%; z-index: -1;
  border-radius: inherit; border-bottom-left-radius: 40% 30%; border-bottom-right-radius: 40% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .02));
}

.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list a {
  display: flex; align-items: center; gap: 12px; padding: 14px 12px;
  border-radius: 10px; text-decoration: none; color: var(--ivory);
  font-size: 17px; font-weight: 500;
  transition: background-color .25s ease, color .25s ease;
}
.menu__list i { font: 500 11px/1 var(--sans); font-style: normal; letter-spacing: .08em; color: var(--gold); min-width: 18px; }
.menu__list a::after {
  content: "→"; margin-left: auto; color: var(--gold-hi); opacity: 0; transform: translateX(-6px);
  transition: opacity .25s ease, transform .35s var(--ease-soft);
}
.menu__list a:hover, .menu__list a:focus-visible, .menu__list a:active { background: rgba(255, 246, 225, .06); color: var(--gold-hi); }
.menu__list a:hover::after, .menu__list a:focus-visible::after, .menu__list a:active::after { opacity: 1; transform: none; }

.menu__list .menu__devitem { margin-top: 6px; }
.menu__devitem a {
  border: 1px solid rgba(232, 211, 162, .3); padding: 12px 12px 13px;
  background: linear-gradient(180deg, rgba(232, 200, 120, .1), rgba(232, 200, 120, .02));
}
.menu__devitem a::after { opacity: 1; transform: none; }
.menu__devitem span { display: grid; gap: 3px; }
.menu__devitem small { font-size: 12.5px; font-weight: 500; color: var(--smoke); letter-spacing: 0; }

.menu__foot { margin-top: auto; padding: 14px 2px 2px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu__foot .btn { min-height: 46px; padding: 0 12px; justify-content: center; gap: 8px; font-size: 15px; }
.menu__foot .btn svg { flex: none; }

/* пункты проявляются лесенкой вслед за карточкой */
.menu[open] .menu__list li, .menu[open] .menu__foot { animation: menuRise .5s var(--ease-soft) both; }
.menu[open] .menu__list li:nth-child(1) { animation-delay: .05s; }
.menu[open] .menu__list li:nth-child(2) { animation-delay: .08s; }
.menu[open] .menu__list li:nth-child(3) { animation-delay: .11s; }
.menu[open] .menu__list li:nth-child(4) { animation-delay: .14s; }
.menu[open] .menu__list li:nth-child(5) { animation-delay: .17s; }
.menu[open] .menu__list li:nth-child(6) { animation-delay: .2s; }
.menu[open] .menu__foot { animation-delay: .23s; }
@keyframes menuRise { from { opacity: 0; transform: translateX(24px); } }

@media (prefers-reduced-motion: reduce) {
  .menu .menu__panel, .menu * { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   СТЕКЛЯННЫЕ КНОПКИ — рецепт кнопки «Начать торговать» с лендинга
   Syntharis (landing/lib/synth-fx.css), перекрашен в золото:
   полупрозрачное стекло с тонкой рамкой, сверху светлая «шапка»
   на 48 % высоты с изогнутой нижней кромкой, под текстом.
   ════════════════════════════════════════════════════════════════ */
.btn, .menu summary { position: relative; isolation: isolate; }
.btn::before, .menu summary::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 48%;
  border-radius: inherit; border-bottom-left-radius: 40% 30%; border-bottom-right-radius: 40% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03));
  pointer-events: none; z-index: -1;
}
.btn {
  border-radius: 12px; color: #1a140a;
  background: linear-gradient(180deg, #f1dca6 0%, #d9b66e 48%, #c39a4e 52%, #a8823a 100%);
  border: 1px solid rgba(255, 240, 200, .75);
  box-shadow: inset 0 -6px 14px rgba(90, 60, 15, .28), 0 0 22px rgba(201, 164, 92, .25), 0 10px 24px -10px rgba(0, 0, 0, .6);
  transition: transform .3s var(--ease-soft), filter .3s ease, box-shadow .3s ease;
}
.btn::before { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)); }
.btn__ic { border-radius: 9px; background: rgba(60, 40, 10, .14); color: #1a140a; box-shadow: inset 0 0 0 1px rgba(90, 60, 15, .22); }
.btn--ghost {
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  border-color: rgba(255, 246, 225, .2);
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .25), 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.btn--ghost::before { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .02)); }
.btn--ghost .btn__ic { background: rgba(255, 246, 225, .07); color: var(--gold-hi); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
  .btn--ghost:hover { filter: none; border-color: rgba(232, 211, 162, .4); }
}
.btn:active { transform: translateY(1px) scale(.99); }
.menu summary {
  border-radius: 12px; border: 1px solid rgba(255, 246, 225, .2);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(18, 17, 16, .75));
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .18);
}
.menu[open] summary { border-color: rgba(232, 211, 162, .5); background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(18, 17, 16, .75)); }

/* ════════════════════════════════════════════════════════════════
   КАРТОЧКИ-ЦИФРЫ НА ОБЛОЖКЕ: значок в золотом кружке, цифра металлом
   (13 и 12 000 отсчитываются, pr.js), по рамке бежит золотой отблеск,
   сверху стеклянная шапка, как у кнопок.
   ════════════════════════════════════════════════════════════════ */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.stat {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-content: start; gap: 6px;
  padding: 16px 16px 18px; border-radius: 18px;
  font-size: 13.5px; line-height: 1.4; color: var(--smoke);
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(201, 164, 92, .16), transparent 60%),
    linear-gradient(165deg, rgba(38, 34, 29, .82), rgba(13, 12, 11, .9));
  box-shadow: inset 0 -10px 24px rgba(0, 0, 0, .3), 0 16px 34px -18px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* рамка: тонкий золотой кант + бегущий по кругу отблеск */
.stat::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background:
    conic-gradient(from var(--beam), transparent 0 62%, rgba(255, 236, 190, .95) 72%, transparent 82%),
    linear-gradient(160deg, rgba(232, 211, 162, .42), rgba(232, 211, 162, .1) 60%, rgba(232, 211, 162, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 7s linear infinite; animation-delay: calc(var(--s) * -1.75s);
}
@keyframes beam { to { --beam: 360deg; } }
/* стеклянная шапка */
.stat::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 46%; z-index: -1;
  border-radius: 17px 17px 0 0; border-bottom-left-radius: 40% 30%; border-bottom-right-radius: 40% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.stat__ic {
  display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 6px; border-radius: 50%;
  color: #f3dfaa; border: 1px solid rgba(232, 200, 120, .45);
  background: radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .3), rgba(201, 164, 92, .06) 70%);
  box-shadow: 0 0 18px rgba(201, 164, 92, .25), inset 0 1px 0 rgba(255, 246, 225, .25);
}
.stat b {
  display: block; font: 700 clamp(24px, 7vw, 32px)/1.05 var(--sans); letter-spacing: -.01em;
  background: linear-gradient(180deg, #fbf0d2 0%, #e8cf93 45%, #c79d50 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat b small { font-size: .56em; font-weight: 600; letter-spacing: 0; }
.stat:nth-child(2) b, .cover__lines--right .stat:first-child b { font-size: clamp(20px, 5.6vw, 26px); }
.stat__n { font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) {
  .stat { padding: 20px 22px 22px; font-size: 14.5px; }
  .cover__lines--left .stat { justify-items: end; text-align: right; }
  .cover__lines--right { margin-top: -40px; }
  .stat b { font-size: 34px; }
  .stat:nth-child(2) b, .cover__lines--right .stat:first-child b { font-size: 28px; }
}
.stat--hero { align-content: space-between; }
.stat--hero b { font-size: clamp(64px, 20vw, 84px); line-height: .9; letter-spacing: -.03em; }
.stat--hero b small { font-size: .3em; letter-spacing: 0; margin-left: 2px; }
.stat--hero > span:last-child { font-size: 17px; font-weight: 600; color: var(--gold-hi); letter-spacing: .02em; }
@media (min-width: 1200px) { .stat--hero b { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) { .stat::before { animation: none; } }

/* стеклянная шапка, как у кнопок */

/* волны от шара */

/* ════════════════════════════════════════════════════════════════
   ШЛИФОВКА 1 (владелец 09.10: «воздух лишний», «банально», «вау»).
   Разделители на стыках секций, золотой акцент и появление заголовков
   по словам, плашки вместо серых абзацев, фото по центру на телефоне,
   на телефоне сверху только кнопка «Обсудить» и меню.
   ════════════════════════════════════════════════════════════════ */
/* разделитель: золотая нить с ромбом, прорисовывается при прокрутке */
.sec { position: relative; view-timeline: --sec block; }
.sec + .sec::before, .sec + .sec::after { content: ""; position: absolute; left: 50%; pointer-events: none; }
.sec + .sec::before {
  top: 0; width: min(88%, 1000px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 200, 120, .55) 50%, transparent);
}
.sec + .sec::after {
  top: -5px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fbefcf, #c9a45c 60%, #8e6a2d);
  box-shadow: 0 0 0 5px var(--night), 0 0 18px rgba(232, 200, 120, .75);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sec + .sec::before { animation: divDraw linear both; animation-timeline: --sec; animation-range: entry 0% entry 35%; }
    .sec + .sec::after { animation: divGem linear both; animation-timeline: --sec; animation-range: entry 5% entry 40%; }
  }
}
@keyframes divDraw { from { transform: translateX(-50%) scaleX(0); opacity: 0; } }
@keyframes divGem { from { transform: rotate(-135deg) scale(0); } }

/* заголовки: ключевое слово золотом, слова выезжают из-под маски (pr.js) */
.h2 em {
  font-style: normal;
  background: linear-gradient(180deg, #fbf0d2 0%, #e8cf93 45%, #c79d50 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.h2 .wi { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease-soft) calc(var(--i) * .06s); }
.h2 em .wi {
  background: linear-gradient(180deg, #fbf0d2 0%, #e8cf93 45%, #c79d50 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2.is-in .wi { transform: none; }
@media (prefers-reduced-motion: reduce) { .h2 .wi { transform: none; transition: none; } }

/* выделения в тексте */
.lede strong, .callout strong, .steps__note strong { color: var(--gold-hi); font-weight: 700; }

/* плашки: значок в золотом кружке + текст */
.callout {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start;
  margin-top: 28px; padding: 18px 18px 20px; max-width: 62ch; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(201, 164, 92, .12), transparent 60%),
    linear-gradient(165deg, rgba(34, 31, 27, .9), rgba(14, 13, 12, .92));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16), 0 16px 34px -20px rgba(0, 0, 0, .9);
  font: 500 16px/1.55 var(--sans); color: var(--ivory);
}
.callout--gold {
  box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .4), 0 0 30px -10px rgba(201, 164, 92, .35);
  font: 600 18px/1.5 var(--sans); color: var(--gold-hi);
}
.callout--gold strong { color: #fff4dc; }
.callout--muted { font-size: 15px; color: var(--smoke); }
.callout__ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: #f3dfaa; border: 1px solid rgba(232, 200, 120, .45);
  background: radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .28), rgba(201, 164, 92, .05) 70%);
  box-shadow: 0 0 16px rgba(201, 164, 92, .22);
}
.who__gain.callout { border-top: 0; padding-top: 18px; }
@media (min-width: 900px) { .callout { padding: 22px 24px 24px; font-size: 17px; } .callout--gold { font-size: 20px; } }

/* плотнее по вертикали на телефоне */
@media (max-width: 899px) {
  .lede { margin-top: 22px; font-size: 20px; }
  .who__grid { margin-top: 28px; }
  .who__photo { margin-top: 28px; }
  .svc__groups { margin-top: 32px; }
  .steps__foot { margin-top: 32px; }
  .reels { margin-top: 48px; }
  .feature { margin-top: 32px; }
  .feature--second { margin-top: 56px; padding-top: 32px; }
  .eyebrow { margin-bottom: 16px; }
  /* все фото и видео — по центру */
  .who__photo, .steps__photo, .person__photo, .club__photo, .lead__photo, .reel, .feature__hero {
    margin-left: auto; margin-right: auto; justify-self: center;
  }
  /* ширина явно: иначе обёртка ужимается до ленивой картинки и до её загрузки равна 0 —
     потом раздувается и сдвигает страницу (якоря промахивались) */
  .who__photo, .person__photo, .feature__hero, .club__photo { width: 100%; }
  /* сверху только кнопка «Обсудить» и меню, без плашки с логотипом */
  .bar, .bar.is-solid {
    left: auto; right: 74px; width: auto; padding: 0;
    background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .bar.is-hidden { transform: none; }
  .bar__logo { display: none; }
}

/* форма заявки: явные поля-рамки со значком и подсказкой, плотнее */
.form { gap: 16px; }
.field { gap: 8px; }
.field > span:first-child { font-size: 14px; font-weight: 600; color: var(--ivory); letter-spacing: .01em; }
.field__box {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 14px;
  border-radius: 12px; background: rgba(255, 246, 225, .045);
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .24);
  transition: box-shadow .25s ease, background-color .25s ease;
  cursor: text;
}
.field__box--area { align-items: flex-start; padding-top: 15px; }
.field__ic { flex: none; color: var(--gold); opacity: .85; }
.field__box input, .field__box textarea {
  flex: 1; min-width: 0; padding: 0; border: 0; background: transparent;
  font: 500 17px/1.4 var(--sans); color: var(--ivory);
}
.field__box textarea { min-height: 84px; padding-bottom: 12px; resize: vertical; }
.field__box input::placeholder, .field__box textarea::placeholder { color: rgba(185, 175, 159, .55); }
.field__box input:focus, .field__box textarea:focus { outline: none; border: 0; }
.field__box:focus-within {
  background: rgba(232, 200, 120, .07);
  box-shadow: inset 0 0 0 1.5px rgba(240, 214, 150, .85), 0 0 22px rgba(201, 164, 92, .25);
}
.field__box:focus-within .field__ic { opacity: 1; color: var(--gold-hi); }
.field__box.is-bad { box-shadow: inset 0 0 0 1.5px #d27a6a; }
@media (max-width: 899px) { .form { padding: 20px 18px 22px; } .form__legal { font-size: 13px; } }

@keyframes spin { to { transform: rotate(360deg); } }

/* блок ушёл с экрана — его бесконечные анимации стоят (телефон не греется) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ════════════════════════════════════════════════════════════════
   «КАК МЫ РАБОТАЕМ»: золотая шкала слева заполняется при прокрутке
   (--p задаёт pr.js), дойдя до шага — кружок загорается с волной,
   карточка выезжает и подсвечивается.
   ════════════════════════════════════════════════════════════════ */
.steps__list { --p: 0; position: relative; margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
/* дорожка и золотая заливка — одним слоем; заливка растёт фоном (полоска 2 px — дёшево) */
.steps__list::before {
  content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; border-radius: 2px;
  background:
    linear-gradient(180deg, #fff1cc, #e2c88c 40%, #c79d50) no-repeat 0 0 / 100% calc(var(--p) * 100%),
    linear-gradient(180deg, rgba(232, 211, 162, .16), rgba(232, 211, 162, .16) 85%, transparent);
}
/* «голова» заливки — светящаяся точка, у которой линия начинается и растёт */
.steps__list::after {
  content: ""; position: absolute; left: 22px; top: 22px; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 25%, #f0d696 45%, rgba(232, 200, 120, 0) 72%);
  box-shadow: 0 0 14px 4px rgba(232, 200, 120, .55);
  transform: translateY(var(--py, 0px)); will-change: transform;
  animation: headPulse 1.8s ease-in-out infinite;
}
@keyframes headPulse { 50% { box-shadow: 0 0 22px 7px rgba(232, 200, 120, .7); } }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.step__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 14px;
  border-radius: 50%; font: 700 16px/1 var(--sans); color: var(--gold-hi);
  background: #14120f; box-shadow: inset 0 0 0 1.5px rgba(232, 211, 162, .3);
  transition: color .4s ease, box-shadow .4s ease, background .4s ease;
}
.step__dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid #f0d696; opacity: 0; pointer-events: none;
}
.step.is-on .step__dot {
  color: #1a140a; background: linear-gradient(180deg, #f6e3ad, #c9a45c);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, .18), 0 0 22px rgba(232, 200, 120, .55);
}
.step.is-on .step__dot::after { animation: stepWave 1.2s ease-out; }
@keyframes stepWave { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.step__card {
  position: relative; isolation: isolate; overflow: hidden; padding: 18px 18px 20px; border-radius: 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(201, 164, 92, .1), transparent 60%),
    linear-gradient(165deg, rgba(34, 31, 27, .9), rgba(14, 13, 12, .92));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .12), 0 16px 34px -20px rgba(0, 0, 0, .9);
  opacity: .45; transform: translateX(14px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.step__card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(240, 214, 150, .55), inset 0 0 30px rgba(201, 164, 92, .12);
  transition: opacity .6s ease;
}
.step.is-on .step__card { opacity: 1; transform: none; }
.step.is-on .step__card::after { opacity: 1; }
.step__k { margin: 0 0 6px; font: 700 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.step__card h3 { margin: 0; font: 600 19px/1.3 var(--sans); color: var(--ivory); padding-right: 40px; }
.step__card h3 + p { margin: 6px 0 0; color: var(--smoke); font-size: 15.5px; line-height: 1.55; }
.step__ic { position: absolute; right: 14px; top: 14px; color: var(--gold); opacity: .55; }
.step.is-on .step__ic { opacity: 1; color: var(--gold-hi); }
@media (min-width: 900px) {
  .steps__list { max-width: 820px; gap: 18px; }
  .step__card { padding: 22px 26px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .steps__list::after { animation: none; }
  .step__card { opacity: 1; transform: none; transition: none; }
}

/* заливка и искра на конце */

/* ════════════════════════════════════════════════════════════════
   КЛУБ VERUM: всё по центру. Шар из точек «VERUM AI думает» (как на
   загрузке VERUM, orb.js), рядом «поток мыслей» — строки задач по очереди
   печатаются и отмечаются готовыми; 4 умения помощника плашками.
   ════════════════════════════════════════════════════════════════ */
/* Клуб VERUM (10.10.2026): свой язык, не карточки главной — карта клуба со ступенями,
   нумерованный список на тонких линиях, окно диалога с AI, путь вступления рельсом. */
.club__wrap { display: grid; gap: 56px; }
.club__intro { display: grid; justify-items: start; }
.club__lead { margin-top: 18px; max-width: 34ch; font-size: clamp(19px, 2.2vw, 22px); line-height: 1.5; color: var(--ivory); }

/* карта клуба */
.pass { --tier-c: oklch(70% 0.14 248); display: grid; justify-items: center; gap: 18px; }
.pass[data-tier="gold"] { --tier-c: #e6c47c; }
.pass__card {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(100%, 380px); aspect-ratio: 1.586; padding: 20px 22px 22px; border-radius: 18px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(232, 211, 162, .15), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255, 246, 225, .022) 0 1px, transparent 1px 4px),
    linear-gradient(155deg, #29241e, #100e0c 58%, #191512);
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .26), inset 0 1px 0 rgba(255, 246, 225, .2),
    0 34px 60px -30px rgba(0, 0, 0, .95), 0 0 90px -34px rgba(201, 164, 92, .45);
  transform: perspective(1000px) rotateX(5deg) rotateZ(-2deg);
  transition: box-shadow .5s ease;
}
/* сфера VERUM водяным знаком */
.pass__card::after {
  content: ""; position: absolute; z-index: -1; right: -16%; bottom: -34%; width: 64%; aspect-ratio: 1;
  background: url(/pr/i/verum-mark-384.webp) center / contain no-repeat; opacity: .1; pointer-events: none;
}
.pass[data-tier="gold"] .pass__card {
  box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .55), inset 0 1px 0 rgba(255, 246, 225, .28),
    0 34px 60px -30px rgba(0, 0, 0, .95), 0 0 100px -30px rgba(214, 176, 98, .7);
}
/* один проход блика: при появлении и при смене ступени */
.pass__sheen {
  position: absolute; inset: -40% -60%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 240, 205, .16) 50%, transparent 58%);
  transform: translateX(-60%);
}
.pass.is-shine .pass__sheen { animation: passSheen 1.4s var(--ease-out); }
@keyframes passSheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.pass__top { display: flex; align-items: center; gap: 10px; }
.pass__logo { width: 36px; height: 36px; filter: drop-shadow(0 0 12px rgba(201, 164, 92, .35)); }
.pass__word { font: 600 15px/1 var(--sans); letter-spacing: .42em; color: var(--gold-hi); }
.pass__closed { margin-left: auto; font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--smoke); }
.pass__bottom { display: grid; gap: 8px; }
.pass__name { font: 500 clamp(20px, 6vw, 24px)/1.1 var(--sans); letter-spacing: .02em; color: var(--ivory); }
.pass__status { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.pass__check { flex: none; color: var(--tier-c); transition: color .4s ease, transform .4s var(--ease-out); }
.pass[data-tier="member"] .pass__check { display: none; }
.pass__tier { display: none; }
.pass[data-tier="member"] [data-for="member"], .pass[data-tier="resident"] [data-for="resident"], .pass[data-tier="gold"] [data-for="gold"] { display: inline; }

.pass__tabs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 380px); margin-top: 10px; padding: 4px;
  border-radius: 999px; background: rgba(255, 246, 225, .035); box-shadow: inset 0 0 0 1px var(--hair);
}
.pass__tabs button {
  min-height: 44px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 600 14px/1 var(--sans); color: var(--smoke); -webkit-tap-highlight-color: transparent;
  transition: color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.pass__tabs button[aria-selected="true"] { color: var(--gold-hi); background: rgba(232, 211, 162, .1); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .3); }
.pass__tabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* панели в одной клетке: блок не прыгает по высоте при смене ступени */
.pass__panels { display: grid; width: min(100%, 380px); }
.pass__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
.pass__panel.is-on { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.pass__when { color: var(--smoke); font-size: 15px; line-height: 1.55; }
.pass__when b { color: var(--ivory); font-weight: 600; }
.pass__perks { margin-top: 10px; }
.pass__perks li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.4; color: var(--ivory); }
.pass__perks li::before {
  content: ""; position: absolute; left: 3px; top: 15px; width: 5px; height: 10px;
  border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}

/* зачем вступать: строки «заголовок — пояснение» на тонких линиях, без номеров
   (номера контуром — приём страницы «Разработка») */
.why__h, .join__h { font: 500 clamp(26px, 3.6vw, 36px)/1.15 var(--sans); letter-spacing: -.01em; color: var(--ivory); }
.why__list { margin-top: 18px; border-bottom: 1px solid var(--hair); }
.why__list li { display: grid; gap: 6px; padding: 20px 0; border-top: 1px solid var(--hair); }
.why__list b { font: 600 19px/1.3 var(--sans); color: var(--gold-hi); }
.why__list p { color: var(--smoke); font-size: 15.5px; line-height: 1.6; }

/* окно диалога с VERUM AI */
.chat {
  width: 100%; padding: 16px 14px 18px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 27, 23, .96), rgba(12, 11, 10, .98));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16), 0 30px 60px -34px rgba(0, 0, 0, .9);
}
.chat__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.chat__orb { position: relative; flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 164, 92, .22), transparent 70%); }
.chat__orb canvas { width: 52px; height: 52px; }
.chat__name { font: 600 16px/1.2 var(--sans); color: var(--ivory); }
.chat__typing { margin-left: 8px; font-weight: 500; font-size: 13px; color: var(--gold); opacity: 0; transition: opacity .3s ease; }
.chat.is-typing .chat__typing { opacity: 1; }
.chat__sub { margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--smoke); }
.chat__sub b { color: var(--gold-hi); font-weight: 600; }
.chat__label { margin: 14px 0 10px; text-align: center; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.chat__log { display: grid; gap: 8px; }
.chat__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.5; color: var(--smoke); }
.chat__msg { max-width: 86%; padding: 10px 14px; font-size: 15px; line-height: 1.45; }
.chat__msg--me { justify-self: end; border-radius: 16px 16px 4px 16px; background: rgba(232, 211, 162, .16); color: var(--ivory); }
.chat__msg--ai { justify-self: start; border-radius: 16px 16px 16px 4px; background: rgba(255, 246, 225, .05); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .14); color: var(--ivory); }
.js .chat__msg { opacity: 0; transform: translateY(8px); }
.js .chat__msg.is-shown { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s var(--ease-out); }

/* как попасть: рельс из четырёх остановок */
.join { display: grid; gap: 28px; }
.join__body > p { margin-top: 18px; max-width: 52ch; color: var(--smoke); font-size: 16px; line-height: 1.65; }
.join__rail { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; padding-top: 26px; }
.join__rail::before, .join__rail::after { content: ""; position: absolute; top: 6px; left: 12.5%; right: 12.5%; height: 1px; background: var(--gold-line); }
.join__rail::after { background: var(--gold); transform-origin: left; transform: scaleX(1); }
.join__rail li { position: relative; text-align: center; font: 600 14px/1.2 var(--sans); color: var(--ivory); }
.join__rail li::before {
  content: ""; position: absolute; left: 50%; top: -26px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: var(--night); box-shadow: inset 0 0 0 1.5px var(--gold); transition: background-color .4s ease var(--rd, 0s);
}
.join__rail li:nth-child(2) { --rd: .35s; } .join__rail li:nth-child(3) { --rd: .7s; } .join__rail li:nth-child(4) { --rd: 1.05s; }
.join__rail.is-on li::before { background: var(--gold); }
.js .join__rail::after { transform: scaleX(0); }
.js .join__rail.is-on::after { transform: scaleX(1); transition: transform 1.2s var(--ease-out); }
.join__body > .join__lead-note { padding-top: 18px; border-top: 1px solid var(--hair); color: var(--ivory); }
.club__cta { display: grid; justify-items: start; gap: 10px; margin-top: 24px; }
.club__cta .btn { min-width: 260px; justify-content: space-between; gap: 14px; }
.club__reply { font-size: 13px; color: var(--smoke); }
.club__photo { margin: 0; width: min(100%, 460px); justify-self: center; }

/* личный AI-секретарь — коротко и пример переписки */
.sai { display: grid; gap: 28px; padding-top: 40px; border-top: 1px solid var(--gold-line); scroll-margin-top: 90px; }
.sai__h { margin-top: 12px; font: 600 clamp(26px, 3.2vw, 34px)/1.15 var(--serif); color: var(--gold-hi); }
.sai__lead { margin-top: 12px; color: var(--ivory); font-size: 16.5px; line-height: 1.6; }
.sai__list { margin-top: 16px; display: grid; gap: 10px; }
.sai__list li { position: relative; padding-left: 20px; color: var(--smoke); font-size: 15.5px; line-height: 1.5; }
.sai__list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.sai__note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.5; color: var(--smoke); }
.sai__more { display: inline-block; margin-top: 14px; color: var(--ivory); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.sai__more:hover { color: var(--gold-hi); }
.sai__demo { display: grid; gap: 8px; align-content: start; padding: 16px 14px 18px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(30, 27, 23, .96), rgba(12, 11, 10, .98));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16), 0 30px 60px -34px rgba(0, 0, 0, .9); }
.sai__msg { max-width: 86%; padding: 10px 14px; font-size: 15px; line-height: 1.45; color: var(--ivory); }
.sai__msg--in { justify-self: start; border-radius: 16px 16px 16px 4px; background: rgba(255, 246, 225, .05); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .14); }
.sai__msg--out { justify-self: end; border-radius: 16px 16px 4px 16px; background: rgba(232, 211, 162, .16); }
.sai__msg i { display: block; margin-top: 6px; font-size: 13px; color: var(--smoke); }
.sai__msg i b { color: var(--gold-hi); font-weight: 600; }
.sai__sys { justify-self: center; margin-top: 4px; padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--gold-hi); background: rgba(201, 164, 92, .1); }

@media (min-width: 900px) {
  .club__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; row-gap: 96px; align-items: center; }
  .why { align-self: start; }
  .chat { align-self: start; max-width: 480px; justify-self: end; }
  .sai { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 72px; align-items: center; }
  .pass__card, .pass__tabs, .pass__panels { width: min(100%, 440px); }
  .join { grid-column: 1 / -1; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: center; }
  .club__photo { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pass.is-shine .pass__sheen { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   ПОДВАЛ: бренд и кнопка по центру, разделы и связь — две колонки
   ссылок со стрелками в одной карточке, разработка — своя карточка,
   партнёры — ровные золотистые плашки.
   ════════════════════════════════════════════════════════════════ */
.foot {
  position: relative; padding: 56px 0 calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(70% 40% at 50% 0%, rgba(201, 164, 92, .12), transparent 70%), var(--deep);
}
.foot::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(88%, 1000px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(232, 200, 120, .55) 50%, transparent);
}
.foot__top { display: grid; gap: 14px; }
.foot__brand { display: grid; justify-items: center; text-align: center; padding-bottom: 10px; }
.foot__logo { display: inline-block; line-height: 0; }
.foot__logo img { width: 210px; height: auto; }
.foot__tag { margin: 14px 0 20px; max-width: 30ch; color: var(--smoke); font-size: 15px; line-height: 1.55; }
.foot__h { margin: 0 0 10px; font: 700 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.foot__nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; padding: 18px 16px 10px; border-radius: 18px;
  background: linear-gradient(170deg, rgba(255, 246, 225, .05), rgba(255, 246, 225, .012));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .14);
}
.foot__col { display: grid; align-content: start; }
.foot__col a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 0;
  border-bottom: 1px solid var(--hair); color: var(--ivory); font-size: 15px; text-decoration: none; transition: color .2s;
}
.foot__col a:last-child { border-bottom: 0; }
.foot__col a::after { content: "→"; color: var(--gold); opacity: .7; transition: transform .3s var(--ease-soft); }
.foot__col a:hover { color: var(--gold-hi); }
.foot__col a:hover::after { transform: translateX(3px); }
.foot__dev {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 14px; align-items: center; align-content: center; padding: 16px; border-radius: 18px;
  text-decoration: none; color: var(--ivory);
  background: radial-gradient(120% 90% at 0% 0%, rgba(201, 164, 92, .14), transparent 60%), linear-gradient(170deg, rgba(34, 31, 27, .9), rgba(14, 13, 12, .92));
  box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .3);
}
.foot__dev-ic {
  grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #f3dfaa;
  border: 1px solid rgba(232, 200, 120, .45); background: radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .28), rgba(201, 164, 92, .05) 70%);
}
.foot__dev b { font: 600 16px/1.2 var(--sans); }
.foot__dev span:last-child { font-size: 13.5px; color: var(--smoke); line-height: 1.4; }
.foot__partners { margin-top: 30px; text-align: center; }
/* список партнёров свёрнут: раскрывается по нажатию (10.10 — страница короче) */
.foot__partners summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 18px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.foot__partners summary::-webkit-details-marker { display: none; }
.foot__partners summary::after {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-out);
}
.foot__partners[open] summary { margin-bottom: 14px; }
.foot__partners[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.foot__partners summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.foot__partners ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* ровная стена: плашки в строке растягиваются на всю ширину, края ровные */
.foot__partners li {
  flex: 1 1 auto; text-align: center; white-space: nowrap;
  padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.2; color: var(--smoke);
  background: rgba(255, 246, 225, .035); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .14);
}
.foot__bottom {
  display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--hair); color: var(--smoke); font-size: 13px; letter-spacing: .02em;
}
@media (min-width: 900px) {
  .foot { padding-top: 80px; }
  /* бренд слева на две строки, справа разделы и под ними карточка «Разработка» своей высоты
     (в 3 колонки карточку растягивало до высоты соседей — пустая коробка, владелец 10.10) */
  .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "brand nav" "brand dev"; gap: 14px 40px; align-items: start; }
  .foot__brand { grid-area: brand; }
  .foot__nav { grid-area: nav; }
  .foot__dev { grid-area: dev; }
  .foot__brand { justify-items: start; text-align: left; }
  .foot__logo img { width: 250px; }
}

/* ════════════════════════════════════════════════════════════════
   УСЛУГИ: карточка с шапкой (значок, название, сколько направлений),
   направления пронумерованы золотом и разделены тонкой линией.
   ════════════════════════════════════════════════════════════════ */
.svc__group {
  position: relative; isolation: isolate; overflow: hidden; padding: 20px 18px 8px; border-radius: 20px;
  background:
    radial-gradient(110% 60% at 0% 0%, rgba(201, 164, 92, .12), transparent 60%),
    linear-gradient(170deg, rgba(34, 31, 27, .92), rgba(12, 11, 10, .95));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .15), 0 18px 40px -24px rgba(0, 0, 0, .9);
}
.svc__group--lead { box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .42), 0 0 34px -12px rgba(201, 164, 92, .35); }
.svc__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ic h" "ic n"; gap: 2px 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid rgba(232, 211, 162, .14); }
.svc__ic {
  grid-area: ic; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #f3dfaa; border: 1px solid rgba(232, 200, 120, .45);
  background: radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .28), rgba(201, 164, 92, .05) 70%);
  box-shadow: 0 0 18px rgba(201, 164, 92, .22);
}
.svc__group .svc__head h3 {
  grid-area: h; margin: 0; padding: 0; border: 0; font: 700 clamp(21px, 5.6vw, 26px)/1.15 var(--sans);
  background: linear-gradient(180deg, #fbf0d2 0%, #e8cf93 45%, #c79d50 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc__n { grid-area: n; font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); }
.svc__group dl { margin: 0; }
.svc__group dt {
  display: flex; align-items: baseline; gap: 10px; margin: 0; padding-top: 14px;
  font: 600 16.5px/1.3 var(--sans); color: var(--ivory);
}
.svc__group dt i { flex: none; font: 700 11px/1 var(--sans); font-style: normal; letter-spacing: .08em; color: var(--gold); min-width: 20px; }
.svc__group dd { margin: 5px 0 0 30px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); color: var(--smoke); font-size: 15px; line-height: 1.55; }
.svc__group dd:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .svc__group { padding: 28px 28px 12px; }
}
/* телефон: партнёры ровной сеткой 2×N — все плашки одной ширины и высоты в ряду */
@media (max-width: 899px) {
  .foot__partners ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .foot__partners li { display: grid; place-items: center; min-height: 46px; padding: 8px 10px; white-space: normal; text-wrap: balance; font-size: 12.5px; line-height: 1.3; }
}

/* ════════════════════════════════════════════════════════════════
   КЕЙСЫ, РЕГАЛИИ, ПРЕССА — шлифовка (владелец 09.10: «банально»).
   ════════════════════════════════════════════════════════════════ */
.feature__tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi);
  background: rgba(232, 200, 120, .08); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .3);
}
.feature__title {
  margin-top: 14px; font: 700 clamp(32px, 9vw, 56px)/1.05 var(--sans); letter-spacing: -.02em;
  background: linear-gradient(180deg, #fff6e2 0%, #ecd49a 60%, #c99f52 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feature__sub {
  margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--gold);
  font: 600 clamp(17px, 4.6vw, 21px)/1.45 var(--sans); color: var(--gold-hi);
}
.feature__body > p:not([class]) { color: var(--smoke); font-size: 16px; line-height: 1.65; }
.feature__body > p strong { color: var(--ivory); font-weight: 700; }
/* факты: строки «цифра — подпись» в карточке */
.feature__facts {
  margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 4px 16px; border-radius: 16px;
  background: linear-gradient(170deg, rgba(255, 246, 225, .05), rgba(255, 246, 225, .012));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16);
}
.feature__facts > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--hair); }
.feature__facts > div:first-child { border-top: 0; }
.feature__facts dt {
  font: 700 clamp(22px, 6vw, 28px)/1.05 var(--sans); white-space: nowrap;
  background: linear-gradient(180deg, #fbf0d2 0%, #e8cf93 45%, #c79d50 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feature__facts dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ivory); hyphens: manual; }
.feature__src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.feature__src > span { font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--smoke); margin-right: 2px; }
.feature__src a {
  padding: 7px 12px; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ivory);
  background: rgba(255, 246, 225, .04); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .22);
}
.feature__src a::after { content: " ↗"; color: var(--gold); }
.feature--second { border-top: 0; }
.feature--second .feature__body {
  padding: 22px 18px 20px; border-radius: 20px;
  background: radial-gradient(100% 50% at 100% 0%, rgba(201, 164, 92, .12), transparent 60%), linear-gradient(170deg, rgba(34, 31, 27, .92), rgba(12, 11, 10, .95));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .15);
}
@media (min-width: 1200px) {
  .feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .feature__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; padding: 6px 20px; } .feature__facts > div { grid-template-columns: 1fr; gap: 6px; border-top: 0; }
}
/* ПК: кадры с событий — сеткой 2×2 под главным фото, слева; колонка текста справа на обе строки.
   Без этого под фото оставалась пустота высотой в полстраницы (владелец 10.10). */
@media (min-width: 1200px) {
  .feature:not(.feature--second) { grid-template-areas: "hero body" "strip body"; grid-template-rows: auto 1fr; }
  .feature:not(.feature--second) > .feature__hero { grid-area: hero; }
  .feature:not(.feature--second) > .feature__body { grid-area: body; }
  .feature:not(.feature--second) > .feature__strip { grid-area: strip; grid-column: auto; align-self: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature:not(.feature--second) > .feature__strip img { aspect-ratio: 10 / 11; } /* высота колонок вровень с текстом */
}
/* 900–1199: кейс в одну колонку, фото по центру не шире 760 */
@media (min-width: 900px) and (max-width: 1199px) { .feature__hero, .feature__body { max-width: 760px; width: 100%; justify-self: center; } }

/* короткие кейсы */
.brief {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: start;
  padding: 20px 18px 18px !important; border-radius: 18px !important;
  background: radial-gradient(110% 60% at 100% 0%, rgba(201, 164, 92, .12), transparent 60%), linear-gradient(170deg, rgba(34, 31, 27, .92), rgba(12, 11, 10, .95)) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .15), 0 16px 34px -22px rgba(0, 0, 0, .9) !important;
}
.brief__head { display: flex; align-items: center; gap: 12px; }
.brief__ic {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #f3dfaa;
  border: 1px solid rgba(232, 200, 120, .42); background: radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .26), rgba(201, 164, 92, .05) 70%);
}
.brief h3 { margin: 0; font: 700 19px/1.25 var(--sans); color: var(--ivory); }
.brief .brief__num { margin-top: 14px; font: 700 clamp(34px, 10vw, 44px)/1 var(--sans); letter-spacing: -.02em; }
.brief p { font-size: 15px; line-height: 1.55; }
.brief a {
  justify-self: start; margin-top: 14px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--gold-hi);
  background: rgba(232, 200, 120, .08); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .32);
}
.brief a::after { content: " →"; }
.briefs { margin-top: 40px; }

/* регалии */
.person__titles {
  margin-top: 22px; padding: 6px 16px; border-radius: 18px; list-style: none;
  background: linear-gradient(170deg, rgba(255, 246, 225, .05), rgba(255, 246, 225, .012));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16);
}
.person__titles li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 0; font-size: 15.5px; line-height: 1.45; color: var(--ivory); }
.person__titles li:last-child { border-bottom: 0; }
.person__titles li::before {
  content: ""; position: static; width: 20px; height: 20px; margin-top: 1px; transform: none; border-radius: 50%;
  background: radial-gradient(circle, #f6e3ad 0 3px, transparent 3.5px), radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .3), rgba(201, 164, 92, .06) 70%);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .45);
}

/* кнопка «наверх»: появляется после полутора экранов, кольцо — сколько страницы пройдено */
.totop {
  position: fixed; z-index: 25; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--gold-hi); background: linear-gradient(180deg, rgba(60, 52, 40, .85), rgba(14, 12, 11, .92));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .8), 0 0 18px rgba(201, 164, 92, .18);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .35s ease, transform .45s var(--ease-soft);
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 4px; height: 44%; border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); pointer-events: none;
}
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop__ring circle { fill: none; stroke: rgba(232, 211, 162, .2); stroke-width: 1.5; }
.totop__ring .totop__p { stroke: #e8c878; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sp, 0) * 100); }
.totop__ar { position: relative; }
.totop:active { transform: scale(.94); }
@media (min-width: 900px) { .totop { right: 28px; bottom: 28px; width: 52px; height: 52px; } }

/* телефон: больше места под содержимое — поля экрана и карточек меньше */
@media (max-width: 899px) {
  :root { --gut: 14px; }
  .who__grid > div { padding: 18px 16px 18px; }
  .steps__note { padding: 20px 16px; }
  .form { padding: 18px 14px 20px; }
  
  .feature--second .feature__body { padding: 20px 14px 18px; }
  .feature__facts { padding: 2px 14px; }
  .svc__group { padding: 18px 14px 6px; }
  .brief { padding: 18px 14px 16px !important; }
  .person__titles { padding: 4px 14px; }
  .foot__nav { padding: 16px 14px 8px; }
  
  .cover__lines { gap: 10px; }
  .stat { padding: 14px 13px 16px; }
}
/* телефон: сверху только кнопка меню — «Обсудить» есть в меню и в подвале (владелец 09.10) */
@media (max-width: 1199px) { .bar { display: none; } }

/* ════════════════════════════════════════════════════════════════
   ФОРМА: код страны в поле контакта, предпросмотр номера, кнопка
   с крутилкой, экран «Заявка отправлена» (~3 с анимации).
   ════════════════════════════════════════════════════════════════ */
.field--contact > label { font-size: 14px; font-weight: 600; color: var(--ivory); letter-spacing: .01em; }
.cc {
  position: relative; flex: none; display: flex; align-items: center; height: 36px; margin-left: -4px; padding: 0 8px; border-radius: 9px;
  background: rgba(232, 200, 120, .08); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .28);
  max-width: 120px; overflow: hidden; transition: max-width .35s var(--ease-soft), opacity .25s ease, padding .35s var(--ease-soft), margin .35s var(--ease-soft);
}
.cc.is-off { max-width: 0; padding: 0; margin: 0 -12px 0 0; opacity: 0; pointer-events: none; }
.cc__shown { display: flex; align-items: center; gap: 5px; font: 600 15px/1 var(--sans); color: var(--gold-hi); white-space: nowrap; pointer-events: none; }
.cc__flag { font-size: 17px; line-height: 1; }
.cc__shown svg { color: var(--gold); }
.cc__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.field__preview {
  min-height: 0; max-height: 0; margin: 0; overflow: hidden; opacity: 0; font-size: 13.5px; color: var(--gold-hi);
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.field__preview.is-on { max-height: 24px; margin-top: 2px; opacity: 1; }
.field__preview::before { content: "✓ "; color: var(--gold); }

.form .btn--wide { min-height: 60px; font-size: 17px; justify-content: center; gap: 14px; padding: 0 8px 0 24px; }
.form .btn--wide > span:first-child { flex: 1; text-align: center; }
.btn.is-busy > span:first-child { opacity: .35; }
.btn.is-busy .btn__ic { animation: spin .8s linear infinite; border-radius: 50%; }
.btn.is-busy .btn__ic svg { display: none; }
.btn.is-busy .btn__ic::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(26, 20, 10, .75); border-right-color: transparent; }

/* экран успеха поверх формы */
.form { position: relative; }
.form.is-sent > :not(.done) { visibility: hidden; }
.done {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 10px;
  padding: 24px 18px; text-align: center; border-radius: inherit;
  background: radial-gradient(70% 50% at 50% 30%, rgba(201, 164, 92, .2), transparent 70%), linear-gradient(170deg, #1c1915, #0d0c0b);
}
.done[hidden] { display: none; }
.done__mark { position: relative; width: 112px; height: 112px; margin-bottom: 6px; }
.done__mark svg { width: 100%; height: 100%; overflow: visible; }
.done__ring { fill: rgba(232, 200, 120, .06); stroke: #e8c878; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 60px 60px; filter: drop-shadow(0 0 8px rgba(232, 200, 120, .6)); }
.done__tick { fill: none; stroke: #fff1cc; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.done.is-play .done__ring { animation: draw 1s cubic-bezier(.6, 0, .2, 1) .1s forwards; }
.done.is-play .done__tick { animation: draw .55s cubic-bezier(.3, 0, .2, 1) 1.05s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done__burst { position: absolute; inset: 0; pointer-events: none; }
.done__burst i {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff8e6, #e8c878 60%, transparent 70%);
}
.done.is-play .done__burst i { animation: burst 1s cubic-bezier(.2, .7, .3, 1) 1.3s forwards; }
.done__burst i:nth-child(1) { --a: 0deg; } .done__burst i:nth-child(2) { --a: 30deg; } .done__burst i:nth-child(3) { --a: 60deg; }
.done__burst i:nth-child(4) { --a: 90deg; } .done__burst i:nth-child(5) { --a: 120deg; } .done__burst i:nth-child(6) { --a: 150deg; }
.done__burst i:nth-child(7) { --a: 180deg; } .done__burst i:nth-child(8) { --a: 210deg; } .done__burst i:nth-child(9) { --a: 240deg; }
.done__burst i:nth-child(10) { --a: 270deg; } .done__burst i:nth-child(11) { --a: 300deg; } .done__burst i:nth-child(12) { --a: 330deg; }
@keyframes burst {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.4); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) scale(.4); }
}
.done__h, .done__t, .done__alt, .done__again { opacity: 0; transform: translateY(10px); }
.done.is-play .done__h { animation: doneIn .6s var(--ease-soft) 1.5s forwards; }
.done.is-play .done__t { animation: doneIn .6s var(--ease-soft) 1.75s forwards; }
.done.is-play .done__alt { animation: doneIn .6s var(--ease-soft) 2.1s forwards; }
.done.is-play .done__again { animation: doneIn .6s var(--ease-soft) 2.4s forwards; }
@keyframes doneIn { to { opacity: 1; transform: none; } }
.done__h {
  margin: 0; font: 700 clamp(26px, 7vw, 32px)/1.15 var(--sans);
  background: linear-gradient(180deg, #fff6e2, #ecd49a 60%, #c99f52); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.done__t { margin: 0; max-width: 30ch; color: var(--ivory); font-size: 16px; line-height: 1.55; }
.done__t b { color: var(--gold-hi); }
.done__alt { margin: 4px 0 0; color: var(--smoke); font-size: 14px; }
.done__alt a { color: var(--gold-hi); }
.done__again {
  margin-top: 10px; padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer; font: 600 13.5px/1 var(--sans); color: var(--smoke);
  background: rgba(255, 246, 225, .05); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .2);
}
@media (prefers-reduced-motion: reduce) {
  .done__ring, .done__tick { stroke-dashoffset: 0; animation: none !important; }
  .done__h, .done__t, .done__alt, .done__again { opacity: 1; transform: none; animation: none !important; }
  .done__burst { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   ФАКТЫ В КЕЙСАХ: отдельные стеклянные плитки — значок, цифра металлом
   (отсчитывается), подпись; по нижней кромке прорисовывается золотая
   нить, по рамке раз в несколько секунд проходит отблеск.
   ════════════════════════════════════════════════════════════════ */
.feature__facts { padding: 0; gap: 10px; background: none; box-shadow: none; }
.feature__facts > .fact {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "ic n" "ic d"; gap: 2px 14px; align-items: center;
  padding: 14px 16px 16px; border: 0; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 50%, rgba(201, 164, 92, .16), transparent 60%),
    linear-gradient(165deg, rgba(36, 32, 27, .94), rgba(12, 11, 10, .96));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .18), 0 14px 30px -20px rgba(0, 0, 0, .9);
}
.fact::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--beam), transparent 0 70%, rgba(255, 236, 190, .9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: beam 8s linear infinite;
}
.fact:nth-child(2)::before { animation-delay: -2.7s; } .fact:nth-child(3)::before { animation-delay: -5.4s; }
.fact::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e8c878, transparent);
  transform: scaleX(0); transition: transform 1.2s var(--ease-soft) .3s;
}
.feature__body.is-in .fact::after, .feature.is-in .fact::after { transform: scaleX(1); }
.js .rv.is-in .fact::after { transform: scaleX(1); }
.fact__ic {
  grid-area: ic; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #f3dfaa;
  border: 1px solid rgba(232, 200, 120, .45); background: radial-gradient(circle at 50% 30%, rgba(232, 200, 120, .3), rgba(201, 164, 92, .05) 70%);
  box-shadow: 0 0 18px rgba(201, 164, 92, .25);
}
.feature__facts .fact dt { grid-area: n; font-size: clamp(26px, 7.4vw, 32px); line-height: 1; }
.feature__facts .fact dd { grid-area: d; font-size: 14px; color: var(--smoke); }
/* колонка кейса на широком экране узкая — плитки остаются строками, как на телефоне */
@media (min-width: 1200px) {
  .feature__facts { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .feature__facts > .fact { grid-template-columns: 46px minmax(0, 1fr); gap: 2px 14px; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .fact::before { animation: none; } .fact::after { transform: scaleX(1); transition: none; } }
html:not(.js) .fact::after { transform: scaleX(1); }

/* заявка: Telegram — карточка-кнопка */
.tgcard {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 18px; max-width: 460px;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 34px; gap: 14px; align-items: center;
  padding: 14px 14px 14px 14px; border-radius: 18px; text-decoration: none; color: var(--ivory);
  background: radial-gradient(120% 120% at 0% 50%, rgba(201, 164, 92, .16), transparent 60%), linear-gradient(165deg, rgba(34, 31, 27, .94), rgba(12, 11, 10, .96));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .22), 0 16px 34px -20px rgba(0, 0, 0, .9);
  transition: box-shadow .3s ease, transform .3s var(--ease-soft);
}
.tgcard::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 1px; height: 48%; z-index: -1; border-radius: 17px 17px 0 0;
  border-bottom-left-radius: 40% 30%; border-bottom-right-radius: 40% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0));
}
.tgcard__ic {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #1a140a; overflow: hidden;
  background: linear-gradient(180deg, #f1dca6 0%, #d9b66e 48%, #c39a4e 52%, #a8823a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 200, .75), 0 0 20px rgba(201, 164, 92, .35);
}
.tgcard__t { display: grid; gap: 3px; }
.tgcard__t b { font: 700 16.5px/1.25 var(--sans); }
.tgcard__t span { font-size: 13.5px; line-height: 1.35; color: var(--smoke); }
.tgcard__ar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--gold-hi);
  background: rgba(232, 200, 120, .1); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .35); transition: transform .35s var(--ease-soft);
}
.tgcard:hover { box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .5), 0 16px 34px -20px rgba(0, 0, 0, .9); }
.tgcard:hover .tgcard__ar { transform: translateX(3px); }
.tgcard:active { transform: scale(.985); }

/* ════════════════════════════════════════════════════════════════
   «КАК РАСТЁТ ВАШ БРЕНД»: золотая кривая роста строится при прокрутке
   (pr.js ведёт прогресс с мягким догоном), рядом пунктир «без PR»,
   на кривой 5 точек-ресурсов; дошли до точки — она вспыхивает,
   табло сверху отсчитывает её охват, строка этапа подсвечивается.
   ════════════════════════════════════════════════════════════════ */

.tgcard__ic::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 48%; border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08));
}
.tgcard__ic svg { position: relative; }

/* широкий экран: без пустоты справа */
@media (min-width: 1200px) {
  /* кейс Шубина: текст слева, факты и источники справа */
  .feature--second { grid-template-columns: minmax(0, 1fr); }
  .feature--second .feature__body { max-width: none; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 44px; align-content: start; padding: 34px 36px 30px; }
  .feature--second .feature__body > * { grid-column: 1; }
  .feature--second .feature__body > .feature__tag { justify-self: start; }
  .feature--second .feature__facts { grid-column: 2; grid-row: 1 / span 5; align-self: start; margin-top: 0; }
  .feature--second .feature__src { grid-column: 2; grid-row: 6; align-self: start; }
  /* «Как мы работаем»: заголовок слева, шкала справа */
  .steps .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "eye list" "h2 list" "foot foot"; column-gap: 64px; align-items: start; }
  .steps .eyebrow { grid-area: eye; justify-self: start; align-self: end; }
  .steps .h2 { grid-area: h2; position: sticky; top: 120px; }
  .steps__list { grid-area: list; max-width: none; margin-top: 0; }
  .steps__foot { grid-area: foot; }
}

/* кейсы: дополнительная строка и раскрывающийся список книг */
.brief .brief__more { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hair); color: var(--gold-hi); font-size: 14px; }
.brief__list { margin-top: 12px; border-radius: 12px; background: rgba(255, 246, 225, .03); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16); }
.brief__list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none;
  font: 600 14px/1.2 var(--sans); color: var(--ivory);
}
.brief__list summary::-webkit-details-marker { display: none; }
.brief__list summary::after { content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--gold-hi); background: rgba(232, 200, 120, .1); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .35); transition: transform .3s var(--ease-soft); }
.brief__list[open] summary::after { transform: rotate(45deg); }
.brief__list ul { list-style: none; margin: 0; padding: 0 14px 10px; display: grid; }
.brief__list li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.35; }
.brief__list li b { font-weight: 600; color: var(--ivory); }
.brief__list li span { color: var(--smoke); }
.brief__list[open] li { animation: menuRise .45s var(--ease-soft) both; }

/* «Ещё» — второстепенное под раскрытие (разбор 10.10: страница короче, факты на месте).
   Вид как у списка авторов книг; плюс — настоящий элемент, чтобы QA видел его край. */
.more { margin-top: 14px; border-radius: 14px; background: rgba(255, 246, 225, .03); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .16); }
.more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 14px;
  cursor: pointer; list-style: none; font: 600 14px/1.25 var(--sans); color: var(--ivory); -webkit-tap-highlight-color: transparent;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 14px; }
.more__ic {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(232, 200, 120, .1); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .35); transition: transform .3s var(--ease-soft);
}
.more__ic::before { content: "+"; color: var(--gold-hi); font: 500 16px/1 var(--sans); }
.more[open] .more__ic { transform: rotate(45deg); }
.more__body { padding: 0 14px 12px; }
.more__body > p { margin: 0; color: var(--smoke); font-size: 15px; line-height: 1.6; }
.more[open] .more__body { animation: menuRise .45s var(--ease-soft) both; }
.person__titles.person__titles--more { margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }

/* разработка на главной: форматы — одной строкой под объяснением */
.devx__kinds { margin-top: 12px; max-width: 64ch; color: var(--smoke); font-size: 14.5px; line-height: 1.6; }
/* плашки — всегда на всю ширину блока, края в одну линию с карточками над ними */
.callout { max-width: none; width: 100%; box-sizing: border-box; justify-self: stretch; align-items: center; }
/* компьютер: партнёры тоже ровной сеткой — одинаковая ширина и высота плашек */
@media (min-width: 900px) {
  .foot__partners ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .foot__partners li { display: grid; place-items: center; min-height: 44px; padding: 8px 12px; white-space: normal; text-wrap: balance; text-align: center; }
}
@media (min-width: 1200px) { .foot__partners ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* кнопки обложки — одной ширины (телефон: друг под другом на всю ширину блока) */
.cover__cta { display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 340px); margin-inline: auto; }
.cover__cta .btn { width: 100%; justify-content: space-between; }
@media (min-width: 640px) { .cover__cta { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 560px); } }

/* телефон: мелкие подписи капсом не меньше 12 px */
@media (max-width: 899px) {
  .svc__n, .step__k, .feature__tag, .feature__src > span, .foot__h { font-size: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   ЗОЛОТЫЕ ИКОНКИ-АССЕТЫ (/pr/ic, прозрачный webp): вместо кольца
   со штриховым значком — объёмная иконка на мягком золотом свечении.
   ════════════════════════════════════════════════════════════════ */
.gi { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.gi-wrap {
  border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important;
  background: radial-gradient(circle, rgba(201, 164, 92, .26) 0%, rgba(201, 164, 92, .08) 45%, transparent 70%) !important;
}
.kick__ic.gi-wrap { width: 34px; height: 34px; }
.stat__ic.gi-wrap { width: 52px; height: 52px; margin-bottom: 4px; }

.svc__ic.gi-wrap { width: 56px; height: 56px; }
.svc__head { grid-template-columns: 56px minmax(0, 1fr); }

.fact__ic.gi-wrap { width: 56px; height: 56px; }
.feature__facts > .fact { grid-template-columns: 56px minmax(0, 1fr); }
.brief__ic.gi-wrap { width: 50px; height: 50px; }
.callout__ic.gi-wrap { width: 44px; height: 44px; }
.callout { grid-template-columns: 44px minmax(0, 1fr); }
.who__ic.gi-wrap { display: block; width: 56px; height: 56px; margin-bottom: 12px; }
/* шаги: иконка в правом верхнем углу карточки */
img.step__ic { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; opacity: .55; transition: opacity .5s ease, transform .5s var(--ease-soft); }
.step.is-on img.step__ic { opacity: 1; transform: scale(1.06); }
.step__card h3 { padding-right: 46px; }
/* направления услуг: иконка вместо номера */
.svc__group dt { align-items: center; }
.svc__gi { flex: none; width: 34px; height: 34px; }
.svc__group dd { margin-left: 44px; }
/* заявка: фото Искандера крупнее — во всю ширину колонки, кадр выше; по бокам уходит только пустой фон */
.lead__photo { width: 100%; max-width: 460px; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 40%; margin-inline: auto; }
@media (min-width: 900px) { .lead__photo { max-width: 380px; margin-inline: 0; } }
.foot__motto { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--gold-hi); }

/* обложка: иконка — маленький акцент над цифрой, главное — цифра (владелец 09.10: «13 лет и иконки слишком крупно»).
   В остальных блоках размеры иконок прежние — владелец: «в других блоках нормально». */
.kick__ic.gi-wrap { width: 28px; height: 28px; }
.stat__ic.gi-wrap { width: 28px; height: 28px; margin-bottom: 4px; }
.stat--hero b { font-size: clamp(46px, 13vw, 58px); }
@media (min-width: 1200px) { .stat--hero b { font-size: 50px; } }
/* карточки обложки: содержимое по центру и по горизонтали, и по вертикали — без прижатия к краю */
.cover__lines .stat { justify-items: center; text-align: center; align-content: center; }
@media (min-width: 1200px) {
  .cover__lines--left .stat { justify-items: center; text-align: center; padding-left: 22px; padding-right: 22px; }
}

/* короткие кейсы: на компьютере пары схожей длины в 2 колонки; ссылка прижата к низу карточки */
.brief { display: flex !important; flex-direction: column; }
.brief > a { margin-top: auto !important; align-self: flex-start; }
.brief > p + a, .brief > .brief__list + a { margin-top: 14px; }
.brief .brief__head + .brief__num { margin-top: 14px; }
.brief > a { position: relative; top: 0; }
.brief__item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }
.brief__head + .brief__item { border-top: 0; padding-top: 0; margin-top: 14px; }
.brief__item h4 { margin: 0 0 4px; font: 600 15.5px/1.3 var(--sans); color: var(--gold-hi); }
.brief__item p { margin: 0; }
@media (min-width: 640px) { .briefs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* ссылка у карточки: отступ сверху, а лишняя высота уходит между текстом и ссылкой */
.brief > p:last-of-type { margin-bottom: 14px; }

/* услуги на компьютере: каждая группа — широкая карточка, шапка слева, направления справа в 2 колонки */
@media (min-width: 900px) {
  .svc__groups { grid-template-columns: minmax(0, 1fr) !important; }
  .svc__group { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 32px; align-items: start; padding: 26px 28px 18px; }
  .svc__head { border-bottom: 0; padding-bottom: 0; align-self: start; }
  .svc__group dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .svc__group dl > dt { grid-column: auto; }
  .svc__group dt, .svc__group dd { break-inside: avoid; }
}
.svc__item { padding: 0; }
.svc__item + .svc__item { border-top: 1px solid var(--hair); }
.svc__item dd { border-bottom: 0 !important; }
@media (min-width: 900px) {
  .svc__group dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .svc__item + .svc__item { border-top: 0; }
  .svc__item { border-top: 1px solid var(--hair); }
  .svc__item:nth-child(-n+2) { border-top: 0; }
}
/* факты кейса: раскладка по ширине своего блока — узкий блок строками, широкий — 3 плитки в ряд */
.feature__facts > .fact { grid-template-columns: 44px minmax(0, 1fr) !important; grid-template-areas: "ic n" "ic d" !important; gap: 2px 14px !important; align-items: center; }
@container (min-width: 400px) {
  .feature__facts > .fact { grid-template-columns: 44px 128px minmax(0, 1fr) !important; grid-template-areas: "ic n d" !important; column-gap: 12px !important; }
}
.feature__facts .fact__ic.gi-wrap { width: 44px; height: 44px; }
.feature__facts .fact dt { font-size: clamp(24px, 6.6vw, 28px); white-space: nowrap; }
.feature__facts .fact dd { line-height: 1.35; }
.feature__body { container-type: inline-size; }
@container (min-width: 560px) {
  .feature__facts { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .feature__facts > .fact { grid-template-columns: 1fr !important; grid-template-areas: "ic" "n" "d" !important; justify-items: center; text-align: center; gap: 6px !important; padding: 16px 12px 18px; }
}

/* ════════════════════════════════════════════════════════════════
   «PR И РАЗРАБОТКА — ПОД КЛЮЧ»: схема-цепочка с бегущим огоньком
   (внимание → воронка → бот/Mini App → заявка), 6 направлений, 2 кнопки.
   ════════════════════════════════════════════════════════════════ */
.devx__lead { margin-top: 16px; max-width: 60ch; color: var(--smoke); font-size: 16.5px; line-height: 1.6; }
.devx__flow {
  position: relative; list-style: none; margin: 28px 0 0; padding: 18px 14px; border-radius: 20px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px;
  background: radial-gradient(90% 60% at 50% 0%, rgba(201, 164, 92, .14), transparent 65%), linear-gradient(170deg, rgba(32, 29, 25, .95), rgba(10, 9, 8, .97));
  box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .18), 0 24px 50px -26px rgba(0, 0, 0, .9);
}
.devx__node { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 12px 6px 14px; border-radius: 14px;
  background: rgba(255, 246, 225, .03); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .12); }
.devx__nic.gi-wrap { width: 44px; height: 44px; margin-bottom: 4px; animation: nodePulse 4.8s ease-in-out infinite; animation-delay: calc(var(--n) * 1.2s); }
@keyframes nodePulse { 0%, 30%, 100% { transform: none; filter: none; } 12% { transform: scale(1.12); filter: drop-shadow(0 0 10px rgba(232, 200, 120, .7)); } }
.devx__node b { font: 700 15px/1.25 var(--sans); color: var(--gold-hi); }
.devx__node > span:last-child { font-size: 12.5px; line-height: 1.35; color: var(--smoke); }
/* стрелки-связки между узлами (телефон: 2×2 — по строкам) */
.devx__node:not(:last-child)::after {
  content: "→"; position: absolute; right: -11px; top: 30px; font-size: 14px; color: var(--gold); z-index: 1;
}
.devx__node:nth-child(2)::after { content: "↓"; right: 50%; top: auto; bottom: -18px; transform: translateX(50%); }
.devx__node:nth-child(3) { order: 4; } .devx__node:nth-child(4) { order: 3; }
.devx__node:nth-child(3)::after { content: "←"; right: auto; left: -11px; }

.devx__cta { margin-top: 22px; display: grid; gap: 10px; }
.devx__cta .btn { width: 100%; justify-content: space-between; }
@media (min-width: 760px) {
  .devx__flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 22px; }
  .devx__node:nth-child(3), .devx__node:nth-child(4) { order: 0; }
  .devx__node:not(:last-child)::after { content: "→"; right: -13px; left: auto; top: 34px; bottom: auto; transform: none; }
  
  .devx__cta { grid-template-columns: repeat(2, 280px); }
  .devx__cta .btn { white-space: nowrap; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) { .devx__nic.gi-wrap { animation: none; } }
/* компьютер: факты Шубина стоят в узкой правой колонке — строками, как на телефоне */
@media (min-width: 1200px) {
  .feature--second .feature__facts { grid-template-columns: minmax(0, 1fr) !important; }
  .feature--second .feature__facts > .fact { grid-template-columns: 44px 128px minmax(0, 1fr) !important; grid-template-areas: "ic n d" !important; justify-items: stretch !important; text-align: left !important; gap: 0 12px !important; padding: 14px 16px 16px !important; }
}

/* ── форма: согласие на обработку персональных данных (152-ФЗ) ── */
.agree { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; font-size: 14.5px; line-height: 1.45; color: var(--ivory); }
.agree input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.agree__box {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: transparent;
  background: rgba(255, 246, 225, .045); box-shadow: inset 0 0 0 1.5px rgba(232, 211, 162, .4); transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
.agree input:checked + .agree__box { color: #1a140a; background: linear-gradient(180deg, #f1dca6, #c9a45c); box-shadow: 0 0 14px rgba(201, 164, 92, .4); }
.agree input:focus-visible + .agree__box { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.agree.is-bad .agree__box { box-shadow: inset 0 0 0 1.5px #d27a6a; }
.agree a, .form__legal a { color: var(--gold-hi); text-decoration: underline; text-decoration-color: rgba(232, 200, 120, .5); text-underline-offset: 3px; }
.form__legal { margin: 0; }
/* подвал: ссылки на документы */
.foot__docs { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }
.foot__docs a { color: var(--smoke); text-decoration: none; }
.foot__docs a:hover { color: var(--gold-hi); }
.foot__bottom { flex-wrap: wrap; align-items: center; }
@media (max-width: 899px) { .foot__bottom { justify-content: center; text-align: center; } }

/* ── страницы документов /privacy/, /consent/ ── */
.doc-page { background: var(--night); }
.doc__bar { position: sticky; top: 0; z-index: 10; background: rgba(11, 10, 10, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }
.doc__barwrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.doc__logo img { height: 30px; width: auto; }
.doc__back { color: var(--gold-hi); text-decoration: none; font-size: 14.5px; }
.doc { max-width: 820px; padding-top: 40px; padding-bottom: 72px; }
.doc__h1 { margin: 0; font: 600 clamp(28px, 7vw, 44px)/1.15 var(--sans); letter-spacing: -.01em; color: var(--ivory); text-wrap: balance; }
.doc__date { margin: 10px 0 0; color: var(--smoke); font-size: 14px; }
.doc__sec { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hair); }
.doc__sec h2 { margin: 0 0 10px; font: 600 19px/1.3 var(--sans); color: var(--gold-hi); }
.doc__sec p, .doc__sec li { color: var(--ivory); font-size: 15.5px; line-height: 1.65; }
.doc__sec p { margin: 0 0 10px; }
.doc__sec ul { margin: 0 0 10px; padding-left: 20px; }
.doc__sec li { margin: 4px 0; }
.doc__sec li::marker { color: var(--gold); }
.doc__sec a { color: var(--gold-hi); }
.doc__todo { padding: 12px 14px; border-radius: 12px; background: rgba(232, 200, 120, .06); box-shadow: inset 0 0 0 1px rgba(232, 200, 120, .3); color: var(--gold-hi) !important; }
.doc__links { margin-top: 36px; display: grid; gap: 10px; }
.doc__links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--ivory); background: rgba(255, 246, 225, .04); box-shadow: inset 0 0 0 1px rgba(232, 211, 162, .18); }
.doc__links a::after { content: "→"; flex: none; color: var(--gold); }
.doc__sec ul { list-style: disc; }
.form .agree { margin-top: 4px; }
.foot__docs a { display: inline-flex; align-items: center; min-height: 34px; }