/**
 * =============================================================================
 * IDFC 2026 - International Conference on Digital Forensics
 * Master Stylesheet (Consolidated)
 * =============================================================================
 *
 * This file contains all styles for the IDFC 2026 conference website.
 * Consolidated from: main.css, enhanced.css, and inline styles.
 *
 * TABLE OF CONTENTS:
 * -----------------------------------------------------------------------------
 * 1. CSS CUSTOM PROPERTIES (Design Tokens)
 *    1.1 Brand Colors
 *    1.2 Accent Colors
 *    1.3 Text Colors
 *    1.4 Surface Colors
 *    1.5 Shadows
 *    1.6 Spacing & Radius
 *    1.7 Typography
 *    1.8 Z-Index Scale
 *    1.9 Transitions
 *
 * 2. BASE & RESET STYLES
 *    2.1 Box Sizing Reset
 *    2.2 HTML & Body
 *    2.3 Typography Base
 *    2.4 Focus States
 *    2.5 Reduced Motion
 *
 * 3. LAYOUT COMPONENTS
 *    3.1 Container Utilities
 *    3.2 Grid Systems
 *
 * 4. NAVIGATION
 *    4.1 Navbar Base
 *    4.2 Navbar Brand
 *    4.3 Nav Links
 *    4.4 Dropdown Menus
 *    4.5 Mobile Toggler
 *    4.6 Offcanvas Menu
 *    4.7 Navbar Responsive
 *
 * 5. HERO SECTIONS
 *    5.1 Hero Banner
 *    5.2 Page Hero
 *    5.3 Hero Content
 *    5.4 Hero Info Cards
 *    5.5 Countdown Timer
 *
 * 6. CONTENT SECTIONS
 *    6.1 Section Headers
 *    6.2 Feature Cards
 *    6.3 Timeline
 *    6.4 About Preview
 *
 * 7. BUTTONS & INTERACTIVE
 *    7.1 Button Base
 *    7.2 Primary Buttons
 *    7.3 Outline Buttons
 *    7.4 Submit Buttons
 *    7.5 Back to Top
 *
 * 8. CARDS
 *    8.1 Card Base
 *    8.2 Info Cards
 *    8.3 Feature Cards
 *
 * 9. FOOTER
 *    9.1 Footer Base
 *    9.2 Footer Brand
 *    9.3 Footer Links
 *    9.4 Footer Contact
 *    9.5 Important Dates
 *    9.6 Social Icons
 *    9.7 Footer Bottom
 *
 * 10. LOADING SCREEN
 *
 * 11. UTILITY CLASSES
 *     11.1 Text Utilities
 *     11.2 Spacing Utilities
 *     11.3 Display Utilities
 *     11.4 Flexbox Utilities
 *
 * 12. ANIMATIONS
 *     12.1 Fade Effects
 *     12.2 Slide Effects
 *     12.3 Keyframes
 *
 * 13. RESPONSIVE DESIGN
 *     13.1 Large Screens (< 1200px)
 *     13.2 Medium Screens (< 992px)
 *     13.3 Small Screens (< 768px)
 *     13.4 Extra Small (< 576px)
 *
 * 14. ACCESSIBILITY
 *     14.1 Focus Styles
 *     14.2 Reduced Motion
 *
 * 15. PRINT STYLES
 *
 * =============================================================================
 */


/* =============================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================================= */

:root {
  /* -------------------------------------------------------------------------
     1.1 Brand Colors - Deep Navy + Electric Cyan (Cybersecurity Theme)
     ------------------------------------------------------------------------- */
  --primary-color: #0f2557;           /* Deep Navy - Primary Brand */
  --primary-light: #1e40af;           /* Royal Blue - Light Accent */
  --primary-dark: #0a1a3f;            /* Midnight Navy - Dark Accent */
  --primary-accent: #2563eb;          /* Electric Blue - Highlight */
  --secondary-color: #00d4ff;         /* Electric Cyan - Secondary Brand */
  --secondary-light: #33e0ff;         /* Light Electric Cyan */
  --secondary-dark: #00a8cc;          /* Deep Cyan */

  /* -------------------------------------------------------------------------
     1.2 Accent Colors
     ------------------------------------------------------------------------- */
  --accent-color: #2563eb;            /* Electric Blue - Highlight */
  --accent-light: #3b82f6;            /* Bright Blue - Light Accent */
  --accent-dark: #0f2557;             /* Deep Navy */
  --success-color: #00ff88;           /* Forensic Green - Trust/Valid */
  --warning-color: #f59e0b;           /* Amber - Warning/Caution */
  --danger-color: #ef4444;            /* Threat Red - Critical */

  /* -------------------------------------------------------------------------
     1.3 Text Colors - Dark on Light Theme
     ------------------------------------------------------------------------- */
  --text-primary: #0f172a;            /* Slate 900 - Main text */
  --text-secondary: #1e293b;          /* Slate 800 - Secondary text (darker) */
  --text-muted: #64748b;              /* Slate 500 - Muted text (darker) */
  --text-light: #1e293b;              /* Slate 800 - Light mode text */

  /* -------------------------------------------------------------------------
     1.4 Surface Colors - Light Clean Design
     ------------------------------------------------------------------------- */
  --white: #ffffff;
  --gray-50: #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;

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --light-bg: #ffffff;
  --light-surface: #f8fafc;
  --light-border: rgba(15, 37, 87, 0.15);

  /* Glass backgrounds for frosted effects */
  --glass-95: rgba(255, 255, 255, 0.95);
  --glass-98: rgba(255, 255, 255, 0.98);

  /* -------------------------------------------------------------------------
     1.5 Shadows
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.4);
  --shadow-card: 0 4px 16px rgba(15, 23, 42, 0.15);

  /* -------------------------------------------------------------------------
     1.6 Spacing & Border Radius
     ------------------------------------------------------------------------- */
  --space-xs: 0.25rem;                /* 4px */
  --space-sm: 0.5rem;                 /* 8px */
  --space-md: 1rem;                   /* 16px */
  --space-lg: 1.5rem;                 /* 24px */
  --space-xl: 2rem;                   /* 32px */
  --space-2xl: 3rem;                  /* 48px */
  --space-3xl: 4rem;                  /* 64px */
  --space-4xl: 6rem;                  /* 96px */

  --radius-sm: 0.375rem;              /* 6px */
  --radius-md: 0.5rem;                /* 8px */
  --radius-lg: 0.75rem;               /* 12px */
  --radius-xl: 1rem;                  /* 16px */
  --radius-2xl: 1.5rem;               /* 24px */
  --radius-full: 9999px;              /* Pill shape */

  /* -------------------------------------------------------------------------
     1.7 Typography
     ------------------------------------------------------------------------- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Courier New', Consolas, monospace;

  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-sm: 0.875rem;           /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px */
  --font-size-5xl: 3rem;              /* 48px */

  /* -------------------------------------------------------------------------
     1.8 Z-Index Scale
     ------------------------------------------------------------------------- */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* -------------------------------------------------------------------------
     1.9 Transitions
     ------------------------------------------------------------------------- */
  --transition: all 0.28s ease;
  --transition-fast: all 0.15s ease;
  --transition-normal: all 0.3s ease;
  --transition-slow: all 0.5s ease;
  --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* -------------------------------------------------------------------------
     Misc Assets
     ------------------------------------------------------------------------- */
  --logo-size: clamp(220px, 30vw, 360px);
}


/* =============================================================================
   2. BASE & RESET STYLES
   ============================================================================= */

/* 2.1 Box Sizing Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2.2 HTML & Body */
html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(at 0% 0%, rgba(15, 37, 87, 0.04) 0px, transparent 50%),
    radial-gradient(at 100% 100%, rgba(0, 212, 255, 0.04) 0px, transparent 50%);
}

/* 2.3 Typography Base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 600; }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); font-weight: 600; }
h5 { font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 600; }
h6 { font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; }

p {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  font-size: 1rem;
  line-height: 1.7;
}

.lead {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Lists inherit text color */
ul, ol, li {
  color: var(--text-primary);
}

/* Override Bootstrap text utilities for better contrast */
.text-muted {
  color: var(--text-muted) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* 2.4 Focus States */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary-light), transparent 45%);
  outline-offset: 2px;
}

*:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 2.5 Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* =============================================================================
   3. LAYOUT COMPONENTS
   ============================================================================= */

/* 3.1 Container Utilities */
.-logo1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3.2 Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-lg);
}


/* =============================================================================
   4. NAVIGATION
   ============================================================================= */

/* 4.1 Navbar Base */
.navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15, 37, 87, 0.12);
  padding: 0.35rem 0;
  z-index: var(--z-fixed);
  box-shadow: 0 2px 8px rgba(6, 13, 31, 0.08);
  transition: var(--transition-normal);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
}

/* 4.2 Navbar Brand */
.navbar-brand {
  font-weight: 900;
  font-size: 1.75rem;
  color: var(--primary-color) !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.02em;
  transition: var(--transition-normal);
}

.navbar-brand:hover {
  transform: scale(1.05);
  color: var(--accent-color) !important;
}

.navbar-brand img {
  height: 60px;
  width: auto;
  filter: none;
  transition: var(--transition-bounce);
}

.brand-text {
  font-weight: 900;
  color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 4.3 Nav Links */
.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--text-secondary) !important;
  margin: 0 0.25rem;
  padding: 0.65rem 0.9rem !important;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: var(--transition-normal);
  text-decoration: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.navbar-nav .nav-link.active {
  color: var(--accent-color) !important;
  border-bottom-color: var(--accent-color);
}

.navbar-nav .nav-link:hover {
  color: var(--primary-color) !important;
  border-bottom-color: var(--accent-light);
  text-decoration: none;
}

/* Dropdown toggle chevron positioning */
.navbar-nav .nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.navbar-nav .nav-link.dropdown-toggle::after {
  margin-left: 0;
  flex-shrink: 0;
}

/* 4.4 Dropdown Menus */
.dropdown-menu {
  background: var(--white);
  border: 1px solid rgba(15, 37, 87, 0.15);
  border-radius: 0;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  min-width: 260px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.dropdown-item {
  padding: 0.7rem 1rem;
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-normal);
}

.dropdown-item.active,
.dropdown-item:hover {
  background: rgba(15, 37, 87, 0.08);
  color: var(--accent-color);
  border-left: 2px solid var(--accent-color);
  padding-left: 1.2rem;
}

.dropdown-item.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* 4.5 Mobile Toggler */
.navbar-toggler {
  border: 1px solid var(--primary-color);
  padding: 0.5rem;
  border-radius: 0;
  background: transparent;
  transition: var(--transition-normal);
}

.navbar-toggler:hover {
  background-color: rgba(15, 37, 87, 0.1);
  transform: scale(1.05);
}

.navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(15, 37, 87, 0.2);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231e40af' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 4.6 Offcanvas Menu */
.offcanvas.offcanvas-nav {
  width: 20rem;
  background: var(--white);
  border-right: 1px solid rgba(15, 37, 87, 0.15);
}

.offcanvas-header {
  border-bottom: 1px solid rgba(15, 37, 87, 0.15);
}

.offcanvas-header img {
  height: 55px;
  width: auto;
  filter: none;
}

.offcanvas .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
}

.offcanvas .navbar-nav .nav-link:hover {
  color: var(--accent-color) !important;
}

.offcanvas .navbar-nav .nav-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.offcanvas .navbar-nav .nav-link.dropdown-toggle::after {
  margin-left: 0;
  flex-shrink: 0;
}

.btn-close {
  filter: none;
}

/* 4.7 Navbar Responsive */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--white);
    border-radius: 0;
    margin-top: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(15, 37, 87, 0.15);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  }

  .navbar-nav {
    gap: 0.25rem;
  }

  .navbar-nav .nav-link {
    text-align: center;
    margin: 0;
    padding: 0.95rem !important;
    color: var(--text-secondary) !important;
  }

  .navbar-nav .nav-link.dropdown-toggle {
    justify-content: center;
    gap: 0.25rem;
  }

  .navbar-nav .nav-link.dropdown-toggle::after {
    margin-left: 0;
  }

  .dropdown-menu {
    background: var(--white);
    border: 1px solid rgba(15, 37, 87, 0.15);
    margin: 0.5rem 0;
    border-radius: 0;
  }
}

@media (max-width: 576px) {
  .navbar-brand {
    font-size: 1.4rem;
  }

  .navbar-brand img {
    height: 32px;
  }
}


/* =============================================================================
   5. HERO SECTIONS
   ============================================================================= */

/* 5.1 Hero Banner */
.hero-banner {
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.hero-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="%23f8f9fa" opacity=".25"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="%23f8f9fa" opacity=".5"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="%23f8f9fa"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
}

.carousel-item img {
  height: 300px;
  object-fit: cover;
}

/* 5.2 Page Hero */
.page-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: clamp(84px, 10vw, 120px) 0 64px;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0, 212, 255, 0.15), transparent 60%),
    radial-gradient(1000px 600px at 85% -20%, rgba(0, 255, 136, 0.10), transparent 60%),
    linear-gradient(135deg, #060d1f 0%, #0a1a3f 55%, #0f2557 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 70%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent 70%);
}

.page-hero h1 {
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
}

.page-hero p.lead {
  color: rgba(255, 255, 255, 0.9);
  max-width: 840px;
  margin-inline: auto;
}

/* Ensure all page-hero text is white */
.page-hero p,
.page-hero h1,
.page-hero h2,
.page-hero h3,
.page-hero h4,
.page-hero h5,
.page-hero h6,
.page-hero .lead,
.page-hero .display-5,
.page-hero .display-6 {
  color: #fff !important;
}

.page-hero .badge {
  color: #fff !important;
}

.hero-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #a5b4fc;
  font-size: 0.85rem;
}

.hero-pills .pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 5.3 Hero Content */
.hero-section {
  min-height: 100vh;
  display: block;
  position: relative;
  background: var(--bg-primary);
  overflow: hidden;
  padding: 4rem 0;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-title {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-xl);
  color: var(--primary-color);
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.02em;
}

.text-gradient {
  color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.hero-subtitle-accent {
  color: var(--secondary-color);
  font-weight: 600;
  display: block;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: var(--space-md);
}

.hero-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: var(--transition-normal);
}

