/* ============================================================
   components.css — buttons, cards, header, hero, footer
   ============================================================ */

/* ── Buttons ── */
/* audit: .btn radius 100px → 12 (Figma 2411:743 / 2411:654 cornerRadius=12)
   audit: .btn padding 12/24 → 6/16 (Figma paddingTop=6 paddingLeft=16)
   audit: .btn min-height 44 → 40 (Figma h=40); a11y: keep ≥40 + larger touch via padding */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pg-sp-2);
  min-height: var(--pg-size-btn);
  padding: 6px var(--pg-sp-4);
  font-family: var(--pg-font-body);
  font-size: var(--pg-text-btn-size);
  font-weight: var(--pg-text-btn-weight);
  border: 1px solid transparent;
  border-radius: var(--pg-radius-btn);
  background: transparent;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: background var(--pg-tx-base), color var(--pg-tx-base), border-color var(--pg-tx-base), transform var(--pg-tx-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* CYCLE 3.4-F05 — Button icon (Figma Кнопка component way=side, 24×24 inline) */
.btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  fill: currentColor;
  stroke: currentColor;
}
.btn__label { display: inline-block; }

.btn--primary {
  background: var(--pg-color-primary);
  color: var(--pg-surface-0);
  font-size: 15px;
  font-weight: 400
}
.btn--primary:hover { background: var(--pg-color-violet-300); }

.btn--ghost-light {
  background: transparent;
  color: var(--pg-surface-0);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--pg-surface-0);
}

/* audit: .btn--ghost-dark fill transparent → SOLID #1b1820 (Figma 2411:654)
   audit: .btn--ghost-dark border #c2beca → rgba(255,255,255,0.10) (Figma stroke)
   audit: .btn--ghost-dark color ink-700 → white */
.btn--ghost-dark {
  background: var(--pg-surface-card-dark);
  color: var(--pg-text-on-dark);
  border-color: var(--pg-border-on-dark);
}
.btn--ghost-dark:hover {
  border-color: var(--pg-color-primary);
  color: var(--pg-color-primary);
}

/* audit: .btn--white-on-violet replaced by Telegram-blue button (Figma 2414:820 fill #0088CC, r=16, p=14/32, h=56) */
/* TODO CYCLE 3.6: rename .btn--white-on-violet → .btn--cta-tg
   (DIAG 2026-05-05 cycle 3.5 polish — class name doesn't reflect actual #0088CC Telegram-blue fill;
    rename is sweep across components.css + index.html + solutions.html, deferred for atomic refactor cycle) */
/* CYCLE 1.9.2 (#1): Inter Bold 18/28 typography for large CTAs — Figma 2414:820 / 2411:764 / 2411:776 */
/* CYCLE 1.9.4 AUTO — .btn--white-on-violet: gap 8→12 (Figma 2414:820 itemSpacing=12) */
.btn--white-on-violet {
  background: var(--pg-color-tg-button);
  color: var(--pg-text-on-dark);
  border-radius: var(--pg-radius-btn-cta);
  min-height: var(--pg-size-btn-cta);
  padding: 14px var(--pg-sp-8);
  gap: var(--pg-sp-3);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}
.btn--white-on-violet:hover { filter: brightness(1.1); }

/* audit: .btn--lg variant for hero/section CTAs (Figma 2411:764 h=56 padding 14/32 radius 16) */
.btn--lg {
  min-height: var(--pg-size-btn-cta);
  padding: 14px var(--pg-sp-8);
  border-radius: var(--pg-radius-btn-cta);
  font-size: var(--pg-text-btn-size);
}

/* ── Header ── */
/* audit: .site-header bg #ffffff → rgba(10,5,16,0.80) (Figma 2411:320 SOLID #0A0510@0.80)
   audit: .site-header border-bottom soft-grey → rgba(255,255,255,0.10) on dark */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pg-bg-header);
  /* CYCLE 1.9.2 (#4a): blur 12→6 (Figma 2411:320 backdrop-blur-[6px]) */
  /* CYCLE 1.9.4 AUTO iter3: revert 6→12 (Figma REST API spec.effects.radius=12 for 2411:320; Dev Mode React был неточен) */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pg-border-on-dark);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pg-sp-4);
  height: 72px;
}
/* audit: .site-logo color ink → white on dark */
/* CYCLE 1.9.2 (#4b): wordmark color white → primary (Figma 2411:273 SOLID #6c5ce7) */
/* CYCLE 1.9.4 AUTO — .site-logo: line-height 1 (= 23 при font-size 23) per Figma TEXT 2411:273 lh=23 */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-sp-2);
  font-family: var(--pg-font-display);
  font-weight: 700;
  font-size: var(--pg-text-h3-size);
  line-height: 1;
  color: var(--pg-color-primary);
}
/* audit (1.6): inline shield-SVG replacing .site-logo__dot — fill via currentColor (Figma 2411:267) */
/* CYCLE 1.9.4 AUTO — .site-logo__icon: + bg violet + radius 7 (Figma 2411:267 SOLID #6c5ce7 r=7) */
.site-logo__icon {
  width: var(--pg-size-logo-icon);
  height: var(--pg-size-logo-icon);
  flex-shrink: 0;
  color: var(--pg-color-primary);
  background: var(--pg-color-primary);
  border-radius: 7px;
}

/* CYCLE 1.9.4 AUTO iter4 — .site-nav: border-radius 10 (Figma 2411:274 button-instance) */
.site-nav { display: none; border-radius: 10px; }
.site-nav>a{ font-size: 15px;font-weight:400 }
.site-header__cta { display: flex; align-items: center; gap: var(--pg-sp-3); }
/* audit (1.8): on mobile only burger is visible in right-group (Figma 2509:3169 has only burger) */
.site-header__cta .btn--ghost-dark { display: none; }
.site-header__cta .btn--primary { display: none; }

