/* ==========================================================================
   JobReady — Day & Night (Light / Dark) Design System
   Brand Identity: JobReady "Let's Learn" Signature Blue & Orange Duo
   - Primary Slate Navy & Royal Blue: #304974 / #4167a8
   - Signature Vibrant Coral Orange: #F05736 / #ff7455
   - Night Mode (Dark): Deep Midnight Slate #070b14 & #0b1120
   - Day Mode (Light): Crisp Diamond White #ffffff & Cloud Slate #f8fafc
   ========================================================================== */

:root,
[data-theme="dark"] {
  --theme-mode: 'dark';

  /* Brand Colors */
  --primary: #304974;
  --primary-light: #466ca8;
  --primary-glow: rgba(48, 73, 116, 0.45);
  
  --accent: #f05736;
  --accent-hover: #d94323;
  --accent-light: #ff7455;
  --accent-soft: rgba(240, 87, 54, 0.12);
  --accent-glow: rgba(240, 87, 54, 0.35);

  --coral: #f05736;
  --coral-soft: rgba(240, 87, 54, 0.12);
  --coral-hover: #d94323;

  /* Dark Canvas & Neutral Tiers */
  --bg-dark: #070b14;
  --bg-dark-secondary: #0b1120;
  --bg-dark-tertiary: #10192e;
  --bg-surface: rgba(16, 25, 46, 0.7);
  --bg-surface-elevated: rgba(22, 35, 64, 0.75);
  --bg-glass: rgba(255, 255, 255, 0.035);
  --bg-glass-hover: rgba(255, 255, 255, 0.07);
  --bg-subtle-section: rgba(11, 17, 32, 0.6);
  --bg-navbar: rgba(7, 11, 20, 0.75);
  --bg-navbar-scrolled: rgba(7, 11, 20, 0.92);
  --bg-modal: #0b1120;
  --bg-input: rgba(255, 255, 255, 0.05);

  /* Borders & Dividers */
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-glass-bright: rgba(255, 255, 255, 0.15);
  --border-accent: rgba(240, 87, 54, 0.35);
  --border-primary: rgba(48, 73, 116, 0.4);

  /* Typography Colors */
  --text-white: #ffffff;
  --text-heading: #f8fafc;
  --text-main: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* Ambient Grid & Background Glows */
  --grid-line-color: rgba(255, 255, 255, 0.02);
  --hero-aura-1: rgba(48, 73, 116, 0.45);
  --hero-aura-2: rgba(240, 87, 54, 0.15);
  --hero-gradient-text: linear-gradient(135deg, #ffffff 0%, #ff8e75 40%, #f05736 100%);
  --hero-bg-gradient: radial-gradient(circle at 50% 0%, rgba(48, 73, 116, 0.25) 0%, transparent 60%),
                      radial-gradient(circle at 85% 20%, rgba(240, 87, 54, 0.08) 0%, transparent 50%);

  /* Font Families */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Radius Hierarchy */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  /* Shadows & Depth */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px -12px rgba(0, 0, 0, 0.75);
  --shadow-accent: 0 0 35px -5px rgba(240, 87, 54, 0.45);
  --shadow-primary: 0 0 35px -5px rgba(48, 73, 116, 0.45);

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Day Mode (Light) Theme Tokens — Proper Crisp Pure White (LinkedIn Style) */
[data-theme="light"] {
  --theme-mode: 'light';

  /* Brand Colors */
  --primary: #304974;
  --primary-light: #4167a8;
  --primary-glow: rgba(48, 73, 116, 0.12);
  
  --accent: #f05736;
  --accent-hover: #d94323;
  --accent-light: #ff7455;
  --accent-soft: rgba(240, 87, 54, 0.08);
  --accent-glow: rgba(240, 87, 54, 0.20);

  --coral: #f05736;
  --coral-soft: rgba(240, 87, 54, 0.08);
  --coral-hover: #d94323;

  /* Modern Crisp Canvas & Cloud-Slate Alternating Tiers */
  --bg-dark: #ffffff;
  --bg-dark-secondary: #f8fafc;
  --bg-dark-tertiary: #f1f5f9;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-glass: #ffffff;
  --bg-glass-hover: #ffffff;
  --bg-subtle-section: #f8fafc;
  --bg-navbar: rgba(255, 255, 255, 0.95);
  --bg-navbar-scrolled: rgba(255, 255, 255, 0.98);
  --bg-modal: #ffffff;
  --bg-input: #f8fafc;

  /* Crisp Neutral Borders (LinkedIn / Linear Clean Tech Grade) */
  --border-glass: #e2e8f0;
  --border-glass-bright: #cbd5e1;
  --border-accent: rgba(240, 87, 54, 0.35);
  --border-primary: rgba(48, 73, 116, 0.20);

  /* High-Contrast Corporate-Grade Typography */
  --text-white: #0f172a;
  --text-heading: #0f172a;
  --text-main: #1e293b;
  --text-muted: #475569;
  --text-dim: #64748b;

  /* Clean Pure Ambient Background (Zero Color Smudges, Halos or Cream Overlays) */
  --grid-line-color: transparent;
  --hero-aura-1: transparent;
  --hero-aura-2: transparent;
  --hero-gradient-text: linear-gradient(135deg, #ff7455 0%, #f05736 50%, #d9381e 100%);
  --hero-bg-gradient: none;

  /* Crisp Clean Elevation Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 18px 40px rgba(0, 0, 0, 0.10);
  --shadow-accent: 0 0 20px -3px rgba(240, 87, 54, 0.22);
  --shadow-primary: 0 0 20px -3px rgba(48, 73, 116, 0.18);
}

/* ==========================================================================
   Base & High-Contrast Typography Reset
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 95px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-dark);
}

body {
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--bg-dark);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
  background-image: var(--hero-bg-gradient);
  background-attachment: fixed;
}

/* ==========================================================================
   Ambient Checkered Grid Matrix Background (Static, Dimmed Middle & Vanishing Edges)
   ========================================================================== */
.ambient-matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.matrix-grid-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M44 0H0v44' fill='none' stroke='rgba(15,23,42,0.085)' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, black 15%, rgba(0, 0, 0, 0.6) 48%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 38%, black 15%, rgba(0, 0, 0, 0.6) 48%, transparent 78%);
}

.matrix-glow-beam {
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at 50% 35%, rgba(48, 73, 116, 0.12) 0%, rgba(240, 87, 54, 0.06) 35%, transparent 65%);
  pointer-events: none;
}

/* Night Mode Checks - Dark theme crisp static vector grid */
[data-theme="dark"] .matrix-grid-pattern,
:root .matrix-grid-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M44 0H0v44' fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Day Mode Checks - Very subtle, delicate faded checks, visible in the middle and fading out at edges */
[data-theme="light"] .ambient-matrix-bg {
  display: block !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

[data-theme="light"] .matrix-grid-pattern {
  display: block !important;
  opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M44 0H0v44' fill='none' stroke='rgba(15,23,42,0.075)' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 20%, rgba(0, 0, 0, 0.5) 50%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, black 20%, rgba(0, 0, 0, 0.5) 50%, transparent 80%) !important;
}

/* Remove colored halo so canvas stays crisp white */
[data-theme="light"] .matrix-glow-beam,
[data-theme="light"] .hero-section::before {
  display: none !important;
  opacity: 0 !important;
}

[data-theme="light"] html,
[data-theme="light"] body {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* Let the ambient checks show through on the main hero canvas */
[data-theme="light"] .hero-section,
[data-theme="light"] .hero-bento-section,
[data-theme="light"] #home,
[data-theme="light"] #program,
[data-theme="light"] #reviews,
[data-theme="light"] #community,
[data-theme="light"] #about,
[data-theme="light"] #contact {
  background-color: transparent !important;
  background-image: none !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-heading);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
  color: var(--text-main);
}

/* Global High-Contrast Text Overrides (Fix for dark backgrounds) */
.text-muted,
p.text-muted,
span.text-muted,
div.text-muted,
small.text-muted,
.small.text-muted {
  color: #94a3b8 !important; /* Crisp, high-contrast light slate */
}

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

.text-primary,
h1.text-primary,
h2.text-primary,
h3.text-primary,
h4.text-primary,
h5.text-primary,
h6.text-primary {
  color: #9cb5db !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.75) !important;
}

a {
  color: var(--text-white);
  text-decoration: none;
  transition: var(--transition-fast);
}

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

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Badge & Pill Tokens
   ========================================================================== */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--transition-normal);
}

.badge-pill-accent,
.badge-pill-coral {
  background-color: rgba(240, 87, 54, 0.15);
  color: #ff856b;
  border: 1px solid rgba(240, 87, 54, 0.38);
  box-shadow: 0 0 20px -3px rgba(240, 87, 54, 0.3);
  font-weight: 750;
  letter-spacing: 0.06em;
}

.badge-pill-navy {
  background-color: rgba(48, 73, 116, 0.2);
  color: #9cb5db;
  border: 1px solid rgba(48, 73, 116, 0.4);
}

.badge-dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.badge-dot-live.green,
.badge-dot-live.orange {
  background-color: var(--accent);
  box-shadow: 0 0 10px rgba(240, 87, 54, 0.8);
  animation: livePulse 2s infinite;
}

@keyframes livePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(240, 87, 54, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(240, 87, 54, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(240, 87, 54, 0); }
}

/* ==========================================================================
   Buttons System
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1.05rem;
  border-radius: var(--radius-pill);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.85rem;
  border-radius: var(--radius-pill);
}

.btn-primary {
  background: linear-gradient(135deg, #304974 0%, #1e3152 100%);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px -4px rgba(48, 73, 116, 0.5);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #3b5a8e 0%, #253d66 100%);
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(48, 73, 116, 0.7);
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-accent,
.btn-coral {
  background: linear-gradient(135deg, #f05736 0%, #e04422 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 26px -4px rgba(240, 87, 54, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-accent:hover,
.btn-coral:hover {
  background: linear-gradient(135deg, #ff6747 0%, #eb4927 100%);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -4px rgba(240, 87, 54, 0.7), 0 0 25px rgba(240, 87, 54, 0.4);
}

.btn-outline-primary {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--text-white);
  border: 1px solid var(--border-glass-bright);
  backdrop-filter: blur(10px);
}

.btn-outline-primary:hover {
  background-color: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.btn-outline-accent {
  background-color: rgba(240, 87, 54, 0.08);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.35);
}

.btn-outline-accent:hover {
  background-color: rgba(240, 87, 54, 0.18);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.3);
}

/* ==========================================================================
   Badge Pills System (Linear / Stripe Standard)
   ========================================================================== */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
}

.badge-pill-accent,
.badge-pill-coral {
  background: rgba(240, 87, 54, 0.12);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.35);
}

[data-theme="light"] .badge-pill-accent,
[data-theme="light"] .badge-pill-coral {
  background: #ffffff;
  color: #d9381e;
  border: 1px solid rgba(240, 87, 54, 0.35);
  box-shadow: 0 2px 8px rgba(240, 87, 54, 0.08);
}

.badge-pill-navy {
  background: rgba(48, 73, 116, 0.35);
  color: #9cb5db;
  border: 1px solid rgba(48, 73, 116, 0.55);
}

[data-theme="light"] .badge-pill-navy,
[data-theme="light"] .audience-card .badge-pill-navy {
  background: rgba(48, 73, 116, 0.09) !important;
  color: #1e3a64 !important;
  border: 1px solid rgba(48, 73, 116, 0.28) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(48, 73, 116, 0.06) !important;
}

.badge-dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
  display: inline-block;
  animation: livePulse 2s infinite;
}

.badge-dot-live.orange {
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}

/* ==========================================================================
   Header & Sticky Glass Navigation
   ========================================================================== */
.top-notice-bar {
  background-color: rgba(7, 11, 20, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  z-index: 1040;
  transition: var(--transition-normal);
}

.top-notice-bar a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: var(--transition-fast);
}

.top-notice-bar a:hover {
  color: var(--accent);
}

.site-navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1030;
  background-color: rgba(7, 11, 20, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background-color 0.35s ease, padding 0.3s ease, box-shadow 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  min-height: 70px;
  padding: 11px 0;
  display: flex;
  align-items: center;
}

.site-navbar.scrolled {
  min-height: 64px;
  padding: 8px 0;
  background-color: rgba(7, 11, 20, 0.75);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.navbar-brand-logo {
  height: 38px;
  display: block;
  object-fit: contain;
  transition: height 0.3s ease;
}

.site-navbar.scrolled .navbar-brand-logo {
  height: 34px;
}

.nav-link-custom {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.72) !important;
  padding: 9px 18px !important;
  border-radius: var(--radius-pill);
  transition: var(--transition-fast);
  border: 1px solid transparent;
}

.nav-link-custom:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.07);
}

.nav-link-custom.active:not(.dropdown-toggle-custom) {
  color: #ffffff !important;
  background-color: rgba(240, 87, 54, 0.15);
  border-color: rgba(240, 87, 54, 0.25);
}

/* Dropdown toggles should never retain sticky active rings on scroll */
.dropdown-toggle-custom,
.dropdown-toggle-custom.active {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* ==========================================================================
   Interactive Glass Mega-Menu System (Freelancer / Stripe Style)
   ========================================================================== */
.dropdown-mega {
  position: static;
}

@media (min-width: 992px) {
  .site-navbar .container {
    position: relative !important;
  }

  .dropdown-mega {
    position: static !important;
  }
}

.dropdown-toggle-custom {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid transparent !important;
}

.nav-chevron-icon {
  font-size: 0.68rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  opacity: 0.8;
}

.mega-menu-panel {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 1120px;
  max-width: calc(100vw - 32px);
  background: rgba(11, 17, 32, 0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 24px 30px 20px;
  box-shadow: 0 28px 70px -14px rgba(0, 0, 0, 0.9), 0 0 40px -10px rgba(48, 73, 116, 0.45);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s ease;
  z-index: 1050;
  margin: 0;
}

/* Invisible hover bridge to prevent disappearing while moving cursor */
.mega-menu-panel::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
  pointer-events: auto;
}

.mega-menu-wide {
  width: 1120px;
  max-width: calc(100vw - 32px);
}

/* Desktop Hover & Open States (Illuminates in vibrant coral/orange when reading menu) */
@media (min-width: 992px) {
  .dropdown-mega .mega-menu-panel,
  .dropdown-mega .dropdown-menu.mega-menu-panel,
  .dropdown-mega .mega-menu-panel[data-bs-popper],
  .dropdown-mega .dropdown-menu[data-bs-popper] {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    inset: calc(100% + 6px) auto auto 50% !important;
    transform: translateX(-50%) translateY(8px) !important;
  }

  .dropdown-mega:hover .mega-menu-panel,
  .dropdown-mega.show .mega-menu-panel,
  .dropdown-mega .mega-menu-panel:hover,
  .dropdown-mega .dropdown-menu.mega-menu-panel.show,
  .dropdown-mega.show .dropdown-menu.mega-menu-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
    left: 50% !important;
    top: calc(100% + 6px) !important;
    right: auto !important;
    margin: 0 !important;
  }

  .dropdown-mega:hover .dropdown-toggle-custom,
  .dropdown-mega.show .dropdown-toggle-custom {
    color: #ff7455 !important;
    background-color: rgba(240, 87, 54, 0.14) !important;
  }

  .dropdown-mega:hover .nav-chevron-icon,
  .dropdown-mega.show .nav-chevron-icon {
    transform: rotate(180deg) !important;
    color: #ff7455 !important;
  }
}

.mega-menu-header {
  margin-bottom: 16px;
}

.mega-menu-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(240, 87, 54, 0.12);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.3);
  margin-bottom: 4px;
}

.mega-menu-tagline {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--text-muted);
  margin-bottom: 0;
  font-weight: 500;
}

.mega-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  border: 1px solid transparent;
  margin-bottom: 3px;
}

.mega-feature-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.mega-icon-box {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.05rem;
  background: rgba(48, 73, 116, 0.25);
  color: #ff7455;
  border: 1px solid rgba(48, 73, 116, 0.4);
  transition: all 0.2s ease;
}

.mega-feature-card:hover .mega-icon-box {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(240, 87, 54, 0.45);
  transform: scale(1.05);
}

.mega-card-title {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.96rem;
  color: #ffffff;
  margin-bottom: 2px;
  transition: color 0.18s ease;
}

.mega-feature-card:hover .mega-card-title {
  color: #ff7455;
}

