/* drawn font pair: plex */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
/* minimal.css v2 — light theme, clean editorial, restrained
   Fonts: Plus Jakarta Sans (headings + body)
   Mood: trust, clarity, white space, thin borders, no noise
   ------------------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand — overridden per-site via layout.html */
  --color-brand:          #1e293b;
  --color-accent:         #2563eb;
  --color-accent-hover:   #1d4ed8;
  --color-accent-light:   #eff6ff;

  /* Surfaces */
  --color-bg-primary:     #ffffff;
  --color-bg-section:     #f8fafc;
  --color-bg-section-alt: #f1f5f9;
  --color-bg-dark:        var(--color-brand);
  --color-bg-card:        #ffffff;
  --color-bg-card-hover:  #f8fafc;

  /* Text */
  --color-text-primary:   #0f172a;
  --color-text-secondary: #334155;
  --color-text-muted:     #64748b;
  --color-text-light:     #94a3b8;
  --color-text-inverse:   #ffffff;

  /* Borders — thin, precise */
  --color-border:         #e2e8f0;
  --color-border-strong:  #cbd5e1;

  /* Status */
  --color-live:           #dc2626;
  --color-accent-red:     #dc2626;   /* used by 18+ badges and live kickers */
  --color-success:        #059669;
  --color-warning:        #d97706;
  --color-star:           #f59e0b;

  /* Elevation — very subtle on white */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:  0 4px 8px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:  0 8px 20px rgba(15,23,42,.08), 0 3px 6px rgba(15,23,42,.04);
  --shadow-xl:  0 16px 36px rgba(15,23,42,.10), 0 6px 12px rgba(15,23,42,.05);

  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-btn: 8px;
  --radius-card: 10px;

  /* Spacing — more air */
  --spacing-section:    96px;
  --spacing-section-sm: 64px;
  --spacing-block:      48px;

  /* Fonts */
  --font-heading: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--color-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Base ────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
h5 {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-light);
}

p { color: var(--color-text-secondary); }
strong { font-weight: 600; color: var(--color-text-primary); }

/* ── Layout ──────────────────────────────────────────────────────── */
.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) { .container { padding: 0 20px; } }

section { padding: var(--spacing-section) 0; }
section:nth-of-type(even) { background: var(--color-bg-section); }