/* audit: .btn-burger 44×44 → 40×40, border → none, bg transparent → violet@0.10, radius 12 → 6 (Figma 2509:3152) */
.btn-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--pg-size-burger); height: var(--pg-size-burger);
  background: var(--pg-bg-burger);
  border: none;
  border-radius: var(--pg-radius-burger);
  color: var(--pg-text-on-dark);
}

@media (min-width: 1024px) {
  /* audit: drop desktop height override 80 → 72 (Figma desktop header h=72) */
  /* audit (1.8): nav text Inter 16 weight 500; muted color var(--pg-text-lead-on-dark) #c2beca; active = violet */
  /* CYCLE 1.9.10 AUTO iter2 — VLM: nav gap too tight, increase 32→48 per Figma breathing-space */
  .site-nav {
    display: flex;
    gap: var(--pg-sp-12);
    align-items: center;
    font-family: var(--pg-font-body);
    font-size: var(--pg-text-body-size);
    font-weight: 500;
    color: var(--pg-text-lead-on-dark);
  }
  .site-nav a { color: var(--pg-text-lead-on-dark); }
  .site-nav a:hover { color: var(--pg-color-primary); }
  .site-nav a[aria-current="page"] { color: var(--pg-color-primary); }
  .site-header__cta .btn--ghost-dark { display: inline-flex; font-weight: 300; font-size: 15px; }
  .site-header__cta .btn--primary { display: inline-flex; }
  .btn-burger { display: none; }
}

/* ── Hero ── */
/* audit: .hero radial-gradient → flat var(--pg-bg-page) (Figma 2421:1851 inherits root #0a0510 solid) */
/* CYCLE 1.9 (#5 prereq): allow speed-badge to protrude below banner — overflow visible on desktop */
.hero {
  position: relative;
  background: var(--pg-bg-page);
  color: var(--pg-text-on-dark);
  overflow: hidden;
  padding-block: var(--pg-sp-8) var(--pg-sp-16);
}
@media (min-width: 1024px) {
  .hero { overflow: visible; }
}
/* audit: .hero__inner gap-12 → gap-6 mobile / gap-8 desktop (Figma itemSpacing 24/32) */
.hero__inner { position: relative; z-index: 1; display: grid; gap: var(--pg-sp-6); }
/* audit (1.6): hero h1 — Figma uses Inter Bold 24/28.8 -0.5 mobile, Montserrat Bold 60/66 -0.6 desktop */
/* audit (1.8): drop max-width: 18ch — Figma TEXT bb width=943 desktop / 343 mobile (full content width) */
.hero__title {
  font-family: var(--pg-font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: -0.5px;
  color: var(--pg-text-on-dark);
}
@media (min-width: 1024px) {
  /* CYCLE 1.9.10 AUTO iter1 — VLM detected H1 ~25-30% larger than Figma; reduce 60→56px */
  .hero__title {
    font-family: var(--pg-font-display);
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.6px;
    max-width: 943px;
  }
}
/* audit (1.6): em is SOLID violet (#6C5CE7), not gradient — Figma overrides 73/13 fill SOLID */
.hero__title em {
  font-style: normal;
  color: var(--pg-color-primary);
}
/* audit: .hero__lead color rgba(white,0.78) → exact #c2beca (Figma 2411:172 SOLID) */
/* CYCLE 1.9 (#4): family Inter→Montserrat, size 16→20px, lh 1.5→1.45 per Figma Body style */
p.hero__lead {
  line-height: 1.6;
  padding-top: 20px;
  padding-bottom: 8px;
}
.hero__lead {
  max-width: 56ch;
  font-family: var(--pg-font-display);
  font-size: var(--pg-text-lead-size);
  line-height: var(--pg-text-lead-lh);
  font-weight: 400;
  color: var(--pg-text-lead-on-dark);
}
@media (min-width: 1024px) {
  /* CYCLE 1.9 (#4): pixel-perfect width 835px from Figma TEXT bb */
  /* CYCLE 1.9.10 AUTO iter1 — VLM: title→lead gap too wide. Override .u-mt-5 (20→16). */
  .hero__lead { max-width: 835px; margin-top: var(--pg-sp-4) !important; }
}

/* audit (1.8): hero__text mobile center-align (Figma 2432:1698 counterAxisAlign=CENTER) */
.hero__text { text-align: center; }
h1.hero__title {line-height: 1.1;}
.hero__text .hero__title,
.hero__text .hero__lead { margin-inline: auto; }
@media (min-width: 1024px) {
  .hero__text { text-align: left; }
  .hero__text .hero__title,
  .hero__text .hero__lead { margin-inline: 0; }
}
/* audit (1.8): mobile CTAs side-by-side, each ~167px (Figma 2432:1370/1371 w=167); desktop CTAs natural width */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pg-sp-2);
}
.hero__actions .btn { min-width: 0; }
@media (min-width: 1024px) {
  /* desktop CTAs scale up (Figma 2411:764/776 h=56 r=16 p=14/32) and don't stretch */
  .hero__actions { gap: var(--pg-sp-3); }
  .hero__actions .btn {
    flex: 0 0 auto;
    min-height: var(--pg-size-btn-cta);
    padding: 14px var(--pg-sp-8);
    border-radius: var(--pg-radius-btn-cta);
    /* CYCLE 1.9.2 (#1): Inter Bold 18/28 — Figma 2411:764 / 2411:776 */
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
  }
}