.mega-card-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.44;
  color: #94a3b8;
  margin-bottom: 0;
}

.mega-col-divider {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 991px) {
  .mega-col-divider {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
}

.mega-col-label {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  margin-bottom: 9px;
  padding-left: 5px;
}

/* Tech Stack Spotlight Sidebar */
.mega-tech-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 15px;
}

.mega-badge-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.15;
  white-space: nowrap;
  flex-shrink: 0;
}

.mega-badge-tag.accent {
  background: rgba(240, 87, 54, 0.18);
  color: #ff7455 !important;
  border: 1px solid rgba(240, 87, 54, 0.4);
}

.mega-badge-tag.primary {
  background: rgba(48, 73, 116, 0.35);
  color: #93c5fd !important;
  border: 1px solid rgba(147, 197, 253, 0.35);
}

.mega-badge-tag.success {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7 !important;
  border: 1px solid rgba(110, 231, 183, 0.4);
}

.mega-tech-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #ffffff;
  white-space: nowrap;
}

.mega-tech-desc {
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 11px;
  line-height: 1.4;
}

.mega-tech-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.mega-tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(48, 73, 116, 0.25);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--transition-fast);
  cursor: default;
}

.mega-tech-pill:hover {
  background: rgba(240, 87, 54, 0.2);
  border-color: rgba(240, 87, 54, 0.4);
  color: #ff856b;
  transform: translateY(-1px);
}

.mega-tech-highlight {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  margin-top: auto;
}

.mega-menu-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  clear: both;
}

.mega-menu-footer span {
  font-size: 0.88rem;
}

.mega-menu-footer .btn {
  padding: 7px 15px;
  font-size: 0.85rem;
}

/* Mobile Accordion Mode for Mega-Menu */
@media (max-width: 991px) {
  .mega-menu-panel {
    position: static;
    transform: none !important;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    background: rgba(7, 11, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px 12px;
    margin-top: 8px;
    display: none;
  }

  .dropdown-mega.show .mega-menu-panel {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* Day Mode (Light Theme) Overrides for Mega-Menu */
[data-theme="light"] .mega-menu-panel {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(48, 73, 116, 0.15);
  box-shadow: 0 28px 70px -14px rgba(48, 73, 116, 0.18), 0 4px 20px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .dropdown-mega:hover .dropdown-toggle-custom,
[data-theme="light"] .dropdown-mega.show .dropdown-toggle-custom {
  color: #d9381e !important;
  background-color: rgba(240, 87, 54, 0.10) !important;
}

[data-theme="light"] .dropdown-mega:hover .nav-chevron-icon,
[data-theme="light"] .dropdown-mega.show .nav-chevron-icon {
  transform: rotate(180deg);
  color: #d9381e !important;
}

[data-theme="light"] .mega-menu-badge {
  background: #ffffff;
  color: #d9381e;
  border-color: rgba(240, 87, 54, 0.35);
}

[data-theme="light"] .mega-menu-tagline {
  color: #475569;
}

[data-theme="light"] .mega-feature-card:hover {
  background: #ffffff;
  border-color: rgba(48, 73, 116, 0.20);
}

[data-theme="light"] .mega-icon-box {
  background: #ffffff;
  color: #d9381e;
  border-color: rgba(240, 87, 54, 0.3);
}

[data-theme="light"] .mega-card-title {
  color: #1e293b;
}

[data-theme="light"] .mega-feature-card:hover .mega-card-title {
  color: #d9381e;
}

[data-theme="light"] .mega-card-desc {
  color: #475569;
}

[data-theme="light"] .mega-col-divider {
  border-right-color: rgba(48, 73, 116, 0.1);
}

[data-theme="light"] .mega-col-label {
  color: #1e293b;
}

[data-theme="light"] .mega-tech-sidebar {
  background: #f1f5f9;
  border-color: rgba(48, 73, 116, 0.12);
}

[data-theme="light"] .mega-badge-tag.accent {
  background: #fff0ec;
  color: #d9381e !important;
  border-color: rgba(240, 87, 54, 0.4);
}

[data-theme="light"] .mega-badge-tag.primary {
  background: #eff6ff;
  color: #1d4ed8 !important;
  border-color: rgba(29, 78, 216, 0.3);
}

[data-theme="light"] .mega-badge-tag.success {
  background: #ecfdf5;
  color: #047857 !important;
  border-color: rgba(4, 120, 87, 0.3);
}

[data-theme="light"] .mega-tech-title {
  color: #1e293b;
}

[data-theme="light"] .mega-tech-desc {
  color: #475569;
}

[data-theme="light"] .mega-tech-pill {
  background: #ffffff;
  color: #334155;
  border-color: rgba(48, 73, 116, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .mega-tech-pill:hover {
  background: #fff0ec;
  border-color: rgba(240, 87, 54, 0.4);
  color: #d9381e;
}

[data-theme="light"] .mega-tech-highlight {
  border-top-color: rgba(48, 73, 116, 0.1);
  color: #475569;
}

[data-theme="light"] .mega-menu-footer {
  border-top-color: rgba(48, 73, 116, 0.1);
}

[data-theme="light"] @media (max-width: 991px) {
  [data-theme="light"] .mega-menu-panel {
    background: #ffffff;
    border-color: rgba(48, 73, 116, 0.1);
  }
}

[data-theme="light"] @media (max-width: 991px) {
  [data-theme="light"] .mega-menu-panel {
    background: #ffffff;
    border-color: rgba(48, 73, 116, 0.1);
  }
}

/* ==========================================================================
   Unicorn Centered Hero Section (Clean Typographic Mastery)
   ========================================================================== */
.hero-section {
  position: relative;
  padding: 55px 0 90px;
  overflow: hidden;
  z-index: 1;
  text-align: center;
}

/* Ambient Radial Aura Beams */
.hero-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 450px;
  background: radial-gradient(ellipse at center, rgba(48, 73, 116, 0.45) 0%, rgba(240, 87, 54, 0.15) 45%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}

.hero-pill-wrapper {
  display: inline-flex;
  margin-bottom: 24px;
  animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title {
  font-size: clamp(2.8rem, 5.5vw, 4.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-heading);
  margin-bottom: 24px;
  letter-spacing: -0.035em;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.hero-gradient-text {
  background: var(--hero-gradient-text, linear-gradient(135deg, #ffffff 0%, #ff8e75 40%, #f05736 100%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-subtitle-tag {
  display: block;
  font-size: clamp(1.05rem, 2.2vw, 1.28rem);
  font-weight: 750;
  color: #ff7d60;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 36px;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.hero-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  color: var(--text-main);
  margin-bottom: 40px;
}

/* Audio Voice Capsule (Futuristic Glass Bar) */
.audio-voice-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(16, 25, 46, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass-bright);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.6), 0 0 30px -10px rgba(48, 73, 116, 0.4);
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  position: relative;
  transition: var(--transition-normal);
}

.audio-voice-card:hover {
  border-color: rgba(240, 87, 54, 0.4);
  box-shadow: 0 20px 45px -6px rgba(0, 0, 0, 0.7), 0 0 35px -8px rgba(240, 87, 54, 0.35);
}

.audio-btn-toggle {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.5);
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.audio-btn-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(240, 87, 54, 0.8);
}

.audio-wave-track {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.audio-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.775rem;
  font-weight: 600;
}

.audio-voice-card .audio-meta-row span,
.audio-voice-card #audioTimeDisplay,
.audio-voice-card .text-white-50 {
  color: #ffffff !important;
  opacity: 1 !important;
}

.audio-lang-popover span {
  color: #ffffff !important;
}

.waveform-visualizer {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  cursor: pointer;
}

.waveform-bar {
  width: 3px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.waveform-bar.active {
  background-color: var(--accent);
}

.audio-playing .waveform-bar {
  animation: wavePulse 1s ease-in-out infinite alternate;
}

.audio-playing .waveform-bar:nth-child(2n) { animation-delay: 0.2s; }
.audio-playing .waveform-bar:nth-child(3n) { animation-delay: 0.4s; }
.audio-playing .waveform-bar:nth-child(4n) { animation-delay: 0.1s; }

@keyframes wavePulse {
  0% { height: 6px; }
  100% { height: 20px; }
}

.audio-scrubber {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  margin-top: 4px;
}

.audio-scrubber-fill {
  height: 100%;
  background: linear-gradient(90deg, #304974 0%, var(--accent) 100%);
  width: 0%;
  border-radius: 4px;
  position: relative;
}

.audio-scrubber-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: #ffffff;
  border: 2px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(240, 87, 54, 0.8);
}

/* Audio Language Selection Popover */
.audio-lang-popover {
  position: absolute;
  top: -100px;
  left: 20px;
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.9), 0 0 30px rgba(48, 73, 116, 0.5);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  z-index: 100;
  width: 290px;
  animation: popoverSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-theme="light"] .audio-lang-popover {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.audio-popover-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 750;
  color: #ffffff !important;
}

.audio-lang-choice {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: 0.84rem;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(240, 87, 54, 0.5) !important;
}

.audio-lang-choice:hover {
  background: linear-gradient(135deg, #ff856b 0%, #eb4f2f 100%) !important;
  border-color: #ff856b !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(240, 87, 54, 0.6);
}

.audio-lang-choice span {
  color: #ffffff !important;
  text-shadow: none !important;
  font-weight: 750 !important;
}

@keyframes popoverSlideUp {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   Hero Interactive Bento Dashboard (Replaces Static Image)
   ========================================================================== */
.hero-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 54px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

@media (max-width: 991.98px) {
  .hero-bento-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.hero-bento-card {
  background: rgba(16, 25, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: var(--transition-normal);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  text-decoration: none !important;
  color: inherit !important;
}

.hero-bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: var(--transition-normal);
}

.hero-bento-card:hover {
  transform: translateY(-6px);
  background: rgba(22, 35, 64, 0.75);
  border-color: rgba(240, 87, 54, 0.4);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 30px -5px rgba(240, 87, 54, 0.25);
}

.hero-bento-card:hover::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.bento-icon-badge {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(240, 87, 54, 0.12);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 20px;
  transition: var(--transition-fast);
}

.hero-bento-card:hover .bento-icon-badge {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 16px rgba(240, 87, 54, 0.45) !important;
  transform: scale(1.05);
}

.bento-phase-tag {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  display: block;
}

.bento-card-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.bento-card-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.bento-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-main);
  padding-top: 14px;
  border-top: 1px solid var(--border-glass);
}

/* ==========================================================================
   Technology Mentorship Marquee (Dual-Stream Infinite Ribbon)
   ========================================================================== */
.tech-marquee-section {
  padding: 68px 0 74px;
  background: #080d1a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 100%;
  padding: 16px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  user-select: none;
  padding: 8px 0;
}

.marquee-content {
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  padding-right: 18px;
}

/* Row 1 slides Right to Left */
.marquee-row-1 {
  animation: scrollMarqueeLeft 50s linear infinite;
}

/* Row 2 slides Left to Right */
.marquee-row-2 {
  animation: scrollMarqueeRight 50s linear infinite;
}

/* Pause only the hovered row */
.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes scrollMarqueeLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollMarqueeRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.tech-pill-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(18, 28, 51, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  cursor: pointer;
  white-space: nowrap;
}

.tech-pill-card:hover {
  background: rgba(26, 40, 72, 1);
  border-color: rgba(240, 87, 54, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 20px rgba(240, 87, 54, 0.35);
  transform: translateY(-3px);
}

.tech-pill-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: rgba(240, 87, 54, 0.12);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.tech-pill-card:hover .tech-pill-icon {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 14px rgba(240, 87, 54, 0.5);
  transform: scale(1.06);
}

.tech-pill-info {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.tech-pill-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #ffffff;
  transition: var(--transition-fast);
}

.tech-pill-card:hover .tech-pill-title {
  color: #ff7455;
}

.tech-pill-sub {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ==========================================================================
   Section Layout & Standard Glass Cards
   ========================================================================== */
.section-padding {
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.section-padding-sm {
  padding: 70px 0;
  position: relative;
  z-index: 1;
}

.bg-subtle-section {
  background-color: rgba(11, 17, 32, 0.6);
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
}

.section-header {
  margin-bottom: 56px;
  text-align: center;
}

.section-title {
  font-size: clamp(2.1rem, 3.5vw, 3rem);
  font-weight: 800;
  margin-top: 14px;
  margin-bottom: 16px;
  color: var(--text-heading);
  letter-spacing: -0.03em;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ==========================================================================
   About Section Interactive Animated Career Terminal
   ========================================================================== */
.about-interactive-terminal {
  position: relative;
  background: rgba(16, 25, 46, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), 0 0 35px -5px rgba(48, 73, 116, 0.35);
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.about-interactive-terminal:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.85), 0 0 40px -5px rgba(240, 87, 54, 0.25);
}

/* Floating Badges */
.floating-hub-badge {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  pointer-events: none;
}

.floating-hub-badge.top-badge {
  top: -14px;
  right: -10px;
  animation: floatBadge 4s ease-in-out infinite;
}

.floating-hub-badge.bottom-badge {
  bottom: -14px;
  left: -10px;
  animation: floatBadgeReverse 4.5s ease-in-out infinite;
}

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

@keyframes floatBadgeReverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(7px); }
}

/* Terminal Window Header */
.terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-glass);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.terminal-dots {
  display: flex;
  gap: 6px;
}

.terminal-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.terminal-dots .dot.red { background: #ff5f56; }
.terminal-dots .dot.yellow { background: #ffbd2e; }
.terminal-dots .dot.green { background: #27c93f; }

.terminal-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.terminal-cohort {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

/* Terminal Body & Interactive Widgets */
.terminal-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.terminal-stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: #e2e8f0;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
}

.terminal-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill.fill-glow {
  height: 100%;
  background: linear-gradient(90deg, #304974 0%, #f05736 100%);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 12px rgba(240, 87, 54, 0.6);
  animation: pulseBar 3s ease-in-out infinite;
}

@keyframes pulseBar {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; filter: brightness(1.2); }
}

.stat-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Mentor Card */
.terminal-mentor-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
}

.mentor-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mentor-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mentor-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(240, 87, 54, 0.6);
}

.mentor-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border-radius: 50%;
  border: 2px solid #0b1120;
}

.mentor-info {
  flex-grow: 1;
}

.mentor-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 750;
  color: #ffffff;
  line-height: 1.2;
}

.mentor-role {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.mentor-rating {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 750;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.mentor-speech-bubble {
  background: rgba(11, 17, 32, 0.6);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  position: relative;
}

.mentor-speech-bubble .quote-icon {
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 4px;
  display: block;
}

.mentor-speech-bubble p {
  font-size: 0.80rem;
  color: #e2e8f0;
  line-height: 1.5;
  margin-bottom: 0;
  font-style: italic;
}

/* Milestone Feed */
.terminal-milestone-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}

.feed-item.completed .feed-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  flex-shrink: 0;
}

.feed-item.active-pulse .feed-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(240, 87, 54, 0.2);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  flex-shrink: 0;
  animation: livePulse 2s infinite;
}

.feed-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.feed-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
}

.feed-sub {
  font-size: 0.70rem;
  color: var(--text-muted);
}

/* Day Mode (Light Theme) Overrides for About Terminal */
[data-theme="light"] .about-interactive-terminal {
  background: #ffffff;
  border-color: rgba(48, 73, 116, 0.18);
  box-shadow: 0 20px 50px -10px rgba(48, 73, 116, 0.12), 0 0 30px -5px rgba(240, 87, 54, 0.10);
}

[data-theme="light"] .floating-hub-badge {
  background: #ffffff;
  border-color: rgba(48, 73, 116, 0.16);
  box-shadow: 0 10px 24px rgba(48, 73, 116, 0.12);
  color: #1e293b;
}

[data-theme="light"] .terminal-header {
  background: rgba(48, 73, 116, 0.04);
  border-bottom-color: rgba(48, 73, 116, 0.12);
}

[data-theme="light"] .terminal-badge {
  color: #1e293b;
}

[data-theme="light"] .terminal-cohort {
  background: rgba(48, 73, 116, 0.08);
  color: #334155;
}

[data-theme="light"] .terminal-stat-card {
  background: #f8fafc;
  border-color: rgba(48, 73, 116, 0.12);
}

[data-theme="light"] .stat-label {
  color: #1e293b;
}

[data-theme="light"] .stat-footer {
  color: #64748b;
}

[data-theme="light"] .terminal-progress-bar {
  background: rgba(48, 73, 116, 0.10);
}

[data-theme="light"] .terminal-mentor-card {
  background: #f8fafc;
  border-color: rgba(48, 73, 116, 0.14);
}

[data-theme="light"] .mentor-name {
  color: #1e293b;
}

[data-theme="light"] .mentor-role {
  color: #64748b;
}

[data-theme="light"] .mentor-rating {
  background: rgba(48, 73, 116, 0.08);
  color: #1e293b;
}

[data-theme="light"] .mentor-speech-bubble {
  background: #ffffff;
  border: 1px solid rgba(48, 73, 116, 0.10);
  border-left: 3px solid var(--accent);
}

[data-theme="light"] .mentor-speech-bubble p {
  color: #334155;
}

[data-theme="light"] .feed-item {
  background: #f8fafc;
  border-color: rgba(48, 73, 116, 0.12);
}

[data-theme="light"] .feed-title {
  color: #1e293b;
}

[data-theme="light"] .feed-sub {
  color: #64748b;
}

/* Feature Card */
.feature-card {
  background: rgba(16, 25, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  height: 100%;
  transition: var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-8px);
  background: rgba(22, 35, 64, 0.8);
  border-color: rgba(240, 87, 54, 0.4);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px -5px rgba(240, 87, 54, 0.25);
}

.feature-icon-box {
  width: 58px;
  height: 58px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 24px;
  background: rgba(240, 87, 54, 0.12);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.25);
  transition: var(--transition-fast);
}

.feature-icon-box.coral,
.feature-icon-box.teal,
.feature-icon-box.navy {
  background: rgba(240, 87, 54, 0.12);
  color: #ff7455;
  border: 1px solid rgba(240, 87, 54, 0.25);
}

/* ==========================================================================
   Interactive 3-Phase Roadmap (#program - True Sticky Parallax Track)
   ========================================================================== */
.roadmap-parallax-track {
  position: relative;
  background: var(--bg-subtle, rgba(255, 255, 255, 0.02));
}

@media (min-width: 992px) {
  .roadmap-parallax-track {
    height: 380vh;
    padding: 0 !important;
    margin: 0 !important;
  }

  .roadmap-sticky-viewport {
    position: -webkit-sticky;
    position: sticky;
    top: 76px;
    height: calc(100vh - 76px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px 0;
    overflow: hidden;
    z-index: 10;
  }

  .roadmap-centered-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 991.98px) {
  .roadmap-parallax-track {
    height: auto;
    padding: 60px 0;
  }

  .roadmap-sticky-viewport {
    position: static;
    height: auto;
    display: block;
    padding: 0;
  }
}

.roadmap-tabs-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.roadmap-tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-glass-bright);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  word-spacing: normal;
  cursor: pointer;
  transition: var(--transition-normal);
  backdrop-filter: blur(12px);
}

.roadmap-tab-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.06);
}

.roadmap-tab-btn.active {
  background: linear-gradient(135deg, #f05736 0%, #d94323 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.45);
}

.roadmap-tab-btn .badge {
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
  transition: var(--transition-fast);
}

.roadmap-tab-btn.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

.roadmap-panels-stage {
  position: relative;
  width: 100%;
}

.phase-content-panel {
  display: none;
  animation: fadeInPanel 0.3s ease-in-out forwards;
}

.phase-content-panel.active {
  display: block;
}

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

.roadmap-main-card {
  background: rgba(16, 25, 46, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-lg);
  padding: 28px 34px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
  max-width: 1020px;
  margin: 0 auto;
}

.roadmap-main-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  margin-bottom: 8px !important;
}

.roadmap-main-card p,
.roadmap-main-card p.text-muted {
  font-family: var(--font-body);
  color: #cbd5e1 !important;
  font-size: 0.94rem;
  line-height: 1.65;
  letter-spacing: normal;
  word-spacing: normal;
  margin-bottom: 14px !important;
}

.roadmap-main-card.roadmap-highlight-glow {
  animation: pulseGlow 1.2s ease-in-out;
}

.roadmap-goal-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-lg);
  padding: 22px 18px !important;
  transition: var(--transition-normal);
}

