/* ==========================================================================
   WEB-KEDYSH.BY — design system
   1. Tokens      5. Buttons     9. Cases       13. Pricing
   2. Reset       6. Header     10. Process     14. FAQ
   3. Base        7. Hero       11. Stats       15. Contact
   4. Layout      8. Services   12. Principles  16. Footer / misc
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --bg: #06060a;
  --bg-soft: #0a0a12;
  --surface: #0f0f18;
  --surface-2: #14141f;

  --text: #ecedf4;
  --text-dim: #a3a4ba;
  --text-faint: #6e6f86;

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --violet: #7c5cff;
  --mint: #2be8b8;
  --lime: #c6f24e;
  --coral: #ff6b8a;
  --amber: #ffc46b;

  --grad: linear-gradient(115deg, var(--violet) 0%, #a06bff 42%, var(--mint) 100%);
  --grad-soft: linear-gradient(115deg, rgba(124, 92, 255, 0.18), rgba(43, 232, 184, 0.14));

  --glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 20px 60px -18px rgba(124, 92, 255, 0.55);
  --shadow-lg: 0 30px 80px -40px rgba(0, 0, 0, 0.95);

  --font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --container: 1200px;
  --gutter: clamp(18px, 4vw, 32px);
  --section-y: clamp(72px, 9vw, 132px);
  --radius: 20px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. RESET ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: rgba(124, 92, 255, 0.4); color: #fff; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 3. BASE ------------------------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.55rem, 6.6vw, 5.1rem); }
h2 { font-size: clamp(1.95rem, 4.3vw, 3.35rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing: -0.02em; }
h4 { font-size: 1.02rem; letter-spacing: -0.015em; font-weight: 700; }

p { text-wrap: pretty; }

/* 4. LAYOUT ----------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--soft { background: linear-gradient(180deg, transparent, var(--bg-soft) 22%, var(--bg-soft) 78%, transparent); }

.section-head { max-width: 720px; margin-bottom: clamp(38px, 5vw, 64px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p {
  margin-top: 18px;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  max-width: 62ch;
}
.section-head--center p { margin-inline: auto; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(43, 232, 184, 0.14);
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead { color: var(--text-dim); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 56ch; }

/* Ambient background decorations */
.aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aura::before,
.aura::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  /* Раньше здесь был filter: blur(120px): его хватало на заметный растр при
     каждом скролле. У радиального градиента и так мягкий край — блюр почти
     не менял картинку, поэтому убран. */
  opacity: 0.4;
}
.aura::before {
  width: 46vw; height: 46vw;
  top: -14vw; left: -10vw;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.55), transparent 68%);
}
.aura::after {
  width: 40vw; height: 40vw;
  top: 46%; right: -14vw;
  background: radial-gradient(circle, rgba(43, 232, 184, 0.3), transparent 68%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.032;
  /* Плитка 64×64 вместо SVG feTurbulence: браузеру больше не нужно
     растрировать turbulence-фильтр на весь экран — только повторить
     готовый PNG (4 КБ). На 3% прозрачности зерно неразличимо. */
  background-image: url("../assets/noise.png");
  background-repeat: repeat;
  background-size: 96px 96px;
  image-rendering: pixelated;
}

.page { position: relative; z-index: 2; }

/* 5. BUTTONS ---------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  background: var(--btn-bg);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--lime);
  color: #111605;
  box-shadow: 0 16px 40px -18px rgba(198, 242, 78, 0.8);
}
.btn--primary:hover { box-shadow: 0 22px 52px -16px rgba(198, 242, 78, 1); }

.btn--ghost {
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); }

.btn--sm { padding: 11px 20px; font-size: 0.875rem; }
.btn--block { width: 100%; }

.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--mint);
  font-size: 0.9rem;
  font-weight: 600;
  transition: gap 0.25s var(--ease);
}
.link-arrow:hover { gap: 13px; }

/* 6. HEADER ----------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(6, 6, 10, 0.72);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(160%);
}

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 76px;
}

.nav__brand { display: flex; align-items: center; gap: 14px; margin-right: auto; min-width: 0; }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: -0.045em;
  white-space: nowrap;
}



.header-socials { display: flex; align-items: center; gap: 7px; }
.header-socials a {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  transition: transform 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), background-color 0.22s var(--ease);
}
.header-socials a:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
}
.header-socials svg { width: 17px; height: 17px; }
.logo__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--grad);
  color: #08060f;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  box-shadow: 0 10px 26px -12px rgba(124, 92, 255, 0.95);
}
.logo__text span { color: var(--text-faint); font-weight: 500; }

.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav__links a:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.nav__links a.is-active {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 1px;
  width: 18px; height: 2px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(124, 92, 255, 0.7);
}

.nav__cta { display: flex; align-items: center; gap: 12px; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dim);
  transition: color 0.2s var(--ease);
}
.phone-link:hover { color: var(--text); }
.phone-link svg { width: 16px; height: 16px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.03);
}
.burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* nav dropdown — every service is reachable from «Услуги» */
.nav__item--sub { position: relative; }
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.nav__item--sub:hover .nav__dropdown,
.nav__item--sub:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__dropdown-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  list-style: none;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
}
.nav__dropdown-list a {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  white-space: nowrap;
}
.nav__dropdown-all {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.nav__dropdown-all a { color: var(--violet); font-weight: 600; }

/* 5.1. Второй ряд шапки — категории услуг -------------------------------
   По мотивам mediasol.by: категория стоит в шапке и раскрывает подменю
   со своими услугами. Показывается только там, где хватает ширины
   (>=1121px); на мобильных те же категории живут в бургер-меню аккордеонами. */
.subnav {
  display: none;
  /* стеклянная полоса на всю ширину экрана: полупрозрачный фон + блюр
     размывает то, что проезжает под шапкой */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -30px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
/* меню тянется от края до края, а не по контейнеру в 1200px */
.subnav > .container {
  max-width: none;
  padding-inline: clamp(16px, 3.2vw, 48px);
}
.header.is-stuck .subnav { border-top-color: var(--line); }
.subnav__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
}
.subnav__cats { gap: 4px; }
.subnav__cats {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.subnav__item { position: relative; }
.subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.subnav__link svg {
  width: 12px; height: 12px;
  opacity: 0.55;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.subnav__item:hover .subnav__link,
.subnav__item:focus-within .subnav__link { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.subnav__item:hover .subnav__link svg,
.subnav__item:focus-within .subnav__link svg { transform: rotate(180deg); opacity: 0.9; }
.subnav__link:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.subnav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 12;
  margin-top: 6px;
  padding: 10px;
  min-width: 250px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(16, 15, 25, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.subnav__item:hover .subnav__panel,
.subnav__item:focus-within .subnav__panel { opacity: 1; visibility: visible; transform: none; }
.subnav__panel ul { list-style: none; }
.subnav__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.subnav__panel a:hover,
.subnav__panel a:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.subnav__panel-title {
  margin: 10px 0 2px;
  padding: 10px 12px 0;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.subnav__panel-sub {
  display: grid;
  /* max-content, а не 1fr: подписи в одну строку (nowrap) не должны
     переливаться в соседнюю колонку — панель растягивается по ним */
  grid-template-columns: repeat(2, max-content);
  gap: 0 6px;
  list-style: none;
}
.subnav__panel-sub a { padding: 7px 10px; font-size: 0.82rem; color: var(--text-faint); }
.subnav__panel-sub a:hover,
.subnav__panel-sub a:focus-visible { color: var(--text); }
.subnav__panel a.subnav__panel-all {
  margin-top: 6px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--violet);
  font-weight: 600;
}
.subnav__links { margin-left: auto; }

.mobile-menu__sub {
  display: none;
  gap: 0;
  list-style: none;
  padding: 0 0 6px 16px;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__group.is-open .mobile-menu__sub { display: grid; }
.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: left;
  cursor: pointer;
}
.mobile-menu__toggle svg {
  flex: none;
  /* Без явного размера SVG в кнопке берёт размер замещаемого элемента
     (346×346 на экране 390px) — заголовок аккордеона раздувался в 377px. */
  width: 22px;
  height: 22px;
  color: var(--text-faint);
  transition: transform 0.25s var(--ease);
}
.mobile-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu__sub a {
  padding: 9px 4px;
  border: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-dim);
}
.mobile-menu__sub a.mobile-menu__sub-all { color: var(--violet); font-weight: 600; }

/* SEO audit cards — per-project analysis on the SEO service page */
.audit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.audit-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.audit-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.audit-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.audit-card__head b { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: -0.02em; }
.audit-card__kind {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.12);
  color: var(--violet);
  font-size: 0.68rem;
  font-weight: 600;
}
.audit-card__meta { margin-top: 6px; color: var(--text-faint); font-size: 0.76rem; }
.audit-list { display: grid; gap: 7px; margin-top: 14px; }
.audit-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.45;
}
.audit-list svg { flex: none; width: 14px; height: 14px; margin-top: 3px; color: var(--mint); }
@media (max-width: 1024px) { .audit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .audit-grid { grid-template-columns: 1fr; } }

/* Честные сроки результата (SEO) */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.term-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 14px;
  padding: 18px;
}

.term-card b {
  font-size: 20px;
  color: var(--primary);
}

.term-card span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.terms-note {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

/* SEO против контекста — таблица сравнения (SEO) */
.vs-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg);
}

.vs-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 15px;
}

.vs-table th,
.vs-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}

.vs-table thead th {
  background: var(--bg-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vs-table thead th:nth-child(2) {
  color: var(--primary);
}

.vs-table tbody tr:last-child td {
  border-bottom: none;
}

.vs-table tbody td:first-child {
  font-weight: 700;
}

.vs-table td:nth-child(2) {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.vs-table tbody tr:hover td {
  background: var(--bg-soft);
}

@media (max-width: 640px) {
  .vs-table { font-size: 14px; }
  .vs-table th, .vs-table td { padding: 12px 14px; }
}

/* SEO: one-time vs monthly promotion works */
.cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
}
.cycle-card {
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
}
.cycle-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cycle-card__head b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.cycle-card__head span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(43, 232, 184, 0.1);
  color: var(--mint);
  font-size: 0.7rem;
  font-weight: 600;
}
.cycle-list { display: grid; gap: 10px; }
.cycle-list li {
  display: flex;
  gap: 9px;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.5;
}
.cycle-list svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--mint); }
@media (max-width: 900px) { .cycle-grid { grid-template-columns: 1fr; } }

