html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  background: radial-gradient(circle at 10% 0%, #1e293b 0%, #0b1120 32%, #020617 85%);
}

.shadow-soft {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.shadow-deep {
  box-shadow: 0 20px 55px rgba(15, 23, 42, 0.14);
}

.shadow-glow {
  box-shadow: 0 18px 45px rgba(37, 99, 235, 0.28);
}

.h-13 {
  height: 3.25rem;
}

.w-13 {
  width: 3.25rem;
}

.btn-shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 520ms ease;
  z-index: -1;
}

.btn-shine:hover::after {
  left: 140%;
}

.card-hover {
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.card-hover:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.15);
  border-color: rgba(37, 99, 235, 0.25);
}

.section-separator {
  height: 1px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.55), rgba(34, 211, 238, 0));
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}