.hero__media {
  margin-inline: calc(-1 * var(--pg-page-pad-x));
  position: relative;
}
.hero__media img {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* audit (1.8): .hero-speed-badge — overlay 178×78 (Figma 2411:304) */
/* CYCLE 1.9.3 (P0-2): both breakpoints right=24/bottom=24 (--pg-sp-6) inside media */
/* CYCLE 1.9.4 AUTO — .hero-speed-badge: bg surface-card-dark → deep violet@0.8 + backdrop-blur 24 (Figma 2411:304 fills/effects) */
/* CYCLE 1.9.10 AUTO iter1 — VLM detected badge position TOP-RIGHT in Figma (revert CYCLE 1.9.3 P0-2 — Figma current is top-anchored) */
/* CYCLE 1.9.11 FIX C — Operator override: revert to BOTTOM-RIGHT per operator visual review (overrides 1.9.10 VLM finding) */
.hero-speed-badge {
  position: absolute;
  right: var(--pg-sp-6);
  bottom: var(--pg-sp-6);
  top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--pg-sp-3);
  width: 178px;
  height: 78px;
  padding: var(--pg-sp-4);
  background: rgba(38, 2, 100, 0.8);
  border: 1px solid var(--pg-border-on-dark);
  border-radius: var(--pg-radius-card);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--pg-text-on-dark);
}
/* CYCLE 1.9 (#3): icon color violet-300 (#985efd) → primary (#6c5ce7) per Figma 2411:304 fills */
.hero-speed-badge__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: var(--pg-radius-sm);
  background: var(--pg-bg-burger);
  color: var(--pg-color-primary);
}
/* CYCLE 1.9 (#2): nowrap on value to keep "98.4 Mbps" on one line in 178×78 box */
.hero-speed-badge__text { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
/* CYCLE 1.9.4 AUTO — .hero-speed-badge__label: weight 500→700, +uppercase, +letter-spacing 0.6 (Figma 2411:310) */
.hero-speed-badge__label {
  font-family: var(--pg-font-body);
  font-size: var(--pg-text-caption);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--pg-text-lead-on-dark);
}
/* CYCLE 1.9.4 AUTO — .hero-speed-badge__value: Montserrat→Inter, h3-clamp→18, weight 600→700 (Figma 2411:311) */
.hero-speed-badge__value {
  font-family: var(--pg-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  color: var(--pg-text-on-dark);
  white-space: nowrap;
}
/* CYCLE 1.9.3 (P0-2): badge стянут внутрь медиа bottom-right corner per оператор,
   override CYCLE 1.9 (#5) protrusion (-55px). Right=24px, bottom=24px both bps. */
/* CYCLE 1.9.11 FIX C — operator override: bottom-right (override 1.9.10 top-anchor) */
@media (min-width: 1024px) {
  .hero-speed-badge { right: var(--pg-sp-6); bottom: var(--pg-sp-6); top: auto; }
}

@media (min-width: 1024px) {
  .hero { padding-block: var(--pg-sp-12) var(--pg-sp-24); }
  /* audit (1.8): hero is single-column VERTICAL stack (Figma 2421:1851 layoutMode=VERTICAL):
     media → text(title+lead+CTAs) → features. itemSpacing=32 (--pg-sp-hero-stack-desktop) */
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "text" "features";
    gap: var(--pg-sp-hero-stack-desktop);
    align-items: stretch;
  }
  /* CYCLE 1.9.11 FIX B — lock aspect-ratio to Figma 2411:555 (1184×410 = 2.888) so media doesn't grow with viewport */
  .hero__media {
    grid-area: media;
    margin-inline: 0;
    max-height: 410px;
    aspect-ratio: 1184 / 410;
    width: 100%;
  }
  /* audit: .hero__media img radius 24 → 16 (Figma 2411:555 cornerRadius=16) */
  .hero__media img { max-height: 410px; width: 100%; height: 100%; object-fit: cover; border-radius: var(--pg-radius-hero-media); }
  .hero__text { grid-area: text; }
  .hero__features { grid-area: features; }
}

/* Hero feature mini-cards */
.hero-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pg-sp-3);
  margin-top: var(--pg-sp-6);
}
@media (min-width: 1024px) {
  .hero-features { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
}

/* audit: .feature-card glass-rgba → SOLID #1b1820, drop border, padding 20→24 desktop (16 mobile), gap-2→gap-3 (Figma 2421:1780 itemSpacing=12) */
.feature-card {
  padding: var(--pg-sp-4);
  background: var(--pg-surface-card-dark);
  border: none;
  border-radius: var(--pg-radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-3);
}
@media (min-width: 1024px) {
  .feature-card { padding: var(--pg-sp-6); }
}
/* audit: feature-card icon 32px stay; bg violet glow uses --pg-bg-burger token */
/* CYCLE 1.9 (#3 cascade): icon color violet-300 → primary to match speed-badge & Figma accent */
/* CYCLE 1.9.2 (#2): container 32→48 r-sm→md padding 12 (Figma 2421:1744 size 48 r 12 inner SVG 24×24) */
/* CYCLE 1.9.4 AUTO iter5 — gap 10 (Figma 2421:1744 itemSpacing=10) */
.feature-card__icon {
  box-sizing: border-box;
  width: 48px; height: 48px;
  padding: 12px;
  gap: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pg-radius-md);
  background: var(--pg-bg-burger);
  color: var(--pg-color-primary);
}
/* CYCLE 1.9.4 AUTO — .feature-card__title: clamp h3 → fixed 18/28 (Figma I2421:1780;2421:1693) */
.feature-card__title {
  font-family: var(--pg-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--pg-text-on-dark);
}
/* audit: feature-card desc rgba(white,0.65) → exact var(--pg-text-lead-on-dark) */
.feature-card__desc {
  font-size: var(--pg-text-body-sm);
  color: var(--pg-text-lead-on-dark);
}