.hero-link:hover {
  color: var(--primary-light);
  border-bottom-color: var(--primary-light);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(15, 37, 87, 0.1);
  color: var(--accent-color);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xl);
  border: 1px solid rgba(15, 37, 87, 0.2);
  transition: var(--transition-normal);
}

.hero-cta {
  margin-bottom: var(--space-3xl);
}

/* 5.4 Hero Info Cards */
.hero-info-card {
  background: var(--white);
  border-radius: 0;
  border-left: 3px solid var(--accent-color);
  padding: 1.5rem;
  text-align: left;
  box-shadow: none;
  border-top: 1px solid rgba(15, 37, 87, 0.15);
  border-right: 1px solid rgba(15, 37, 87, 0.15);
  border-bottom: 1px solid rgba(15, 37, 87, 0.15);
  transition: none;
  height: 100%;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-info-card h5 {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.card-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--accent-color);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--space-md) 0;
  color: var(--accent-color);
  font-size: 1.25rem;
}

.card-icon i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.card-description {
  color: var(--text-muted);
  font-size: 0.875rem;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* 5.5 Countdown Timer */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 1.5rem auto;
  background: transparent;
  max-width: 600px;
}

.countdown-item {
  background: var(--white);
  border-radius: 0;
  padding: 1rem 0.75rem;
  min-width: auto;
  text-align: center;
  border: none;
  position: relative;
  transition: var(--transition-normal);
}

.countdown-item::after {
  display: none;
}

.countdown-number {
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-color);
  line-height: 1;
  letter-spacing: 0.5px;
  font-family: var(--font-family-mono);
  display: block;
}

.countdown-label {
  font-size: 0.65rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
}


/* =============================================================================
   6. CONTENT SECTIONS
   ============================================================================= */

/* 6.1 Section Headers */
.section-header {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.section-badge {
  display: inline-block;
  background: transparent;
  color: var(--accent-color);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 0;
  border: 1px solid var(--accent-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  line-height: 1.2;
}

.page-content {
  padding: var(--space-3xl) 0;
  background: var(--bg-primary);
}

/* 6.2 Feature Cards */
.feature-card {
  background: var(--white);
  border-radius: 0;
  padding: var(--space-xl);
  border-left: 2px solid var(--secondary-color);
  border-top: 1px solid rgba(15, 37, 87, 0.12);
  border-right: 1px solid rgba(15, 37, 87, 0.15);
  border-bottom: 1px solid rgba(15, 37, 87, 0.15);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: none;
  position: relative;
  overflow: hidden;
}

.feature-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 2px solid var(--accent-color);
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.feature-icon i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.feature-content h5 {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.feature-content p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.feature-content ul li {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

/* 6.3 Timeline */
.timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(15, 37, 87, 0.2);
  transform: translateX(-50%);
  border-radius: 0;
}

.timeline-item {
  position: relative;
  margin-bottom: var(--space-3xl);
  display: flex;
  align-items: center;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline-marker {
  width: 50px;
  height: 50px;
  background: var(--white);
  border: 2px solid var(--accent-color);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: none;
}

.timeline-marker i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.timeline-content {
  flex: 1;
  background: var(--white);
  padding: var(--space-xl);
  border-radius: 0;
  margin: 0 var(--space-xl);
  box-shadow: none;
  border: 1px solid rgba(15, 37, 87, 0.15);
  border-left: 2px solid var(--accent-color);
  transition: none;
  position: relative;
  overflow: hidden;
}

.timeline-date {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.timeline-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

.timeline-desc {
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
}

/* 6.4 About Preview */
.about-preview {
  padding: var(--space-3xl) 0;
  background: var(--gray-50);
  position: relative;
  overflow: hidden;
}

.about-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(15, 37, 87, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(0, 212, 255, 0.03) 0%, transparent 50%);
  pointer-events: none;
}


/* =============================================================================
   7. BUTTONS & INTERACTIVE
   ============================================================================= */

/* 7.1 Button Base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--accent-color);
  border-radius: 0;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: var(--transition-normal);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  background: transparent;
  color: var(--accent-color);
  gap: 0.4rem;
}

.btn:hover {
  background: var(--accent-color);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

.btn:focus {
  box-shadow: 0 0 0 3px rgba(15, 37, 87, 0.25);
}

.btn-lg {
  padding: 0.65rem 1.5rem;
  font-size: 1rem;
}

.btn-sm {
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
}

/* 7.2 Primary Buttons */
.btn-primary {
  background: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
}

.btn-primary:hover {
  background: var(--accent-color);
  color: var(--white);
  box-shadow: var(--shadow-glow);
}

/* 7.3 Outline Buttons */
.btn-outline-primary {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover {
  background: var(--primary-color);
  color: var(--white);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
  border-width: 2px;
  transition: all 0.2s ease;
}

.btn-outline-light:hover,
.page-hero .btn-outline-light:hover,
a.btn-outline-light:hover {
  background: #ffffff !important;
  color: #0f2557 !important;
  border-color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.btn-outline-light:active,
.btn-outline-light.active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  border-color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.btn-outline-light:focus,
.btn-outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
  outline: none;
}

.btn-light {
  background: var(--white);
  color: var(--primary-color);
  border-color: var(--white);
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-light:hover {
  background: var(--gray-100);
  color: var(--primary-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-light:active,
.btn-light.active {
  background: #e2e8f0;
  color: var(--primary-color);
  border-color: #e2e8f0;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-light:focus,
.btn-light:focus-visible {
  background: var(--white);
  color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
  outline: none;
}

/* Hero outline button — custom class to avoid Bootstrap btn-outline-light conflicts */
.btn-hero-outline {
  background: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  transition: all 0.2s ease;
}

.btn-hero-outline:hover {
  background: #ffffff;
  color: #0f2557;
}

.btn-hero-outline:active {
  background: #e2e8f0;
  color: #0f2557;
}

.btn-hero-outline:focus,
.btn-hero-outline:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
  outline: none;
}

/* 7.4 Submit Buttons */
.submit-btn,
.submit-btn-mobile {
  background: transparent !important;
  border: 1px solid var(--accent-color) !important;
  color: var(--accent-color) !important;
  font-weight: 600 !important;
  font-size: 0.875rem;
  padding: 0.45rem 1rem;
  letter-spacing: 0.3px;
  position: relative;
  border-radius: 0;
  transition: var(--transition-normal);
}

.submit-btn:hover,
.submit-btn-mobile:hover {
  background: var(--accent-color) !important;
  color: var(--bg-primary) !important;
}

.submit-btn i,
.submit-btn-mobile i {
  color: inherit;
}

/* 7.5 Back to Top */
.back-to-top {
  position: fixed;
  bottom: var(--space-xl);
  right: var(--space-xl);
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  color: var(--white);
  border: 2px solid var(--accent-color);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: var(--transition-normal);
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-fixed);
  box-shadow: var(--shadow-lg);
}

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

.back-to-top:hover {
  transform: translateY(-5px) scale(1.1);
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color) 100%);
  border: 2px solid var(--white);
  box-shadow: 0 8px 25px rgba(15, 37, 87, 0.4);
}

.back-to-top i {
  color: #ffffff !important;
}

/* 7.6 Particle Container */
.particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: var(--accent-color, #2563eb);
  border-radius: 50%;
  pointer-events: none;
}


/* =============================================================================
   8. CARDS
   ============================================================================= */

/* 8.1 Card Base */
.card {
  background: var(--white);
  border-radius: 0;
  box-shadow: none;
  border: 1px solid rgba(15, 37, 87, 0.15);
  transition: none;
  overflow: hidden;
}

.card-gradient {
  background: var(--white);
  border-left: 2px solid var(--accent-color);
}

.card-body {
  padding: var(--space-xl);
}


/* =============================================================================
   9. FOOTER - Black and White Design
   ============================================================================= */

/* 9.1 Footer Base */
.modern-footer {
  background: #060d1f !important;
  color: #ffffff !important;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #333333;
}

.modern-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
}

.footer-main {
  padding: 3.25rem 0 2rem;
  position: relative;
  z-index: 1;
  background: #000000 !important;
  color: #ffffff !important;
}

.footer-section {
  height: 100%;
}

/* Ensure all footer text elements use white color */
.modern-footer *,
.footer-main * {
  color: inherit !important;
}

.modern-footer .text-white-50,
.footer-main .text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.modern-footer .bi {
  color: #ffffff !important;
}

/* 9.2 Footer Brand */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.footer-logo {
  height: 50px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
  color: #ffffff;
}

.footer-description {
  color: #ffffff !important;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* 9.3 Footer Links & Headings */
.footer-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  width: 40px;
  height: 2px;
  background: #ffffff;
  border-radius: 0;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: #cccccc !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-radius: 0;
  transition: var(--transition-normal);
}

.footer-links a:hover {
  color: #ffffff !important;
  padding-left: 0.5rem;
  border-left: 2px solid #ffffff;
}

.footer-links i {
  opacity: 1;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 400;
}

.link-footer {
  color: #cccccc !important;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: var(--space-xs) 0;
  transition: var(--transition-normal);
}

.link-footer:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.05);
  padding-left: var(--space-sm);
  border-radius: var(--radius-sm);
  transform: translateX(5px);
}

.link-footer i {
  color: #ffffff;
  margin-right: var(--space-sm);
  transition: var(--transition-normal);
  width: 20px;
  text-align: center;
}

.link-footer:hover i {
  color: #ffffff;
  transform: scale(1.1);
}

/* 9.4 Footer Contact */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #cccccc !important;
  transition: var(--transition-normal);
}

.contact-item i {
  min-width: 20px;
  color: #ffffff !important;
  opacity: 1;
  font-size: 1.1rem;
  font-weight: 400;
}

.contact-item a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-normal);
}

.contact-item:hover {
  color: #ffffff !important;
}

.contact-item a:hover {
  color: #ffffff !important;
}

/* 9.5 Important Dates */
.important-dates {
  margin-bottom: 1.25rem;
}

.date-item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #333333;
}

.date-label {
  color: #cccccc !important;
  font-weight: 500;
}

.date-value {
  color: #ffffff !important;
  font-weight: 700;
}

/* 9.6 Social Icons */
.social-heading {
  color: #ffffff !important;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 1.1rem;
  font-weight: 400;
  text-decoration: none;
  border: 1px solid #ffffff;
  transition: var(--transition-normal);
}

.social-link i {
  color: #ffffff;
  opacity: 1;
}

.social-link:hover {
  background: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-2px);
}

.social-link:hover i {
  color: #000000;
}

/* 9.7 Footer Bottom */
.footer-bottom {
  background: #000000 !important;
  padding: 1rem 0;
  border-top: 1px solid #333333;
}

.footer-bottom .copyright {
  color: #cccccc !important;
  font-size: 0.9rem;
}

.footer-bottom .text-white-50 {
  color: #cccccc !important;
}


/* =============================================================================
   10. LOADING SCREEN
   ============================================================================= */

.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity var(--transition-slow);
}

.loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.loading-content {
  text-align: center;
}

.loading-logo {
  margin-bottom: var(--space-lg);
}

.loading-logo1 {
  margin-bottom: var(--space-xl);
}

.loading-logo-img {
  width: 180px;
  height: 180px;
  animation: logoFloat 2s ease-in-out infinite;
}

.loading-logo1 .loading-logo-img1 {
  width: var(--logo-size);
  height: auto;
  display: block;
}

.loading-text {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--space-xl);
  letter-spacing: 0.1em;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
}

.spinner-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  animation: spinner 0.7s infinite ease-in-out;
}

.spinner-ring:nth-child(2) { animation-delay: -0.7s; }
.spinner-ring:nth-child(3) { animation-delay: -0.6s; }
.spinner-ring:nth-child(4) { animation-delay: -0.5s; }


/* =============================================================================
   11. UTILITY CLASSES
   ============================================================================= */

/* 11.1 Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 11.2 Spacing Utilities */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-sm); }
.mb-3 { margin-bottom: var(--space-md); }
.mb-4 { margin-bottom: var(--space-lg); }
.mb-5 { margin-bottom: var(--space-xl); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-xs); }
.p-2 { padding: var(--space-sm); }
.p-3 { padding: var(--space-md); }
.p-4 { padding: var(--space-lg); }
.p-5 { padding: var(--space-xl); }

/* 11.3 Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }

/* 11.4 Flexbox Utilities */
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }


/* =============================================================================
   12. ANIMATIONS
   ============================================================================= */

/* 12.1 Fade Effects */
.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* 12.2 Slide Effects */
.slide-in-left {
  animation: slideInLeft 0.6s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.6s ease-out;
}

/* 12.3 Keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

@keyframes spinner {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 37, 87, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(15, 37, 87, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 37, 87, 0);
  }
}


/* =============================================================================
   13. RESPONSIVE DESIGN
   ============================================================================= */

/* 13.1 Large Screens (< 1200px) */
@media (max-width: 1200px) {
  .hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
  }

  .section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }
}

