/* ===========================================================
   design-v3.css — единый графический слой ИндигоМ (09.2026)
   Подключается ПОСЛЕДНИМ (приоритет 1000, после ux-fixes.css).
   Только оформление: тексты, заголовки, ссылки и разметка не меняются.
   Фирменный стиль: палитра #0050C8 / #070B74 / #04074E / #91ADFF / #0F2E8A,
   серые #EDEDED / #D1D1D7 / #8E9095 / #525256, шрифты Bounded · Good Headline Pro · Days One,
   фирменная графика brand/elements + brand/backgrounds.
   =========================================================== */

:root {
  --g-brand: linear-gradient(135deg, #0050c8 0%, #0f2e8a 60%, #04074e 100%);
  --g-pale:  linear-gradient(135deg, #91adff 0%, #0050c8 100%);
  --g-line:  linear-gradient(90deg, #91adff, #0050c8 55%, rgba(0,80,200,0));
  --glow-blue: 0 26px 60px -28px rgba(0, 80, 200, .55);
  --card-r: 20px;
  --line-soft: rgba(7, 11, 116, .09);
  --line-pale: rgba(145, 173, 255, .28);
}

/* ---------- Ритм секций ---------- */
.section { --section-y: 96px; }
.section > .container { position: relative; }
.section-head { position: relative; margin-bottom: 44px; }
.section-head .h2 { max-width: 860px; }
.section-head.center .h2 { margin-inline: auto; }
.section-head::after {
  content: ""; display: block; width: 72px; height: 4px; border-radius: 4px;
  background: var(--g-pale); margin-top: 20px;
}
.section-head.center::after { margin-inline: auto; }
.section--night .section-head::after, .section--dark .section-head::after { background: linear-gradient(90deg, #91adff, #52b6f9); }

/* Призрачных номеров разделов нет намеренно: разделы страницы не последовательность,
   а контурная цифра наезжала на заголовки в две строки (проверено на 32 страницах). */
.section-head[data-index]::before { content: none; }

/* ---------- Фирменная графика в фонах секций ---------- */
.section--light > .container::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -220px; top: -120px; width: 620px; height: 620px;
  background: url("brand/backgrounds/partners-halftone.webp") center / contain no-repeat;
  opacity: .16; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.section--light > .container::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -260px; bottom: -260px; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(145, 173, 255, .28), rgba(145, 173, 255, 0) 65%);
}
.section--paper > .container::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -120px -400px;
  background-image: linear-gradient(rgba(7, 11, 116, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 11, 116, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(60% 60% at 80% 20%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 80% 20%, #000, transparent 75%);
}
.section--night > .container::before, .section--dark > .container::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -320px; top: -60px; width: 600px; height: 600px;
  background: url("brand/elements/spheres.webp") center / contain no-repeat;
  opacity: .42; filter: saturate(1.1);
}
.section--night > .container::after, .section--dark > .container::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -300px; bottom: -320px; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 80, 200, .45), rgba(0, 80, 200, 0) 62%);
}
.section > .container { z-index: 2; }
.section > .container::before, .section > .container::after { z-index: -1; }
.section > .container > * { position: relative; z-index: 1; }

/* ---------- Кнопки ---------- */
.btn { border-radius: 14px; font-weight: 700; letter-spacing: .01em; transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, border-color .22s, color .22s; }
.btn--primary { background: var(--g-brand); box-shadow: 0 14px 30px -14px rgba(0, 80, 200, .75), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn--primary:hover { background: linear-gradient(135deg, #1a63d9 0%, #0f2e8a 60%, #070b74 100%); box-shadow: 0 20px 40px -14px rgba(0, 80, 200, .8); transform: translateY(-2px); }
.btn--ghost-light { border: 1px solid rgba(145, 173, 255, .55); background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.btn--secondary { border: 1.5px solid rgba(0, 80, 200, .35); background: #fff; }
.btn--secondary:hover { border-color: var(--blue); box-shadow: var(--glow-blue); transform: translateY(-2px); }

/* ---------- Первый экран услуг (.seohero) ---------- */
.seohero { isolation: isolate; }
/* Длинные слова («нейросетей», «продвижение») рвались посреди слова: колонка 566px при кегле 74px.
   Колонку расширяем, кегль ограничиваем — перенос только по границам слов. */
.seohero__inner { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
.seohero__title { font-size: clamp(38px, 4.6vw, 64px); overflow-wrap: normal; hyphens: manual; }
.seohero__title em { overflow-wrap: normal; }
.seohero__visual { min-height: 480px; }
.seohero__visual::before {
  content: ""; position: absolute; inset: -6% -10% -6% -4%; z-index: 0; pointer-events: none;
  background: url("brand/elements/spheres.webp") center / contain no-repeat;
  filter: drop-shadow(0 40px 60px rgba(0, 80, 200, .45));
  animation: iv3-float 9s ease-in-out infinite;
}
.seohero__visual::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 560px; height: 560px; transform: translate(-50%, -50%); z-index: -1;
  border-radius: 50%; background: radial-gradient(circle, rgba(0, 80, 200, .55), rgba(0, 80, 200, 0) 62%); pointer-events: none;
}
@keyframes iv3-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.seochip { border-radius: 999px; border: 1px solid rgba(145, 173, 255, .5); background: rgba(4, 7, 78, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .6); font-weight: 600; }
.seohero__triggers li { padding: 8px 14px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(145, 173, 255, .22); }
.seohero__price {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 22px 0 6px !important;
  padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(145, 173, 255, .32);
  background: rgba(255, 255, 255, .06) !important; color: #dbe4ff !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.seohero__price strong { color: #fff !important; font-family: var(--f-display); font-weight: 900; font-size: 22px !important; letter-spacing: -.01em; }
.seohero__eyebrow::before { background: var(--g-pale); opacity: 1; height: 2px; }

/* ---------- Единая карточка (светлые секции) ---------- */
.seo-pain__c, .seo-scope__i, .seo-adv__c, .seo-time__i, .web-pain, .zcard, .client, .mkt-ch, .mkt-dir, .smm-plat, .web-fmt,
.perk, .pgoal, .become-step, .seo-case, .outcome, .format, .tri, .pr-client, .case-card, .faq__item, .form-card {
  position: relative; border-radius: var(--card-r); border-color: var(--line-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 44px -30px rgba(7, 11, 116, .38);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s;
}
.seo-pain__c::after, .seo-scope__i::after, .seo-adv__c::after, .seo-time__i::after, .web-pain::after, .zcard::after, .mkt-ch::after, .smm-plat::after,
.perk::after, .pgoal::after, .become-step::after, .seo-case::after, .outcome::after, .format::after, .tri::after, .pr-client::after {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--g-pale); opacity: .9; pointer-events: none;
}
.seo-pain__c:hover, .seo-scope__i:hover, .seo-adv__c:hover, .seo-time__i:hover, .web-pain:hover, .zcard:hover, .client:hover, .mkt-ch:hover, .mkt-dir:hover, .smm-plat:hover,
.web-fmt:hover, .perk:hover, .pgoal:hover, .become-step:hover, .seo-case:hover, .outcome:hover, .format:hover, .tri:hover, .pr-client:hover {
  transform: translateY(-5px); border-color: rgba(0, 80, 200, .35); box-shadow: 0 30px 60px -30px rgba(0, 80, 200, .5);
}
/* Иконки-плитки: единый брендовый градиент вместо розового/бледного */
.seo-pain__ic, .seo-scope__i .ic, .seo-adv__ic, .web-pain__ic, .smm-plat__ic, .mkt-ch__ic, .pgoal__ic, .perk__ic, .web-check__ic, .rule__ic, .space-item__ic, .seo-guarantee__card .ic {
  background: var(--g-pale) !important; color: #fff !important; border-radius: 14px;
  box-shadow: 0 10px 22px -10px rgba(0, 80, 200, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.seo-pain__ic svg, .seo-scope__i .ic svg, .seo-adv__ic svg { stroke: #fff; }
.seo-pain__c p { font-size: 16.5px; color: var(--gray-700); }
.seo-scope__i { padding: 20px 22px; }
.seo-scope__i p { font-size: 15.5px; font-weight: 500; }

/* Преимущества: первая карточка — тёмная брендовая, остальные светлые */
.seo-adv { gap: 18px; }
.seo-adv__c:first-child { background: radial-gradient(120% 100% at 16% 0%, rgba(145, 173, 255, .28), transparent 55%), var(--g-brand); border-color: transparent; }
.seo-adv__c:first-child .seo-adv__ic { background: rgba(255, 255, 255, .16) !important; }
.seo-adv__c:first-child .seo-adv__t { color: #fff; }
.seo-adv__c:first-child .seo-adv__d { color: rgba(231, 238, 255, .86); }
.seo-adv__c:first-child::after { background: linear-gradient(90deg, #91adff, #52b6f9); }
.seo-adv__t { font-size: 19px; }
.seo-adv__d { font-size: 15px; }

/* ---------- Единая карточка (тёмные секции): стекло ---------- */
.scell, .principle, .web-check, .rule, .avstep, .br-step, .grade, .queue, .space-item, .pstat, .avstat, .seo-guarantee__card {
  background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)) !important;
  border: 1px solid var(--line-pale) !important; border-radius: var(--card-r);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -34px rgba(0, 0, 0, .7);
  transition: transform .26s var(--ease), border-color .26s, box-shadow .26s;
}
.scell:hover, .principle:hover, .rule:hover, .avstep:hover, .br-step:hover, .grade:hover, .queue:hover, .space-item:hover, .pstat:hover {
  transform: translateY(-4px); border-color: rgba(145, 173, 255, .6) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -30px rgba(0, 80, 200, .7);
}

/* ---------- Этапы: нумерация вместо галочек, сетка вместо столбика ---------- */
.seo-time { counter-reset: iv3step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.seo-time::before { display: none; }
.seo-time:has(> :nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* трёхколоночные сетки: 4 карточки → 2×2, остаток в одну карточку → во всю ширину */
.cases-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-grid:has(> :nth-child(3n + 1):last-child):not(:has(> :nth-child(4):last-child)) > :last-child { grid-column: 1 / -1; }
.co-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* без одиноких карточек в последнем ряду: двухколоночные сетки */
.seo-scope:has(> :nth-child(odd):last-child) > :last-child,
.seo-pain:has(> :nth-child(odd):last-child) > :last-child,
.seo-cases:has(> :nth-child(odd):last-child) > :last-child { grid-column: 1 / -1; }
/* без одиноких карточек в последнем ряду */
.seo-time:not(:has(> :nth-child(6))) > :nth-child(odd):last-child { grid-column: 1 / -1; }
.seo-time:has(> :nth-child(6)) > :nth-child(3n + 1):last-child { grid-column: 1 / -1; }
.seo-adv:has(> :nth-child(4):last-child), .seo-adv:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-adv:has(> :nth-child(3n + 1):last-child):not(:has(> :nth-child(4):last-child)) > :last-child { grid-column: 1 / -1; }
.seo-time__i { counter-increment: iv3step; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; padding: 24px 24px 26px; }
.seo-time__dot { width: 56px; height: 56px; border: 0; background: var(--g-brand); color: #fff; box-shadow: 0 12px 24px -10px rgba(0, 80, 200, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.seo-time__dot svg { display: none; }
.seo-time__dot::before { content: counter(iv3step); font-family: var(--f-display); font-weight: 900; font-size: 22px; line-height: 1; }
.seo-time__when { font-size: 11.5px; letter-spacing: .12em; }
.seo-time__what { font-size: 16px; }

/* ---------- Подробный текст: колонка чтения + липкая фирменная графика ---------- */
#details .seo-longread { max-width: none !important; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; align-items: start; }
#details .seo-longread__i { grid-column: 1; margin: 0 0 18px !important; padding: 26px 28px; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--card-r); box-shadow: 0 18px 40px -32px rgba(7, 11, 116, .35); }
#details .seo-longread__h { position: relative; padding-left: 18px !important; font-size: 23px !important; }
#details .seo-longread__h::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 4px; background: var(--g-pale); }
#details .seo-longread__b { font-size: 16.5px !important; }
#details .seo-longread::after {
  content: ""; grid-column: 2; grid-row: 1 / span 40; align-self: start; position: sticky; top: 110px; height: 420px;
  border-radius: 24px; background: url("brand/elements/spheres.webp") center 40% / 86% no-repeat, radial-gradient(120% 100% at 20% 0%, rgba(145, 173, 255, .35), transparent 60%), var(--g-brand);
  box-shadow: var(--glow-blue); pointer-events: none;
}

/* ---------- FAQ: номера вопросов ---------- */
.faq { counter-reset: iv3faq; gap: 14px; }
.faq__item { counter-increment: iv3faq; }
.faq__q { padding: 22px 24px 22px 26px; justify-content: flex-start; }
.faq__q .pm { margin-left: auto; }
.faq__q::before { content: counter(iv3faq, decimal-leading-zero); flex: none; font-family: var(--f-accent); font-size: 13px; letter-spacing: .08em; color: var(--blue); opacity: .75; margin-right: 6px; }
.faq__item:hover { border-color: rgba(0, 80, 200, .35); }
.faq__item[open] { box-shadow: 0 24px 50px -30px rgba(0, 80, 200, .45); }
.faq__item[open] .faq__q::before { opacity: 1; }
.faq__a { padding-left: 62px; }

/* ---------- Форма: градиентная рамка ---------- */
.form-card { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(145, 173, 255, .9), rgba(0, 80, 200, .35) 50%, rgba(145, 173, 255, .9)) border-box; border: 1.5px solid transparent; box-shadow: 0 34px 70px -34px rgba(7, 11, 116, .45); }
.field input[type=text], .field input[type=tel], .field input[type=email] { border-radius: 12px; }
.formblock > .container::before { opacity: .22; }

/* ---------- Ссылочный хаб: пилюли ---------- */
#hub a { border-radius: 999px !important; border-color: rgba(0, 80, 200, .22) !important; transition: background .2s, color .2s, border-color .2s, transform .2s; }
#hub a:hover { background: var(--blue) !important; color: #fff !important; border-color: var(--blue) !important; transform: translateY(-2px); }

/* ---------- Цифры и показатели ---------- */
.seo-case__metric, .pstat__v, .safe-stat__v, .avstat__v, .role__v, .seo-guarantee__big { background: linear-gradient(135deg, #0050c8, #04074e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section--night .seo-case__metric, .section--dark .seo-case__metric, .section--night .pstat__v, .section--dark .pstat__v, .section--night .safe-stat__v, .section--dark .safe-stat__v,
.section--night .avstat__v, .section--dark .avstat__v, .section--night .role__v, .section--dark .role__v, .seo-guarantee__big { background: linear-gradient(135deg, #ffffff 30%, #91adff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.seo-guarantee__big em { color: #91adff; -webkit-text-fill-color: #91adff; }

/* ---------- Линейка услуг (.br-serv): стили были только в brending.css, на SEO/Авито/SMM/Сайтах выводилась простыня ---------- */
.br-serv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.br-serv__c { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-soft); border-radius: var(--card-r); padding: 24px 24px 22px; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 20px 44px -30px rgba(7, 11, 116, .38); transition: transform .26s var(--ease), box-shadow .26s var(--ease), border-color .26s; }
.br-serv__c::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 4px 4px; background: var(--g-pale); pointer-events: none; }
.br-serv__c:hover { transform: translateY(-5px); border-color: rgba(0, 80, 200, .35); box-shadow: 0 30px 60px -30px rgba(0, 80, 200, .5); }
.br-serv__t { display: flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--blue-deep); margin: 0 0 8px; }
.br-serv__t .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--g-pale); box-shadow: 0 0 0 4px rgba(0, 80, 200, .12); }
.br-serv__t a { color: inherit; text-decoration: none; }
.br-serv__t a::after { content: ""; position: absolute; inset: 0; }
.br-serv__d { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--gray-700); }
.br-serv:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.br-serv:has(> :nth-child(3n + 1):last-child):not(:has(> :nth-child(4):last-child)) > :last-child { grid-column: 1 / -1; }
.section--night .br-serv__c, .section--dark .br-serv__c { background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); border-color: var(--line-pale); }
.section--night .br-serv__t, .section--dark .br-serv__t { color: #fff; }
.section--night .br-serv__d, .section--dark .br-serv__d { color: #dbe4ff; }
.seo-note { margin-top: 22px; }

/* Розовые иконки «болей» → фирменный градиент */
.av-pain__ic, .br-pain__ic, .pr-pain__ic, .web-pain__ic, .zcard__ic, .tri__ic { background: var(--g-pale) !important; color: #fff !important; box-shadow: 0 10px 22px -10px rgba(0, 80, 200, .7); }
.av-pain__ic svg, .br-pain__ic svg, .pr-pain__ic svg, .web-pain__ic svg, .tri__ic svg { stroke: #fff; }

/* ---------- Строки-списки без карточек (br-pain, av-pain, pr-pain) ---------- */
.br-pain, .av-pain, .pr-pain { border-radius: 14px; border-bottom-color: transparent; border-top-color: transparent; background: linear-gradient(90deg, rgba(145, 173, 255, .10), rgba(145, 173, 255, 0) 70%); margin-bottom: 8px; padding-left: 16px; padding-right: 16px; }
.br-pain:hover, .av-pain:hover, .pr-pain:hover { background: linear-gradient(90deg, rgba(0, 80, 200, .14), rgba(145, 173, 255, 0) 75%); }

/* ---------- Мобильные ---------- */
@media (max-width: 1024px) {
  .br-serv, .br-serv:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-serv > :last-child { grid-column: auto; }
  #details .seo-longread { grid-template-columns: minmax(0, 1fr); }
  #details .seo-longread::after { display: none; }
  .section-head[data-index]::before { font-size: 96px; top: -26px; }
}
@media (max-width: 760px) {
  .section { --section-y: 64px; }
  .section-head { margin-bottom: 30px; }
  .section-head[data-index]::before { display: none; }
  .seo-time, .seo-time:has(> :nth-child(6)), .seo-adv, .seo-adv:has(> :nth-child(4):last-child), .seo-adv:has(> :nth-child(2):last-child), .br-serv, .br-serv:has(> :nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
  .seo-time > :last-child, .seo-adv > :last-child, .br-serv > :last-child { grid-column: auto; }
  .seohero__visual { min-height: 260px; }
  .seohero__visual::after { width: 320px; height: 320px; }
  .section--night > .container::before, .section--dark > .container::before { width: 380px; height: 380px; right: -160px; top: -60px; opacity: .4; }
  .section--light > .container::before { width: 380px; height: 380px; right: -160px; }
  .faq__a { padding-left: 26px; }
  #details .seo-longread__i { padding: 20px 18px; }
}
@media (prefers-reduced-motion: reduce) { .seohero__visual::before { animation: none; } }