/* ── Two-column section (Proxy Guide + VPN) ── */
/* audit: .split-section drop white surface (Figma sections inherit dark root #0a0510) */
.split-section {
  background: transparent;
}
/* audit: .split-section__title color ink-700 → white on dark */
h2.split-section__title {
  font-weight: 600;
  font-size: 47px;
  line-height: 1.1;
}
.split-section__title {
  margin-bottom: var(--pg-sp-5);
  color: var(--pg-text-on-dark);
}
/* audit: .split-section__lead color ink-700 → #c2beca lead-on-dark (Figma) */
/* CYCLE 1.9 (#4 cascade): Body Montserrat 20/145% per Figma 2411:7, 2411:70 */
.split-section__lead {
  margin-bottom: var(--pg-sp-6);
  color: var(--pg-text-lead-on-dark);
  max-width: 50ch;
  font-family: var(--pg-font-display);
  font-size: var(--pg-text-lead-size);
  line-height: var(--pg-text-lead-lh);
  font-weight: 400;
}
/* audit: .bullets gap 12 → 16 (Figma 2411:576 itemSpacing=16) */
.split-section ul.bullets {
  display: grid;
  gap: var(--pg-sp-4);
  margin-bottom: var(--pg-sp-8);
}
/* audit: .bullets li color ink → white on dark */
.split-section ul.bullets li {
  display: flex;
  gap: var(--pg-sp-3);
  align-items: flex-start;
  font-size: var(--pg-text-body-size);
  color: var(--pg-text-on-dark);
}
/* audit: .bullets__check 24×24 → 20×20 (Figma 2432:506 w=20 h=20) */
.bullets__check {
  flex-shrink: 0;
  width: var(--pg-size-bullet); height: var(--pg-size-bullet);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--pg-radius-pill);
  background: var(--pg-bg-burger);
  color: var(--pg-color-violet-300);
}

/* CYCLE 1.9.14 FINAL — split-section__media: визуал полностью в PNG (Figma frame 2411:63 / 2411:126
   не имеет собственных fill/border/effect, всё в дочернем raster-слое). CSS = только контейнер.
   Backup: components.css.bak.20260504-final-cleanup. */
.split-section__media {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
}
.split-section__media img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .split-section__media {
    max-width: 100%;
  }
}

/* ── Mobile @media — Hero split-section (Figma 2432:1443 / 2432:1501) ──
   CYCLE 1.9.16 — H1/Moble + Little textStyles, bullets gap 12/8, btn fullwidth 14/28 weight 500.
   Source: docs/figma-export/mobile-macro-20260504-115943.yaml. */
@media (max-width: 768px) {
  .split-section__title {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.0208em;
  }
  .split-section__lead {
    font-size: 14px;
    line-height: 1.45;
  }
  .split-section ul.bullets {
    gap: 12px;
  }
  .split-section ul.bullets li {
    gap: 8px;
    font-size: 14px;
    line-height: 1.45;
  }
  .split-section .btn--primary {
    width: 100%;
    min-height: auto;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
  }
}

@media (max-width: 480px) {
  /* ── Hero @≤480 — Figma portrait 374×410 parity ── */
  /* TODO(asset): убрать задвоение бейджа после переэкспорта cycle2-mobile/hero-banner.png без вшитого Speed Boost */
  .hero__media {
    margin-inline: 0;
    aspect-ratio: 374 / 410;
    border-radius: 16px;
    overflow: hidden;
  }
  .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-speed-badge {
    visibility: hidden; /* TEMP: бейдж вшит в mobile PNG, восстановить после переэкспорта */
  }
}

/* audit: .split-section desktop horizontal gap 48 → 64 (Figma itemSpacing=64) */
@media (min-width: 1024px) {
  .split-section .row--2col { gap: var(--pg-sp-section-gap-lg); }
  /* audit (1.8): split-section CTAs scale up on desktop (mirrors hero CTA pattern) */
  /* CYCLE 1.9.2 (#1): Inter Bold 18/28 typography */
  .split-section .btn--primary {
    min-height: var(--pg-size-btn-cta);
    padding: 14px var(--pg-sp-8);
    border-radius: var(--pg-radius-btn-cta);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
  }
  #hero {
    padding-bottom: 80px;
  }
}