.mobile-menu {
  position: fixed;
  inset: 76px 0 0 0;
  z-index: 99;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 24px var(--gutter) 42px;
  /* стекло: меню просвечивает страницей, но текст читается */
  background: linear-gradient(180deg, rgba(8, 7, 14, 0.78), rgba(6, 6, 10, 0.9));
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  border-top: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
/* Крупный стиль — только прямые ссылки верхнего уровня. Подпункты аккордеона,
   телефоны в .mobile-menu__meta и кнопки .btn живут по своим правилам ниже. */
.mobile-menu > a:not(.btn) {
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.mobile-menu .btn {
  margin-top: 22px;
  /* Ловушка Chromium: grid-item с overflow:hidden в заполненной сетке меню
     схлопывается до высоты паддинга (30px вместо 55px) и текст наезжает
     на кант. Обрезка блика внутри панели не нужна — отключаем её. */
  overflow: visible;
}
.mobile-menu .btn::before { content: none; }
/* Тот же общий стиль, но для ссылки «Все услуги и цены» — она прямая
   дочерняя, поэтому правило должно идти после общего и быть не слабее. */
.mobile-menu > a.mobile-menu__all {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--violet);
}
.mobile-menu__meta { margin-top: 26px; display: grid; gap: 10px; color: var(--text-dim); font-size: 0.9rem; }
.mobile-menu__meta a { padding: 0; border: 0; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; }
.mobile-menu__meta a:hover, .mobile-menu__meta a:focus-visible { color: var(--text); }

/* 7. HERO ------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(112px, 15vw, 172px);
  padding-bottom: clamp(56px, 8vw, 100px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 90% 62% at 50% 26%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 26%, #000 5%, transparent 72%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

/* Перенос по слогам в гигантском заголовке рвёт слово («Разрабаты-ваем») —
   для него отключаем hyphens и держим размер, при котором самое длинное
   слово слогана влезает в колонку целиком (замер: 8.2em при 1440px). */
.hero h1 { margin-bottom: 22px; font-size: clamp(2.4rem, 5.9vw, 4.35rem); hyphens: manual; }
.hero h1 em { font-style: normal; display: block; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 32px;
  color: var(--text-faint);
  font-size: 0.86rem;
}
.hero__proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero__proof svg { width: 15px; height: 15px; color: var(--mint); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.hero-stat span {
  display: block;
  margin-top: 8px;
  color: var(--text-faint);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Hero visual */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.02;
  display: grid;
  place-items: center;
}
.orb {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(124, 92, 255, 0.85), transparent 56%),
    radial-gradient(circle at 72% 74%, rgba(43, 232, 184, 0.6), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(160, 107, 255, 0.35), transparent 70%);
  /* блюр убран (было 38px): край и так мягкий, а растр на анимированном
     элементе пересчитывался каждый кадр */
  animation: float 11s var(--ease) infinite;
}
.ring {
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  animation: spin 46s linear infinite;
}
.ring--2 { width: 94%; border-style: solid; border-color: rgba(255, 255, 255, 0.07); animation-duration: 70s; animation-direction: reverse; }
.ring--2::after {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 20px 3px rgba(43, 232, 184, 0.75);
}

.chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(13, 13, 20, 0.82);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lg);
  animation: float 8s var(--ease) infinite;
}
.chip b {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.chip small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 0.72rem; }
.chip i {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 11px;
  font-size: 1rem;
  font-style: normal;
}
.chip--a { top: 6%; left: -2%; animation-delay: -1.5s; }
.chip--a i { background: rgba(43, 232, 184, 0.14); color: var(--mint); }
.chip--b { bottom: 25%; right: -3%; animation-delay: -3.4s; }
.chip--b i { background: rgba(124, 92, 255, 0.18); color: #b3a0ff; }
.chip--c { bottom: 3%; right: 1%; animation-delay: -5.2s; }
.chip--c i { background: rgba(255, 196, 107, 0.15); color: var(--amber); }

/* Портрет руководителя на первом экране (как в блоке «Обо мне») */
.hero__portrait {
  position: absolute;
  z-index: 4;
  left: -5%;
  bottom: 0;
  width: 39%;
  animation: float 9s var(--ease) infinite;
  animation-delay: -4.2s;
}
.hero__portrait-frame {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow-lg);
  rotate: -3deg;
  transition: rotate 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hero__portrait:hover .hero__portrait-frame {
  rotate: 0deg;
  box-shadow: rgba(124, 92, 255, 0.5) 0 30px 70px -40px;
}
.hero__portrait-frame::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(180deg, transparent 55%, rgba(6, 6, 10, 0.45));
  pointer-events: none;
}
.hero__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 18%;
  border-radius: calc(var(--radius) - 4px);
}
.hero__portrait-badge {
  position: absolute;
  left: 50%;
  bottom: -16px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(13, 13, 20, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  animation: float 7s var(--ease) infinite;
  animation-delay: -2.6s;
}
.hero__portrait-badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero__portrait-badge small {
  display: block;
  margin-top: 2px;
  color: var(--text-faint);
  font-size: 0.68rem;
  line-height: 1.2;
}
.hero__portrait-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 4px rgba(43, 232, 184, 0.16);
  animation: mintPulse 2.4s var(--ease) infinite;
}
@keyframes mintPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(43, 232, 184, 0.16); }
  50% { box-shadow: 0 0 0 8px rgba(43, 232, 184, 0.06); }
}
@media (max-width: 720px) {
  .hero__portrait { left: -3%; width: 42%; }
  .hero__portrait-badge { padding: 7px 12px; gap: 7px; }
  .hero__portrait-badge b { font-size: 0.72rem; }
  .hero__portrait-badge small { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__portrait, .hero__portrait-badge, .hero__portrait-dot { animation: none; }
}

/* Real project screenshot inside a browser frame */
.hero__device {
  position: relative;
  z-index: 1;
  width: 96%;
  animation: float 10s var(--ease) infinite;
  animation-delay: -2.2s;
}
/* градиентная рамка вокруг макета: проявляется на ховере */
.hero__device::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.hero__device:hover::after { opacity: 0.75; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Client marquee — бегущая лента проектов в виде «пилюль» */
.marquee {
  position: relative;
  margin-top: clamp(48px, 7vw, 76px);
  padding-block: 18px;
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(90deg, transparent 0%, rgba(124, 92, 255, 0.07) 22%, rgba(43, 232, 184, 0.07) 78%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
body.theme-light .marquee {
  background: linear-gradient(90deg, transparent 0%, rgba(124, 92, 255, 0.06) 22%, rgba(15, 155, 121, 0.08) 78%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(16, 17, 20, 0.05), inset 0 -1px 0 rgba(16, 17, 20, 0.06);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline: 5px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(8px);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 1.4vw, 1.04rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
body.theme-light .marquee__track > span { background: rgba(255, 255, 255, 0.72); }
.marquee__track > span::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px rgba(43, 232, 184, 0.75);
}
.marquee__track > span::after { content: none; }
.marquee__track > span:hover {
  color: var(--text);
  border-color: rgba(124, 92, 255, 0.5);
  background: rgba(124, 92, 255, 0.1);
  transform: translateY(-2px);
}
body.theme-light .marquee__track > span:hover { background: rgba(124, 92, 255, 0.1); }
@media (max-width: 560px) {
  .marquee { padding-block: 14px; }
  .marquee__track > span { padding: 8px 15px; margin-inline: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* 8. SERVICES --------------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--surface);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card:hover::after { opacity: 0.85; }

.card__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 22px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.card__icon svg { width: 23px; height: 23px; }
.card:nth-child(1) .card__icon { color: var(--violet); background: rgba(124, 92, 255, 0.12); border-color: rgba(124, 92, 255, 0.28); }
.card:nth-child(2) .card__icon { color: var(--mint); background: rgba(43, 232, 184, 0.1); border-color: rgba(43, 232, 184, 0.24); }
.card:nth-child(3) .card__icon { color: var(--coral); background: rgba(255, 107, 138, 0.1); border-color: rgba(255, 107, 138, 0.24); }
.card:nth-child(4) .card__icon { color: var(--amber); background: rgba(255, 196, 107, 0.1); border-color: rgba(255, 196, 107, 0.24); }
.card:nth-child(5) .card__icon { color: #7fb8ff; background: rgba(127, 184, 255, 0.1); border-color: rgba(127, 184, 255, 0.24); }
.card:nth-child(6) .card__icon { color: #c79dff; background: rgba(199, 157, 255, 0.1); border-color: rgba(199, 157, 255, 0.24); }
.card:nth-child(7) .card__icon { color: #ff8a5c; background: rgba(255, 138, 92, 0.12); border-color: rgba(255, 138, 92, 0.28); }
.card:nth-child(8) .card__icon { color: #3ec6e0; background: rgba(62, 198, 224, 0.12); border-color: rgba(62, 198, 224, 0.28); }
.card:nth-child(9) .card__icon { color: #8fa0c9; background: rgba(143, 160, 201, 0.12); border-color: rgba(143, 160, 201, 0.28); }
.card:nth-child(10) .card__icon { color: #f472b6; background: rgba(244, 114, 182, 0.12); border-color: rgba(244, 114, 182, 0.28); }

.card h3 { margin-bottom: 12px; }
.card p { color: var(--text-dim); font-size: 0.94rem; margin-bottom: 22px; }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.card__tags li {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-faint);
  font-size: 0.74rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 9. CASES ------------------------------------------------------------------ */
.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 46%), var(--surface);
  overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.case:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.case::before {
  /* было blur(50px) на каждой карточке проекта: при скролле списка это
     десятки квадратных метров растра. Градиент и так идёт в transparent. */
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--case-glow, rgba(124, 92, 255, 0.28)), transparent 66%);
  opacity: 0.95;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.case:hover::before { opacity: 1.35; }

.case__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.case__brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.case__industry {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.case__task { color: var(--text-dim); font-size: 0.94rem; }
.case__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.case__metrics b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}
.case__metrics span { display: block; margin-top: 7px; color: var(--text-faint); font-size: 0.76rem; line-height: 1.35; }

/* 10. PROCESS --------------------------------------------------------------- */
.process {
  --step-gap: clamp(10px, 1.2vw, 16px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--step-gap);
}
/* Each step is a card: gradient numeral chip, soft surface, hover lift.
   Steps are linked by a small arrow sitting in the gap between the cards
   (--conn turns it off for the last card of every row). */
.step {
  position: relative;
  padding: 28px clamp(18px, 1.7vw, 26px) 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.6);
}
.step__num {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--grad);
  color: #08060f;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px -14px rgba(124, 92, 255, 0.75);
}
.step::after {
  content: "→";
  position: absolute;
  top: 41px;
  right: calc(-1 * (var(--step-gap) / 2) - 8px);
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  opacity: var(--conn, 0);
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.step.is-visible { --conn: 1; }
.process > .step:last-child,
.process--four > .step:nth-child(4n),
.process--six > .step:nth-child(3n) { --conn: 0; }
.step h4 { margin-bottom: 10px; }
.step p { color: var(--text-dim); font-size: 0.88rem; }
.step__time {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 12px;
  border: 1px solid rgba(43, 232, 184, 0.3);
  border-radius: 999px;
  background: rgba(43, 232, 184, 0.09);
  color: var(--mint);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* 11. STATS ----------------------------------------------------------------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(34px, 4.4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 130% at 12% 0%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 130% at 92% 100%, rgba(43, 232, 184, 0.12), transparent 60%),
    var(--surface);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 1;
}
.stat span { display: block; margin-top: 11px; color: var(--text-dim); font-size: 0.86rem; line-height: 1.4; }

/* 12. PRINCIPLES ------------------------------------------------------------ */
.principles {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}
.principle {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.principle:first-child { padding-top: 0; }
.principle:last-child { border-bottom: 0; padding-bottom: 0; }
.principle__num {
  flex: none;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--violet);
  padding-top: 5px;
}
.principle h4 { margin-bottom: 8px; }
.principle p { color: var(--text-dim); font-size: 0.92rem; }

/* 13. PRICING --------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.plan:hover { transform: translateY(-5px); border-color: var(--line-strong); }
.plan--featured {
  border-color: transparent;
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.16), rgba(43, 232, 184, 0.06)),
    var(--surface-2);
  box-shadow: var(--glow-violet);
}
.plan__badge {
  position: absolute;
  top: -12px; left: clamp(26px, 3vw, 38px);
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--grad);
  color: #08060f;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; }
.plan__desc { margin-top: 8px; color: var(--text-faint); font-size: 0.87rem; min-height: 42px; }
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 22px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.plan__price b {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.plan__price span { color: var(--text-faint); font-size: 0.84rem; }
.plan__note { color: var(--text-faint); font-size: 0.76rem; }
.plan__list { display: grid; gap: 12px; margin: 26px 0 30px; }
.plan__list li {
  display: flex;
  gap: 11px;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}
.plan__list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--mint); }
.plan .btn { margin-top: auto; }

/* 14. FAQ ------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: 100%;
  padding: 24px 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.5vw, 1.16rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  transition: color 0.2s var(--ease);
}
.faq__q:hover { color: var(--mint); }
.faq__q i {
  position: relative;
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.faq__q i::before,
.faq__q i::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  background: currentColor;
  border-radius: 2px;
}
.faq__q i::before { width: 11px; height: 1.5px; }
.faq__q i::after { width: 1.5px; height: 11px; transition: opacity 0.3s var(--ease); }
.faq__q[aria-expanded="true"] i { transform: rotate(180deg); background: var(--grad); border-color: transparent; color: #08060f; }
.faq__q[aria-expanded="true"] i::after { opacity: 0; }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__a p {
  padding: 0 60px 26px 4px;
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 78ch;
}

/* Страница «Вопросы и ответы» (faq.html): оглавление и группы по услугам */
.faq-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.faq-toc__link {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.faq-toc__link:hover,
.faq-toc__link:focus-visible {
  color: var(--text);
  border-color: var(--mint, #2be8b8);
  background: rgba(43, 232, 184, 0.08);
}
.faq-group {
  padding-top: clamp(22px, 3vw, 34px);
  margin-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.faq-group:first-of-type { border-top: 0; margin-top: 0; }
.faq-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.faq-group__head h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.faq-group__head a {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}
.faq-group__head a:hover { color: var(--mint, #2be8b8); }

/* 15. CONTACT --------------------------------------------------------------- */
.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(30px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 120% at 88% 6%, rgba(43, 232, 184, 0.22), transparent 62%),
    radial-gradient(ellipse 70% 120% at 4% 96%, rgba(43, 232, 184, 0.1), transparent 62%),
    #0a3d36;
}
.contact-info h2 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); line-height: 1.12; }
.contact-info__list { display: grid; gap: 16px; margin-top: 30px; }
.contact-info__list a,
.contact-info__list span {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--text-dim);
  font-size: 0.95rem;
  transition: color 0.2s var(--ease);
}
.contact-info__list a:hover { color: var(--text); }
.contact-info__list svg { width: 18px; height: 18px; flex: none; color: var(--mint); }

.socials { display: flex; gap: 10px; margin-top: 28px; }
.socials a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.socials a:hover {
  transform: translateY(-3px);
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.07);
}
.socials svg { width: 19px; height: 19px; }

.form { display: grid; gap: 14px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 8px; }
.field > label {
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  color: var(--text);
  font-size: 0.94rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field textarea { min-height: 108px; resize: vertical; }
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a3a4ba' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field select option { background: var(--surface-2); color: var(--text); }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: rgba(124, 92, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.16), 0 18px 40px -32px rgba(124, 92, 255, 0.95);
}
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: rgba(255, 107, 138, 0.75); }
.field__error { color: var(--coral); font-size: 0.76rem; }

/* Phone: country code with flag + per-country mask */
.phone-int {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.phone-int__cc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.phone-int__cc:hover,
.phone-int__cc[aria-expanded="true"] {
  border-color: rgba(124, 92, 255, 0.65);
  background: rgba(255, 255, 255, 0.05);
}
.phone-int__cc svg { color: var(--text-faint); transition: transform 0.2s var(--ease); }
.phone-int__cc[aria-expanded="true"] svg { transform: rotate(180deg); }
.phone-int > input { flex: 1 1 auto; min-width: 0; }
.phone-int__flag { font-size: 1.05rem; line-height: 1; }
.phone-int__dial { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.phone-int__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 70;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 240px;
  max-height: 274px;
  overflow: auto;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--bg-soft);
  box-shadow: var(--shadow-lg);
}
.phone-int__list[hidden] { display: none; }
.phone-int__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.15s var(--ease);
}
.phone-int__list li:hover,
.phone-int__list li[aria-selected="true"] { background: rgba(124, 92, 255, 0.18); }
.phone-int__list .phone-int__name { flex: 1 1 auto; color: var(--text); }
.phone-int__list .phone-int__dial { color: var(--text-faint); }
.field.has-error .phone-int__cc { border-color: rgba(255, 107, 138, 0.75); }
@media (max-width: 420px) {
  .phone-int__cc { padding: 0 10px; gap: 5px; }
  .phone-int__list { min-width: 210px; }
}

.form__consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--text-faint);
  font-size: 0.79rem;
  line-height: 1.5;
}
.form__consent input {
  position: relative;
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.form__consent input:checked { border-color: transparent; background: var(--grad); }
.form__consent input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #08060f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form__consent a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 3px; }

.form__status {
  display: none;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 0.88rem;
}
.form__status.is-ok {
  display: block;
  border: 1px solid rgba(43, 232, 184, 0.35);
  background: rgba(43, 232, 184, 0.1);
  color: #9ff0da;
}
.form__status.is-err {
  display: block;
  border: 1px solid rgba(255, 107, 138, 0.35);
  background: rgba(255, 107, 138, 0.1);
  color: #ffb3c3;
}

/* 16. FOOTER / MISC --------------------------------------------------------- */
.footer {
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: 36px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, var(--bg-soft));
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: clamp(28px, 3.4vw, 48px);
}
.footer__about p { margin-top: 18px; color: var(--text-faint); font-size: 0.88rem; max-width: 34ch; }
.footer__partner {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.footer__partner span { color: var(--text-faint); font-size: 0.76rem; }
.footer__partner img {
  display: block;
  opacity: 0.82;
  transition: opacity 0.22s var(--ease);
}
.footer__partner a:hover img { opacity: 1; }
.footer__col h5 {
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer__col ul { display: grid; gap: 11px; }
.footer__col a { color: var(--text-dim); font-size: 0.9rem; transition: color 0.2s var(--ease); }
.footer__col a:hover { color: var(--text); }
.footer__col address { font-style: normal; color: var(--text-dim); font-size: 0.9rem; }

.requisites {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.022);
}
.requisites h5 {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.requisites dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
}
.requisites div {
  display: grid;
  grid-template-columns: minmax(130px, auto) minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
.requisites dt { color: var(--text-faint); font-size: 0.82rem; }
.requisites dd { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; }
.requisites dd a { color: var(--text-dim); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.requisites dd a:hover { color: var(--text); }
.requisites__note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.55;
  max-width: 78ch;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.82rem;
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__bottom a { transition: color 0.2s var(--ease); }
.footer__bottom a:hover { color: var(--text); }

/* Floating UI */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  height: 2px;
  width: 0;
  background: var(--grad);
}

.to-top {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(13, 13, 20, 0.86);
  backdrop-filter: blur(12px);
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--grad); color: #08060f; border-color: transparent; }
.to-top svg { width: 18px; height: 18px; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Первый экран не ждёт JS.
   .reveal прячет блок до выполнения main.js и срабатывания IntersectionObserver:
   на медленной связи заголовок и кнопки появлялись только после загрузки
   скрипта, и это затягивало LCP (главный заголовок — элемент LCP).
   Первый экран анимируем чистым CSS — тот же эффект, но рисуется сразу
   после стилей, без скрипта. Ниже первого экрана остаётся ленивый reveal. */
.hero .reveal,
.case-hero .reveal,
.page > .section:first-child .reveal {
  opacity: 1;
  transform: none;
  animation: reveal-in 0.7s var(--ease-out) backwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* 19b. BLOG ----------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.post-card:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--text-faint);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.post-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.03em;
}
.post-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }
.post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--mint);
  font-size: 0.84rem;
  font-weight: 600;
}
.post-card__more svg { width: 15px; height: 15px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.post-tags__item {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 0.78rem;
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  color: var(--text-faint);
  font-size: 0.84rem;
}
.post-body h2 {
  margin: 38px 0 12px;
  font-size: clamp(1.32rem, 2.2vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.post-body > h2:first-child { margin-top: 0; }
.post-body h3 { margin: 26px 0 10px; font-size: 1.02rem; letter-spacing: -0.015em; }
.post-body p, .post-body li { color: var(--text-dim); font-size: 0.96rem; }
.post-body p + p { margin-top: 12px; }
.post-body ul, .post-body ol { margin: 12px 0 0 22px; display: grid; gap: 8px; }
.post-body ul li { list-style: disc; }
.post-body ol li { list-style: decimal; }
.post-body a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.post-body .table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}
.post-body table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.post-body th, .post-body td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  color: var(--text-dim);
}
.post-body th {
  color: var(--text);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
}
.post-body .table-wrap + p { margin-top: 14px; }
.post-body blockquote {
  margin: 18px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--mint);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(43, 232, 184, 0.06);
  color: var(--text-dim);
  font-size: 0.94rem;
}
.post-body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(124, 92, 255, 0.16);
  color: var(--text);
  font-size: 0.86em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.post-note { margin-top: 14px; color: var(--text-faint); font-size: 0.86rem; }

/* 20. LEGAL / PROSE PAGES --------------------------------------------------- */
.legal {
  padding-top: clamp(112px, 13vw, 152px);
  padding-bottom: clamp(64px, 8vw, 110px);
}
.legal__wrap {
  max-width: 780px;
  margin-inline: auto;
  padding: clamp(26px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.legal h2 {
  margin: 34px 0 12px;
  font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  letter-spacing: -0.02em;
}
.legal p, .legal li { color: var(--text-dim); font-size: 0.94rem; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { margin: 10px 0 0 20px; display: grid; gap: 7px; }
.legal ul li { list-style: disc; }
.legal ol li { list-style: decimal; }
.legal a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { margin-top: 14px; color: var(--text-faint); font-size: 0.85rem; }
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 26px;
  color: var(--text-dim);
  font-size: 0.88rem;
  transition: color 0.2s var(--ease);
}
.legal__back:hover { color: var(--text); }
.legal__back svg { width: 15px; height: 15px; }
.legal table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.legal th, .legal td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  color: var(--text-dim);
}
.legal th { color: var(--text); font-weight: 600; background: rgba(255, 255, 255, 0.03); }

/* 21. WIDGETS: CALLBACK, FAB, MOBILE BAR, MODAL, COOKIE --------------------- */
.hero__note { margin-top: 18px; color: var(--text-faint); font-size: 0.88rem; }
.text-link {
  color: var(--mint);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.text-link:hover { color: var(--text); }

.contact-info__cta { margin-top: 28px; }

/* Floating quick-contact buttons */
.fab {
  position: fixed;
  right: 22px;
  bottom: 84px;
  z-index: 90;
  display: grid;
  gap: 10px;
}
.fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(13, 13, 20, 0.86);
  backdrop-filter: blur(12px);
  color: var(--text);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.fab__btn:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); }
.fab__btn svg { width: 19px; height: 19px; }
.fab__btn--accent {
  border-color: transparent;
  background: var(--lime);
  color: #111605;
  box-shadow: 0 14px 34px -14px rgba(198, 242, 78, 0.9);
}
.fab__btn--accent:hover { background: var(--lime); }
.fab__btn--accent::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  animation: pulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.45); }
  70% { box-shadow: 0 0 0 17px rgba(124, 92, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); }
}

/* Sticky action bar on phones */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: none;
  gap: 10px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: rgba(6, 6, 10, 0.93);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
}
.mobile-bar .btn { padding: 13px 18px; }

