/* --- NEW COLOR PALETTE: NAVY BLUE & AMBER (DARK MODE) --- */
:root {
  --color-primary: #fbbf24; /* Amber-400 */
  --color-dark: rgb(0, 0, 0); /* Slate-900 (Page Background) */
  --color-secondary-dark: #1e293b; /* Slate-800 (Card Background) */
  --color-hero-background: #1e293b; /* Slate-800 for the floating Hero container */
  --color-accent-blue: #2563eb; /* Blue-600 */
}
body {
  font-family: "Inter", sans-serif;
  background-color: var(--color-dark); /* Deep Dark Background */
  color: #e2e8f0; /* Light Gray for default text */
}
.section {
  box-shadow: #a4c3c4;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.text-gradient {
  /* Amber gradient for Charged feel */
  background-image: linear-gradient(to right, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-charged {
  @apply px-5 py-2.5 rounded-full font-bold text-sm transition duration-300 transform hover:scale-[1.05] shadow-lg;
}
.card-icon-container {
  @apply w-12 h-12 rounded-lg flex items-center justify-center mb-4 shadow-md;
}
/* Custom input styling for DARK sections (White text on dark field) */
input[type="text"],
input[type="email"],
textarea {
  /* UPDATED for Dark Mode: Dark field, light text, amber focus */
  @apply bg-slate-900 border border-slate-700 text-white rounded-2xl p-3 focus:ring-amber-500 focus:border-amber-500 transition duration-300;
}
/* Hero Slide Images for consistent look */
.hero-slide-image {
  border-radius: 1.5rem; /* rounded-3xl */
  object-fit: cover;
}

@media (max-width: 440px) {
  .framework-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Style for the blur effect */
.expired-blur {
  filter: blur(8px);
  pointer-events: none; /* Prevents users from clicking buttons */
  user-select: none; /* Prevents text copying */
}

/* Style for the notice overlay */
#expiry-notice {
  display: none; /* Hidden by default */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  border: 2px solid #ef4444;
  width: 90%;
  max-width: 400px;
}