/* ============================================================================
   ТЕКСТОВЫЕ СТРАНИЦЫ - единый белый стиль. Заведено 04.10.2026 по слову Антона:
   «как на главной, но фон белый», «читается как обычная статья», «не так
   заморочено». Белый - потому что «магнитит к продажам».
   Блог сюда НЕ входит: у него свой, более нарядный стиль (css/blog.css), и он
   обязан выделяться.

   Страницы: услуги (/merch, /shelkografiya, /dtf-pechat, /vyshivka, /bannery,
   /podarki - body.svc-page, main.svc), /proizvodstvo (.prod), /faq (.faq2),
   /contacts (.contacts), /privacy (.legal).
   У каждой страницы остаётся свой inline-<style> со сеткой. Этот файл
   подключён ПОСЛЕ него и перекрашивает общие элементы: заголовки, списки,
   кнопки, плашки. Селекторы начинаются с body, чтобы перебить inline-правила
   вида «.svc h1» без !important.
   ============================================================================ */

:is(.svc-page, .prod-page, .faq-page, .contacts-page, .legal-page) {
  --in-ink: #17121f;
  --in-text: #2f2839;
  --in-muted: #655e74;
  --in-violet: #240762;
  --in-violet-2: #5B2D8E;
  --in-orange: #ed6d1d;
  --in-line: rgba(36, 7, 98, .1);
  --in-soft: #f7f4fc;
  position: relative;
  background: #fff;
  color: var(--in-ink);
}
/* мягкая лавандовая подложка под заголовком страницы и тонкая орбита справа */
:is(.svc-page, .prod-page, .faq-page, .contacts-page, .legal-page)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 520px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 300px at 88% 40px, rgba(138, 79, 196, .16), transparent 70%),
    radial-gradient(420px 260px at 6% 120px, rgba(237, 109, 29, .07), transparent 70%),
    linear-gradient(180deg, #f6f2fc 0%, #fff 100%);
}
:is(.svc-page, .prod-page, .faq-page, .contacts-page, .legal-page) > main { position: relative; z-index: 1; }

body :is(.svc, .prod, .faq2, .contacts, .legal) { max-width: 880px; padding-top: clamp(72px, 8vw, 104px); color: var(--in-text); }

/* крошки - маленькая строка капсом */
body :is(.svc__crumbs) { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--in-violet-2); margin-bottom: 16px; }
body :is(.svc__crumbs) a { color: var(--in-muted); text-decoration: none; }

/* заголовки */
body :is(.svc, .prod, .faq2, .contacts, .legal) h1 {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-h1); line-height: 1; letter-spacing: .005em;
  color: var(--in-violet); margin-bottom: 18px;
}
body :is(.svc, .prod, .faq2, .contacts, .legal) :is(.svc__lead, .prod__lead, .faq2__lead, .contacts__lead, .legal__updated) { font-size: var(--fs-lead); line-height: 1.65; color: #3b3448; }
body :is(.svc, .prod, .faq2, .contacts, .legal) h2 {
  position: relative; font-family: var(--display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.08;
  color: var(--in-violet); margin: clamp(44px, 6vw, 64px) 0 14px; padding-top: 18px;
}
body :is(.svc, .prod, .faq2, .contacts, .legal) h2::before { content: ""; position: absolute; left: 0; top: 0; width: 38px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--in-orange), #ffb27e); }
body :is(.svc, .prod) h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; color: var(--in-violet); }

/* текст и ссылки */
body :is(.svc, .prod, .contacts, .legal) :is(p, li), body .faq__a p { line-height: 1.72; }
/* размер основного текста - мимо крошек и подписи «Кратко», у них свой мелкий кегль выше */
body :is(.svc, .prod, .contacts, .legal) :is(p, li):not(.svc__crumbs, .svc__brief-title), body .faq__a p { font-size: var(--fs-text); }
body :is(.svc, .prod, .faq2, .contacts, .legal) p a, body :is(.svc, .prod, .contacts, .legal) li a, body .faq__a a {
  color: var(--in-violet-2); text-decoration: underline; text-decoration-color: rgba(91, 45, 142, .35); text-underline-offset: 3px;
}
body :is(.svc, .prod, .contacts, .legal) b, body :is(.svc, .prod, .contacts, .legal) strong { color: var(--in-ink); }

/* маркированные списки - фиолетовые кружки вместо точек */
body :is(.svc, .prod, .contacts, .legal) ul { list-style: none; padding-left: 0; }
body :is(.svc, .prod, .contacts, .legal) ul > li { position: relative; padding-left: 24px; }
body :is(.svc, .prod, .contacts, .legal) ul > li::before { content: ""; position: absolute; left: 3px; top: .66em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--in-violet-2); }

