.hero { padding: 32px 32px 80px; max-width: 1280px; margin: 0 auto; }
.hero-card { background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--r-2xl); padding: 56px 56px 48px; position: relative; overflow: hidden; }
.hero-card::after {
  content: ""; position: absolute; right: -120px; bottom: -120px; width: 500px; height: 500px;
  background: radial-gradient(circle, color-mix(in oklab, var(--primary) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.hero-meta { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; position: relative; z-index: 1; }

.hero-h1 {
  font-family: var(--display); font-size: clamp(48px, 8vw, 112px); line-height: 0.95; letter-spacing: -0.04em;
  font-weight: 500; color: var(--on-primary-container); position: relative; z-index: 1;
}
.hero-h1 em { font-style: normal; font-weight: 400; color: var(--primary); display: inline; padding: 0 4px; background: color-mix(in oklab, var(--primary) 15%, transparent); border-radius: var(--r-md); }

.hero-actions-row { display: flex; gap: 14px; align-items: center; margin-top: 36px; flex-wrap: wrap; position: relative; z-index: 1; }

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.hero-stats-card, .hero-desc-card { background: var(--surface-container); border-radius: var(--r-xl); padding: 28px; }
.hero-desc-card { background: var(--surface-container-low); }
.hero-desc-card p { font-size: 17px; line-height: 1.55; color: var(--on-surface); }
.hero-desc-card p strong { font-weight: 600; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat { padding: 8px 0; }
.stat-num { font-family: var(--display); font-size: 56px; line-height: 1; letter-spacing: -0.04em; font-weight: 500; color: var(--primary); }
.stat-num .suf { font-size: 32px; opacity: 0.7; }
.stat-lbl { font-size: 12px; color: var(--on-surface-variant); margin-top: 4px; font-weight: 500; }