/* Callback modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 3, 7, 0.76);
  backdrop-filter: blur(6px);
}
.modal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  padding: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 85% 90% at 100% 0%, rgba(124, 92, 255, 0.18), transparent 62%),
    radial-gradient(ellipse 80% 90% at 0% 100%, rgba(43, 232, 184, 0.1), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-lg);
  transform: translateY(18px) scale(0.985);
  transition: transform 0.35s var(--ease-out);
}
.modal.is-open .modal__panel { transform: none; }
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.modal__close:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); border-color: var(--line-strong); }
.modal__close svg { width: 17px; height: 17px; }
.modal h2 { margin-bottom: 12px; font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.modal__lead { margin-bottom: 26px; color: var(--text-dim); font-size: 0.92rem; }
.modal__hint { text-align: center; color: var(--text-faint); font-size: 0.82rem; }
.modal__hint a { color: var(--mint); font-weight: 600; }

/* Cookie notice */
.cookie {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 250;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: min(640px, calc(100vw - 40px));
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(13, 13, 20, 0.95);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.cookie[hidden] { display: none; }
.cookie.is-shown { opacity: 1; transform: none; }
.cookie p { flex: 1 1 320px; color: var(--text-dim); font-size: 0.84rem; line-height: 1.55; }
.cookie a { color: var(--mint); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* 22. SERVICES / FEATURES / GEO / PAYMENT ----------------------------------- */
.services-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.service-card .card__tags { margin-top: 0; padding-top: 0; border-top: 0; }
.service-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.service-card__price {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.service-card__term {
  padding: 5px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 0.76rem;
  white-space: nowrap;
}

.section-foot { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }

.case__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.case__facts li {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-faint);
  font-size: 0.76rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .feature-grid--2 { grid-template-columns: 1fr; } }
.feature {
  display: block;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.feature:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.feature:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.feature__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  border-radius: 14px;
  background: rgba(124, 92, 255, 0.12);
  color: var(--violet);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h4 { margin-bottom: 9px; }
.feature p { color: var(--text-dim); font-size: 0.9rem; }

.geo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 34px;
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: clamp(28px, 3.4vw, 40px);
  border-top: 1px solid var(--line);
}
.geo h4 { color: var(--text-dim); font-weight: 600; letter-spacing: 0; }
.geo__list { display: flex; flex-wrap: wrap; gap: 9px; }
.geo__list li {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 0.84rem;
}

.pay-note {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.022);
}
.pay-note div { display: grid; gap: 6px; }
.pay-note b { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; }
.pay-note span { color: var(--text-faint); font-size: 0.82rem; }

.process--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 23. PROJECT PAGES --------------------------------------------------------- */
.case-hero {
  position: relative;
  padding-top: clamp(108px, 12vw, 148px);
  padding-bottom: clamp(36px, 4.5vw, 60px);
  overflow: hidden;
}
.case-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 85% 60% at 40% 20%, #000 5%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 60% at 40% 20%, #000 5%, transparent 72%);
  pointer-events: none;
}
.case-hero .container { position: relative; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--text-faint);
  font-size: 0.85rem;
}
.breadcrumb a { transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb svg { width: 14px; height: 14px; opacity: 0.55; flex: none; }

.case-hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.case-hero__tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.case-hero__tags li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 0.78rem;
}
.case-hero__lead { margin-top: 20px; }
.case-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: clamp(32px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--line);
  overflow: hidden;
}
.facts-grid > div { padding: clamp(20px, 2.4vw, 28px); background: var(--bg-soft); }
.facts-grid b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
}
.facts-grid span { display: block; margin-top: 9px; color: var(--text-faint); font-size: 0.8rem; }

.ba-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.ba {
  padding: clamp(24px, 2.8vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.ba--before { border-color: rgba(255, 107, 138, 0.22); background: linear-gradient(180deg, rgba(255, 107, 138, 0.07), transparent), var(--surface); }
.ba--after { border-color: rgba(43, 232, 184, 0.22); background: linear-gradient(180deg, rgba(43, 232, 184, 0.07), transparent), var(--surface); }
.ba__label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ba--before .ba__label { background: rgba(255, 107, 138, 0.14); color: #ffb3c3; }
.ba--after .ba__label { background: rgba(43, 232, 184, 0.13); color: #9ff0da; }
.ba p { color: var(--text-dim); font-size: 0.95rem; }

.work-blocks { border-top: 1px solid var(--line); }
.work-block {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.work-block__num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--violet);
  padding-top: 6px;
}
.work-block h4 { margin-bottom: 10px; }
.work-block p { color: var(--text-dim); font-size: 0.93rem; max-width: 78ch; }
.work-block__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.work-block__list li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-faint);
  font-size: 0.75rem;
}

/* Outcome block: «Что вы получаете на выходе» — что реально получает заказчик. */
.outcome-box {
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(198, 242, 78, 0.04), transparent 60%);
}
.outcome-box h3 {
  margin-bottom: 12px;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--lime);
}
.outcome-lead {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 78ch;
  margin-bottom: 20px;
}
.outcome-summary {
  color: var(--text-dim);
  font-size: 0.93rem;
  max-width: 78ch;
  margin-bottom: 20px;
}
.outcome-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 10px 24px;
  list-style: none;
}
.outcome-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 0.93rem;
  color: var(--text-dim);
}
.outcome-list li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--lime);
}
.outcome-list li span { max-width: 78ch; }

/* Stepped variant for service pages: «Состав услуги» as a timeline of
   numbered steps with a scroll-driven progress rail. */
.work-blocks--steps { position: relative; border-top: 0; }
.work-blocks--steps::before,
.work-blocks--steps::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 48px;
  width: 2px;
  border-radius: 2px;
}
.work-blocks--steps::before { background: var(--line); }
.work-blocks--steps::after {
  background: var(--grad);
  transform: scaleY(var(--steps-progress, 0));
  transform-origin: top;
}
.work-blocks--steps .work-block {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  border-bottom: 0;
}
.work-blocks--steps .work-block__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding-top: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-faint);
  font-size: 0.78rem;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.work-blocks--steps .work-block.is-visible .work-block__num {
  color: var(--violet);
  border-color: rgba(124, 92, 255, 0.55);
  box-shadow: 0 0 0 5px rgba(124, 92, 255, 0.1);
}

.stack-list { display: flex; flex-wrap: wrap; gap: 10px; }
.stack-list li {
  padding: 11px 19px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 0.87rem;
}

.filter-bar { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.filter {
  padding: 9px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--line-strong); }