/* кнопки WhatsApp - оранжевая «пилюля», как на главной */
body :is(.svc__wa, .prod__wa, .faq__wa, .contacts__wa) {
  padding: 15px 28px; background: var(--in-orange); color: #fff; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 14px 28px -16px rgba(237, 109, 29, .85); transition: transform .25s, box-shadow .25s;
}
body :is(.svc__wa, .prod__wa, .faq__wa, .contacts__wa):hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px rgba(237, 109, 29, .95); }

/* «Кратко» - белая карточка с цветной чертой слева */
body .svc__brief { position: relative; margin-top: 28px; padding: 22px 24px 20px 28px; border: 1px solid var(--in-line); border-radius: 18px; background: #fff; box-shadow: 0 18px 40px -32px rgba(36, 7, 98, .5); overflow: hidden; }
body .svc__brief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--in-violet-2), var(--in-orange)); }
body .svc__brief-title { color: var(--in-orange); font-size: .78rem; letter-spacing: .18em; margin-bottom: 8px; }

/* светлые плашки: технологии, «чего не делаем», адрес, блок политики */
body :is(.svc__min, .prod__no, .legal__box) { padding: 20px 24px; border-radius: 18px; background: var(--in-soft); border: 1px solid var(--in-line); }
body :is(.svc__nap, .prod__nap, .faq2__nap) { margin-top: 32px; padding: 20px 24px; border: 0; border-radius: 18px; background: var(--in-soft); font-size: .95rem; }

/* вопросы на страницах услуг и /faq */
body .svc__q { padding: 18px 0; border-bottom: 1px solid var(--in-line); }
body .svc__q h3 { font-size: 1.04rem; text-transform: none; margin-bottom: 6px; }
body .faq__item { padding: 16px 0; border-bottom: 1px solid var(--in-line); }
body .faq__q { font-weight: 600; color: var(--in-violet); }
body .faq__item[open] .faq__q { color: var(--in-violet-2); }

/* картинки - скругление и мягкая тень */
body :is(.svc, .prod, .contacts) figure img { border-radius: 18px !important; box-shadow: 0 30px 60px -44px rgba(36, 7, 98, .7); }
body :is(.svc, .prod, .contacts) figcaption { color: var(--in-muted); }

/* контакты: кнопки карт */
body .contacts__links a { border-color: var(--in-line); color: var(--in-violet); font-weight: 600; }
body .contacts__links a:hover { background: var(--in-soft); }

/* кейсы на страницах услуг: фото работ клиентов, ссылка на Instagram ATOM LAB (как на главной) */
.svc-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.svc-case { display: block; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--in-line); text-decoration: none !important; color: inherit; transition: transform .25s, border-color .25s; }
.svc-case:hover { transform: translateY(-3px); border-color: rgba(91, 45, 142, .3); }
.svc-case img { display: block; width: 100%; height: auto; aspect-ratio: 1037 / 383; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; }
.svc-case span { display: block; padding: 14px 16px 16px; font-size: .92rem; line-height: 1.45; color: var(--in-text); }
.svc-case b { display: block; font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: .98rem; color: var(--in-violet); margin-bottom: 2px; }

@media (max-width: 600px) {
  body :is(.svc, .prod, .faq2, .contacts, .legal) { padding-top: 88px; }
  body :is(.svc, .prod, .contacts, .legal) :is(p, li), body .faq__a p { line-height: 1.65; }
  body :is(.svc__wa, .prod__wa, .faq__wa, .contacts__wa) { padding: 14px 22px; font-size: .74rem; }
  body .svc__brief { padding: 18px 18px 16px 22px; }
  body .prod__shots { gap: 10px; }
}