/* ==========================================================================
   Внутренние страницы витрины в языке главной (owl.css, образец — owlsdepartment.com).
   Подключается ПОСЛЕ site.css: разметка и содержимое страниц не меняются, меняется вид.
   Палитра site.css перевёрнута переменными: бумага → тёмный лист #121617, чернила → #EDE9E8.
   Инверсные блоки (.s--ink, .band-acc, .gift, .price__big) получают прежнюю пару переменных
   и становятся чёрными карточками, как у образца, — их светлый текст остаётся читаемым.
   Брендбук brandbook/vanta для переделки не действует (решение владельца 03.10.2026).
   ========================================================================== */
@import url('../fonts/inter-tight/fonts.css');

:root {
  --paper: #121617; --paper-2: #171c1d; --white: #1a1f20;
  --ink: #EDE9E8; --ink-2: #C9CDCE; --dim: #9AA1A3;
  --line: rgba(237, 233, 232, .16); --line-2: rgba(237, 233, 232, .08);
  --acc: #EDE9E8;
  --display: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: var(--display); --text: var(--display); --mono: var(--display);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --pad: clamp(16px, 1.12vw, 22px);
  --o-yellow: #FCE87F; --o-light: #EFEFEF; --o-bg: #121617;
  color-scheme: dark;
}
@media (max-width: 759px) { :root { --pad: 10px; } }
body { background: var(--paper); color: var(--ink); font-family: var(--text); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
:focus-visible { outline-color: var(--o-yellow) !important; }

/* инверсные блоки — чёрные карточки, прежняя пара переменных внутри */
.s--ink, .band-acc, .gift, .price__big, .promo__card, .ct-big, .cta-final, .ct--acc, .fnode, .qz__st.ok, .frm__st.ok { --ink: #000; --paper: #EDE9E8; --line: rgba(237, 233, 232, .18); }
.s--ink, .band-acc { background: #000; }
.s--ink .lbl i, .band-acc .lbl i, .gift .lbl i { color: var(--o-yellow); }
.s--ink .incl li::before, .gift .incl li::before { background: var(--o-yellow); }
.band-acc .d2, .band-acc .bhead__t, .band-acc .feat__t, .band-acc .feat__l b, .band-acc .incl b { color: #EDE9E8; }

/* --- заголовки: гротеск капсом, плотный трекинг, как у образца --- */
.d1, .d2, .d4 { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: -.025em; }
.d1 { line-height: 1; font-size: clamp(34px, 4.6vw, 96px) !important; overflow-wrap: break-word; hyphens: manual; }
.d2 { line-height: 1; font-size: clamp(30px, 4.54vw, 88px) !important; }
.ser { font-family: var(--display); font-style: normal; }
.lead { color: var(--ink-2); }
.lbl, .case__k, .stage__n, .step__n, .pack__n { font-family: var(--display); letter-spacing: -.01em !important; }
h1, h2, h3 { text-wrap: balance; } p, li { text-wrap: pretty; }

/* --- кнопки: пилюли с заливкой снизу, как в меню образца --- */
.btn { border-radius: 999px !important; font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: -.01em; }
.btn--acc { background: var(--o-light); border-color: var(--o-light); color: #121617; }
.btn--acc:hover { color: #121617; border-color: #fff; background: #fff; }
.btn--line { border-color: rgba(237, 233, 232, .5); color: var(--ink); }
.btn:not(.btn--acc):not(.btn--line) { background: var(--ink); color: #121617; border-color: var(--ink); }
.s--ink .btn:not(.btn--acc):not(.btn--line), .band-acc .btn:not(.btn--acc):not(.btn--line) { background: #EDE9E8; color: #000; border-color: #EDE9E8; }
.btn--light { background: transparent !important; color: #EDE9E8 !important; border-color: rgba(237, 233, 232, .5) !important; }

/* --- шапка как на главной: прозрачная, поверх содержимого, меню прячется при прокрутке вниз --- */
.top { background: transparent !important; box-shadow: none !important; border: 0 !important; backdrop-filter: none !important; mix-blend-mode: difference; transition: background-color .4s var(--ease); }
/* после первого экрана — тёмная подложка: «разница» над серым и скриншотами теряет контраст */
.top.stuck { mix-blend-mode: normal; background: rgba(18, 22, 23, .92) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; }
.top .mark__t, .top .nav a, .top .top__tel, .top .burger { color: #EDE9E8; }
.top .mark__g { background: #EDE9E8; }
.top .mark__g::before, .top .mark__g::after { background: #121617; }
.top .mark__t { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; }
.top .mark__t em { font-family: var(--display); color: #EDE9E8; opacity: .7; }
.top .nav a { font-family: var(--display); font-size: clamp(13px, 1.025vw, 16px); letter-spacing: -.01em; font-weight: 400; border-radius: 999px; }
.top .nav a:hover { background: #EDE9E8; color: #121617; }
.top .top__cta { background: transparent !important; color: #EDE9E8 !important; border: 1.5px solid #EDE9E8 !important; }
.top .top__cta:hover { background: #EDE9E8 !important; color: #121617 !important; }
.top .nav, .top .top__tel, .top .top__cta { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.top.is-down .nav, .top.is-down .top__tel, .top.is-down .top__cta { opacity: 0; transform: translateX(-32px); pointer-events: none; }
.top .burger { border-radius: 999px; border-color: #EDE9E8; }
.top .burger i b { background: #EDE9E8; }
.sheet { background: var(--paper); }
.sheet > a { font-family: var(--display); text-transform: uppercase; font-weight: 500; letter-spacing: -.03em; }

/* --- карточки, рамки, окна скриншотов --- */
.case, .offer, .feat__c, .ct, .pack, .stage, .step, .fact, .qz, .law, .doc { border-color: var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
.frame { border-radius: 6px; border-color: var(--line); background: var(--paper-2); }
.case:hover .frame { box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.case__k, .chip { border-radius: 999px; }

/* --- формы на тёмном: поле линией, как на главной --- */
.fld input, .fld textarea, .qz input, .qz textarea { background: transparent !important; border: 0 !important; border-bottom: 1.5px solid rgba(237, 233, 232, .45) !important; border-radius: 0 !important; color: var(--ink) !important; padding-inline: 0 !important; }
.fld input:focus, .fld textarea:focus, .qz input:focus, .qz textarea:focus { border-bottom-color: var(--ink) !important; box-shadow: 0 1.5px 0 var(--ink) !important; outline: none; }
.fld input::placeholder, .fld textarea::placeholder { color: rgba(237, 233, 232, .55) !important; }
.frm__st.err, .qz__st.err, .fld__e { color: #FF9A8A; }
.frm__st.err, .qz__st.err { background: rgba(255, 120, 100, .12); }
.qz__o { border-radius: 999px !important; }

/* --- подвал: светлый лист, как финальный экран главной --- */
.ftr { background: var(--o-light); color: #121617; --ink: #121617; --paper: #EFEFEF; --dim: #3C4345; --line: rgba(18, 22, 23, .14); --line-2: rgba(18, 22, 23, .08); }
.ftr a { color: #121617; }
.ftr__t { font-family: var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.ftr__l a, .ftr__l span { text-transform: uppercase; font-size: 14px; }

/* --- «меньше движения»: шапка без сдвига --- */
@media (prefers-reduced-motion: reduce) { .top .nav, .top .top__tel, .top .top__cta { transition: opacity .22s linear; } .top.is-down .nav, .top.is-down .top__tel, .top.is-down .top__cta { transform: none; } }

::selection { background: var(--o-yellow); color: #121617; }
@media (max-width: 759px) { .d1 { font-size: clamp(26px, 8.2vw, 44px) !important; hyphens: auto; -webkit-hyphens: auto; } .d2 { font-size: clamp(26px, 8vw, 40px) !important; hyphens: auto; -webkit-hyphens: auto; } }
.case[data-r] { transition: opacity .85s var(--ease), transform .85s var(--ease), border-color .22s, box-shadow .3s; }

.feat__n { font-size: 12px !important; }

/* узел-акцент схемы «Как мы работаем» — жёлтый образца с тёмным текстом */
.fnode--acc { background: var(--o-yellow) !important; border-color: var(--o-yellow) !important; color: #121617 !important; }
.fnode--acc * { color: #121617 !important; }
/* «сейчас отвечаем» на тёмном и мелкие подписи — не меньше 12 px */
.now.on { color: #6FD394; }
.now, .fto, .ftree__from, .ct-big__row span { font-size: 12px !important; }

/* кнопка без модификатора внутри чёрных карточек — светлая */
.s--ink .btn:not(.btn--acc):not(.btn--line), .band-acc .btn:not(.btn--acc):not(.btn--line), .gift .btn:not(.btn--acc):not(.btn--line), .price__big .btn:not(.btn--acc):not(.btn--line), .promo__card .btn:not(.btn--acc):not(.btn--line), .ct-big .btn:not(.btn--acc):not(.btn--line), .cta-final .btn:not(.btn--acc):not(.btn--line), .ct--acc .btn:not(.btn--acc):not(.btn--line) { background: #EDE9E8 !important; color: #000 !important; border-color: #EDE9E8 !important; }
/* подписи site.css по 11–11,5 px — не меньше 12 px (собрано из site.css: 18 правил) */
.case-nav span, .cmp th, .cmp th:last-child, .cont span, .ct-big__row span, .did i, .feat__n, .foot, .fto, .ftree__from, .incl .pin, .law__body th, .law__toc span, .now, .pack__n, .proj__k, .screens--stagger .screen figcaption i, .talk i { font-size: 12px !important; }
.fnode--you i { color: #3C4345 !important; }