.filter.is-active { border-color: transparent; background: var(--grad); color: #08060f; font-weight: 700; }
.filter-empty {
  margin-top: 26px;
  color: var(--text-faint);
  font-size: 0.92rem;
  text-align: center;
}

.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 20px); }
.rel {
  display: block;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.rel:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.rel b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.rel span { color: var(--text-faint); font-size: 0.84rem; }

.cta-band {
  padding: clamp(34px, 4.4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 120% at 88% 6%, rgba(43, 232, 184, 0.24), transparent 62%),
    radial-gradient(ellipse 70% 120% at 6% 96%, rgba(0, 0, 0, 0.3), transparent 62%),
    #0a3d36;
  text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { max-width: 58ch; margin: 0 auto 30px; color: rgba(255, 255, 255, 0.78); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* 24. CALCULATOR / TEAM / ADDONS -------------------------------------------- */
.process--six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.process--six .step { padding-bottom: 30px; }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3.2vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 120% at 4% 0%, rgba(124, 92, 255, 0.15), transparent 62%),
    var(--surface);
}
.calc__label {
  display: block;
  margin-bottom: 14px;
  color: var(--text-faint);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.calc__types { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.calc__type {
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 0.86rem;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.calc__type:hover { color: var(--text); border-color: var(--line-strong); }
.calc__type.is-active { border-color: transparent; background: var(--grad); color: #08060f; font-weight: 700; }

.calc__options { display: grid; gap: 10px; }
.calc__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.022);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.calc__option:hover { border-color: var(--line-strong); }
.calc__option input {
  position: relative;
  width: 18px; height: 18px;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.calc__option input:checked { border-color: transparent; background: var(--grad); }
.calc__option input:checked::after {
  content: "";
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #08060f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.calc__option span { flex: 1; font-size: 0.9rem; color: var(--text-dim); }
.calc__option b { color: var(--text-faint); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.calc__option:has(input:checked) { border-color: rgba(124, 92, 255, 0.5); background: rgba(124, 92, 255, 0.1); }
.calc__option:has(input:checked) span { color: var(--text); }

.calc__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}
.calc__result-label { color: var(--text-faint); font-size: 0.8rem; }
.calc__price {
  display: block;
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.05;
}
.calc__term { color: var(--text-dim); font-size: 0.9rem; }
.calc__note { margin-top: 16px; color: var(--text-faint); font-size: 0.76rem; line-height: 1.5; }
.calc__result .btn { margin-top: 22px; }

.team-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.team-card {
  display: flex;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 2vw, 26px) clamp(20px, 2.2vw, 28px) 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.team-card:nth-child(3n) { border-right: 0; padding-right: 0; }
.team-avatar {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, 0.28);
  background: rgba(124, 92, 255, 0.12);
  color: #b3a0ff;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.team-card h4 { margin-bottom: 7px; }
.team-card p { color: var(--text-dim); font-size: 0.88rem; }

/* 25. DEVICE MOCKUPS (portfolio screenshots) -------------------------------- */
.devices {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(118px, 15%, 178px);
  align-items: end;
  gap: 0;
  margin-top: clamp(28px, 3.6vw, 46px);
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background-color: var(--bg-soft);
  background-image:
    radial-gradient(120% 100% at 8% 0%, rgba(124, 92, 255, 0.22), transparent 62%),
    radial-gradient(90% 90% at 98% 100%, rgba(43, 232, 184, 0.16), transparent 60%);
  overflow: hidden;
}
.devices::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 0%, #000 5%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 0%, #000 5%, transparent 75%);
  pointer-events: none;
}
.devices > * { position: relative; z-index: 1; }

.device {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #0b0913;
  box-shadow: 0 42px 80px -34px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.device__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.045);
}
.device__dot {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.device__dot:first-child { background: rgba(255, 107, 107, 0.6); }
.device__dot:nth-child(2) { background: rgba(255, 205, 107, 0.55); }
.device__dot:nth-child(3) { background: rgba(120, 226, 160, 0.55); }
.device__url {
  margin-left: 8px;
  padding: 4px 12px;
  flex: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-faint);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* <picture> is only a format/width switch; it must not take part in layout, so the
   <img> inside keeps resolving against the frame that sizes it. */
.device__screen picture,
.case__shot picture { display: contents; }

.device__screen { position: relative; display: block; background: #07060c; }
/* Explicit box from the container's aspect-ratio; the image just fills it. This keeps
   the frame height fixed while a lazy WebP is still loading, so nothing jumps. */
.device__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.device--desktop .device__screen { aspect-ratio: 16 / 10; }

/* phone */
.device--mobile {
  z-index: 2;
  margin-left: clamp(-58px, -4.5vw, -22px);
  margin-bottom: clamp(-26px, -2.4vw, -12px);
  border-radius: 26px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.2);
}
.device--mobile::before {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: 38%; height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.device--mobile .device__screen { aspect-ratio: 330 / 715; border-radius: 0 0 24px 24px; }

/* The whole mockup sits below the fold on a case page, so its layout can be deferred
   until it is about to scroll into view. The box is already reserved by the
   aspect-ratio, so this costs nothing visually. */
.devices { content-visibility: auto; contain-intrinsic-size: auto 480px; }

/* fallback when no screenshot has been fetched yet */
.device__screen--mock {
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  background-image:
    radial-gradient(90% 90% at 20% 10%, rgba(124, 92, 255, 0.42), transparent 62%),
    radial-gradient(80% 80% at 85% 90%, rgba(43, 232, 184, 0.32), transparent 62%);
}
.device__screen--mock b {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.device--mobile .device__screen--mock b { font-size: 1.02rem; word-break: break-word; }
.device--mobile .device__screen--mock span { display: none; }
.device__screen--mock span { color: rgba(255, 255, 255, 0.66); font-size: 0.74rem; }

/* compact preview on portfolio cards */
.case__shot {
  position: relative;
  margin: -6px 0 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0b0913;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.35s var(--ease);
}
.case:hover .case__shot { border-color: var(--line-strong); transform: translateY(-2px); }
.case__shot-desktop { display: block; aspect-ratio: 16 / 10; }
.case__shot-desktop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; content-visibility: auto; }
.case__shot-desktop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(7, 6, 12, 0.55));
  pointer-events: none;
}
.case__shot-phone {
  position: absolute;
  right: 12px;
  bottom: -10px;
  z-index: 2;
  width: clamp(46px, 17%, 62px);
  aspect-ratio: 330 / 715;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: #0b0913;
  overflow: hidden;
  box-shadow: 0 16px 26px -12px rgba(0, 0, 0, 0.9);
}
.case__shot-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.case__shot-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(11, 9, 19, 0.82);
  color: var(--text-dim);
  font-size: 0.7rem;
  backdrop-filter: blur(8px);
}
.case__shot-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }

/* 16b. LIGHT SECTIONS -------------------------------------------------------
   Alternating rhythm: dark hero -> light chapters -> dark media cards -> teal CTA.
   A light section swaps the theme tokens for its subtree; components that carry
   hardcoded dark-theme tints get explicit overrides below. */
.section--light {
  --surface: #f6f7fb;
  --surface-2: #eceef6;
  --text: #0e1018;
  --text-dim: #464a5f;
  --text-faint: #5b5f76;
  --line: rgba(12, 15, 35, 0.12);
  --line-strong: rgba(12, 15, 35, 0.3);
  background: #ffffff;
  color: var(--text);
}
.section--light.section--gray {
  background: #f1f2f8;
  --surface: #ffffff;
  --surface-2: #f7f8fc;
}

.section--light .eyebrow { background: rgba(12, 15, 35, 0.045); }
.section--light .btn--ghost { background: rgba(12, 15, 35, 0.04); }
.section--light .btn--ghost:hover { background: rgba(12, 15, 35, 0.08); border-color: rgba(12, 15, 35, 0.34); }
.section--light .card__icon { background: rgba(12, 15, 35, 0.05); }
.section--light .card__tags li { background: rgba(12, 15, 35, 0.05); }
.section--light .pay-note { background: rgba(12, 15, 35, 0.035); }
.section--light .step__time {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lime);
  color: #151a06;
  font-weight: 700;
}
.section--light .plan__list svg { color: #0e9680; }
.section--light .faq__q:hover { color: #0e9680; }

/* the stats band stays a dark card popping out of the light chapter */
.section--light .stats-band {
  --text: #ecedf4;
  --text-dim: #a3a4ba;
  --text-faint: #9fa0b5;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(ellipse 70% 130% at 12% 0%, rgba(124, 92, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 70% 130% at 92% 100%, rgba(43, 232, 184, 0.12), transparent 60%),
    #0f0f18;
}

/* featured plan becomes a dark card inside the light chapter */
.section--light .plan--featured {
  --text: #ecedf4;
  --text-dim: #a3a4ba;
  --text-faint: #8f90a8;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.24);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.22), rgba(43, 232, 184, 0.06)),
    #101020;
}
.section--light .plan--featured .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #ecedf4;
}
.section--light .plan--featured .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

/* --- страницы кейсов: светлые главы внутри чередования -------------------
   Компоненты кейса живут в тёмной теме, поэтому в .section--light им
   нужны явные краски: без этого подписи «Задача/Решение» оставались
   бы розовым и мятным по белому, а чипы стека — белым по белому. */
.section--light .ba--before .ba__label { background: rgba(255, 107, 138, 0.16); color: #b8234a; }
.section--light .ba--after .ba__label { background: rgba(43, 232, 184, 0.18); color: #0a7a5e; }
.section--light .stack-list li { background: rgba(16, 17, 20, 0.04); color: var(--text-dim); }
.section--light .result-strip {
  border-color: rgba(14, 150, 128, 0.4);
  background: linear-gradient(120deg, rgba(43, 232, 184, 0.14), rgba(124, 92, 255, 0.1));
}
.section--light .result-strip__label { color: #0e9680; }
.section--light .rel { box-shadow: 0 24px 60px -46px rgba(16, 17, 20, 0.5); }

/* HERO LEAD FORM ----------------------------------------------------------- */
.hero-form {
  max-width: 560px;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding: clamp(16px, 1.8vw, 20px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--surface);
  box-shadow: 0 34px 80px -56px rgba(124, 92, 255, 0.7);
}
.hero-form__head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.hero-form__head img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 1px solid var(--line-strong);
}
.hero-form__head b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}
.hero-form__head span { color: var(--text-faint); font-size: 0.78rem; }
.hero-form__note { color: var(--text-faint); font-size: 0.78rem; text-align: center; margin-bottom: 0; }

/* PRICE FACTORS (under the calculator) -------------------------------------- */
.price-factors { margin-top: clamp(44px, 5vw, 64px); }
.factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: clamp(12px, 1.4vw, 16px);
}
.factor-card {
  padding: clamp(18px, 1.9vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.factor-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.factor-card b {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: -0.02em;
}
.factor-card b::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--grad);
  vertical-align: 1px;
}
.factor-card p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.5; }

/* FREE EXPRESS AUDIT -------------------------------------------------------- */
.express-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .express-wrap { grid-template-columns: minmax(0, 1fr); }
}
.express__text h2 { margin-block: 14px 16px; }
.express-list {
  display: grid;
  gap: 13px;
  margin-top: 22px;
}
.express-list li {
  display: flex;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}
.express-list li b { color: var(--text); }
.express-list svg {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  color: var(--mint);
}
.express-form {
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) + 4px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--surface);
  box-shadow: 0 34px 80px -56px rgba(124, 92, 255, 0.7);
}
.express-form__head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.express-form__head img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 12%;
  border: 1px solid var(--line-strong);
}
.express-form__head b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.express-form__head span { color: var(--text-faint); font-size: 0.76rem; }

/* city links inside the geo list */
.geo__list a { color: inherit; }
.geo__list a:hover { color: var(--text); }
.geo__list a:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 999px; }

/* ABOUT ME ----------------------------------------------------------------- */
.about-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.about-photo {
  position: relative;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) + 8px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.about-photo:hover {
  border-color: var(--line-strong);
  box-shadow: 0 30px 70px -40px rgba(124, 92, 255, 0.55);
}
.about-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: calc(var(--radius-lg) - 2px);
  filter: saturate(1.04);
}
.about-photo__badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(6, 6, 10, 0.78);
  backdrop-filter: blur(10px);
}
.about-photo__badge b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}
.about-photo__badge span { color: var(--text-faint); font-size: 0.74rem; }
.about-text h2 { margin-block: 14px 16px; }
.about-list {
  display: grid;
  gap: 12px;
  margin-block: 22px 26px;
}
.about-list li {
  display: flex;
  gap: 10px;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}
.about-list svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--mint);
}
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.about-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}
.about-facts div {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), var(--surface);
}
.about-facts b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
}
.about-facts span {
  display: block;
  margin-top: 4px;
  color: var(--text-faint);
  font-size: 0.72rem;
  line-height: 1.35;
}

/* PROMO: selling service blocks (home) ------------------------------------ */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
}
.promo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.promo-card::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 120%;
  background: radial-gradient(closest-side, var(--card-glow, rgba(124, 92, 255, 0.35)), transparent 70%);
  opacity: 0;
  transform: translateY(-40%);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.promo-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.promo-card:hover,
.promo-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(124, 92, 255, 0.5);
  box-shadow: 0 24px 54px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(124, 92, 255, 0.25);
}
.promo-card:hover::before,
.promo-card:focus-visible::before { opacity: 0.55; transform: translateY(0); }
.promo-card:hover::after { left: 130%; }
.promo-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  color: var(--card-glow, var(--violet));
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.promo-card__icon svg { width: 22px; height: 22px; }
.promo-card:hover .promo-card__icon {
  transform: translateY(-3px) rotate(-6deg) scale(1.06);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--line-strong);
}
.promo-card h3 { font-size: 1.06rem; letter-spacing: -0.02em; }
.promo-card__pitch { color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; }
.promo-card__wins {
  display: grid;
  gap: 6px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--text-faint);
}
.promo-card__wins li {
  position: relative;
  padding-left: 20px;
  line-height: 1.45;
}
.promo-card__wins li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}
.promo-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.promo-card__foot b { color: var(--lime); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.promo-card__foot span { color: var(--text-faint); font-size: 0.78rem; }
.promo-card__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.promo-card:hover .promo-card__go { color: var(--text); gap: 11px; }
@media (max-width: 1100px) { .promo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .promo-grid { grid-template-columns: 1fr; } }

/* Онлайн-бриф: CTA на услуге, страница брифа -------------------------------- */
.brief-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(124, 92, 255, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(115deg, rgba(124, 92, 255, 0.12), rgba(43, 232, 184, 0.08));
}
.brief-cta h2 { font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin-block: 10px; }
.brief-cta p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.6; max-width: 56ch; }
.brief-cta .btn { flex: none; }
.brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.brief-layout .form {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}
.brief-aside {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  position: sticky;
  top: 96px;
}
.brief-aside h3 { font-size: 1.02rem; }
.brief-aside ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}
.brief-aside li { position: relative; padding-left: 22px; }
.brief-aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--mint);
  border-bottom: 2px solid var(--mint);
  transform: rotate(-45deg);
}
.brief-aside__meta {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--text-faint);
  font-size: 0.78rem;
}
.brief-note { margin-top: 12px; color: var(--text-faint); font-size: 0.78rem; text-align: center; }
@media (max-width: 860px) {
  .brief-cta { flex-direction: column; align-items: flex-start; }
  .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .brief-aside { position: static; }
}

/* Что такое контекстная реклама — карточки с иллюстрациями ---------------- */
.ctx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.ctx-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(16px, 1.8vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.ctx-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.ctx-card__art {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #0c0d14;
  transition: box-shadow 0.35s var(--ease);
}
.ctx-card:hover .ctx-card__art { box-shadow: 0 16px 40px -22px rgba(191, 255, 61, 0.35); }
.ctx-card__art svg { display: block; width: 100%; height: auto; }
.ctx-card__art img { display: block; width: 100%; height: auto; }
.ctx-card h3 { font-size: 1.04rem; letter-spacing: -0.02em; }
.ctx-card p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.6; }
@media (max-width: 1000px) { .ctx-grid { grid-template-columns: 1fr; } }

/* Прототипы сайтов — вайрфрейм + расшифровка блоков ------------------------ */
.proto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
}
.proto-art {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0a12;
  transition: box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.proto-art:hover { border-color: var(--line-strong); box-shadow: 0 24px 60px -30px rgba(124, 92, 255, 0.45); }
.proto-art img { display: block; width: 100%; height: auto; }
.proto-list {
  list-style: none;
  counter-reset: proto;
  display: grid;
  gap: 10px;
}
.proto-item {
  counter-increment: proto;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.proto-item:hover { border-color: var(--line-strong); transform: translateX(4px); }
.proto-item__num {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad);
  color: #06060a;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
}
.proto-item b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; }
.proto-item p { margin-top: 2px; color: var(--text-dim); font-size: 0.87rem; line-height: 1.55; }
@media (max-width: 980px) {
  .proto-grid { grid-template-columns: 1fr; }
  .proto-item:hover { transform: none; }
}

/* Города на страницах услуг (перелинковка услуг ↔ гео) ------------------- */
.city-links a { color: inherit; transition: color 0.25s var(--ease), border-color 0.25s var(--ease); }
.city-links a:hover, .city-links a:focus-visible { color: var(--lime); border-color: var(--line-strong); }

/* Контекстная реклама: «простыми словами» и подбор формата ---------------- */
.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .how-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .how-steps { grid-template-columns: 1fr; } }
.how-step {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.02);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.how-step:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.how-step b {
  display: inline-flex;
  width: 30px; height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--grad);
  color: #0c0d14;
  font-size: 0.85rem;
}
.how-step h4 { margin: 12px 0 6px; font-size: 1rem; }
.how-step p { color: var(--text-dim); font-size: 0.86rem; line-height: 1.55; }

