.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
  background:
    radial-gradient(circle at 90% 10%, rgb(239 130 95 / 0.18) 0 10rem, transparent 10.1rem),
    linear-gradient(145deg, #f4fbfa 0%, #fffaf3 100%);
}

.hero__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

.hero__copy {
  display: grid;
  gap: var(--space-5);
}

.hero h1 {
  max-width: 14ch;
  font-size: var(--font-size-hero);
}

.hero__visual {
  position: relative;
  display: grid;
  min-height: 18rem;
  place-items: center;
}

.number-board {
  position: relative;
  display: grid;
  width: min(100%, 24rem);
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding: var(--space-5);
  transform: rotate(1.5deg);
  border: 1px solid rgb(24 50 74 / 0.1);
  border-radius: 2rem;
  background: rgb(255 255 255 / 0.85);
  box-shadow: var(--shadow-md);
}

.number-tile {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-size: clamp(1.4rem, 6vw, 2.3rem);
  font-weight: 850;
}

.number-tile:nth-child(2),
.number-tile:nth-child(6) {
  background: var(--color-accent-soft);
  color: #7a2f19;
}

.number-tile:nth-child(4) {
  transform: rotate(-4deg);
  background: var(--color-ink);
  color: white;
}

.page-intro {
  padding-block: var(--space-7);
  background: linear-gradient(145deg, var(--color-surface-soft), white);
}

.page-intro__content {
  display: grid;
  max-width: 46rem;
  gap: var(--space-4);
}

.app-hero {
  --app-accent: #176b72;
  --app-accent-soft: #d9f1ef;
}

.app-hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.app-hero .app-icon {
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 1.75rem;
  font-size: 2rem;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgb(23 107 114 / 0.12);
}

.screenshot-placeholder {
  display: grid;
  min-height: 19rem;
  align-content: center;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px dashed #afc4c8;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, white, var(--color-surface-soft));
  color: var(--color-ink-soft);
  text-align: center;
}

.screenshot-placeholder__frame {
  display: grid;
  width: 4rem;
  height: 6.5rem;
  place-items: center;
  border: 2px solid var(--color-primary);
  border-radius: 0.75rem;
  color: var(--color-primary);
  font-weight: 850;
}

.contact-panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  box-shadow: var(--shadow-md);
}

.contact-panel h2,
.contact-panel p,
.contact-panel a {
  color: white;
}

.contact-panel p {
  color: #dce6eb;
}

@media (min-width: 48rem) {
  .hero {
    padding-block: var(--space-9);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  }

  .app-hero__inner {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .page-intro {
    padding-block: var(--space-8);
  }
}