/* «Штат» for the inner pages (about, contacts, cases, dogovor, privacy, 404, services/*).
   Loaded after site.css (Tailwind) and re-skins it: light paper, graphite, cyan signal, dark bands.
   Display: Unbounded · text: Onest · labels: JetBrains Mono. Tokens mirror shtat.css.
   The Tailwind colours written in the markup (text-white, text-[#C5A880], bg-white/5 ...) are remapped
   through the --t*, --line and --soft tokens, so a dark band flips the whole subtree at once. */
@font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded-var-cyrillic.woff2') format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded-var-latin.woff2') format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-var-cyrillic.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; src: url('../fonts/Onest-var-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JB Mono'; src: url('../fonts/JetBrainsMono-500-cyrillic.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JB Mono'; src: url('../fonts/JetBrainsMono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20BD, U+2212; }

:root {
  --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-mono: 'JB Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sx-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --sx-ease: cubic-bezier(.16, 1, .3, 1);
  --sx-gutter: clamp(20px, 4vw, 64px);
  --signal: #06b6d4;
}

/* ---------- Themes: light by default, dark bands flip the tokens ---------- */
.inner {
  --bg: #f2f4f6; --card: #fafbfc; --t1: #111827; --t2: #1f2937; --t3: #4b5563; --t4: #6b7280;
  --line: rgba(17, 24, 39, .14); --line2: rgba(17, 24, 39, .24); --soft: rgba(17, 24, 39, .04); --soft2: rgba(17, 24, 39, .08);
  --accent: #0e7490; --accent2: #155e75; --ring: rgba(17, 24, 39, .1);
  background: var(--bg); color: var(--t1); font-family: var(--font-sans); color-scheme: light;
}
.inner:not(.inner--plain) main > div:first-child, .inner:not(.inner--plain) main > section:first-of-type, .inner .sx-foot, .inner dialog, .inner .sx-drawer, .inner .sx-dd-menu, .inner .sx-dark, .inner #cookie-banner {
  --bg: #111827; --card: #161e2e; --t1: #f3f4f6; --t2: #d1d5db; --t3: #9ca3af; --t4: #7b8494;
  --line: rgba(255, 255, 255, .14); --line2: rgba(255, 255, 255, .24); --soft: rgba(255, 255, 255, .05); --soft2: rgba(255, 255, 255, .1);
  --accent: #06b6d4; --accent2: #67e0f2; --ring: rgba(255, 255, 255, .1);
  color: var(--t1);
}
.inner:not(.inner--plain) main > div:first-child { background: #111827; box-shadow: 0 0 0 100vmax #111827; clip-path: inset(0 -100vmax); }
.inner:not(.inner--plain) main > section:first-of-type { background: #111827; box-shadow: 0 0 0 100vmax #111827; clip-path: inset(0 -100vmax); margin-bottom: clamp(56px, 6vw, 88px); }
.inner ::selection { background: rgba(6, 182, 212, .3); color: inherit; }
.inner :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Tailwind colours remapped to the tokens ---------- */
.inner [class~="text-white"], .inner [class~="text-gray-200"], .inner [class~="text-[#F8FAFC]"] { color: var(--t1); }
.inner [class~="text-gray-300"] { color: var(--t2); }
.inner [class~="text-gray-400"], .inner [class~="text-[#94A3B8]"] { color: var(--t3); }
.inner [class~="text-gray-500"], .inner [class~="text-gray-600"] { color: var(--t4); }
.inner [class~="text-[#C5A880]"], .inner [class~="text-[#E5C07B]"] { color: var(--accent); }
.inner [class~="hover:text-[#C5A880]"]:hover, .inner [class~="group-hover:text-[#E5C07B]"]:hover { color: var(--accent); }
.inner [class~="hover:text-white"]:hover { color: var(--t1); }
.inner [class~="bg-[#05070B]"] { background-color: var(--bg); }
.inner [class~="bg-[#080B10]"], .inner [class~="bg-[#0E131F]"], .inner [class~="bg-[#0B0F17]"] { background-color: var(--card); }
.inner [class~="bg-white/5"], .inner [class~="bg-white/[0.03]"], .inner [class~="bg-white/[0.04]"] { background-color: var(--soft); }
.inner [class~="bg-white/10"] { background-color: var(--soft2); }
.inner [class~="hover:bg-white/5"]:hover { background-color: var(--soft); }
.inner [class~="hover:bg-white/10"]:hover { background-color: var(--soft2); }
.inner [class~="bg-[#C5A880]"] { background-color: var(--signal); }
.inner [class~="bg-[#C5A880]/5"] { background-color: rgba(6, 182, 212, .06); }
.inner [class~="bg-[#C5A880]/15"] { background-color: rgba(6, 182, 212, .14); }
.inner [class~="bg-gray-600"] { background-color: var(--t4); }
.inner [class~="border-white/10"], .inner [class~="border-white/[0.07]"], .inner [class~="border-white/[0.08]"] { border-color: var(--line); }
.inner [class~="border-white/15"], .inner [class~="border-white/20"] { border-color: var(--line2); }
.inner [class~="border-[#C5A880]"], .inner [class~="border-l-[#C5A880]"], .inner [class~="hover:border-[#C5A880]"]:hover, .inner [class~="focus:border-[#C5A880]"]:focus { border-color: var(--signal); }
.inner [class~="border-[#C5A880]/40"] { border-color: rgba(6, 182, 212, .4); }
.inner [class~="from-[#0E131F]"] { --tw-gradient-from: var(--card); }
.inner [class~="to-[#080B10]"] { --tw-gradient-to: var(--bg); }

/* ---------- Typography: Unbounded headlines, Onest text ---------- */
.inner h1, .inner h2 { font-family: var(--sx-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; }
.inner h1 { font-size: clamp(30px, 4.2vw, 56px); }
.inner h2:is([class*="text-2xl"], [class*="text-3xl"], [class*="text-4xl"], [class*="text-5xl"]) { font-size: clamp(26px, 3vw, 42px); }
.inner h3 { font-family: var(--font-sans); letter-spacing: -.01em; }
.inner .font-editorial { font-family: var(--sx-display); font-weight: 800; letter-spacing: -.02em; }
.inner h3.font-editorial { font-size: 1.3rem; line-height: 1.2; }
.inner .kicker, .inner .section-label, .inner .font-mono { font-family: var(--font-mono); }
.inner .kicker, .inner .section-label { color: var(--accent); font-size: 12px; letter-spacing: .08em; }
.inner .brand-formula, .inner .brand-formula-text { text-transform: none !important; }

/* ---------- Buttons ---------- */
.inner .btn-neo-gold, .inner .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.75rem; border: 0; border-radius: 999px; background: var(--signal); color: #0b1220; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; text-transform: none; transition: background-color .25s, transform .15s; box-shadow: none; }
.inner .btn-neo-gold:hover, .inner .btn-primary:hover { background: #67e0f2; color: #0b1220; transform: none; box-shadow: none; opacity: 1; }
.inner .btn-neo-gold:active, .inner .btn-primary:active { transform: scale(.97); background: #22c5de; color: #0b1220; }
.inner .btn-neo-titanium, .inner .btn-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.75rem; border-radius: 999px; background: transparent; border: 1px solid var(--line2); color: var(--t1); font-weight: 600; letter-spacing: 0; text-transform: none; }
.inner .btn-neo-titanium:hover, .inner .btn-ghost:hover { background: var(--soft2); border-color: var(--t1); color: var(--t1); }
.inner .btn-link { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.inner .btn-link:hover { color: var(--t1); text-decoration-color: var(--accent); }

/* ---------- Cards and surfaces ---------- */
.inner .agency-card, .inner .neo-imperial-card, .inner .card-surface { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.inner .agency-card:hover, .inner .neo-imperial-card:hover, .inner .card-hover:hover { border-color: var(--signal); box-shadow: none; transform: translateY(-3px); }
.inner .gold-pill { background: var(--soft); border: 1px solid var(--line); color: var(--accent); }
.inner .stat-number-monumental { font-family: var(--sx-display); font-weight: 800; color: var(--t1); }
.inner .tldr { border-left: 2px solid var(--signal); }
.inner .tldr strong { color: var(--t1); }
.inner .facts { color: var(--t3); }
.inner .facts > span + span::before { color: var(--signal); }
.inner .hairline-top, .inner .hairline-list, .inner .price-table, .inner .faq-list, .inner .case-list { border-top-color: var(--line); }
.inner .hairline-row, .inner .price-row, .inner .faq-item, .inner .case-row, .inner .matrix-table th, .inner .matrix-table td { border-bottom-color: var(--line); }
.inner .related-index a { border-bottom-color: var(--line); }
.inner .related-index a:hover span:first-child { color: var(--accent); }
.inner .price-row.is-recommended { border-left-color: var(--signal); }
.inner .price-row__list { color: var(--t2); }
.inner .price-row__list li::before { color: var(--accent); }
.inner .faq-item summary { color: var(--t1); }
.inner .faq-chevron { color: var(--accent); }
.inner .faq-answer { color: var(--t2); }
.inner .case-row dt { color: var(--accent); }
.inner input[type="text"], .inner input[type="email"], .inner input[type="tel"], .inner textarea, .inner select { background: var(--soft); border-color: var(--line); color: var(--t1); }
.inner input::placeholder, .inner textarea::placeholder { color: var(--t4); }
.inner dialog { background: #111827; border-color: rgba(255, 255, 255, .15); }
.inner dialog::backdrop { background: rgba(11, 18, 32, .72); }
.inner .field-error { color: #fbbf24; }

/* ---------- Header ---------- */
.sx-head { position: sticky; top: 0; z-index: 60; background: rgba(242, 244, 246, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(17, 24, 39, .12); color: #111827; }
.sx-head-in { display: flex; align-items: center; gap: 32px; height: 72px; max-width: 1440px; margin: 0 auto; padding: 0 var(--sx-gutter); }
.sx-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; color: #111827; }
.sx-brand-mark { display: inline-flex; align-items: baseline; gap: 4px; font: 800 21px/1 var(--sx-display); letter-spacing: .02em; }
.sx-brand-mark i { width: 8px; height: 8px; background: var(--signal); border-radius: 1px; }
.sx-brand-sub { width: 0; min-width: 100%; font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .68; }
.sx-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-weight: 500; font-size: 15px; white-space: nowrap; }
.sx-nav a, .sx-nav > .sx-dd > button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; min-height: 44px; color: #1f2937; font: inherit; font-weight: 500; cursor: pointer; }
.sx-nav a::after, .sx-nav > .sx-dd > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: #0e7490; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sx-ease); }
.sx-nav a:hover::after, .sx-nav > .sx-dd:hover > button::after, .sx-nav a[aria-current="page"]::after { transform: none; }
.sx-nav a[aria-current="page"] { color: #111827; font-weight: 600; }
.sx-nav svg { width: 14px; height: 14px; opacity: .7; }
.sx-dd { position: relative; }
.sx-dd-menu { position: absolute; left: -16px; top: 100%; width: 288px; padding: 8px; margin-top: 6px; border-radius: 16px; background: #111827; box-shadow: 0 24px 48px -16px rgba(11, 18, 32, .5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s var(--sx-ease), visibility .2s; }
.sx-dd:hover .sx-dd-menu, .sx-dd:focus-within .sx-dd-menu { opacity: 1; visibility: visible; transform: none; }
.sx-dd-menu a { display: block; min-height: 0; padding: 9px 12px; border-radius: 10px; color: #d1d5db; font-weight: 500; font-size: 15px; }
.sx-dd-menu a::after { display: none; }
.sx-dd-menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sx-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 20px; border-radius: 999px; background: var(--signal); color: #0b1220; font: 600 15px/1 var(--font-sans); white-space: nowrap; transition: background-color .25s, transform .15s; cursor: pointer; }
.sx-cta:hover { background: #67e0f2; }
.sx-cta:active { transform: scale(.97); }
.sx-burger { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; }
.sx-burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: #111827; transition: transform .3s var(--sx-ease); }
.sx-burger span:first-child { top: 17px; } .sx-burger span:last-child { top: 25px; }
.sx-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.sx-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.sx-drawer { padding: 20px var(--sx-gutter) 32px; background: #111827; display: grid; gap: 14px; }
.sx-drawer.hidden { display: none; }
.sx-drawer .sx-cap { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding-top: 8px; }
.sx-drawer a { display: block; min-height: 40px; padding: 8px 0; color: var(--t1); font-size: 17px; font-weight: 500; }
.sx-drawer .sx-cta { width: 100%; margin-top: 8px; min-height: 52px; }
@media (max-width: 1023px) {
  .sx-nav, .sx-head-in > .sx-cta { display: none; }
  .sx-burger { display: block; }
  .sx-head-in { height: 64px; }
}

/* ---------- Footer ---------- */
.sx-foot { background: #111827; color: var(--t2); padding: clamp(40px, 5vw, 64px) 0 0; overflow: hidden; margin-top: 0; }
.sx-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; max-width: 1440px; margin: 0 auto; padding: 0 var(--sx-gutter); font-size: 14px; }
.sx-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.sx-foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--t2); transition: color .2s; }
.sx-foot-nav a:hover { color: #fff; }
.sx-foot-copy { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.sx-foot-mark { margin: 24px 0 0; padding: 0 var(--sx-gutter); font: 800 25vw/.8 var(--sx-display); letter-spacing: -.04em; white-space: nowrap; color: #1c2536; user-select: none; }
.inner main { flex-grow: 1; }

.sx-back { margin-left: auto; font: 500 13px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: #1f2937; }
.sx-back:hover { color: #0e7490; }
/* ---------- Fit fixes ---------- */
.inner h1 { font-size: clamp(30px, 3.8vw, 52px); }
.inner :is(div, span, p).font-editorial { font-size: clamp(22px, 2.3vw, 32px); line-height: 1.1; }
.inner .price-row__price { min-width: 0; }
.inner .price-row .btn-neo-gold, .inner .price-row .btn-neo-titanium, .inner .price-row .btn-ghost { max-width: 100%; white-space: normal; text-align: center; padding-block: .6rem; min-height: 44px; }
.inner h1 .font-editorial, .inner h2 .font-editorial, .inner h3 .font-editorial { font-size: inherit; line-height: inherit; }
.inner:not(.inner--plain) main > section:first-of-type:last-of-type { margin-bottom: 0; }
.inner h1, .inner h2, .inner h3 { overflow-wrap: break-word; }
.inner .case-row h2, .inner .case-row h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; }
.sx-drawer { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; }
/* Quiz: ten service tiles in two rows of five (the utility is not in the prebuilt Tailwind bundle) */
@media (min-width: 640px) { .inner [class~="sm:grid-cols-5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Contract templates: the download links sit under the description column (the utilities are not in the prebuilt Tailwind bundle) */
@media (min-width: 768px) {
  .inner .hairline-row { row-gap: 0; }
  .inner [class~="md:col-start-6"] { grid-column: 6 / span 7; }
}