/* Block: hero */

.hero {
  padding: var(--space-12) 0 var(--space-11);
}

.hero__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Top grid: text + visual */

.hero__content {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: var(--space-9);
  align-items: center;
  margin-bottom: var(--space-11);
}

.hero__eyebrow {
  font-size: 12px;
  color: var(--color-text-secondary);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5.4vw, 64px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
}

.hero__subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-7);
  max-width: 460px;
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Visual — orbital diagram */

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__diagram {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.hero__ring-line {
  fill: none;
  stroke: var(--color-border-tertiary);
  stroke-width: 0.5;
}

.hero__node {
  fill: var(--color-accent);
}

.hero__center {
  fill: var(--color-text-primary);
}

/* Metrics row */

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--color-border-tertiary);
  padding-top: var(--space-7);
}

.hero__metric {
  padding: 0 var(--space-6);
}

.hero__metric:first-child {
  padding-left: 0;
}

.hero__metric:last-child {
  padding-right: 0;
}

.hero__metric:not(:last-child) {
  border-right: 0.5px solid var(--color-border-tertiary);
}

.hero__metric-value {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.hero__metric-label {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Tablet */

@media (max-width: 1024px) {
  .hero {
    padding: var(--space-11) 0 var(--space-10);
  }
  .hero__content {
    gap: var(--space-7);
  }
  .hero__diagram {
    max-width: 280px;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .hero {
    padding: var(--space-9) 0 var(--space-9);
  }

  .hero__content {
    grid-template-columns: 1fr;
    gap: var(--space-9);
    margin-bottom: var(--space-9);
  }

  .hero__visual {
    order: 2;
  }

  .hero__diagram {
    max-width: 240px;
  }

  .hero__subtitle {
    font-size: 16px;
  }

  .hero__metrics {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 0;
    border-top: none;
  }

  .hero__metric {
    padding: var(--space-5) 0;
    border-right: none !important;
    border-top: 0.5px solid var(--color-border-tertiary);
  }

  .hero__metric:first-child {
    border-top: 0.5px solid var(--color-border-tertiary);
    padding-top: var(--space-5);
  }
}