:root {
  --primary: #2563eb;
  --secondary: #7c3aed;
  --cyan: #06b6d4;
  --dark: #0f172a;
  --light: #f8fafc;
  --text: #475569;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #f8fafc;
  color: var(--dark);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  width: 700px;
  height: 700px;
  background:
    radial-gradient(circle,
      #60a5fa33,
      transparent 70%);
  top: -250px;
  right: -250px;
  z-index: -2;
}

body::after {
  content: '';
  position: fixed;
  width: 650px;
  height: 650px;
  background:
    radial-gradient(circle,
      #8b5cf633,
      transparent 70%);
  bottom: -250px;
  left: -250px;
  z-index: -2;
}

section {
  position: relative;
  padding: 100px 0;
}

.btn-modern {
  border-radius: 50px;
  padding: 14px 36px;
  font-weight: 600;
  transition: .35s;
}

.btn-primary {
  background:
    linear-gradient(135deg,
      #2563eb,
      #7c3aed);
  border: none;
}

.btn-outline-light {
  border-width: 2px;
}

.btn-modern:hover {
  transform: translateY(-4px);
}

.glass-card {
  background:
    rgba(255, 255, 255, .75);
  backdrop-filter: blur(18px);
  border-radius: 24px;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, .08);
  transition: .35s;
}

.glass-card:hover {
  transform: translateY(-12px);
  box-shadow:
    0 40px 80px rgba(37, 99, 235, .16);
}

.section-title {
  text-align: center;
  margin-bottom: 70px;
}

.section-title h2 {
  font-weight: 800;
  font-size: 2.7rem;
}

.section-title p {
  color: #64748b;
  max-width: 700px;
  margin: 20px auto 0;
}