.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; align-items: start; }
.hero-main { min-width: 0; }
.hero h1 { margin: 0 0 18px; font-size: clamp(20px, 2.6vw, 28px); }
.hero-line { margin: -4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 78ch; white-space: pre-line; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; margin-bottom: 0; }
.hero-stat { padding: 14px 16px; border: 1px solid rgba(83, 217, 255, 0.12); border-radius: 14px; background: linear-gradient(180deg, rgba(11, 19, 28, 0.96), rgba(8, 14, 20, 0.96)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02); min-width: 0; }
.hero-stat-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.hero-stat-value { display: block; color: var(--white); font-size: 14px; line-height: 1.5; word-break: break-word; }
.hero-stat-note { display: block; margin-top: 7px; color: rgba(148, 177, 191, 0.92); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.hero-skeleton { display: grid; gap: 10px; margin-top: 12px; }

html[data-theme="light"] .hero-stat { border-color: rgba(108, 146, 173, 0.22); background: var(--soft-panel); color: var(--text); }
html[data-theme="light"] .hero-stat-value { color: var(--text); }
html[data-theme="light"] .hero-stat-note { color: var(--muted); }

@media (max-width: 1200px) {
  .hero { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .hero { padding: 18px; }
  .hero h1 { font-size: clamp(18px, 6vw, 24px); }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stat { padding: 12px 14px; }
}