/* AJBRS Website Custom CSS
   Modern design with enhanced user experience */

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

/* Modern Color Palette */
:root {
  --primary: #2563eb;
  --primary-light: #3b82f6;
  --primary-dark: #1d4ed8;
  --secondary: #10b981;
  --accent: #8b5cf6;
  --dark: #1e293b;
  --light: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
}

/* Enhanced Header and Title Visibility */
.intro-header.big-img {
  position: relative;
}

.intro-header.big-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.75) 0%,
    rgba(139, 92, 246, 0.65) 50%,
    rgba(16, 185, 129, 0.55) 100%
  );
  z-index: 1;
}

.intro-header.big-img .page-heading,
.intro-header.big-img .post-heading {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.7),
               0 2px 6px rgba(0, 0, 0, 0.5),
               0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.intro-header.big-img .page-heading h1,
.intro-header.big-img .post-heading h1 {
  color: #ffffff !important;
  background: none;
  -webkit-text-fill-color: #ffffff;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.9),
               0 4px 12px rgba(0, 0, 0, 0.8),
               0 2px 6px rgba(0, 0, 0, 0.7),
               0 1px 3px rgba(0, 0, 0, 0.6);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  position: relative;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
  .intro-header.big-img .page-heading h1,
  .intro-header.big-img .post-heading h1 {
    color: #ffffff !important;
    background: none;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.9),
                 0 4px 12px rgba(0, 0, 0, 0.8),
                 0 2px 6px rgba(0, 0, 0, 0.7),
                 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}

.intro-header.big-img .page-heading .page-subheading,
.intro-header.big-img .post-heading .post-subheading {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1rem 2rem;
  border-radius: 50px;
  color: var(--gray-800) !important;
  text-shadow: none !important;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: inline-block;
  margin-top: 2rem;
}

/* General Animations */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(30px);
  }
  to { 
    opacity: 1; 
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

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

@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); 
  }
  50% { 
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.6); 
  }
}

/* Scroll-triggered animations (progressive enhancement).
   Content is hidden ONLY when JS is available (html.js) and the element has not
   yet been revealed. Without JS, or if the observer never fires, content stays
   visible — it can never be permanently hidden behind a missing animation. */
