/* hero-sections.css — Stat-Strip + Schema-First для gruppa-alfa.ru
   ТОЛЬКО новые секции. Не трогает существующие стили сайта. */

:root {
  --accent-text:   #1a1030;
  --accent-hover:  #e66a0d;
  --accent-active: #cc5e10;
  --surface-card:  rgba(255, 255, 255, 0.04);
  --surface-elev:  rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --focus-ring:    0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --container-max: 1200px;
  --space-section: clamp(48px, 8vw, 96px);
}

.stat-strip {
  padding: clamp(32px, 6vw, 64px) 20px;
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.stat-strip__list {
  max-width: var(--container-max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 32px;
  list-style: none; padding: 0;
}
.stat-strip__item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 4px;
}
.stat-strip__value {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.stat-strip__label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem; letter-spacing: 0.04em; color: var(--purple-light);
}
@media (min-width: 768px) {
  .stat-strip__list { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.scheme { padding: var(--space-section) 20px; }
.scheme__inner { max-width: var(--container-max); margin: 0 auto; }
.scheme__header { text-align: center; margin-bottom: clamp(40px, 6vw, 64px); }
.scheme__eyebrow {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.18em;
  color: var(--purple-light); text-transform: uppercase;
  margin: 0 0 12px;
}
.scheme__title {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1;
  color: var(--ink); margin: 0 0 16px;
}
.scheme__lede {
  font-size: 1.0625rem; line-height: 1.55;
  color: var(--purple-light); max-width: 60ch; margin: 0 auto;
}
.scheme__diagram {
  display: grid; grid-template-columns: 1fr;
  gap: 24px; align-items: stretch;
}
.scheme__column {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px; padding: 24px 20px;
}
.scheme__column-title {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 0.875rem; letter-spacing: 0.18em;
  color: var(--purple-light); text-transform: uppercase;
  margin: 0 0 16px;
}
.scheme__nodes {
  display: flex; flex-direction: column; gap: 10px;
  list-style: none; padding: 0; margin: 0;
}
.scheme-node {
  background: var(--surface-elev);
  border: 1px solid var(--border-subtle);
  border-radius: 8px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.scheme-node__title {
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 1rem; color: var(--ink);
}
.scheme-node__hint { font-size: 0.875rem; color: var(--purple-light); }
.scheme-node--stack { border-color: var(--purple-mid); }
.scheme-node--gov { border-color: var(--accent); }
.scheme__arrow {
  display: flex; align-items: center; justify-content: center;
  height: 24px; color: var(--purple-light);
}
.scheme__arrow::before {
  content: ''; width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
@media (min-width: 1024px) {
  .scheme__diagram { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; }
  .scheme__arrow { height: auto; min-width: 24px; }
  .scheme__arrow::before { transform: rotate(-45deg); }
}
.scheme__cta { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 48px); }
.scheme__cta .btn--primary {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 14px 28px; min-height: 48px;
  font-family: 'Oswald', sans-serif; font-weight: 500;
  font-size: 1rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  border: 0; border-radius: 4px; cursor: pointer;
  background: var(--accent); color: var(--accent-text);
  transition: background-color 160ms ease, transform 80ms ease;
}
.scheme__cta .btn--primary:hover { background: var(--accent-hover); }
.scheme__cta .btn--primary:active { background: var(--accent-active); transform: translateY(1px); }
.scheme__cta .btn__arrow { display: inline-block; transition: transform 160ms ease; }
.scheme__cta .btn--primary:hover .btn__arrow { transform: translateX(3px); }