.section-spacing {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px var(--page-gutter);
}

.hero {
  --text: #f7f4ff;
  --muted: #d8d1e9;
  --primary-light: #c3a6ff;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  max-width: none;
  min-height: calc(100svh - 82px);
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(90deg, rgba(3, 4, 16, 0.92) 0%, rgba(5, 5, 18, 0.78) 38%, rgba(5, 5, 18, 0.26) 70%),
    linear-gradient(180deg, rgba(5, 5, 16, 0.22) 0%, rgba(5, 5, 16, 0.24) 62%, rgba(5, 5, 16, 0.9) 100%),
    url("../assets/hero-astrya-tech.png") center right / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, #050510);
  pointer-events: none;
}

body.light-theme .hero::after {
  height: 28%;
  background: linear-gradient(180deg, transparent, #050510);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100%, 1180px);
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.eyebrow {
  color: var(--primary-light);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(2.7rem, 7vw, 5.8rem);
  line-height: 0.98;
  max-width: 780px;
  overflow-wrap: break-word;
}

.hero h1 span {
  color: var(--primary-light);
}

.hero p,
.section-title p,
.contact-info p {
  color: var(--muted);
  max-width: 660px;
}

.hero p {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  max-width: 620px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 640px) {
  .section-spacing {
    padding: 48px var(--page-gutter);
  }

  .hero {
    min-height: calc(100svh - 72px);
    padding-top: 44px;
    padding-bottom: 62px;
    background:
      linear-gradient(90deg, rgba(3, 4, 16, 0.94) 0%, rgba(4, 5, 18, 0.82) 48%, rgba(4, 5, 18, 0.38) 100%),
      linear-gradient(180deg, rgba(5, 5, 16, 0.16) 0%, rgba(5, 5, 16, 0.42) 72%, rgba(5, 5, 16, 0.9) 100%),
      url("../assets/hero-astrya-tech.png") 82% center / cover no-repeat;
  }

  .hero h1 {
    font-size: clamp(2.35rem, 16vw, 3.5rem);
    line-height: 1.03;
  }

  .hero p {
    max-width: 34rem;
  }

  .hero-buttons .btn {
    width: 100%;
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .hero {
    padding-top: 48px;
    background-position: 62% center;
  }
}