:root {
  --google-blue: #4285f4;
  --google-red: #ea4335;
  --google-yellow: #fbbc05;
  --google-green: #34a853;
  --ink: #0f172a;
}

html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}

body {
  font-family: inherit;
  background-color: #f6f7fb;
}

.gradient-google {
  background: linear-gradient(120deg, #4285f4, #ea4335, #fbbc05, #34a853);
}

.hero-pattern {
  background: radial-gradient(circle at 20% 20%, rgba(66, 133, 244, 0.2), transparent 55%),
              radial-gradient(circle at 80% 0%, rgba(234, 67, 53, 0.25), transparent 45%),
              radial-gradient(circle at 50% 80%, rgba(52, 168, 83, 0.2), transparent 35%);
}

.shadow-card {
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.glass-card {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.25);
  backdrop-filter: blur(16px);
}

.rainbow-border {
  position: relative;
  border-radius: 1.5rem;
}

.rainbow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--google-blue), var(--google-yellow), var(--google-red), var(--google-green));
  z-index: -1;
}

.icon-ring {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(234, 67, 53, 0.15));
  color: var(--google-blue);
}

.floating-chip {
  animation: float 6s ease-in-out infinite;
}

.pulse-ring {
  position: relative;
}

.pulse-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(148, 163, 184, 0.4);
  animation: pulse 3s ease-out infinite;
}

.spin-slow {
  animation: spin 12s linear infinite;
}

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0);
}

.blur-accent {
  position: absolute;
  width: 320px;
  height: 320px;
  background: linear-gradient(135deg, rgba(66, 133, 244, 0.25), rgba(52, 168, 83, 0.25));
  filter: blur(140px);
  opacity: 0.9;
  z-index: 0;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (max-width: 640px) {
  .blur-accent {
    display: none;
  }
}