/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Base Styles */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", "Poppins", ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f8fafc;
  color: #0f172a;
}

/* Background Gradients */
.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-900\/40 {
  --tw-gradient-from: rgba(30, 58, 138, 0.4);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0));
}

.via-slate-950\/80 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(2, 6, 23, 0.8), var(--tw-gradient-to);
}

.to-slate-950 {
  --tw-gradient-to: #020617;
}

.from-blue-400 {
  --tw-gradient-from: #60a5fa !important;
}

.to-indigo-400 {
  --tw-gradient-to: #818cf8 !important;
}

.from-blue-600 {
  --tw-gradient-from: #2563eb;
}

.to-indigo-600 {
  --tw-gradient-to: #4f46e5;
}

/* CRITICAL: Text Gradient with !important to override Tailwind */
.text-transparent {
  color: transparent !important;
}

.bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Text Colors */
.text-white {
  color: white !important;
}

.text-blue-400 {
  color: #60a5fa;
}

.text-indigo-400 {
  color: #818cf8;
}

/* Font Sizes */
.text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

.text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
}

.text-7xl {
  font-size: 4.5rem !important;
  line-height: 1 !important;
}

/* Font Weights */
.font-extrabold {
  font-weight: 800 !important;
}

/* Tracking */
.tracking-tight {
  letter-spacing: -0.025em !important;
}

/* Leading */
.leading-\[1\.1\] {
  line-height: 1.1 !important;
}

/* Spacing */
.mb-6 {
  margin-bottom: 1.5rem !important;
}

/* Display */
.block {
  display: block !important;
}

.hidden {
  display: none !important;
}

/* Responsive */
@media (min-width: 640px) {
  .sm\:text-5xl {
    font-size: 3rem !important;
    line-height: 1 !important;
  }
  
  .sm\:block {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .lg\:text-7xl {
    font-size: 4.5rem !important;
    line-height: 1 !important;
  }
}