.pick { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .pick { grid-template-columns: 1fr; } }
.pick__opts { display: flex; flex-direction: column; gap: 10px; }
.pick__opt {
  text-align: left;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.pick__opt:hover { border-color: var(--line-strong); }
.pick__opt.is-active { background: var(--grad); border-color: transparent; color: #0c0d14; }
.pick__res {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.02);
  min-height: 240px;
}
.pick__res h4 { font-size: 1.15rem; margin-bottom: 8px; letter-spacing: -0.02em; }
.pick__res p { color: var(--text-dim); font-size: 0.93rem; line-height: 1.65; max-width: 70ch; }
.pick__res ul { margin: 14px 0 18px; padding-left: 18px; color: var(--text-dim); font-size: 0.9rem; }
.pick__res li { margin-bottom: 7px; }
.pick__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(191, 255, 61, 0.12);
  color: var(--mint, #c6f24e);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* SERVICES TICKER (bigger marquee with search-engine logos) ---------------- */
.marquee--lg { margin-top: 0; padding-block: 26px; }
.marquee--lg .marquee__track { animation-duration: 55s; }
.marquee--lg .marquee__track > span {
  gap: 12px;
  padding-inline: 26px;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  color: transparent;
  background-image: linear-gradient(180deg, var(--text) 30%, var(--text-dim));
  -webkit-background-clip: text;
  background-clip: text;
}
.marquee--lg .marquee__track > span.marquee__logo {
  color: var(--text-dim);
  background-image: none;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 700;
}
.marquee__logo svg {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 7px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* PROCESS CAROUSEL — the six-step timeline is swipeable ------------------- */
.process--six {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.process--six::-webkit-scrollbar { display: none; }
.process--six .step {
  flex: 0 0 clamp(250px, 76vw, 320px);
  scroll-snap-align: start;
}
.process--six .step::before { content: none; } /* no vertical connector inside the row */
.process--six > .step:nth-child(3n) { --conn: 1; }
.process--six > .step:last-child { --conn: 0; }

/* 17. RESPONSIVE ------------------------------------------------------------ */


@media (max-width: 1120px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .phone-link { display: none; }
}

@media (max-width: 900px) {
  .devices { grid-template-columns: minmax(0, 1fr) clamp(92px, 20%, 132px); }
  .device--mobile { margin-left: clamp(-44px, -6vw, -20px); margin-bottom: -14px; }
}

@media (max-width: 1024px) {
  .about-wrap { grid-template-columns: 1fr; }
  .about-photo { max-width: 440px; }
  /* timeline collapses to two columns — reconnect the odd items */
  .process > .step:nth-child(3n),
  .process > .step:nth-child(5n) { --conn: 1; }
  .process > .step:nth-child(2n),
  .process > .step:last-child { --conn: 0; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { max-width: 480px; margin-inline: auto; width: 100%; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pay-note { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: 1fr; }
  .team-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-card:nth-child(3n) { border-right: 1px solid var(--line); padding-right: clamp(16px, 2vw, 26px); }
  .team-card:nth-child(2n) { border-right: 0; padding-right: 0; }
  .process--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}



@media (max-width: 720px) {
  /* timeline: single column — vertical connector between the circles */
  .process > .step:nth-child(2n),
  .process > .step:nth-child(3n),
  .process > .step:nth-child(4n),
  .process > .step:nth-child(5n) { --conn: 1; }
  .process > .step:last-child { --conn: 0; }
  .step::before {
    content: "";
    position: absolute;
    top: calc(28px + 46px + 10px);
    left: 44px;
    width: 2px;
    height: calc((100% - 46px) * var(--conn, 0));
    background: var(--line-strong);
  }
  .step::after { content: none; }
  html { scroll-padding-top: 80px; }
  .nav { height: 68px; gap: 14px; }
  /* messengers stay in the header on mobile — keep them compact */
  .header-socials { gap: 5px; }
  .header-socials a { width: 32px; height: 32px; border-radius: 10px; }
  .header-socials svg { width: 15px; height: 15px; }
  .mobile-menu { inset: 68px 0 0 0; }
  .section-head--center { text-align: left; }
  .services-grid,
  .services-grid--wide,
  .cases,
  .plans,
  .feature-grid,
  .pay-note,
  .ba-grid,
  .rel-grid { grid-template-columns: 1fr; }
  .process--four,
  .process--six { grid-template-columns: 1fr; }
  .team-strip { grid-template-columns: 1fr; }
  .team-card,
  .team-card:nth-child(2n),
  .team-card:nth-child(3n) { border-right: 0; padding-right: 0; }
  .work-block { grid-template-columns: 1fr; gap: 8px; }
  .work-block__num { padding-top: 0; }
  .work-blocks--steps .work-block { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .process { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-photo { max-width: none; }
  .about-photo__badge { left: 18px; bottom: 18px; padding: 10px 14px; }
  .form__row { grid-template-columns: 1fr; }
  .requisites dl { grid-template-columns: 1fr; }
  .requisites div { grid-template-columns: 1fr; gap: 5px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .chip { padding: 11px 14px; transform: scale(0.9); }
  .chip--a { left: -4%; }
  .chip--b { right: -4%; }
  .faq__a p { padding-right: 20px; }

  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .fab { display: none; }
  .to-top { bottom: 90px; }
  .footer { padding-bottom: 116px; }
  .cookie {
    left: 12px; right: 12px; bottom: 82px;
    width: auto;
    padding: 16px;
  }
  .modal { padding: 0; place-items: end stretch; }
  .modal__panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(30px);
  }
}

@media (max-width: 560px) {
  .devices {
    grid-template-columns: minmax(0, 1fr) 74px;
    padding: 16px 16px 26px;
  }
  .device--desktop { border-radius: 12px; }
  .device--desktop .device__bar { padding: 8px 11px; gap: 5px; }
  .device__dot { width: 7px; height: 7px; }
  .device__url { font-size: 0.64rem; padding: 3px 9px; }
  .device--mobile { margin-left: -26px; margin-bottom: -18px; border-radius: 18px; }
  .device--mobile .device__screen { border-radius: 0 0 16px 16px; }
  .case__shot-phone { right: 8px; bottom: -8px; }
  .case__shot-badge { left: 8px; bottom: 8px; font-size: 0.64rem; padding: 5px 10px; }
  .nav__cta .btn { display: none; }
  .logo { font-size: 1.02rem; }
  .legal__wrap { padding: 22px 18px; }
}

@media (max-width: 390px) {
  .logo__text { font-size: 0.96rem; }
  .logo__mark { width: 31px; height: 31px; }
  .nav { gap: 10px; }
  .header-socials { gap: 4px; }
  .header-socials a { width: 28px; height: 28px; border-radius: 9px; }
  .header-socials svg { width: 14px; height: 14px; }
}

@media (max-width: 420px) {
  .hero__stats { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr; }
  .plan__badge { left: 50%; translate: -50% 0; }
}

/* Двухрядная шапка (второй ряд с категориями) включается только там, где
   хватает ширины. Блок стоит здесь, в конце таблицы, чтобы его padding-top
   перекрывал базовые правила .hero / .case-hero / .legal выше. */
@media (min-width: 1121px) {
  .subnav { display: block; }
  .subnav .nav__links a { padding: 7px 11px; font-size: 0.82rem; }
  /* шапка выше на 46px — сдвигаем первый экран каждой страницы */
  .hero { padding-top: calc(clamp(112px, 15vw, 172px) + 46px); }
  .case-hero { padding-top: calc(clamp(108px, 12vw, 148px) + 46px); }
  .legal { padding-top: calc(clamp(112px, 13vw, 152px) + 46px); }
  .page > .section:first-child { padding-top: calc(clamp(56px, 7vw, 96px) + 46px); }
  html { scroll-padding-top: 140px; }
}

/* Направления SEO (услуга «SEO-продвижение») --------------------------------- */
.seo-dirs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.seo-dir {
  position: relative;
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  scroll-margin-top: 150px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.seo-dir:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.seo-dir h3 {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.seo-dir p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }
.seo-dir:target { border-color: rgba(124, 92, 255, 0.65); box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.35); }

@media (max-width: 1024px) { .seo-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .seo-dirs { grid-template-columns: 1fr; }
  .seo-dir { padding: 20px; scroll-margin-top: 96px; }
}

/* Список услуг внутри карточки направления (о студии) ----------------------- */
.sitemap-card__list { display: grid; gap: 10px; }
.sitemap-card__list li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sitemap-card__list li a { color: var(--text-dim); font-size: 0.92rem; transition: color 0.2s var(--ease); }
.sitemap-card__list li a:hover,
.sitemap-card__list li a:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sitemap-card__list li span { flex: none; padding-top: 2px; color: var(--text-faint); font-size: 0.82rem; white-space: nowrap; }

/* Карта сайта: колонки ссылок ------------------------------------------------ */
/* Колонки, а не grid: карточки разной высоты, и в сетке рядом с самой
   длинной оставалось бы пустое место на пол-экрана. */
.sitemap-grid { columns: 3; column-gap: clamp(14px, 1.8vw, 22px); }
.sitemap-col { break-inside: avoid; margin-bottom: clamp(14px, 1.8vw, 22px); }
/* Портфолио и блог — длинные списки в две колонки поровну. */
.sitemap-grid--two {
  columns: initial;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}
.sitemap-col {
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.sitemap-col h2 { margin-bottom: 16px; font-size: 1.05rem; letter-spacing: -0.02em; }
.sitemap-col ul { display: grid; gap: 9px; align-content: start; }
.sitemap-price { color: var(--text-faint); font-size: 0.86rem; white-space: nowrap; }
.sitemap-col li a {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.45;
  transition: color 0.2s var(--ease);
}
.sitemap-col li a:hover,
.sitemap-col li a:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sitemap-col__note { margin-bottom: 14px; color: var(--text-faint); font-size: 0.86rem; }

@media (max-width: 1024px) {
  .sitemap-grid { columns: 2; }
  .sitemap-grid--two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sitemap-grid { columns: 1; }
}

/* Дешёвая отрисовка на телефонах -------------------------------------------------
   Живой backdrop-filter — это пересчёт размытия фона при каждом скролле. На
   мобильных оставляем его только там, где он держит читаемость (шапка, меню,
   модалка, мои стеклянные панели), а декоративным плашкам отдаём плотный фон. */
@media (max-width: 720px) {
  .eyebrow,
  .btn--ghost,
  .chip,
  .to-top,
  .fab__btn,
  .mobile-bar,
  .cookie,
  .case__shot-badge,
  .about-photo__badge {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .eyebrow, .btn--ghost { background: rgba(255, 255, 255, 0.05); }
  .chip { background: rgba(13, 13, 20, 0.9); }
  .header.is-stuck { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* 18. MOTION PREFERENCES ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; animation: none !important; }
}

/* 19. PRINT ----------------------------------------------------------------- */
@media print {
  .header, .aura, .grain, .to-top, .scroll-progress, .marquee { display: none; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------ квиз (быстрый расчёт) */
.filter-row__label { align-self: center; font-size: 0.8rem; color: var(--text-faint); white-space: nowrap; }
.quiz__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.quiz__label { font-size: 0.8rem; color: var(--text-faint); }
.quiz__progress { display: flex; gap: 6px; }
.quiz__step { width: 34px; height: 4px; border-radius: 2px; background: var(--line); transition: background 0.2s var(--ease); }
.quiz__step.is-active { background: var(--mint); }
.quiz__panel[hidden] { display: none; }
.quiz__nav { display: flex; gap: 10px; margin-top: 22px; }
.quiz__nav .btn { flex: 1; }

/* ==========================================================================
   Результаты этапов, условия прайса и улучшения квиза (разбор planb.by)
   ========================================================================== */
.step__out {
  display: block;
  margin-top: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--mint);
}

.pay-note__extra {
  margin-top: 18px;
  max-width: 760px;
  font-size: .86rem;
  color: var(--text-faint);
}

.quiz__nav { flex-wrap: wrap; }
.quiz__skip {
  margin-left: auto;
  align-self: center;
  font-size: .84rem;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.quiz__skip:hover, .quiz__skip:focus-visible { color: var(--mint); }

.calc__match {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.calc__match-plan {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--violet);
}
.calc__match-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.calc__match-cases a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .84rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.calc__match-cases a::after { content: " →"; color: var(--mint); }
.calc__match-cases a:hover, .calc__match-cases a:focus-visible {
  border-color: var(--mint);
  color: var(--mint);
}

/* ==========================================================================
   Логотип платформы — в фактах кейса и первом чипе стека
   ========================================================================== */
.fact--platform {
  grid-column: 1 / -1;  /* строка платформы — на всю ширину сетки фактов */
  display: flex;
  align-items: center;
  gap: 15px;
}
.fact--platform svg {
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--violet);
  filter: drop-shadow(0 0 12px rgba(124, 92, 255, 0.4));
}
.fact--platform b { font-size: clamp(1.15rem, 2vw, 1.45rem); }

.stack-list li.stack-list__platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(124, 92, 255, 0.55);
  background: linear-gradient(120deg, rgba(124, 92, 255, 0.18), rgba(43, 232, 184, 0.1));
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 0 18px rgba(124, 92, 255, 0.18);
}
.stack-list li.stack-list__platform svg {
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--mint);
}
.stack-list li.stack-list__platform span { line-height: 1; }

/* ==========================================================================
   Блок «Результат» — измеримые цифры проекта под «Задача → Решение → Результат»
   ========================================================================== */
.result-strip {
  margin-top: clamp(18px, 2vw, 26px);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(43, 232, 184, 0.35);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(43, 232, 184, 0.08), rgba(124, 92, 255, 0.07));
}
.result-strip__label {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint);
}
.result-strip__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
  margin-top: 14px;
}
.result-strip__grid b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text);
}
.result-strip__grid span {
  display: block;
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text-faint);
}

/* ==========================================================================
   ПРИМЕРЫ ЗАДАЧ И УСЛОВИЯ ОПЛАТЫ (страницы услуг)
   ========================================================================== */
.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

.example-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface), var(--bg-soft));
  overflow: hidden;
}
.example-card::after {
  content: "";
  position: absolute;
  right: -25%;
  bottom: -60%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 232, 184, 0.16), transparent 70%);
  pointer-events: none;
}
.example-card__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--mint);
}
.example-card b {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.example-card p {
  position: relative;
  color: var(--text-dim);
  font-size: 0.925rem;
  line-height: 1.6;
}

.price-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
}
.price-split__col {
  padding: clamp(20px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.price-split__col h3 {
  margin-bottom: 18px;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.price-split__col--in {
  border-color: rgba(43, 232, 184, 0.3);
  background: linear-gradient(170deg, rgba(43, 232, 184, 0.08), var(--bg-soft) 55%);
}
.price-split__col--in h3 { color: var(--mint); }
.price-split__col--out {
  border-color: rgba(255, 196, 107, 0.22);
  background: linear-gradient(170deg, rgba(255, 196, 107, 0.05), var(--bg-soft) 55%);
}
.price-split__col--out h3 { color: var(--amber); }
.price-split__col ul {
  display: grid;
  gap: 12px;
}
.price-split__col li {
  display: flex;
  gap: 10px;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--text-dim);
}
.price-split__col--in svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--mint);
}
.price-split__col--out i {
  flex: none;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid rgba(255, 196, 107, 0.45);
  border-radius: 50%;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--amber);
}