/* ── Header — thin, barely there ────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-header-bg, var(--color-bg-primary));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }

.site-logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: -0.03em;
}
.site-logo:hover { color: var(--color-accent-text); text-decoration: none; }

.site-logo-flag {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  vertical-align: middle;
}
.site-logo-flag svg {
  height: 16px;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
  display: block;
}

.site-nav { display: flex; gap: 36px; }
.site-nav a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.site-nav a:hover { color: var(--color-text-primary); text-decoration: none; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 12px 26px;
  border-radius: var(--radius-btn);
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 1px 3px rgba(37,99,235,.25), 0 2px 8px rgba(37,99,235,.12);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 2px 6px rgba(37,99,235,.3), 0 4px 16px rgba(37,99,235,.18);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  background: transparent;
  color: var(--color-accent-text);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 11px 24px;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--color-border-strong);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.btn-secondary:hover {
  border-color: var(--color-accent-text);
  background: var(--color-accent-light);
  text-decoration: none;
}

.btn-sm { font-size: 0.875rem; padding: 9px 18px; }

/* ── Cards — flat, border-only ───────────────────────────────────── */
.card {
  background: var(--card-bg-override, var(--color-bg-card));
  border: var(--card-border, 1px solid var(--color-border));
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: var(--card-shadow, none);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.card--elevated { box-shadow: var(--shadow-md); }
.card--tinted { background: var(--color-bg-section); }

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
}
.badge--accent  { background: var(--color-accent-light); color: var(--color-accent-text); border: 1px solid rgba(37,99,235,.2); }
.badge--dark    { background: var(--color-bg-section-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge--live    { background: #fef2f2; color: var(--color-live); border: 1px solid rgba(220,38,38,.2); }
.badge--success { background: #f0fdf4; color: var(--color-success); border: 1px solid rgba(5,150,105,.2); }

/* ── Divider ─────────────────────────────────────────────────────── */
.rule-accent {
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  margin: 10px 0 18px;
  border-radius: 2px;
}

/* ── Tables ──────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th {
  background: transparent;
  color: var(--color-text-light);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 16px;
  text-align: start;
  border-bottom: 1px solid var(--color-border-strong);
}
td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg-section); }
td strong { color: var(--color-text-primary); }

/* ── Utility ─────────────────────────────────────────────────────── */
.text-muted   { color: var(--color-text-muted); }
.text-accent  { color: var(--color-accent-text); }
.text-light   { color: var(--color-text-light); }
.text-inverse { color: var(--color-text-inverse); }
.font-heading { font-family: var(--font-heading); }

.section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-text);
  margin-bottom: 8px;
}
.section-title { margin-bottom: 8px; }
.section-lead  {
  color: var(--color-text-muted);
  font-size: 1.0625rem;
  max-width: 560px;
  margin-top: 12px;
  line-height: 1.7;
}

/* ── Stars ───────────────────────────────────────────────────────── */
.stars { color: var(--color-star); letter-spacing: 2px; }

/* ── Dark sections ───────────────────────────────────────────────── */
.dark-section {
  background: var(--color-brand);
  color: #ffffff;
}
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4 { color: #ffffff; }
.dark-section p, .dark-section .hero__lead { color: rgba(255,255,255,0.70); }
.dark-section .text-muted { color: rgba(255,255,255,0.55); }
.dark-section .rule-accent { background: var(--color-accent); }
.dark-section .card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: #ffffff;
}
.dark-section .card .text-muted { color: rgba(255,255,255,0.55); }

/* ── Editorial grid ──────────────────────────────────────────────── */
.editorial-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 64px;
  align-items: start;
}
.editorial-grid--reversed { grid-template-columns: 2fr 3fr; }
@media (max-width: 860px) {
  .editorial-grid,
  .editorial-grid--reversed { grid-template-columns: 1fr; gap: 36px; }
}

/* ── Prose ───────────────────────────────────────────────────────── */
.prose h2 { margin: 44px 0 16px; }
.prose h3 { margin: 30px 0 10px; }
.prose p  { margin-bottom: 18px; }
.prose ul, .prose ol { margin: 0 0 18px 20px; }
.prose li { margin-bottom: 6px; color: var(--color-text-secondary); }

/* ── Footer ──────────────────────────────────────────────────────── */
.site-footer {
  background: var(--color-bg-section);
  border-top: 1px solid var(--color-border);
  padding: 40px 0;
}
.footer-rg {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 10px;
}
.footer-copy { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  section { padding: var(--spacing-section-sm) 0; }
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }
  .site-nav { display: none; }
  .btn-primary { width: 100%; justify-content: center; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Broken image shimmer ────────────────────────────────────────── */
img.img-broken {
  display: block;
  min-height: 160px;
  background: linear-gradient(90deg, var(--color-bg-section) 25%, var(--color-bg-section-alt) 50%, var(--color-bg-section) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { img.img-broken { animation: none; } }

/* ── RTL (Arabic, Hebrew, Farsi, Urdu) ───────────────────────────── */
[dir="rtl"] {
  --font-heading: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-body:    'Tajawal', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}
[dir="rtl"] body { direction: rtl; text-align: end; }
[dir="rtl"] .site-nav { flex-direction: row-reverse; }
[dir="rtl"] .site-header .container { flex-direction: row-reverse; }
[dir="rtl"] .hero__content { text-align: end; }
[dir="rtl"] .hero__cta-group { flex-direction: row-reverse; justify-content: flex-start; }
[dir="rtl"] .card { text-align: end; }
[dir="rtl"] .pros-list li, [dir="rtl"] .cons-list li { padding-inline-start: 0; padding-inline-end: 1.5em; }
[dir="rtl"] .steps__item { flex-direction: row-reverse; text-align: end; }
[dir="rtl"] .steps__num { margin-inline-end: 0; margin-inline-start: 1rem; }
[dir="rtl"] .sticky-cta { direction: rtl; }
[dir="rtl"] .sticky-cta__inner { flex-direction: row-reverse; }
[dir="rtl"] .breadcrumb__sep { transform: scaleX(-1); }
[dir="rtl"] .stars { direction: ltr; display: inline-flex; }
[dir="rtl"] .toc { text-align: end; }
[dir="rtl"] table { direction: rtl; text-align: end; }
[dir="rtl"] th, [dir="rtl"] td { text-align: end; }
[dir="rtl"] .site-footer { direction: rtl; text-align: end; }
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Tajawal:wght@400;500;700&display=swap');

/* Brand-pill behind low-contrast logos (added by build.py contrast guard) */
.site-logo__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  line-height: 0;
}
.site-logo__pill img { display: block; }

/* Caption under the logo (design.logo_note) — «Неофициальный сайт» and the like.
   Put here, not inline in build.py: the look belongs to the skin, and the QA
   check «every block class has CSS» rightly fails on decorative classes with
   no rules. Colour and the missing underline come from .site-logo itself. */
.site-logo__stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}
.site-logo__note {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.62;
  white-space: nowrap;
}

/* Header logo row: logo (or brand text), optional pill and geo flag must sit
   on one line, vertically centred — the global img{display:block} reset used
   to push the flag under the logo */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.site-logo .site-logo__img { display: block; height: 36px; width: auto; }
/* В шапке логотип крупнее: 36px рассчитаны на квадратную марку, а у словесного
   логотипа (600x300 и шире) при такой высоте остаётся около 70px ширины —
   на первом экране он читался как иконка, а не как логотип бренда. */
.site-header .site-logo .site-logo__img { height: 64px; }
@media (max-width: 600px) {
  .site-header .site-logo .site-logo__img { height: 48px; }
}
.site-logo-flag { margin-inline-start: 0; }

/* ── Header burger + footer nav (were only defined in bold.css, so the mobile
      menu button rendered as three unstyled spans on light themes) ────────── */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
}
.site-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text-secondary);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.site-nav-toggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle--open span:nth-child(2) { opacity: 0; }
.site-nav-toggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav-toggle:hover span { background: var(--color-accent); }

