.hero {
  position: relative;
  background:
    linear-gradient(90deg, rgba(245, 246, 248, 0.92) 0%, rgba(245, 246, 248, 0.78) 48%, rgba(245, 246, 248, 0.35) 100%),
    url("/assets/hero-glow.jpg") center / cover no-repeat;
  padding: var(--space-8) 0 var(--space-9);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.4rem), calc(100% - 3.2rem) 100%, 0 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-7);
  align-items: center;
}

.hero-copy h1 { max-width: 14ch; }

.hero-lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero-scope {
  margin-top: var(--space-5);
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  max-width: 46rem;
}

.hero-scope p { font-size: 0.95rem; }

.hero-visual {
  position: relative;
  min-height: 22rem;
}

.hero-visual .img-round {
  height: 100%;
  min-height: 22rem;
  box-shadow: var(--shadow-lg);
}

.hero-chip {
  position: absolute;
  left: 1rem;
  bottom: 1.2rem;
  background: rgba(255, 255, 255, 0.92);
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  max-width: 16rem;
  font-size: 0.88rem;
}

@media (max-width: 860px) {
  .hero { clip-path: none; padding: var(--space-7) 0; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 16rem; }
  .hero-visual .img-round { min-height: 16rem; }
  h1 { max-width: none; }
}