/* ========================================================================
   ABD demo — white-base hybrid
   Палитра: белая база, дарк-текст, кислотный акцент только заливкой.
   ===================================================================== */

:root {
  --bg:        #ffffff;
  --bg-soft:   #f4f4f3;
  --ink:       #0e0e0e;
  --ink-2:     #5a5a58;
  --ink-3:     #8a8a86;
  --line:      #e6e6e3;
  --acid:      #c9f534;     /* кислотно-зелёный из КП */
  --acid-deep: #b6e21f;
  --dark:      #0e0e0e;     /* тёмные якорные секции */
  --dark-soft: #1a1a1a;
  --dark-line: #2a2a2a;
  --radius:    22px;
  --radius-sm: 14px;
  --maxw:      1180px;
  --pad:       clamp(20px, 5vw, 64px);
  --ez:        cubic-bezier(.16, 1, .3, 1);        /* плавный выход (wibify) */
  --ez-io:     cubic-bezier(.65, 0, .35, 1);       /* плавный in-out (схлопывание хедера) */
  --ez-spring: cubic-bezier(.34, 1.56, .64, 1);    /* пружинный доводчик */
  font-synthesis: none;
}
@property --ga { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Geologica', 'Manrope', system-ui, sans-serif; line-height: 1.02; letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.hl { color: var(--acid); }
/* акцентное слово на СВЕТЛОМ фоне: кислотный маркер + тёмный текст (зелёным по белому не пишем) */
/* подложка-маркер занимает не всю высоту строки (ниже em-бокса), чтобы при
   плотном межстрочном не наезжать на строку выше — рисуем фон псевдоэлементом */
.hl-mark {
  position: relative; color: var(--ink); padding: 0 .14em; isolation: isolate;
}
.hl-mark::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0;
  top: .14em; bottom: .14em; background: var(--acid); border-radius: 6px;
}
.muted { color: var(--ink-3); }
.section-dark .muted { color: #5e5e5e; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; line-height: 1;
  padding: 18px 28px; border-radius: 100px;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--acid); color: var(--ink); }
.btn-accent:hover { background: var(--acid-deep); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }

/* ========================================================================
   HEADER
   ===================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.logo { display: inline-flex; align-items: center; position: relative; }
.logo img { height: 24px; width: auto; display: block; }
/* Лого в хедере = морф. В покое виден его первый кадр (статичная картинка logo-morph-still),
   на ПК сверху canvas, который анимируется при наведении (вперёд) и уводе (назад).
   Спрайт/кадр с альфой → фона нет на любом фоне; на тёмном хедере перекрашиваем в белое. */
/* ×1,3 к прежним 54px; сдвиг влево компенсирует прозрачные поля кадра —
   видимый глиф встаёт к краю контейнера, в один вертикальный с текстом ниже.
   Поля сверху/снизу прозрачны → бокс 70px выходит за 66px-хедер незаметно. */
.logo { margin-left: -10px; }
.logo .logo-png { height: 70px; width: 70px; display: block; transition: opacity .16s ease; }
.logo .logo-morph {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 70px; width: 70px; opacity: 0; pointer-events: none;
  transition: opacity .16s ease;
}
html.hdr-dark .logo .logo-png,
html.hdr-dark .logo .logo-morph { filter: brightness(0) invert(1); }  /* белое лого на тёмном хедере */
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-weight: 600; font-size: 15px; color: var(--ink-2); transition: color .35s var(--ez); }
.nav a:hover { color: var(--ink); }
.nav .nav-cta {
  color: var(--ink); border: 1.5px solid var(--ink); padding: 9px 18px; border-radius: 100px;
}
/* старый ховер кнопки-с-рамкой нужен только мобильной шапке (≤880); на десктопе CTA = текст-трафарет,
   а шоткат background сбрасывал бы background-clip:text в сплошную плашку (Safari). */