/* 13.2 Medium Screens (< 992px) */
@media (max-width: 992px) {
  .timeline-line {
    left: 30px;
  }

  .timeline-item {
    flex-direction: row !important;
    padding-left: 80px;
  }

  .timeline-item:nth-child(even) {
    flex-direction: row !important;
  }

  .timeline-marker {
    position: absolute;
    left: 0;
  }

  .timeline-content {
    margin-left: 0;
    margin-right: 0;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .submit-btn-mobile {
    margin-bottom: 0.5rem;
  }
}

/* 13.3 Small Screens (< 768px) */
@media (max-width: 768px) {
  :root {
    --space-3xl: 2rem;
    --space-2xl: 1.5rem;
  }

  .hero-section {
    min-height: auto;
    padding: 2rem 0;
  }

  .hero-content {
    padding: 2rem 1.5rem;
  }

  .hero-info-card {
    margin-bottom: var(--space-lg);
  }

  .countdown {
    gap: var(--space-sm);
  }

  .countdown-item {
    min-width: 80px;
    padding: var(--space-md);
  }

  .countdown-number {
    font-size: 1.75rem;
  }

  .btn-lg {
    padding: 0.55rem 1.25rem;
    font-size: 0.95rem;
  }

  .footer-section {
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .date-item {
    flex-direction: column;
    align-items: center;
  }

  .social-icons {
    justify-content: center;
  }

  .back-to-top {
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 45px;
    height: 45px;
  }
}

/* 13.4 Extra Small Screens (< 576px) */
@media (max-width: 576px) {
  .countdown {
    gap: var(--space-xs);
  }

  .countdown-item {
    min-width: 70px;
    padding: var(--space-sm);
  }

  .countdown-number {
    font-size: 1.5rem;
  }

  .countdown-label {
    font-size: 0.6rem;
  }

  .hero-cta {
    flex-direction: column;
    gap: var(--space-md);
  }

  .btn-lg {
    width: 100%;
    max-width: 300px;
  }

  .hero-badge {
    font-size: var(--font-size-xs);
    padding: var(--space-xs) var(--space-md);
  }

  .timeline-item {
    padding-left: 60px;
  }

  .timeline-marker {
    width: 40px;
    height: 40px;
  }

  .timeline-marker i {
    font-size: var(--font-size-base);
  }

  .timeline-content {
    padding: var(--space-md);
  }
}


/* =============================================================================
   14. ACCESSIBILITY
   ============================================================================= */

/* 14.1 Focus Styles */
.btn:focus,
.nav-link:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* 14.2 Reduced Motion - Already defined in section 2.5 */


/* =============================================================================
   15. PRINT STYLES
   ============================================================================= */

@media print {
  .navbar,
  .back-to-top,
  .loading-screen,
  .scroll-indicator,
  .floating-shapes,
  .particle-container {
    display: none !important;
  }

  .hero-section {
    min-height: auto;
    padding: var(--space-xl) 0;
    page-break-inside: avoid;
  }

  .modern-footer {
    background: var(--white) !important;
    color: var(--text-primary) !important;
    page-break-inside: avoid;
  }

  .footer-main {
    padding: 2rem 0;
    background: var(--gray-100) !important;
    color: black !important;
  }

  .footer-heading,
  .footer h5,
  .footer h6 {
    color: black !important;
    border-bottom-color: black !important;
  }

  .link-footer,
  .footer a {
    color: black !important;
  }

  .social-icons,
  .footer-bottom {
    display: none;
  }

  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
  }
}


/* =============================================================================
   15B. PAGE-SPECIFIC COMPONENT BASE STYLES
   ============================================================================= */

/**
 * Base styles for components used in page-specific inline styles.
 * These will be overridden by dark mode section below.
 */

/* Content Card Base */
.content-card {
  background: var(--white, #ffffff);
  border: 1px solid var(--light-border, #e5e7eb);
  border-radius: var(--radius, 16px);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  box-shadow: 0 10px 34px rgba(2, 6, 23, 0.08);
  color: var(--text-primary, #0f172a);
}

/* Content Card Text - Light Mode */
.content-card p,
.content-card li,
.content-card span:not(.badge) {
  color: var(--text-primary, #334155);
}

.content-card h2,
.content-card h3,
.content-card h4,
.content-card h5,
.content-card h6 {
  color: var(--text-primary, #0f172a);
}

.content-card a {
  color: var(--primary-dark, #0a1a3f);
}

.hover-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(2, 6, 23, 0.12);
}

/* Note/Info Box Base */
.note {
  border-left: 4px solid var(--mint, #10b981);
  background: #ecfeff;
  border: 1px solid #bae6fd;
  border-left-color: var(--mint, #10b981);
  border-radius: 12px;
  padding: 1rem;
}

/* Dates Table Base */
.dates-table thead th {
  background: #f8fafc;
  font-weight: 700;
  color: var(--text-primary);
}

.dates-table td,
.dates-table th {
  vertical-align: middle;
  color: var(--text-primary);
}

/* General Table Text */
.table td,
.table th {
  color: var(--text-primary);
}

/* Sticky CTA Base */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), #fff 40%);
  border-top: 1px solid #e5e7eb;
  padding: 0.75rem 1rem;
  display: none;
}

@media (max-width: 575.98px) {
  .sticky-cta {
    display: block;
  }
}

/* Subnav Base */
.subnav-wrap {
  position: sticky;
  top: var(--nav-offset, 84px);
  z-index: 1020;
  background: #fff;
  border-bottom: 1px solid #edf2f7;
}

/* Tier Card Base */
.tier {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 1.25rem;
  height: 100%;
  background: #fff;
}

/* Edition Card Base */
.edition {
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* Step Badge Base */
.step-badge {
  padding: 0.5rem 0.85rem;
  border: 1px dashed #cbd5e1;
  background: #fff;
}

/* Info Box Base */
.info-box {
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
}

/* Sponsor Card Base */
.sponsor-card {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

/* Logo Placeholder Base */
.logo-placeholder {
  height: 60px;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
}


/* =============================================================================
   16. DARK MODE (System Preference)
   ============================================================================= */

/**
 * Automatic dark mode based on browser/system settings.
 * Uses prefers-color-scheme media query for seamless adaptation.
 */

@media (prefers-color-scheme: dark) {
  /* 16.1 Dark Mode Variables Override */
  :root {
    /* Background Colors - Dark */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --light-bg: #0f172a;
    --light-surface: #1e293b;
    --white: #1e293b;

    /* Text Colors - Light on Dark */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-light: #e2e8f0;

    /* Surface adjustments */
    --gray-50: #1e293b;
    --gray-100: #334155;
    --gray-200: #475569;

    /* Borders */
    --light-border: rgba(148, 163, 184, 0.2);

    /* Glass backgrounds - Dark */
    --glass-95: rgba(15, 23, 42, 0.95);
    --glass-98: rgba(15, 23, 42, 0.98);

    /* Shadows - Darker */
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  /* 16.2 Body Dark Mode */
  body {
    background-color: #0f172a;
    color: #f1f5f9;
    background-image:
      radial-gradient(at 0% 0%, rgba(15, 37, 87, 0.08) 0px, transparent 50%),
      radial-gradient(at 100% 100%, rgba(0, 212, 255, 0.08) 0px, transparent 50%);
  }

  /* 16.3 Typography Dark Mode */
  h1, h2, h3, h4, h5, h6 {
    color: #f1f5f9;
  }

  p {
    color: #e2e8f0;
  }

  .lead {
    color: #cbd5e1;
  }

  ul, ol, li {
    color: #e2e8f0;
  }

  /* 16.4 Navigation Dark Mode */
  .navbar {
    background: rgba(15, 23, 42, 0.98) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .navbar.scrolled {
    background: rgba(15, 23, 42, 0.98) !important;
  }

  .navbar-brand {
    color: #f1f5f9 !important;
  }

  .navbar-brand:hover {
    color: var(--accent-light) !important;
  }

  .brand-text {
    color: #f1f5f9;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .navbar-nav .nav-link {
    color: #cbd5e1 !important;
  }

  .navbar-nav .nav-link:hover {
    color: var(--accent-light) !important;
  }

  .navbar-nav .nav-link.active {
    color: var(--accent-light) !important;
  }

  .navbar-toggler {
    border-color: #cbd5e1;
  }

  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23cbd5e1' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* 16.5 Dropdown Dark Mode */
  .dropdown-menu {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .dropdown-item {
    color: #cbd5e1;
  }

  .dropdown-item:hover,
  .dropdown-item.active {
    background: rgba(15, 37, 87, 0.15);
    color: var(--accent-light);
  }

  /* 16.6 Offcanvas Dark Mode */
  .offcanvas.offcanvas-nav {
    background: #0f172a;
    border-right-color: rgba(148, 163, 184, 0.15);
  }

  .offcanvas-header {
    border-bottom-color: rgba(148, 163, 184, 0.15);
  }

  .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
  }

  /* 16.7 Navbar Collapse Dark Mode */
  @media (max-width: 991.98px) {
    .navbar-collapse {
      background: #1e293b;
      border-color: rgba(148, 163, 184, 0.15);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .dropdown-menu {
      background: #334155;
    }
  }

  /* 16.8 Hero Section Dark Mode */
  .hero-section {
    background: #0f172a;
  }

  .hero-title {
    color: #f1f5f9;
  }

  .hero-subtitle {
    color: #cbd5e1;
  }

  .hero-badge {
    background: rgba(15, 37, 87, 0.2);
    border-color: rgba(15, 37, 87, 0.3);
  }

  /* 16.9 Hero Info Cards Dark Mode */
  .hero-info-card {
    background: #1e293b;
    border-top-color: rgba(148, 163, 184, 0.15);
    border-right-color: rgba(148, 163, 184, 0.15);
    border-bottom-color: rgba(148, 163, 184, 0.15);
  }

  .hero-info-card h5 {
    color: #f1f5f9;
  }

  .card-description {
    color: #94a3b8;
  }

  /* 16.10 Cards Dark Mode */
  .card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.15);
  }

  .card-body {
    background: #1e293b;
  }

  /* 16.11 Feature Cards Dark Mode */
  .feature-card {
    background: #1e293b;
    border-top-color: rgba(148, 163, 184, 0.15);
    border-right-color: rgba(148, 163, 184, 0.15);
    border-bottom-color: rgba(148, 163, 184, 0.15);
  }

  .feature-content h5 {
    color: #f1f5f9;
  }

  .feature-content p {
    color: #cbd5e1;
  }

  /* 16.12 Timeline Dark Mode */
  .timeline-line {
    background: rgba(148, 163, 184, 0.2);
  }

  .timeline-marker {
    background: #1e293b;
  }

  .timeline-content {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.15);
  }

  .timeline-title {
    color: #f1f5f9;
  }

  .timeline-desc {
    color: #cbd5e1;
  }

  /* 16.13 Section Headers Dark Mode */
  .section-title {
    color: #f1f5f9;
  }

  .section-badge {
    background: rgba(15, 37, 87, 0.15);
  }

  /* 16.14 About Preview Dark Mode */
  .about-preview {
    background: #1e293b;
  }

  .about-preview::before {
    background-image:
      radial-gradient(circle at 25% 25%, rgba(15, 37, 87, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
  }

  /* 16.15 Page Content Dark Mode */
  .page-content {
    background: #0f172a;
  }

  /* 16.16 Buttons Dark Mode */
  .btn {
    border-color: var(--accent-light);
    color: var(--accent-light);
  }

  .btn:hover {
    background: var(--accent-light);
    color: #0f172a;
  }

  .btn-primary {
    border-color: var(--accent-light);
    color: var(--accent-light);
  }

  .btn-primary:hover {
    background: var(--accent-light);
    color: #0f172a;
  }

  .btn-outline-primary {
    color: var(--primary-light);
    border-color: var(--primary-light);
  }

  .btn-outline-primary:hover {
    background: var(--primary-light);
    color: #0f172a;
  }

  .submit-btn,
  .submit-btn-mobile {
    border-color: var(--accent-light) !important;
    color: var(--accent-light) !important;
  }

  .submit-btn:hover,
  .submit-btn-mobile:hover {
    background: var(--accent-light) !important;
    color: #0f172a !important;
  }

  /* 16.17 Countdown Dark Mode */
  .countdown-item {
    background: #1e293b;
  }

  .countdown-label {
    color: #94a3b8;
  }

  /* 16.18 Loading Screen Dark Mode */
  .loading-screen {
    background: #0f172a;
  }

  .loading-text {
    color: var(--primary-light);
  }

  .spinner-ring {
    background: var(--primary-light);
  }

  /* 16.19 Back to Top Dark Mode */
  .back-to-top {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
    border-color: var(--accent-light);
  }

  .back-to-top:hover {
    background: linear-gradient(135deg, var(--secondary-light) 0%, var(--accent-light) 100%);
  }

  /* 16.20 Forms & Inputs Dark Mode (if any) */
  input,
  textarea,
  select {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
    color: #f1f5f9;
  }

  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--accent-light);
    background: #334155;
  }

  input::placeholder,
  textarea::placeholder {
    color: #64748b;
  }

  /* 16.21 Tables Dark Mode (if any) */
  table {
    color: #f1f5f9;
  }

  th {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
  }

  td {
    border-color: rgba(148, 163, 184, 0.15);
  }

  tr:hover {
    background: rgba(15, 37, 87, 0.1);
  }

  /* 16.22 Links Dark Mode */
  a {
    color: var(--accent-light);
  }

  a:hover {
    color: var(--primary-light);
  }

  .hero-link {
    color: var(--accent-light);
  }

  .hero-link:hover {
    color: var(--primary-light);
    border-bottom-color: var(--primary-light);
  }

  /* 16.23 Text Gradient Dark Mode */
  .text-gradient {
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* 16.24 Bootstrap Overrides Dark Mode */
  .bg-light {
    background-color: #1e293b !important;
  }

  .bg-white {
    background-color: #1e293b !important;
  }

  .text-dark {
    color: #f1f5f9 !important;
  }

  .text-muted {
    color: #94a3b8 !important;
  }

  .border {
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .border-bottom {
    border-bottom-color: rgba(148, 163, 184, 0.2) !important;
  }

  .border-top {
    border-top-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.25 Scroll Behavior Dark Mode */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #1e293b;
  }

  ::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
  }

  /* 16.26 Selection Dark Mode */
  ::selection {
    background: rgba(15, 37, 87, 0.4);
    color: #f1f5f9;
  }

  ::-moz-selection {
    background: rgba(15, 37, 87, 0.4);
    color: #f1f5f9;
  }

  /* 16.27 List Items Dark Mode */
  li {
    color: #cbd5e1;
  }

  ul li,
  ol li {
    color: #cbd5e1;
  }

  .list-unstyled li {
    color: #cbd5e1;
  }

  .list-unstyled li strong {
    color: #f1f5f9;
  }

  /* 16.28 Card Content Dark Mode */
  .card p,
  .card li,
  .card-gradient p,
  .card-gradient li {
    color: #cbd5e1;
  }

  .card h3,
  .card h4,
  .card h5,
  .card-gradient h3,
  .card-gradient h4,
  .card-gradient h5 {
    color: #f1f5f9;
  }

  .card-gradient {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.15);
  }

  /* 16.29 Alert Dark Mode */
  .alert {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.2);
    color: #cbd5e1;
  }

  .alert-primary {
    background: rgba(15, 37, 87, 0.15);
    border-color: rgba(15, 37, 87, 0.3);
    color: #cbd5e1;
  }

  .alert h5 {
    color: #f1f5f9;
  }

  .alert a {
    color: var(--accent-light);
  }

  /* 16.30 Badge Dark Mode */
  .badge.bg-primary {
    background: rgba(15, 37, 87, 0.8) !important;
  }

  .badge.bg-info {
    background: rgba(6, 182, 212, 0.8) !important;
  }

  .badge.bg-success {
    background: rgba(34, 197, 94, 0.8) !important;
  }

  /* 16.31 Section Background Dark Mode */
  .bg-primary.bg-opacity-10,
  section.bg-primary.bg-opacity-10 {
    background-color: rgba(15, 37, 87, 0.08) !important;
  }

  /* 16.32 Text Utilities Dark Mode */
  .fw-bold,
  strong {
    color: #f1f5f9;
  }

  .text-center p,
  .text-justify {
    color: #cbd5e1;
  }

  /* 16.33 Page-Specific Content Cards Dark Mode */
  .content-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3) !important;
  }

  .content-card h2,
  .content-card h3,
  .content-card h4,
  .content-card h5 {
    color: #f1f5f9;
  }

  .content-card p,
  .content-card li,
  .content-card span {
    color: #cbd5e1;
  }

  .content-card strong {
    color: #f1f5f9;
  }

  /* 16.34 Note/Info Box Dark Mode */
  .note {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    border-left-color: var(--mint, #10b981) !important;
    color: #cbd5e1 !important;
  }

  /* 16.35 Dates Table Dark Mode */
  .dates-table {
    color: #f1f5f9;
  }

  .dates-table thead th {
    background: #334155 !important;
    color: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.2);
  }

  .dates-table tbody td,
  .dates-table tbody th {
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.15);
  }

  .dates-table tbody tr:hover {
    background: rgba(15, 37, 87, 0.1);
  }

  /* 16.36 Sticky CTA Dark Mode */
  .sticky-cta {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.06), #0f172a 40%) !important;
    border-top-color: rgba(148, 163, 184, 0.2) !important;
  }

  .sticky-cta strong {
    color: #f1f5f9;
  }

  /* 16.37 Hover Card Dark Mode */
  .hover-card:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4) !important;
  }

  /* 16.38 Section Title Dark Mode */
  .section-title {
    color: #f1f5f9 !important;
  }

  /* 16.39 Hero Kicker Dark Mode */
  .hero-kicker {
    color: #a5b4fc !important;
  }

  /* 16.40 Inline Page Styles Override */
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"] {
    background: #1e293b !important;
  }

  /* 16.41 Table Variants Dark Mode - Comprehensive */
  .table {
    color: #cbd5e1;
    --bs-table-bg: transparent;
    --bs-table-color: #cbd5e1;
    --bs-table-border-color: rgba(148, 163, 184, 0.15);
    --bs-table-striped-bg: rgba(30, 41, 59, 0.5);
    --bs-table-striped-color: #cbd5e1;
    --bs-table-hover-bg: rgba(15, 37, 87, 0.1);
    --bs-table-hover-color: #f1f5f9;
  }

  .table-hover tbody tr:hover {
    background-color: rgba(15, 37, 87, 0.1) !important;
    color: #f1f5f9;
  }

  .table > :not(caption) > * > * {
    border-bottom-color: rgba(148, 163, 184, 0.15);
    background-color: transparent;
    color: #cbd5e1;
  }

  /* Table Header Dark Mode */
  .table thead th,
  .table > thead > tr > th {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    font-weight: 700;
  }

  /* Table Body Cells Dark Mode */
  .table tbody td,
  .table tbody th,
  .table > tbody > tr > td,
  .table > tbody > tr > th {
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
    background-color: transparent;
  }

  /* Table Caption Dark Mode */
  .table caption,
  caption {
    color: #94a3b8 !important;
  }

  /* Table Striped Dark Mode */
  .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(30, 41, 59, 0.5) !important;
    color: #cbd5e1;
  }

  .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: transparent;
    color: #cbd5e1;
  }

  /* Table Borderless Dark Mode */
  .table-borderless > :not(caption) > * > * {
    border-bottom-color: transparent !important;
  }

  /* Fees Table Dark Mode */
  .fees-table {
    color: #cbd5e1;
  }

  .fees-table thead,
  .fees-table thead th,
  .fees-table > thead > tr > th {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .fees-table tbody td,
  .fees-table tbody th {
    color: #cbd5e1 !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
  }

  .fees-table tbody tr:hover td,
  .fees-table tbody tr:hover th {
    background-color: rgba(15, 37, 87, 0.1) !important;
    color: #f1f5f9 !important;
  }

  /* Bootstrap bg-light override for table headers in dark mode */
  .table thead.bg-light,
  .table thead.bg-light th,
  thead.bg-light,
  thead.bg-light th {
    background: #334155 !important;
    color: #f1f5f9 !important;
  }

  /* Table Responsive Container Dark Mode */
  .table-responsive {
    background: transparent;
  }

  /* Note Callout inside tables section */
  .note-callout {
    background: rgba(30, 41, 59, 0.6) !important;
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #cbd5e1 !important;
  }

  /* 16.42 Step Cards Dark Mode */
  .step-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .step-card h4,
  .step-card h5 {
    color: #f1f5f9;
  }

  .step-card p,
  .step-card li {
    color: #cbd5e1;
  }

  /* 16.43 Info Cards Dark Mode */
  .info-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .info-card h4,
  .info-card h5,
  .info-card h6 {
    color: #f1f5f9;
  }

  .info-card p,
  .info-card li {
    color: #cbd5e1;
  }

  /* 16.44 Policy Card Dark Mode */
  .policy-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .policy-card h5 {
    color: #f1f5f9;
  }

  .policy-card p {
    color: #cbd5e1;
  }

  /* 16.45 Tier Cards (Sponsorship) Dark Mode */
  .tier-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .tier-card h3,
  .tier-card h4,
  .tier-card h5 {
    color: #f1f5f9;
  }

  .tier-card p,
  .tier-card li {
    color: #cbd5e1;
  }

  /* 16.46 Generic White Backgrounds Dark Mode */
  .bg-white,
  [class*="bg-white"] {
    background-color: #1e293b !important;
  }

  /* 16.47 Speaker Cards Dark Mode */
  .speaker-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .speaker-card h4,
  .speaker-card h5 {
    color: #f1f5f9;
  }

  .speaker-card p {
    color: #cbd5e1;
  }

  /* 16.48 Committee Member Cards Dark Mode */
  .committee-card,
  .member-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .committee-card h5,
  .member-card h5 {
    color: #f1f5f9;
  }

  .committee-card p,
  .member-card p {
    color: #cbd5e1;
  }

  /* 16.49 Timeline Cards Dark Mode */
  .history-card,
  .edition-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .history-card h4,
  .edition-card h4,
  .history-card h5,
  .edition-card h5 {
    color: #f1f5f9;
  }

  .history-card p,
  .edition-card p {
    color: #cbd5e1;
  }

  /* 16.50 Generic Ink/Muted Text Dark Mode */
  [style*="color:var(--ink)"],
  [style*="color: var(--ink)"] {
    color: #f1f5f9 !important;
  }

  [style*="color:var(--muted)"],
  [style*="color: var(--muted)"] {
    color: #94a3b8 !important;
  }

  /* 16.51 Comprehensive Inline Background Override */
  /* Target all elements with inline white backgrounds */
  [style*="background:#fff"],
  [style*="background: #fff"],
  [style*="background:#ffffff"],
  [style*="background: #ffffff"],
  [style*="background-color:#fff"],
  [style*="background-color: #fff"],
  [style*="background-color:#ffffff"],
  [style*="background-color: #ffffff"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
  }

  /* 16.52 Subnav Dark Mode */
  .subnav-wrap {
    background: #0f172a !important;
    border-bottom-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.53 Tier Cards (Sponsorship Page) Dark Mode */
  .tier {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .tier h4,
  .tier h5 {
    color: #f1f5f9;
  }

  .tier p,
  .tier li {
    color: #cbd5e1;
  }

  /* 16.54 Logo Placeholder Dark Mode */
  .logo-placeholder {
    background: #334155 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.55 Sponsor Card Dark Mode */
  .sponsor-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.56 Edition Card Dark Mode */
  .edition {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .edition h4,
  .edition h5 {
    color: #f1f5f9;
  }

  .edition p {
    color: #cbd5e1;
  }

  /* 16.57 Step Card Badge Dark Mode */
  .step-badge {
    background: #334155 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #f1f5f9 !important;
  }

  /* 16.58 Info Box Dark Mode */
  .info-box {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .info-box h5,
  .info-box h6 {
    color: #f1f5f9;
  }

  .info-box p,
  .info-box li {
    color: #cbd5e1;
  }

  /* 16.59 Generic Border Color Override */
  [style*="border:1px solid #e5e7eb"],
  [style*="border: 1px solid #e5e7eb"] {
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  [style*="border:1px solid #eef2f7"],
  [style*="border: 1px solid #eef2f7"],
  [style*="border:1px solid #edf2f7"],
  [style*="border: 1px solid #edf2f7"] {
    border-color: rgba(148, 163, 184, 0.15) !important;
  }

  [style*="border:1px dashed #e5e7eb"],
  [style*="border: 1px dashed #e5e7eb"],
  [style*="border:1px dashed #cbd5e1"],
  [style*="border: 1px dashed #cbd5e1"] {
    border-color: rgba(148, 163, 184, 0.3) !important;
  }

  /* 16.60 Body Background Override */
  body[style*="background:#fff"],
  body[style*="background: #fff"] {
    background: #0f172a !important;
  }

  /* 16.61 Card Link Dark Mode */
  .card-link {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.62 Panel Dark Mode */
  .panel {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .panel h4,
  .panel h5 {
    color: #f1f5f9;
  }

  .panel p,
  .panel li {
    color: #cbd5e1;
  }

  /* 16.63 Box Dark Mode */
  .box {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .box h4,
  .box h5 {
    color: #f1f5f9;
  }

  .box p,
  .box li {
    color: #cbd5e1;
  }

  /* 16.64 Any element with border-radius and white bg */
  [style*="border-radius"][style*="background:#fff"],
  [style*="border-radius"][style*="background: #fff"],
  [style*="border-radius"][style*="background:#ffffff"],
  [style*="border-radius"][style*="background: #ffffff"] {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.65 Partner Card Dark Mode */
  .partner-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .partner-card h5 {
    color: #f1f5f9;
  }

  .partner-card p {
    color: #cbd5e1;
  }

  /* 16.66 Logo Box Dark Mode */
  .logo-box {
    background: #334155 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
  }

  /* 16.67 Timeline Item Dark Mode */
  .t-item {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .t-title {
    color: #f1f5f9;
  }

  .t-desc {
    color: #cbd5e1;
  }

  /* 16.68 Guideline Card Dark Mode */
  .guideline-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .guideline-card h5,
  .guideline-card h6 {
    color: #f1f5f9;
  }

  .guideline-card p,
  .guideline-card li {
    color: #cbd5e1;
  }

  /* 16.69 Template Card Dark Mode */
  .tpl-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .tpl-card h5,
  .tpl-card h6 {
    color: #f1f5f9;
  }

  .tpl-card p {
    color: #cbd5e1;
  }

  /* 16.70 G-Chip Dark Mode */
  .g-chip {
    background: #334155 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #f1f5f9 !important;
  }

  /* 16.71 Fact/Stats Dark Mode */
  .fact {
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .stat {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .stat .num {
    color: var(--accent-light);
  }

  .stat .desc {
    color: #94a3b8;
  }

  /* 16.72 Note Callout Dark Mode */
  .note-callout {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    border-left-color: var(--mint, #10b981) !important;
    color: #cbd5e1 !important;
  }

  /* 16.73 Reason Card Dark Mode */
  .reason-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .reason-card h5 {
    color: #f1f5f9;
  }

  .reason-card p {
    color: #cbd5e1;
  }

  /* 16.74 Subnav Dark Mode */
  .subnav {
    background: #0f172a !important;
    border-bottom-color: rgba(148, 163, 184, 0.2) !important;
  }

  .subnav .nav-link {
    color: #94a3b8 !important;
  }

  .subnav .nav-link.active,
  .subnav .nav-link:hover {
    color: var(--accent-light) !important;
  }

  /* 16.75 Checklist Dark Mode */
  .checklist .form-check:hover {
    background: rgba(255, 255, 255, 0.05) !important;
  }

  /* 16.76 Chip Dark Mode */
  .chip {
    background: #334155 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
    color: #f1f5f9 !important;
  }

  /* 16.77 Badge Topic Dark Mode */
  .badge-topic {
    background: rgba(15, 37, 87, 0.2) !important;
    color: var(--accent-light) !important;
    border-color: rgba(15, 37, 87, 0.3) !important;
  }

  /* 16.78 Edition Card Dark Mode */
  .edition-card {
    background: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .edition-card h4,
  .edition-card h5 {
    color: #f1f5f9;
  }

  .edition-card p {
    color: #cbd5e1;
  }

  .edition-cover {
    border-bottom-color: rgba(148, 163, 184, 0.15) !important;
  }

  /* 16.79 Timeline Dark Mode (versions page) */
  .timeline {
    border-left-color: rgba(148, 163, 184, 0.3) !important;
  }

  .timeline .edition::before {
    box-shadow: 0 0 0 4px #1e293b !important;
  }

  /* 16.80 Badge Variants Dark Mode */
  .badge-soft {
    background: rgba(14, 165, 233, 0.2) !important;
    color: #7dd3fc !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
  }

  .badge-muted {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.3) !important;
  }

  /* 16.81 Accordion/FAQ Dark Mode - Comprehensive */
  .accordion {
    --bs-accordion-bg: #1e293b;
    --bs-accordion-border-color: rgba(148, 163, 184, 0.2);
    --bs-accordion-btn-bg: #1e293b;
    --bs-accordion-btn-color: #f1f5f9;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1f5f9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393c5fd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-active-bg: rgba(15, 37, 87, 0.15);
    --bs-accordion-active-color: #93c5fd;
  }

  .accordion-item {
    background-color: #1e293b !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  .accordion-header {
    background-color: transparent;
  }

  .accordion-button {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    font-weight: 500;
  }

  .accordion-button:not(.collapsed) {
    background-color: rgba(15, 37, 87, 0.15) !important;
    color: #93c5fd !important;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 rgba(148, 163, 184, 0.2);
  }

  .accordion-button:focus {
    border-color: rgba(15, 37, 87, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(15, 37, 87, 0.25) !important;
  }

  .accordion-button:hover {
    background-color: rgba(15, 37, 87, 0.1) !important;
  }

  .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1f5f9'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  }

  .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2393c5fd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  }

  .accordion-body {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-top-color: rgba(148, 163, 184, 0.15) !important;
  }

  .accordion-body a {
    color: #93c5fd !important;
  }

  .accordion-body a:hover {
    color: #bfdbfe !important;
  }

  .accordion-collapse {
    border-color: rgba(148, 163, 184, 0.2) !important;
  }

  /* 16.82 Contact Card Dark Mode */
  .card.border-primary {
    background-color: #1e293b !important;
    border-color: var(--brand, #0a1a3f) !important;
  }

  .card.border-primary .card-body {
    background-color: #1e293b !important;
  }

  .card.border-primary h3,
  .card.border-primary h4 {
    color: #f1f5f9 !important;
  }

  .card.border-primary p {
    color: #cbd5e1 !important;
  }

  .card.border-primary strong {
    color: #f1f5f9 !important;
  }

  .card.border-primary .border-bottom {
    border-bottom-color: var(--brand, #0a1a3f) !important;
  }

  /* 16.83 FAQ Section Heading Dark Mode */
  h3.border-bottom.border-primary {
    color: #f1f5f9 !important;
    border-bottom-color: var(--brand, #0a1a3f) !important;
  }
}


/* =============================================================================
   END OF STYLESHEET
   ============================================================================= */


/* =============================================================================
   17. PAGE-SPECIFIC STYLES
   ============================================================================= */

/* -----------------------------------------------------------------------------
   17.1 Hero Alternate (Sponsors/Partners Pages)
   ----------------------------------------------------------------------------- */
.header-spacer {
  height: 84px;
}

.hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(1000px 600px at 85% -20%, rgba(59,130,246,.20), transparent 60%),
    linear-gradient(135deg, #0b1530 0%, #0f1f48 55%, #132a63 100%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .9;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
}

.hero-kicker {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #a5b4fc;
  font-size: .9rem;
}

.hero-pills .pill {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  padding: .55rem .9rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

/* -----------------------------------------------------------------------------
   17.2 Sponsorship Tiers
   ----------------------------------------------------------------------------- */
.tier {
  background: var(--bg-primary, #fff);
  border: 1px solid var(--light-border, rgba(15, 37, 87, 0.15));
  border-radius: var(--radius-xl, 16px);
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tier:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tier h4 {
  font-weight: 800;
  margin: 0;
}

.tier .price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-dark, #0a1a3f);
}

.tier ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.tier li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .5rem 0;
}

.tier li i {
  color: var(--success-color, #10b981);
}

.tier .header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.tier .left-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Tier badges */
.tier-badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(2,6,23,.12), inset 0 1px 0 rgba(255,255,255,.4);
  border: 1px solid rgba(2,6,23,.08);
  flex: 0 0 48px;
}

.tier-badge i {
  font-size: 1.25rem;
  line-height: 1;
  opacity: .95;
}

.badge-platinum {
  background: linear-gradient(135deg, #eef2f7 0%, #f8fafc 60%, #ffffff 100%);
  border-color: #d1d5db;
}
.badge-platinum i { color: #475569; }

.badge-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #facc15 100%);
  border-color: #eab308;
}
.badge-gold i { color: #4a3b03; }

.badge-silver {
  background: linear-gradient(135deg, #cbd5e1 0%, #e2e8f0 55%, #f1f5f9 100%);
  border-color: #cbd5e1;
}
.badge-silver i { color: #334155; }

/* Sponsor filter badges */
.badge-tier { font-weight: 700; }
.badge-community { background: #e0f2fe; color: #0c4a6e; }
.badge-technical { background: #dcfce7; color: #065f46; }

/* -----------------------------------------------------------------------------
   17.3 Partner Cards (Sponsors Page)
   ----------------------------------------------------------------------------- */
.partner-card {
  border-radius: 14px;
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  box-shadow: 0 8px 26px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--light-border, rgba(15, 37, 87, 0.15));
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(2,6,23,.12);
}

.logo-box {
  height: 60px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}

.logo-box img {
  max-height: 44px;
  width: auto;
  object-fit: contain;
}

/* Logo wall */
.logo-wall img {
  filter: grayscale(1) contrast(1.1) brightness(.95);
  opacity: .88;
  transition: all .2s ease;
  max-height: 42px;
  object-fit: contain;
}

.logo-wall img:hover {
  filter: none;
  opacity: 1;
}

/* Filter pills */
.filter-pills .btn {
  border-radius: 999px;
}

/* -----------------------------------------------------------------------------
   17.4 Stats Section
   ----------------------------------------------------------------------------- */
.stat {
  border-radius: 14px;
  padding: 1.25rem;
  height: 100%;
}

.stat .num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-dark, #0a1a3f);
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   17.5 Quotes/Testimonials
   ----------------------------------------------------------------------------- */
.quote {
  font-size: 1.05rem;
  color: var(--text-primary, #0f172a);
  border-left: 4px solid #c7d2fe;
  padding-left: 1rem;
}

/* -----------------------------------------------------------------------------
   17.6 Sticky CTA (Mobile)
   ----------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: linear-gradient(180deg, rgba(255,255,255,.06), #fff 40%);
  border-top: 1px solid #e5e7eb;
  padding: .75rem 1rem;
  display: none;
}

/* -----------------------------------------------------------------------------
   17.7 About Page Logo
   ----------------------------------------------------------------------------- */
.loading-logo1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-logo-img1 {
  width: clamp(250px, 34vw, 380px);
  height: auto;
  display: block;
}

/* -----------------------------------------------------------------------------
   17.8 Dark Mode for Page-Specific Styles
   ----------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .hero {
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(16,185,129,.22), transparent 60%),
      radial-gradient(1000px 600px at 85% -20%, rgba(59,130,246,.20), transparent 60%),
      linear-gradient(135deg, #0b1530 0%, #0f1f48 55%, #132a63 100%);
  }

  .tier {
    background: #0f172a;
    border-color: #1f2a44;
  }

  .tier .price {
    color: #93c5fd;
  }

  .partner-card {
    background: #0f172a;
    border-color: #1f2a44;
  }

  .logo-box {
    border-color: #263659;
    background: #0f172a;
  }

  .filter-pills .btn.btn-outline-primary {
    color: #93c5fd;
    border-color: #334d9b;
  }

  .filter-pills .btn.btn-outline-primary:hover {
    background: #0a1a3f;
    border-color: #0a1a3f;
  }

  .quote {
    color: #e2e8f0;
    border-left-color: #4f46e5;
  }

  .sticky-cta {
    background: linear-gradient(180deg, rgba(15,23,42,.06), #0f172a 40%);
    border-top-color: #1f2a44;
  }
}

/* -----------------------------------------------------------------------------
   17.9 Text Utilities
   ----------------------------------------------------------------------------- */
.text-justify {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------------
   17.10 Card Gradient (CFP, Calls pages)
   ----------------------------------------------------------------------------- */
.card-gradient {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  transition: transform .25s ease, box-shadow .25s ease;
}

.card-gradient:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark) {
  .card-gradient {
    border-color: rgba(255,255,255,.1);
  }
  
  .card-gradient:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,.3);
  }
}

/* -----------------------------------------------------------------------------
   17.11 Hero Text Color Fix - Ensure all text in hero is white
   ----------------------------------------------------------------------------- */
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.hero h5,
.hero h6,
.hero p,
.hero .lead,
.hero .display-6 {
  color: #fff !important;
}

.hero .hero-kicker {
  color: #a5b4fc !important;
}

/* -----------------------------------------------------------------------------
   17.12 Additional Call Pages Styles
   ----------------------------------------------------------------------------- */
.badge-soft {
  background: rgba(14,165,233,.12);
  color: #0369a1;
}

.icon-li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

/* Topics columns on wide screens */
.topics-2col {
  column-gap: 2rem;
}

@media (min-width: 992px) {
  .topics-2col {
    columns: 2;
  }
  .topics-2col > li {
    break-inside: avoid;
    margin-bottom: .6rem;
  }
}

/* Sticky subnav */
.subnav .nav-link {
  color: var(--text-muted, #64748b);
  font-weight: 600;
}

.subnav .nav-link.active {
  color: var(--primary-dark, #0a1a3f);
}

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: .9rem;
}

@media (prefers-color-scheme: dark) {
  .badge-soft {
    background: rgba(14,165,233,.2);
    color: #7dd3fc;
  }
  
  .chip {
    background: #1e293b;
    border-color: #334155;
    color: #e2e8f0;
  }
}

/* -----------------------------------------------------------------------------
   17.13 Dates Page Styles
   ----------------------------------------------------------------------------- */
.hero-wrap {
  position: relative;
  overflow: hidden;
  background: #0b1530;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(1000px 600px at 85% -20%, rgba(59,130,246,.20), transparent 60%),
    linear-gradient(135deg, rgba(6,12,30,.88), rgba(15,31,72,.72), rgba(19,42,99,.66));
}

.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

/* Facts section dividers */
.fact {
  border-right: 1px solid #edf2f7;
}

@media (max-width: 767.98px) {
  .fact {
    border-right: 0;
    border-bottom: 1px solid #edf2f7;
  }
}

/* Badge variants */
.badge-critical {
  background: rgba(11, 17, 135, 0.71);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .fact {
    border-right-color: #334155;
  }
  
  @media (max-width: 767.98px) {
    .fact {
      border-bottom-color: #334155;
    }
  }
}

/* -----------------------------------------------------------------------------
   17.14 Submission Page Styles
   ----------------------------------------------------------------------------- */
.page-hero .kicker {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #a5b4fc;
  font-size: .85rem;
}

.page-hero h1 {
  font-weight: 800;
  line-height: 1.1;
}

.page-hero p.lead {
  color: rgba(255,255,255,.88);
  max-width: 860px;
  margin-inline: auto;
}

.list-check .bi {
  color: var(--primary-dark, #0a1a3f);
}

/* Timeline */
.timeline {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.t-item {
  padding: 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(2,6,23,.08);
}

.t-date {
  font-weight: 800;
  color: var(--primary-dark, #0a1a3f);
}

.t-title {
  font-weight: 700;
  color: var(--text-primary, #0f172a);
}

.t-desc {
  font-size: .95rem;
  color: #64748b;
}

/* Guideline chips and cards */
.g-chip {
  display: flex;
  gap: .6rem;
  align-items: center;
  border-radius: 999px;
  font-weight: 600;
  padding: .5rem .85rem;
  background: #eef2ff;
  color: var(--primary-dark, #0a1a3f);
  border: 1px solid #c7d2fe;
}

.guideline-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 4px 16px rgba(2,6,23,.06);
}

.guideline-card h5 {
  color: #0f172a;
}

.guideline-card p,
.guideline-card li {
  color: #334155;
}

.guideline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(2,6,23,.12);
  border-color: #cbd5e1;
}

/* Template tiles */
.tpl-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 4px 16px rgba(2,6,23,.06);
}

.tpl-card .fw-semibold {
  color: #0f172a;
}

.tpl-card a {
  color: var(--primary-dark, #0a1a3f);
}

.tpl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(2,6,23,.12);
  border-color: #cbd5e1;
}

/* Checklist */
.checklist {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 16px rgba(2,6,23,.06);
}

.checklist h6 {
  color: #0f172a;
}

.checklist span {
  color: #334155;
}

.checklist .form-check {
  padding: .5rem .75rem;
  border-radius: 10px;
}

.checklist .form-check:hover {
  background: rgba(0,0,0,.03);
}

.checklist ul li + li {
  border-top: 1px dashed #cbd5e1;
}

@media (prefers-color-scheme: dark) {
  .t-item {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
  }
  
  .t-title, .t-desc {
    color: #e2e8f0;
  }
  
  .t-date {
    color: #93c5fd;
  }

  .g-chip {
    background: rgba(99,102,241,.15);
    color: #a5b4fc;
    border-color: #4338ca;
  }

  .guideline-card {
    background: #1e293b;
    border-color: #334155;
  }
  
  .guideline-card:hover {
    border-color: #475569;
    box-shadow: 0 16px 34px rgba(0,0,0,.35);
  }
  
  .guideline-card h5 {
    color: #f1f5f9;
  }
  
  .guideline-card p, .guideline-card li {
    color: #e2e8f0;
  }

  .tpl-card {
    background: #1e293b;
    border-color: #334155;
  }
  
  .tpl-card:hover {
    border-color: #475569;
    box-shadow: 0 16px 34px rgba(0,0,0,.35);
  }
  
  .tpl-card .fw-semibold {
    color: #f1f5f9;
  }

  .checklist ul li + li {
    border-color: #475569;
  }
}

/* -----------------------------------------------------------------------------
   17.15 Additional Page Styles (Registration, CameraReady, etc.)
   ----------------------------------------------------------------------------- */
.fees-table th {
  font-weight: 700;
}

.fees-table td,
.fees-table th {
  vertical-align: middle;
}

.note-callout {
  border-radius: 12px;
  padding: 1rem;
}

/* Decorative background pattern */
.pattern-square {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .08;
  background-image: linear-gradient(0deg, #1e293b 1px, transparent 1px), linear-gradient(90deg, #1e293b 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Stepper */
.stepper .step {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .75rem 0;
}

.step .num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  background: var(--primary-dark, #0a1a3f);
  box-shadow: 0 6px 16px rgba(30,58,138,.25);
}

.step .body {
  flex: 1 1 auto;
}

/* -----------------------------------------------------------------------------
   17.16 Speakers Page Styles
   ----------------------------------------------------------------------------- */
/* Speaker cards */
.speaker-card .avatar-wrap {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
  transform: translateZ(0);
}

.speaker-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}

.speaker-card:hover img {
  transform: scale(1.06);
}

.badge-topic {
  background: #eef2ff;
  color: #0a1a3f;
}

/* Back-to-top btn */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1031;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  transform: translateY(6px);
}

.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Anchor offset for smooth scroll targets */
[id] {
  scroll-margin-top: calc(84px + 24px);
}

@media (prefers-color-scheme: dark) {
  .speaker-card .avatar-wrap {
    border-color: rgba(255,255,255,.7);
  }
  
  .badge-topic {
    background: rgba(99,102,241,.15);
    color: #a5b4fc;
  }
}

/* -----------------------------------------------------------------------------
   17.17 Venue Page Styles
   ----------------------------------------------------------------------------- */
/* Gallery */
.gallery-thumb img {
  object-fit: cover;
}

.modal-dark .modal-content {
  background: #0b1220;
}

.modal-dark .btn-close {
  filter: invert(1);
}

/* Researcher reasons cards */
.reason-card {
  height: 100%;
  border-radius: 14px;
  padding: 1rem;
}

.reason-card i {
  font-size: 1.25rem;
}

/* -----------------------------------------------------------------------------
   17.18 Versions/History Page Styles
   ----------------------------------------------------------------------------- */
/* Stats */
.stat {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  border-radius: 14px;
}

.stat i {
  font-size: 1.25rem;
  color: var(--primary-dark, #0a1a3f);
}

.stat .num {
  font-weight: 800;
  font-size: 1.4rem;
}

/* Edition badges */
.badge-muted {
  background: #f1f5f9;
  color: #0f172a;
}

/* Filter pills */
.filter .btn {
  border-radius: 999px;
}

/* Timeline */
.timeline {
  position: relative;
  margin-left: .5rem;
  padding-left: 1.25rem;
}

.timeline .edition {
  position: relative;
  margin-bottom: 1.25rem;
}

.timeline .edition::before {
  content: "";
  position: absolute;
  left: -11px;
  top: .45rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-dark, #0a1a3f);
}

/* Floating back-to-top */
.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1050;
  display: none;
}

/* Edition cards */
.edition-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(2,6,23,.07);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

.edition-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(2,6,23,.12);
}

.edition-cover {
  position: relative;
}

.edition-cover .ratio > img {
  object-fit: cover;
  transition: transform .5s ease;
}

.edition-card:hover .edition-cover .ratio > img {
  transform: scale(1.05);
}

.edition-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(47, 14, 180, 0.45), rgba(0,0,0,.0) 60%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: .75rem .75rem 1rem;
}

.edition-overlay .year {
  color: #fff;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 2px 10px rgba(70, 19, 199, 0.35);
}

.edition-ctas {
  gap: .5rem;
}

@media (prefers-color-scheme: dark) {
  .badge-muted {
    background: #334155;
    color: #e2e8f0;
  }

  .stat i {
    color: #93c5fd;
  }

  .timeline .edition::before {
    background: #3b82f6;
  }
}

/* ==========================================
   Force white text in page-hero (override all)
   ========================================== */
header.page-hero *,
header.page-hero p,
header.page-hero p.lead,
header.page-hero p.mt-2,
header.page-hero p.mt-3,
header.page-hero h1,
header.page-hero h2,
header.page-hero .display-5,
header.page-hero .lead {
  color: #fff !important;
}

/* =============================================================================
   DATE CARDS (Horizontal Key Dates)
   ============================================================================= */

.date-card {
  background: var(--white, #fff);
  transition: transform .2s ease, box-shadow .2s ease;
}

.date-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(30, 64, 175, .1);
}

.date-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 64, 175, .08);
  color: var(--accent-color, #2563eb);
  font-size: 1rem;
}

.date-card-date {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-color, #0f2557);
  margin-bottom: .25rem;
}

@media (prefers-color-scheme: dark) {
  .date-card {
    background: #1e293b;
    border-color: rgba(148, 163, 184, .2) !important;
  }
  .date-card h6 { color: #f1f5f9; }
  .date-card p { color: #94a3b8; }
  .date-card-date { color: #60a5fa; }
  .date-card-icon {
    background: rgba(96, 165, 250, .12);
    color: #60a5fa;
  }
}

/* =============================================================================
   GALLERY THUMBNAILS
   ============================================================================= */

#venueGallery .gallery-thumb {
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease;
}

#venueGallery .gallery-thumb:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* =============================================================================
   FULLSCREEN LIGHTBOX OVERLAY
   ============================================================================= */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.lightbox-overlay.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
  pointer-events: none;
}

.lightbox-content img {
  pointer-events: auto;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  transition: transform .3s ease;
}

.lightbox-overlay.active .lightbox-img {
  animation: lightboxZoomIn .35s ease forwards;
}

@keyframes lightboxZoomIn {
  from { transform: scale(.85); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.lightbox-caption {
  color: #fff;
  font-size: .95rem;
  margin-top: .75rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.lightbox-counter {
  color: rgba(255,255,255,.55);
  font-size: .8rem;
  margin-top: .25rem;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  line-height: 1;
  opacity: .7;
  transition: opacity .2s, transform .2s;
}

.lightbox-close:hover {
  opacity: 1;
  transform: scale(1.15);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 10;
  opacity: .8;
  pointer-events: auto;
  transition: opacity .2s, background .2s, transform .2s;
}

.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  background: rgba(255,255,255,.2);
  transform: translateY(-50%) scale(1.1);
}

@media (max-width: 576px) {
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .lightbox-prev { left: .5rem; }
  .lightbox-next { right: .5rem; }
  .lightbox-close { top: .5rem; right: .75rem; font-size: 2rem; }
  .lightbox-img { max-width: 95vw; max-height: 70vh; }
}

/* =============================================================================
   MOBILE RESPONSIVE FIXES
   ============================================================================= */

/* -- Medium screens (tablets) -- */
@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
  }

  .hero-subtitle-accent {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
  }

  .date-card-date {
    font-size: .9rem;
  }

  .date-card h6 {
    font-size: .85rem;
  }

  .date-card-icon {
    width: 30px;
    height: 30px;
    font-size: .85rem;
  }

  #venueGallery .gallery-thumb:hover {
    transform: none;
  }

  .content-card.hover-card:hover {
    transform: none;
  }

  .date-card:hover {
    transform: none;
  }

  .page-hero {
    padding: clamp(72px, 8vw, 100px) 0 40px;
  }

  .page-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }

  .page-hero .lead {
    font-size: .95rem;
  }
}

/* -- Small screens (phones) -- */
@media (max-width: 576px) {
  .hero-section {
    padding: 1rem 0;
  }

  .hero-content {
    padding: 1rem 0;
  }

  .hero-subtitle {
    font-size: .95rem;
    margin-bottom: 1.5rem;
  }

  .hero-info-card {
    padding: 1rem;
  }

  .hero-info-card h5 {
    font-size: 1rem;
  }

  .hero-info-card .card-description {
    font-size: .8rem;
  }

  .countdown {
    max-width: 100%;
  }

  .countdown-item {
    min-width: 0;
    padding: .5rem .25rem;
  }

  .countdown-number {
    font-size: 1.25rem;
  }

  .countdown-label {
    font-size: .55rem;
  }

  .date-card {
    padding: .75rem !important;
  }

  .date-card-date {
    font-size: .82rem;
    word-break: break-word;
  }

  .date-card h6 {
    font-size: .8rem;
  }

  .date-card p {
    font-size: .72rem !important;
  }

  .date-card-icon {
    width: 26px;
    height: 26px;
    font-size: .75rem;
  }

  .section-badge {
    font-size: .65rem;
    padding: .3rem .6rem;
  }

  .section-title {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }

  .page-hero {
    padding: 64px 0 32px;
  }

  .page-hero h1 {
    font-size: clamp(1.3rem, 5.5vw, 2rem);
  }

  .page-hero .lead {
    font-size: .88rem;
  }

  /* CTA buttons on mobile */
  #submit-cta .btn-lg {
    font-size: .9rem;
    padding: .6rem 1.2rem;
  }

  /* Sticky CTA padding for pages with it */
  .sticky-cta ~ .modern-footer {
    padding-bottom: 4rem;
  }
}


/* =============================================================================
   16. DARK MODE TOGGLE
   ============================================================================= */
.dark-mode-toggle {
  background: none;
  border: 1px solid var(--gray-200);
  color: var(--text-primary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  padding: 0;
  font-size: 1rem;
  flex-shrink: 0;
}

.dark-mode-toggle:hover {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

/* Navbar no-wrap fix for mobile */
.navbar > .container { flex-wrap: nowrap; }

@media (max-width: 991.98px) {
  .navbar-brand img { height: 40px; }
  .navbar-brand { font-size: 1.3rem; gap: .35rem; }
  .navbar-toggler { flex-shrink: 0; margin-right: .5rem; }
  .dark-mode-toggle { flex-shrink: 0; margin-left: .5rem; }
}
@media (max-width: 576px) {
  .navbar-brand { font-size: 1.15rem; gap: .25rem; }
  .dark-mode-toggle { width: 32px; height: 32px; font-size: .85rem; }
}

/* =============================================================================
   17. PAGE TRANSITIONS & SCROLL ANIMATIONS
   ============================================================================= */

/* Page load fade-in */
body {
  animation: pageIn .5s ease-out both;
}

@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll-reveal handled by AOS library */

/* =============================================================================
   18. HERO COUNTDOWN BAR
   ============================================================================= */
.hero-countdown { margin-top: 1.5rem; text-align: center; }

.hero-countdown-bar {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(30,64,175,.12);
  border-radius: 14px;
  padding: .75rem 1.25rem;
  box-shadow: 0 4px 16px rgba(15,23,42,.06);
}

.hero-countdown-divider {
  width: 1px;
  height: 2.5rem;
  background: rgba(30,64,175,.15);
  flex-shrink: 0;
}

.hero-countdown-cta {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}

.hero-countdown-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .75rem;
}

.hero-countdown-grid {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hero-countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 54px;
}

.hero-countdown-number {
  font-family: var(--font-family-display);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-color);
  letter-spacing: .02em;
}

.hero-countdown-unit {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: .2rem;
}

.hero-countdown-sep {
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1;
  margin-top: -.5rem;
  opacity: .6;
}

.hero-countdown-expired {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--warning-color);
  padding: .75rem 1.5rem;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(30,64,175,.12);
  border-radius: 14px;
  display: inline-block;
}

@media (max-width: 768px) {
  .hero-countdown-bar { flex-direction: column; gap: .6rem; padding: .75rem 1rem; border-radius: 12px; }
  .hero-countdown-divider { width: 80%; height: 1px; }
  .hero-countdown-cta { flex-direction: row; gap: .4rem; }
  .hero-countdown-number { font-size: 1.5rem; }
  .hero-countdown-item { min-width: 42px; }
  .hero-countdown-sep { font-size: 1.2rem; }
}

@media (max-width: 576px) {
  .hero-countdown-bar { padding: .6rem .75rem; border-radius: 10px; }
  .hero-countdown-cta .btn { font-size: .75rem; padding: .3rem .6rem; }
  .hero-countdown-number { font-size: 1.25rem; }
  .hero-countdown-item { min-width: 36px; }
  .hero-countdown-sep { font-size: 1rem; }
  .hero-countdown-label { font-size: .7rem; }
}

/* =============================================================================
   19. HORIZONTAL TIMELINE
   ============================================================================= */
.htl {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.5rem 1rem 1rem;
  overflow-x: auto;
  gap: 1rem;
}

.htl-line {
  position: absolute;
  top: 3.65rem;
  left: 10%;
  right: 10%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
  z-index: 0;
}

.htl-step {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 130px;
}

.htl-dot {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-bottom: .75rem;
  transition: all .3s ease;
  box-shadow: 0 2px 8px rgba(30,64,175,.12);
}

.htl-step:hover .htl-dot {
  background: var(--primary-color);
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(30,64,175,.25);
}

.htl-dot-accent {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

.htl-step:hover .htl-dot-accent {
  background: var(--secondary-color);
  color: #fff;
}

.htl-label {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-primary);
  margin-bottom: .3rem;
}

.htl-date {
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .htl { flex-direction: column; align-items: stretch; padding: 1.5rem 0; gap: 0; }
  .htl-line { top: 0; bottom: 0; left: 1.35rem; right: auto; width: 3px; height: auto; }
  .htl-step { flex-direction: row; align-items: center; text-align: left; gap: 1rem; padding: .75rem 0; min-width: 0; }
  .htl-dot { flex-shrink: 0; margin-bottom: 0; }
}

/* =============================================================================
   20. COMMITTEE FILTER NAV
   ============================================================================= */
.cm-filter-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem .5rem;
  padding: 1.1rem 1rem;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 68px;
  z-index: 100;
  background: var(--bg-primary);
}

.cm-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--white);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}

.cm-filter-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: rgba(30,64,175,.04);
}

.cm-filter-btn.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
}

@media (max-width: 576px) {
  .cm-filter-nav { gap: .35rem; top: 54px; padding: .75rem .5rem; }
  .cm-filter-btn { padding: .3rem .65rem; font-size: .75rem; }
}

/* Committee sections */
.cm-section { margin-bottom: 2.5rem; }

.cm-section-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--gray-200);
}

.cm-section-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(30,64,175,.10), rgba(6,182,212,.08));
  color: var(--primary-color);
  font-size: 1rem;
  flex-shrink: 0;
}

.cm-section-title {
  font-family: var(--font-family-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--text-primary);
  margin: 0;
}

.cm-compact-list { display: flex; flex-direction: column; gap: .5rem; }

.cm-compact-item {
  padding: .85rem 1rem;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-left: 3px solid var(--secondary-color);
  border-radius: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.cm-compact-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(30,64,175,.06);
}

.cm-compact-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: .95rem;
}

.cm-compact-affil {
  color: var(--text-muted);
  font-size: .85rem;
  margin-top: .15rem;
}

.cm-pc-member {
  padding: .75rem 1rem;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 8px;
  height: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cm-pc-member:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 12px rgba(30,64,175,.06);
}

.cm-pc-name { font-weight: 600; color: var(--text-primary); font-size: .9rem; }
.cm-pc-affil { color: var(--text-muted); font-size: .8rem; margin-top: .15rem; line-height: 1.35; }

/* Committee stats bar */
.committee-stats-bar {
  background: linear-gradient(135deg, rgba(30,64,175,.06), rgba(6,182,212,.06));
  border-bottom: 1px solid rgba(30,64,175,.1);
  padding: 1.25rem 0;
}

.committee-stat { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .95rem; }
.committee-stat i { color: var(--primary-color); font-size: 1.1rem; }
.committee-stat-number { font-family: var(--font-family-display); font-weight: 800; color: var(--primary-color); font-size: 1.2rem; }
.committee-stat-label { color: var(--text-muted); }

/* =============================================================================
   21. CONTACT GIT CARDS
   ============================================================================= */
.git-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-left: 4px solid var(--primary-color);
  border-radius: 10px;
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-left-color .25s ease;
}

.git-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30,64,175,.10);
  border-left-color: var(--secondary-color);
}

.git-card-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(30,64,175,.10), rgba(6,182,212,.08));
  color: var(--primary-color);
  font-size: 1.25rem;
  transition: all .3s ease;
}

.git-card:hover .git-card-icon {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-accent));
  color: #fff;
  transform: scale(1.08);
}

.git-card-body { flex: 1; min-width: 0; }
.git-card-title { font-family: var(--font-family-display); font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; color: var(--text-primary); }
.git-card-body p { margin-bottom: 0; color: var(--text-muted); font-size: .95rem; line-height: 1.65; }
.git-card-body a { color: var(--primary-color); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.git-card-body a:hover { color: var(--primary-accent); border-bottom-color: var(--primary-accent); }

.git-promise {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, rgba(30,64,175,.06), rgba(6,182,212,.06));
  border: 1px solid rgba(30,64,175,.12);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: .93rem;
}
.git-promise i { color: var(--secondary-color); font-size: 1.15rem; }

@media (max-width: 576px) {
  .git-card { flex-direction: column; align-items: center; text-align: center; }
  .git-promise { flex-direction: column; text-align: center; }
}

/* =============================================================================
   22. SCROLL INDICATOR
   ============================================================================= */
.scroll-indicator {
  display: block;
  width: 100%;
  text-align: center;
  padding: .5rem 0 1rem;
  text-decoration: none;
  cursor: pointer;
}

.scroll-indicator i {
  display: inline-block;
  font-size: 1.75rem;
  color: var(--primary-color);
  animation: scrollBounce 2s ease-in-out infinite;
  transition: color .2s ease;
}

.scroll-indicator:hover i { color: var(--secondary-color); }

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(10px); opacity: 1; }
}