@media (max-width: 720px) {
  .price-split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ПАРАЛЛАКС НА КНОПКАХ
   Курсор задаёт --pp-x/--pp-y (от -0.5 до 0.5). Кнопка слегка наклоняется,
   блик и тень уходят за курсором, стрелка — в противоположную сторону.
   Работает только при точном указателе и без prefers-reduced-motion.
   ========================================================================== */
.btn {
  --pp-x: 0;
  --pp-y: 0;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
      background-color 0.25s var(--ease), border-color 0.25s var(--ease),
      color 0.25s var(--ease);
    transform: perspective(900px)
      translate3d(calc(var(--pp-x) * 7px), calc(var(--pp-y) * 5px), 0)
      rotateX(calc(var(--pp-y) * -3.5deg))
      rotateY(calc(var(--pp-x) * 4.5deg));
  }
  .btn.is-tilting { transition-duration: 0.09s; }
  .btn:hover {
    transform: perspective(900px)
      translate3d(calc(var(--pp-x) * 7px), calc(var(--pp-y) * 5px - 2px), 0)
      rotateX(calc(var(--pp-y) * -3.5deg))
      rotateY(calc(var(--pp-x) * 4.5deg));
  }
  .btn:active {
    transform: perspective(900px)
      translate3d(calc(var(--pp-x) * 3px), calc(var(--pp-y) * 2px), 0)
      rotateX(calc(var(--pp-y) * -1.5deg))
      rotateY(calc(var(--pp-x) * 2deg));
  }

  /* блик-«фонарик» ездит внутри кнопки за курсором */
  .btn::before {
    content: "";
    position: absolute;
    inset: -60%;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 45%);
    opacity: 0;
    transform: translate(calc(var(--pp-x) * 32%), calc(var(--pp-y) * 32%));
    transition: opacity 0.32s var(--ease);
    pointer-events: none;
  }
  .btn:hover::before { opacity: 0.5; }
  .btn--primary::before {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%);
  }
  .btn--ghost::before {
    background: radial-gradient(circle at 50% 50%, rgba(43, 232, 184, 0.4), rgba(255, 255, 255, 0) 45%);
  }

  /* стрелка и тень двигаются против курсора — второй план сцены */
  .btn .arrow {
    transform: translate(calc(var(--pp-x) * -7px), calc(var(--pp-y) * -5px));
  }
  .btn:hover .arrow {
    transform: translate(calc(4px + var(--pp-x) * -7px), calc(var(--pp-y) * -5px));
  }
  .btn--primary {
    box-shadow: calc(var(--pp-x) * -10px) calc(16px + var(--pp-y) * -7px) 40px -18px rgba(198, 242, 78, 0.8);
  }
  .btn--primary:hover {
    box-shadow: calc(var(--pp-x) * -12px) calc(22px + var(--pp-y) * -9px) 52px -16px rgba(198, 242, 78, 1);
  }
}