.footer-nav {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.footer-nav a { font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--color-accent-text); }

@media (max-width: 768px) {
  .site-nav-toggle { display: flex; }
  .site-header .container { position: relative; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    padding: 8px 0;
    gap: 0;
    z-index: 99;
  }
  .site-nav.site-nav--open { display: flex; }
  .site-nav a { padding: 12px 20px; font-size: 0.9375rem; }
  .site-nav a[aria-current="page"] {
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: 17px;
  }
}

/* nav links carry .site-nav__link from build.py's nav builder */
.site-nav__link { text-decoration: none; }


/* generated palette — theme=dark accent=#fb4d00 density=compact */
:root {
  --color-accent: #fb4d00;
  --color-accent-hover: #ff5600;
  --color-accent-light: rgba(251,77,0,0.14);
  --color-accent-red: #ff4757;
  --color-accent-text: #fb4d00;
  --color-bg-card: #241f1c;
  --color-bg-card-hover: #2a2521;
  --color-bg-dark: #001d3a;
  --color-bg-primary: #131110;
  --color-bg-section: #191614;
  --color-bg-section-alt: #201c19;
  --color-border: rgba(255,255,255,0.10);
  --color-border-strong: rgba(255,255,255,0.18);
  --color-brand: #001d3a;
  --color-dark-border: rgba(255,255,255,0.24);
  --color-device-frame: #332b25;
  --color-live: #ef4444;
  --color-on-accent: #0b0d10;
  --color-star: #f59e0b;
  --color-success: #22c55e;
  --color-text-inverse: #131110;
  --color-text-light: #6a6158;
  --color-text-muted: #9a9086;
  --color-text-primary: #f5f1ec;
  --color-text-secondary: #d3cbc2;
  --color-warning: #f59e0b;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'IBM Plex Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --radius-btn: 6px;
  --radius-card: 3px;
  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
  --radius-xl: 4px;
  --radius-xs: 2px;
  --shadow-accent: 0 4px 20px rgba(251,77,0,0.28);
  --shadow-lg: 0 3px 8px rgba(0,0,0,.20);
  --shadow-md: 0 2px 4px rgba(0,0,0,.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.14);
  --shadow-xl: 0 6px 14px rgba(0,0,0,.24);
  --shadow-xs: 0 1px 1px rgba(0,0,0,.10);
  --spacing-block: 36px;
  --spacing-section: 64px;
  --spacing-section-sm: 44px;
}