.roadmap-goal-box .display-6 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 4px !important;
  color: #ffffff !important;
}

.roadmap-goal-box p {
  font-family: var(--font-body);
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  letter-spacing: normal;
  word-spacing: normal;
  color: #94a3b8 !important;
  margin-bottom: 14px !important;
}

.roadmap-goal-box button {
  padding: 10px 18px;
  font-size: 0.90rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.roadmap-main-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #304974 0%, #f05736 100%);
}

.roadmap-curriculum-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 12px;
}

.roadmap-curriculum-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 9px;
  font-family: var(--font-body);
  font-size: 0.90rem;
  line-height: 1.58;
  letter-spacing: normal;
  word-spacing: normal;
  color: #e2e8f0 !important;
}

.roadmap-curriculum-list li strong {
  color: #ffffff !important;
  font-weight: 700;
}

.roadmap-curriculum-list i {
  color: #ff7455;
  font-size: 0.98rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.tool-tag {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--text-muted);
  margin-right: 6px;
  margin-bottom: 6px;
  transition: all var(--transition-fast);
  cursor: default;
}

.tool-tag:hover {
  background: rgba(240, 87, 54, 0.16);
  border-color: rgba(240, 87, 54, 0.5);
  color: #ff856b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(240, 87, 54, 0.25);
}

/* ==========================================================================
   Target Audience (#audience)
   ========================================================================= */
.audience-card {
  background: rgba(16, 25, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 36px 26px;
  height: 100%;
  transition: var(--transition-normal);
  text-align: center;
  position: relative;
}

.audience-card:hover {
  transform: translateY(-8px);
  background: rgba(22, 35, 64, 0.8);
  box-shadow: 0 24px 50px -10px rgba(0, 0, 0, 0.7), 0 0 30px -5px rgba(240, 87, 54, 0.25);
  border-color: rgba(240, 87, 54, 0.4);
}

.audience-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-pill);
  background: rgba(240, 87, 54, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #ff7455;
  margin: 0 auto 24px;
  border: 1px solid rgba(240, 87, 54, 0.25);
  transition: var(--transition-fast);
}

.audience-card:hover .audience-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 25px rgba(240, 87, 54, 0.6);
  transform: scale(1.08);
}

/* ==========================================================================
   Community Section - Live Interactive Mastermind Hub
   ========================================================================== */
.community-live-hub {
  position: relative;
  background: rgba(16, 25, 46, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass-bright);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.community-live-hub:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(240, 87, 54, 0.25);
}

.community-hub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-glass);
  margin-bottom: 14px;
}

.hub-live-tag {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 750;
  color: #ff7455;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hub-online-counter {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.hub-session-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
}

.hub-session-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 750;
  color: #ffffff;
  margin-bottom: 6px;
  line-height: 1.35;
}

.hub-session-desc {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 14px;
}

.hub-speakers-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hub-speaker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  color: #e2e8f0;
}

.hub-speaker-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.hub-chat-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hub-chat-bubble {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.76rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.hub-chat-bubble.mentor-reply {
  background: rgba(240, 87, 54, 0.08);
  border-color: rgba(240, 87, 54, 0.25);
  color: #ff8e75;
}

/* Day Mode (Light Theme) Overrides for Community Live Hub */
[data-theme="light"] .community-live-hub {
  background: #ffffff;
  border-color: rgba(48, 73, 116, 0.16);
  box-shadow: 0 16px 40px rgba(48, 73, 116, 0.10);
}

[data-theme="light"] .community-hub-top {
  border-bottom-color: rgba(48, 73, 116, 0.12);
}

[data-theme="light"] .hub-online-counter {
  background: rgba(48, 73, 116, 0.08);
  color: #1e293b;
}

[data-theme="light"] .hub-session-title {
  color: #1e293b;
}

[data-theme="light"] .hub-session-desc {
  color: #64748b;
}

[data-theme="light"] .hub-speaker-chip {
  background: #f8fafc;
  border-color: rgba(48, 73, 116, 0.12);
  color: #1e293b;
}

[data-theme="light"] .hub-chat-bubble {
  background: #f1f5f9;
  border-color: rgba(48, 73, 116, 0.10);
  color: #334155;
}

[data-theme="light"] .hub-chat-bubble.mentor-reply {
  background: rgba(240, 87, 54, 0.10);
  border-color: rgba(240, 87, 54, 0.25);
  color: #bf2e10;
}

[data-theme="light"] .community-stat-box {
  background: #ffffff !important;
  border-color: rgba(48, 73, 116, 0.14) !important;
  box-shadow: 0 8px 24px rgba(48, 73, 116, 0.06);
}

[data-theme="light"] .community-stat-box h6 {
  color: #1e293b !important;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-card {
  background: rgba(16, 25, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-normal);
}

.testimonial-card:hover {
  transform: translateY(-6px);
  background: rgba(22, 35, 64, 0.8);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7);
  border-color: rgba(240, 87, 54, 0.35);
}

/* ==========================================================================
   Reviews / Testimonials Infinite Ribbon Marquee (Dual-Stream Infinite Moving)
   ========================================================================== */
.reviews-marquee-section {
  padding: 84px 0 90px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.reviews-marquee-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
  width: 100%;
  padding: 14px 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}

.reviews-marquee-track {
  display: flex;
  width: max-content;
  user-select: none;
  padding: 8px 0;
}

.reviews-marquee-content {
  display: flex;
  gap: 22px;
  flex-shrink: 0;
  padding-right: 22px;
}

/* Single Continuous Moving Row */
.reviews-marquee-single-row,
.reviews-marquee-row-1 {
  animation: scrollReviewsMarqueeLeft 65s linear infinite;
}

.reviews-marquee-row-2 {
  animation: scrollReviewsMarqueeRight 60s linear infinite;
}

/* Pause when hovering over the marquee track */
.reviews-marquee-track:hover {
  animation-play-state: paused;
}

@keyframes scrollReviewsMarqueeLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollReviewsMarqueeRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.testimonial-card-horizontal {
  width: 410px;
  max-width: 410px;
  flex-shrink: 0;
  background: rgba(16, 25, 46, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
  cursor: pointer;
  white-space: normal;
}

.testimonial-card-horizontal:hover {
  transform: translateY(-6px) scale(1.015);
  background: rgba(22, 35, 64, 0.95);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 28px rgba(240, 87, 54, 0.3);
  border-color: rgba(240, 87, 54, 0.5);
}

@media (max-width: 768px) {
  .testimonial-card-horizontal {
    width: 320px;
    max-width: 320px;
    padding: 22px 18px;
  }
}

.btn-review-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-review-nav:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(240, 87, 54, 0.4);
}

/* Review Outcome Badges */
.review-outcome-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  transition: all var(--transition-fast);
}

.review-outcome-badge.accent {
  background: rgba(240, 87, 54, 0.12);
  border-color: rgba(240, 87, 54, 0.35);
  color: #ff856b;
}

.review-outcome-badge.info {
  background: rgba(2, 132, 199, 0.12);
  border-color: rgba(2, 132, 199, 0.35);
  color: #38bdf8;
}

.review-outcome-badge.pink {
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.35);
  color: #f472b6;
}

.review-outcome-badge.success {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.review-outcome-badge.purple {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.35);
  color: #c084fc;
}

.review-outcome-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.review-outcome-badge.cyan {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.35);
  color: #22d3ee;
}

.review-outcome-badge.indigo {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.35);
  color: #a5b4fc;
}

.review-verified-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}

.star-rating {
  color: #f59e0b;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.testimonial-quote {
  font-style: italic;
  color: var(--text-main);
  line-height: 1.75;
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author-avatar-initials {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(48, 73, 116, 0.35);
  color: #9cb5db;
  border: 1px solid rgba(48, 73, 116, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
}

/* ==========================================================================
   Membership / CTA Box (#membership)
   ========================================================================== */
.cta-banner-box {
  background: linear-gradient(135deg, rgba(48, 73, 116, 0.4) 0%, rgba(16, 25, 46, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(48, 73, 116, 0.3);
  position: relative;
  overflow: hidden;
}

.cta-banner-box::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 87, 54, 0.3) 0%, transparent 70%);
  pointer-events: none;
}

.cta-banner-title {
  color: #ffffff;
}

.cta-banner-desc {
  color: rgba(255, 255, 255, 0.75);
}

.cta-check-item {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.cta-slots-note {
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */
.faq-accordion-item {
  background: rgba(16, 25, 46, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glass) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 14px;
  overflow: hidden;
  transition: var(--transition-fast);
}

.faq-accordion-item:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.faq-accordion-button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-white) !important;
  padding: 20px 24px;
  background-color: transparent !important;
  box-shadow: none !important;
}

.faq-accordion-button:not(.collapsed) {
  color: #ff7455 !important;
  border-bottom: 1px solid var(--border-glass);
}

.faq-accordion-body {
  padding: 20px 24px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ==========================================================================
   Contact & Form Styles
   ========================================================================== */
.contact-card {
  background: rgba(16, 25, 46, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl);
  padding: 44px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.form-label-custom {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-white);
  margin-bottom: 8px;
}

.form-control-custom, .form-select-custom {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-white);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  outline: none;
}

.form-control-custom:focus, .form-select-custom:focus {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(240, 87, 54, 0.2);
  color: #ffffff;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: #05080f;
  color: var(--text-muted);
  padding: 80px 0 30px;
  border-top: 1px solid var(--border-glass);
}

.contact-info-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  transition: var(--transition-normal);
  color: inherit;
}

.contact-info-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-glass);
  transform: translateX(4px);
}

.contact-info-row:hover .fw-bold {
  color: #ff7455 !important;
}

.footer-contact-link {
  transition: var(--transition-fast);
  display: inline-flex;
  align-items: center;
}

.footer-contact-link:hover {
  color: #ff7455 !important;
  transform: translateX(3px);
}

.social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-right: 8px;
  transition: var(--transition-fast);
}

.social-icon-btn:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 0 15px rgba(240, 87, 54, 0.5);
}

/* ==========================================================================
   Modern Floating "Let's Connect" Multi-Channel Widget
   ========================================================================== */
.floating-connect-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 990;
  animation: floatWidgetIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes floatWidgetIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.connect-pill-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 7px 9px 7px 16px;
  box-shadow: 0 14px 35px -5px rgba(0, 0, 0, 0.55), 
              0 0 20px -3px rgba(48, 73, 116, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.connect-pill-container:hover {
  border-color: rgba(240, 87, 54, 0.35);
  box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.65), 
              0 0 30px -2px rgba(240, 87, 54, 0.25),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.connect-label-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.connect-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  position: relative;
  display: inline-block;
  box-shadow: 0 0 10px #10b981;
}

.connect-status-pulse::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  animation: pulseConnectRing 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

@keyframes pulseConnectRing {
  0% { transform: scale(0.9); opacity: 0.9; }
  70% { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.connect-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: #ffffff;
  white-space: nowrap;
}

.connect-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.12);
}

.connect-actions-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.connect-action-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.88);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.connect-action-btn:hover {
  transform: translateY(-2px) scale(1.08);
}

/* WhatsApp Specific */
.connect-btn-wa:hover {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.45);
}

/* Phone Specific */
.connect-btn-phone:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.45);
}

/* Email Specific */
.connect-btn-mail:hover {
  background: #f05736;
  border-color: #f05736;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(240, 87, 54, 0.45);
}

/* Tooltip on hover */
.connect-action-btn .connect-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(11, 17, 32, 0.95);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.18s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.connect-action-btn:hover .connect-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Light Mode Support */
[data-theme="light"] .connect-pill-container {
  background: rgba(255, 255, 255, 0.90);
  border-color: rgba(48, 73, 116, 0.14);
  box-shadow: 0 12px 30px -5px rgba(48, 73, 116, 0.18), 
              0 0 15px -2px rgba(48, 73, 116, 0.08);
}

[data-theme="light"] .connect-title {
  color: #0f172a;
}

[data-theme="light"] .connect-divider {
  background: rgba(48, 73, 116, 0.15);
}

[data-theme="light"] .connect-action-btn {
  background: rgba(48, 73, 116, 0.06);
  border-color: rgba(48, 73, 116, 0.12);
  color: #334155;
}

[data-theme="light"] .connect-action-btn .connect-tooltip {
  background: #0f172a;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.1);
}

.mobile-bottom-dock {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(7, 11, 20, 0.95);
  backdrop-filter: blur(20px);
  padding: 12px 16px;
  border-top: 1px solid var(--border-glass);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  z-index: 1020;
}