.animate-on-scroll {
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html.js .animate-on-scroll:not(.animate) {
  opacity: 0;
  transform: translateY(50px);
}

.animate-on-scroll.animate {
  opacity: 1;
  transform: translateY(0);
}

html.js .animate-on-scroll.slide-left:not(.animate) {
  transform: translateX(-50px);
}

.animate-on-scroll.slide-left.animate {
  transform: translateX(0);
}

html.js .animate-on-scroll.slide-right:not(.animate) {
  transform: translateX(50px);
}

.animate-on-scroll.slide-right.animate {
  transform: translateX(0);
}

/* Staggered animations for children */
.stagger-children > * {
  animation: fadeIn 0.8s ease-out both;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }

/* Base Styles */
body {
  font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  line-height: 1.7;
  color: var(--gray-700);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  transition: all 0.3s ease;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  color: var(--gray-900);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  position: relative;
  padding-bottom: 0.75rem;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 4px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.section-title {
  text-align: center;
  margin-bottom: 3.5rem;
  position: relative;
  padding-bottom: 1rem;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Container and Section Styling */
.container, .container-md, .container-fluid {
  padding: 0 1.5rem;
}

section {
  margin: 5rem 0;
  padding: 2rem 0;
}

/* Modern Card Design */
.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Navigation Bar */
.navbar-custom {
  background: rgba(248, 250, 252, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(226, 232, 240, 0.3);
  padding: 1rem 0;
  transition: all 0.3s ease;
  position: relative;
}

.navbar-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  z-index: -1;
}

.navbar-custom .navbar-brand {
  transition: all 0.3s ease;
}

.navbar-custom .navbar-brand:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Enhanced navbar layout to prevent overlapping */
.navbar-custom .navbar-nav {
  margin-left: auto;
  flex-wrap: nowrap;
}

.navbar-custom .navbar-collapse {
  flex-grow: 0;
}

.navbar-custom {
  min-height: 70px;
  align-items: center;
}

.navbar-custom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.navbar-custom .nav-link {
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  margin: 0 0.25rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.navbar-custom .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.navbar-custom .nav-link:hover::before {
  left: 0;
}

.navbar-custom .nav-link:hover {
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
}

/* Nuclear option - Override everything for navbar links */
@media (prefers-color-scheme: dark) {
  /* All possible navbar link selectors */
  body:not(.light-mode):not(.dark-mode) nav.navbar a.nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar-custom a.nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar-dark a.nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar .navbar-nav .nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar-dark .navbar-nav .nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar-custom .navbar-nav .nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar-dark .navbar-nav .nav-item .nav-link {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
    background-color: transparent !important;
  }
  
  /* Hover states */
  body:not(.light-mode):not(.dark-mode) nav.navbar a.nav-link:hover,
  body:not(.light-mode):not(.dark-mode) .navbar-custom a.nav-link:hover,
  body:not(.light-mode):not(.dark-mode) .navbar-dark a.nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(59, 130, 246, 0.2) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Manual dark mode - Nuclear option */
body.dark-mode nav.navbar a.nav-link,
body.dark-mode .navbar-custom a.nav-link,
body.dark-mode .navbar-dark a.nav-link,
body.dark-mode .navbar .navbar-nav .nav-link,
body.dark-mode .navbar-dark .navbar-nav .nav-link,
body.dark-mode .navbar-custom .navbar-nav .nav-link,
body.dark-mode .navbar-dark .navbar-nav .nav-item .nav-link {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5) !important;
  background-color: transparent !important;
}

/* Manual dark mode hover states */
body.dark-mode nav.navbar a.nav-link:hover,
body.dark-mode .navbar-custom a.nav-link:hover,
body.dark-mode .navbar-dark a.nav-link:hover {
  color: #ffffff !important;
  background-color: rgba(59, 130, 246, 0.2) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Avatar Container */
.navbar-custom .avatar-container {
  bottom: -1.75rem;
  right: 1rem;
  position: absolute;
  z-index: 10;
}

.navbar-custom .avatar-img-border {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.navbar-custom .avatar-img-border:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments for avatar and brand */
@media (max-width: 768px) {
  .navbar-custom .avatar-container {
    right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .navbar-custom .avatar-container {
    right: 0.25rem;
    bottom: -1.5rem;
  }
  
  .navbar-custom .avatar-img-border {
    width: 40px;
    height: 40px;
  }
}

/* Modern Stat Boxes */
.stats-section {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 5rem 0;
  border-radius: 20px;
  margin: 6rem 0;
  animation: slideInUp 0.8s ease-in-out;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
  z-index: 0;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.stat-box {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.stat-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

/* Enhanced animation when counter is active */
.stat-box:has(.counter-animating)::before {
  transform: scaleX(1);
  animation: progress-bar 2.5s ease-out;
}

.stat-box:has(.counter-animating) {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

@keyframes progress-bar {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.stat-box:hover::before {
  transform: scaleX(1);
}

.stat-box:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
}

.stat-number {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 4rem;
  font-weight: 900;
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
  font-variant-numeric: tabular-nums; /* Monospace numbers for smooth counting */
}

/* Counter animation states */
.stat-number.counter-animating {
  animation: pulse-glow 0.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 8px rgba(37, 99, 235, 0.3));
}

.stat-number.counter-complete {
  animation: success-bounce 0.6s ease-out;
}

@keyframes pulse-glow {
  0% {
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.3));
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.6));
    transform: scale(1.02);
  }
}

@keyframes success-bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 16px rgba(16, 185, 129, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }
}

.stat-description {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gray-600);
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Feature Cards */
.features-section {
  animation: fadeIn 1s ease-in-out;
  margin: 7rem 0;
  position: relative;
}

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(37, 99, 235, 0.02) 0%, 
    rgba(139, 92, 246, 0.02) 100%);
  transition: opacity 0.4s ease;
  opacity: 0;
}

.feature-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.feature-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-card:hover::after {
  transform: scaleX(1);
}

.feature-icon {
  font-size: 3.5rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 2rem;
  transition: all 0.4s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
}

.feature-card h3 {
  margin-bottom: 1.5rem;
  font-weight: 800;
  font-size: 1.6rem;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}

.feature-card p {
  color: var(--gray-600);
  line-height: 1.7;
  font-size: 1.1rem;
  font-weight: 500;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, 
    var(--primary) 0%, 
    var(--accent) 50%, 
    var(--secondary) 100%);
  color: white;
  padding: 6rem 0;
  text-align: center;
  border-radius: 20px;
  margin: 7rem 0;
  position: relative;
  overflow: hidden;
  animation: fadeIn 1.2s ease-in-out;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  z-index: 1;
}

.cta-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3Ccircle cx='10' cy='10' r='1'/%3E%3Ccircle cx='50' cy='50' r='1'/%3E%3Ccircle cx='50' cy='10' r='1'/%3E%3Ccircle cx='10' cy='50' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  z-index: 1;
}

