.mechanics-hero {
  position: relative;
  padding-top: var(--space-16);
  padding-bottom: var(--space-12);
  background: radial-gradient(circle at 10% 0, rgba(56, 189, 248, 0.35), transparent 55%), radial-gradient(circle at 80% 100%, rgba(34, 197, 94, 0.25), transparent 60%), linear-gradient(180deg, #020617 0%, #020617 40%, #020617 100%);
}

.mechanics-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-10);
  align-items: center;
}

.mechanics-hero-copy {
  max-width: 40rem;
}

.mechanics-hero-meta {
  margin-top: var(--space-4);
  max-width: 32rem;
}

.mechanics-hero-panel {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.9));
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
}

.mechanics-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.mechanics-hero-stat {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.mechanics-hero-label {
  display: block;
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 4px;
}

.mechanics-hero-value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.mechanics-hero-tagline {
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.mechanics-section-header {
  margin-bottom: var(--space-6);
}

.mechanics-section-header--center {
  text-align: center;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

.mechanics-core-grid {
  align-items: stretch;
}

.mechanics-core-card {
  height: 100%;
}

.mechanics-list {
  margin-top: var(--space-2);
}

.mechanics-list li {
  color: var(--color-text-muted);
  margin-bottom: 0.4rem;
}

.mechanics-vision-layout,
.mechanics-environment-layout,
.mechanics-status-layout,
.mechanics-progression-layout,
.mechanics-initiative-layout,
.mechanics-resources-layout,
.mechanics-fit-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
  gap: var(--space-8);
  align-items: center;
}

.mechanics-vision-media,
.mechanics-environment-media,
.mechanics-fit-media {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-soft);
  background: var(--color-bg-soft);
}

.mechanics-vision-media img,
.mechanics-environment-media img,
.mechanics-fit-media img {
  width: 100%;
}

.mechanics-vision-media figcaption,
.mechanics-environment-media figcaption,
.mechanics-fit-media figcaption {
  padding: var(--space-3) var(--space-4);
}

.mechanics-environment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.mechanics-env-card {
  height: 100%;
}

.mechanics-positioning-grid,
.mechanics-ap-grid,
.mechanics-progression-grid,
.mechanics-resources-grid,
.mechanics-next-grid {
  align-items: stretch;
}

.mechanics-pos-card,
.mechanics-ap-card,
.mechanics-prog-card,
.mechanics-res-card,
.mechanics-next-card {
  height: 100%;
}

.mechanics-status-layout {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.mechanics-status-card,
.mechanics-initiative-card {
  height: 100%;
}

.mechanics-fit-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.mechanics-next-layout {
  max-width: 60rem;
}

.nowrap {
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .mechanics-hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .mechanics-hero-panel {
    order: -1;
  }

  .mechanics-vision-layout,
  .mechanics-environment-layout,
  .mechanics-status-layout,
  .mechanics-progression-layout,
  .mechanics-initiative-layout,
  .mechanics-resources-layout,
  .mechanics-fit-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .mechanics-hero {
    padding-top: var(--space-12);
    padding-bottom: var(--space-10);
  }

  .mechanics-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mechanics-hero-panel {
    padding: var(--space-4);
  }

  .mechanics-section-header--center {
    text-align: left;
  }

  .mechanics-next-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}