.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
}

body {
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(244, 247, 251, 0.98)),
    linear-gradient(120deg, rgba(31, 58, 95, 0.04), transparent 30%),
    linear-gradient(300deg, rgba(90, 122, 168, 0.05), transparent 35%);
}

.hero-grid::after {
  content: "";
  position: absolute;
  inset: 6% auto auto 54%;
  width: 240px;
  height: 240px;
  border-radius: 9999px;
  background: rgba(201, 111, 59, 0.12);
  filter: blur(48px);
  pointer-events: none;
}

.hero-card,
.service-card,
.contact-panel {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease;
}

.hero-card:hover,
.service-card:hover,
.contact-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(17, 39, 67, 0.16);
}

.service-card:hover {
  border-color: rgba(201, 111, 59, 0.45);
}

@media (max-width: 768px) {
  .hero-grid::after {
    inset: auto auto 10% 55%;
    width: 180px;
    height: 180px;
  }
}