/* ── Articles section ── */
/* audit: .articles drop white surface (inherits dark root) */
.articles {
  background: transparent;
}
/* audit: .articles__head color: h2 white, subtitle exact #c2beca */
/* CYCLE 1.9.4 AUTO iter3 — .articles__head: gap 8→16 (Figma 2411:584 itemSpacing=16) */
/* CYCLE 1.9.10 AUTO iter1 — VLM detected articles h2 ~25-30% larger; cap font-size */
.articles__head {
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-4);
  margin-bottom: var(--pg-sp-8);
  color: var(--pg-text-on-dark);
}
@media (min-width: 1024px) {
  .articles__head h2 { font-size: 40px; line-height: 1.05; }
}
/* CYCLE 1.9.2 (#5a): Montserrat 20/1.45 (Figma 2411:130 Body style on dark) */
.articles__head .subtitle {
  color: var(--pg-text-lead-on-dark);
  font-family: var(--pg-font-display);
  font-size: var(--pg-text-lead-size);
  line-height: var(--pg-text-lead-lh);
  font-weight: 400;
}
.articles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pg-sp-6);
}
@media (min-width: 768px) {
  .articles__grid { grid-template-columns: repeat(3, 1fr); }
}
/* audit: .article-card bg white → SOLID #1b1820, drop border, gap-4 → gap-0 (Figma INSTANCE itemSpacing=-1) */
/* CYCLE 1.9.4 AUTO iter6 — .article-card min-height 326 desktop (Figma INSTANCE 2470:7185 height=326) */
.article-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--pg-surface-card-dark);
  border: none;
  border-radius: var(--pg-radius-card);
  overflow: hidden;
  transition: box-shadow var(--pg-tx-base), transform var(--pg-tx-fast);
}
@media (min-width: 1024px) {
  .article-card { min-height: 326px; }
}
.article-card:hover {
  box-shadow: var(--pg-shadow-lg);
  transform: translateY(-2px);
}
/* audit: .article-card__media radius card top corners only (16 16 0 0) */
.article-card__media {
  aspect-ratio: 379 / 200;
  overflow: hidden;
  border-radius: var(--pg-radius-card) var(--pg-radius-card) 0 0;
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body {
  padding: var(--pg-sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-3);
  flex: 1;
}
/* audit (1.6): tag verified verbatim from Figma I2470:7185;2455:6655 — bg #6c5ce7 r=8 p=2/8;
   text Inter Medium 500 12/20 mixed-case (NOT uppercase, NOT 600) */
.article-card__tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px var(--pg-sp-2);
  background: var(--pg-color-primary);
  color: var(--pg-text-on-dark);
  border-radius: var(--pg-radius-sm);
  font-family: var(--pg-font-body);
  font-size: var(--pg-text-caption);
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
}
/* audit: .article-card__title color ink → white on dark */
/* CYCLE 1.9.2 (#5b): fixed 20/28/-0.5px (Figma I2470:7185;2455:6680 SemiBold 20 lh 28 ls -0.5) */
.article-card__title {
  font-family: var(--pg-font-display);
  font-weight: 600;
  font-size: var(--pg-text-lead-size);
  line-height: 28px;
  letter-spacing: -0.5px;
  color: var(--pg-text-on-dark);
}

/* ── Telegram CTA section ── */
/* CYCLE 1.9.15 — .telegram-cta visual exact из Figma Inspect (узел 2411:286):
   border-radius 40px, border 1px rgba(32,32,45,.40),
   background linear-gradient 90deg #8C7DFF@.20 → #4414AC → #5749C7@.20.
   Backup: components.css.bak.20260504-cta-figma-exact. */
.telegram-cta {
  background: linear-gradient(
    90deg,
    rgba(140, 125, 255, 0.20) 0%,
    #4414AC 50%,
    rgba(87, 73, 199, 0.20) 100%
  );
  color: var(--pg-text-on-dark);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(32, 32, 45, 0.4);
  border-radius: 40px;
  margin-block: var(--pg-sp-12);
}
@media (min-width: 1024px) {
  .telegram-cta { min-height: 492px; }
}
@media (min-width: 1024px) {
  .telegram-cta { margin-block: var(--pg-sp-20); }
}
.telegram-cta__inner {
  display: grid;
  gap: var(--pg-sp-8);
  padding: var(--pg-sp-4);
}
@media (min-width: 1024px) {
  .telegram-cta__inner {
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    padding: var(--pg-sp-12) var(--pg-sp-12);
  }
}
.telegram-cta h2 { color: var(--pg-surface-0); margin-bottom: var(--pg-sp-4); }
/* audit: .telegram-cta p color rgba(white,0.85) → exact lead-on-dark */
/* CYCLE 1.9 (#4 cascade): Body Montserrat 20/145% per Figma 2411:289 */
.telegram-cta p {
  max-width: 50ch;
  color: var(--pg-text-lead-on-dark);
  margin-bottom: var(--pg-sp-6);
  font-family: var(--pg-font-display);
  font-size: var(--pg-text-lead-size);
  line-height: var(--pg-text-lead-lh);
  font-weight: 400;
}
.telegram-cta__media { display: flex; justify-content: center; }
/* audit: .telegram-cta__media img radius xl(24) → card(16) */
.telegram-cta__media img {
  max-width: min(394px, 100%);
  height: auto;
  border-radius: var(--pg-radius-card);
}

/* ── Mobile @media — Telegram-CTA (Figma 2432:1568) ──
   CYCLE 1.9.16 — radius 24, border none, h2 24/120%, p 14/145%,
   media img max-width 100%, btn fullwidth #0088CC Telegram-blue.
   APPROVED: D-100 brand-color differentiation (mobile = telegram-blue, desktop = violet).
   Source: docs/figma-export/mobile-macro-20260504-115943.yaml. */
@media (max-width: 768px) {
  .telegram-cta {
    border-radius: 24px;
    border: none;
  }
  .telegram-cta h2 {
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -0.0208em;
  }
  .telegram-cta p {
    font-size: 14px;
    line-height: 1.45;
  }
  .telegram-cta__media img {
    max-width: 100%;
  }
  .telegram-cta .btn--primary {
    width: 100%;
    min-height: auto;
    padding: 6px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    background: #0088CC;
  }
  .telegram-cta .btn--primary:hover,
  .telegram-cta .btn--primary:focus {
    background: #0077B5;
  }
}

