body { font-family: 'Inter var', sans-serif; }

.bg-grid-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 40px 40px;
}
.hero-gradient {
  background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.15) 0%, rgba(17, 24, 39, 0) 70%);
}
.pricing-card-outer {
  border-radius: 2rem;
  background-color: rgba(255,255,255,0.025);
  box-shadow: 
      inset 0 0 0 1px rgba(255,255,255,0.1), 
      inset 0 2px 4px rgba(0,0,0,0.05),
      0 0 0 1px rgba(255,255,255,0.15),
      0 0 20px 0 rgba(255,255,255,0.12);
}
.pricing-card-middle {
  border-radius: 2rem;
  padding: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.pricing-card-inner {
  border-radius: 1.5rem;
  background-color: #fff;
  padding: 2.5rem;
  padding-bottom: 2.25rem;
  box-shadow: 
      0 25px 50px -12px rgba(0,0,0,0.25),
      0 0 0 1px rgba(15,23,42,0.1), 
      0 0 0 2px rgba(255,255,255,0.1), 
      0 0 8px 0 rgba(255,255,255,0.08);
}
.gradient-fade-section {
  position: relative;
}
.gradient-fade-section::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, rgba(17, 24, 39, 0.8) 70%, rgb(17, 24, 39) 100%);
  pointer-events: none;
  z-index: 0;
}
.gradient-fade-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, transparent 0%, rgba(17, 24, 39, 0.8) 70%, rgb(17, 24, 39) 100%);
  pointer-events: none;
  z-index: 0;
}
:root {
  --star-color-primary: rgba(255, 255, 255, 0.8);
  --star-color-secondary: rgba(129, 140, 248, 0.6);
}
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
      radial-gradient(circle at top, rgba(37, 99, 235, 0.2), transparent 55%),
      radial-gradient(circle at bottom, rgba(15, 23, 42, 0.8), transparent 60%);
  pointer-events: none;
}
.starfield__layer {
  position: absolute;
  width: 220%;
  height: 220%;
  top: -60%;
  left: -60%;
  background-repeat: repeat;
  will-change: transform;
  transition: transform 0.8s ease-out;
  mix-blend-mode: screen;
}
.starfield__layer--close {
  background-image:
      radial-gradient(2px 2px at 25% 35%, rgba(255,255,255,0.65), transparent),
      radial-gradient(2.5px 2.5px at 60% 55%, rgba(129,140,248,0.45), transparent),
      radial-gradient(1.8px 1.8px at 80% 20%, rgba(255,255,255,0.4), transparent);
  background-size: 210px 210px;
  opacity: 0.65;
}
.starfield__layer--mid {
  background-image:
      radial-gradient(1.6px 1.6px at 15% 70%, rgba(148,163,184,0.42), transparent),
      radial-gradient(1.8px 1.8px at 45% 15%, rgba(255,255,255,0.38), transparent),
      radial-gradient(1.3px 1.3px at 75% 45%, rgba(129,140,248,0.3), transparent);
  background-size: 260px 260px;
  opacity: 0.5;
}
.starfield__layer--far {
  background-image:
      radial-gradient(1.1px 1.1px at 30% 30%, rgba(226,232,240,0.32), transparent),
      radial-gradient(1px 1px at 55% 45%, rgba(100,116,139,0.27), transparent),
      radial-gradient(1px 1px at 75% 65%, rgba(148,163,184,0.25), transparent);
  background-size: 320px 320px;
  opacity: 0.35;
}