@media (max-width: 991.98px) {
  .mobile-bottom-dock {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .floating-connect-widget {
    bottom: 76px;
    right: 16px;
  }

  .connect-pill-container {
    padding: 6px 8px 6px 12px;
    gap: 8px;
  }

  .connect-title {
    font-size: 0.8125rem;
  }

  .connect-action-btn {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .floating-connect-widget {
    bottom: 74px;
    right: 12px;
  }
}

/* ==========================================================================
   Modal Custom Styling (Zero-Scroll Single-View Compact Fit)
   ========================================================================== */
.modal-custom .modal-dialog-compact {
  max-width: 520px;
  margin: 1.25rem auto;
}

#bookingModal {
  z-index: 1075 !important;
}

#loginModal {
  z-index: 1075 !important;
}

.modal-custom .modal-content {
  border: 1px solid var(--border-glass-bright);
  background-color: #0b1120;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 35px rgba(48, 73, 116, 0.3);
}

.modal-custom .modal-header {
  border-bottom: 1px solid var(--border-glass);
  padding: 16px 22px;
  background-color: rgba(16, 25, 46, 0.6);
}

.modal-custom .modal-body {
  padding: 18px 22px 20px 22px;
}

.stage-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.stage-option-card {
  border: 1.5px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition-fast);
  background: rgba(255, 255, 255, 0.03);
}

.stage-option-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
}

.stage-option-card.selected {
  border-color: var(--accent);
  background: rgba(240, 87, 54, 0.15);
  box-shadow: 0 0 15px rgba(240, 87, 54, 0.3);
}

.stage-option-card i {
  font-size: 1.1rem;
  margin-bottom: 4px;
  display: block;
  color: #9cb5db;
}

.stage-option-card.selected i {
  color: var(--accent);
}

.stage-option-card span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  display: block;
  color: #ffffff;
  white-space: nowrap;
}

/* ==========================================================================
   Robotic AI Trigger Button System
   ========================================================================== */
.btn-ai-robot-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(16, 25, 46, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(240, 87, 54, 0.45);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 0 20px rgba(240, 87, 54, 0.25);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  text-decoration: none !important;
}

.btn-ai-robot-trigger:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: var(--accent);
  background: rgba(22, 35, 64, 0.95);
  box-shadow: 0 14px 35px -4px rgba(0, 0, 0, 0.75), 0 0 30px rgba(240, 87, 54, 0.45);
}

.robot-icon-wrap {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 0 16px rgba(240, 87, 54, 0.6);
  flex-shrink: 0;
}

.robot-glow-ring {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 87, 54, 0.8);
  animation: pulseConnectRing 2s infinite;
}

.robot-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.robot-label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 750;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.robot-sub {
  font-size: 0.74rem;
  color: #94a3b8;
}

.robot-sparkle {
  color: #fbbf24;
  font-size: 0.95rem;
  margin-left: 6px;
  animation: livePulse 2.5s infinite;
}

/* Floating Connect Robot Extension */
.floating-robot-trigger {
  margin-bottom: 8px;
  display: flex;
  justify-content: flex-end;
  width: auto;
}

.floating-robot-trigger .robot-glow-ring {
  display: none !important;
}

.floating-robot-trigger .btn-ai-robot-trigger {
  width: auto !important;
  max-width: max-content !important;
  min-height: auto !important;
  margin-bottom: 0 !important;
  padding: 6px 14px;
}

/* ==========================================================================
   AI Knowledge Hub & Search Window Modal (#aiKnowledgeModal)
   ========================================================================== */
.modal-ai-hub .modal-dialog {
  max-width: 960px;
  width: 92vw;
  margin: 1.5rem auto;
}

/* Base Night Mode (Dark Background) */
.modal-ai-hub .modal-content {
  background: #0b1120;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.85), 0 0 45px rgba(240, 87, 54, 0.2);
  overflow: hidden;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.modal-ai-hub .modal-header {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 24px;
}

.modal-ai-hub .modal-title {
  color: #ffffff !important;
  font-weight: 750;
}

.modal-ai-hub .modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

.ai-hub-layout {
  display: flex;
  min-height: 500px;
  background: #0b1120;
}

/* Left Sidebar - Night Mode */
.ai-hub-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #070d18;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}

.ai-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-grow: 1;
}

/* Dedicated Ask AI Home Box Button - Refined Balanced Highlight */
.ai-home-action-wrap {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-nav-home-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(240, 87, 54, 0.28);
  background: rgba(240, 87, 54, 0.08);
  color: #ff937d;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: all var(--transition-fast);
}

.ai-nav-home-btn i.fa-sparkles {
  color: var(--accent);
  font-size: 0.90rem;
}

.ai-nav-home-btn:hover {
  background: rgba(240, 87, 54, 0.16);
  border-color: rgba(240, 87, 54, 0.45);
  color: #ffffff;
  transform: translateX(2px);
  box-shadow: 0 3px 12px rgba(240, 87, 54, 0.2);
}

.ai-nav-home-btn:hover i.fa-sparkles {
  color: #ffffff;
}

.ai-nav-home-btn.active {
  background: rgba(240, 87, 54, 0.18);
  color: #ffffff;
  border: 1px solid rgba(240, 87, 54, 0.45);
  border-left: 3px solid var(--accent) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}

.ai-nav-home-btn.active i.fa-sparkles {
  color: var(--accent);
}

.ai-home-badge {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(240, 87, 54, 0.16);
  color: #ff937d;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ai-nav-home-btn.active .ai-home-badge {
  background: rgba(240, 87, 54, 0.28);
  color: #ffffff;
}

/* Category Section Header */
.ai-nav-section-title {
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  padding: 4px 8px 6px 8px;
}

/* Standard Topic Items */
.ai-nav-item:not(.ai-nav-home-btn) {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: #94a3b8;
  font-family: var(--font-display);
  font-size: 0.80rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ai-nav-item:not(.ai-nav-home-btn) i {
  font-size: 0.90rem;
  width: 18px;
  text-align: center;
}

.ai-nav-item:not(.ai-nav-home-btn):hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  transform: translateX(3px);
}

.ai-nav-item:not(.ai-nav-home-btn).active {
  background: rgba(240, 87, 54, 0.18);
  color: #ffffff;
  border-left: 3px solid var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ai-sidebar-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-sidebar-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
}

.btn-sidebar-chat:hover {
  background: rgba(240, 87, 54, 0.12);
  border-color: rgba(240, 87, 54, 0.35);
}

.btn-sidebar-chat .sidebar-chat-title {
  color: #ffffff;
}

/* Right Main Area & Canvas - Night Mode */
.ai-hub-main-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(88vh - 75px);
  background: #0b1120;
}

.ai-hub-canvas {
  flex-grow: 1;
  padding: 28px 32px;
  overflow-y: auto;
  background: #0b1120;
}

.ai-tab-pane {
  display: none;
  animation: fadeInPane 0.25s ease forwards;
}

.ai-tab-pane.active {
  display: block;
}

/* AI Interactive Pane Badges (Lightened, high-visibility glass pills) */
.ai-pane-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  backdrop-filter: blur(10px);
}

.ai-pane-badge.blue {
  background: rgba(56, 189, 248, 0.16);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  box-shadow: 0 0 15px -3px rgba(56, 189, 248, 0.25);
}

.ai-pane-badge.green {
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  box-shadow: 0 0 15px -3px rgba(16, 185, 129, 0.25);
}

.ai-pane-badge.accent,
.ai-pane-badge.danger,
.ai-pane-badge.coral {
  background: rgba(240, 87, 54, 0.16);
  border: 1px solid rgba(240, 87, 54, 0.4);
  color: #ff856b;
  box-shadow: 0 0 15px -3px rgba(240, 87, 54, 0.25);
}

.ai-pane-badge.warning {
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  box-shadow: 0 0 15px -3px rgba(245, 158, 11, 0.25);
}

.ai-pane-badge.cyan {
  background: rgba(6, 182, 212, 0.16);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #22d3ee;
  box-shadow: 0 0 15px -3px rgba(6, 182, 212, 0.25);
}

[data-theme="light"] .ai-pane-badge.blue {
  background: rgba(2, 132, 199, 0.12);
  border-color: rgba(2, 132, 199, 0.3);
  color: #0284c7;
}

[data-theme="light"] .ai-pane-badge.green {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #059669;
}

[data-theme="light"] .ai-pane-badge.accent,
[data-theme="light"] .ai-pane-badge.danger,
[data-theme="light"] .ai-pane-badge.coral {
  background: rgba(240, 87, 54, 0.12);
  border-color: rgba(240, 87, 54, 0.3);
  color: #d94323;
}

[data-theme="light"] .ai-pane-badge.warning {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.3);
  color: #b45309;
}

[data-theme="light"] .ai-pane-badge.cyan {
  background: rgba(8, 145, 178, 0.12);
  border-color: rgba(8, 145, 178, 0.3);
  color: #0891b2;
}

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

/* Welcome Center Screen - Night Mode */
.chatgpt-welcome-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 400px;
  padding: 20px 10px;
}

.chatgpt-welcome-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(240, 87, 54, 0.2) 0%, rgba(240, 87, 54, 0.05) 100%);
  border: 1.5px solid rgba(240, 87, 54, 0.4);
  color: #ff7455;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 16px;
  box-shadow: 0 8px 25px rgba(240, 87, 54, 0.2);
}

.chatgpt-welcome-heading {
  color: #ffffff;
  font-weight: 750;
}

.chatgpt-welcome-sub {
  color: #94a3b8;
}

.chatgpt-main-search-wrap {
  width: 100%;
  max-width: 580px;
  margin: 18px 0 20px 0;
}

.chatgpt-input-container {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  padding: 8px 10px 8px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all var(--transition-fast);
}

.chatgpt-input-container:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.35);
}

.chatgpt-input-container input {
  flex: 1 1 0;
  min-width: 0 !important;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 0.90rem;
  font-family: var(--font-body);
  outline: none;
}

.chatgpt-input-container input::placeholder {
  color: #64748b;
}

.chatgpt-mic-circle,
.chatGptMicBtn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  position: relative;
  z-index: 5 !important;
}

.chatgpt-mic-circle *,
.chatGptMicBtn * {
  pointer-events: none !important;
}

.chatgpt-mic-circle:hover,
.chatGptMicBtn:hover {
  background: rgba(240, 87, 54, 0.18);
  border-color: rgba(240, 87, 54, 0.45);
  color: #ff856b;
  transform: scale(1.06);
}

.chatgpt-mic-circle.is-recording,
.chatGptMicBtn.is-recording {
  background: #ef4444 !important;
  border-color: #f87171 !important;
  color: #ffffff !important;
  animation: micRecordingPulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
}

@keyframes micRecordingPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.chatgpt-send-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.chatgpt-send-circle:hover {
  background: #ff7455;
  transform: scale(1.06);
}

.chatgpt-quick-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 580px;
}

.chatgpt-tag-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.chatgpt-tag-btn:hover {
  background: rgba(240, 87, 54, 0.18);
  border-color: var(--accent);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ChatGPT Response Message View & Thread - Night Mode */
.chatgpt-thread-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 250px;
  padding-bottom: 20px;
}

/* User Message Bubble (Right Side) - Night Mode */
.chatgpt-msg-user {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  animation: fadeInPane 0.25s ease forwards;
}

.chatgpt-user-bubble {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 18px;
  max-width: 80%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.chatgpt-user-text {
  color: #f8fafc;
  font-size: 0.90rem;
  font-weight: 500;
  line-height: 1.5;
}

.chatgpt-user-meta {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 4px;
  text-align: right;
}

/* AI Message Bubble (Left Side) - Night Mode */
.chatgpt-msg-ai {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  animation: fadeInPane 0.25s ease forwards;
}

.chatgpt-avatar-ai {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(240, 87, 54, 0.4);
}

.chatgpt-ai-bubble {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px 18px 18px 18px;
  padding: 18px 22px;
  max-width: 86%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.chatgpt-ai-body {
  color: #cbd5e1 !important;
  font-size: 0.88rem;
  line-height: 1.65;
}

.chatgpt-ai-body p {
  margin-bottom: 0.75rem;
  color: #cbd5e1 !important;
}

.chatgpt-ai-body ul {
  padding-left: 18px;
  margin-bottom: 0.75rem;
}

.chatgpt-ai-body li {
  margin-bottom: 0.35rem;
  color: #cbd5e1 !important;
}

.chatgpt-ai-body strong {
  color: #ffffff !important;
}

/* Modal Header Voice Reply Toggle Pill */
.btn-voice-reply-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #cbd5e1;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-voice-reply-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.btn-voice-reply-toggle.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.btn-voice-reply-toggle.active .voice-status-text {
  color: #34d399;
}

.btn-voice-reply-toggle:not(.active) {
  opacity: 0.65;
}

/* AI Message Bubble Speaker Action - Interactive Voice Control */
.btn-msg-speak {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
}

.btn-msg-speak:hover {
  color: #ffffff;
  background: rgba(240, 87, 54, 0.18);
  border-color: rgba(240, 87, 54, 0.4);
}

.btn-msg-speak.voice-muted {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-msg-speak.is-speaking {
  background: rgba(240, 87, 54, 0.22) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(240, 87, 54, 0.45);
  animation: speakButtonBlink 1.2s ease-in-out infinite;
}

@keyframes speakButtonBlink {
  0%, 100% {
    border-color: var(--accent);
    box-shadow: 0 0 6px rgba(240, 87, 54, 0.35);
  }
  50% {
    border-color: #ff856b;
    box-shadow: 0 0 18px rgba(240, 87, 54, 0.75);
  }
}

/* Equalizer audio wave animation inside speaking button */
.speak-equalizer {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 10px;
}

.speak-equalizer span {
  display: block;
  width: 2px;
  height: 8px;
  background: var(--accent);
  border-radius: 1px;
  animation: eqWave 0.7s ease-in-out infinite alternate;
}

.speak-equalizer span:nth-child(2) {
  animation-delay: 0.2s;
  height: 11px;
}

.speak-equalizer span:nth-child(3) {
  animation-delay: 0.4s;
  height: 6px;
}

@keyframes eqWave {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.25); }
}

/* Thread Bottom Follow-up Input */
.chatgpt-thread-input-wrap {
  position: sticky;
  bottom: 0;
  background: #0b1120;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 10px;
  z-index: 5;
}

/* Right-Side Bottom "Ask AI" Prompt Bar Dock (Night Mode) - Spacious & Minimalist */
.ai-hub-bottom-prompt-dock {
  flex-shrink: 0;
  padding: 14px 28px 22px 28px;
  background: #080e1a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: fadeInPane 0.2s ease forwards;
  z-index: 10;
}

.ai-dock-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #0f172a;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  padding: 6px 8px 6px 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  transition: all var(--transition-fast);
}

.ai-dock-input-container:focus-within {
  border-color: var(--accent);
  background: #131c31;
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.3);
}

.ai-dock-input-container input {
  flex-grow: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
}

.ai-dock-input-container input::placeholder {
  color: #64748b;
}

/* Minimalist Fine Ambient AI Shimmer Line Footer */
.ai-dock-ambient-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4px;
  opacity: 0.8;
}

.ai-ambient-shimmer-bar {
  height: 2px;
  width: 150px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(240, 87, 54, 0.65), rgba(56, 189, 248, 0.65), transparent);
  background-size: 200% 100%;
  animation: aiShimmerSlide 3.5s linear infinite;
}

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

/* Cards inside Canvas - Night Mode */
.ats-card,
.ats-subcard {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.ats-role-select,
.ats-role-input {
  background: #070d18;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 0.88rem;
}

.ats-role-select:focus,
.ats-role-input:focus {
  border-color: var(--accent);
  background: #070d18;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(240, 87, 54, 0.2);
}

.ats-upload-zone {
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.ats-upload-zone:hover,
.ats-upload-zone.dragover {
  background: rgba(240, 87, 54, 0.06);
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(240, 87, 54, 0.15);
}

.ats-file-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(240, 87, 54, 0.15);
  border: 1px solid rgba(240, 87, 54, 0.35);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.76rem;
  color: #ffffff;
}

.ats-textarea {
  background: #070d18;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
}

.ats-textarea:focus {
  border-color: var(--accent);
  background: #070d18;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(240, 87, 54, 0.2);
}

.ats-score-banner {
  background: linear-gradient(135deg, rgba(240, 87, 54, 0.12) 0%, rgba(240, 87, 54, 0.03) 100%);
  border: 1.5px solid rgba(240, 87, 54, 0.35);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}

.ats-score-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(240, 87, 54, 0.2);
  border: 3px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.3);
}

