:root {
  --fwf-primary: #4b6fff;
  --fwf-accent: #ff6f61;
  --fwf-bg: #0f172a;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Hero */

.hero-section {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, #4b6fff 0, transparent 55%),
              radial-gradient(circle at bottom right, #ff6f61 0, transparent 55%),
              linear-gradient(135deg, #020617, #0f172a);
  opacity: 0.9;
  z-index: -2;
}

.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 0 0, rgba(255,255,255,0.08) 0, transparent 50%),
                    radial-gradient(circle at 100% 100%, rgba(255,255,255,0.04) 0, transparent 50%);
  mix-blend-mode: soft-light;
  z-index: -1;
}

/* Animation */

.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

.fade-in-up.delay-1 { animation-delay: 0.15s; }
.fade-in-up.delay-2 { animation-delay: 0.3s; }
.fade-in-up.delay-3 { animation-delay: 0.45s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards */

.method-card,
.stat-card,
.resource-card,
.glass-card {
  border-radius: 1rem;
  background: #fff;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.newsletter-section {
  background: linear-gradient(135deg, #e0ecff, #ffe8e5);
}

.glass-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.stat-card {
  background: linear-gradient(135deg, #f9fafb, #e5edff);
}

/* Hover / tilt */

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18);
}

.tilt-card {
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
}

/* About page */

.about-image {
  max-height: 420px;
  object-fit: cover;
}

.client-logos img {
  max-height: 60px;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.client-logos img:hover {
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-4px);
}

/* Footer */

footer a:hover {
  color: var(--fwf-accent);
}

/* Forms */

form .form-control:focus {
  border-color: var(--fwf-primary);
  box-shadow: 0 0 0 0.15rem rgba(75, 111, 255, 0.25);
}

/* Navbar fix */

body {
  padding-top: 56px;
}

@media (min-width: 992px) {
  body {
    padding-top: 70px;
  }
}