/* «Подробнее» — проза услуги: читаемый столбец с градиентной линейкой слева */
.detail-prose {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 76ch;
  padding-left: clamp(18px, 2.4vw, 32px);
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.72;
}
.detail-prose::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mint), rgba(124, 92, 255, 0.55) 55%, transparent);
}
.detail-prose p:first-of-type,
.detail-prose__lead {
  color: var(--text);
  font-size: clamp(1.05rem, 1.5vw, 1.16rem);
  line-height: 1.62;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   25. ОТРАСЛИ — посадочные под рекламу
   Приёмы в духе planb.by, но в нашей палитре: очень крупная типографика,
   ghost-надписи за контентом, липкая форма заявки, числа-призраки на карточках
   ========================================================================== */

/* Ghost-слово: контурная надпись за контентом. Двигается от скролла (js). */
.ghost-word {
  position: absolute;
  right: -1%;
  bottom: -6%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 13vw, 12rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.055em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.09);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transform: translate3d(0, 0, 0) rotate(-3deg);
  will-change: transform;
}
.niche-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(96px, 10vw, 128px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.niche-hero .container { position: relative; z-index: 1; }
.niche-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(14px, 2vw, 26px);
}
.niche-hero h1 { font-size: clamp(1.95rem, 3.6vw, 3rem); margin-bottom: 18px; }
.niche-hero__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}
.hero__proof-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-faint);
  font-size: 0.76rem;
  line-height: 1.35;
}
.hero__proof-item b {
  color: var(--lime);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Форма в первом экране: главный конверсионный блок посадочной */
.niche-hero__form {
  position: relative;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--radius-lg) + 4px);
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, rgba(124, 92, 255, 0.2), transparent 62%),
    radial-gradient(ellipse 80% 90% at 0% 100%, rgba(198, 242, 78, 0.08), transparent 62%),
    var(--surface);
  box-shadow: var(--shadow-lg);
}
.niche-hero__form::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(198, 242, 78, 0.55), rgba(124, 92, 255, 0.45) 46%, transparent 72%);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.lead-form { position: relative; z-index: 1; }
.lead-form__head { display: grid; gap: 6px; margin-bottom: 6px; }
.lead-form__head b {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 1.6vw, 1.24rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.lead-form__head span { color: var(--text-faint); font-size: 0.83rem; }
.lead-form__note { margin-top: 2px; color: var(--text-faint); font-size: 0.76rem; text-align: center; }

/* «Почему не работает сайт обо всём» — крупная цитата с акцентом */
.niche-note {
  position: relative;
  max-width: 920px;
  padding: clamp(26px, 3vw, 42px) clamp(24px, 3.2vw, 46px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
}
.niche-note__mark {
  position: absolute;
  top: -26px;
  left: 16px;
  font-family: var(--font-display);
  font-size: 5.2rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(198, 242, 78, 0.32);
}
.niche-note h2 { font-size: clamp(1.3rem, 2.3vw, 1.85rem); margin-bottom: 16px; }
.niche-note p { color: var(--text-dim); font-size: clamp(0.96rem, 1.3vw, 1.06rem); line-height: 1.7; }
.niche-note--mini { margin-top: clamp(30px, 4vw, 48px); }
.niche-note--mini .hero__actions { margin-top: 24px; }

/* Причины: карточки с огромными номерами-призраками (приём planb) */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.reason {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.reason:hover {
  transform: translateY(-5px);
  border-color: rgba(198, 242, 78, 0.35);
  box-shadow: var(--shadow-lg);
}
.reason__num {
  position: absolute;
  right: 12px;
  top: -18px;
  font-family: var(--font-display);
  font-size: 5.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
  color: rgba(255, 255, 255, 0.045);
  transition: color 0.45s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.reason:hover .reason__num { color: rgba(198, 242, 78, 0.18); transform: translateY(5px); }
.reason h3 { position: relative; margin-bottom: 10px; font-size: 1.04rem; line-height: 1.3; }
.reason p { position: relative; color: var(--text-dim); font-size: 0.9rem; line-height: 1.62; }

/* Чек-лист «что должно быть на сайте» */
.must {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px) clamp(24px, 3.4vw, 52px);
}
.must__col { display: grid; gap: 16px; align-content: start; }
.must__col li {
  display: flex;
  gap: 12px;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.55;
}
.must__col b { color: var(--text); font-weight: 700; }
.check { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--lime); }

/* Тарифы на посадочной: без лишних полей, кнопка всегда внизу */
.plan .btn { margin-top: auto; }
.plan__price { margin: 18px 0 4px; }

/* Сетка проектов и ссылок внутри посадочной */
.rel-grid--stack { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rel--case { border-left: 2px solid rgba(198, 242, 78, 0.5); }
.niche-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}
.niche-links h4 { margin-bottom: 16px; color: var(--text-dim); }

/* Список отраслей */
.niche-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.niche-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.niche-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.niche-card:hover,
.niche-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(198, 242, 78, 0.4);
  box-shadow: var(--shadow-lg);
}
.niche-card:hover::after { left: 130%; }
.niche-card__name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.niche-card p { flex: 1 1 auto; color: var(--text-dim); font-size: 0.88rem; line-height: 1.55; }
.niche-card__more { display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-size: 0.82rem; font-weight: 700; }
.niche-card__more svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.niche-card:hover .niche-card__more svg { transform: translateX(4px); }

/* Лаймовая полоса-плакат с ghost-словом (прямой приём planb) */
.cta-band--lime {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background: linear-gradient(118deg, #e2ff86 0%, var(--lime) 44%, #a9e33d 100%);
  background-size: 170% 170%;
  animation: ctaDrift 14s ease-in-out infinite alternate;
  color: #101605;
  text-align: left;
}
.cta-band--lime::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
  animation: btnSheen 9s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ctaDrift {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-band--lime, .cta-band--lime::after { animation: none; }
  .cta-band--lime::after { content: none; }
}
.cta-band--lime h2 { color: #101605; }
.cta-band--lime p { max-width: 62ch; margin: 0 0 28px; color: rgba(16, 22, 5, 0.74); }
.cta-band--lime .cta-band__actions { justify-content: flex-start; }
.cta-band--lime .btn--primary {
  background: #101605;
  color: var(--lime);
  box-shadow: 0 18px 40px -20px rgba(16, 22, 5, 0.85);
}
.cta-band--lime .btn--primary:hover { box-shadow: 0 24px 50px -18px rgba(16, 22, 5, 0.9); }
.cta-band--lime .btn--ghost {
  border-color: rgba(16, 22, 5, 0.32);
  background: rgba(16, 22, 5, 0.06);
  color: #101605;
}
.cta-band--lime .btn--ghost:hover { background: rgba(16, 22, 5, 0.12); border-color: rgba(16, 22, 5, 0.5); }
.cta-band__inner { position: relative; z-index: 1; max-width: 760px; }
.cta-band__ghost {
  position: absolute;
  right: -1%;
  bottom: -18%;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 13vw, 10.5rem);
  font-weight: 800;
  line-height: 0.78;
  letter-spacing: -0.06em;
  color: rgba(16, 22, 5, 0.08);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Печатающаяся строка в шапке главной: перебирает ниши */
.hero__typer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: -2px 0 16px;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.9vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.typer { color: var(--lime); }
.typer__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: -4px;
  background: var(--lime);
  vertical-align: -0.14em;
  animation: typerCaret 1.05s steps(1) infinite;
}
@keyframes typerCaret { 50% { opacity: 0; } }

@media (max-width: 1024px) {
  .niche-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .niche-hero h1 { font-size: clamp(2rem, 6vw, 2.8rem); }
  .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niche-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niche-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .niche-hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .niche-hero__proof .hero__proof-item:last-child { grid-column: span 2; }
}
@media (max-width: 720px) {
  .ghost-word { display: none; }
  .reasons,
  .niche-grid,
  .must { grid-template-columns: minmax(0, 1fr); }
  .niche-note { border-left-width: 2px; }
  .cta-band__ghost { font-size: 26vw; bottom: -10%; }
  .cta-band--lime .cta-band__actions { justify-content: stretch; }
  .cta-band--lime .btn { width: 100%; }
  .hero__typer { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .typer__caret { animation: none; }
  .ghost-word { transform: none !important; }
}

/* Плашки отраслей на главной: 12 ссылок без карточек — быстро читаются */
.niche-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.niche-tags a {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
    border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.niche-tags a:hover,
.niche-tags a:focus-visible {
  transform: translateY(-2px);
  border-color: var(--lime);
  background: var(--lime);
  color: #101605;
}
.hero__typer { min-height: 1.7em; }

/* =========================================================================
   30. LIGHT THEME — главная страница
   Ориентир — planb.by: светлая «бумага», крупная чёрная типографика,
   белые карточки с мягкой тенью и лаймовый акцент. Тёмной остаётся только
   «рамка» — макет сайта в герое и лаймовая полоса со сметой.
   Класс включается точечно (body.theme-light), остальные страницы не тронуты.
   ========================================================================= */
body.theme-light {
  --bg: #f7f4ec;
  --bg-soft: #efece2;
  --surface: #ffffff;
  --surface-2: #f5f2ea;
  --text: #101114;
  --text-dim: #4b4d56;
  --text-faint: #6e7079;
  --line: rgba(16, 17, 20, 0.12);
  --line-strong: rgba(16, 17, 20, 0.26);
  --mint: #0f9b79;
  --shadow-lg: 0 26px 60px -34px rgba(23, 24, 30, 0.34);
  --glow-violet: 0 0 0 1px rgba(16, 17, 20, 0.07), 0 24px 60px -30px rgba(23, 24, 30, 0.28);
  background: var(--bg);
  color: var(--text);
}
body.theme-light ::selection { background: var(--lime); color: #101605; }
body.theme-light :focus-visible { outline-color: #1b7a5f; }
/* фиолетовое свечение и зерно рассчитаны на тёмный фон — на бумаге это грязь */
body.theme-light .aura,
body.theme-light .grain { display: none; }

body.theme-light .grad-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

/* --- шапка --------------------------------------------------------------- */
body.theme-light .header.is-stuck {
  background: rgba(247, 244, 236, 0.82);
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px) saturate(150%);
}
body.theme-light .header-socials a,
body.theme-light .nav__links a:hover,
body.theme-light .burger { background: rgba(16, 17, 20, 0.045); }
body.theme-light .header-socials a:hover { background: rgba(16, 17, 20, 0.09); }
body.theme-light .subnav {
  background: rgba(247, 244, 236, 0.88);
  border-top-color: rgba(16, 17, 20, 0.08);
  box-shadow: 0 18px 40px -34px rgba(23, 24, 30, 0.4);
}
body.theme-light .subnav__item:hover .subnav__link,
body.theme-light .subnav__item:focus-within .subnav__link,
body.theme-light .subnav__panel a:hover,
body.theme-light .subnav__panel a:focus-visible { background: rgba(16, 17, 20, 0.06); }
body.theme-light .subnav__panel {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(16, 17, 20, 0.1);
  box-shadow: 0 30px 70px -40px rgba(23, 24, 30, 0.45), inset 0 1px 0 #fff;
}
body.theme-light .mobile-menu {
  background: linear-gradient(180deg, rgba(247, 244, 236, 0.96), rgba(247, 244, 236, 0.99));
}

/* --- кнопки -------------------------------------------------------------- */
body.theme-light .btn--ghost {
  border-color: var(--line-strong);
  background: rgba(16, 17, 20, 0.04);
  color: var(--text);
}
body.theme-light .btn--ghost:hover {
  background: rgba(16, 17, 20, 0.09);
  border-color: rgba(16, 17, 20, 0.4);
}
body.theme-light .btn--ghost::before { background: radial-gradient(circle, rgba(198, 242, 78, 0.85), transparent 46%); }

/* --- герой --------------------------------------------------------------- */
body.theme-light .hero {
  background:
    radial-gradient(ellipse 62% 58% at 92% 2%, rgba(198, 242, 78, 0.34), transparent 68%),
    radial-gradient(ellipse 46% 44% at 2% 6%, rgba(124, 92, 255, 0.1), transparent 70%);
}
body.theme-light .hero::before {
  background-image:
    linear-gradient(rgba(16, 17, 20, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 17, 20, 0.055) 1px, transparent 1px);
}
body.theme-light .eyebrow {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text-dim);
}
body.theme-light .hero h1 em.grad-text {
  width: fit-content;
  max-width: 100%;
  padding-bottom: 0.06em;
  background: linear-gradient(90deg, #c6f24e, #a9e33d) 0 100% / 0% 0.16em no-repeat;
  animation: light-marker 0.9s 0.5s var(--ease-out) forwards;
}
@keyframes light-marker { to { background-size: 100% 0.16em; } }

body.theme-light .typer {
  padding: 0 0.14em;
  color: var(--text);
  background: linear-gradient(180deg, transparent 54%, #d8f77f 54%, #d8f77f 94%, transparent 94%);
}
body.theme-light .typer__caret { background: var(--text); }
body.theme-light .hero__proof svg { color: #1f9d6d; }

body.theme-light .orb {
  background:
    radial-gradient(circle at 32% 28%, rgba(198, 242, 78, 0.62), transparent 58%),
    radial-gradient(circle at 74% 76%, rgba(124, 92, 255, 0.18), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.75), transparent 72%);
}
body.theme-light .ring { border-color: rgba(16, 17, 20, 0.18); }
body.theme-light .ring--2 { border-color: rgba(16, 17, 20, 0.08); }
body.theme-light .ring--2::after {
  background: #101114;
  box-shadow: 0 0 0 4px rgba(198, 242, 78, 0.95);
}
body.theme-light .chip {
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
  box-shadow: 0 20px 44px -26px rgba(23, 24, 30, 0.45);
}
body.theme-light .chip--a i { background: rgba(15, 155, 121, 0.12); color: #0f9b79; }
body.theme-light .chip--b i { background: rgba(124, 92, 255, 0.12); color: #6a4bee; }
body.theme-light .chip--c i { background: rgba(214, 149, 22, 0.14); color: #a9740c; }
body.theme-light .device {
  border-color: rgba(16, 17, 20, 0.14);
  box-shadow: 0 40px 80px -42px rgba(23, 24, 30, 0.55);
}
body.theme-light .hero__stats { border-top-color: var(--line); }

/* круглый лаймовый стикер в герое */
.sticker {
  position: absolute;
  z-index: 4;
  top: -3%;
  right: 0;
  display: grid;
  place-items: center;
  width: clamp(84px, 10vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(140deg, #dcff8a, var(--lime) 55%, #a9e33d);
  box-shadow: 0 20px 44px -20px rgba(120, 160, 30, 0.75);
  animation: float 9s var(--ease) infinite;
}
.sticker__ring {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  animation: spin 26s linear infinite;
}
.sticker__core { grid-area: 1 / 1; z-index: 1; }
.sticker__ring text {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: #101605;
}
.sticker__core {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #101605;
}
@media (max-width: 1024px) { .sticker { width: 86px; right: 2%; } }
@media (max-width: 560px) { .sticker { width: 72px; top: -1%; right: 0; } .sticker__core { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .sticker, .sticker__ring { animation: none; } }

/* --- карточки ------------------------------------------------------------ */
body.theme-light .card,
body.theme-light .case,
body.theme-light .step,
body.theme-light .feature,
body.theme-light .promo-card,
body.theme-light .audit-card,
body.theme-light .express-form,
body.theme-light .about-photo,
body.theme-light .calc,
body.theme-light .pay-note,
body.theme-light .requisites,
body.theme-light .team-strip {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 20px 44px -38px rgba(23, 24, 30, 0.4);
}
body.theme-light .plan:not(.plan--featured) {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 20px 44px -38px rgba(23, 24, 30, 0.4);
}
body.theme-light .card:hover,
body.theme-light .case:hover,
body.theme-light .step:hover,
body.theme-light .feature:hover,
body.theme-light .plan:hover,
body.theme-light .promo-card:hover,
body.theme-light .promo-card:focus-visible {
  border-color: rgba(16, 17, 20, 0.24);
  box-shadow: 0 30px 60px -34px rgba(23, 24, 30, 0.42);
}
/* вместо градиентной рамки — лаймовая кромка, которая «выезжает» при наведении */
body.theme-light .card { isolation: isolate; }
body.theme-light .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: linear-gradient(90deg, #d9ff85, var(--lime), #a9e33d);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
  pointer-events: none;
}
body.theme-light .card:hover::before,
body.theme-light .card:focus-visible::before { transform: scaleX(1); }
body.theme-light .card:hover::after { opacity: 0; }
body.theme-light .case::before { opacity: 0.55; }
body.theme-light .case:hover::before { opacity: 0.9; }
body.theme-light .step:hover,
body.theme-light .plan:hover { box-shadow: 0 28px 56px -34px rgba(23, 24, 30, 0.42); }
body.theme-light .promo-card::before { opacity: 0.5; }
body.theme-light .promo-card::after { background: linear-gradient(105deg, transparent, rgba(16, 17, 20, 0.05), transparent); }
body.theme-light .promo-card:hover,
body.theme-light .promo-card:focus-visible { border-color: rgba(16, 17, 20, 0.24); }
body.theme-light .promo-card__foot b { color: #101114; }
body.theme-light .promo-card__icon { background: rgba(16, 17, 20, 0.05); }
body.theme-light .calc__result { background: #f7f5ee; border-color: var(--line); }
body.theme-light .audit-card__kind { background: rgba(16, 17, 20, 0.05); }
body.theme-light .stats-band,
body.theme-light .section--light .stats-band {
  --text: #101114;
  --text-dim: #4b4d56;
  --text-faint: #6e7079;
  color: var(--text);
  border-color: var(--line);
  background:
    radial-gradient(ellipse 60% 120% at 6% 0%, rgba(198, 242, 78, 0.32), transparent 62%),
    radial-gradient(ellipse 60% 120% at 96% 100%, rgba(124, 92, 255, 0.1), transparent 62%),
    #ffffff;
  box-shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 26px 60px -40px rgba(23, 24, 30, 0.4);
}

/* --- секции -------------------------------------------------------------- */
body.theme-light .section--light {
  border-top: 1px solid rgba(16, 17, 20, 0.06);
  --surface: #ffffff;
  --surface-2: #f5f2ea;
  --text: #101114;
  --text-dim: #4b4d56;
  --text-faint: #6e7079;
  --line: rgba(16, 17, 20, 0.12);
  --line-strong: rgba(16, 17, 20, 0.26);
  background: #ffffff;
  color: var(--text);
}
body.theme-light .section--light.section--gray {
  background: #f4f1e9;
  --surface: #ffffff;
  --surface-2: #faf8f2;
}
body.theme-light .section--light .eyebrow { background: rgba(16, 17, 20, 0.045); }
body.theme-light .section--light .btn--ghost { background: rgba(16, 17, 20, 0.04); }
body.theme-light .section--light .btn--ghost:hover { background: rgba(16, 17, 20, 0.09); border-color: rgba(16, 17, 20, 0.4); }
body.theme-light .section--light .stats-band { background: radial-gradient(ellipse 60% 120% at 6% 0%, rgba(198, 242, 78, 0.32), transparent 62%), #ffffff; }
body.theme-light .section--soft { background: linear-gradient(180deg, transparent, var(--bg-soft) 20%, var(--bg-soft) 80%, transparent); }

/* --- контакты / формы ---------------------------------------------------- */
body.theme-light .contact-wrap {
  border-color: var(--line);
  background:
    radial-gradient(ellipse 62% 120% at 94% 0%, rgba(198, 242, 78, 0.4), transparent 64%),
    linear-gradient(180deg, #ffffff, #f8f5ed);
  box-shadow: 0 30px 70px -46px rgba(23, 24, 30, 0.42);
}
body.theme-light .socials a { background: rgba(16, 17, 20, 0.045); }
body.theme-light .socials a:hover { background: rgba(16, 17, 20, 0.09); border-color: var(--line-strong); }
body.theme-light .contact-info__list svg { color: #0f9b79; }
body.theme-light .field input,
body.theme-light .field textarea,
body.theme-light .field select,
body.theme-light .phone-int__cc { background: rgba(16, 17, 20, 0.03); }
body.theme-light .field input:focus,
body.theme-light .field textarea:focus,
body.theme-light .field select:focus,
body.theme-light .phone-int__cc:hover,
body.theme-light .phone-int__cc[aria-expanded="true"] {
  border-color: rgba(16, 17, 20, 0.45);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.14), 0 18px 40px -32px rgba(23, 24, 30, 0.55);
}
body.theme-light .form__consent input { background: #fff; }
body.theme-light .form__consent input:checked { background: var(--lime); }
body.theme-light .form__consent input:checked::after { border-color: #101605; }
body.theme-light .phone-int__list { background: #fff; }
body.theme-light .phone-int__list li:hover,
body.theme-light .phone-int__list li[aria-selected="true"] { background: rgba(198, 242, 78, 0.35); }
body.theme-light .form__status.is-error { background: rgba(207, 45, 78, 0.08); color: #a3223f; }
body.theme-light .form__status.is-ok { background: rgba(15, 155, 121, 0.1); color: #0b6b52; }

/* --- подвал -------------------------------------------------------------- */
body.theme-light .footer { background: linear-gradient(180deg, transparent, var(--bg-soft)); }
body.theme-light .requisites div { border-bottom-color: rgba(16, 17, 20, 0.08); }
body.theme-light .requisites dd a { border-bottom-color: rgba(16, 17, 20, 0.2); }
body.theme-light .footer__partner img { opacity: 0.92; }

/* --- плавающие элементы -------------------------------------------------- */
body.theme-light .to-top,
body.theme-light .fab__btn {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  box-shadow: 0 18px 40px -24px rgba(23, 24, 30, 0.4);
}
body.theme-light .fab__btn:hover { background: #fff; }
body.theme-light .to-top:hover { background: var(--lime); color: #101605; border-color: transparent; }
body.theme-light .mobile-bar {
  background: rgba(247, 244, 236, 0.96);
  border-top-color: var(--line);
}
body.theme-light .cookie {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--line);
  box-shadow: 0 26px 60px -30px rgba(23, 24, 30, 0.35);
}
body.theme-light .cookie a { color: #0b6b52; }
body.theme-light .modal__backdrop { background: rgba(16, 17, 20, 0.42); }
body.theme-light .modal__panel {
  background:
    radial-gradient(ellipse 85% 90% at 100% 0%, rgba(198, 242, 78, 0.28), transparent 62%),
    #ffffff;
}
body.theme-light .modal__close:hover { background: rgba(16, 17, 20, 0.07); }
body.theme-light .modal__hint a { color: #0b6b52; }
body.theme-light .to-top:hover svg { color: #101605; }

@media (max-width: 720px) {
  body.theme-light .eyebrow,
  body.theme-light .btn--ghost { background: rgba(16, 17, 20, 0.05); }
  body.theme-light .chip { background: rgba(255, 255, 255, 0.96); }
}

/* =========================================================================
   31. ОБЛОЖКИ БЛОГА
   Каждая статья получает свою OG-картинку 1200×630 (tools/make_blog_covers.py):
   она же в карточке списка, она же в og:image и JSON-LD. Пропорции заданы
   явно, поэтому CLS не появляется, пока грузится файл.
   ========================================================================= */
.post-card { padding: 0; gap: 0; overflow: hidden; }
.post-card__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
}
.post-cover {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  overflow: hidden;
  box-shadow: 0 26px 60px -40px rgba(23, 24, 30, 0.45);
}
.post-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
body.theme-light .post-card { background: var(--surface); }
body.theme-light .post-card:hover { border-color: rgba(16, 17, 20, 0.24); box-shadow: 0 28px 56px -36px rgba(23, 24, 30, 0.4); }

/* --- компоненты внутренних страниц в светлой теме ------------------------- */
body.theme-light .case-hero { background: radial-gradient(ellipse 60% 50% at 88% 0%, rgba(198, 242, 78, 0.26), transparent 70%); }
body.theme-light .case-hero::before {
  background-image:
    linear-gradient(rgba(16, 17, 20, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 17, 20, 0.055) 1px, transparent 1px);
}
body.theme-light .case-hero__tags li { background: rgba(16, 17, 20, 0.04); }

/* тёмно-зелёная полоса CTA остаётся тёмной: текст в ней светлый */
body.theme-light .cta-band { color: #eef7ec; }
body.theme-light .cta-band h2 { color: #f4fbf2; }
body.theme-light .cta-band .btn--ghost { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #f4fbf2; }
body.theme-light .cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); }
body.theme-light .cta-band .btn--primary { color: #101605; }

body.theme-light .legal__wrap,
body.theme-light .post-body .table-wrap,
body.theme-light .table-wrap {
  background: var(--surface);
  border-color: var(--line);
}
body.theme-light .post-body blockquote {
  background: rgba(198, 242, 78, 0.16);
  border-color: #a9c94a;
  color: var(--text);
}
body.theme-light .post-body a { color: #0b6b52; }
body.theme-light .post-card__more { color: #0b6b52; }
body.theme-light .rel { background: var(--surface); border-color: var(--line); }
body.theme-light .rel:hover { border-color: rgba(16, 17, 20, 0.24); }
body.theme-light .post-meta { color: var(--text-faint); }

/* --- контраст на светлом: акценты для текста, тёмные рамки макетов -------- */
body.theme-light {
  --violet-ink: #5b37d6;
  --text-faint: #63656d;
  --mint: #0a6f56;
}
body.theme-light .subnav__panel a.subnav__panel-all,
body.theme-light .mobile-menu__all,
body.theme-light .mobile-menu__sub a.mobile-menu__sub-all,
body.theme-light .nav__dropdown-all a,
body.theme-light .audit-card__kind,
body.theme-light .work-block__num,
body.theme-light .work-blocks--steps .work-block.is-visible .work-block__num,
body.theme-light .calc__match-plan,
body.theme-light .feature__icon { color: var(--violet-ink); }
body.theme-light .team-avatar { color: #4a2fc0; }
/* лайм как текст на бумаге не читается — оставляем его только для плашек */
body.theme-light .outcome-box h3 { color: var(--text); }
body.theme-light .outcome-list li svg,
body.theme-light .check { color: var(--mint); }
body.theme-light .city-links a:hover,
body.theme-light .city-links a:focus-visible { color: var(--text); }
/* тёмные «экраны» (макет в герое, превью проектов) сохраняют светлый текст */
body.theme-light .device,
body.theme-light .case__shot {
  --text: #ecedf4;
  --text-dim: #b9bacb;
  --text-faint: #a9aabb;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  color: var(--text);
}

/* --- точечные контрастные исправления ------------------------------------ */
body.theme-light .about-photo__badge {
  --text: #f2f3f8;
  --text-faint: #c3c4d2;
  --line-strong: rgba(255, 255, 255, 0.26);
  color: var(--text);
}
body.theme-light .about-photo__badge b { color: #f2f3f8; }
body.theme-light .about-photo__badge span { color: #c3c4d2; }

/* лайм и янтарь как цвет текста на бумаге не читаются */
body.theme-light .hero__proof-item b,
body.theme-light .niche-card__more { color: var(--text); }
body.theme-light .niche-card:hover .niche-card__more { color: var(--mint); }
body.theme-light .price-split__col--out h3 { color: #8a5200; }
body.theme-light .price-split__col--out li::before { color: #8a5200; border-color: rgba(138, 82, 0, 0.45); }
body.theme-light .ba--before .ba__label { color: #a3243f; }
body.theme-light .ba--after .ba__label { color: #0b6b52; }
body.theme-light .card:nth-child(4) .card__icon { color: #8a5200; }

/* лаймовая полоса: тёмный текст и тёмная кнопка, как в исходной теме */
body.theme-light .cta-band--lime { color: #101605; }
body.theme-light .cta-band--lime h2 { color: #101605; }
body.theme-light .cta-band--lime .btn--primary { color: var(--lime); background: #101605; }
body.theme-light .cta-band--lime .btn--primary:hover { color: var(--lime); }
body.theme-light .cta-band--lime .btn--ghost { color: #101605; border-color: rgba(16, 22, 5, 0.35); background: rgba(16, 22, 5, 0.06); }
body.theme-light .cta-band--lime .btn--ghost:hover { background: rgba(16, 22, 5, 0.14); border-color: rgba(16, 22, 5, 0.55); }

/* --- график в блоке результата (страницы кейсов) -------------------------- */
.chart {
  margin-top: clamp(18px, 2vw, 26px);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
}
.section--light .chart { background: rgba(16, 17, 20, 0.02); }
.chart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 18px;
}
.chart__head b { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.02em; }
.chart__head span { color: var(--text-faint); font-size: 0.76rem; }
.chart__bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 16px);
  align-items: end;
  height: clamp(140px, 18vw, 200px);
}
.chart__bar { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; }
.chart__bar i {
  display: block;
  align-self: end;
  width: 100%;
  height: 0;
  border-radius: 9px 9px 5px 5px;
  background: var(--grad);
  opacity: 0.92;
  transition: height 0.9s var(--ease-out);
}
.chart.is-visible .chart__bar i { height: var(--v); }
.chart__bar span { color: var(--text-faint); font-size: 0.72rem; text-align: center; }

/* Проект без опубликованного домена: статус вместо ссылки «Открыть сайт» */
.case-hero__offline { opacity: 0.72; cursor: default; }

@media (max-width: 560px) {
  .chart__bars { gap: 6px; }
  .chart__bar span { font-size: 0.64rem; }
}

/* --- раздел «Бухгалтерские программы» (страница услуги) ------------------- */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.program-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), var(--surface);
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}
.program-card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.program-card__tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(124, 92, 255, 0.14);
  color: var(--violet);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.program-card h3 { font-size: 1.18rem; letter-spacing: -0.02em; }
.program-card p { color: var(--text-dim); font-size: 0.94rem; }
.program-card ul { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.program-card li {
  position: relative;
  padding-left: 22px;
  color: var(--text-faint);
  font-size: 0.86rem;
  line-height: 1.5;
}
.program-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--grad);
}
.section--light .program-card__tag { background: rgba(91, 55, 214, 0.1); color: #5b37d6; }
body.theme-light .program-card__tag { background: rgba(91, 55, 214, 0.1); color: var(--violet-ink); }

@media (max-width: 560px) {
  .programs-grid { grid-template-columns: 1fr; }
}

/* --- знак в логотипе: код-шеврон с мигающим кареткой --------------------- */
.logo__mark svg { width: 19px; height: 19px; }
.logo__caret { animation: logoBlink 1.5s steps(1) infinite; }
@keyframes logoBlink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .logo__caret { animation: none; } }

/* Длинные слова в заголовках («администрирование», «электромобилей») не
   должны растягивать колонку: сначала перенос по слогам, затем жёсткий
   перенос — иначе на 390px появляется горизонтальная прокрутка. */
/* Заголовки не переносим по слогам: «Разрабаты-ваем» и «руково-дитель»
   посреди фразы читаются как ошибка вёрстки. Длинное слово всё равно
   разорвётся, но только если совсем не влезает (break-word, без дефиса). */
h1, h2, h3, h4 { hyphens: manual; overflow-wrap: break-word; }

/* --- скриншот программы в браузерной рамке (страницы программ) ------------ */
.prog-shot { margin: clamp(26px, 3.4vw, 44px) 0 0; }
.prog-shot figcaption {
  margin-top: 12px;
  color: var(--text-faint);
  font-size: 0.78rem;
  text-align: center;
}
.prog-shot .device--desktop { display: block; }
.prog-shot .device__screen { aspect-ratio: 16 / 10; }
.prog-shot .device__screen img { object-fit: cover; object-position: top center; }

/* ссылка «Подробнее» в карточке программы на странице услуги */
.program-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--violet);
  font-size: 0.88rem;
  font-weight: 600;
}
.program-card__more svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.program-card__more:hover svg { transform: translateX(4px); }
.section--light .program-card__more { color: #5b37d6; }
body.theme-light .program-card__more { color: var(--violet-ink); }

/* --- чек-лист и цена в разделе «Сайт для вашей отрасли» (главная) --------- */
.niche-check {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: start;
  margin-bottom: clamp(26px, 3vw, 40px);
}
.niche-check .outcome-box { margin-top: 0; }
.niche-price {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(198, 242, 78, 0.16), transparent 62%),
    var(--surface);
}
.niche-price__label {
  color: var(--text-faint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.niche-price b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.niche-price__term { color: var(--text-dim); font-size: 0.86rem; }
.niche-price p { color: var(--text-faint); font-size: 0.84rem; line-height: 1.55; }
.niche-price .btn { justify-self: start; margin-top: 8px; }
@media (max-width: 900px) {
  .niche-check { grid-template-columns: 1fr; }
}

/* Карточки отраслей: чек-лист + цена на каждой */
.home-niche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  margin-bottom: clamp(26px, 3vw, 40px);
}
.home-niche-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--surface);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Баннер отрасли — рисованная SVG-обложка (tools/build_niche_banners.py).
   Раньше здесь лежал скриншот чужого сайта с вуалью: текст терялся на мелких
   деталях, а сами скриншоты устаревали. Теперь это полоса-обложка в верхней
   части карточки: своя иконка и цвет на каждую нишу, текст — на чистой бумаге. */
.home-niche-card__bg {
  position: relative;
  z-index: 0;
  display: block;
  /* flex: none — иначе как flex-элемент обложка сжимается под высоту текста */
  flex: none;
  height: clamp(112px, 26vw, 132px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: transform 0.7s var(--ease);
  pointer-events: none;
}
/* Мягкий стык обложки с карточкой: без резкой линии по низу баннера */
.home-niche-card__bg::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none;
}
.home-niche-card:hover .home-niche-card__bg { transform: scale(1.04); }
.home-niche-card::before {
  content: "";
  position: absolute;
  inset: -60% -20% auto;
  height: 130%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.38), transparent 70%);
  opacity: 0;
  transform: translateY(-40%);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.home-niche-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease);
  pointer-events: none;
}
.home-niche-card:hover {
  transform: translateY(-5px);
  border-color: rgba(124, 92, 255, 0.45);
  box-shadow: rgba(0, 0, 0, 0.75) 0 26px 54px -34px, rgba(124, 92, 255, 0.28) 0 0 0 1px;
}
.home-niche-card:hover::before { opacity: 0.6; transform: translateY(0); }
.home-niche-card:hover::after { left: 130%; }
.home-niche-card > a {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 26px);
}
/* Карточка отрасли на /otrasli/: та же обложка, но со скруглением внутри
   отступа — у этой карточки padding живёт на самой ссылке. */
.niche-card__bg {
  display: block;
  flex: none;
  height: clamp(96px, 22vw, 112px);
  margin-bottom: 2px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center;
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
.niche-card--banner {
  padding-top: clamp(14px, 1.6vw, 18px);
}
.niche-card--banner:hover .niche-card__bg { transform: scale(1.03); }
.niche-card__cat {
  color: var(--text-faint);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.home-niche-card h3 {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.niche-card__list { display: grid; gap: 7px; }
.niche-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.45;
}
.niche-card__list svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 3px;
  color: var(--mint);
}
.niche-card__foot {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.niche-card__foot b {
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.niche-card__term { color: var(--text-faint); font-size: 0.74rem; }
.niche-card__foot .arrow {
  align-self: center;
  margin-left: auto;
  color: var(--text-faint);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.home-niche-card:hover .niche-card__foot .arrow { transform: translateX(4px); color: var(--text); }
.home-niche-card:focus-within { border-color: rgba(124, 92, 255, 0.45); }
@media (max-width: 560px) {
  .home-niche-grid { grid-template-columns: 1fr; }
}
body.theme-light .home-niche-card {
  background: var(--surface);
  box-shadow: rgba(16, 17, 20, 0.04) 0 1px 2px, rgba(23, 24, 30, 0.4) 0 20px 44px -38px;
}
body.theme-light .home-niche-card:hover {
  border-color: rgba(16, 17, 20, 0.24);
  box-shadow: rgba(23, 24, 30, 0.42) 0 30px 60px -34px;
}
body.theme-light .home-niche-card::after { background: linear-gradient(105deg, transparent, rgba(16, 17, 20, 0.05), transparent); }

/* -------------------------- Стильные формы и эффекты -------------------------- */
/* Голс-карточка формы заявки в блоке контактов */
#leadForm {
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 34px 80px -58px rgba(0, 0, 0, 0.95);
}
body.theme-light #leadForm {
  border-color: rgba(16, 17, 20, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  box-shadow: rgba(23, 24, 30, 0.28) 0 30px 70px -52px;
}
#leadForm .field > label,
.express-form .field > label,
.brief-layout .field > label {
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#leadForm .field input,
#leadForm .field select,
.express-form .field input,
.express-form .field select { background-color: rgba(255, 255, 255, 0.06); }
body.theme-light #leadForm .field input,
body.theme-light #leadForm .field select,
body.theme-light .express-form .field input,
body.theme-light .express-form .field select { background-color: rgba(16, 17, 20, 0.035); }

/* Бегущий блик по основной кнопке */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 45%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  animation: btnSheen 5.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes btnSheen {
  0%, 62% { left: -75%; }
  100% { left: 135%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { animation: none; content: none; }
}

/* Анимированная градиентная рамка у тарифа «Выбирают чаще» */
@property --ang {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.plan--featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ang), rgba(124, 92, 255, 0.95), rgba(43, 232, 184, 0.95), rgba(198, 242, 78, 0.95), rgba(124, 92, 255, 0.95));
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: angSpin 7s linear infinite;
  pointer-events: none;
}
@keyframes angSpin { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .plan--featured::before { animation: none; }
}

/* Тонкая разделительная линия с градиентом под заголовками секций */
.section-head::after {
  content: "";
  display: block;
  width: clamp(64px, 8vw, 110px);
  height: 3px;
  margin-top: 22px;
  border-radius: 999px;
  background: var(--grad);
  opacity: 0.85;
}
.section-head--center::after { margin-inline: auto; }

/* Мягкий свет за заголовком секции — глубина без лишних рамок */
.section-head {
  position: relative;
  isolation: isolate;
}
.section-head::before {
  content: "";
  position: absolute;
  left: -12%;
  top: -55%;
  width: 72%;
  height: 210%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.18), transparent 72%);
  pointer-events: none;
}
.section-head--center::before { left: 14%; width: 72%; }
.section--light .section-head::before {
  background: radial-gradient(closest-side, rgba(198, 242, 78, 0.42), transparent 72%);
}
body.theme-light .section-head::before {
  background: radial-gradient(closest-side, rgba(198, 242, 78, 0.55), transparent 72%);
}
body.theme-light .section--light .section-head::before {
  background: radial-gradient(closest-side, rgba(124, 92, 255, 0.16), transparent 72%);
}

/* =========================================================================
   32. ОТЗЫВЫ — страница otzyvy.html
   Карточки собираются из tools/reviews.py: реальные цитаты, подпись, ссылка на
   проект. Пока список пуст, вместо карточек стоит честная заглушка с составом
   будущей карточки — выдуманных отзывов на странице нет и быть не должно.
   ========================================================================= */
.reviews-hero__count {
  margin-top: 22px;
  color: var(--text-faint);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 20px);
}
.review-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.review-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.review-card__stars {
  color: var(--amber);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  line-height: 1;
}
.review-card__date,
.review-card__meta { color: var(--text-faint); font-size: 0.78rem; }
.review-card__text {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1 1 auto;
}
.review-card__text p {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}
.review-card__foot {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review-card__who { display: grid; gap: 2px; }
.review-card__who b {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.review-card__who span { color: var(--text-faint); font-size: 0.82rem; }
.review-card__links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.review-card__links a {
  color: var(--text-dim);
  font-size: 0.84rem;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.review-card__links a:hover,
.review-card__links a:focus-visible { color: var(--text); }

/* Пустое состояние: место под реальные цитаты, без примеров-обманок */
.reviews-empty {
  padding: clamp(26px, 3.4vw, 44px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.reviews-empty h2 { margin-bottom: 14px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.reviews-empty .lead { max-width: 64ch; }
.reviews-empty__label {
  margin: clamp(22px, 3vw, 30px) 0 12px;
  color: var(--text-faint);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.reviews-empty__spec {
  display: grid;
  gap: 10px;
  max-width: 74ch;
}
.reviews-empty__spec li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--text-dim);
  font-size: 0.93rem;
  line-height: 1.55;
}
.reviews-empty__spec li b { color: var(--text); font-weight: 600; }
.reviews-empty__spec svg {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 3px;
  color: var(--mint);
}
.reviews-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 32px);
}

/* Поля формы отзыва */
.field__hint { color: var(--text-faint); font-size: 0.76rem; line-height: 1.45; }
/* Ловушка для ботов: поле есть в разметке, но не для людей */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.form__note {
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

body.theme-light .review-card { background: #fff; box-shadow: 0 20px 50px -44px rgba(23, 24, 30, 0.5); }
body.theme-light .review-card__stars { color: #a9740c; }
body.theme-light .reviews-empty {
  background: #fff;
  border-color: rgba(16, 17, 20, 0.28);
}
body.theme-light .reviews-empty__spec svg { color: #0f9b79; }

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