.ats-score-num {
  font-size: 1.45rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.ats-score-label {
  font-size: 0.62rem;
  color: #ff7455;
  font-weight: 700;
}

.ats-badge-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
}

.ats-badge-matched {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: #4ade80;
}

.ats-badge-missing {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.ats-bullet-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.ats-bullet-before {
  color: #94a3b8;
  font-size: 0.80rem;
  text-decoration: line-through;
  margin-bottom: 4px;
}

.ats-bullet-after {
  color: #4ade80;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.5;
}

.ats-cta-box {
  background: rgba(240, 87, 54, 0.10);
  border: 1px solid rgba(240, 87, 54, 0.30);
}

/* ==========================================================================
   All Skills & Toolchains Catalog Modal & Navbar More Pill
   ========================================================================== */
.mega-tech-pill-more {
  background: rgba(240, 87, 54, 0.12) !important;
  border: 1px dashed var(--accent) !important;
  color: #ff7455 !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mega-tech-pill-more:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
  border-style: solid !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(240, 87, 54, 0.35);
}

.modal-skills-catalog .modal-content {
  background: #0b1120;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.modal-skills-catalog .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 18px 24px;
}

.skills-modal-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(240, 87, 54, 0.15);
  border: 1px solid rgba(240, 87, 54, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.skills-catalog-pills .nav-link {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  transition: all var(--transition-fast);
}

.skills-catalog-pills .nav-link:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.skills-catalog-pills .nav-link.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(240, 87, 54, 0.3);
}

.skills-search-wrap {
  position: relative;
  min-width: 180px;
}

.skills-search-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
}

.skills-search-wrap input {
  padding-left: 28px;
  background: #070d18;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
}

.skills-search-wrap input:focus {
  background: #070d18;
  border-color: var(--accent);
  color: #ffffff;
  box-shadow: 0 0 0 2px rgba(240, 87, 54, 0.2);
}

.skills-group-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px;
  height: 100%;
}

.skills-group-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.skills-badge-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tag {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: 0.75rem;
  color: #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.skill-tag:hover {
  background: rgba(240, 87, 54, 0.15);
  border-color: rgba(240, 87, 54, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.skills-modal-cta-box {
  background: rgba(240, 87, 54, 0.10);
  border: 1px solid rgba(240, 87, 54, 0.30);
}

.ai-highlight-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.ai-highlight-box p {
  color: #cbd5e1 !important;
}

.ai-mini-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px;
  height: 100%;
}

.ai-mini-card h6 {
  color: #ffffff !important;
}

.ai-mini-card p {
  color: #94a3b8 !important;
}

.ai-mini-icon {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.ai-phase-item {
  display: flex;
  gap: 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}

.ai-phase-item h6 {
  color: #ffffff !important;
}

.ai-phase-item p {
  color: #94a3b8 !important;
}

.ai-phase-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: #ff7455;
  line-height: 1;
}

.ai-phase-details {
  flex-grow: 1;
}

.ai-answer-card,
.ai-faq-clean-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 18px;
}

.ai-answer-card h6,
.ai-faq-clean-card h6 {
  color: #ffffff !important;
}

.ai-answer-card p,
.ai-faq-clean-card p {
  color: #cbd5e1 !important;
}

.ai-faq-clean-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-hub-canvas h4 {
  color: #ffffff !important;
}

/* ==========================================================================
   DAY MODE (White Background) OVERRIDES for AI Hub (#aiKnowledgeModal)
   ========================================================================== */
[data-theme="light"] .modal-ai-hub .modal-content {
  background: #ffffff !important;
  border-color: rgba(48, 73, 116, 0.18) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22) !important;
}