@media (max-width: 880px) { .nav .nav-cta:hover { background: var(--ink); color: #fff; } }

/* --- Сворачивающийся хедер (ПК): пункты схлопываются к лого, кнопка-раскрытие + панель.
   .nav-links на мобиле = display:contents (прозрачна) → бургер-оверлёй без изменений. --- */
.nav-links { display: contents; }

/* регистрируемое свойство для перелива CTA (надёжно перерисовывается каждый кадр,
   в отличие от анимации background-position на background-clip:text) */
@property --shinePos { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

@media (min-width: 881px) {   /* хедер: десктоп-навигация от 881px, ниже — бургер (тесно для 6 пунктов) */
  .header-inner { position: relative; }
  .nav { flex: 1; }                                  /* nav занимает свободную ширину */
  .nav .nav-cta { margin-left: auto; }               /* CTA прижата вправо, рядом с RU·EN */
  .nav-links {
    display: flex; align-items: center; gap: 28px; overflow: hidden;
    margin-left: 36px;                     /* отступ от лого */
    max-width: var(--nav-w, 640px);
    transition: max-width .6s var(--ez-io), opacity .5s var(--ez-io), margin-left .6s var(--ez-io);
  }
  .nav-links a { white-space: nowrap; flex-shrink: 0; }   /* пункты не переносятся и не сжимаются */
  html.hdr-collapsed .nav-links { max-width: 0; opacity: 0; margin-left: 0; pointer-events: none; }

  /* кнопка-раскрытие (три точки) — абсолютно у лого, вне потока (не двигает текст) */
  .nav-expand {
    position: absolute; top: 50%; left: var(--btn-left, 70px);
    transform: translateY(-50%) scale(.8);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    width: 38px; height: 38px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.05); cursor: pointer;
    opacity: 0; pointer-events: none;
    transition: opacity .4s var(--ez-io), transform .4s var(--ez-io), background .2s var(--ez);
  }
  .nav-expand:hover { background: rgba(0,0,0,.1); }
  .nav-expand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .nav-expand span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
  html.hdr-dark .nav-expand { background: rgba(255,255,255,.14); }
  html.hdr-dark .nav-expand span { background: #fff; }
  html.hdr-collapsed .nav-expand { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }

  /* панель меню + ресурсы */
  .nav-panel {
    position: absolute; top: calc(100% + 10px); left: 0; width: 300px;
    background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.16);
    padding: 22px 24px;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .28s var(--ez), transform .28s var(--ez), visibility .28s;
  }
  html.nav-panel-open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-panel .np-links { display: flex; flex-direction: column; gap: 14px; }
  .nav-panel .np-links a {
    font-family: 'Geologica', sans-serif; font-weight: 600; font-size: 21px; color: var(--ink);
    text-decoration: none; width: fit-content;
    background-image: linear-gradient(var(--acid), var(--acid)); background-repeat: no-repeat;
    background-position: 0 100%; background-size: 0% 3px; transition: background-size .3s var(--ez);
  }
  .nav-panel .np-links a:hover { background-size: 100% 3px; }
  .nav-panel .np-res { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.1); }
  .nav-panel .np-res-h {
    font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 12px;
  }
  .nav-panel .np-res a {
    display: block; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none;
    margin-bottom: 9px; width: fit-content;
    background-image: linear-gradient(var(--acid), var(--acid)); background-repeat: no-repeat;
    background-position: 0 100%; background-size: 0% 2px; transition: background-size .3s var(--ez);
  }
  .nav-panel .np-res a:hover { background-size: 100% 2px; }
  .nav-panel .np-res-note { display: block; margin-top: 6px; font-size: 10.5px; line-height: 1.4; color: var(--ink-3); opacity: .8; }

  /* CTA «Обсудить проект» — текст с бегущим бликом (без рамки-кнопки), на линии меню.
     Тёмный хедер: зелёный текст + белый блик. Светлый: тёмный текст + зелёный блик.
     top:3px / .lang-switch top:4px — посадка на базовую линию пунктов меню. */
  .nav .nav-cta {
    border: 0 !important; padding: 0 !important; background-color: transparent !important; border-radius: 0 !important;
    position: relative; top: 3px; font-weight: 700;
    background-size: 250% 100%; background-position: var(--shinePos) 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent !important; color: transparent;
    animation: ctaShine 2.4s linear infinite; transition: filter .3s ease; will-change: --shinePos;
  }
  html.hdr-dark .nav .nav-cta {
    background-image: linear-gradient(100deg, var(--acid) 0%, var(--acid) 40%, #fff 48%, #fff 52%, var(--acid) 60%, var(--acid) 100%);
  }
  html:not(.hdr-dark) .nav .nav-cta {
    background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 40%, var(--acid) 47%, #7fb000 50%, var(--acid) 53%, var(--ink) 60%, var(--ink) 100%);
  }
  /* Ховер = ТОЛЬКО свечение. Анимацию переливания НЕ трогаем (никаких background/animation-duration на
     ховере), иначе блик замирает. От плашки спасает не re-assert трафарета, а то, что старый шоткат
     `background:var(--ink)` уведён на мобилку (~стр.110) и `background` убран из transition кнопки (стр. ниже). */
  .nav .nav-cta:hover { text-shadow: 0 0 9px rgba(201,245,52,.55); }
  .lang-switch { position: relative; top: 4px; }
  @keyframes ctaShine { from { --shinePos: 0%; } to { --shinePos: 250%; } }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-expand, .nav-panel, .nav-panel a { transition: none; }
}

/* reduced-motion: без бега блика — ровный читаемый цвет CTA */
@media (min-width: 881px) and (prefers-reduced-motion: reduce) {
  .nav .nav-cta { animation: none; background: none !important; -webkit-text-fill-color: var(--acid) !important; }
  html:not(.hdr-dark) .nav .nav-cta { -webkit-text-fill-color: var(--ink) !important; }
}

@media (max-width: 880px) {
  .nav-expand, .nav-panel { display: none !important; }   /* ≤880 — только бургер, ⋮/панель скрыты */
}

/* ========================================================================
   1. HERO
   ===================================================================== */
.hero { position: relative; padding: 0; }
.hero-main {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: clamp(560px, 82vh, 760px);
  padding-top: clamp(104px, 12vw, 150px); padding-bottom: clamp(40px, 6vw, 80px);
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 58%, var(--dark) 100%);
}
.hero-main > .container { position: relative; z-index: 3; width: 100%; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(130% 90% at 30% 30%, rgba(255,255,255,.34), rgba(255,255,255,.08) 70%),
    rgba(255,255,255,.10);
}
/* мягкие фейды: сверху в светлый (уходит под хедер, без зазора), снизу в чёрный (сливается со следующим блоком) */
.hero-main::before, .hero-main::after { content: ''; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; }
.hero-main::before { top: 0; height: clamp(90px, 14vh, 150px); background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.6) 38%, rgba(255,255,255,0) 100%); }
.hero-main::after  { bottom: 0; height: clamp(140px, 24vh, 230px); background: linear-gradient(to top, var(--dark) 0%, rgba(14,14,14,.55) 42%, rgba(14,14,14,0) 100%); }
.hero-card {
  position: relative; z-index: 3; max-width: 660px; isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,.50), rgba(255,255,255,.30));
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  backdrop-filter: blur(30px) saturate(190%);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 28px; padding: clamp(26px, 3.2vw, 50px);
  box-shadow:
    0 30px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -14px 34px rgba(255,255,255,.12);
}
/* глянцевый блик «жидкого стекла» — под текстом */
.hero-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(135% 95% at 16% -12%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%);
}
.hero-card > * { position: relative; }
.hero-card .hero-sub { max-width: none; color: #2e2e2c; }
.hero-card .hero-metrics { margin-top: 32px; }

.hero-trust {
  position: relative; z-index: 2; background: var(--bg);
  border-top: 1px solid var(--line); padding-block: clamp(20px, 2.6vw, 30px);
}
.hero-trust .logos-label { margin-bottom: 14px; }

/* --- живой коллаж креативов на фоне --- */
.hero-collage {
  position: absolute; inset: -40px 0; z-index: 0; pointer-events: none;
  display: flex; gap: 16px; padding-inline: 8px; justify-content: center;
}
.collage-col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.collage-col__inner { display: flex; flex-direction: column; gap: 16px; will-change: transform; animation: collage-up 55s linear infinite; }
.collage-col:nth-child(even) .collage-col__inner { animation-name: collage-down; }
.collage-col__inner img {
  width: 100%; height: auto; border-radius: 16px; display: block;
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
}
@keyframes collage-up   { from { transform: translateY(0); }      to { transform: translateY(-50%); } }
@keyframes collage-down { from { transform: translateY(-50%); }   to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .collage-col__inner { animation: none; }
}
.eyebrow {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 26px;
}
.hero-title {
  font-weight: 600; font-size: clamp(28px, 4vw, 46px); letter-spacing: -0.025em;
  line-height: 1.06;
}
.hero-sub {
  margin-top: 28px; max-width: 560px; font-size: clamp(17px, 2.2vw, 20px);
  color: var(--ink-2); line-height: 1.5;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero-metrics { display: flex; flex-wrap: wrap; gap: clamp(28px, 6vw, 64px); margin-top: 56px; }
.metric b { display: block; font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; }
.metric span { color: var(--ink-2); font-size: 14px; font-weight: 600; }

.hero-logos { margin-top: 52px; border-top: 1px solid var(--line); padding-top: 26px; }
.logos-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 16px; }
.trust-row {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 26px; row-gap: 12px;
}
.trust-row span {
  font-family: 'Geologica', sans-serif; font-weight: 700; font-size: clamp(15px, 1.7vw, 19px);
  letter-spacing: -0.01em; color: #b3b3b0;
  transition: color .15s ease; position: relative;
}
.trust-row span:not(:last-child)::after {
  content: ''; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 50%; background: #d4d4d1;
}
.trust-row span:hover { color: var(--ink); }

/* ========================================================================
   Общие секции
   ===================================================================== */
section { padding-block: clamp(72px, 10vw, 140px); }
.section-eyebrow {
  font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.section-title { font-weight: 600; font-size: clamp(26px, 3.6vw, 42px); letter-spacing: -0.025em; }
.section-lead { margin-top: 20px; max-width: 580px; font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); }

/* тёмные якорные секции */
.section-dark { background: var(--dark); color: #fff; }
.section-dark .section-eyebrow { color: #7a7a7a; }
.section-dark .section-title { color: #fff; }
.section-dark .section-lead { color: #b0b0b0; }

/* ========================================================================
   2. ЗНАКОМО? (боль)
   ===================================================================== */
.pain .section-lead { margin-bottom: 48px; }
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pain-card {
  background: var(--dark-soft); border: 1px solid var(--dark-line); border-radius: var(--radius);
  padding: 32px clamp(24px, 3vw, 38px);
}
.pain-num { font-family: 'Geologica', sans-serif; font-weight: 800; font-size: 15px; color: var(--acid); }
.pain-card h3 { margin: 14px 0 10px; font-weight: 600; font-size: clamp(18px, 2vw, 22px); color: #fff; }
.pain-card p { color: #a8a8a8; font-size: 16px; }

/* ========================================================================
   3.5 AI В РАБОТЕ (тёмная секция)
   ===================================================================== */
.ai .section-lead { margin-bottom: 48px; }
.ai-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ai-card {
  background: var(--dark-soft); border: 1px solid var(--dark-line); border-radius: var(--radius);
  padding: 30px clamp(22px, 2.4vw, 32px); transition: border-color .18s ease, transform .18s ease;
}
.ai-card:hover { border-color: var(--acid); transform: translateY(-3px); }
.ai-card h3 {
  font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(19px, 2vw, 22px);
  color: #fff; margin-bottom: 10px;
}
/* логотипы нейросетей — единый монохром, зеленеют на ховере (как раньше ✦) */
.ai-logo { display: block; height: 28px; margin-bottom: 20px; color: #c8c8c8; transition: color .18s ease; }
.ai-logo svg { height: 100%; width: auto; display: block; }
.ai-card:hover .ai-logo { color: var(--acid); }
.ai-card p { color: #a8a8a8; font-size: 15.5px; }

/* ========================================================================
   3. УСЛУГИ
   ===================================================================== */
.services .section-lead { margin-bottom: 48px; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card {
  background: var(--bg-soft); border-radius: var(--radius); padding: 32px clamp(24px, 2.4vw, 34px);
  display: flex; flex-direction: column; min-height: 230px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.service-card--extra { background: var(--acid); }
.service-num { font-family: 'Geologica', sans-serif; font-weight: 800; font-size: 15px; color: var(--ink-3); }
.service-card--extra .service-num { color: var(--ink); }
.service-card h3 { margin: 16px 0 4px; font-weight: 600; font-size: clamp(19px, 2.1vw, 23px); }
.service-tagline { font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.service-card--extra .service-tagline { color: #4a5a10; }
.service-desc { margin-top: 16px; color: var(--ink-2); font-size: 15.5px; }
.service-card--extra .service-desc { color: #2c3406; }

/* ========================================================================
   4. КЕЙСЫ
   ===================================================================== */
/* Избранные кейсы на главной — компактные плитки (.case-tile), 3 в ряд на ПК */
.cases-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: 52px; }
@media (max-width: 940px) { .cases-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cases-list { grid-template-columns: 1fr; } }
.case-card {
  display: grid; grid-template-columns: 42% 1fr; gap: clamp(20px, 3vw, 44px);
  background: var(--bg-soft); border-radius: var(--radius); overflow: hidden; align-items: stretch;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 6px 20px rgba(0,0,0,.05), 0 26px 56px -26px var(--glow, rgba(0,0,0,.18));
}
/* у карточек кейсов — цветной ореол от обложки, без кислотного канта */
.case-card::before { content: none; }
/* кнопка «Все кейсы →» под избранным */
.cases-more { margin-top: clamp(34px, 4vw, 48px); display: flex; justify-content: center; }
/* плитки кейсов ниже прежних карточек → ужимаем низ блока и верх «Бренды», иначе провал под кнопкой «Все кейсы» */
.cases { padding-bottom: clamp(40px, 5vw, 72px); }
.proof { padding-top: clamp(48px, 6vw, 88px); }
.case-media {
  min-height: 320px; position: relative; background: var(--bg-soft); overflow: hidden;
}
.case-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
}
.case-body { padding: clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px) clamp(26px, 3vw, 44px) 0; display: flex; flex-direction: column; }
.case-kicker { font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.case-title { margin: 14px 0 18px; font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); }
.case-desc { color: var(--ink-2); font-size: 16px; }
.case-desc b { color: var(--ink); }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.case-tags span {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 100px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
}
.case-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
.case-stats div { display: flex; flex-direction: column; }
.case-stats b { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(18px, 2.2vw, 24px); letter-spacing: -0.02em; line-height: 1; }
.case-stats span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-top: 5px; }
.case-link { margin-top: auto; padding-top: 24px; font-weight: 800; font-size: 16px; width: fit-content;
  background-image: linear-gradient(var(--acid), var(--acid)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0% 3px; transition: background-size .32s var(--ez); }
.case-link:hover { background-size: 100% 3px; }
/* вся карточка кликабельна (stretched link) */
.case-card { cursor: pointer; transition: transform .45s var(--ez-spring), box-shadow .35s var(--ez); }
.case-card:hover { transform: translateY(-5px); box-shadow: 0 10px 26px rgba(0,0,0,.07), 0 44px 84px -22px var(--glow, rgba(0,0,0,.24)); }
.case-card .case-link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.case-card:hover .case-link { background-size: 100% 3px; }

/* ========================================================================
   5. SOCIAL PROOF
   ===================================================================== */
.proof-grid {
  margin-top: 52px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.proof-logo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 364 / 109; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); text-align: center;
  font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(14px, 1.5vw, 18px);
}
.proof-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-logo small { font-family: 'Manrope'; font-weight: 600; font-size: 11px; color: var(--ink-3); letter-spacing: .04em; }
.proof-logo--more { background: var(--bg-soft); color: var(--ink-2); }
.proof-logo--you { background: var(--acid); color: var(--ink); }
/* ── Видео-отзыв (кружок из Telegram) ── */
.reviews { margin-top: 48px; display: flex; justify-content: center; }
.vreview {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin: 0; text-align: center;
}
.vreview-stage {
  position: relative; width: 220px; height: 220px; border-radius: 50%;
  box-shadow: 0 10px 40px rgba(0,0,0,.16);
  transition: transform .35s var(--ez), box-shadow .35s var(--ez);
}
.vreview-stage:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(0,0,0,.22); }
.vreview-circle {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
  overflow: hidden; cursor: pointer; padding: 0; background: var(--ink); border: 0;
}
.vreview-video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* кольцо-прогресс как в Telegram: кислотная рамка-трек + белая дуга проигранного */
.vreview-ring { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; transform: rotate(-90deg); transform-origin: 50% 50%; }
.vr-track { fill: none; stroke: var(--acid); stroke-width: 4; }
/* белая дуга видна только во время проигрывания; в покое кольцо полностью зелёное
   (opacity:0 убирает и точку от закруглённого конца дуги при нулевом прогрессе) */
.vr-bar { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round;
  opacity: 0; transition: opacity .2s var(--ez); }
.vreview.is-playing .vr-bar { opacity: 1; }
.vreview-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  border-radius: 50%; background: var(--acid);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s var(--ez), transform .3s var(--ez);
}
.vreview-play::before {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--ink);
}
.vreview.is-playing .vreview-play { opacity: 0; transform: scale(.6); pointer-events: none; }
.vreview-cap { display: flex; flex-direction: column; gap: 3px; }
.vreview-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.vreview-role { font-size: 14px; color: var(--ink-3); font-weight: 600; }
.vreview-role a {
  color: var(--ink-2); font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--acid); transition: background .3s var(--ez);
}
.vreview-role a:hover { background: var(--acid); }
@media (max-width: 600px) {
  .vreview-stage { width: 180px; height: 180px; }
  .vreview-play { width: 54px; height: 54px; }
}

/* ========================================================================
   6. ПОЧЕМУ МЫ
   ===================================================================== */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 52px; }
.why-card { background: var(--dark-soft); border: 1px solid var(--dark-line); border-radius: var(--radius); padding: 36px clamp(26px, 3vw, 40px); }
.why-num { font-family: 'Geologica', sans-serif; font-weight: 800; font-size: clamp(34px, 4vw, 48px); color: transparent; -webkit-text-stroke: 1.6px var(--acid); }
.why-card h3 { margin: 18px 0 12px; font-weight: 600; font-size: clamp(19px, 2.1vw, 23px); color: #fff; }
.why-card p { color: #a8a8a8; font-size: 16px; }

/* ========================================================================
   7. CTA FINAL (кислотный экран)
   ===================================================================== */
.cta-final { background: var(--acid); color: var(--ink); }
.section-eyebrow.dark { color: #4a5a10; }
.cta-title { font-weight: 600; font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.025em; margin-bottom: 44px; }
/* тёмная плашка — те же пропорции, что у .hl-mark (фон псевдоэлементом, инсет .14em) */
.hl-box { position: relative; color: var(--acid); padding: 0 .14em; isolation: isolate; }
.hl-box::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0;
  top: .14em; bottom: .14em; background: var(--ink); border-radius: 6px;
}
.cta-card { background: var(--ink); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); max-width: 760px; }
.cta-card-head { color: var(--acid); font-weight: 700; font-size: 14px; letter-spacing: .04em; margin-bottom: 22px; }
.cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #1c1c1c; border-radius: 100px; padding: 18px 26px; margin-bottom: 12px;
  transition: background .15s ease;
}
.cta-row:last-child { margin-bottom: 0; }
.cta-row:hover { background: #262626; }
.cta-row span { color: #9a9a9a; font-weight: 600; font-size: 14px; letter-spacing: .04em; }
.cta-row b { color: #fff; font-size: clamp(14px, 2vw, 18px); }
.cta-sub { margin-top: 32px; max-width: 600px; font-size: 16px; color: #2c3406; }
.cta-stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); margin-top: 40px; border-top: 1.5px solid rgba(0,0,0,.18); padding-top: 28px; }
.cta-stats b { display: block; font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(22px, 3vw, 30px); }
.cta-stats span { font-size: 13px; color: #3c4609; font-weight: 600; max-width: 200px; display: block; }

/* ========================================================================
   СТРАНИЦА ВАКАНСИЙ (careers.html) — интро + перки + аккордеон позиций
   ===================================================================== */
.careers { padding-top: clamp(96px, 12vw, 132px); padding-bottom: clamp(56px, 8vw, 96px); }
.careers-title { font-weight: 600; font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.025em; margin-top: 14px; }
.careers-lead { margin-top: 22px; max-width: 640px; font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-2); line-height: 1.5; }

.careers-perks { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.perk { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px clamp(18px, 2vw, 24px); }
.perk b { display: block; font-family: 'Geologica', sans-serif; font-weight: 600; font-size: 15.5px; margin-bottom: 6px; }
.perk span { color: var(--ink-2); font-size: 14px; line-height: 1.45; }

/* открытые позиции — нативный аккордеон <details> */
.jobs-head { margin-top: clamp(48px, 6vw, 76px); }
.jobs { margin-top: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.job { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .18s ease; }
.job[open] { border-color: var(--ink); }
.job summary { list-style: none; cursor: pointer; padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 32px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.job summary::-webkit-details-marker { display: none; }
.job-role { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(19px, 2.3vw, 24px); letter-spacing: -0.02em; }
.job-meta { display: block; margin-top: 7px; color: var(--ink-3); font-weight: 600; font-size: 13px; letter-spacing: .02em; }
.job-toggle { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; position: relative; transition: background .18s ease, transform .3s var(--ez-spring); }
.job-toggle::before, .job-toggle::after { content: ''; position: absolute; background: var(--ink); transition: background .18s ease; }
.job-toggle::before { width: 13px; height: 2px; }
.job-toggle::after { width: 2px; height: 13px; }
.job[open] .job-toggle { transform: rotate(135deg); background: var(--ink); }
.job:hover .job-toggle, .job[open] .job-toggle { background: var(--ink); }
.job:hover .job-toggle::before, .job:hover .job-toggle::after,
.job[open] .job-toggle::before, .job[open] .job-toggle::after { background: #fff; }
.job-body { padding: 0 clamp(22px, 3vw, 32px) clamp(28px, 4vw, 36px); max-width: 780px; }
.job-body h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: clamp(22px, 3vw, 28px) 0 12px; }
.job-body > p:first-child { margin-top: 0; }
.job-body p { color: var(--ink-2); font-size: 16px; margin-bottom: 12px; }
.job-body ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.job-body li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 16px; }
.job-body li::before { content: '—'; position: absolute; left: 0; color: var(--acid-deep); font-weight: 700; }
.job-apply { margin-top: clamp(26px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 880px) { .careers-perks { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .careers-perks { grid-template-columns: 1fr; } .job-apply .btn { flex: 1 1 100%; } }

/* ========================================================================
   СТРАНИЦЫ-ДОКУМЕНТЫ (privacy / terms / legal) — заглушки
   ===================================================================== */
.legal { padding-top: clamp(96px, 12vw, 132px); padding-bottom: clamp(56px, 8vw, 96px); }
.legal h1 { font-size: clamp(28px, 4vw, 46px); font-weight: 600; letter-spacing: -0.025em; max-width: 18ch; }
.legal-meta { margin-top: 14px; color: var(--ink-3); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; }
.legal-body { margin-top: clamp(28px, 4vw, 44px); max-width: 720px; }
.legal-body p { color: var(--ink-2); font-size: 16.5px; margin-bottom: 14px; }
.legal-body > p:first-child { color: var(--ink); }
.legal-body h2 { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(19px, 2.4vw, 23px); letter-spacing: -0.02em; color: var(--ink); margin: clamp(30px, 4vw, 42px) 0 12px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-weight: 700; font-size: 16.5px; color: var(--ink); margin: 20px 0 8px; }
.legal-body ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.legal-body li { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 16.5px; }
.legal-body li::before { content: '—'; position: absolute; left: 0; color: var(--acid-deep); font-weight: 700; }
.legal-body strong { color: var(--ink); font-weight: 700; }
.legal-body a { text-decoration: underline; text-underline-offset: 3px; }
.legal-info { margin-top: clamp(28px, 4vw, 44px); max-width: 640px; display: flex; flex-direction: column; gap: 0; }
.legal-info div { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.legal-info dt { color: var(--ink-3); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; flex: 0 0 100%; }
.legal-info dd { color: var(--ink); font-size: 17px; font-weight: 600; margin: 0; }
.legal-info a { text-decoration: underline; text-underline-offset: 3px; }
.legal-note {
  margin-top: clamp(26px, 4vw, 40px); max-width: 720px;
  padding: clamp(24px, 3vw, 32px); border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--ink-2); font-size: 15.5px;
}
.legal-note b { color: var(--ink); }

/* ========================================================================
   8. FOOTER (компактный: контакты вынесены крупно + подчёркнуты,
      медиа/документы — обычные ссылки. CTA-блок над подвалом не дублируем.)
   ===================================================================== */
.site-footer { padding-block: clamp(48px, 6vw, 80px); }
.ft-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }

/* сообщение «начнём проект» → вынесенные крупные ПОДЧЁРКНУТЫЕ контакты */
.ft-lead { font-weight: 600; font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.025em; color: #fff; max-width: 14ch; line-height: 1.06; }
.ft-lead .acc { color: var(--acid); }
.ft-sub { margin-top: 16px; color: #9a9a9a; font-size: 15px; max-width: 34ch; }
.ft-contacts { margin-top: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 8px; }
.ft-contacts a {
  font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(18px, 2.1vw, 24px); letter-spacing: -0.02em; color: #fff; width: fit-content;
  text-decoration: underline; text-decoration-color: #3f3f3f; text-underline-offset: 6px; text-decoration-thickness: 2px;
  transition: color .15s, text-decoration-color .15s;
}
.ft-contacts a:hover { color: var(--acid); text-decoration-color: var(--acid); }

/* ссылка-нудж на вакансии */
.ft-jobs { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(22px, 3vw, 28px); color: var(--acid); font-weight: 700; font-size: 14.5px; width: fit-content; transition: gap .2s var(--ez); }
.ft-jobs:hover { gap: 13px; }

/* колонки «вынесено» — без подчёркивания */
.ft-col-h { color: #7a7a7a; font-weight: 700; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.ft-col a { display: block; width: fit-content; color: #c4c4c4; font-size: 15px; font-weight: 500; padding: 6px 0; transition: color .15s, transform .2s var(--ez); }
.ft-col a:hover { color: #fff; transform: translateX(3px); }
.ft-disclaimer { display: block; max-width: 220px; margin-top: 10px; font-size: 10.5px; line-height: 1.45; color: #7a7a7a; }

.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: clamp(40px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--dark-line); }
.ft-bottom-l { display: flex; align-items: center; gap: 18px; }
.ft-logo { height: 46px; width: auto; display: block; opacity: .9; }
.ft-geo { color: #6a6a6a; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.ft-copy { color: #6a6a6a; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; }
@media (max-width: 760px) {
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-msg { grid-column: 1 / -1; margin-bottom: 8px; }
  .ft-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ========================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 880px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-veil { background: rgba(255,255,255,.18); }
  .hero-collage { gap: 10px; }
  .collage-col__inner { gap: 10px; }
  .proof-grid { grid-template-columns: repeat(2, 1fr); }
  .case-card { grid-template-columns: 1fr; }
  .case-media { min-height: 200px; }
  .case-body { padding: 0 clamp(22px,5vw,30px) clamp(28px,6vw,34px); }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .pain-grid, .services-grid, .why-grid, .footer-grid, .ai-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .hero-actions .btn { flex: 1 1 100%; }
  /* без перекат-эффекта (roll) на мобиле: заголовки услуг и ссылки бургер-меню */
  .service-card .roll-a, .nav a .roll-a { transform: none !important; opacity: 1 !important; }
  .service-card .roll-b, .nav a .roll-b { display: none; }
}

/* ========================================================================
   ГЕРОЙ — Вариант B на ВСЕХ ширинах (десктоп + мобила): коллаж на весь экран,
   текст белым внизу поверх затемнения, адаптивный фейд-хедер.
   Десктоп-подстройки (ширина текста, цвет навигации) — в блоке @media min-width ниже.
   Бургер и отключение перекатов остаются только на мобиле (≤620px).
   ===================================================================== */
  /* первый экран = коллаж; герой растёт ниже под остальной текст */
  .hero-main {
    min-height: 100vh; min-height: 100svh;
    align-items: stretch;
    padding-top: 0; padding-bottom: 0;
    background: var(--dark);
  }
  .hero-veil { display: none; }                 /* без белёсой вуали — коллаж ярче */
  .hero-collage { inset: 0 0 auto 0; height: 100svh; }   /* коллаж = только первый экран */

  /* верхнее затемнение под хедер (вместо белого фейда) */
  .hero-main::before {
    height: 150px;
    background: linear-gradient(to bottom, rgba(8,8,8,.9) 0%, rgba(8,8,8,.42) 48%, rgba(8,8,8,0) 100%);
  }
  /* затемнение в НИЗУ первого экрана — под эйброу+заголовок (не до самого низа героя) */
  .hero-main::after {
    bottom: auto; top: 46svh; height: 54svh;
    background: linear-gradient(to bottom,
      rgba(8,8,8,0) 0%, rgba(8,8,8,.55) 32%, rgba(8,8,8,.97) 64%, rgba(8,8,8,1) 100%);
  }

  /* стеклянная плашка → прозрачный текст; эйброу+заголовок к низу 1-го экрана,
     подзаголовок/кнопки/метрики уезжают ниже (видно при скролле) */
  .hero-card {
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 0; box-shadow: none; border-radius: 0; max-width: 720px;
    /* отступ масштабируется с размером заголовка → эйброу+заголовок садятся к низу
       первого экрана на любой ширине (28px на мобиле … 46px на десктопе) */
    padding: calc(100svh - 70px - 3.18 * clamp(28px, 4vw, 46px)) 0 48px; margin: 0;
  }
  .hero-card::before { display: none; }
  .hero-card .eyebrow { color: #b9b9b4; }
  .hero-title { color: #fff; }
  .hero-card .hero-sub { color: #d9d9d6; }
  .hero-card .hero-metrics { margin-top: 24px; }
  .metric b { color: #fff; }
  .metric span { color: #c4c4c0; }
  .hero-card .btn-ghost { color: #fff; border-color: rgba(255,255,255,.85); }

  /* хедер адаптируется к блоку под ним (класс .hdr-dark ставит script.js).
     НЕ прямоугольник-стекло, а ФЕЙД (градиент), уходящий в прозрачность вниз. */
  .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* два слоя фейда (светлый + тёмный) кросс-фейдятся по opacity → ПЛАВНАЯ инверсия
     (смену самого градиента CSS анимировать не умеет, поэтому слоями) */
  .site-header::before, .site-header::after {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 128px; z-index: -1; pointer-events: none;
    transition: opacity .45s var(--ez);
  }
  .site-header::before {   /* светлый */
    background: linear-gradient(to bottom, rgba(255,255,255,.98) 0%, rgba(255,255,255,.7) 42%, rgba(255,255,255,0) 100%);
    opacity: 1;
  }
  .site-header::after {    /* тёмный */
    background: linear-gradient(to bottom, rgba(8,8,8,.96) 0%, rgba(8,8,8,.66) 44%, rgba(8,8,8,0) 100%);
    opacity: 0;
  }
  html.hdr-dark .site-header::before { opacity: 0; }
  html.hdr-dark .site-header::after { opacity: 1; }
  .logo img { transition: filter .45s var(--ez); }
  /* БЕЗ `background` в transition: у десктоп-CTA (текст-трафарет) переход фона дерётся с анимацией
     переливания (она крутит background-position) → на ховере блик замирал. */
  .nav .nav-cta { transition: color .45s var(--ez), border-color .45s var(--ez); }
  html.hdr-dark .logo img { filter: brightness(0) invert(1); }
  html.hdr-dark .nav .nav-cta { color: #fff; border-color: rgba(255,255,255,.75); }

/* десктоп/планшет: ограничиваем ширину текста героя + навигация белым над тёмным */
@media (min-width: 621px) {
  .hero-card { max-width: 720px; }
  html.hdr-dark .nav a { color: rgba(255,255,255,.9); }
  html.hdr-dark .nav a:hover { color: #fff; }
}

/* ========================================================================
   СТРАНИЦА КЕЙСА (case-*.html)
   Реюз дизайн-системы главной. Рамка брифа: кто / задача / роль / результат / галерея.
   ===================================================================== */
.case-hero { padding-top: clamp(96px, 12vw, 132px); padding-bottom: clamp(32px, 5vw, 64px); }
.case-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: clamp(22px, 4vw, 38px);
  font-weight: 700; font-size: 14px; color: var(--ink-2);
}
.case-back:hover { color: var(--ink); }
.case-eyebrow {
  font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 18px;
}
.case-eyebrow b { color: var(--ink); }
.case-h1 { font-weight: 600; font-size: clamp(28px, 4.2vw, 48px); letter-spacing: -0.025em; max-width: 16ch; }
.case-tagline { margin-top: 22px; max-width: 640px; font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-2); line-height: 1.5; }

.case-cover {
  margin-top: clamp(30px, 4vw, 52px); border-radius: var(--radius); overflow: hidden;
  background: var(--bg-soft); aspect-ratio: 16 / 8; position: relative;
}
.case-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- кто / задача (две колонки) --- */
.case-brief { padding-block: clamp(48px, 7vw, 96px); }
.case-brief-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 4vw, 56px); }
.case-block-label {
  font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 16px;
}
.case-block-label::before { content: '— '; color: var(--acid-deep); }
.case-block h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px; }
.case-block p { color: var(--ink-2); font-size: 16.5px; }
.case-block p + p { margin-top: 12px; }

/* --- что сделали / роль ABD (тёмный якорь) --- */
.case-role .section-eyebrow { color: #7a7a7a; }
.case-role h2.section-title { margin-bottom: 12px; }
.case-role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: clamp(34px, 5vw, 52px); }
.case-role-card {
  background: var(--dark-soft); border: 1px solid var(--dark-line); border-radius: var(--radius);
  padding: 30px clamp(24px, 3vw, 36px); transition: border-color .18s ease;
}
.case-role-card:hover { border-color: var(--acid); }
.case-role-card h3 { font-size: clamp(19px, 2.2vw, 23px); color: #fff; margin-bottom: 10px; }
.case-role-card h3::before { content: '✦ '; color: var(--acid); font-size: .7em; vertical-align: middle; }
.case-role-card p { color: #a8a8a8; font-size: 15.5px; }

/* --- результат + реальные факты-цифры --- */
.case-result { padding-block: clamp(48px, 7vw, 96px); }
.case-result .section-lead { margin-bottom: clamp(32px, 5vw, 48px); }
.case-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case-fact {
  background: var(--bg-soft); border-radius: var(--radius); padding: clamp(26px, 3vw, 38px);
}
.case-fact b {
  display: block; font-family: 'Geologica', sans-serif; font-weight: 600;
  font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.03em; line-height: 1;
}
.case-fact span { display: block; margin-top: 12px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.case-fact--accent { background: var(--acid); }
.case-fact--accent span { color: #3c4609; }

/* --- галерея (плейсхолдеры под фото, меняются позже) --- */
.case-gallery { padding-block: clamp(40px, 6vw, 80px); }
.case-gallery .section-eyebrow { margin-bottom: 8px; }
.case-gallery .gallery-note { margin-top: 6px; margin-bottom: clamp(28px, 4vw, 44px); color: var(--ink-3); font-size: 14px; font-weight: 600; }
/* масонри: картинки сохраняют свои пропорции, ничего не обрезается */
.case-grid { column-count: 3; column-gap: 14px; }
.case-shot {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
  break-inside: avoid; margin: 0 0 14px; width: 100%; display: block;
}
.case-shot img, .case-shot video { display: block; width: 100%; height: auto; }
/* плейсхолдер (плитка без фото/видео) — фактурный бокс с подписью */
.case-shot:not(:has(img, video)) {
  background: repeating-linear-gradient(135deg, #f0f0ee 0 14px, #f6f6f4 14px 28px);
  aspect-ratio: 4 / 3;
}
.case-shot__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  font-weight: 700; font-size: 13px; color: var(--ink-2);
  background: rgba(255,255,255,.92); padding: 6px 12px; border-radius: 100px;
}

/* --- перелинковка на другие кейсы --- */
.case-next { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.case-next h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.02em; margin-bottom: clamp(22px, 3vw, 32px); }
.case-next-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.case-next-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--bg-soft); border-radius: var(--radius); padding: 16px 22px 16px 16px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.case-next-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.08); }
.case-next-thumb { width: 104px; height: 78px; flex: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.case-next-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s var(--ez); }
.case-next-card:hover .case-next-thumb img { transform: scale(1.05); }
.case-next-meta { flex: 1; min-width: 0; }
.case-next-kick { font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 6px; }
.case-next-card b { font-size: clamp(17px, 2vw, 21px); font-weight: 600; letter-spacing: -0.02em; }
.case-next-card .arrow { font-size: 22px; font-weight: 800; flex-shrink: 0; }
/* стрелке — фикс. место, чтобы рост палочки при ховере не двигал текст */
.case-next-card .arw { width: 42px; justify-content: flex-start; flex: none; }

@media (max-width: 880px) {
  .case-brief-grid { grid-template-columns: 1fr; }
  .case-role-grid { grid-template-columns: 1fr; }
  .case-facts { grid-template-columns: 1fr; }
  .case-cover { aspect-ratio: 16 / 10; }
  .case-grid { column-count: 2; }
  .case-next-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .case-cover { aspect-ratio: 4 / 3; }
  .case-grid { column-count: 1; column-gap: 0; }
}

/* --- заглушка галереи (кейс без фото — материалы готовятся) --- */
.case-gallery-soon {
  margin-top: clamp(20px, 3vw, 32px);
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, #f6f6f4 0 14px, #fafafa 14px 28px);
  padding: clamp(40px, 7vw, 72px) clamp(24px, 4vw, 40px); text-align: center;
}
.case-gallery-soon span { color: var(--ink-3); font-size: 15px; font-weight: 600; }

/* ========================================================================
   СТРАНИЦА ПОРТФОЛИО (cases.html)
   Интро + плитка-сетка всех кейсов (2 колонки → 1 на мобиле).
   ===================================================================== */
.cases-index { padding-top: clamp(96px, 12vw, 132px); padding-bottom: clamp(56px, 8vw, 104px); }
.cases-index-title { font-weight: 600; font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -0.025em; margin-top: 14px; }
.cases-index-lead { margin-top: 22px; max-width: 620px; font-size: clamp(17px, 2.2vw, 21px); color: var(--ink-2); line-height: 1.5; }

.cases-grid { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 26px); }
.case-tile {
  display: flex; flex-direction: column;
  background: var(--bg-soft); border: 1px solid rgba(0,0,0,.05); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.05), 0 26px 56px -26px var(--glow, rgba(0,0,0,.18));
  transition: transform .45s var(--ez-spring), box-shadow .35s var(--ez);
}
.case-tile:hover { transform: translateY(-5px); box-shadow: 0 10px 26px rgba(0,0,0,.07), 0 44px 84px -22px var(--glow, rgba(0,0,0,.28)); }
.case-tile-media { aspect-ratio: 16 / 10; background: var(--bg-soft); overflow: hidden; }
.case-tile-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .6s var(--ez); }
.case-tile:hover .case-tile-media img { transform: scale(1.03); }
.case-tile-body { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; flex: 1; }
.case-tile-body .case-title { margin: 12px 0 0; font-size: clamp(20px, 2.4vw, 27px); }
.case-tile-body .case-tags { margin-top: 18px; }
.case-tile-body .case-link { margin-top: auto; padding-top: 24px; font-weight: 800; font-size: 16px; }
.case-tile:hover .case-link { background-size: 100% 3px; }

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

/* ========================================================================
   МИКРО-АНИМАЦИИ (в стиле wibify, на нашей палитре)
   spring easing · roll-hover · shimmer · градиент-кант · arrow-draw · underline-draw
   ===================================================================== */

/* --- 1. пружинный отклик на интерактивных элементах --- */
.btn { transition: transform .45s var(--ez-spring), background .25s var(--ez), color .25s var(--ez), border-color .25s var(--ez); }
.btn:active { transform: translateY(1px) scale(.99); }
.service-card, .case-next-card { transition: transform .5s var(--ez-spring), box-shadow .4s var(--ez), border-color .3s var(--ez), background .3s var(--ez); }
.ai-card { transition: transform .5s var(--ez-spring), border-color .3s var(--ez); }
.footer-card { transition: border-color .3s var(--ez), background .3s var(--ez); }
.pain-card, .why-card { transition: transform .5s var(--ez-spring), border-color .3s var(--ez); }
.pain-card:hover, .why-card:hover { transform: translateY(-3px); }

/* --- 2. roll-hover ссылок (текст перекатывается, выходящая копия гаснет) --- */
.roll { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; line-height: 1.12; }
.roll > span { display: block; line-height: 1.12; transition: transform .55s var(--ez-io), opacity .4s var(--ez-io); }
.roll .roll-b { position: absolute; left: 0; top: 100%; width: 100%; }
.roll:hover .roll-a { transform: translateY(-100%); opacity: 0; }
.roll:hover .roll-b { transform: translateY(-100%); }
/* заголовки карточек услуг — перекат при наведении на всю карточку */
.service-card h3 { line-height: 1.12; }
.service-card h3 .roll { white-space: nowrap; }
.service-card:hover .roll-a { transform: translateY(-100%); opacity: 0; }
.service-card:hover .roll-b { transform: translateY(-100%); }

/* --- 3. shimmer-блик по кислотной заливке --- */
.btn-accent, .case-fact--accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after, .case-fact--accent::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.6) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .8s var(--ez);
}
.btn-accent:hover::after, .case-fact--accent:hover::after { transform: translateX(130%); }

/* --- 4. вращающийся кислотный кант карточек (на ховере) --- */
.pain-card, .service-card, .ai-card, .case-card, .case-role-card, .case-next-card, .why-card, .footer-card { position: relative; }
.pain-card::before, .service-card::before, .ai-card::before, .case-card::before,
.case-role-card::before, .case-next-card::before, .why-card::before, .footer-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--ga), transparent 0 60%, var(--acid) 80%, #fff 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ez); animation: ga-spin 2.6s linear infinite;
}
.pain-card:hover::before, .service-card:hover::before, .ai-card:hover::before, .case-card:hover::before,
.case-role-card:hover::before, .case-next-card:hover::before, .why-card:hover::before, .footer-card:hover::before { opacity: 1; }
.service-card--extra::before { background: conic-gradient(from var(--ga), transparent 0 60%, var(--ink) 82%, transparent 100%); }
@keyframes ga-spin { to { --ga: 360deg; } }

/* --- 5. стрелка-полоска: единое тело (полоска + наконечник), на ховере вытягивается в длину --- */
.arw { display: inline-flex; align-items: center; margin-left: 9px; vertical-align: middle; }
.arw .shaft { display: block; height: 2px; width: 8px; background: currentColor; border-radius: 2px;
  transition: width .38s var(--ez); }
.arw .head { display: block; width: 8px; height: 8px; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-left: -3px; }
/* защита: чужие правила вида «.xxx span { margin/display }» не должны ломать стрелку */
.arw .shaft, .arw .head { margin-block: 0; align-self: center; }
/* рост длины полоски при ховере интерактивного контейнера */
.case-card:hover .arw .shaft, .case-tile:hover .arw .shaft, .case-link:hover .arw .shaft,
.case-next-card:hover .arw .shaft, .service-card:hover .arw .shaft, .jt-card:hover .arw .shaft,
.jt-all:hover .arw .shaft, .ft-jobs:hover .arw .shaft, .btn-ghost:hover .arw .shaft { width: 28px; }

/* --- 6. underline-draw акцентных слов (прочерчивается при скролле) --- */
.ud {
  background-image: linear-gradient(var(--acid), var(--acid)); background-repeat: no-repeat;
  background-position: 0 92%; background-size: 0% .16em;
}
.ud.is-in { background-size: 100% .16em; transition: background-size .65s var(--ez) .1s; }

/* --- доступность: уважение к reduce-motion --- */
@media (prefers-reduced-motion: reduce) {
  .pain-card::before, .service-card::before, .ai-card::before, .case-card::before,
  .case-role-card::before, .case-next-card::before, .why-card::before, .footer-card::before { animation: none; }
  .btn-accent::after, .case-fact--accent::after { transition: none; }
  .ud { background-size: 100% .16em; }
  .service-more::after { transition: none; }
  .roll__in { transition: none; }
}

/* ============ ЖУРНАЛ — тизер на главной (лёгкий, под CTA) ============ */
.journal-teaser { padding-block: clamp(56px, 8vw, 110px); }
.jt-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(26px, 4vw, 44px); flex-wrap: wrap; }
.jt-all { flex-shrink: 0; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--acid); padding-bottom: 3px; transition: border-bottom-color .2s var(--ez); }
.jt-all:hover { border-bottom-color: var(--ink); }
.jt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); }
.jt-card { display: flex; flex-direction: column; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; text-decoration: none;
  color: var(--ink); min-width: 0; transition: border-color .2s var(--ez), transform .2s var(--ez); }
.jt-card:hover { border-color: var(--acid); transform: translateY(-3px); }
/* обложка-знак (как в журнале): кислотный глиф на графите, подпись белым */
.jt-cover { position: relative; aspect-ratio: 16/10; background: var(--ink); overflow: hidden;
  display: flex; align-items: flex-end; padding: 14px 16px; }
.jt-cg { position: absolute; top: -16%; right: -3%; font-family: 'Geologica', sans-serif; font-weight: 900;
  font-size: 120px; line-height: 1; color: var(--acid); user-select: none; }
.jt-cl { position: relative; z-index: 2; font-family: 'Geologica', sans-serif; font-weight: 800;
  font-size: 14px; color: #fff; }
.jt-pad { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: clamp(20px, 2.5vw, 26px); }
.jt-t { font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.18; letter-spacing: -.02em; flex: 1; }
.jt-go { font-weight: 700; font-size: 14px; color: var(--ink); width: fit-content;
  background-image: linear-gradient(var(--acid), var(--acid)); background-repeat: no-repeat;
  background-position: 0 100%; background-size: 0% 3px; transition: background-size .32s var(--ez); }
.jt-card:hover .jt-go { background-size: 100% 3px; }
@media (max-width: 760px) { .jt-grid { grid-template-columns: 1fr; } }

/* ========================================================================
   БУРГЕР-МЕНЮ (мобильное, ≤620px). Десктоп — обычная горизонтальная навигация.
   ===================================================================== */
.nav-toggle { display: none; }

@media (max-width: 880px) {
  /* бургер-оверлёй включается с ≤880px (6 пунктов меню тесны для десктоп-полосы ниже этой ширины) */
  /* без перекат-эффекта (roll) на пунктах внутри оверлея в диапазоне 620–880 */
  .nav a .roll-a { transform: none !important; opacity: 1 !important; }
  .nav a .roll-b { display: none; }
  /* кнопка-бургер в шапке (цвет подхватывает тему хедера) */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 30px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    position: relative; z-index: 70; color: var(--ink);
  }
  html.hdr-dark .nav-toggle { color: #fff; }
  .nav-toggle span {
    display: block; width: 28px; height: 2.5px; border-radius: 2px; background: currentColor;
    transition: transform .35s var(--ez), opacity .2s var(--ez), background .25s var(--ez);
  }
  /* морфинг линий в «X» */
  body.menu-open .nav-toggle { color: #fff; }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

  /* лого поверх оверлея и белым, пока меню открыто */
  body.menu-open .logo { position: relative; z-index: 70; }
  body.menu-open .logo img { filter: brightness(0) invert(1); }

  /* nav → полноэкранный тёмный оверлей */
  .nav {
    position: fixed; inset: 0; z-index: 60;
    flex-direction: column; align-items: stretch; justify-content: center;
    gap: 0; padding: 0 var(--pad);
    background: #0e0e0e;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .32s var(--ez), transform .4s var(--ez), visibility .32s;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; transform: none; }

  .nav a:not(.nav-cta) {
    font-family: 'Geologica', sans-serif; font-weight: 600; font-size: clamp(28px, 8vw, 36px);
    letter-spacing: -0.02em; color: #fff; padding: 14px 0;
    border-bottom: 1px solid #1e1e1e;
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s var(--ez), transform .35s var(--ez);
  }
  body.menu-open .nav a:not(.nav-cta) { opacity: 1; transform: none; }
  body.menu-open .nav a:nth-child(1) { transition-delay: .08s; }
  body.menu-open .nav a:nth-child(2) { transition-delay: .13s; }
  body.menu-open .nav a:nth-child(3) { transition-delay: .18s; }
  body.menu-open .nav a:nth-child(4) { transition-delay: .23s; }
  body.menu-open .nav a:nth-child(5) { transition-delay: .28s; }

  /* кислотная кнопка «Обсудить проект» внизу меню */
  .nav .nav-cta {
    margin-top: 34px; text-align: center;
    background: var(--acid); color: var(--ink); border: 0; border-radius: 100px;
    font-weight: 700; font-size: 17px; padding: 17px 28px;
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s var(--ez) .34s, transform .35s var(--ez) .34s;
  }
  /* перебиваем html.hdr-dark .nav .nav-cta{color:#fff} — в меню текст кнопки тёмный */
  body.menu-open .nav .nav-cta { opacity: 1; transform: none; color: var(--ink); }
  /* в меню кнопка остаётся кислотной на ховере (не чёрной — иначе сливается с оверлеем) */
  body.menu-open .nav .nav-cta:hover { background: var(--acid-deep); color: var(--ink); }

  body.menu-open { overflow: hidden; }
}

/* ============================================================
   СТРАНИЦЫ УСЛУГ (svc-*) — общий шаблон brending.html и др.
   ============================================================ */
.svc-hero { padding-top: clamp(92px, 11vw, 124px); padding-bottom: clamp(28px, 4vw, 48px); }
.svc-hero-back { display: block; margin-bottom: 22px; }
.svc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.svc-hero-txt { min-width: 0; }
.svc-num {
  display: inline-block; font-family: 'Geologica', sans-serif; font-weight: 800;
  font-size: 14px; letter-spacing: .04em; color: var(--ink-3); margin: 0 0 14px;
}
.svc-h1 { font-weight: 600; font-size: clamp(28px, 4.2vw, 48px); letter-spacing: -0.025em; max-width: 18ch; }
.svc-tagline { margin-top: 20px; max-width: 600px; font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); }
.svc-hero-row {
  margin-top: 32px; display: flex; align-items: center; gap: clamp(18px, 4vw, 40px); flex-wrap: wrap;
}
.svc-price { font-size: clamp(20px, 2.6vw, 26px); color: var(--ink-2); white-space: nowrap; }
.svc-price b { color: var(--ink); font-weight: 700; }
.svc-price-note { font-size: 14px; color: var(--ink-3); font-weight: 500; }

/* — Что входит — */
.svc-includes { padding: clamp(48px, 7vw, 88px) 0; }
.svc-includes .section-title { margin: 6px 0 36px; }
.svc-incl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-incl-card {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .3s var(--ez), box-shadow .3s var(--ez);
}
.svc-incl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.07); }
.svc-incl-num { font-family: 'Geologica', sans-serif; font-weight: 800; font-size: 14px; color: var(--ink-3); }
.svc-incl-card h3 { margin: 12px 0 8px; font-weight: 600; font-size: clamp(18px, 2vw, 21px); }
.svc-incl-card p { color: var(--ink-2); font-size: 15px; line-height: 1.5; }

/* — Форматы и цена (тёмная секция) — */
.svc-packages { padding: clamp(54px, 8vw, 96px) 0; }
.svc-packages .section-title { margin: 6px 0 38px; }
.svc-pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.svc-pack-card {
  position: relative; background: var(--dark-soft); border: 1px solid var(--dark-line);
  border-radius: var(--radius); padding: 30px 26px; display: flex; flex-direction: column;
}
.svc-pack-card--hl { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.svc-pack-badge {
  position: absolute; top: -11px; left: 26px; background: #fff; color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 100px; box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.svc-pack-card h3 { font-weight: 600; font-size: clamp(20px, 2.3vw, 24px); }
.svc-pack-card--hl h3 { color: var(--ink); }
.svc-pack-desc { margin: 12px 0 22px; color: #b0b0b0; font-size: 15px; line-height: 1.55; flex: 1; }
.svc-pack-card--hl .svc-pack-desc { color: #3a4a0c; }
.svc-pack-price { font-size: clamp(19px, 2.4vw, 24px); color: #fff; white-space: nowrap; }
.svc-pack-price b { font-weight: 700; }
.svc-pack-card--hl .svc-pack-price { color: var(--ink); }
.svc-pack-foot { margin-top: 28px; color: #8a8a86; font-size: 15px; }

/* — Кейсы из услуги — */
.svc-cases { padding: clamp(48px, 7vw, 88px) 0; }
.svc-cases .section-title { margin: 6px 0 36px; }
.svc-cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.svc-case-card {
  display: flex; flex-direction: column; background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px;
  transition: transform .3s var(--ez), box-shadow .3s var(--ez);
}
.svc-case-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.svc-case-tag { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.svc-case-card h3 { margin: 12px 0 8px; font-weight: 600; font-size: clamp(20px, 2.3vw, 25px); }
.svc-case-card p { color: var(--ink-2); font-size: 15px; line-height: 1.5; flex: 1; }
.svc-case-go { margin-top: 18px; font-weight: 600; font-size: 15px; color: var(--ink); }

/* ============================================================
   СПЕЦОФФЕР «ЛЕНДИНГ ЗА 1 ДЕНЬ» — спотлайт (тёмный якорь, панель)
   ============================================================ */
.svc-spotlight { background: var(--dark); color: #fff; }
.svc-spotlight .spot-inner {
  max-width: 760px; margin: 0 auto; text-align: center;
  background: var(--dark-soft); border: 1px solid var(--dark-line);
  border-radius: var(--radius); padding: clamp(34px, 5vw, 64px) clamp(22px, 4vw, 56px);
}
.spot-eyebrow {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: #8f8f8c;
  display: inline-flex; align-items: center; gap: 8px;
}
/* значок-молния — CSS clip-path, НЕ эмодзи */
.spot-bolt { display: inline-block; width: .85em; height: 1em; background: var(--acid);
  clip-path: polygon(48% 0, 100% 0, 58% 38%, 92% 38%, 22% 100%, 44% 50%, 8% 50%); }
.spot-title { font-family: 'Geologica', sans-serif; font-weight: 600; letter-spacing: -.03em;
  font-size: clamp(30px, 5vw, 52px); line-height: 1.04; margin: 14px 0 0; color: #fff; }
.spot-sub { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; margin: 18px auto 0;
  max-width: 620px; color: #c4c4c1; }
.spot-price { margin: 30px auto 0; max-width: 560px; }
.spot-price-main { font-family: 'Geologica', sans-serif; font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(34px, 6vw, 58px); line-height: 1; color: var(--acid); }
.spot-price-main span { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 15px;
  letter-spacing: 0; color: #9a9a97; display: inline-block; vertical-align: middle; }
.spot-bar { height: 4px; border-radius: 999px; margin: 18px auto 0; max-width: 280px;
  overflow: hidden; background: rgba(255,255,255,.12); }
.spot-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--acid); }
.spot-care { display: inline-block; margin-top: 16px; padding: 10px 16px; border-radius: 999px;
  font-size: 14px; line-height: 1.45; font-family: 'Manrope', sans-serif;
  background: var(--dark); border: 1px solid var(--dark-line); color: #d6d6d3; }
.spot-care b { font-weight: 700; color: var(--acid); }
.spot-list { list-style: none; padding: 0; margin: 30px auto 0; max-width: 560px;
  text-align: left; display: grid; gap: 12px; }
.spot-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5;
  font-family: 'Manrope', sans-serif; color: #d2d2cf; }
.spot-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: var(--acid);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.spot-cta { margin-top: 34px; }
.spot-nudge { margin-top: 14px; font-size: 14px; font-family: 'Manrope', sans-serif; color: #9a9a97; }
.spot-note { margin: 22px auto 0; font-size: 12.5px; line-height: 1.5;
  font-family: 'Manrope', sans-serif; max-width: 540px; color: #74746f; }

/* одноразовая анимация — проигрывается один раз при появлении (класс .is-in вешает script.js IO) */
.svc-spotlight .spot-bar i { width: 6%; }
.svc-spotlight.is-in .spot-bar i { animation: spotfill 1.7s var(--ez) forwards; }
.svc-spotlight.is-in .spot-bolt { animation: spotpulse 1.4s var(--ez-spring) 2 both; }
@keyframes spotfill { from { width: 6%; } to { width: 100%; } }
@keyframes spotpulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
  .svc-spotlight .spot-bar i { width: 100%; }
  .svc-spotlight.is-in .spot-bar i,
  .svc-spotlight.is-in .spot-bolt { animation: none; }
}

/* — карточка услуги на главной как ссылка — */
/* display:flex (а НЕ block) — иначе flex-direction:column карточки не работает и «Подробнее» не прижать к низу */
a.service-card { text-decoration: none; color: inherit; display: flex; }
/* margin-top:auto прижимает «Подробнее» к низу карточки → в ряду кнопки на одной линии (карточки тянутся на равную высоту) */
.service-more { position: relative; display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 16px; font-weight: 600; font-size: 14px; color: var(--ink); }
.service-card--extra .service-more { color: var(--ink); }
/* «Подробнее →» — кислотное подчёркивание прочерчивается под текстом И стрелкой при наведении на карточку */
.service-more::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  background: var(--acid); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ez);
}
.service-card:hover .service-more::after { transform: scaleX(1); }
.service-card--extra .service-more::after { background: var(--ink); }

@media (max-width: 920px) {
  .svc-incl-grid, .svc-pack-grid, .svc-cases-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-pack-badge { left: 22px; }
}
@media (max-width: 620px) {
  .svc-incl-grid, .svc-pack-grid, .svc-cases-grid { grid-template-columns: 1fr; }
  .svc-hero-row { gap: 18px; }
  .svc-hero-row .btn { width: 100%; text-align: center; }
  .spot-price-main span { display: block; margin-top: 6px; }
  .spot-cta { width: 100%; text-align: center; }
}

/* ============================================================
   ЖИВОЙ БАННЕР В ГЕРОЕ УСЛУГИ (svc-cv-*) — фигма-канвас, brending.html
   ============================================================ */
.svc-canvas{
  position:relative; aspect-ratio:4/3.1; border-radius:var(--radius); overflow:hidden;
  background:var(--bg-soft); border:1px solid var(--line);
  background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:22px 22px;
}
.svc-cv-bar{
  position:absolute; top:0; left:0; right:0; height:34px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:6px; padding:0 12px; z-index:5;
}
.svc-cv-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.svc-cv-bar span{ margin-left:8px; font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.04em; }

.svc-cv-blk{
  position:absolute; border-radius:var(--radius-sm); background:#fff; border:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.06); display:flex; flex-direction:column; padding:0;
  opacity:0; animation: svcSnap .7s var(--ez-spring) var(--d,0s) both,
                       svcFloat 7s ease-in-out calc(var(--d,0s) + .9s) infinite;
}
@keyframes svcSnap{ from{opacity:0; transform:translate(var(--fx,0), var(--fy,18px)) scale(.92);}
                    to{opacity:1; transform:translate(0,0) scale(1);} }
@keyframes svcFloat{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(var(--mx,0), var(--my,-7px));} }

.svc-cv-logo   { left:7%;  top:18%; width:38%; height:30%; --mx:-4px; --my:-6px; }
.svc-cv-palette{ left:53%; top:14%; width:40%; height:24%; --mx:5px;  --my:-8px; }
.svc-cv-type   { left:7%;  top:54%; width:40%; height:34%; --mx:-5px; --my:7px; }
.svc-cv-guide  { left:53%; top:46%; width:40%; height:42%; --mx:6px;  --my:8px; }

.svc-cv-cap{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); padding:8px 10px 0; }
.svc-cv-logo{ align-items:center; justify-content:center; }
.svc-cv-logo .svc-cv-cap{ position:absolute; top:0; left:0; }
.svc-cv-dot{ width:34px; height:34px; border-radius:9px; background:var(--acid); }
.svc-cv-sw{ display:flex; gap:7px; padding:10px; margin-top:auto; }
.svc-cv-sw i{ flex:1; height:26px; border-radius:7px; background:var(--ink); }
.svc-cv-sw i:nth-child(3){ background:var(--ink-2); }
.svc-cv-sw i:nth-child(4){ background:var(--line); }
.svc-cv-sw i.acc{ background:var(--acid); }
.svc-cv-big{ font-family:'Geologica',sans-serif; font-weight:800; font-size:30px; line-height:1; padding:6px 12px 0; }
.svc-cv-small{ font-size:11px; color:var(--ink-3); padding:4px 12px; }
.svc-cv-bars{ padding:12px; display:flex; flex-direction:column; gap:7px; margin-top:auto; }
.svc-cv-bars i{ height:8px; border-radius:4px; background:var(--line); }
.svc-cv-bars i:nth-child(1){width:80%} .svc-cv-bars i:nth-child(2){width:55%} .svc-cv-bars i:nth-child(3){width:68%}

.svc-cv-cur{ position:absolute; z-index:9; opacity:0; animation: svcCurIn .5s ease .7s forwards; }
.svc-cv-cur svg{ display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.svc-cv-cur span{ position:absolute; left:14px; top:14px; white-space:nowrap; font-size:11px; font-weight:700; color:#fff; padding:3px 8px; border-radius:7px; }
@keyframes svcCurIn{ to{opacity:1;} }
.svc-cv-cur1{ left:46%; top:40%; color:#4c7cf3; animation: svcCurIn .5s ease .7s forwards, svcDrift1 6s ease-in-out 1.2s infinite; }
.svc-cv-cur2{ left:22%; top:64%; color:#ff5b87; animation: svcCurIn .5s ease .7s forwards, svcDrift2 7s ease-in-out 1.5s infinite; }
.svc-cv-cur1 span{ background:#4c7cf3; } .svc-cv-cur2 span{ background:#ff5b87; }
@keyframes svcDrift1{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(26px,-20px)} }
@keyframes svcDrift2{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-22px,24px)} }

@media (max-width: 860px){
  .svc-hero-grid{ grid-template-columns:1fr; }
  .svc-canvas{ order:-1; aspect-ratio:16/10; }
}
@media (prefers-reduced-motion: reduce){
  .svc-cv-blk, .svc-cv-cur{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ============================================================
   PRODUCT DESIGN — баннер «развёртка → коробка → топ выдачи» (pdx-*)
   ============================================================ */
/* размеры в cqw (1cqw = 1% ширины канваса) — баннер масштабируется пропорционально */
.pdx-canvas{position:relative;aspect-ratio:4/3.2;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);container-type:inline-size;}
.pdx-bar{position:absolute;top:0;left:0;right:0;height:7.3cqw;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1.5cqw;padding:0 2.3cqw;z-index:9;}
.pdx-bar i{width:1.73cqw;height:1.73cqw;border-radius:50%;background:var(--line);}
.pdx-bar span{font-size:2.1cqw;font-weight:700;color:var(--ink-3);letter-spacing:.04em;white-space:nowrap;}
.pdx-search{flex:1;height:3.46cqw;border-radius:100px;background:var(--bg-soft);}
.pdx-stage{position:absolute;inset:7.3cqw 0 0 0;}

.pdx-rival{position:absolute;width:27%;height:42%;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);border-radius:2.3cqw;padding:1.73cqw;display:flex;flex-direction:column;gap:1.15cqw;opacity:1;}
.pdx-rival .th{flex:1;border-radius:1.35cqw;background:#ededeb;}
.pdx-rival .br{height:1.15cqw;border-radius:.58cqw;background:#e9e9e6;}
.pdx-rival .br.s{width:60%;}
.pdx-rival.r1{left:50%;top:34%;}.pdx-rival.r2{left:83%;top:34%;}
.pdx-rival.r3{left:17%;top:79%;}.pdx-rival.r4{left:50%;top:79%;}.pdx-rival.r5{left:83%;top:79%;}

.pdx-card{position:absolute;left:17%;top:34%;width:28.85cqw;height:37.7cqw;transform:translate(-50%,-50%);z-index:5;}
.pdx-chrome{position:absolute;inset:0;border:2px solid var(--acid);border-radius:2.3cqw;background:#fff;box-shadow:0 16px 36px rgba(0,0,0,.12);opacity:1;}
.pdx-pkgarea{position:absolute;left:1.73cqw;right:1.73cqw;top:1.73cqw;height:60%;border-radius:1.73cqw;background:#fbfbfa;border:1px solid var(--line);overflow:hidden;opacity:1;}
.pdx-meta{position:absolute;left:2.1cqw;right:2.1cqw;bottom:2.1cqw;display:flex;flex-direction:column;gap:.96cqw;opacity:1;}
.pdx-stars{font-size:2.1cqw;color:var(--acid-deep);letter-spacing:.5cqw;}
.pdx-price{font-family:'Geologica',sans-serif;font-weight:800;font-size:2.7cqw;}
.pdx-badge{position:absolute;top:-1.92cqw;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:1.63cqw;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:.58cqw 1.54cqw;border-radius:100px;white-space:nowrap;opacity:1;z-index:30;box-shadow:0 5px 14px rgba(0,0,0,.25);}

.pdx-scene{position:absolute;left:17%;top:30%;transform:translate(-50%,-50%);perspective:146cqw;z-index:6;}
.pdx-shadow{position:absolute;left:50%;top:24.6cqw;width:28.85cqw;height:6.54cqw;transform:translate(-50%,-50%) scale(.42);opacity:.28;background:radial-gradient(ellipse at center, rgba(0,0,0,.20), rgba(0,0,0,0) 70%);}
.pdx-scaler{position:relative;transform-style:preserve-3d;transform:scale(.46);}
.pdx-depth{transform-style:preserve-3d;transform:translateZ(6.73cqw);}
.pdx-box{position:relative;width:23.08cqw;height:28.85cqw;transform-style:preserve-3d;transform:rotateX(-22deg) rotateY(-30deg);margin:0 auto;}
.pdx-face{position:absolute;border:1px solid rgba(0,0,0,.05);}
.pdx-face.f-front{width:23.08cqw;height:28.85cqw;left:0;top:0;background:#f7f7f5;display:flex;flex-direction:column;align-items:center;}
.pdx-face.f-back{width:23.08cqw;height:28.85cqw;left:0;top:0;transform:translateZ(-13.46cqw);background:#e4e4e1;}
.pdx-face.f-right{width:13.46cqw;height:28.85cqw;left:23.08cqw;top:0;transform-origin:0 50%;transform:rotateY(90deg);background:#d4d4d1;}
.pdx-face.f-left{width:13.46cqw;height:28.85cqw;left:-13.46cqw;top:0;transform-origin:100% 50%;transform:rotateY(-90deg);background:#e6e6e3;}
.pdx-face.f-top{width:23.08cqw;height:13.46cqw;left:0;top:-13.46cqw;transform-origin:50% 100%;transform:rotateX(90deg);background:#fff;}
.pdx-face.f-bottom{width:23.08cqw;height:13.46cqw;left:0;top:28.85cqw;transform-origin:50% 0;transform:rotateX(-90deg);background:#cdcdca;}
.pdx-label{margin-top:5.77cqw;width:74%;height:38%;border-radius:1.54cqw;background:linear-gradient(135deg,var(--acid),var(--acid-deep));display:flex;align-items:center;justify-content:center;}
.pdx-label .pdx-abd{width:66%;height:auto;display:block;}
.pdx-face.f-front .ln{width:60%;height:1.15cqw;border-radius:.58cqw;background:#e2e2df;margin-top:1.92cqw;}
.pdx-face.f-front .ln.s{width:38%;margin-top:1.15cqw;}
.pdx-scan{position:absolute;left:0;right:0;height:8.85cqw;top:0;z-index:8;pointer-events:none;opacity:0;background:linear-gradient(180deg,transparent,rgba(201,245,52,.30),transparent);}

/* анимация (всегда включена; финальный кадр = базовое состояние выше) */
.pdx-card{animation:pdxHero 10s var(--ez) infinite;}
.pdx-scene{animation:pdxScene 10s var(--ez) infinite;}
.pdx-scaler{animation:pdxBoxScale 10s var(--ez) infinite;}
.pdx-box{animation:pdxBob 10s ease-in-out infinite;}
.pdx-shadow{animation:pdxShadow 10s var(--ez) infinite;}
.pdx-chrome,.pdx-pkgarea,.pdx-meta{animation:pdxFade 10s linear infinite;}
.pdx-badge{animation:pdxBadge 10s var(--ez-spring) infinite;}
.pdx-rival{animation:pdxRival 10s var(--ez) infinite;}
.pdx-scan{animation:pdxScan 10s ease infinite;}
.pdx-stage{animation:pdxSeam 10s linear infinite;}
.pdx-face.f-top{animation:pdxFoldTop 10s var(--ez) infinite;}
.pdx-face.f-bottom{animation:pdxFoldBottom 10s var(--ez) infinite;}
.pdx-face.f-right{animation:pdxFoldRight 10s var(--ez) infinite;}
.pdx-face.f-left{animation:pdxFoldLeft 10s var(--ez) infinite;}

@keyframes pdxHero{0%,44%{left:50%;top:50%;}52%{left:50%;top:118%;}56%{left:50%;top:118%;}70%{left:17%;top:34%;}100%{left:17%;top:34%;}}
@keyframes pdxScene{0%,44%{left:50%;top:42%;}52%{left:50%;top:110%;}56%{left:50%;top:110%;}70%{left:17%;top:30%;}100%{left:17%;top:30%;}}
@keyframes pdxBoxScale{0%,32%{transform:scale(1.55);}46%,100%{transform:scale(.46);}}
@keyframes pdxShadow{0%,32%{transform:translate(-50%,-50%) scale(1.4);opacity:.5;}46%,100%{transform:translate(-50%,-50%) scale(.42);opacity:.28;}}
@keyframes pdxBob{0%,100%{transform:rotateX(-22deg) rotateY(-30deg);}50%{transform:rotateX(-20deg) rotateY(-40deg);}}
@keyframes pdxFoldTop{0%,2%{transform:rotateX(0)}22%,100%{transform:rotateX(90deg)}}
@keyframes pdxFoldRight{0%,5%{transform:rotateY(0)}24%,100%{transform:rotateY(90deg)}}
@keyframes pdxFoldLeft{0%,5%{transform:rotateY(0)}24%,100%{transform:rotateY(-90deg)}}
@keyframes pdxFoldBottom{0%,8%{transform:rotateX(0)}26%,100%{transform:rotateX(-90deg)}}
@keyframes pdxFade{0%,38%{opacity:0}48%,100%{opacity:1}}
@keyframes pdxBadge{0%,68%{opacity:0;transform:translateX(-50%) scale(.5)}74%,100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes pdxRival{0%,50%{opacity:0}60%,100%{opacity:1}}
@keyframes pdxScan{0%,66%{opacity:0;transform:translateY(0)}70%{opacity:1}86%{opacity:1;transform:translateY(63.5cqw)}92%,100%{opacity:0;transform:translateY(63.5cqw)}}
@keyframes pdxSeam{0%{opacity:0}4%{opacity:1}95%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .pdx-card,.pdx-scene,.pdx-scaler,.pdx-box,.pdx-shadow,.pdx-chrome,.pdx-pkgarea,.pdx-meta,.pdx-badge,.pdx-rival,.pdx-scan,.pdx-stage,.pdx-face{animation:none !important;}
}

@media (max-width: 860px){ .pdx-canvas{ order:-1; } }

/* ============================================================
   CAMPAIGNS — баннер «печатные полосы → свет» (cmp-*)
   ============================================================ */
.cmp-canvas{position:relative;aspect-ratio:4/3.2;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#dbe7f0 0%,#e9eef2 48%,#eef1f0 64%);container-type:inline-size;animation:cmpSeam 8.5s linear infinite;}
.cmp-ground{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,#d7ddd4 0%,#c7cdc2 40%,#bcc2b6 100%);}
.cmp-ground::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(0,0,0,.08);}
.cmp-grass{position:absolute;left:0;right:0;bottom:0;height:9%;background:linear-gradient(180deg,#9fb27e,#8aa06a);opacity:.55;}
.cmp-contact{position:absolute;left:45%;bottom:20%;width:34cqw;height:4cqw;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.28),rgba(0,0,0,0) 70%);}

.cmp-scene{position:absolute;inset:0;perspective:95cqw;}
.cmp-holder{position:absolute;left:45%;top:13%;width:80cqw;transform:translateX(-50%);transform-style:preserve-3d;z-index:3;}
.cmp-board{position:relative;width:100%;aspect-ratio:16/9;transform-style:preserve-3d;transform:rotateY(-22deg);}
.cmp-depth{position:absolute;inset:0;border-radius:1cqw;background:#0b0b0b;transform:translateZ(-2.6cqw);}
.cmp-leg{position:absolute;top:99%;width:2.1cqw;height:34cqw;background:linear-gradient(90deg,#7f7f7b,#a9a9a4 45%,#73736f);border-radius:0 0 .6cqw .6cqw;}
.cmp-leg.l{left:30%;}.cmp-leg.r{left:68%;}
.cmp-catwalk{position:absolute;top:99%;left:8%;width:84%;height:1.7cqw;background:#6f6f6b;border-radius:1cqw;}

.cmp-lights{position:absolute;left:8%;right:8%;top:-4.5cqw;height:5cqw;display:flex;justify-content:space-around;align-items:flex-end;}
.cmp-lamp{position:relative;width:7cqw;height:5cqw;}
.cmp-lamp .arm{position:absolute;left:50%;bottom:0;width:.7cqw;height:3.4cqw;background:#3a3a38;transform:translateX(-50%);}
.cmp-lamp .head{position:absolute;left:50%;top:0;transform:translateX(-50%);width:5cqw;height:2cqw;background:linear-gradient(180deg,#2a2a28,#454541);border-radius:1cqw 1cqw .4cqw .4cqw;}
.cmp-lamp .bulb{position:absolute;left:50%;top:1.5cqw;transform:translateX(-50%);width:3cqw;height:.7cqw;border-radius:100px;background:#fff7da;box-shadow:0 0 1.4cqw .3cqw rgba(255,243,200,.35);animation:cmpBulb 8.5s var(--ez) infinite;}

.cmp-face{position:absolute;inset:0;border-radius:1cqw;overflow:hidden;background:#cfcfc9;border:.9cqw solid #161616;box-shadow:0 8cqw 14cqw rgba(0,0,0,.22);}
.cmp-strip{position:absolute;inset:0;}
.cmp-strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;}
.cmp-strip .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.6) 100%);}
.cmp-strip.s1{clip-path:inset(0 0 75% 0);animation:cmpStripL 8.5s var(--ez) infinite;}
.cmp-strip.s2{clip-path:inset(25% 0 50% 0);animation:cmpStripR 8.5s var(--ez) infinite;}
.cmp-strip.s3{clip-path:inset(50% 0 25% 0);animation:cmpStripL 8.5s var(--ez) infinite;}
.cmp-strip.s4{clip-path:inset(75% 0 0 0);animation:cmpStripR 8.5s var(--ez) infinite;}
.cmp-seams{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;background:repeating-linear-gradient(180deg,transparent 0,transparent 25%,rgba(0,0,0,.18) 25%,rgba(0,0,0,.18) 25.4%);}

.cmp-copy{position:absolute;left:5%;bottom:7%;z-index:3;}
.cmp-kicker{display:inline-block;background:var(--acid);color:var(--ink);font-weight:800;font-size:2cqw;letter-spacing:.07em;text-transform:uppercase;padding:.5cqw 1.4cqw;border-radius:100px;animation:cmpCopy 8.5s var(--ez-spring) infinite;}
.cmp-head{display:block;margin-top:1.5cqw;color:#fff;font-family:'Geologica',sans-serif;font-weight:800;font-size:6cqw;line-height:.98;letter-spacing:-.02em;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.45);animation:cmpCopy 8.5s var(--ez-spring) infinite;}
.cmp-brand{position:absolute;right:5%;top:7%;z-index:3;height:4cqw;animation:cmpCopy 8.5s var(--ez) infinite;}

.cmp-night{position:absolute;inset:0;z-index:4;background:#0a0e1c;opacity:0;animation:cmpNight 8.5s var(--ez) infinite;}
.cmp-flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;mix-blend-mode:screen;animation:cmpFlash 8.5s ease infinite;}
.cmp-glow{position:absolute;inset:0;z-index:5;mix-blend-mode:screen;opacity:0;animation:cmpGlow 8.5s var(--ez) infinite;
  background:radial-gradient(ellipse 26% 60% at 17% 0%,rgba(255,247,214,.55),transparent 72%),
            radial-gradient(ellipse 26% 60% at 50% 0%,rgba(255,247,214,.5),transparent 72%),
            radial-gradient(ellipse 26% 60% at 83% 0%,rgba(255,247,214,.55),transparent 72%);}
.cmp-glint{position:absolute;top:-20%;left:-45%;width:26%;height:140%;z-index:6;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-12deg);opacity:0;animation:cmpGlint 8.5s ease infinite;}

@keyframes cmpStripL{0%{transform:translateX(-118%)}4%{transform:translateX(-118%)}34%,100%{transform:translateX(0)}}
@keyframes cmpStripR{0%{transform:translateX(118%)}8%{transform:translateX(118%)}40%,100%{transform:translateX(0)}}
@keyframes cmpCopy{0%,42%{opacity:0;transform:translateY(1.6cqw)}52%,100%{opacity:1;transform:none}}
@keyframes cmpNight{0%,44%{opacity:.42}58%,100%{opacity:0}}
@keyframes cmpFlash{0%,52%{opacity:0}56%{opacity:.5}62%,100%{opacity:0}}
@keyframes cmpGlow{0%,54%{opacity:0}66%,100%{opacity:1}}
@keyframes cmpBulb{0%,52%{box-shadow:0 0 1.4cqw .3cqw rgba(255,243,200,.25);background:#e9e6cf}60%,100%{box-shadow:0 0 2.4cqw 1cqw rgba(255,243,200,.6);background:#fff7da}}
@keyframes cmpGlint{0%,72%{opacity:0;transform:translateX(0) skewX(-12deg)}78%{opacity:1}90%{opacity:1;transform:translateX(340cqw) skewX(-12deg)}94%,100%{opacity:0;transform:translateX(340cqw) skewX(-12deg)}}
@keyframes cmpSeam{0%{opacity:0}4%{opacity:1}96%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .cmp-canvas,.cmp-strip,.cmp-kicker,.cmp-head,.cmp-brand,.cmp-night,.cmp-flash,.cmp-glow,.cmp-glint,.cmp-lamp .bulb{animation:none!important;}
  .cmp-strip{transform:none;}
  .cmp-night,.cmp-flash,.cmp-glint{opacity:0;}
  .cmp-glow{opacity:1;}
}
@media (max-width:860px){ .cmp-canvas{ order:-1; } }

/* пакеты услуг: вариант 2x2 (4 карточки) — Campaigns */
.svc-pack-grid.pk4{grid-template-columns:repeat(2,1fr);}
@media (max-width:620px){.svc-pack-grid.pk4{grid-template-columns:1fr;}}

/* ============================================================
   DESIGN SUPPORT — ставки специалистов + калькулятор
   ============================================================ */
.rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px;}
.rate-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:6px;}
.rate-card h3{font-weight:600;font-size:clamp(17px,1.9vw,20px);}
.rate-card p{color:var(--ink-2);font-size:14px;line-height:1.45;flex:1;}
.rate-card .rate{margin-top:10px;font-family:'Geologica',sans-serif;font-weight:800;font-size:clamp(20px,2.4vw,26px);white-space:nowrap;}
.rate-card .rate span{font-size:14px;font-weight:600;color:var(--ink-3);}

/* пакеты: часы + под-строка цены */
.svc-pack-hours{font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--acid-deep);}
.svc-pack-card--hl .svc-pack-hours{color:#3a4a0c;}
.svc-pack-sub{margin-top:6px;color:#8a8a86;font-size:14px;}
.svc-pack-card--hl .svc-pack-sub{color:#3a4a0c;}

/* калькулятор */
.calc-presets{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:30px 0 22px;}
.calc-presets-lbl{font-size:14px;color:var(--ink-3);font-weight:600;margin-right:2px;}
.calc-preset{font:inherit;font-weight:600;font-size:14px;border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:9px 16px;border-radius:100px;cursor:pointer;transition:.2s;}
.calc-preset:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
.calc-reset{font:inherit;font-weight:600;font-size:14px;border:0;background:transparent;color:var(--ink-3);padding:9px 6px;cursor:pointer;text-decoration:underline;}
.calc-reset:hover{color:var(--ink);}

.calc{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start;}
.calc-rows{display:flex;flex-direction:column;gap:10px;}
.calc-row{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;}
.calc-role b{display:block;font-weight:600;font-size:16px;}
.calc-role span{font-size:13px;color:var(--ink-3);}
.calc-rate{font-weight:700;font-size:14px;color:var(--ink-2);white-space:nowrap;}
.calc-step{display:flex;align-items:center;gap:10px;}
.calc-step button{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font-size:18px;font-weight:700;cursor:pointer;line-height:1;color:var(--ink);flex-shrink:0;}
.calc-step button:hover{background:var(--ink);color:#fff;}
.calc-step .hrs{min-width:48px;text-align:center;font-weight:700;font-size:15px;}
.calc-step .hrs small{display:block;font-size:10px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;}
/* убираем double-tap-zoom на тач-устройствах при частом тапе по кнопкам калькулятора */
.calc-step button,.calc-preset,.calc-reset{touch-action:manipulation;}

.calc-out{position:sticky;top:20px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:28px;}
.calc-out-lbl{font-size:13px;color:#9a9a9a;letter-spacing:.04em;text-transform:uppercase;}
.calc-out-big{font-family:'Geologica',sans-serif;font-weight:800;font-size:clamp(30px,4vw,42px);line-height:1;margin:6px 0 2px;}
.calc-out-meta{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:15px;color:#cfcfcf;}
.calc-out-meta b{color:#fff;}
.calc-out-disc{display:inline-block;margin-top:12px;background:var(--acid);color:var(--ink);font-weight:800;font-size:13px;padding:5px 12px;border-radius:100px;}
.calc-out .btn{margin-top:20px;width:100%;text-align:center;}
.calc-out-hint{margin-top:14px;font-size:12.5px;color:#8a8a86;line-height:1.5;}

@media (max-width:900px){ .rate-grid{grid-template-columns:repeat(2,1fr);} .calc{grid-template-columns:1fr;} .calc-out{position:static;} }
@media (max-width:560px){ .rate-grid{grid-template-columns:1fr;} .calc-row{grid-template-columns:1fr auto;grid-template-rows:auto auto;} .calc-rate{grid-column:2;grid-row:1;text-align:right;} .calc-step{grid-column:1 / -1;justify-content:flex-end;margin-top:4px;} }

/* ============================================================
   DESIGN SUPPORT — баннер «канбан-поток задач» (ds-*)
   ============================================================ */
.ds-canvas{position:relative;aspect-ratio:4/3.2;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);container-type:inline-size;animation:dsSeam 8s linear infinite;--sh:15.5cqw;}
.ds-bar{position:absolute;top:0;left:0;right:0;height:7cqw;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1.4cqw;padding:0 2.6cqw;z-index:9;}
.ds-bar i{width:1.7cqw;height:1.7cqw;border-radius:50%;background:var(--line);}
.ds-bar span{font-size:2.1cqw;font-weight:700;color:var(--ink-3);letter-spacing:.04em;}
.ds-board{position:absolute;left:0;right:0;top:7cqw;bottom:0;padding:3cqw;display:flex;gap:2.4cqw;align-items:flex-start;}
.ds-col{flex:1;display:flex;flex-direction:column;gap:2cqw;min-width:0;}
.ds-col-h{display:flex;align-items:center;justify-content:space-between;}
.ds-col-h b{font-size:2.2cqw;font-weight:700;}
.ds-col-h .cnt{font-size:1.8cqw;font-weight:700;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:100px;padding:.3cqw 1.4cqw;}
.ds-col.done .ds-col-h b{color:var(--acid-deep);}
.ds-slot{flex-shrink:0;height:0;border-radius:2cqw;}
.ds-slot-q{animation:dsSlotQ 8s var(--ez) infinite;}
.ds-slot-w{animation:dsSlotW 8s var(--ez) infinite;}
.ds-slot-d{animation:dsSlotD 8s var(--ez) infinite;}
.ds-card{flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:2cqw;padding:1.8cqw;display:flex;flex-direction:column;gap:1.2cqw;box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.05);}
.ds-tag{align-self:flex-start;font-size:1.6cqw;font-weight:700;letter-spacing:.03em;padding:.4cqw 1.2cqw;border-radius:100px;background:var(--bg-soft);color:var(--ink-2);display:flex;align-items:center;gap:.8cqw;}
.ds-tag::before{content:"";width:1.2cqw;height:1.2cqw;border-radius:50%;background:var(--dot,#9aa);}
.ds-bar1,.ds-bar2{height:1.3cqw;border-radius:.6cqw;background:#ececea;}
.ds-bar1{width:88%;} .ds-bar2{width:56%;}
.ds-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4cqw;}
.ds-ava{width:3.4cqw;height:3.4cqw;border-radius:50%;background:#dfe7c4;display:flex;align-items:center;justify-content:center;font-size:1.5cqw;font-weight:800;color:#5b6b1f;}
.ds-ghost{width:3.4cqw;height:3.4cqw;border-radius:50%;border:1.5px dashed #c9c9c4;}
.ds-hero{position:absolute;width:26cqw;z-index:6;left:16.5%;top:18.5%;transform:translateX(-50%);background:#fff;border:1px solid var(--line);border-radius:2cqw;padding:1.8cqw;display:flex;flex-direction:column;gap:1.2cqw;box-shadow:0 3cqw 7cqw rgba(0,0,0,.16);animation:dsHero 8s var(--ez) infinite;}
.ds-hero .ds-tag{--dot:#4c7cf3;}
.ds-hero-prog{height:1.3cqw;border-radius:.6cqw;background:#ececea;overflow:hidden;}
.ds-hero-prog i{display:block;height:100%;width:0;background:var(--acid);animation:dsProg 8s var(--ez) infinite;}
.ds-hero-foot{display:flex;align-items:center;justify-content:space-between;}
.ds-hero-ava{width:3.6cqw;height:3.6cqw;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6cqw;font-weight:800;opacity:0;transform:scale(.4);animation:dsAva 8s var(--ez-spring) infinite;}
.ds-hero-state{font-size:1.6cqw;font-weight:700;color:var(--ink-3);}
.ds-stamp{position:absolute;top:-2cqw;right:-2cqw;width:7cqw;height:7cqw;border-radius:50%;background:var(--acid);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.3) rotate(-18deg);animation:dsStamp 8s var(--ez-spring) infinite;box-shadow:0 1.4cqw 3cqw rgba(0,0,0,.18);}
.ds-stamp svg{width:3.6cqw;height:3.6cqw;}
@keyframes dsHero{0%,16%{left:16.5%}24%,58%{left:50%}66%,100%{left:83.5%}}
@keyframes dsSlotQ{0%,14%{height:var(--sh)}22%,100%{height:0}}
@keyframes dsSlotW{0%,18%{height:0}26%,56%{height:var(--sh)}64%,100%{height:0}}
@keyframes dsSlotD{0%,58%{height:0}66%,100%{height:var(--sh)}}
@keyframes dsProg{0%,26%{width:0}50%{width:100%}100%{width:100%}}
@keyframes dsAva{0%,22%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}56%{opacity:1;transform:scale(1)}62%,100%{opacity:0;transform:scale(.6)}}
@keyframes dsStamp{0%,64%{opacity:0;transform:scale(.3) rotate(-18deg)}74%{opacity:1;transform:scale(1) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes dsSeam{0%{opacity:0}4%{opacity:1}96%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ds-hero,.ds-hero-prog i,.ds-hero-ava,.ds-stamp,.ds-slot,.ds-canvas{animation:none!important;}
  .ds-hero{left:83.5%;top:18.5%;} .ds-hero-prog i{width:100%;} .ds-hero-ava{opacity:0;}
  .ds-stamp{opacity:1;transform:scale(1) rotate(-8deg);} .ds-slot-d{height:var(--sh);}
}
@media (max-width:860px){ .ds-canvas{ order:-1; } }

/* ============================================================
   WEBSITES — баннер «код → готовая страница» (web-*), razrabotka-saytov.html
   ============================================================ */
.web-canvas{position:relative;aspect-ratio:4/3.2;border-radius:var(--radius);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line);container-type:inline-size;}
.web-bar{position:absolute;top:0;left:0;right:0;height:7.3cqw;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1.5cqw;padding:0 2.3cqw;z-index:9;}
.web-bar i{width:1.73cqw;height:1.73cqw;border-radius:50%;background:var(--line);}
.web-url{flex:1;height:3.6cqw;border-radius:100px;background:var(--bg-soft);display:flex;align-items:center;padding:0 2.2cqw;font-family:'Manrope',sans-serif;font-size:2cqw;font-weight:700;color:var(--ink-3);letter-spacing:.02em;}
.web-body{position:absolute;inset:7.3cqw 0 0 0;display:flex;animation:webSeam 9s linear infinite;}
.web-code{width:46%;background:#0e0e0e;padding:3.4cqw 2.6cqw;display:flex;flex-direction:column;gap:1.5cqw;overflow:hidden;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:2.05cqw;line-height:1.45;color:#cfcfcc;}
.web-ln{white-space:pre;clip-path:inset(0 100% 0 0);}
.web-ln .t-tag{color:#7da2ff;}
.web-ln .t-str{color:var(--acid);}
.web-ln .t-pun{color:#6f6f6c;}
.web-cur{width:1cqw;height:2.5cqw;background:var(--acid);animation:webBlink 1.05s steps(1) infinite;}
.web-page{flex:1;background:#fff;padding:3.2cqw;display:flex;flex-direction:column;gap:2.2cqw;position:relative;}
.web-blk{opacity:0;}
.web-phero{height:15cqw;border-radius:1.7cqw;background:linear-gradient(135deg,var(--acid),var(--acid-deep));padding:2.4cqw;display:flex;flex-direction:column;justify-content:center;gap:1.3cqw;}
.web-phero .h{height:2cqw;width:70%;border-radius:.7cqw;background:rgba(14,14,14,.85);}
.web-phero .h.s{width:46%;height:1.4cqw;background:rgba(14,14,14,.45);}
.web-btn{height:4.8cqw;width:42%;border-radius:100px;background:var(--ink);}
.web-row{display:flex;gap:2.2cqw;}
.web-card{flex:1;height:10.5cqw;border-radius:1.5cqw;background:var(--bg-soft);border:1px solid var(--line);}
.web-form{height:5.2cqw;border-radius:1.3cqw;background:var(--bg-soft);border:1px solid var(--line);}
.web-done{position:absolute;right:3cqw;bottom:3cqw;display:flex;align-items:center;gap:1.1cqw;background:var(--ink);color:#fff;font-family:'Manrope',sans-serif;font-weight:700;font-size:2.1cqw;padding:1.2cqw 2.2cqw;border-radius:100px;opacity:0;box-shadow:0 6px 16px rgba(0,0,0,.22);z-index:5;}
.web-done .ck{width:2.4cqw;height:2.4cqw;border-radius:50%;background:var(--acid);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% no-repeat;}
.web-l1{animation:webL1 9s var(--ez) infinite;}
.web-l2{animation:webL2 9s var(--ez) infinite;}
.web-l3{animation:webL3 9s var(--ez) infinite;}
.web-l4{animation:webL4 9s var(--ez) infinite;}
.web-l5{animation:webL5 9s var(--ez) infinite;}
.web-phero{animation:webHero 9s var(--ez) infinite;}
.web-btn{animation:webBtn 9s var(--ez) infinite;}
.web-c1{animation:webCard1 9s var(--ez) infinite;}
.web-c2{animation:webCard2 9s var(--ez) infinite;}
.web-form{animation:webForm 9s var(--ez) infinite;}
.web-done{animation:webDone 9s var(--ez-spring) infinite;}
@keyframes webL1{0%,2%{clip-path:inset(0 100% 0 0)}7%,100%{clip-path:inset(0 0 0 0)}}
@keyframes webL2{0%,7%{clip-path:inset(0 100% 0 0)}12%,100%{clip-path:inset(0 0 0 0)}}
@keyframes webL3{0%,12%{clip-path:inset(0 100% 0 0)}17%,100%{clip-path:inset(0 0 0 0)}}
@keyframes webL4{0%,17%{clip-path:inset(0 100% 0 0)}22%,100%{clip-path:inset(0 0 0 0)}}
@keyframes webL5{0%,22%{clip-path:inset(0 100% 0 0)}27%,100%{clip-path:inset(0 0 0 0)}}
@keyframes webHero{0%,31%{opacity:0;transform:translateY(2.6cqw)}38%,100%{opacity:1;transform:translateY(0)}}
@keyframes webBtn{0%,39%{opacity:0;transform:translateY(2cqw)}45%,100%{opacity:1;transform:translateY(0)}}
@keyframes webCard1{0%,46%{opacity:0;transform:translateY(2cqw)}52%,100%{opacity:1;transform:translateY(0)}}
@keyframes webCard2{0%,51%{opacity:0;transform:translateY(2cqw)}57%,100%{opacity:1;transform:translateY(0)}}
@keyframes webForm{0%,58%{opacity:0;transform:translateY(2cqw)}64%,100%{opacity:1;transform:translateY(0)}}
@keyframes webDone{0%,70%{opacity:0;transform:scale(.4)}79%,100%{opacity:1;transform:scale(1)}}
@keyframes webSeam{0%{opacity:0}3%{opacity:1}94%{opacity:1}100%{opacity:0}}
@keyframes webBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .web-body,.web-ln,.web-blk,.web-phero,.web-btn,.web-c1,.web-c2,.web-form,.web-done,.web-cur{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important;}
}
@media (max-width:860px){ .web-canvas{order:-1;} }

/* ============================================================
   SPECIAL — задачи вне пула (раздел на Extra/performance-i-ai)
   ============================================================ */
.svc-special{padding:clamp(48px,7vw,88px) 0;}
.svc-special .section-title{margin:6px 0 14px;}
.spec-case{margin-top:30px;background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--acid);border-radius:var(--radius);padding:clamp(28px,4vw,44px);}
.spec-tag{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.spec-case-h{font-weight:600;font-size:clamp(22px,2.6vw,30px);margin:10px 0 12px;letter-spacing:-.02em;}
.spec-case-desc{color:var(--ink-2);font-size:clamp(15px,1.8vw,17px);line-height:1.6;max-width:760px;}
.spec-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.spec-tags span{font-family:'Manrope',sans-serif;font-weight:600;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 14px;}

/* street-63 — клубная подложка spec-case (чёрное+золото+зелёный) + ссылка */
.spec-case--s63{position:relative;overflow:hidden;background:linear-gradient(135deg,#0a0a0a 0%,#141614 55%,#172619 100%);border-color:#2a2e2a;border-left-color:#a8a9ad;}
.spec-case--s63::before{content:"♠";position:absolute;right:-2.2rem;bottom:-4.2rem;font-size:230px;line-height:1;color:#a8a9ad;opacity:.07;transform:rotate(-12deg);pointer-events:none;}
.spec-case--s63::after{content:"";position:absolute;right:-8%;top:-50%;width:55%;height:160%;background:radial-gradient(ellipse at center,rgba(168,169,173,.18),transparent 70%);pointer-events:none;}
.spec-case--s63 > *{position:relative;z-index:1;}
.spec-case--s63 .spec-tag{color:#a8a9ad;}
.spec-case--s63 .spec-case-h{color:#f9f5e3;}
.spec-case--s63 .spec-case-desc{color:#b9bab0;}
.spec-case--s63 .spec-tags span{color:#e6e6df;background:rgba(255,255,255,.05);border-color:#3a3e38;}
.spec-link{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;color:#0a0a0a;background:#a8a9ad;padding:11px 20px;border-radius:100px;text-decoration:none;transition:background .2s var(--ez);}
.spec-link:hover{background:#c2c3c6;}

/* spec-case street-63: двухколоночная — текст + скриншот */
.spec-case--s63{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,40px);align-items:center;}
@media(min-width:780px){.spec-case--s63{grid-template-columns:1.05fr .95fr;}}
.spec-shot{display:block;border-radius:14px;overflow:hidden;border:1px solid #2a2e2a;box-shadow:0 18px 44px rgba(0,0,0,.4);line-height:0;transition:border-color .2s var(--ez),transform .3s var(--ez);}
.spec-shot img{width:100%;height:auto;display:block;}
.spec-shot:hover{border-color:#a8a9ad;transform:translateY(-3px);}

/* ============================================================
   EXTRA / PERFORMANCE — баннер «живой дашборд» (ex-*)
   размеры в cqw (1cqw = 1% ширины канваса)
   ============================================================ */
.ex-canvas{position:relative;aspect-ratio:4/3.1;border-radius:var(--radius);overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line);container-type:inline-size;}
.ex-bar{position:absolute;top:0;left:0;right:0;height:7.3cqw;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:1.5cqw;padding:0 2.6cqw;z-index:9;}
.ex-bar i{width:1.73cqw;height:1.73cqw;border-radius:50%;background:var(--line);}
.ex-bar span{font-size:2.1cqw;font-weight:700;color:var(--ink-3);letter-spacing:.04em;}
.ex-live{margin-left:auto;display:flex;align-items:center;gap:1cqw;font-size:1.9cqw;color:var(--ink-3);}
.ex-live::before{content:'';width:1.4cqw;height:1.4cqw;border-radius:50%;background:var(--acid-deep);
  animation:exPulse 1.6s var(--ez) infinite;}
.ex-stage{position:absolute;inset:9.9cqw 2.6cqw 2.6cqw;display:flex;flex-direction:column;gap:2.6cqw;}

.ex-kpis{display:flex;gap:2.2cqw;}
.ex-kpi{flex:1;background:#fff;border:1px solid var(--line);border-radius:2.4cqw;padding:1.9cqw 2cqw;}
.ex-kpi .lbl{font-size:1.7cqw;color:var(--ink-3);font-weight:600;letter-spacing:.02em;}
.ex-kpi .val{font-family:'Geologica',sans-serif;font-weight:800;font-size:4.2cqw;line-height:1.1;
  margin-top:.5cqw;display:flex;align-items:baseline;gap:.6cqw;}
.ex-kpi .val .suf{font-size:2.4cqw;color:var(--ink-3);font-weight:700;}
.ex-kpi .up{font-size:1.8cqw;font-weight:800;color:#1c8a3b;}
.ex-kpi .up::before{content:'▲ ';font-size:1.4cqw;}

@property --ex-n1{syntax:'<integer>';inherits:false;initial-value:1090;}
@property --ex-n2{syntax:'<integer>';inherits:false;initial-value:305;}
@property --ex-n3{syntax:'<integer>';inherits:false;initial-value:41;}
.ex-n1::after{counter-reset:n var(--ex-n1);content:counter(n);}
.ex-n2::after{counter-reset:n var(--ex-n2);content:counter(n);}
.ex-n3::after{counter-reset:n var(--ex-n3);content:counter(n);}

.ex-chart{position:relative;flex:1;background:#fff;border:1px solid var(--line);
  border-radius:2.4cqw;padding:2.4cqw 2.6cqw 2cqw;overflow:hidden;}
.ex-chart .ttl{position:absolute;top:2cqw;left:2.6cqw;font-size:1.8cqw;font-weight:700;color:var(--ink-3);}
.ex-chart .pct{position:absolute;top:1.6cqw;right:2.6cqw;background:var(--acid);color:var(--ink);
  font-size:1.9cqw;font-weight:800;padding:.5cqw 1.6cqw;border-radius:100px;}
.ex-bars{position:absolute;left:2.6cqw;right:2.6cqw;bottom:2.2cqw;height:62%;display:flex;align-items:flex-end;gap:2.1cqw;}
.ex-bars i{flex:1;height:100%;background:linear-gradient(180deg,#dcdcd9,#e9e9e6);border-radius:1.2cqw 1.2cqw 0 0;
  transform:scaleY(0);transform-origin:bottom;}
.ex-bars i:last-child{background:linear-gradient(180deg,var(--acid),var(--acid-deep));}
.ex-spark{position:absolute;left:2.6cqw;right:2.6cqw;bottom:2.2cqw;height:72%;}
.ex-spark svg{width:100%;height:100%;overflow:visible;}
.ex-ln{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:200;stroke-dashoffset:200;}
.ex-dot{fill:var(--acid-deep);stroke:#fff;stroke-width:1.4;opacity:0;}

/* анимация: столбцы по одному → линия (цикл 12s) */
.ex-n1{animation:exN1 12s var(--ez) infinite;}
.ex-n2{animation:exN2 12s var(--ez) infinite;}
.ex-n3{animation:exN3 12s var(--ez) infinite;}
.ex-bars i:nth-child(1){animation:exG1 12s var(--ez) infinite;}
.ex-bars i:nth-child(2){animation:exG2 12s var(--ez) infinite;}
.ex-bars i:nth-child(3){animation:exG3 12s var(--ez) infinite;}
.ex-bars i:nth-child(4){animation:exG4 12s var(--ez) infinite;}
.ex-bars i:nth-child(5){animation:exG5 12s var(--ez) infinite;}
.ex-bars i:nth-child(6){animation:exG6 12s var(--ez) infinite;}
.ex-bars i:nth-child(7){animation:exG7 12s var(--ez) infinite;}
.ex-ln{animation:exDraw 12s var(--ez) infinite;}
.ex-dot{animation:exDot 12s var(--ez) infinite;}

@keyframes exN1{0%,7%{--ex-n1:1090;}32%{--ex-n1:1240;}90%{--ex-n1:1240;}100%{--ex-n1:1240;}}
@keyframes exN2{0%,7%{--ex-n2:305;}32%{--ex-n2:340;}90%{--ex-n2:340;}100%{--ex-n2:340;}}
@keyframes exN3{0%,7%{--ex-n3:41;}32%{--ex-n3:47;}90%{--ex-n3:47;}100%{--ex-n3:47;}}
@keyframes exG1{0%,7%{transform:scaleY(0);}11%,100%{transform:scaleY(var(--h,1));}}
@keyframes exG2{0%,10%{transform:scaleY(0);}14%,100%{transform:scaleY(var(--h,1));}}
@keyframes exG3{0%,13%{transform:scaleY(0);}17%,100%{transform:scaleY(var(--h,1));}}
@keyframes exG4{0%,16%{transform:scaleY(0);}20%,100%{transform:scaleY(var(--h,1));}}
@keyframes exG5{0%,19%{transform:scaleY(0);}23%,100%{transform:scaleY(var(--h,1));}}
@keyframes exG6{0%,22%{transform:scaleY(0);}26%,100%{transform:scaleY(var(--h,1));}}
@keyframes exG7{0%,25%{transform:scaleY(0);}29%,100%{transform:scaleY(var(--h,1));}}
@keyframes exDraw{0%,34%{stroke-dashoffset:200;}54%,100%{stroke-dashoffset:0;}}
@keyframes exDot{0%,52%{opacity:0;}57%,100%{opacity:1;}}
@keyframes exPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.5);opacity:.4;}}

/* seam-фейд: непрозрачен на стыке 100%/0%, скрывает рестарт цикла */
.ex-canvas::after{content:'';position:absolute;inset:0;background:var(--bg-soft);opacity:0;pointer-events:none;
  z-index:40;animation:exSeam 12s linear infinite;}
@keyframes exSeam{0%{opacity:1;}6%{opacity:0;}90%{opacity:0;}100%{opacity:1;}}

@media (max-width:860px){ .ex-canvas{order:-1;} }

/* reduced-motion → статичный финальный кадр (полные числа, столбцы выросли, линия нарисована) */
@media (prefers-reduced-motion: reduce){
  .ex-n1,.ex-n2,.ex-n3,.ex-bars i,.ex-ln,.ex-dot,.ex-live::before,.ex-canvas::after{animation:none!important;}
  .ex-bars i{transform:scaleY(var(--h,1));}
  .ex-ln{stroke-dashoffset:0;}
  .ex-dot{opacity:1;}
  .ex-n1::after{content:'1240';}
  .ex-n2::after{content:'340';}
  .ex-n3::after{content:'47';}
  .ex-canvas::after{opacity:0;}
}

/* ============ ФОРМА ЗАЯВКИ (#contact, на кислотной секции) ============ */
.lead-form {
  margin-top: 22px; max-width: 760px;
  background: var(--bg); border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px); color: var(--ink);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}
.lead-form-head { font-weight: 700; font-size: 14px; letter-spacing: .03em; margin-bottom: 18px; color: var(--ink); }
.lf-row { display: flex; gap: 12px; }
.lf-row .lf-input { flex: 1 1 0; min-width: 0; }
.lf-input {
  display: block; width: 100%; margin-bottom: 12px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 13px 15px; transition: border-color .2s var(--ez), background .2s var(--ez);
}
.lf-input::placeholder { color: var(--ink-3); }
.lf-input:focus { outline: none; border-color: var(--ink); background: #fff; }
.lf-textarea { resize: vertical; min-height: 80px; }
/* honeypot — скрыт от людей, видим ботам */
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lf-consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.lf-consent input { margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--ink); }
.lf-consent a { color: var(--ink); text-decoration: underline; }
.lf-submit { width: 100%; background: var(--ink); color: #fff; }
.lf-submit:hover { background: #262626; }
.lf-submit:disabled { opacity: .6; cursor: default; }
.lf-status { margin-top: 12px; font-size: 14px; font-weight: 600; color: #8a1f1f; }
.lf-done { font-size: 16px; font-weight: 600; color: var(--ink); padding: 6px 0; }
@media (max-width: 520px) { .lf-row { flex-direction: column; gap: 0; } }

/* ============ intl-tel-input: интеграция в .lf-input ============ */
.lf-row .iti { flex: 1 1 0; min-width: 0; }
.iti { width: 100%; display: block; margin-bottom: 12px; }
.iti .lf-input { margin-bottom: 0; }
.iti--separate-dial-code .lf-input { padding-left: 92px; }
.iti--separate-dial-code .iti__selected-flag { background: transparent; border-radius: 12px 0 0 12px; }
.iti--separate-dial-code .iti__selected-flag:hover,
.iti--separate-dial-code .iti__selected-flag:focus { background: rgba(0,0,0,.04); }
.iti__selected-dial-code { color: var(--ink); font-weight: 600; }
.iti__country-list { border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,.16); }

/* ============ Услуга чипами ============ */
.lf-label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 2px 0 9px; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.lf-chip {
  padding: 9px 15px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer; transition: background .15s var(--ez), border-color .15s var(--ez);
}
.lf-chip:hover { border-color: var(--ink); }
.lf-chip.is-active { background: var(--acid); border-color: var(--acid); }

/* ============ Запись голосового (Telegram-стиль) ============ */
.lf-voice { margin-bottom: 12px; }
/* display на блоках-состояниях перебивает атрибут hidden — возвращаем приоритет hidden */
.lf-rec-start[hidden], .lf-recording[hidden], .lf-clip[hidden] { display: none !important; }
.lf-rec-start { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 16px; padding: 12px 16px; cursor: pointer; font: inherit; transition: border-color .2s var(--ez), background .2s var(--ez); }
.lf-rec-start:hover { border-color: var(--ink); }
.lf-mic { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lf-mic svg { width: 20px; height: 20px; color: #fff; }
.lf-rec-txt b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; }
.lf-rec-txt span { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.lf-recording { display: flex; align-items: center; gap: 13px; background: #fff; border: 1.5px solid #ec4242; border-radius: 16px; padding: 11px 16px; }
.lf-rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #ec4242; flex-shrink: 0; animation: lfpulse 1.1s infinite; }
@keyframes lfpulse { 50% { opacity: .3; } }
.lf-rec-time { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 34px; }
.lf-wave { flex: 1; display: flex; align-items: center; gap: 1.5px; height: 30px; overflow: hidden; }
.lf-wave i { flex: 1; height: 14%; background: var(--ink); border-radius: 1.5px; min-width: 2px; max-width: 3px; margin: 0 auto; }
.lf-recording .lf-wave i { transition: height .09s linear; }   /* высоту задаёт голос (Web Audio), не CSS */
.lf-stop { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lf-stop span { width: 13px; height: 13px; background: #fff; border-radius: 3px; }
.lf-clip { display: flex; align-items: center; gap: 13px; background: var(--ink); border-radius: 16px; padding: 11px 14px; }
.lf-play { width: 40px; height: 40px; border-radius: 50%; background: var(--acid); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lf-play svg { width: 15px; height: 15px; color: var(--ink); margin-left: 2px; }
.lf-play.is-playing svg { margin-left: 0; }
.lf-clip .lf-wave i { background: #54565a; transition: background .1s linear; }
.lf-clip .lf-wave i.on { background: var(--acid); }
.lf-clip-time { color: #cfcfcf; }
.lf-clip-del { background: none; border: 0; color: #8a8a8a; cursor: pointer; flex-shrink: 0; display: flex; padding: 4px; }
.lf-clip-del svg { width: 17px; height: 17px; }
@media (max-width: 520px) { .lf-rec-txt b { font-size: 13.5px; } .lf-rec-txt span { font-size: 11.5px; } .lf-mic { width: 42px; height: 42px; } }

/* Пояснение обязательных полей */
.lf-req { font-size: 12px; color: var(--ink-3); margin: -2px 0 12px; }

/* Инлайн-ошибка телефона (на blur) */
.lf-phone-err { font-size: 12.5px; font-weight: 600; color: #c0392b; margin: -6px 0 12px; }
.lf-input.lf-err { border-color: #e23b3b; background: #fff; }

/* Переключатель языка RU|EN — адаптивный текст (инвертируется как навигация) */
.lang-switch { display:inline-flex; align-items:center; gap:6px; margin-left:14px; font-size:13px; font-weight:700; white-space:nowrap; transition:color .35s var(--ez); }
.lang-switch a { color:var(--ink-3,#8a8a86); text-decoration:none; transition:color .35s var(--ez); }
.lang-switch a:hover, .lang-switch a.active { color:var(--ink,#0e0e0e); }
.lang-switch span { color:var(--line,#d8d8d2); }
/* над тёмными секциями — белый, как .nav a */
html.hdr-dark .lang-switch a { color:rgba(255,255,255,.55); }
html.hdr-dark .lang-switch a:hover, html.hdr-dark .lang-switch a.active { color:#fff; }
html.hdr-dark .lang-switch span { color:rgba(255,255,255,.3); }

/* ===== Фильтр кейсов (вид A на ПК, вид C на мобилке) ===== */
.cf-hide { display: none !important; }
.case-filter { margin: clamp(34px, 5vw, 56px) 0 clamp(28px, 4vw, 44px); }
.cf-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 24px; }
.cf-label { width: 92px; flex-shrink: 0; margin-top: 10px; font-weight: 700; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.cf-chip-wrap { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 0; }
.cf-chip { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 100px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; transition: .18s var(--ez); }
.cf-chip:hover { border-color: #cfcfca; color: var(--ink); }
.cf-chip.cf-on { background: var(--acid); border-color: var(--acid-deep); color: #0e0e0e; }
.cf-tools { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.cf-search--wide { max-width: 320px; flex: 1; }
.cf-search input { font: inherit; font-size: 14px; width: 100%; padding: 11px 16px; border: 1px solid var(--line); border-radius: 100px; background: #fff; outline: none; }
.cf-search input:focus { border-color: #bcbcb6; box-shadow: 0 0 0 4px rgba(201, 245, 52, .25); }
.cf-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; color: var(--ink-3); font-size: 13.5px; font-weight: 600; }
.cf-reset { font: inherit; font-weight: 600; font-size: 13px; color: var(--ink-2); background: none; border: 0; border-bottom: 1px dashed #c7c7c2; cursor: pointer; padding: 1px 0; }
.cf-reset:hover { color: var(--ink); }
.cf-empty { text-align: center; padding: 60px 20px; color: var(--ink-3); font-weight: 600; }
/* вид C (дропдауны) — скрыт на ПК */
.cf-bar { display: none; }
.cf-dd { position: relative; }
.cf-dd-btn { font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 100px; background: #fff; color: var(--ink-2); cursor: pointer; }
.cf-badge { background: var(--acid); color: #0e0e0e; font-size: 11px; font-weight: 800; border-radius: 100px; padding: 1px 8px; }
.cf-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 18px 50px -18px rgba(0,0,0,.25); padding: 8px; min-width: 230px; display: none; flex-direction: column; gap: 2px; }
.cf-dd.cf-open .cf-pop { display: flex; }
.cf-pop-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.cf-pop-item:hover { background: var(--bg-soft); }
.cf-pop-item input { accent-color: var(--acid-deep); width: 16px; height: 16px; }

@media (max-width: 760px) {
  .cf-chips { display: none; }           /* прячем вид A */
  .cf-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }  /* показываем вид C */
  .cf-tools { margin-top: 12px; padding-top: 12px; }
  .cf-search--wide { display: none; }     /* поиск из вида C достаточно (в .cf-bar) */
  .cf-meta { width: 100%; margin-left: 0; }
}