/* =============================================================================
   23. DARK MODE
   ============================================================================= */
html[data-theme="dark"] {
  --bg-primary: #0a0f1a;
  --bg-secondary: #111827;
  --bg-tertiary: #1f2937;
  --white: #111827;
  --gray-50: #0a0f1a;
  --gray-100: #111827;
  --gray-200: #1f2937;
  --gray-300: #374151;
  --gray-400: #4b5563;
  --gray-500: #6b7280;
  --gray-600: #9ca3af;
  --gray-700: #d1d5db;
  --gray-800: #e5e7eb;
  --gray-900: #f9fafb;
  --text-primary: #e5e7eb;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-light: #d1d5db;
  --light-bg: #0a0f1a;
  --light-surface: #111827;
  --light-border: rgba(0, 212, 255, 0.25);
  --glass-95: rgba(10, 15, 26, 0.95);
  --glass-98: rgba(10, 15, 26, 0.98);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.3);
  --primary-light: #3b82f6;
  --primary-color: #2563eb;
  --accent-color: #3b82f6;
  --secondary-color: #00d4ff;
  --success-color: #00ff88;
  --danger-color: #ff4444;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background-color: #0a0f1a !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .bg-light {
  background-color: #0a0f1a !important;
  color: #e5e7eb !important;
}