[data-theme="light"] .modal-ai-hub .modal-header {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .modal-ai-hub .modal-title {
  color: #0f172a !important;
}

[data-theme="light"] .modal-ai-hub .modal-header .btn-close {
  filter: none !important;
  opacity: 0.7 !important;
}

[data-theme="light"] .ai-hub-layout {
  background: #ffffff !important;
}

[data-theme="light"] .ai-hub-sidebar {
  background: #f8fafc !important;
  border-right-color: #e2e8f0 !important;
}

[data-theme="light"] .ai-home-action-wrap {
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .ai-nav-home-btn {
  background: rgba(240, 87, 54, 0.06) !important;
  border-color: rgba(240, 87, 54, 0.24) !important;
  color: #c23315 !important;
  box-shadow: 0 1px 4px rgba(240, 87, 54, 0.06) !important;
}

[data-theme="light"] .ai-nav-home-btn i.fa-sparkles {
  color: #d94323 !important;
}

[data-theme="light"] .ai-nav-home-btn:hover {
  background: rgba(240, 87, 54, 0.12) !important;
  border-color: rgba(240, 87, 54, 0.4) !important;
  color: #a82006 !important;
}

[data-theme="light"] .ai-nav-home-btn.active {
  background: rgba(240, 87, 54, 0.12) !important;
  color: #a82006 !important;
  border: 1px solid rgba(240, 87, 54, 0.3) !important;
  border-left: 3px solid var(--accent) !important;
  box-shadow: 0 2px 8px rgba(240, 87, 54, 0.08) !important;
}

[data-theme="light"] .ai-nav-home-btn.active i.fa-sparkles {
  color: #d94323 !important;
}

[data-theme="light"] .ai-home-badge {
  background: rgba(240, 87, 54, 0.1) !important;
  color: #c23315 !important;
}

[data-theme="light"] .ai-nav-home-btn.active .ai-home-badge {
  background: rgba(240, 87, 54, 0.2) !important;
  color: #a82006 !important;
}

[data-theme="light"] .ai-nav-section-title {
  color: #64748b !important;
}

[data-theme="light"] .ai-nav-item:not(.ai-nav-home-btn) {
  color: #475569 !important;
}

[data-theme="light"] .ai-nav-item:not(.ai-nav-home-btn):hover {
  background: rgba(48, 73, 116, 0.06) !important;
  color: #0f172a !important;
}

[data-theme="light"] .ai-nav-item:not(.ai-nav-home-btn).active {
  background: rgba(240, 87, 54, 0.12) !important;
  color: #bf2e10 !important;
  border-left-color: var(--accent) !important;
  box-shadow: 0 2px 8px rgba(240, 87, 54, 0.08) !important;
}

[data-theme="light"] .ai-sidebar-footer {
  border-top-color: #e2e8f0 !important;
}

[data-theme="light"] .btn-sidebar-chat {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .btn-sidebar-chat:hover {
  background: rgba(240, 87, 54, 0.08) !important;
  border-color: rgba(240, 87, 54, 0.3) !important;
}

[data-theme="light"] .btn-sidebar-chat .sidebar-chat-title {
  color: #0f172a !important;
}

[data-theme="light"] .ai-hub-main-area,
[data-theme="light"] .ai-hub-canvas {
  background: #ffffff !important;
}

[data-theme="light"] .chatgpt-welcome-heading {
  color: #0f172a !important;
}

[data-theme="light"] .chatgpt-welcome-sub {
  color: #64748b !important;
}

[data-theme="light"] .chatgpt-input-container {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
}

[data-theme="light"] .chatgpt-input-container:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(240, 87, 54, 0.18) !important;
}

[data-theme="light"] .chatgpt-input-container input {
  color: #0f172a !important;
}

[data-theme="light"] .chatgpt-input-container input::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .chatgpt-mic-circle {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .chatgpt-mic-circle:hover {
  background: rgba(240, 87, 54, 0.1) !important;
  border-color: rgba(240, 87, 54, 0.35) !important;
  color: var(--accent) !important;
}

[data-theme="light"] .btn-voice-reply-toggle {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .btn-voice-reply-toggle:hover {
  background: rgba(48, 73, 116, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-voice-reply-toggle.active {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
}

[data-theme="light"] .btn-msg-speak {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

[data-theme="light"] .btn-msg-speak:hover {
  background: rgba(240, 87, 54, 0.1) !important;
  border-color: rgba(240, 87, 54, 0.35) !important;
  color: var(--accent) !important;
}

[data-theme="light"] .btn-msg-speak.is-speaking {
  background: rgba(240, 87, 54, 0.15) !important;
  border-color: var(--accent) !important;
  color: #bf2e10 !important;
}

[data-theme="light"] .chatgpt-tag-btn {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .chatgpt-tag-btn:hover {
  background: rgba(240, 87, 54, 0.10) !important;
  border-color: var(--accent) !important;
  color: #bf2e10 !important;
}

[data-theme="light"] .chatgpt-user-bubble {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .chatgpt-user-text {
  color: #0f172a !important;
}

[data-theme="light"] .chatgpt-ai-bubble {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .chatgpt-ai-body,
[data-theme="light"] .chatgpt-ai-body p,
[data-theme="light"] .chatgpt-ai-body li {
  color: #334155 !important;
}

[data-theme="light"] .chatgpt-ai-body strong {
  color: #0f172a !important;
}

[data-theme="light"] .chatgpt-thread-input-wrap {
  background: #ffffff !important;
  border-top-color: #e2e8f0 !important;
}

/* Light Theme overrides for Right-Side Bottom Ask AI Dock */
[data-theme="light"] .ai-hub-bottom-prompt-dock {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
  box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .ai-dock-input-container {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .ai-dock-input-container:focus-within {
  background: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px rgba(240, 87, 54, 0.2) !important;
}

[data-theme="light"] .ai-dock-input-container input {
  color: #0f172a !important;
}

[data-theme="light"] .ai-dock-input-container input::placeholder {
  color: #94a3b8 !important;
}

[data-theme="light"] .ai-ambient-shimmer-bar {
  background: linear-gradient(90deg, transparent, rgba(240, 87, 54, 0.45), rgba(2, 132, 199, 0.45), transparent) !important;
  background-size: 200% 100% !important;
}

[data-theme="light"] .ats-card,
[data-theme="light"] .ats-subcard {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .ats-role-select,
[data-theme="light"] .ats-role-input,
[data-theme="light"] .ats-textarea {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .ats-upload-zone {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .ats-upload-zone:hover,
[data-theme="light"] .ats-upload-zone.dragover {
  background: #fff5f3 !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] .ats-file-badge {
  background: #fff1ee !important;
  border-color: rgba(240, 87, 54, 0.3) !important;
  color: #0f172a !important;
}

[data-theme="light"] .ats-score-banner {
  background: #fff5f3 !important;
  border-color: rgba(240, 87, 54, 0.35) !important;
}

[data-theme="light"] .ats-score-num {
  color: #0f172a !important;
}

[data-theme="light"] .ats-bullet-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .ats-bullet-before {
  color: #64748b !important;
}

[data-theme="light"] .ats-bullet-after {
  color: #15803d !important;
}

[data-theme="light"] .ats-badge-matched {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}

[data-theme="light"] .ats-badge-missing {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}

[data-theme="light"] .ats-cta-box {
  background: #fff1ee !important;
  border-color: rgba(240, 87, 54, 0.25) !important;
}

[data-theme="light"] .mega-tech-pill-more {
  background: #fff1ee !important;
  border-color: var(--accent) !important;
  color: #bf2e10 !important;
}

[data-theme="light"] .mega-tech-pill-more:hover {
  background: var(--accent) !important;
  color: #ffffff !important;
}

[data-theme="light"] .modal-skills-catalog .modal-content {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .modal-skills-catalog .modal-header {
  border-bottom-color: #e2e8f0 !important;
}

[data-theme="light"] .skills-catalog-pills .nav-link {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

[data-theme="light"] .skills-catalog-pills .nav-link.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

[data-theme="light"] .skills-search-wrap input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .skills-group-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .skills-group-title {
  color: #0f172a !important;
}

[data-theme="light"] .skill-tag {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

[data-theme="light"] .skill-tag:hover {
  background: #fff1ee !important;
  border-color: var(--accent) !important;
  color: #bf2e10 !important;
}

[data-theme="light"] .skills-modal-cta-box {
  background: #fff1ee !important;
  border-color: rgba(240, 87, 54, 0.25) !important;
}

[data-theme="light"] .testimonial-card-horizontal {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] .testimonial-card-horizontal:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 12px 30px rgba(240, 87, 54, 0.12) !important;
}

[data-theme="light"] .btn-review-nav {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .btn-review-nav:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

[data-theme="light"] .reviews-horizontal-track::-webkit-scrollbar-track {
  background: #e2e8f0 !important;
}

[data-theme="light"] .reviews-horizontal-track::-webkit-scrollbar-thumb {
  background: rgba(240, 87, 54, 0.5) !important;
}

[data-theme="light"] .review-outcome-badge {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .review-outcome-badge.accent {
  background: #fff1ee !important;
  border-color: rgba(240, 87, 54, 0.3) !important;
  color: #bf2e10 !important;
}

[data-theme="light"] .review-outcome-badge.info {
  background: #f0f9ff !important;
  border-color: rgba(2, 132, 199, 0.3) !important;
  color: #0284c7 !important;
}

[data-theme="light"] .review-outcome-badge.pink {
  background: #fdf2f8 !important;
  border-color: rgba(236, 72, 153, 0.3) !important;
  color: #db2777 !important;
}

[data-theme="light"] .review-outcome-badge.success {
  background: #ecfdf5 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
  color: #059669 !important;
}

[data-theme="light"] .review-outcome-badge.purple {
  background: #faf5ff !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: #7c3aed !important;
}

[data-theme="light"] .review-outcome-badge.warning {
  background: #fffbeb !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #d97706 !important;
}

[data-theme="light"] .review-outcome-badge.cyan {
  background: #ecfeff !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
  color: #0891b2 !important;
}

[data-theme="light"] .review-outcome-badge.indigo {
  background: #eef2ff !important;
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #4f46e5 !important;
}

/* Floating "Let's Connect" Multi-Channel Widget in Light Mode */
[data-theme="light"] .connect-pill-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 14px 35px -5px rgba(15, 23, 42, 0.12), 
              0 0 20px -3px rgba(48, 73, 116, 0.08) !important;
}

[data-theme="light"] .connect-pill-container:hover {
  border-color: rgba(240, 87, 54, 0.4) !important;
  box-shadow: 0 18px 45px -5px rgba(15, 23, 42, 0.18), 
              0 0 30px -2px rgba(240, 87, 54, 0.2) !important;
}

[data-theme="light"] .connect-title {
  color: #0f172a !important;
}

[data-theme="light"] .connect-divider {
  background: #cbd5e1 !important;
}

[data-theme="light"] .connect-action-btn {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

/* WhatsApp Hover -> Green */
[data-theme="light"] .connect-btn-wa:hover {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.45) !important;
}

/* Call Hover -> Blue */
[data-theme="light"] .connect-btn-phone:hover {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.45) !important;
}

/* Email Hover -> Shade of Orange */
[data-theme="light"] .connect-btn-mail:hover {
  background: #f05736 !important;
  border-color: #f05736 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(240, 87, 54, 0.45) !important;
}

[data-theme="light"] .connect-action-btn .connect-tooltip {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2) !important;
}

/* Contact Info Rows in #contact section */
[data-theme="light"] .contact-info-row:hover {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Roadmap Tool Tags in Light Mode */
[data-theme="light"] .tool-tag {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .tool-tag:hover {
  background: #fff1ee !important;
  border-color: var(--accent) !important;
  color: #bf2e10 !important;
  box-shadow: 0 4px 12px rgba(240, 87, 54, 0.2) !important;
}

[data-theme="light"] .ai-highlight-box,
[data-theme="light"] .ai-mini-card,
[data-theme="light"] .ai-phase-item,
[data-theme="light"] .ai-answer-card,
[data-theme="light"] .ai-faq-clean-card {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

[data-theme="light"] .ai-highlight-box p,
[data-theme="light"] .ai-mini-card p,
[data-theme="light"] .ai-phase-item p,
[data-theme="light"] .ai-answer-card p,
[data-theme="light"] .ai-faq-clean-card p {
  color: #475569 !important;
}

[data-theme="light"] .ai-mini-card h6,
[data-theme="light"] .ai-phase-item h6,
[data-theme="light"] .ai-answer-card h6,
[data-theme="light"] .ai-faq-clean-card h6,
[data-theme="light"] .ai-hub-canvas h4 {
  color: #0f172a !important;
}

/* Support & Ticketing Theme-Adaptive Form Elements */
.jr-ticket-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f8fafc !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}
.jr-ticket-input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #f05736 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(240, 87, 54, 0.2) !important;
}
.jr-ticket-label {
  color: #94a3b8;
}
.jr-ticket-title {
  color: #ffffff;
}
.jr-ticket-desc {
  color: #cbd5e1;
}
.jr-ticket-routing-hint {
  color: #94a3b8;
}

[data-theme="light"] .jr-ticket-input,
[data-bs-theme="light"] .jr-ticket-input {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .jr-ticket-input:focus,
[data-bs-theme="light"] .jr-ticket-input:focus {
  background: #ffffff !important;
  border-color: #f05736 !important;
  color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(240, 87, 54, 0.15) !important;
}
[data-theme="light"] .jr-ticket-input::placeholder,
[data-bs-theme="light"] .jr-ticket-input::placeholder {
  color: #94a3b8 !important;
}
[data-theme="light"] .jr-ticket-input option,
[data-bs-theme="light"] .jr-ticket-input option {
  background: #ffffff !important;
  color: #0f172a !important;
}
[data-theme="dark"] .jr-ticket-input option,
[data-bs-theme="dark"] .jr-ticket-input option {
  background: #1e293b !important;
  color: #f8fafc !important;
}
[data-theme="light"] .jr-ticket-input[readonly],
[data-bs-theme="light"] .jr-ticket-input[readonly] {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
[data-theme="light"] .jr-ticket-label,
[data-bs-theme="light"] .jr-ticket-label {
  color: #334155 !important;
}
[data-theme="light"] .jr-ticket-title,
[data-bs-theme="light"] .jr-ticket-title {
  color: #0f172a !important;
}
[data-theme="light"] .jr-ticket-desc,
[data-bs-theme="light"] .jr-ticket-desc {
  color: #475569 !important;
}
[data-theme="light"] .jr-ticket-routing-hint,
[data-bs-theme="light"] .jr-ticket-routing-hint {
  color: #64748b !important;
}

/* ==========================================================================
   AI Knowledge Hub: Clean ChatGPT Mobile & Dropdown Architecture
   ========================================================================== */
.ai-topics-dropdown-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  border-radius: var(--radius-pill, 9999px);
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition-fast);
}

.ai-topics-dropdown-btn:hover,
.ai-topics-dropdown-btn:focus,
.ai-topics-dropdown-btn[aria-expanded="true"] {
  background: rgba(240, 87, 54, 0.2);
  border-color: rgba(240, 87, 54, 0.45);
  color: #ffffff;
}

.ai-topics-dropdown-menu {
  background: #0b1120 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75) !important;
  min-width: 230px !important;
}

.ai-topics-dropdown-menu .dropdown-item {
  color: #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 550;
  transition: all 0.15s ease;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}

.ai-topics-dropdown-menu .dropdown-item:hover {
  background: rgba(240, 87, 54, 0.15);
  color: #ffffff;
}

.ai-topics-dropdown-menu .dropdown-item.active {
  background: rgba(240, 87, 54, 0.25);
  color: #ff937d;
  font-weight: 700;
}

.ai-header-wa-btn {
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
  transition: all var(--transition-fast);
}

.ai-header-wa-btn:hover {
  background: rgba(37, 211, 102, 0.25) !important;
  border-color: #25d366 !important;
  transform: scale(1.05);
}

[data-theme="light"] .ai-topics-dropdown-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.14);
  color: #0f172a;
}

[data-theme="light"] .ai-topics-dropdown-menu {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .ai-topics-dropdown-menu .dropdown-item {
  color: #334155;
}

[data-theme="light"] .ai-topics-dropdown-menu .dropdown-item:hover {
  background: rgba(240, 87, 54, 0.08);
  color: #d94323;
}

[data-theme="light"] .ai-topics-dropdown-menu .dropdown-item.active {
  background: rgba(240, 87, 54, 0.14);
  color: #d94323;
}

@media (max-width: 768px) {
  /* 1. Symmetrically Centered Popup Modal (Not full screen) */
  .modal-ai-hub.modal {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .modal-ai-hub .modal-dialog {
    width: calc(100% - 24px) !important;
    max-width: 410px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100% - 24px) !important;
    transform: none !important;
  }

  .modal-ai-hub .modal-content {
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    height: 570px !important;
    max-height: 82vh !important;
    min-height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85) !important;
    overflow: hidden !important;
  }

  .modal-ai-hub .modal-header {
    padding: 10px 14px !important;
    flex-shrink: 0 !important;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .modal-ai-hub .modal-title {
    font-size: 0.86rem !important;
    white-space: nowrap !important;
  }

  .ai-topics-dropdown-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
  }

  .btn-voice-reply-toggle {
    padding: 3px 8px !important;
    font-size: 0.70rem !important;
    gap: 4px !important;
  }

  .ai-header-wa-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
  }

  .ai-header-wa-btn i {
    font-size: 1.05rem !important;
  }

  .modal-ai-hub .modal-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 2. Hide Desktop Sidebar on Mobile */
  .ai-hub-sidebar {
    display: none !important;
  }

  .ai-hub-layout {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ai-hub-main-area {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .ai-hub-canvas {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px 14px 6px 14px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 3. Roomy ChatGPT Welcome with Content Positioned Near Search Bar */
  #pane-welcome:not(.active) {
    display: none !important;
  }

  #pane-welcome.active {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  #pane-chat-response:not(.active) {
    display: none !important;
  }

  #pane-chat-response.active {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
  }

  #pane-chat-response .chatgpt-thread-container {
    flex: 1 1 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
    padding: 6px 4px 12px 4px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    scroll-behavior: smooth !important;
  }

  #pane-chat-response .chatgpt-thread-input-wrap {
    flex-shrink: 0 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #0b1120 !important;
    padding: 6px 0 2px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 10 !important;
  }

  [data-theme="light"] #pane-chat-response .chatgpt-thread-input-wrap {
    background: #ffffff !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
  }

  .chatgpt-welcome-center {
    min-height: 0 !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 18px 4px 6px 4px !important;
    gap: 14px !important;
  }

  .chatgpt-welcome-header-wrap {
    margin-top: auto !important;
    margin-bottom: 4px !important;
  }

  .chatgpt-welcome-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.45rem !important;
    margin: 0 auto 10px auto !important;
  }

  .chatgpt-welcome-heading {
    font-size: 1.20rem !important;
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
  }

  .chatgpt-welcome-sub {
    font-size: 0.82rem !important;
    margin-bottom: 10px !important;
  }

  .chatgpt-quick-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
    margin: 0 0 14px 0 !important;
  }

  .chatgpt-tag-btn {
    padding: 6px 13px !important;
    font-size: 0.78rem !important;
    border-radius: 9999px !important;
  }

  .chatgpt-main-search-wrap {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 4. Search Bar Container: Send button perfectly inside the box */
  .chatgpt-input-container {
    padding: 6px 8px 6px 16px !important;
    border-radius: 9999px !important;
    gap: 8px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .chatgpt-input-container input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 0.86rem !important;
  }

  .chatgpt-mic-circle,
  .chatGptMicBtn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.84rem !important;
    flex-shrink: 0 !important;
  }

  .chatgpt-send-circle {
    width: 34px !important;
    height: 34px !important;
    font-size: 0.88rem !important;
    margin-right: 1px !important;
    flex-shrink: 0 !important;
  }

  .ai-hub-bottom-prompt-dock {
    padding: 8px 12px !important;
    flex-shrink: 0 !important;
  }

  .chatgpt-thread-container {
    padding: 8px 4px 50px 4px !important;
  }

  /* 5. Hide Install Banner & Bottom Dock when modal is open */
  body.modal-open .pwa-install-banner,
  body.modal-open .mobile-bottom-dock,
  body.modal-open .floating-connect-widget,
  body.modal-open .floating-robot-trigger {
    display: none !important;
  }
}

/* Animations */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Day & Night Mode Toggle Switch Pill
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 62px;
  height: 32px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-elevated);
  border: 1.5px solid var(--border-glass-bright);
  cursor: pointer;
  outline: none;
  transition: all var(--transition-normal);
  user-select: none;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}

.theme-toggle-btn .theme-icon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  z-index: 2;
  transition: all var(--transition-fast);
}

.theme-toggle-btn .sun-icon {
  color: #f59e0b;
}

.theme-toggle-btn .moon-icon {
  color: #94a3b8;
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
  z-index: 1;
}

/* Night / Dark Mode Switcher State */
[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(29px);
  background: linear-gradient(135deg, #304974, #466ca8);
  box-shadow: 0 2px 8px rgba(48, 73, 116, 0.6);
}

[data-theme="dark"] .theme-toggle-btn .sun-icon {
  color: #64748b;
  opacity: 0.7;
}

[data-theme="dark"] .theme-toggle-btn .moon-icon {
  color: #ffffff;
  opacity: 1;
}

/* Day / Light Mode Switcher State */
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(0);
  background: linear-gradient(135deg, #f59e0b, #f05736);
  box-shadow: 0 2px 8px rgba(240, 87, 54, 0.4);
}

[data-theme="light"] .theme-toggle-btn .sun-icon {
  color: #ffffff;
  opacity: 1;
}

[data-theme="light"] .theme-toggle-btn .moon-icon {
  color: #94a3b8;
  opacity: 0.7;
}

.theme-toggle-btn-mobile {
  width: 56px;
  height: 30px;
}

.theme-toggle-btn-mobile .theme-toggle-thumb {
  width: 22px;
  height: 22px;
}

[data-theme="dark"] .theme-toggle-btn-mobile .theme-toggle-thumb {
  transform: translateX(25px);
}

/* ==========================================================================
   Day Mode (Light) Visual Overrides
   ========================================================================== */
[data-theme="light"] {
  --bs-body-color: #1e293b;
  --bs-body-bg: #eaf2fa;
  --bs-secondary-color: #3d4d65;
  --bs-heading-color: #1e293b;
}

[data-theme="light"] body {
  background-color: #eaf2fa;
  color: #1e293b;
  background-image: var(--hero-bg-gradient);
}

[data-theme="light"] h1, 
[data-theme="light"] h2, 
[data-theme="light"] h3, 
[data-theme="light"] h4, 
[data-theme="light"] h5, 
[data-theme="light"] h6 {
  color: #1e293b;
}

[data-theme="light"] p {
  color: #27364b;
}

[data-theme="light"] .text-muted,
[data-theme="light"] p.text-muted,
[data-theme="light"] span.text-muted,
[data-theme="light"] div.text-muted,
[data-theme="light"] small.text-muted {
  color: #3d4d65 !important;
}

[data-theme="light"] .text-dark {
  color: #1e293b !important;
}

[data-theme="light"] .text-primary {
  color: #304974 !important;
}

[data-theme="light"] .text-white:not(.btn-primary *):not(.btn-accent *):not(.btn-coral *):not(.site-footer *):not(.audio-voice-card *):not(.audio-lang-popover *) {
  color: #1e293b !important;
}

[data-theme="light"] .btn .text-white,
[data-theme="light"] .btn.btn-primary,
[data-theme="light"] .btn.btn-accent,
[data-theme="light"] .btn.btn-coral,
[data-theme="light"] .badge.bg-primary,
[data-theme="light"] .badge.bg-success,
[data-theme="light"] .badge.bg-danger {
  color: #ffffff !important;
}

/* Light Topbar & Navbar - Harmonious & Sleek */
[data-theme="light"] .top-notice-bar {
  background-color: rgba(234, 242, 250, 0.55);
  color: #475569;
  border-bottom: 1px solid rgba(48, 73, 116, 0.08);
}

[data-theme="light"] .top-notice-bar a {
  color: #334155;
}

[data-theme="light"] .top-notice-bar a:hover {
  color: var(--accent);
}

[data-theme="light"] .site-navbar {
  background-color: rgba(234, 242, 250, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(48, 73, 116, 0.06);
  box-shadow: none;
}

[data-theme="light"] .site-navbar.scrolled {
  background-color: rgba(234, 242, 250, 0.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom-color: rgba(48, 73, 116, 0.14);
  box-shadow: 0 8px 25px -8px rgba(48, 73, 116, 0.12);
}

[data-theme="light"] .nav-link-custom {
  color: #334155 !important;
}

[data-theme="light"] .nav-link-custom:hover {
  color: #0f172a !important;
  background-color: rgba(48, 73, 116, 0.06);
}

[data-theme="light"] .nav-link-custom.active:not(.dropdown-toggle-custom) {
  color: #d9381e !important;
  background-color: rgba(240, 87, 54, 0.10);
  border-color: rgba(240, 87, 54, 0.22);
}

[data-theme="light"] .dropdown-toggle-custom,
[data-theme="light"] .dropdown-toggle-custom.active {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #334155 !important;
}

[data-theme="light"] .text-theme-nav {
  color: #304974 !important;
}

/* Light Hero Section */
[data-theme="light"] .badge-pill-accent,
[data-theme="light"] .badge-pill-coral {
  background-color: #ffffff;
  color: #d9381e !important;
  border: 1px solid rgba(240, 87, 54, 0.40);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  font-weight: 750;
}

[data-theme="light"] .hero-subtitle-tag {
  color: #d9381e;
  font-weight: 750;
}

[data-theme="light"] .hero-title {
  color: #0f172a;
}

[data-theme="light"] .hero-gradient-text {
  background: linear-gradient(135deg, #ff7455 0%, #f05736 50%, #d9381e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 2px 10px rgba(240, 87, 54, 0.22));
}

[data-theme="light"] .hero-lead {
  color: #334155;
  font-weight: 500;
}

[data-theme="light"] .hero-social-proof {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Light Bento Dashboard Cards */
[data-theme="light"] .hero-bento-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .hero-bento-card:hover {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.08), 0 0 20px rgba(240, 87, 54, 0.15);
}

[data-theme="light"] .bento-icon-badge {
  background: #ffffff;
  color: #f05736;
  border-color: rgba(240, 87, 54, 0.3);
}

[data-theme="light"] .hero-bento-card:hover .bento-icon-badge {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 16px rgba(240, 87, 54, 0.45) !important;
  transform: scale(1.05);
}

[data-theme="light"] .bento-card-title {
  color: #0f172a;
}

[data-theme="light"] .bento-card-desc {
  color: #475569;
}

[data-theme="light"] .bento-card-footer {
  color: #1e293b;
  border-top-color: rgba(48, 73, 116, 0.08);
}

/* ==========================================================================
   Day Mode (White Theme) Founder's Welcome Audio Capsule — Pure White with Crisp Contrasting Edges
   ========================================================================== */
[data-theme="light"] .audio-voice-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 10px 28px -5px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

[data-theme="light"] .audio-voice-card:hover {
  background: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 16px 36px -6px rgba(15, 23, 42, 0.14), 0 0 22px rgba(240, 87, 54, 0.20) !important;
  transform: translateY(-2px);
}

[data-theme="light"] .audio-voice-card .audio-meta-row span,
[data-theme="light"] .audio-voice-card .text-white-50 {
  color: #0f172a !important;
  font-weight: 700 !important;
}

[data-theme="light"] .audio-voice-card #audioTimeDisplay {
  color: #64748b !important;
  font-weight: 600 !important;
}

[data-theme="light"] .audio-voice-card .waveform-bar {
  background-color: #cbd5e1 !important;
}

[data-theme="light"] .audio-voice-card .waveform-bar.active {
  background-color: var(--accent) !important;
}

[data-theme="light"] .audio-voice-card .audio-scrubber {
  background: #e2e8f0 !important;
}

[data-theme="light"] .audio-voice-card .audio-progress-bar {
  background: linear-gradient(90deg, #f05736 0%, #d94323 100%) !important;
}

[data-theme="light"] .audio-lang-btn {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .audio-lang-popover {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 14px 35px rgba(15, 23, 42, 0.12) !important;
}

[data-theme="light"] .audio-lang-popover span,
[data-theme="light"] .audio-popover-title {
  color: #0f172a !important;
}

[data-theme="light"] .audio-lang-choice {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .audio-lang-choice:hover {
  background: #fff5f2 !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Light Tech Marquee & Alternating Section Banding */
[data-theme="light"] .tech-marquee-section {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .bg-subtle-section {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] #audience {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] #faq {
  background-color: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

[data-theme="light"] .tech-marquee-section h3 {
  color: #0f172a !important;
}

[data-theme="light"] .tech-pill-card {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .tech-pill-card:hover {
  background: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.10), 0 0 18px rgba(240, 87, 54, 0.18) !important;
  transform: translateY(-3px);
}

[data-theme="light"] .tech-pill-icon {
  background: #ffffff;
  color: #f05736;
  border: 1px solid rgba(240, 87, 54, 0.25);
}

[data-theme="light"] .tech-pill-card:hover .tech-pill-icon {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
}

[data-theme="light"] .tech-pill-title {
  color: #0f172a !important;
}

[data-theme="light"] .tech-pill-card:hover .tech-pill-title {
  color: #f05736 !important;
}

[data-theme="light"] .tech-pill-sub {
  color: #475569 !important;
}

/* Light Section Headings & Subtitles */
[data-theme="light"] .section-title {
  color: #0f172a;
}

[data-theme="light"] .section-subtitle {
  color: #475569;
}

[data-theme="light"] #community h6,
[data-theme="light"] #community .fw-bold:not(.text-white) {
  color: #0f172a !important;
}

[data-theme="light"] #community p,
[data-theme="light"] #community .text-muted {
  color: #334155 !important;
}

[data-theme="light"] .badge-pill-navy,
[data-theme="light"] .audience-card .badge-pill-navy {
  background-color: rgba(48, 73, 116, 0.09) !important;
  color: #1e3a64 !important;
  border: 1px solid rgba(48, 73, 116, 0.28) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(48, 73, 116, 0.06);
}

[data-theme="light"] .audience-card:hover .badge-pill-navy {
  background-color: rgba(48, 73, 116, 0.16) !important;
  border-color: rgba(48, 73, 116, 0.45) !important;
  color: #152947 !important;
}

/* Light Roadmap */
[data-theme="light"] .roadmap-tab-btn {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .roadmap-tab-btn:hover {
  border-color: #304974;
  color: #304974;
  background: #ffffff;
}

[data-theme="light"] .roadmap-tab-btn.active {
  background: linear-gradient(135deg, #f05736 0%, #d94323 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(240, 87, 54, 0.35);
}

[data-theme="light"] .roadmap-tab-btn .badge {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] .roadmap-tab-btn.active .badge {
  background: rgba(255, 255, 255, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
}

[data-theme="light"] .roadmap-main-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .roadmap-main-card h3 {
  color: #0f172a !important;
}

[data-theme="light"] .roadmap-main-card p,
[data-theme="light"] .roadmap-main-card p.text-muted {
  color: #334155 !important;
}

[data-theme="light"] .roadmap-goal-box {
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .roadmap-goal-box .display-6 {
  color: #0f172a !important;
}

[data-theme="light"] .roadmap-goal-box p,
[data-theme="light"] .roadmap-goal-box p.text-muted {
  color: #475569 !important;
}

[data-theme="light"] .roadmap-curriculum-list li {
  color: #334155 !important;
}

[data-theme="light"] .roadmap-curriculum-list li strong {
  color: #0f172a !important;
}

[data-theme="light"] .tool-tag {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* Light Audience Cards */
[data-theme="light"] .audience-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .audience-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 40px -6px rgba(15, 23, 42, 0.12), 0 0 24px rgba(240, 87, 54, 0.15);
  transform: translateY(-4px);
}

[data-theme="light"] .audience-avatar {
  background: #ffffff;
  color: #f05736;
  border: 1px solid rgba(240, 87, 54, 0.3);
}

[data-theme="light"] .audience-card:hover .audience-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
}

[data-theme="light"] .audience-card h5 {
  color: #0f172a !important;
}

[data-theme="light"] .audience-card p {
  color: #475569 !important;
}

[data-theme="light"] .btn-outline-primary {
  background-color: #ffffff;
  color: #304974;
  border-color: #304974;
}

[data-theme="light"] .btn-outline-primary:hover {
  background-color: #304974;
  color: #ffffff;
}

/* Light Testimonial Cards */
[data-theme="light"] .testimonial-card,
[data-theme="light"] .testimonial-card-horizontal {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 6px 20px -2px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .testimonial-card-horizontal:hover {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.10), 0 0 20px rgba(240, 87, 54, 0.15);
}

[data-theme="light"] .testimonial-quote {
  color: #1e293b !important;
}

[data-theme="light"] .testimonial-author h6 {
  color: #0f172a !important;
}

/* Light Mode Membership & Career Counseling CTA Banner — Merged Seamlessly with Modern White Aesthetic */
[data-theme="light"] #membership {
  background-color: transparent !important;
  background-image: none !important;
}

[data-theme="light"] .cta-banner-box {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
}

[data-theme="light"] .cta-banner-box::after {
  display: none !important;
}

[data-theme="light"] .cta-banner-title {
  color: #0f172a !important;
}

[data-theme="light"] .cta-banner-desc {
  color: #475569 !important;
}

[data-theme="light"] .cta-check-item {
  color: #1e293b !important;
  font-weight: 550 !important;
}

[data-theme="light"] .cta-slots-note {
  color: #64748b !important;
}

/* Light FAQ Accordion */
[data-theme="light"] .faq-accordion-item {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
}

[data-theme="light"] .faq-accordion-button {
  color: #0f172a !important;
  background: #ffffff !important;
  font-weight: 650 !important;
}

[data-theme="light"] .faq-accordion-button:not(.collapsed) {
  color: #f05736 !important;
  background: #f8fafc !important;
}

[data-theme="light"] .faq-accordion-body {
  color: #334155 !important;
  border-top-color: #e2e8f0 !important;
}

/* Light Contact Form */
[data-theme="light"] .contact-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .contact-card h4 {
  color: #0f172a !important;
}

[data-theme="light"] .contact-info-row {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .contact-info-row .fw-bold,
[data-theme="light"] .contact-info-row .text-white {
  color: #0f172a !important;
}

[data-theme="light"] .contact-info-row .text-muted {
  color: #475569 !important;
}

[data-theme="light"] .contact-info-row:hover {
  background: #f8fafc;
  border-color: var(--accent);
}

[data-theme="light"] #contact h2,
[data-theme="light"] #contact p {
  color: #0f172a;
}

[data-theme="light"] #contact p.text-muted {
  color: #334155 !important;
}

[data-theme="light"] .form-control-custom,
[data-theme="light"] .form-select-custom {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="light"] .form-control-custom:focus,
[data-theme="light"] .form-select-custom:focus {
  background-color: #ffffff;
  border-color: var(--accent);
  color: #1e293b;
  box-shadow: 0 0 0 3px rgba(240, 87, 54, 0.15);
}

[data-theme="light"] .form-label-custom {
  color: #1e293b;
  font-weight: 600;
}

/* Light Modals */
[data-theme="light"] .modal-custom .modal-content {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 25px 60px rgba(48, 73, 116, 0.15);
}

[data-theme="light"] .modal-custom .modal-header {
  background-color: #ffffff;
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .modal-header .modal-title {
  color: #0f172a !important;
}

[data-theme="light"] .stage-option-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .stage-option-card span {
  color: #334155;
}

[data-theme="light"] .stage-option-card:hover {
  border-color: #304974;
}

[data-theme="light"] .stage-option-card.selected {
  background: #ffffff;
  border-color: var(--accent);
}

[data-theme="light"] .stage-option-card.selected span {
  color: var(--accent);
}

[data-theme="light"] .btn-close-white {
  filter: none;
}



/* Footer remains deep midnight navy in both modes for high-end tech aesthetic */
.site-footer {
  background-color: #070b14;
}

.site-footer .text-white,
.site-footer h6,
.site-footer .social-icon-btn,
.site-footer a {
  color: #ffffff !important;
}

.site-footer p,
.site-footer .text-white-50,
.site-footer .footer-contact-link {
  color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer .footer-contact-link:hover {
  color: var(--accent) !important;
}

/* ==========================================================================
   Universal Authentication & Lead Modal Styling (Google + WhatsApp)
   ========================================================================== */
.modal-universal-auth .modal-dialog {
  max-width: 440px;
}

.auth-modal-content {
  background: rgba(11, 17, 32, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(240, 87, 54, 0.15) !important;
  overflow: hidden;
}

.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 87, 54, 0.15);
  border: 1px solid rgba(240, 87, 54, 0.35);
  color: #ff7455;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
}

.auth-icon-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(240, 87, 54, 0.12);
  border: 1.5px solid rgba(240, 87, 54, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto;
  box-shadow: 0 0 20px rgba(240, 87, 54, 0.25);
}

.auth-icon-circle.whatsapp-pulse {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

.auth-title {
  color: #ffffff;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.auth-step-pane {
  display: none;
}

.auth-step-pane.active {
  display: block;
  animation: fadeInPane 0.25s ease forwards;
}

/* Styled Google Sign-In Button */
.btn-google-custom {
  background: #ffffff;
  color: #1f2937;
  border: 1.5px solid #e5e7eb;
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.btn-google-custom:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: #0f172a;
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.auth-divider span {
  padding: 0 10px;
}

.auth-input {
  background: #0f172a !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 0.88rem !important;
}

.auth-input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(240, 87, 54, 0.25) !important;
}

.phone-addon {
  background: #1e293b !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  border-right: none !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
}

/* Navbar User Profile Indicator Pill */
.nav-user-pill-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  padding: 4px 12px 4px 6px;
  color: #ffffff;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-user-pill-btn:hover,
.nav-user-pill-btn:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--accent);
  color: #ffffff;
}

.nav-user-avatar-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #d94323 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
}

.nav-user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-user-menu {
  background: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--radius-lg) !important;
  min-width: 220px;
}

.nav-user-menu .dropdown-item {
  color: #cbd5e1;
  font-size: 0.82rem;
  padding: 8px 16px;
}

.nav-user-menu .dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* WhatsApp Header Pill inside AI Knowledge Modal */
.btn-wa-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-wa-header-pill:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #ffffff;
  transform: translateY(-1px);
}

/* Light / Day Mode Overrides for Auth Modal */
[data-theme="light"] .auth-modal-content {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

[data-theme="light"] .auth-title {
  color: #0f172a !important;
}

[data-theme="light"] .auth-subtitle {
  color: #64748b !important;
}

[data-theme="light"] .auth-divider::before,
[data-theme="light"] .auth-divider::after {
  border-bottom-color: #e2e8f0;
}

[data-theme="light"] .auth-input {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .phone-addon {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

[data-theme="light"] .nav-user-pill-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

[data-theme="light"] .nav-user-menu {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}

[data-theme="light"] .nav-user-menu .dropdown-item {
  color: #334155;
}

/* ==========================================================================
   Candidate & Freelancer Auth Modals, Centered Branding & Integrated Inputs
   ========================================================================== */

/* Candidate Profile Top Centered Brand Badge & Orange Fade */
.auth-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(240, 87, 54, 0.15) !important;
  border: 1px solid rgba(240, 87, 54, 0.35) !important;
  color: #ff7455 !important;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 20px;
  border-radius: 9999px;
  font-family: var(--font-display, sans-serif);
  box-shadow: 0 4px 18px rgba(240, 87, 54, 0.16);
  letter-spacing: 0.02em;
}

/* Single unified box for mobile number with internal +91 and divider */
.auth-unified-phone-box {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  transition: all 0.2s ease;
  min-height: 44px;
}

.auth-unified-phone-box:focus-within {
  border-color: var(--accent, #f05736) !important;
  box-shadow: 0 0 0 2px rgba(240, 87, 54, 0.25) !important;
}

.auth-unified-phone-box input::placeholder {
  color: #64748b !important;
}

.candidate-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  position: relative;
}

.candidate-top-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(240, 87, 54, 0.12);
  border: 1.5px solid rgba(240, 87, 54, 0.35);
  padding: 6px 20px;
  border-radius: 9999px;
  box-shadow: 0 4px 18px rgba(240, 87, 54, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.candidate-top-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(240, 87, 54, 0.24);
}

.candidate-brand-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(240, 87, 54, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.candidate-brand-text {
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  font-family: var(--font-display, sans-serif);
}

.candidate-verify-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Integrated Sleek Phone Input Field with Non-Clickable Embedded Prefix (+91) */
.auth-phone-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.auth-phone-field .auth-phone-code {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  pointer-events: none; /* Non-clickable: clicks pass straight through into input */
  user-select: none;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  line-height: 1.2;
}

.auth-phone-field .auth-phone-input {
  padding-left: 64px !important;
  width: 100% !important;
  border-radius: 8px !important;
}

.auth-phone-field:focus-within .auth-phone-code {
  color: #f8fafc;
  border-right-color: rgba(240, 87, 54, 0.5);
}

/* Fallback for input-group prefix */
.auth-phone-prefix {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-right: none !important;
  color: #f1f5f9 !important;
  font-weight: 600;
  font-size: 0.85rem;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
  user-select: none;
}

.input-group .auth-input:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Slick Select Dropdown Options */
.auth-input,
select.auth-input {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

.auth-input option {
  background-color: #172136 !important;
  color: #f1f5f9 !important;
  padding: 10px 14px !important;
  font-size: 0.9rem;
}

.auth-input option:checked,
.auth-input option:hover,
.auth-input option:focus {
  background-color: #2b3a58 !important;
  color: #ffffff !important;
}

/* CKEditor 5 Slick Professional Dark Theme */
.ckeditor-dark-wrap {
  position: relative;
  width: 100%;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck.ck-toolbar {
  background: #172136 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

.ck.ck-toolbar .ck-toolbar__items {
  gap: 3px;
}

.ck.ck-button {
  color: #cbd5e1 !important;
  cursor: pointer;
  border-radius: 4px !important;
}

.ck.ck-button:hover,
.ck.ck-button.ck-on {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.ck.ck-editor__main > .ck-editor__editable {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: none !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  color: #f8fafc !important;
  min-height: 130px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: var(--accent, #f05736) !important;
  box-shadow: 0 0 0 2px rgba(240, 87, 54, 0.25) !important;
}

.ck.ck-editor__editable p {
  margin-bottom: 0.5rem;
}

.ck.ck-editor__editable img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 8px 0;
}

.ck.ck-dropdown__panel {
  background: #172136 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.ck.ck-list__item .ck-button {
  color: #e2e8f0 !important;
}

.ck.ck-list__item .ck-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   JobReady Reddish-Orange File Selector & Upload Section Styling
   ========================================================================== */
.auth-input::file-selector-button,
.form-control::file-selector-button,
input[type="file"].auth-input::file-selector-button,
input[type="file"].form-control::file-selector-button {
  background: rgba(240, 87, 54, 0.16) !important;
  color: #ff7455 !important;
  border: 1px solid rgba(240, 87, 54, 0.45) !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  margin-right: 10px !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.auth-input::-webkit-file-upload-button,
.form-control::-webkit-file-upload-button,
input[type="file"].auth-input::-webkit-file-upload-button,
input[type="file"].form-control::-webkit-file-upload-button {
  background: rgba(240, 87, 54, 0.16) !important;
  color: #ff7455 !important;
  border: 1px solid rgba(240, 87, 54, 0.45) !important;
  align-items: center;
  gap: 8px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 14px;
  border-radius: 9999px;
  font-size: 0.76rem;
  color: #94a3b8;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Integrated Sleek Phone Input Field with Non-Clickable Embedded Prefix (+91) */
.auth-phone-field {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.auth-phone-field .auth-phone-code {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  pointer-events: none; /* Non-clickable: clicks pass straight through into input */
  user-select: none;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  line-height: 1.2;
}

.auth-phone-field .auth-phone-input {
  padding-left: 64px !important;
  width: 100% !important;
  border-radius: 8px !important;
}

.auth-phone-field:focus-within .auth-phone-code {
  color: #f8fafc;
  border-right-color: rgba(240, 87, 54, 0.5);
}

/* Fallback for input-group prefix */
.auth-phone-prefix {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-right: none !important;
  color: #f1f5f9 !important;
  font-weight: 600;
  font-size: 0.85rem;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
  user-select: none;
}

.input-group .auth-input:not(:first-child) {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Slick Select Dropdown Options */
.auth-input,
select.auth-input {
  background-color: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
}

.auth-input option {
  background-color: #172136 !important;
  color: #f1f5f9 !important;
  padding: 10px 14px !important;
  font-size: 0.9rem;
}

.auth-input option:checked,
.auth-input option:hover,
.auth-input option:focus {
  background-color: #2b3a58 !important;
  color: #ffffff !important;
}

/* CKEditor 5 Slick Professional Dark Theme */
.ckeditor-dark-wrap {
  position: relative;
  width: 100%;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck.ck-toolbar {
  background: #172136 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}

.ck.ck-toolbar .ck-toolbar__items {
  gap: 3px;
}

.ck.ck-button {
  color: #cbd5e1 !important;
  cursor: pointer;
  border-radius: 4px !important;
}

.ck.ck-button:hover,
.ck.ck-button.ck-on {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.ck.ck-editor__main > .ck-editor__editable {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-top: none !important;
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
  color: #f8fafc !important;
  min-height: 130px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ck.ck-editor__main > .ck-editor__editable.ck-focused {
  border-color: var(--accent, #f05736) !important;
  box-shadow: 0 0 0 2px rgba(240, 87, 54, 0.25) !important;
}

.ck.ck-editor__editable p {
  margin-bottom: 0.5rem;
}

.ck.ck-editor__editable img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 8px 0;
}

.ck.ck-dropdown__panel {
  background: #172136 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

.ck.ck-list__item .ck-button {
  color: #e2e8f0 !important;
}

.ck.ck-list__item .ck-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   JobReady Reddish-Orange File Selector & Upload Section Styling
   ========================================================================== */
.auth-input::file-selector-button,
.form-control::file-selector-button,
input[type="file"].auth-input::file-selector-button,
input[type="file"].form-control::file-selector-button {
  background: rgba(240, 87, 54, 0.16) !important;
  color: #ff7455 !important;
  border: 1px solid rgba(240, 87, 54, 0.45) !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  margin-right: 10px !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.auth-input::-webkit-file-upload-button,
.form-control::-webkit-file-upload-button,
input[type="file"].auth-input::-webkit-file-upload-button,
input[type="file"].form-control::-webkit-file-upload-button {
  background: rgba(240, 87, 54, 0.16) !important;
  color: #ff7455 !important;
  border: 1px solid rgba(240, 87, 54, 0.45) !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  margin-right: 10px !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  transition: all 0.25s ease !important;
  cursor: pointer !important;
}

.auth-input::file-selector-button:hover,
.form-control::file-selector-button:hover,
input[type="file"].auth-input::file-selector-button:hover,
input[type="file"].form-control::file-selector-button:hover,
.auth-input::-webkit-file-upload-button:hover,
.form-control::-webkit-file-upload-button:hover,
input[type="file"].auth-input::-webkit-file-upload-button:hover,
input[type="file"].form-control::-webkit-file-upload-button:hover {
  background: #f05736 !important;
  color: #ffffff !important;
  border-color: #f05736 !important;
  box-shadow: 0 0 12px rgba(240, 87, 54, 0.4) !important;
}

/* Subtle reddish upload containers */
.upload-card-accent {
  background: rgba(240, 87, 54, 0.05) !important;
  border: 1.5px dashed rgba(240, 87, 54, 0.35) !important;
  border-radius: 12px !important;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.upload-card-accent:hover {
  border-color: rgba(240, 87, 54, 0.6) !important;
  background: rgba(240, 87, 54, 0.08) !important;
}

/* ==========================================================================
   Role Selection Modal (Get Started: Student, Freelancer, Mentor, Industry)
   Monochrome Slate + Solid Unfaded Orange with Smooth Ambient Hover Fade
   ========================================================================== */
.modal-role-selection .modal-dialog {
  max-width: 820px;
}

.modal-role-selection .modal-content {
  background: rgba(10, 15, 29, 0.98) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(240, 87, 54, 0.12) !important;
}

/* Force 2x2 Grid with identical row and column tracks */
#getStartedRoleGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  gap: 14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#getStartedRoleGrid > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  height: 100% !important;
}

.role-selection-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 120px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

/* Subtle top edge accent - fades in on hover */
.role-selection-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f05736, #ff7455);
  opacity: 0;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

/* Hover state: elegant soft fade */
.role-selection-card:hover {
  transform: translateY(-2px);
  background: rgba(240, 87, 54, 0.05);
  border-color: rgba(240, 87, 54, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 24px rgba(240, 87, 54, 0.15);
}

.role-selection-card:hover::before {
  opacity: 1;
  box-shadow: 0 0 14px rgba(240, 87, 54, 0.7);
}

.role-selection-card:active {
  transform: translateY(0) scale(0.99);
}

/* Inner flex container for role card */
.role-card-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
}

/* Role Icon Box - Solid Orange & Sleek */
.role-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: rgba(240, 87, 54, 0.12);
  border: 1.5px solid rgba(240, 87, 54, 0.4);
  color: #f05736;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.role-selection-card:hover .role-icon-box {
  transform: scale(1.06);
  background: #f05736;
  border-color: #f05736;
  color: #ffffff;
  box-shadow: 0 0 16px rgba(240, 87, 54, 0.45);
}

/* Role Card Main Text Area */
.role-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.role-card-header-line {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}

/* Typography inside card */
.role-card-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: normal;
  transition: color 0.25s ease;
}

.role-card-badge-row {
  display: flex;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 5px;
}

/* Role Badges - Solid Orange Accent */
.role-badge {
  font-size: 0.67rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  background: rgba(240, 87, 54, 0.12);
  border: 1px solid rgba(240, 87, 54, 0.4);
  color: #f05736;
  transition: all 0.25s ease;
  white-space: nowrap;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
}

.role-badge-muted {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  color: #94a3b8 !important;
}

.role-selection-card:hover .role-badge:not(.role-badge-muted) {
  background: rgba(240, 87, 54, 0.22);
  box-shadow: 0 0 10px rgba(240, 87, 54, 0.3);
}

.role-card-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.38;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}

/* Arrow Circle Action Button */
.role-card-arrow-circle {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.75rem;
  transition: all 0.25s ease;
  flex-shrink: 0;
  align-self: center;
}

.role-selection-card:hover .role-card-arrow-circle {
  background: #f05736;
  border-color: #f05736;
  color: #ffffff;
  transform: translateX(3px);
  box-shadow: 0 0 12px rgba(240, 87, 54, 0.4);
}

.role-card-action {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f05736;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.role-selection-card:hover .role-card-action {
  transform: translateX(4px);
  color: #ff7455;
}

.role-track-pill {
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

/* Light Mode Overrides */
[data-theme="light"] .modal-role-selection .modal-content {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="light"] .role-selection-card {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .role-selection-card:hover {
  background: #ffffff;
  border-color: rgba(240, 87, 54, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06), 0 0 18px rgba(240, 87, 54, 0.12);
}

[data-theme="light"] .role-card-title {
  color: #0f172a;
}

[data-theme="light"] .role-card-desc {
  color: #64748b;
}

[data-theme="light"] .role-card-arrow-circle {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .role-selection-card:hover .role-card-arrow-circle {
  background: #f05736;
  border-color: #f05736;
  color: #ffffff;
}

[data-theme="light"] .role-badge-muted {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}

[data-theme="light"] .role-track-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] #modalGetStartedRoleLabel {
  color: #0f172a !important;
}

@media (max-width: 767.98px) {
  #getStartedRoleGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 575.98px) {
  .role-selection-card {
    padding: 13px 14px;
    min-height: auto;
  }
  .role-card-inner {
    gap: 10px;
  }
  .role-icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    font-size: 1rem;
    border-radius: 10px;
  }
  .role-card-title {
    font-size: 0.9rem;
  }
  .role-card-desc {
    font-size: 0.74rem;
  }
  .role-card-arrow-circle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   Sleek Faint Placeholder Tokens (Subdued & Clean)
   ========================================================================== */
.faint-placeholder {
  color: #94a3b8 !important;
  opacity: 0.55 !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

[data-theme="light"] .faint-placeholder {
  color: #64748b !important;
  opacity: 0.65 !important;
}

.faint-placeholder-box {
  background: rgba(148, 163, 184, 0.04) !important;
  border: 1.5px dashed rgba(148, 163, 184, 0.25) !important;
  border-radius: 14px;
  padding: 24px;
  color: #94a3b8;
  opacity: 0.85;
  text-align: center;
}

[data-theme="light"] .faint-placeholder-box {
  background: rgba(241, 245, 249, 0.6) !important;
  border-color: #cbd5e1 !important;
  color: #64748b;
}

/* ==========================================================================
   Multi-Step Institution Modal Navigation & Format Cards
   ========================================================================== */
.inst-modal-steps-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 6px;
}

[data-theme="light"] .inst-modal-steps-nav {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.inst-step-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  color: #94a3b8;
}

.inst-step-tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
}

[data-theme="light"] .inst-step-tab-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.inst-step-tab-btn.active {
  background: linear-gradient(135deg, rgba(240, 87, 54, 0.15), rgba(48, 73, 116, 0.25));
  border-color: rgba(240, 87, 54, 0.4);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .inst-step-tab-btn.active {
  background: #ffffff;
  border-color: #f05736;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(240, 87, 54, 0.12);
}

.inst-step-tab-btn.completed .inst-step-num-badge {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.inst-step-num-badge {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: inherit;
  transition: all 0.2s ease;
}

.inst-step-tab-btn.active .inst-step-num-badge {
  background: var(--accent, #f05736);
  border-color: var(--accent, #f05736);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(240, 87, 54, 0.45);
}

.inst-step-title {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
}

.inst-step-title-short,
.inst-login-portal-short {
  display: none;
}

.inst-step-sub {
  font-size: 0.68rem;
  opacity: 0.75;
  line-height: 1.2;
}

.inst-step-connector {
  color: #64748b;
  font-size: 0.75rem;
  padding: 0 2px;
}

/* Format Cards */
.inst-format-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  transition: all 0.2s ease;
}

.inst-format-card:hover {
  border-color: rgba(240, 87, 54, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

.inst-format-card.active {
  background: rgba(240, 87, 54, 0.08) !important;
  border-color: #f05736 !important;
  box-shadow: 0 0 0 1px #f05736, 0 4px 14px rgba(240, 87, 54, 0.15) !important;
}

[data-theme="light"] .inst-format-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
}

[data-theme="light"] .inst-format-card:hover {
  border-color: #f05736;
  background: #fdfdfd;
}

[data-theme="light"] .inst-format-card.active {
  background: #fff7ed !important;
  border-color: #f05736 !important;
  box-shadow: 0 0 0 1px #f05736, 0 3px 10px rgba(240, 87, 54, 0.1) !important;
}

[data-theme="light"] .inst-format-card .text-white {
  color: #0f172a !important;
}

/* Day Pair Toggle Sub-Selector */
.inst-day-pair-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}

.inst-day-pair-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(240, 87, 54, 0.4);
}

.inst-day-pair-btn.active {
  background: rgba(240, 87, 54, 0.12) !important;
  border-color: #f05736 !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px #f05736, 0 2px 8px rgba(240, 87, 54, 0.18);
}

[data-theme="light"] .inst-day-pair-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .inst-day-pair-btn:hover {
  background: #f8fafc;
  color: #0f172a;
  border-color: #f05736;
}

[data-theme="light"] .inst-day-pair-btn.active {
  background: #fff7ed !important;
  border-color: #f05736 !important;
  color: #c2410c !important;
  box-shadow: 0 0 0 1px #f05736;
}

/* Interactive Schedule Matrix Container */
.inst-schedule-container {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

[data-theme="light"] .inst-schedule-container {
  background: #f8fafc;
  border-color: #e2e8f0;
}

.inst-step-pane {
  overflow-x: hidden;
  width: 100%;
}

.inst-selected-banner {
  background: linear-gradient(135deg, rgba(240, 87, 54, 0.08), rgba(30, 41, 59, 0.6));
  border: 1px solid rgba(240, 87, 54, 0.35);
  border-radius: 12px;
  padding: 11px 16px;
  color: #e2e8f0;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.inst-selected-banner-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.inst-selected-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inst-selected-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
}

.inst-selected-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(240, 87, 54, 0.16) !important;
  border: 1px solid rgba(240, 87, 54, 0.45) !important;
  color: #ffedd5 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.inst-selected-date-row {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

[data-theme="light"] .inst-selected-banner {
  background: linear-gradient(135deg, rgba(240, 87, 54, 0.06), #ffffff);
  border-color: rgba(240, 87, 54, 0.35);
  box-shadow: 0 4px 12px rgba(240, 87, 54, 0.08);
  color: #0f172a;
}

[data-theme="light"] .inst-selected-label {
  color: #64748b;
}

[data-theme="light"] .inst-selected-badge {
  background: rgba(240, 87, 54, 0.1) !important;
  border-color: rgba(240, 87, 54, 0.4) !important;
  color: #c2410c !important;
}

[data-theme="light"] .inst-selected-date-row {
  color: #0f172a;
}

.inst-year-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inst-year-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.84rem;
  padding: 4px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.inst-year-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.inst-year-btn.active {
  background: var(--accent, #f05736) !important;
  border-color: var(--accent, #f05736) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(240, 87, 54, 0.3);
}

[data-theme="light"] .inst-year-btn {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #475569;
}

[data-theme="light"] .inst-year-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .inst-year-btn.active {
  background: var(--accent, #f05736) !important;
  border-color: var(--accent, #f05736) !important;
  color: #ffffff !important;
}

/* Zero Horizontal Scrolling Month Grid */
.inst-month-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

@media (min-width: 992px) {
  .inst-month-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 575.98px) {
  .inst-month-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.inst-month-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  text-align: center;
}

.inst-month-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #f8fafc;
  border-color: rgba(255, 255, 255, 0.16);
}

.inst-month-btn.active {
  background: rgba(240, 87, 54, 0.12) !important;
  border-color: #f05736 !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 0 0 1px #f05736;
}

.inst-month-btn .inst-month-badge {
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.inst-month-btn.active .inst-month-badge {
  background: #f05736;
  color: #ffffff;
}

[data-theme="light"] .inst-month-btn {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .inst-month-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

[data-theme="light"] .inst-month-btn.active {
  background: #fff7ed !important;
  border-color: #f05736 !important;
  color: #c2410c !important;
  box-shadow: 0 0 0 1px #f05736;
}

[data-theme="light"] .inst-month-btn .inst-month-badge {
  background: #f1f5f9;
  color: #64748b;
}

[data-theme="light"] .inst-month-btn.active .inst-month-badge {
  background: #f05736;
  color: #ffffff;
}

/* Session Slot Cards Grid (Zero Horizontal Scrolling) */
.inst-slot-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
}

@media (max-width: 767.98px) {
  .inst-slot-cards-grid {
    grid-template-columns: 1fr;
  }
}

.inst-slot-card {
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.inst-slot-card:hover:not(.booked) {
  transform: translateY(-1px);
  border-color: rgba(240, 87, 54, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.inst-slot-card.active-slot {
  background: rgba(240, 87, 54, 0.08) !important;
  border-color: #f05736 !important;
  box-shadow: 0 0 0 1.5px #f05736, 0 4px 12px rgba(240, 87, 54, 0.15) !important;
}

.inst-slot-card.booked {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .inst-slot-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

[data-theme="light"] .inst-slot-card:hover:not(.booked) {
  border-color: #f05736;
  background: #fdfdfd;
}

[data-theme="light"] .inst-slot-card.active-slot {
  background: #fff7ed !important;
  border-color: #f05736 !important;
  box-shadow: 0 0 0 1.5px #f05736, 0 3px 10px rgba(240, 87, 54, 0.1) !important;
}

[data-theme="light"] .inst-slot-card.booked {
  background: #f8fafc;
  border-color: #e2e8f0;
  opacity: 0.6;
}

.inst-slot-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

[data-theme="light"] .inst-slot-chip {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #334155;
}

.inst-credentials-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
}

[data-theme="light"] .inst-credentials-card {
  background: #f8fafc;
  border-color: #cbd5e1;
}


/* ==========================================================================
   Desktop / Mobile Navbar Isolation
   Guarantees all mobile drawers & profile boxes are 100% hidden on desktop (>=992px)
   ========================================================================== */
@media (min-width: 992px) {
  .navbar-collapse.d-lg-none,
  .collapse.d-lg-none,
  .mobile-nav-drawer,
  #studentNavbarCollapse,
  #portfolioNavbarCollapse,
  #mentorNavbarCollapse,
  #mentorPortfolioNavbarCollapse,
  #meetingNavbarCollapse,
  #industryNavbarCollapse,
  #instNavbarCollapse,
  #freelancerNavbarCollapse,
  #founderNavbarCollapse,
  #mobileCandidateProfileBox {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}