/* Global layout & typography (non-critical) */
body {
  color-scheme: light;
}

main {
  display: block;
}

.page-shell {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.04) 0, transparent 45%),
    radial-gradient(circle at bottom, rgba(249, 115, 22, 0.05) 0, transparent 50%);
}

.section + .section {
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

/* Hero extras */
.hero {
  isolation: isolate;
}

.hero-media__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 10% 0, rgba(37, 99, 235, 0.06), transparent 55%);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .hero-media:hover .hero-media__image {
    transform: scale(1.05);
  }
}

/* Steps numbers alignment */
#steps .card .card__icon {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.16);
  color: #0f172a;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Steps layout: keep 4 items balanced */
@media (min-width: 768px) {
  #steps .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #steps .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Larger screens refinements */
@media (min-width: 768px) {
  .hero-lead {
    font-size: 1rem;
  }

  .hero-note {
    font-size: 0.85rem;
  }

  .section-title {
    font-size: 1.6rem;
  }
}

@media (min-width: 960px) {
  .hero-title {
    letter-spacing: -0.04em;
  }

  .hero-lead {
    max-width: 600px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}