/* ============================================================
   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); }

.btn--primary {
  background: var(--pg-color-primary);
  color: var(--pg-surface-0);
}
.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) */
/* 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-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; }
  .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 */
.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; }
.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 { flex: 1 1 0; 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: 18px;
    font-weight: 700;
    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 */
.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);
}

/* audit: .split-section__media img radius xl(24) → card(16) */
/* CYCLE 1.9.4 AUTO — .split-section__media: + outer border-radius 48 (Figma 2411:63 / 2411:126 outer photo frame) */
/* CYCLE 1.9.4 AUTO iter3 — .split-section__media: max-width 480 + aspect-ratio 480/332 desktop (Figma frame size) */
.split-section__media {
  border-radius: 48px;
  overflow: hidden;
}
@media (min-width: 1024px) {
  /* CYCLE 1.9.10 AUTO iter2 — VLM: phone takes too much section width; constrain to inner image dim 446 */
  .split-section__media {
    max-width: 446px;
    aspect-ratio: 446 / 297;
  }
  .split-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.split-section__media img {
  width: 100%;
  height: auto;
  border-radius: var(--pg-radius-card);
}

/* 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;
  }
}

/* ── 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 ── */
/* audit: .telegram-cta gradient stops + angle (Figma 2411:286 LINEAR 90° #8c7dff/#4414ac/#5749c7); border 1px rgba(32,32,45,0.40); radius 24 mobile / 40 desktop */
/* CYCLE 1.9.4 AUTO iter5 — .telegram-cta min-height 492 desktop (Figma 2411:286 height=492) */
.telegram-cta {
  background: var(--pg-gradient-telegram);
  color: var(--pg-text-on-dark);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--pg-border-cta);
  border-radius: var(--pg-radius-cta-mobile);
  margin-block: var(--pg-sp-12);
}
@media (min-width: 1024px) {
  .telegram-cta { min-height: 492px; }
}
@media (min-width: 1024px) {
  .telegram-cta { border-radius: var(--pg-radius-cta-desktop); 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);
}

/* ── 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,
.split-section__lead,
.articles__head .subtitle {
  line-height: 1.19;
}

/* ============================================================
   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,
  .btn-burger {
    display: none !important;
  }
  .site-header__inner {
    justify-content: space-between;
    padding: 12px 16px;
  }

  /* 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;
  }

  /* 4. Item */
  .mobile-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.55);
    font-family: Inter, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-tabbar__item img,
  .mobile-tabbar__item svg {
    width: 24px; height: 24px;
    display: block;
    opacity: 0.55;
    transition: opacity 180ms ease, filter 180ms ease;
  }

  /* 5. Active state */
  .mobile-tabbar__item.is-active {
    color: #8B5CF6;
    font-weight: 700;
  }
  .mobile-tabbar__item.is-active img,
  .mobile-tabbar__item.is-active svg {
    opacity: 1;
  }
}

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