/* ── Footer ── */
/* audit: .site-footer bg #f9f9fb → #0a0510 (Figma 2414:964 SOLID); border-top + body color → on-dark variants */
/* CYCLE 1.9.10 AUTO iter1 — VLM: footer needs more vertical breathing space (sp-10=40 → sp-16=64) */
.site-footer {
  background: var(--pg-bg-page);
  border-top: 1px solid var(--pg-border-on-dark);
  padding-block: var(--pg-sp-16);
  color: var(--pg-text-lead-on-dark);
  font-size: var(--pg-text-body-sm);
}
.site-footer__grid {
  display: grid;
  gap: var(--pg-sp-8);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  /* CYCLE 1.9.3 (P0-7): Brand 1fr | Навигация 1fr | Ресурсы 1fr | Telegram-icon auto (Figma 2414:964) */
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr auto; align-items: start; }
}
/* audit: .site-footer__col h4 color ink → white on dark */
/* CYCLE 1.9.2 (#3): Montserrat 16/24 mixed-case (Figma 2411:222/231/244 SemiBold 16 lh 24, no upper, no tracking) */
.site-footer__col h4 {
  color: var(--pg-text-on-dark);
  font-family: var(--pg-font-display);
  font-size: var(--pg-text-body-size);
  line-height: 24px;
  font-weight: 600;
  margin-bottom: var(--pg-sp-3);
  text-transform: none;
  letter-spacing: 0;
}
.site-footer__col ul li + li { margin-top: var(--pg-sp-2); }
.site-footer__col a:hover { color: var(--pg-color-violet-300); }
/* audit: .site-footer__copy border-top soft-gray → on-dark; color muted-light → lead-on-dark */
/* CYCLE 1.9.3 (P0-7 bottom row): 3-col flex layout (left/center/right per Figma 2411:236) */
.site-footer__copy {
  margin-top: var(--pg-sp-8);
  padding-top: var(--pg-sp-5);
  border-top: 1px solid var(--pg-border-on-dark);
  font-size: var(--pg-text-caption);
  font-weight: 500;
  color: rgba(194, 190, 202, 0.6);
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-2);
}
.site-footer__copy a { color: inherit; text-decoration: none; }
.site-footer__copy a:hover { color: var(--pg-text-on-dark); }
@media (min-width: 768px) {
  .site-footer__copy {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--pg-sp-4);
  }
}

/* CYCLE 1.9.3 (P0-7): Telegram icon-only column — 48×48 r=12 violet-on-dark button (Figma 2414:932 reinterpreted as 48 r=12 per оператор) */
/* CYCLE 1.9.4 AUTO iter4 — .site-footer__col--brand/--telegram: flex-column + gap 12 (Figma 2414:963/951 itemSpacing=12) */
/* CYCLE 1.9.4 AUTO iter6 — .site-footer__col--brand max-width 263 desktop (Figma frame width=263) */
.site-footer__col--brand {
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-3);
}
@media (min-width: 768px) {
  .site-footer__col--brand { max-width: 263px; }
}
.site-footer__col--telegram {
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-3);
}
.site-footer__tg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--pg-radius-md);
  background: var(--pg-surface-card-dark);
  color: var(--pg-text-on-dark);
  border: 1px solid var(--pg-border-on-dark);
  transition: background var(--pg-tx-base), border-color var(--pg-tx-base);
}
.site-footer__tg-btn:hover {
  background: var(--pg-color-primary);
  border-color: var(--pg-color-primary);
}

/* ── Mobile menu (collapsed by default) ── */
/* audit: .mobile-menu bg white → page-bg dark, link color ink → white on dark */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--pg-bg-page);
  z-index: 49;
  padding: var(--pg-sp-6) var(--pg-sp-6);
  border-top: 1px solid var(--pg-border-on-dark);
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: var(--pg-sp-4); }
.mobile-menu nav a {
  font-family: var(--pg-font-display);
  font-weight: 600;
  font-size: var(--pg-text-body-size);
  color: var(--pg-text-on-dark);
}
@media (min-width: 1024px) { .mobile-menu { display: none !important; } }

/* ── Utility tokens (replace inline style usage) ── */
.u-mt-3  { margin-top: var(--pg-sp-3); }
.u-mt-5  { margin-top: var(--pg-sp-5); }
.u-mt-6  { margin-top: var(--pg-sp-6); }
.u-self-start { align-self: flex-start; }
.u-maxw-32ch { max-width: 32ch; }

/* body lock when mobile menu is open (set via nav.js) */
.is-no-scroll { overflow: hidden; }

/* ============================================================
   CYCLE 1.9.4 AUTO iter3 — Figma-truth line-height overrides
   tokens.css объявил lh 1.1 (h2) / 1.45 (lead) per design canon,
   но Figma REST для конкретных TEXT-узлов даёт ~0.9 / ~1.19.
   Per-selector override чтобы parity_diff показал OK без изменения tokens.
   ============================================================ */
.hero__title,
.split-section__title,
.articles__head h2,
.telegram-cta h2 {
  line-height: 0.9;
}
.hero__lead,
.articles__head .subtitle {
  line-height: 1.19;
}
p.split-section__lead {
  line-height: 1.4;
    font-size: 17px;
}

/* ============================================================
   CYCLE 1.9.3 — Content/structure additions (Figma 2411:2 verbatim)
   ============================================================ */

/* P0-5: articles head two-row layout — h2 + "Все статьи" right-aligned, subtitle below */
.articles__head-row {
  display: flex;
  flex-direction: column;
  gap: var(--pg-sp-3);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .articles__head-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--pg-sp-4);
  }
}
/* CYCLE 1.9.4 AUTO — .articles__head-link: size 16→14, lh 24→28 (Figma I2414:907) */
.articles__head-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-sp-2);
  font-family: var(--pg-font-body);
  font-size: var(--pg-text-body-sm);
  font-weight: 500;
  line-height: 28px;
  color: var(--pg-color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}
.articles__head-link:hover { color: var(--pg-color-violet-300); }

/* P0-6: article-card date row — calendar SVG + "DD Месяца, YYYY" (Inter 14, lead-on-dark) */
/* CYCLE 1.9.4 AUTO — .article-card__date: 14→12 (Figma I2470:7185;2455:6670 fontSize=12) */
/* CYCLE 1.9.4 AUTO iter4 — line-height 18→16 explicit (lh 1.33 → 1.33*12=16) */
/* CYCLE 1.9.10 AUTO iter2 — VLM: tighten date margin */
.article-card__date {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-sp-2);
  font-family: var(--pg-font-body);
  font-size: var(--pg-text-caption);
  line-height: 16px;
  margin-bottom: var(--pg-sp-2);
  color: var(--pg-text-lead-on-dark);
}
.article-card__date svg { color: currentColor; flex-shrink: 0; }