.cta-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.cta-container h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: 2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.cta-container p {
  font-size: 1.3rem;
  margin-bottom: 3rem;
  opacity: 0.95;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  font-weight: 500;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--primary) !important;
  padding: 1.25rem 3rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cta-button:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  background: white;
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-button i {
  margin-left: 15px;
  transition: transform 0.3s ease;
  font-size: 1.1rem;
}

.cta-button:hover i {
  transform: translateX(8px);
}

/* About Section */
.about-section {
  animation: fadeIn 0.8s ease-in-out;
  padding: 4rem 0;
}

.about-content {
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.8;
  font-size: 1.1rem;
}

.about-content p {
  margin-bottom: 1.5rem;
  color: var(--gray-700);
}

/* Timeline for Past Recipients */
.timeline-container {
  position: relative;
  max-width: 900px;
  margin: 4rem auto;
  padding: 2rem 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 60px;
  width: 4px;
  background: linear-gradient(to bottom, var(--primary), var(--accent));
  border-radius: 2px;
}

.timeline-entry {
  position: relative;
  margin-bottom: 4rem;
  padding-left: 120px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease;
}

.timeline-entry.animate {
  opacity: 1;
  transform: translateY(0);
}

.timeline-year {
  position: absolute;
  left: 0;
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.timeline-content {
  background-color: white;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.timeline-content ul {
  margin-bottom: 0;
  padding-left: 1.5rem;
}

.timeline-content ul li {
  margin-bottom: 0.75rem;
  position: relative;
}

.timeline-content ul li a {
  font-weight: 500;
  color: var(--primary);
  transition: all 0.3s ease;
}

.timeline-content ul li a:hover {
  color: var(--accent);
}

.timeline-entry:hover .timeline-content {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Publications Filter */
.publications-filter {
  margin-bottom: 3rem;
  padding: 2rem;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.publication-search {
  width: 100%;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  font-size: 1rem;
  transition: all 0.3s ease;
  background-color: var(--gray-100);
}

.publication-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  background-color: white;
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-buttons button {
  padding: 0.75rem 1.5rem;
  background-color: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-buttons button.active,
.filter-buttons button:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Modern Table Styling */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2.5rem 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

table tr th {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1.25rem 1.5rem;
  text-align: left;
  border: none;
}

table tr:nth-child(even) {
  background-color: var(--gray-100);
}

table tr:nth-child(odd) {
  background-color: white;
}

table tr td {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  transition: all 0.3s ease;
}

table tr:last-child td {
  border-bottom: none;
}

table tr:hover td {
  background-color: rgba(37, 99, 235, 0.05);
}

/* Enhanced Link Styling */
a {
  position: relative;
  text-decoration: none;
  color: var(--primary);
  transition: all 0.3s ease;
  font-weight: 500;
}

a:hover, a:focus {
  color: var(--accent);
}

a:not(.navbar-brand):not(.nav-link):not(.btn):not(.cta-button):after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

a:not(.navbar-brand):not(.nav-link):not(.btn):not(.cta-button):hover:after,
a:not(.navbar-brand):not(.nav-link):not(.btn):not(.cta-button):focus:after {
  width: 100%;
}

/* Modern Blockquote */
blockquote {
  border-left: 4px solid var(--primary);
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background-color: var(--gray-100);
  border-radius: 0 16px 16px 0;
  position: relative;
  transition: all 0.3s ease;
}

blockquote:before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  top: -10px;
  left: 10px;
  color: rgba(37, 99, 235, 0.1);
}

blockquote p {
  margin: 0;
  font-style: italic;
  color: var(--gray-700);
}

/* Footer */
footer {
  background-color: var(--gray-900);
  color: var(--gray-300);
  padding: 4rem 0 2rem;
  margin-top: 6rem;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, var(--primary), var(--accent));
}

footer p.text-muted {
  color: var(--gray-400) !important;
}

footer a {
  color: var(--gray-300);
  transition: all 0.3s ease;
}

footer a:hover,
footer a:focus {
  color: white;
}

footer .footer-links {
  margin-bottom: 2rem;
}

footer .footer-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0 5px;
  transition: all 0.3s ease;
}

footer .footer-links a:hover {
  background-color: var(--primary);
  transform: translateY(-3px);
}

footer .copyright {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* ========================================
   COMPREHENSIVE COLOR SYSTEM
   Light Mode + Dark Mode + System Preferences
   ======================================== */

/* Respect system preferences by default */
html {
  color-scheme: light dark;
}

/* Default Light Mode Styles */
body {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: #334155;
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .section-title {
  color: #0f172a;
}

p, li, .about-content p, .feature-card p {
  color: #334155;
}

a {
  color: #2563eb;
}

a:hover, a:focus {
  color: #1d4ed8;
}

/* Navigation in light mode */
.navbar-custom {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.navbar-custom .nav-link,
.navbar-custom .navbar-brand {
  color: #1e293b;
}

/* System Dark Mode - Default when user prefers dark and no manual override */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #cbd5e1;
  }

  body:not(.light-mode):not(.dark-mode) h1, 
  body:not(.light-mode):not(.dark-mode) h2, 
  body:not(.light-mode):not(.dark-mode) h3, 
  body:not(.light-mode):not(.dark-mode) h4, 
  body:not(.light-mode):not(.dark-mode) h5, 
  body:not(.light-mode):not(.dark-mode) h6,
  body:not(.light-mode):not(.dark-mode) .section-title {
    color: #ffffff;
  }
  
  body:not(.light-mode):not(.dark-mode) p,
  body:not(.light-mode):not(.dark-mode) li,
  body:not(.light-mode):not(.dark-mode) .about-content p,
  body:not(.light-mode):not(.dark-mode) .feature-card p {
    color: #cbd5e1;
  }
  
  body:not(.light-mode):not(.dark-mode) a {
    color: #60a5fa;
  }
  
  body:not(.light-mode):not(.dark-mode) a:hover,
  body:not(.light-mode):not(.dark-mode) a:focus {
    color: #a78bfa;
  }
  
  /* Force dark navbar background to match main page */
  body:not(.light-mode):not(.dark-mode) .navbar-custom {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(30, 41, 59, 0.5) !important;
  }
  
  body:not(.light-mode):not(.dark-mode) .navbar-custom::before {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  }
  
  body:not(.light-mode):not(.dark-mode) .navbar-custom .nav-link,
  body:not(.light-mode):not(.dark-mode) .navbar-custom .navbar-brand {
    color: #ffffff !important;
  }
  
  body:not(.light-mode):not(.dark-mode) .navbar-custom .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(59, 130, 246, 0.2) !important;
  }
}

/* Manual Light Mode Override */
body.light-mode {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #334155 !important;
}

body.light-mode h1, 
body.light-mode h2, 
body.light-mode h3, 
body.light-mode h4, 
body.light-mode h5, 
body.light-mode h6,
body.light-mode .section-title {
  color: #0f172a !important;
}

body.light-mode p,
body.light-mode li,
body.light-mode .about-content p,
body.light-mode .feature-card p {
  color: #334155 !important;
}

body.light-mode a {
  color: #2563eb !important;
}

body.light-mode a:hover,
body.light-mode a:focus {
  color: #1d4ed8 !important;
}

body.light-mode .navbar-custom {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(226, 232, 240, 0.3) !important;
}

body.light-mode .navbar-custom::before {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

body.light-mode .navbar-custom .nav-link,
body.light-mode .navbar-custom .navbar-brand {
  color: #1e293b !important;
}

/* Manual Dark Mode Override */
body.dark-mode {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: #cbd5e1 !important;
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6,
body.dark-mode .section-title {
  color: #ffffff !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode .about-content p,
body.dark-mode .feature-card p {
  color: #cbd5e1 !important;
}

body.dark-mode a {
  color: #60a5fa !important;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
  color: #a78bfa !important;
}

/* Force dark navbar background in manual dark mode to match main page */
body.dark-mode .navbar-custom {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(30, 41, 59, 0.5) !important;
}

body.dark-mode .navbar-custom::before {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
}

body.dark-mode .navbar-custom .navbar-brand,
body.dark-mode .navbar-custom .navbar-nav .nav-link {
  color: #ffffff !important;
}

body.dark-mode .navbar-custom .nav-link:hover {
  background-color: rgba(59, 130, 246, 0.2);
}

/* Sections in dark mode */
body.dark-mode .stats-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

body.dark-mode .stats-container {
  background-color: #1e293b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body.dark-mode .stat-box {
  background-color: #334155;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

body.dark-mode .stat-description {
  color: #94a3b8;
}

body.dark-mode .feature-card {
  background-color: #334155;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

body.dark-mode .feature-card h3 {
  color: #ffffff !important;
}

/* System dark mode styles for sections */
@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) .stats-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  }
  
  body:not(.light-mode):not(.dark-mode) .stats-container {
    background-color: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }
  
  body:not(.light-mode):not(.dark-mode) .stat-box {
    background-color: #334155;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  
  body:not(.light-mode):not(.dark-mode) .stat-description {
    color: #94a3b8;
  }
  
  body:not(.light-mode):not(.dark-mode) .feature-card {
    background-color: #334155;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }
  
  body:not(.light-mode):not(.dark-mode) .feature-card h3 {
    color: #ffffff !important;
  }

  /* Components below were previously dark only under the manual `.dark-mode`
     class, so they stayed light when the OS was in dark mode without toggling.
     These mirror the manual rules for the system-preference case. */
  body:not(.light-mode):not(.dark-mode) .timeline-content {
    background-color: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  body:not(.light-mode):not(.dark-mode) .publications-filter {
    background-color: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  body:not(.light-mode):not(.dark-mode) .publication-search {
    background-color: #334155;
    border-color: #475569;
    color: #ffffff;
  }

  body:not(.light-mode):not(.dark-mode) .publication-search:focus {
    background-color: #1e293b;
    border-color: #60a5fa;
  }

  body:not(.light-mode):not(.dark-mode) .filter-buttons button {
    background-color: #334155;
    border-color: #475569;
    color: #cbd5e1;
  }

  body:not(.light-mode):not(.dark-mode) table tr:nth-child(even) {
    background-color: #1e293b;
  }

  body:not(.light-mode):not(.dark-mode) table tr:nth-child(odd) {
    background-color: #334155;
  }

  body:not(.light-mode):not(.dark-mode) table tr td {
    border-bottom-color: #475569;
    color: #cbd5e1 !important;
  }

  body:not(.light-mode):not(.dark-mode) table tr:hover td {
    background-color: rgba(59, 130, 246, 0.1);
  }

  body:not(.light-mode):not(.dark-mode) blockquote {
    background-color: #1e293b;
  }
}

.dark-mode .timeline-content {
  background-color: #1e293b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Publications and tables in dark mode */
.dark-mode .publications-filter {
  background-color: #1e293b;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dark-mode .publication-search {
  background-color: #334155;
  border-color: #475569;
  color: #ffffff;
}

.dark-mode .publication-search:focus {
  background-color: #1e293b;
  border-color: #60a5fa;
}

.dark-mode .filter-buttons button {
  background-color: #334155;
  border-color: #475569;
  color: #cbd5e1;
}

.dark-mode table tr:nth-child(even) {
  background-color: #1e293b;
}

.dark-mode table tr:nth-child(odd) {
  background-color: #334155;
}

.dark-mode table tr td {
  border-bottom-color: #475569;
  color: #cbd5e1 !important;
}

.dark-mode table tr:hover td {
  background-color: rgba(59, 130, 246, 0.1);
}

.dark-mode blockquote {
  background-color: #1e293b;
}

/* Back to Top Button */
#back-to-top, .back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

#back-to-top.show, .back-to-top.show {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover, .back-to-top:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

body.dark-mode #back-to-top, body.dark-mode .back-to-top {
  background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) #back-to-top,
  body:not(.light-mode):not(.dark-mode) .back-to-top {
    background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .container, .container-md, .container-fluid {
    padding: 0 2rem;
  }
  
  .features-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 992px) {
  h1 {
    font-size: clamp(2rem, 4vw, 2.5rem);
  }
  
  h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }
  
  .cta-container h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
  }
  
  .navbar-custom .nav-link {
    padding: 0.5rem 1rem;
    margin: 0.25rem 0;
  }
  
  .stats-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
  }
  
  .stat-box {
    padding: 2rem 1.5rem;
  }
  
  .stat-number {
    font-size: 3rem;
  }
  
  .feature-card {
    padding: 2.5rem 1.5rem;
  }
  
  .features-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  
  .timeline-container::before {
    left: 30px;
  }
  
  .timeline-entry {
    padding-left: 80px;
  }
  
  .timeline-year {
    width: 70px;
    height: 70px;
    font-size: 1.2rem;
  }
}

@media (max-width: 768px) {
  .container, .container-md, .container-fluid {
    padding: 0 1rem;
  }
  
  .intro-header.big-img .page-heading,
  .intro-header.big-img .post-heading {
    padding: 4rem 0;
  }
  
  .intro-header.big-img .page-heading h1,
  .intro-header.big-img .post-heading h1 {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    margin-bottom: 1.5rem;
  }
  
  .intro-header.big-img .page-heading .page-subheading,
  .intro-header.big-img .post-heading .post-subheading {
    padding: 0.75rem 1.5rem;
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin-top: 1.5rem;
  }
  
  .navbar-custom {
    padding: 0.5rem 0;
  }
  
  .stats-section {
    padding: 3rem 0;
    margin: 4rem 0;
  }
  
  .stats-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1rem;
  }
  
  .stat-box {
    padding: 2rem 1rem;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .stat-description {
    font-size: 1rem;
  }
  
  .features-section {
    margin: 4rem 0;
  }
  
  .features-container {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 0;
  }
  
  .feature-card {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }
  
  .feature-icon {
    font-size: 2.5rem;
  }
  
  .feature-card h3 {
    font-size: 1.3rem;
  }
  
  .cta-section {
    padding: 4rem 0;
    margin: 4rem 0;
    border-radius: 15px;
  }
  
  .cta-container {
    padding: 0 1rem;
  }
  
  .cta-button {
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: 40px;
  }
  
  .timeline-container {
    padding: 1rem 0;
  }
  
  .timeline-container::before {
    left: 20px;
  }
  
  .timeline-entry {
    padding-left: 60px;
  }
  
  .timeline-year {
    width: 50px;
    height: 50px;
    font-size: 1rem;
    left: -5px;
  }
  
  .timeline-content {
    padding: 1.5rem;
  }
  
  .filter-buttons {
    justify-content: center;
    gap: 0.5rem;
  }
  
  .filter-buttons button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
  
  .about-section {
    padding: 2rem 0;
  }
  
  .about-content {
    padding: 0 1rem;
  }
  
  section {
    margin: 3rem 0;
    padding: 1rem 0;
  }
}

@media (max-width: 480px) {
  .intro-header.big-img .page-heading h1,
  .intro-header.big-img .post-heading h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
  
  .intro-header.big-img .page-heading .page-subheading,
  .intro-header.big-img .post-heading .post-subheading {
    padding: 0.5rem 1rem;
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .feature-icon {
    font-size: 2rem;
  }
  
  .cta-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .timeline-year {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
  }
  
  .section-title {
    margin-bottom: 2rem;
  }
}

/* High-resolution displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .intro-header.big-img .page-heading h1,
  .intro-header.big-img .post-heading h1 {
    text-shadow: 0 10px 24px rgba(0, 0, 0, 0.9),
                 0 6px 16px rgba(0, 0, 0, 0.8),
                 0 3px 8px rgba(0, 0, 0, 0.7),
                 0 1px 4px rgba(0, 0, 0, 0.6);
  }
}

/* Accessibility Improvements */
:focus {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Enhanced button focus states */
.cta-button:focus,
.navbar-brand:focus,
.nav-link:focus {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--primary);
}

/* Improved contrast for accessibility */
@media (prefers-contrast: high) {
  :root {
    --primary: #1d4ed8;
    --primary-light: #2563eb;
    --gray-600: #374151;
    --gray-700: #1f2937;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .feature-icon {
    animation: none !important;
  }
}