html[data-theme="dark"] .navbar {
  background: rgba(10, 15, 26, 0.98) !important;
  border-bottom-color: #1f2937;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .dropdown-menu {
  background: #111827;
  border-color: #1f2937;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .dropdown-item { color: #9ca3af; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item.active {
  background: rgba(0, 212, 255, 0.15);
  color: #60a5fa;
}

html[data-theme="dark"] .offcanvas.offcanvas-nav {
  background: #111827;
  border-right-color: #1f2937;
}

html[data-theme="dark"] .offcanvas-header { border-bottom-color: #1f2937; }

html[data-theme="dark"] .navbar-toggler { border-color: #60a5fa; }
html[data-theme="dark"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2360a5fa' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='m4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

html[data-theme="dark"] .dark-mode-toggle { border-color: #374151; color: #fbbf24; }

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .info-card,
html[data-theme="dark"] .feature-card {
  background: #111827 !important;
  border-color: #1f2937 !important;
}

html[data-theme="dark"] .table { color: #e5e7eb; --bs-table-bg: transparent; border-color: #1f2937; }
html[data-theme="dark"] .table thead th { background-color: #1f2937 !important; color: #e5e7eb !important; }

html[data-theme="dark"] .accordion-item { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .accordion-button { background: #111827; color: #e5e7eb; }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(0, 212, 255, 0.1); color: #60a5fa; }
html[data-theme="dark"] .accordion-body { background: #0a0f1a; color: #d1d5db; }

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select { background: #0a0f1a; color: #e5e7eb; border-color: #1f2937; }

html[data-theme="dark"] .list-group-item { background: #111827; color: #e5e7eb; border-color: #1f2937; }
html[data-theme="dark"] .modal-content { background: #111827; color: #e5e7eb; border-color: #1f2937; }

/* Dark mode: hero countdown */
html[data-theme="dark"] .hero-countdown-bar {
  background: rgba(10, 15, 26, 0.6);
  border-color: rgba(0, 212, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
html[data-theme="dark"] .hero-countdown-divider { background: rgba(0, 212, 255, 0.2); }
html[data-theme="dark"] .hero-countdown-number { color: #60a5fa; }
html[data-theme="dark"] .hero-countdown-sep { color: #22d3ee; }

/* Dark mode: timeline */
html[data-theme="dark"] .htl-line { background: linear-gradient(90deg, #3b82f6, #22d3ee); }
html[data-theme="dark"] .htl-dot { background: #111827; border-color: #60a5fa; color: #60a5fa; }
html[data-theme="dark"] .htl-step:hover .htl-dot { background: #3b82f6; color: #fff; }
html[data-theme="dark"] .htl-label { color: #e5e7eb; }
html[data-theme="dark"] .htl-date { color: #9ca3af; }

/* Dark mode: committee */
html[data-theme="dark"] .committee-stats-bar { background: rgba(0, 212, 255, 0.06); border-bottom-color: rgba(0, 212, 255, 0.15); }
html[data-theme="dark"] .cm-filter-nav { background: #0a0f1a; border-bottom-color: #1f2937; }
html[data-theme="dark"] .cm-filter-btn { background: #111827; border-color: #1f2937; color: #9ca3af; }
html[data-theme="dark"] .cm-filter-btn:hover { border-color: #3b82f6; color: #60a5fa; }
html[data-theme="dark"] .cm-filter-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
html[data-theme="dark"] .cm-section-header { border-bottom-color: #1f2937; }
html[data-theme="dark"] .cm-section-icon { background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(34, 211, 238, 0.10)); color: #60a5fa; }
html[data-theme="dark"] .cm-section-title { color: #e5e7eb; }
html[data-theme="dark"] .cm-compact-item { background: #111827; border-color: #1f2937; border-left-color: #22d3ee; }
html[data-theme="dark"] .cm-compact-name, html[data-theme="dark"] .cm-pc-name { color: #e5e7eb; }
html[data-theme="dark"] .cm-compact-affil, html[data-theme="dark"] .cm-pc-affil { color: #9ca3af; }
html[data-theme="dark"] .cm-pc-member { background: #111827; border-color: #1f2937; }
html[data-theme="dark"] .cm-pc-member:hover { border-color: #3b82f6; }

/* Dark mode: git cards */
html[data-theme="dark"] .git-card { background: #111827; border-color: #1f2937; border-left-color: #3b82f6; }
html[data-theme="dark"] .git-card:hover { box-shadow: 0 12px 32px rgba(0, 212, 255, .12); border-left-color: #22d3ee; }
html[data-theme="dark"] .git-card-icon { background: linear-gradient(135deg, rgba(0, 212, 255, .15), rgba(34, 211, 238, .10)); color: #60a5fa; }
html[data-theme="dark"] .git-card:hover .git-card-icon { background: linear-gradient(135deg, #3b82f6, #60a5fa); color: #fff; }
html[data-theme="dark"] .git-card-title { color: #e5e7eb; }
html[data-theme="dark"] .git-card-body p { color: #9ca3af; }
html[data-theme="dark"] .git-card-body a { color: #60a5fa; }
html[data-theme="dark"] .git-promise { background: rgba(0, 212, 255, .08); border-color: rgba(0, 212, 255, .15); color: #9ca3af; }

/* Dark mode: footer */
html[data-theme="dark"] .modern-footer { background: #060a14 !important; border-top-color: rgba(0, 212, 255, 0.2); }
html[data-theme="dark"] .footer-main { background: #060a14 !important; }
html[data-theme="dark"] .footer-bottom { background: #040810 !important; border-top-color: rgba(0, 212, 255, 0.15); }

/* Dark mode: page hero */
html[data-theme="dark"] .page-hero {
  background: linear-gradient(135deg, #0a0f1a 0%, #111827 55%, #0d1b2a 100%) !important;
}

/* Dark mode: hero section */
html[data-theme="dark"] .hero-banner,
html[data-theme="dark"] .hero {
  background: linear-gradient(160deg, #0a0f1a 0%, #111827 40%, #0d1b2a 70%, #0a1628 100%) !important;
}

html[data-theme="dark"] p { color: var(--text-secondary); }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-primary); }

/* =============================================================================
   24. ADDITIONAL RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
  .hero-title br { display: none; }
  .content-card { padding: 1.25rem; }
  .section-title { font-size: 1.5rem; }
}

@media (max-width: 576px) {
  .section-title { font-size: 1.3rem; }
  .content-card { padding: 1rem; }
  .btn-lg { padding: .65rem 1.25rem; font-size: .95rem; }
}

/* Touch device hover overrides */
@media (hover: none) {
  .cm-compact-item:hover,
  .cm-pc-member:hover,
  .git-card:hover,
  .info-card:hover,
  .card:hover,
  .feature-card:hover {
    transform: none;
    box-shadow: inherit;
  }
}

/* Safe area for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  .modern-footer .footer-bottom {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}


/* =============================================================================
   25. DARK HERO SECTION
   ============================================================================= */
.hero-dark {
  background: linear-gradient(160deg, #030812 0%, #060d1f 30%, #0a1a3f 60%, #0f2557 100%) !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
}

.hero-dark .hero-title,
.hero-dark h1,
.hero-dark h5,
.hero-dark .text-gradient {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  background: none;
}

.hero-dark .hero-subtitle,
.hero-dark .hero-subtitle .small,
.hero-dark p,
.hero-dark .card-description {
  color: rgba(255,255,255,.75) !important;
}

.hero-dark .text-secondary,
.hero-dark .text-muted {
  color: rgba(255,255,255,.6) !important;
}

.hero-dark .hero-subtitle-accent {
  color: #00d4ff !important;
  -webkit-text-fill-color: #00d4ff;
}

/* Glowing grid background */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  animation: gridPulse 8s ease-in-out infinite alternate;
}

@keyframes gridPulse {
  0%   { opacity: .4; }
  100% { opacity: .8; }
}

/* Animated shield SVG */
.hero-cyber-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .8;
}

/* Hero info cards — dark style */
.hero-dark .hero-info-card {
  background: rgba(15, 37, 87, .3) !important;
  border-color: rgba(0, 212, 255, .2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff !important;
  transition: all .3s ease;
}

.hero-dark .hero-info-card:hover {
  border-color: rgba(0, 212, 255, .5) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, .15), 0 8px 32px rgba(0, 0, 0, .3);
}

.hero-dark .hero-info-card .card-icon {
  background: rgba(0, 212, 255, .1) !important;
}

.hero-dark .hero-info-card h5 {
  color: #fff !important;
}

/* Dark hero countdown */
.hero-dark .countdown-item {
  background: rgba(15, 37, 87, .3);
  border: 1px solid rgba(0, 212, 255, .15);
  border-radius: 8px;
  padding: .5rem .75rem;
}

.hero-dark .countdown-number {
  color: #00d4ff !important;
}

.hero-dark .countdown-label {
  color: rgba(255,255,255,.5) !important;
}

/* Dark hero buttons */
.hero-dark .btn-primary {
  background: linear-gradient(135deg, #0f2557, #2563eb) !important;
  border: 1px solid rgba(0, 212, 255, .3) !important;
  box-shadow: 0 0 15px rgba(0, 212, 255, .2);
}

.hero-dark .btn-primary:hover {
  box-shadow: 0 0 25px rgba(0, 212, 255, .4), 0 8px 25px rgba(0, 0, 0, .3);
  border-color: rgba(0, 212, 255, .6) !important;
}

/* =============================================================================
   26. CYAN GLOW ON CARD HOVERS
   ============================================================================= */
.content-card,
.card,
.info-card,
.feature-card,
.date-card,
.hero-info-card {
  transition: all .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.content-card:hover,
.card:hover,
.info-card:hover,
.feature-card:hover,
.date-card:hover {
  border-color: rgba(0, 212, 255, .3) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, .08), 0 8px 32px rgba(15, 37, 87, .1) !important;
}

html[data-theme="dark"] .content-card:hover,
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .info-card:hover,
html[data-theme="dark"] .feature-card:hover,
html[data-theme="dark"] .date-card:hover {
  border-color: rgba(0, 212, 255, .4) !important;
  box-shadow: 0 0 25px rgba(0, 212, 255, .12), 0 8px 32px rgba(0, 0, 0, .3) !important;
}

/* =============================================================================
   27. GRADIENT SECTION TITLES
   ============================================================================= */
.section-title {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* White titles in page-hero (override gradient) */
.page-hero .section-title,
.hero-dark .section-title {
  background: none;
  -webkit-text-fill-color: #fff;
  color: #fff;
}

/* Dark mode: brighter gradient */
html[data-theme="dark"] .section-title {
  background: linear-gradient(135deg, #3b82f6 0%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================================================
   28. NAV LINK ANIMATED UNDERLINE
   ============================================================================= */
.navbar-nav .nav-link {
  position: relative;
}

/* Use ::before for underline to avoid conflict with Bootstrap ::after caret */
.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  transition: width .3s ease, left .3s ease;
  border-radius: 2px;
}

.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
  width: 80%;
  left: 10%;
}

/* =============================================================================
   29. GLOWING ICON CIRCLES
   ============================================================================= */
.card-icon,
.feature-icon,
.date-card-icon {
  transition: all .3s ease;
}

.card:hover .card-icon,
.feature-card:hover .feature-icon,
.content-card:hover .card-icon,
.date-card:hover .date-card-icon {
  box-shadow: 0 0 15px rgba(0, 212, 255, .3);
  transform: scale(1.05);
}

/* Cyber section badges */
.section-badge {
  position: relative;
  padding-left: 1.2rem;
}

.section-badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d4ff;
  animation: statusBlink 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(0, 212, 255, .6);
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* =============================================================================
   30. BUTTON SCAN-LINE HOVER + LINK GLOW
   ============================================================================= */

/* Scan-line sweep on primary buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}

.btn-primary:hover::before {
  left: 100%;
}

/* Link glow on hover */
a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
  text-shadow: 0 0 8px rgba(0, 212, 255, .3);
}

html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
  text-shadow: 0 0 10px rgba(0, 212, 255, .5);
}

/* =============================================================================
   31. RESPONSIVE OVERRIDES FOR NEW EFFECTS
   ============================================================================= */
@media (max-width: 768px) {
  .hero-grid { background-size: 40px 40px; }
  .hero-cyber-svg { opacity: .5; }
  .hero-dark .hero-info-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 576px) {
  .hero-cyber-svg { opacity: .3; }
  .hero-grid { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid,
  .hero-cyber-svg,
  .hero-cyber-svg * {
    animation: none !important;
  }
  .hero-shield-path {
    stroke-dashoffset: 0 !important;
  }
  .btn-primary::before { display: none; }
  .section-badge::before { animation: none; }
}

/* Touch devices: disable hover glow */
@media (hover: none) {
  .content-card:hover,
  .card:hover,
  .feature-card:hover,
  .date-card:hover {
    box-shadow: var(--shadow-card) !important;
    border-color: inherit !important;
  }
}


/* =============================================================================
   32. DARK MODE — Bootstrap Color Class Overrides
   ============================================================================= */

/* Text color utilities */
html[data-theme="dark"] .text-primary { color: #60a5fa !important; }
html[data-theme="dark"] .text-secondary { color: #9ca3af !important; }
html[data-theme="dark"] .text-success { color: #00ff88 !important; }
html[data-theme="dark"] .text-danger { color: #f87171 !important; }
html[data-theme="dark"] .text-info { color: #00d4ff !important; }
html[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
html[data-theme="dark"] .text-muted { color: #9ca3af !important; }
html[data-theme="dark"] .text-dark { color: #e5e7eb !important; }
html[data-theme="dark"] .text-body { color: #e5e7eb !important; }

/* Background utilities */
html[data-theme="dark"] .bg-light { background-color: #0a0f1a !important; }
html[data-theme="dark"] .bg-white { background-color: #111827 !important; }

/* Badge overrides */
html[data-theme="dark"] .badge.bg-primary { background-color: #2563eb !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-info { background-color: #0891b2 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-success { background-color: #059669 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: #d97706 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-danger { background-color: #dc2626 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-primary.bg-opacity-10 { background-color: rgba(37, 99, 235, .15) !important; color: #60a5fa !important; }

/* Button overrides */
html[data-theme="dark"] .btn-outline-primary {
  color: #60a5fa !important;
  border-color: #60a5fa !important;
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #2563eb !important;
}

html[data-theme="dark"] .btn-outline-secondary {
  color: #9ca3af !important;
  border-color: #4b5563 !important;
}
html[data-theme="dark"] .btn-outline-secondary:hover {
  background: #374151 !important;
  color: #fff !important;
}

html[data-theme="dark"] .btn-outline-light {
  color: #e5e7eb !important;
  border-color: rgba(255,255,255,.3) !important;
}
html[data-theme="dark"] .btn-outline-light:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
}

html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #1e40af, #2563eb) !important;
  border-color: rgba(0, 212, 255, .3) !important;
}
html[data-theme="dark"] .btn-primary:hover {
  box-shadow: 0 0 20px rgba(0, 212, 255, .3) !important;
}

/* Link colors */
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
  color: #60a5fa;
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
  color: #00d4ff;
}

/* Border utilities */
html[data-theme="dark"] .border-primary { border-color: rgba(0, 212, 255, .3) !important; }
html[data-theme="dark"] .border-bottom { border-color: #1f2937 !important; }
html[data-theme="dark"] .border { border-color: #1f2937 !important; }

/* Card & surface backgrounds */
html[data-theme="dark"] .card-gradient,
html[data-theme="dark"] .card.card-gradient {
  background: #111827 !important;
  border-color: #1f2937 !important;
}

/* Hero dark mode text overrides */
html[data-theme="dark"] .hero-dark .text-secondary,
html[data-theme="dark"] .hero-dark .text-muted {
  color: rgba(255,255,255,.6) !important;
}

/* Date cards */
html[data-theme="dark"] .date-card {
  background: #111827 !important;
  border-color: rgba(0, 212, 255, .15) !important;
}
html[data-theme="dark"] .date-card-date {
  color: #00d4ff !important;
}
html[data-theme="dark"] .date-card-icon {
  color: #00d4ff !important;
}

/* Section badge */
html[data-theme="dark"] .section-badge {
  color: #00d4ff !important;
}

/* Note callout */
html[data-theme="dark"] .note-callout {
  background: rgba(0, 212, 255, .06) !important;
  border-color: rgba(0, 212, 255, .15) !important;
  color: #d1d5db !important;
}

/* Alert boxes */
html[data-theme="dark"] .alert-warning {
  background: rgba(251, 191, 36, .1) !important;
  border-color: rgba(251, 191, 36, .2) !important;
  color: #fbbf24 !important;
}
html[data-theme="dark"] .alert-info {
  background: rgba(0, 212, 255, .08) !important;
  border-color: rgba(0, 212, 255, .15) !important;
  color: #00d4ff !important;
}

/* Rounded bg-opacity elements */
html[data-theme="dark"] .bg-primary.bg-opacity-10 { background-color: rgba(37, 99, 235, .15) !important; }
html[data-theme="dark"] .bg-danger.bg-opacity-10 { background-color: rgba(248, 113, 113, .15) !important; }
html[data-theme="dark"] .bg-success.bg-opacity-10 { background-color: rgba(0, 255, 136, .15) !important; }
html[data-theme="dark"] .bg-info.bg-opacity-10 { background-color: rgba(0, 212, 255, .15) !important; }

/* Strong/bold text */
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  color: #f3f4f6;
}

/* List items with icons */
html[data-theme="dark"] li strong {
  color: #e5e7eb;
}

/* Hero pill badges on page-hero */
html[data-theme="dark"] .hero-pills .pill {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: #e5e7eb;
}

/* Submission page card-gradient in dark */
html[data-theme="dark"] .card-gradient p,
html[data-theme="dark"] .card-gradient li,
html[data-theme="dark"] .card-gradient span {
  color: #d1d5db;
}
html[data-theme="dark"] .card-gradient h5,
html[data-theme="dark"] .card-gradient h6 {
  color: #e5e7eb;
}

/* Git card dark adjustments */
html[data-theme="dark"] .git-card-body a {
  color: #60a5fa;
}
html[data-theme="dark"] .git-card-body a:hover {
  color: #00d4ff;
}

/* Committee compact items in dark */
html[data-theme="dark"] .cm-compact-item {
  border-left-color: #00d4ff;
}

/* Countdown in hero dark */
html[data-theme="dark"] .hero-dark .countdown-number {
  color: #00d4ff !important;
}

/* Disabled buttons */
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .btn:disabled {
  color: #6b7280 !important;
  border-color: #374151 !important;
}


/* Dark hero countdown bar overrides */
.hero-dark .hero-countdown-bar {
  background: rgba(10, 26, 63, .5);
  border-color: rgba(0, 212, 255, .15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
}
.hero-dark .hero-countdown-divider {
  background: rgba(0, 212, 255, .2);
}
.hero-dark .hero-countdown-number {
  color: #00d4ff;
}
.hero-dark .hero-countdown-sep {
  color: #00ff88;
}
.hero-dark .hero-countdown-label {
  color: rgba(255,255,255,.5);
}
.hero-dark .hero-countdown-unit {
  color: rgba(255,255,255,.4);
}


/* =============================================================================
   33. HERO SHIELD WATERMARK
   ============================================================================= */
.hero-shield-watermark {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  height: 192px;
  opacity: 0;
  z-index: 0;
  animation: shieldWmAppear 1.5s ease-out forwards;
}
@keyframes shieldWmAppear {
  0% { opacity: 0; transform: translateY(-50%) scale(.8); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
@keyframes shieldWmPulse {
  0%, 100% { opacity: .12; }
  50% { opacity: .18; }
}
@keyframes wmCircuitFlow {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}
@keyframes wmNodePulse {
  0%, 100% { r: 2.5; opacity: .25; }
  50% { r: 4; opacity: .5; }
}
@keyframes wmLockGlow {
  0%, 100% { opacity: .15; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: .3; filter: drop-shadow(0 0 6px currentColor); }
}
@keyframes wmScanLine {
  0% { transform: translateY(-60px); opacity: 0; }
  10% { opacity: .2; }
  90% { opacity: .2; }
  100% { transform: translateY(60px); opacity: 0; }
}
.wm-shield-outline {
  opacity: .14;
  animation: shieldWmPulse 5s ease-in-out 1.5s infinite;
}
.wm-circuit {
  stroke-dasharray: 6 5;
  opacity: .12;
  animation: wmCircuitFlow 4s linear infinite;
}
.wm-node {
  opacity: .25;
  animation: wmNodePulse 3s ease-in-out infinite;
}
.wm-lock-group {
  opacity: .15;
  animation: wmLockGlow 4s ease-in-out 2s infinite;
}
.wm-scan-line {
  opacity: 0;
  animation: wmScanLine 5s ease-in-out 2s infinite;
}
.wm-fingerprint {
  opacity: .08;
  animation: shieldWmPulse 6s ease-in-out 3s infinite;
}
@media (max-width: 768px) {
  .hero-shield-watermark {
    width: 120px;
    height: 144px;
    right: 10px;
  }
}
@media (max-width: 480px) {
  .hero-shield-watermark {
    width: 90px;
    height: 108px;
    right: 5px;
  }
}

/* Ensure hero content stays above shield watermark */
.page-hero > .container,
.page-hero > .container-fluid {
  position: relative;
  z-index: 1;
}


/* =============================================================================
   34. GENERAL CHAIRS HIGHLIGHT
   ============================================================================= */

/* Accent card with gradient top border + tinted background */
.cm-general-highlight {
  position: relative;
}

/* Shimmer on lead chair cards */
.cm-chair-lead {
  position: relative;
  overflow: hidden;
}
.cm-chair-lead::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .06), transparent);
  animation: gcShimmer 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gcShimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
}

/* Glowing icon */
.cm-icon-glow {
  animation: gcIconGlow 3s ease-in-out infinite;
}
@keyframes gcIconGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(0, 212, 255, .2)); }
  50% { filter: drop-shadow(0 0 10px rgba(0, 212, 255, .5)); }
}

/* Larger names for lead chairs */
.cm-chair-lead .cm-compact-name {
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--font-family-display, 'Space Grotesk', sans-serif);
}
.cm-chair-lead .cm-compact-affil {
  font-size: .9rem;
  font-weight: 600;
}

/* Enhanced card for lead chairs */
.cm-chair-lead {
  background: linear-gradient(135deg, rgba(0, 212, 255, .08), rgba(30, 64, 175, .12));
  border: 1px solid rgba(0, 212, 255, .25);
  border-left: 3px solid #00d4ff;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  box-shadow: 0 2px 12px rgba(0, 212, 255, .08);
  transition: box-shadow .3s ease, transform .3s ease;
}
.cm-chair-lead:hover {
  box-shadow: 0 4px 20px rgba(0, 212, 255, .15);
  transform: translateY(-2px);
}

/* Dark mode adjustments */
html[data-theme="dark"] .cm-chair-lead {
  background: linear-gradient(135deg, rgba(0, 212, 255, .1), rgba(30, 64, 175, .15));
  border-color: rgba(0, 212, 255, .3);
  border-left-color: #00d4ff;
  box-shadow: 0 2px 16px rgba(0, 212, 255, .12);
}
html[data-theme="dark"] .cm-chair-lead:hover {
  box-shadow: 0 4px 24px rgba(0, 212, 255, .2);
}

/* Note box dark mode fix */
html[data-theme="dark"] .note {
  background: rgba(16, 185, 129, .1) !important;
  border-color: rgba(16, 185, 129, .3) !important;
  border-left-color: var(--mint, #10b981) !important;
  color: #cbd5e1 !important;
}

/* Chip dark mode fix */
html[data-theme="dark"] .chip {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Sponsor tiers dark mode fix */
html[data-theme="dark"] .tier {
  background: #1e293b !important;
  border-color: rgba(148, 163, 184, .2) !important;
}
html[data-theme="dark"] .tier h4,
html[data-theme="dark"] .tier h3 {
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .tier p,
html[data-theme="dark"] .tier li {
  color: #cbd5e1 !important;
}
html[data-theme="dark"] .tier .price {
  color: #fff !important;
}
html[data-theme="dark"] .tier-badge {
  color: #f1f5f9 !important;
}