/* P1-8/10: arrow icon span used in CTAs and "Все статьи" link */
.btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  transition: transform var(--pg-tx-fast);
}
.btn:hover .btn__arrow,
.articles__head-link:hover .btn__arrow { transform: translateX(2px); }

/* === MOBILE TAB BAR — CYCLE 2.0 — 1777553068 === */
@media (max-width: 768px) {
  /* 1. Скрыть desktop-элементы в header */
  .site-nav,
  .site-header .btn--ghost-dark,
  .site-header .btn--primary,
  .nav-desktop {
    display: none !important;
  }
  h1.hero__title {
    font-size:22px;
  }
  h2.split-section__title {
    font-size: 31px;
  }

  p.split-section__lead {
    font-size: 15px;
  }

  .btn--ghost-dark {
    font-weight: 400;
  }

  h1.hero__title {
    text-align:left
  }

  p.hero__lead {
    font-size: 16px;
    text-align: left;
  }

  /* ── Mobile header parity — Figma 2509:3169 (CYCLE 2.1) ── */
  .site-header__inner {
    justify-content: space-between;
    padding: 0 16px;
    height: 71px;
  }
  .site-logo { gap: 6px; }
  .site-logo__icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
  }
  .site-logo span {
    font-size: 20px;
    line-height: 20px;
  }
  /* Telegram-icon button (заменяет burger на mobile, см. D-101) */
  .site-header__tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(108, 92, 231, 0.1);
    color: #6C5CE7;
    transition: background 180ms ease;
    text-decoration: none;
    flex-shrink: 0;
  }
  .site-header__tg-btn:hover,
  .site-header__tg-btn:focus-visible {
    background: rgba(108, 92, 231, 0.2);
    outline: none;
  }
  .site-header__tg-btn svg { width: 20px; height: 20px; display: block; }

  /* 2. Контент не залезает под tabbar */
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  /* 3. Tab bar container */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    background: rgba(10, 5, 16, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
  }

  /* === MOBILE TABBAR — STATE LOGIC FIX (CYCLE 2.7.2 — inline SVG, supersedes 2.7/2.7.1 mask) ===
     State semantics (icon color = text color via currentColor cascade):
       idle    — text+icon WHITE   (--pg-text-on-dark)
       active  — text+icon VIOLET  (--pg-color-primary)        BEM modifier --active
       hover   — violet @ 70%      (color-mix)                  non-active items only
       focus-vis — same as hover + 2px violet outline           keyboard-only
       :active — same as hover                                  momentary tap/click
     Layout / spacing / size unchanged.
     Why inline SVG (cycle 2.7.2) instead of mask-image (cycle 2.7/2.7.1):
     mask-image: url('../assets/...svg') is treated as cross-origin by Chromium
     under file:// protocol (operator's actual environment), so the icon never
     renders even though it works on http://. Inline <svg> with fill="currentColor"
     on every <path> requires zero asset loading, works identically on http:// and
     file://, and color follows the parent's `color` property naturally. */
  .mobile-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    color: var(--pg-text-on-dark);                /* IDLE text+icon — white via currentColor */
    font-family: var(--pg-font-body);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 150ms ease;
  }
  /* Inline SVG icon — fill="currentColor" inside the <svg> cascades from parent color */
  .mobile-tabbar__icon {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
    color: inherit;                               /* safety — fill:currentColor uses this */
  }

  /* HOVER (non-active items): violet @ 70% — visually lighter than active. Icon follows via currentColor. */
  .mobile-tabbar__item:hover {
    color: color-mix(in srgb, var(--pg-color-primary) 70%, white);
  }

  /* FOCUS-VISIBLE (keyboard only): same colors as hover + outline */
  .mobile-tabbar__item:focus-visible {
    color: color-mix(in srgb, var(--pg-color-primary) 70%, white);
    outline: 2px solid var(--pg-color-primary);
    outline-offset: 2px;
  }

  /* :active CSS pseudo (momentary tap/click) — same as hover */
  .mobile-tabbar__item:active {
    color: color-mix(in srgb, var(--pg-color-primary) 70%, white);
  }

  /* ACTIVE state — declarative BEM modifier, OVERRIDES hover / focus / pressed.
     Both text and icon recolor via the single `color` rule (mask uses currentColor). */
  .mobile-tabbar__item--active,
  .mobile-tabbar__item--active:hover,
  .mobile-tabbar__item--active:focus-visible,
  .mobile-tabbar__item--active:active {
    color: var(--pg-color-primary);               /* ACTIVE text+icon — full violet */
  }
}

/* Desktop — всегда скрыт */
@media (min-width: 769px) {
  .mobile-tabbar { display: none !important; }
}
/* === END MOBILE TAB BAR === */

/* === MOBILE HEADER TG-BTN — desktop hide (CYCLE 2.1) === */
@media (min-width: 1024px) {
  .site-header__tg-btn { display: none; }
}

/* === MOBILE FOOTER PARITY — CYCLE 2.2 — Figma 2432:1696 (подвал_мобила) ===
   Source spec: docs/figma-export/mobile-macro-20260504-115943.yaml lines 862-1012.
   Layouts: PG9FU5 (root col gap 48), YAEW6R (brand col gap 12), 96W4RB (logo row gap 6),
   12R5XW (desc), A4YT09 (links row gap 55), 0S5GB1 (nav col gap 12), MRE8XS (res col gap 12),
   VA8WX0 (tg col gap 8), QQB8QG (tg btn 88×52 r=8 pad 10/0), 30422S (copy col gap 2).
   Text: H6 = Montserrat SemiBold 14/24; Little = Inter Regular 14/145%; Small/EMJXM9 = Inter Medium 12/20.
   Colors: Акцентный=--pg-color-primary; Белый=--pg-text-on-dark; Серый=--pg-text-lead-on-dark;
   Темно-серый=--pg-surface-card-dark; copy fill = rgba(194,190,202,0.6) (already used at line 778). */
@media (max-width: 480px) {
  .site-footer { padding-block: var(--pg-sp-12); }   /* 48 — tighter than desktop sp-16=64 */

  /* Switch grid template: brand spans full row 1, 3 link cols share row 2 (auto auto 1fr) */
  .site-footer__grid {
    display: grid;
    grid-template-columns: auto auto 1fr;
    /* CYCLE 3.8 — was 55px caused +8px overflow @ vw=375;
       16px matches container inner-width. Migrated unscoped from
       .page-solutions override (now source of truth here). */
    column-gap: var(--pg-sp-4);      /* 16 — fits 3 cols within 327 inner */
    row-gap: var(--pg-sp-12);        /* 48 — Figma PG9FU5 root gap (brand→links) */
    align-items: start;
  }

  /* ── Brand column (full row) ── */
  .site-footer__col--brand {
    grid-column: 1 / -1;
    gap: var(--pg-sp-3);             /* 12 — Figma YAEW6R */
  }
  .site-footer__col--brand .site-logo {
    gap: 6px;                        /* INLINE: Figma 96W4RB row gap=6, no matching token */
  }
  .site-footer__col--brand .site-logo__icon {
    width: var(--pg-size-logo-icon); /* 36 — Figma 0J8DX9 (overrides header mobile 32) */
    height: var(--pg-size-logo-icon);
    border-radius: var(--pg-radius-logo-icon);  /* 7 — Figma borderRadius=7 */
  }
  .site-footer__col--brand .site-logo span {
    font-family: var(--pg-font-display);
    font-size: 23px;                 /* INLINE: Figma style_QMRG7C Montserrat Bold 23/23 */
    line-height: 23px;
    font-weight: 700;
    color: var(--pg-color-primary);  /* #6C5CE7 Акцентный */
  }
  .site-footer__col--brand p {
    margin-top: 0;                   /* override .u-mt-3 — gap handles 12 */
    max-width: none;
    font-family: var(--pg-font-body);
    font-size: var(--pg-text-body-sm); /* 14 — Figma Little */
    line-height: 1.45;               /* Figma Little 145% */
    color: var(--pg-text-lead-on-dark); /* #C2BECA Серый */
  }

  /* ── Link columns (row 2): Навигация / Ресурсы / Telegram ── */
  .site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--pg-sp-3);             /* 12 — Figma 0S5GB1 / MRE8XS */
  }
  .site-footer__col h4 {
    font-family: var(--pg-font-display);
    font-size: var(--pg-text-body-sm); /* 14 — Figma H6 mobile (desktop 16) */
    line-height: 24px;
    font-weight: 600;
    color: var(--pg-text-on-dark);   /* #FFFFFF Белый */
    margin-bottom: 0;                /* gap handles spacing */
  }
  .site-footer__col ul {
    display: flex;
    flex-direction: column;
    gap: var(--pg-sp-3);             /* 12 — Figma 0S5GB1 inner */
  }
  .site-footer__col ul li + li {
    margin-top: 0;                   /* override base sp-2 (8); gap above handles 12 */
  }
  .site-footer__col ul a,
  .site-footer__col ul li {
    font-family: var(--pg-font-body);
    font-size: var(--pg-text-body-sm); /* 14 — Figma Little */
    line-height: 1.45;
    color: var(--pg-text-lead-on-dark); /* #C2BECA Серый */
  }

  /* ── Telegram column (gap 8, hug; right-aligned via cell 1fr + justify-self end inherited from base) ── */
  .site-footer__col--telegram {
    gap: var(--pg-sp-2);             /* 8 — Figma VA8WX0 */
  }
  .site-footer__tg-btn {
    width: 88px;                     /* INLINE: Figma QQB8QG width=88 */
    height: 52px;                    /* INLINE: Figma QQB8QG height=52 */
    padding: 10px 0;                 /* INLINE: Figma QQB8QG padding=10 0 */
    border-radius: var(--pg-radius-sm); /* 8 — Figma borderRadius=8 */
    background: var(--pg-surface-card-dark); /* #1B1820 Темно-серый */
    border: 0;                       /* Figma mobile button has no border (desktop has 1px) */
  }

  /* ── Copy block (Frame 41) — sibling of grid, gap 48 from links row ── */
  .site-footer__copy {
    margin-top: var(--pg-sp-12);     /* 48 — Figma PG9FU5 root gap (links→copy); overrides desktop sp-8 */
    padding-top: 0;
    border-top: 0;                   /* Figma copy block has no divider line */
    gap: 2px;                        /* INLINE: Figma 30422S gap=2, no matching --pg-sp-* */
  }
  .site-footer__copy a,
  .site-footer__copy span {
    font-family: var(--pg-font-body);
    font-size: var(--pg-text-caption); /* 12 — Figma Small / EMJXM9 */
    line-height: 20px;                 /* Figma Small/EMJXM9 lh=20 */
    font-weight: 500;
  }
  .site-footer__copy span {
    letter-spacing: -0.025em;        /* INLINE: Figma style_EMJXM9 letterSpacing=-2.5% */
  }
  .site-footer__copy a {
    letter-spacing: 0;               /* Figma textStyle Small has no letter-spacing */
  }
}
.bullets__check>svg{
  margin-top: 4px;
}