/* ==========================================================================
   CSS VARIABLES & GLOBAL RESET
   ========================================================================== */
:root {
  /* Color Tokens - Dark Mode (Default) */
  --bg-primary: #0B0F19;
  --bg-secondary: #131A2C;
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  
  --accent-primary: #00E5FF;     /* Neon Cyan */
  --accent-secondary: #3B82F6;   /* Electric Blue */
  --accent-glow: rgba(0, 229, 255, 0.15);
  
  --glass-bg: rgba(19, 26, 44, 0.6);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  --card-hover-border: rgba(0, 229, 255, 0.3);

  /* Fonts & Scale */
  --font-display: 'Outfit', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
  
  --fs-hero: clamp(2.5rem, 8vw, 4.5rem);
  --fs-section: clamp(2rem, 5vw, 2.75rem);
  --fs-card: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tags: 0.75rem;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --container-max-width: 75rem;
  --nav-height: 5rem;
  
  scroll-behavior: smooth;
}

/* Light Theme Variables overrides */
.light-theme {
  --bg-primary: #F8FAFC;
  --bg-secondary: #FFFFFF;
  --text-primary: #334155;   /* Softened to medium slate-700 (less harsh than #0F172A) */
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  
  --accent-primary: #3B82F6;     /* Royal Blue */
  --accent-secondary: #0D9488;   /* Teal */
  --accent-glow: rgba(59, 130, 246, 0.1);
  
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-shadow: rgba(15, 23, 42, 0.05);
  --card-hover-border: rgba(59, 130, 246, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  
  /* Disable text selection and hide typing/I-beam text cursor globally */
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  cursor: default !important;
}

/* Maintain normal text cursor only inside input fields and textareas so typing works */
input, textarea {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text !important;
}

/* Ensure links and interactive buttons continue to show the hand pointer */
a, button, .slider-nav-btn, .slider-dot, .cert-filter-chip, .theme-toggle, [role="button"], select, option {
  cursor: pointer !important;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, textarea {
  font-family: inherit;
  outline: none;
}

/* Common Layout Utilities */
.container {
  width: 90%;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.section {
  padding: 3.5rem 0;
  position: relative;
}

/* ==========================================================================
   SCROLLBAR & SELECTION
   ========================================================================== */
::-webkit-scrollbar {
  width: 0.625rem;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-secondary);
  border: 2px solid var(--bg-primary);
  border-radius: 0.3125rem;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

::selection {
  background: var(--accent-primary);
  color: #0B0F19;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  border: 3px solid var(--text-primary) !important;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.2s ease, color 0.2s ease !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Ensure nav-link styling does not conflict when applied to buttons */
.btn.nav-link {
  color: var(--text-primary) !important;
}

.btn.nav-link::after {
  display: none !important;
}

.btn:focus-visible,
.nav-link:focus-visible,
.social-icon-btn:focus-visible,
.theme-toggle-btn:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: 4px 4px 0 var(--text-primary) !important;
}

.light-theme .btn-primary {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: 4px 4px 0 var(--text-primary) !important;
}

.btn-primary:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0 var(--accent-primary) !important;
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
}

.light-theme .btn-primary:hover {
  box-shadow: 7px 7px 0 var(--accent-primary) !important;
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
}

.btn-primary:active {
  transform: translate(0, 0) !important;
  box-shadow: 2px 2px 0 var(--text-primary) !important;
}

.btn-secondary {
  background: var(--bg-primary) !important;
  border-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: 4px 4px 0 var(--text-primary) !important;
}

.btn-secondary:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0 var(--accent-primary) !important;
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
}

.btn-secondary:active {
  transform: translate(0, 0) !important;
  box-shadow: 2px 2px 0 var(--text-primary) !important;
}

.btn-arrow {
  margin-left: 0.5rem;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.2s ease;
}

.btn-primary:hover .btn-arrow {
  transform: translateX(0.25rem);
}

/* ==========================================================================
   GLASS PANELS
   ========================================================================== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(0.75rem) saturate(180%);
  -webkit-backdrop-filter: blur(0.75rem) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 0.625rem 1.875rem var(--glass-shadow);
  border-radius: 1rem;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.glass-panel:hover {
  border-color: var(--card-hover-border);
  box-shadow: 0 0.9375rem 2.5rem rgba(0, 229, 255, 0.05);
  transform: translateY(-2px);
}

.light-theme .glass-panel:hover {
  box-shadow: 0 0.9375rem 2.5rem rgba(59, 130, 246, 0.08);
}

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.navbar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  z-index: 100;
  background: rgba(11, 15, 25, 0.7);
  backdrop-filter: blur(0.9375rem);
  -webkit-backdrop-filter: blur(0.9375rem);
  border-bottom: 1px solid var(--glass-border);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.light-theme .navbar-container {
  background: rgba(248, 250, 252, 0.8);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--container-max-width);
  width: 90%;
  margin: 0 auto;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo a {
  display: flex;
  align-items: center;
}

.logo-bracket {
  color: var(--accent-primary);
  transition: color var(--transition-normal);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-link {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  transition: width var(--transition-normal);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  transition: border-color var(--transition-normal), background-color var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.theme-toggle-btn:hover {
  border-color: var(--accent-primary);
  background: var(--accent-glow);
}

.svg-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Premium Animated Theme Transition */
.theme-toggle-btn .svg-icon {
  position: absolute;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.sun-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.moon-icon {
  opacity: 0;
  transform: scale(0) rotate(-90deg);
}

.light-theme .sun-icon {
  opacity: 0;
  transform: scale(0) rotate(90deg);
}

.light-theme .moon-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* Mobile Menu Toggle button */
.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 2rem;
  height: 2rem;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  padding: 0.25rem;
  z-index: 101;
}

.hamburger-bar {
  width: 100%;
  height: 2px;
  background-color: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

/* ==========================================================================
   FLOATING SOCIALS
   ========================================================================== */
.floating-socials {
  position: fixed;
  bottom: 2.5rem;
  left: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 90;
}

.social-icon-btn {
  height: 2.75rem;
  border-radius: 1.5rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem 0 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--transition-normal);
  position: relative;
  box-shadow: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.social-icon-btn .svg-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.social-icon-btn .social-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.social-icon-btn:hover {
  color: #0B0F19;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  border-color: transparent;
  transform: translateY(-0.1875rem) scale(1.03);
  box-shadow: 0 0.5rem 1.5625rem rgba(0, 229, 255, 0.35);
}

.light-theme .social-icon-btn:hover {
  color: #FFFFFF;
  box-shadow: 0 0.5rem 1.5625rem rgba(59, 130, 246, 0.35);
}

/* Hide old tooltip — labels are now always visible */
.social-icon-btn .tooltip {
  display: none;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  position: relative;
  overflow: hidden;
}

.hero-bg-gradient {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle at 60% 40%, rgba(0, 229, 255, 0.08), transparent 60%),
              radial-gradient(circle at 40% 70%, rgba(59, 130, 246, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.hero-container {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-greeting {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  height: auto;
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  width: 100%;
  max-width: 34rem;
}

@media (min-width: 30rem) {
  .hero-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hero-stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--accent-primary);
  background: rgba(19, 26, 44, 0.2);
}

.hero-stat-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.hero-stat-lbl {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.role-sliding-wrapper {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  height: 1.25em;
  isolation: isolate; /* Create local stacking context to prevent bleeding into overlays/modals */
  transform: translateZ(0); /* Force strict overflow clipping on accelerated children in WebKit/Chrome */
}

.role-sliding-text {
  display: inline-block;
  background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  transform: translateY(0);
  font-size: 0.85em; /* Scaled down slightly to be elegant and fit viewports */
  white-space: nowrap; /* Prevent wrapping on narrow screens */
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.role-sliding-text.slide-out {
  opacity: 0;
  transform: translateY(-100%);
}

.role-sliding-text.slide-in {
  opacity: 0;
  transform: translateY(100%);
  transition: none;
}

.hero-bio {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 34rem;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.hero-cta-group {
  display: flex;
  gap: 1rem;
}

.hero-graphic {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.graphic-glow {
  position: absolute;
  width: 18.75rem;
  height: 18.75rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.12), transparent 70%);
  filter: blur(2.5rem);
  z-index: 1;
}

.graphic-element {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 23.75rem;
}

.hero-svg {
  width: 100%;
  height: auto;
}

/* Animations for Hero Graphic SVG */
.rot-clock {
  transform-origin: 12.5rem 12.5rem;
  animation: rotateClockwise 35s linear infinite;
}

.rot-counter {
  transform-origin: 12.5rem 12.5rem;
  animation: rotateCounterClockwise 25s linear infinite;
}

.pulse-node {
  animation: pulseScale 3s ease-in-out infinite alternate;
}

/* Mouse Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  z-index: 5;
}

.mouse-icon {
  width: 1.75rem;
  height: 3rem;
  border: 2px solid var(--text-muted);
  border-radius: 1.25rem;
  position: relative;
  display: flex;
  justify-content: center;
}

.mouse-wheel {
  width: 0.25rem;
  height: 0.5rem;
  background-color: var(--accent-primary);
  border-radius: 2px;
  position: absolute;
  top: 0.5rem;
  animation: mouseScroll 1.8s ease-in-out infinite;
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */
.section-header {
  margin-bottom: 2rem;
  position: relative;
}

.section-subtitle {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-primary);
  letter-spacing: 0.15em;
  display: block;
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.section-underline {
  width: 3.75rem;
  height: 0.25rem;
  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
  border-radius: 2px;
  margin-top: 1rem;
}

/* ==========================================================================
   ABOUT ME SECTION
   ========================================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: start;
}

.lead-text {
  font-size: 1.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.about-text p {
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
  max-width: 38rem;
  line-height: 1.75;
}

.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  width: 100%;
}

.about-stat-card {
  padding: 1.25rem;
  text-align: center;
  border-radius: 8px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.about-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 24px rgba(0, 229, 255, 0.08);
}

.about-stat-val {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.about-stat-lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

.about-cards-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-highlights-card {
  padding: 1.5rem;
}

.about-focus-card {
  padding: 1.5rem;
}

.card-icon-header-focus {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.card-icon-header-focus h3 {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 700;
}

.focus-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.focus-list li {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
}

.focus-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: 700;
}

.card-title-highlight {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.75rem;
}

.highlights-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.highlights-list li {
  display: flex;
  gap: 1rem;
}

.highlight-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--accent-glow);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(0, 229, 255, 0.1);
}

.highlight-info h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.highlight-info p {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ==========================================================================
   EDUCATION & TIMELINE
   ========================================================================== */
.education-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: stretch;
}

.timeline-container {
  position: relative;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.timeline {
  position: relative;
  border-left: 2px solid var(--glass-border);
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

.timeline-item {
  position: relative;
  padding-left: 2rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}

.timeline-dot {
  position: absolute;
  left: -0.5625rem;
  top: 0.75rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 3px solid var(--accent-primary);
  box-shadow: 0 0 0.625rem var(--accent-primary);
  z-index: 2;
  transition: transform var(--transition-normal);
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.3);
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.timeline-card {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex-grow: 1;
}

.timeline-header {
  margin-bottom: 0.75rem;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.timeline-institution {
  font-size: 0.875rem;
  color: var(--accent-secondary);
  font-weight: 500;
}

.timeline-field {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.timeline-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.timeline-grade-badge {
  display: inline-block;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 229, 255, 0.2);
  color: var(--accent-primary);
  padding: 0.375rem 1rem;
  border-radius: 3.125rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Achievements section right column */
.achievements-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.highlight-border {
  border-left: 3px solid var(--accent-primary);
}

.achievement-card {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-icon-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1rem;
}

.medal-icon {
  width: 2rem;
  height: 2rem;
  color: var(--accent-primary);
}

.card-icon-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

.achievements-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  gap: 1.25rem;
}

.achievement-item {
  display: flex;
  gap: 1.25rem;
}

.achievement-badge-number {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  color: #0B0F19;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0.25rem 0.9375rem rgba(0, 229, 255, 0.2);
}

.light-theme .achievement-badge-number {
  color: #FFFFFF;
}

.trophy-badge-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 1px solid rgba(0, 229, 255, 0.2);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.achievement-details h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.achievement-event {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-secondary);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.achievement-details p {
  font-size: 0.8438rem;
  color: var(--text-secondary);
}

/* ==========================================================================
   FEATURED PROJECTS
   ========================================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 2rem;
}

.project-card {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  border-radius: 1.25rem;
  contain: layout paint;
}

.project-header-img {
  position: relative;
  background: #0f1524;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 18.75rem;
}

.project-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-card:hover .project-img {
  transform: scale(1.05);
}

.project-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-neural-mesh {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proj-svg {
  width: 80%;
  opacity: 0.85;
}

.project-overlay-title {
  position: absolute;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: -2px;
  color: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.project-details-body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.project-category {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.project-links {
  display: flex;
  gap: 1rem;
}

.proj-link-icon {
  color: var(--text-secondary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.proj-link-icon:hover {
  color: var(--accent-primary);
  transform: translateY(-2px);
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1rem;
  letter-spacing: -0.5px;
}

.project-summary {
  color: var(--text-secondary);
  font-size: 0.9062rem;
  margin-bottom: 1.25rem;
}

.project-highlights {
  list-style: none;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.project-highlights li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.8438rem;
  color: var(--text-secondary);
}

.project-highlights li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: bold;
}

.project-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-secondary);
  border: 1px solid var(--glass-border);
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
}

/* ==========================================================================
   TECHNICAL SKILLS
   ========================================================================== */
.skills-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.skill-category-card {
  padding: 1.5rem;
  border: 4px solid var(--text-primary) !important;
  border-left: 5px solid var(--card-accent, var(--accent-primary)) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 6px 6px 0 var(--text-primary) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.skill-category-card:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 10px 10px 0 var(--card-accent, var(--accent-primary)) !important;
}

.light-theme .skill-category-card:hover {
  box-shadow: 10px 10px 0 var(--card-accent, var(--accent-primary)) !important;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

.category-icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--card-accent, var(--accent-primary));
  flex-shrink: 0;
}

.category-header h3 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
}

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--glass-border);
  padding: 0.3125rem 0.75rem;
  border-radius: 3.125rem;
  transition: all var(--transition-fast);
}

.skill-tag:hover {
  color: #0B0F19;
  background: var(--card-accent, var(--accent-primary));
  border-color: var(--card-accent, var(--accent-primary));
  transform: scale(1.05);
}

.light-theme .skill-tag:hover {
  color: #FFFFFF;
}

/* Currently Learning Card */
.currently-learning-card {
  border-left-style: dashed;
}

.learning-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: pulse-dot 1.8s infinite;
  margin-left: auto;
  flex-shrink: 0;
}

@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Certifications badges bottom panel */
.certifications-container {
  margin-top: 3rem;
}

.certifications-heading {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

.certifications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: 1.25rem;
}

.cert-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}

.cert-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.svg-icon.verified {
  color: var(--accent-primary);
}

.cert-info h4 {
  font-family: var(--font-display);
  font-size: 0.9062rem;
  font-weight: 600;
  color: var(--text-primary);
}

.cert-issuer {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.contact-wrapper {
  max-width: 37.5rem;
  margin: 0 auto;
}

.contact-card {
  padding: 3rem;
}

.contact-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  text-align: center;
}

.contact-card-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  text-align: center;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Form Group with Floating Labels */
.form-group {
  position: relative;
  width: 100%;
}

.form-group input,
.form-group textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--glass-border);
  color: var(--text-primary);
  font-size: 0.9375rem;
  padding: 0.625rem 0.25rem;
  transition: border-color var(--transition-normal);
  resize: none;
}

.form-group label {
  position: absolute;
  top: 0.625rem;
  left: 0.25rem;
  color: var(--text-secondary);
  font-size: 0.9375rem;
  pointer-events: none;
  transition: all var(--transition-normal);
}

/* Floating Label Animation */
.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
  top: -1rem;
  left: 0;
  font-size: 0.75rem;
  color: var(--accent-primary);
  font-weight: 600;
}

.form-group input:focus,
.form-group textarea:focus {
  border-bottom-color: var(--accent-primary);
}

/* Validation Error Styles */
.form-group.invalid input,
.form-group.invalid textarea {
  border-bottom-color: #EF4444;
}

.form-group.invalid label {
  color: #EF4444;
}

.error-msg {
  position: absolute;
  bottom: -1.25rem;
  left: 0.25rem;
  font-size: 0.6875rem;
  color: #EF4444;
  display: none;
}

.form-group.invalid .error-msg {
  display: block;
}

.btn-submit {
  width: 100%;
  margin-top: 1rem;
}

.send-icon {
  margin-left: 0.5rem;
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-normal);
}

.btn-submit:hover .send-icon {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   SUCCESS MODAL OVERLAY
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  max-width: 27.5rem;
  width: 90%;
  padding: 2.5rem;
  text-align: center;
  transform: translateY(1.25rem) scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-card {
  transform: translateY(0) scale(1);
}

.modal-icon-success {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.modal-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
}

.modal-card p {
  color: var(--text-secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

#successUser {
  font-weight: 600;
  color: var(--text-primary);
}

.btn-close-modal {
  width: 100%;
}

/* ==========================================================================
   REVEAL SCROLL ANIMATION
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  pointer-events: none;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--glass-border);
  padding: 2.5rem 0;
  background: var(--bg-secondary);
  transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.copyright {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--accent-primary);
}

/* ==========================================================================
   KEYFRAME ANIMATIONS
   ========================================================================== */
@keyframes blink {
  from, to { color: transparent }
  50% { color: var(--accent-primary) }
}

@keyframes mouseScroll {
  0% { transform: translateY(0); opacity: 0; }
  50% { transform: translateY(0.5rem); opacity: 1; }
  100% { transform: translateY(1rem); opacity: 0; }
}

@keyframes rotateClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes pulseScale {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* Entrance Animations */
.animate-pop {
  opacity: 0;
  transform: scale(0.9);
  animation: entrancePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes entrancePop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==========================================================================
   MEDIA QUERIES (RESPONSIVENESS)
   ========================================================================== */

/* Up to Desktop/Laptop transition range */
@media (max-width: 64rem) {
  .hero-title {
    font-size: 2.75rem;
    height: auto;
  }
  
  .floating-socials {
    display: none; /* Hide floating side menu on smaller screens, rely on footer */
  }

  .about-grid, .education-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Tablet Layout & Navigation collapsing */
@media (max-width: 64rem) {
  /* Hamburger Menu implementation */
  .mobile-menu-toggle {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: var(--nav-height);
    right: -100%;
    width: 17.5rem;
    height: calc(100vh - var(--nav-height));
    background: var(--bg-secondary);
    border-left: 1px solid var(--glass-border);
    padding: 2.5rem;
    box-shadow: -0.625rem 0 1.875rem rgba(0,0,0,0.25);
    transition: right var(--transition-normal);
  }

  .nav-menu.active {
    right: 0;
  }

  .nav-links {
    flex-direction: column;
    gap: 1.5rem;
  }

  .nav-link {
    font-size: 1.125rem;
  }

  /* Hamburger Bars active transition */
  .mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
  }
  
  .mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
    opacity: 0;
  }
  
  .mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
  }
}

@media (max-width: 48rem) {
  :root {
    --nav-height: 4.375rem;
  }

  .section {
    padding: 2.25rem 0;
  }

  /* Hero Section scaling */
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }

  .hero-content {
    align-items: center;
  }

  .hero-title {
    font-size: 2.375rem;
    height: auto;
    margin-bottom: 1rem;
  }

  .hero-bio {
    font-size: 0.9375rem;
    margin-bottom: 1.75rem;
  }

  .hero-graphic {
    order: -1; /* Graphic on top in mobile view */
  }

  .graphic-element {
    max-width: 16.25rem;
  }

  /* Projects Card */
  .project-card {
    grid-template-columns: 1fr;
  }

  .project-header-img {
    min-height: 12.5rem;
  }

  .project-details-body {
    padding: 1.5rem;
  }

  .footer-container {
    flex-direction: column;
    gap: 1.25rem;
    text-align: center;
  }
}

/* Mobile Screen optimization */
@media (max-width: 30rem) {
  .hero-title {
    font-size: 1.875rem;
  }
  
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .about-highlights-card, .timeline-card, .achievement-card, .contact-card {
    padding: 1.25rem;
  }
}

/* ==========================================================================
   FLUID SVG PAGE TRANSITIONS
   ========================================================================== */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.transition-overlay svg {
  width: 100vw;
  height: 100vh;
  display: block;
}


/* ==========================================================================
   NEO-BRUTALIST & GLITCH PROJECT CARDS
   ========================================================================== */
.project-card, .motion-lab-card {
  border: 4px solid var(--text-primary) !important;
  background: var(--bg-secondary) !important;
  box-shadow: 8px 8px 0 var(--text-primary) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.project-card:hover, .motion-lab-card:hover {
  transform: translate(-6px, -6px) !important;
  box-shadow: 14px 14px 0 var(--accent-cyan) !important;
}


/* Underline slide effect on hover */
.project-title {
  position: relative;
  overflow: hidden;
  padding-bottom: 0.375rem;
  display: inline-block;
}

.project-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent-cyan);
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}

.project-card:hover .project-title::after,
.motion-lab-card:hover .project-title::after {
  transform: translateX(0);
}

/* Neo-brutalist Buttons for Project links */
.project-links a.proj-link-icon {
  background: var(--bg-primary) !important;
  border: 3px solid var(--text-primary) !important;
  color: var(--text-primary) !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 3px 3px 0 var(--text-primary) !important;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s !important;
  border-radius: 0 !important; /* brutalist style */
}

.project-links a.proj-link-icon:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 var(--accent-cyan) !important;
  background: var(--text-primary) !important;
  color: var(--bg-primary) !important;
}

.project-links a.proj-link-icon:active {
  transform: translate(0, 0) !important;
  box-shadow: 1px 1px 0 var(--text-primary) !important;
}

/* Glitch keyframe definition */
@keyframes projectGlitch {
  0% { transform: translate(1px, 1px) skew(0deg); }
  20% { transform: translate(-1px, -1px) skew(0deg); }
  40% { transform: translate(-1px, 1px) skew(2deg); }
  60% { transform: translate(1px, -1px) skew(-2deg); }
  80% { transform: translate(1px, 1px) skew(0deg); }
  100% { transform: translate(-1px, -1px) skew(0deg); }
}

/* Allow text selection in form controls */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ==========================================================================
   COLLAPSIBLE PROJECT DETAILS
   ========================================================================== */
.project-collapsible-body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-slow), margin-top var(--transition-slow);
  margin-top: 0;
}

.project-card.expanded {
  grid-template-columns: 1fr;
}

.project-card.expanded .project-header-img {
  min-height: 24rem;
  height: 24rem;
}

.project-card.expanded .project-collapsible-body {
  max-height: 22rem; /* fixed height constraints */
  opacity: 1;
  margin-top: 1.25rem;
  overflow-y: auto;  /* scroll inside the card body */
  padding-right: 0.5rem;
}

/* Custom Webkit scrollbar for internal card scroll */
.project-collapsible-body::-webkit-scrollbar {
  width: 6px;
}

.project-collapsible-body::-webkit-scrollbar-track {
  background: rgba(19, 26, 44, 0.4);
  border-radius: 4px;
}

.project-collapsible-body::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.project-collapsible-body::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}


.project-expand-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px dashed var(--glass-border);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-primary);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.project-expand-toggle:hover {
  color: var(--text-primary);
}

.project-expand-toggle:active {
  transform: scale(0.98);
}

.project-expand-toggle .chevron-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--transition-normal);
}

.project-card.expanded .project-expand-toggle .chevron-icon {
  transform: rotate(180deg);
}

/* ==========================================================================
   CASE STUDY TYPOGRAPHY & CARDS
   ========================================================================== */
.case-study-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.case-section-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--accent-primary);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.25rem;
  letter-spacing: 0.05em;
}

.case-text {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.case-text-muted {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.case-text-muted.text-small {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.case-list {
  padding-left: 1.25rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.case-list li {
  margin-bottom: 0.5rem;
}

.case-list code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-primary);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--accent-secondary);
}

.telemetry-math-card {
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-radius: 6px;
  background: rgba(19, 26, 44, 0.4);
  border: 1px solid var(--glass-border);
}

.telemetry-math-card h5 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.math-equation {
  background: var(--bg-primary);
  border: 1px solid var(--glass-border);
  padding: 0.75rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--accent-primary);
  text-align: center;
  margin: 0.5rem 0;
  letter-spacing: 0.05em;
  box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.05);
}

/* ==========================================================================
   KEY PLATFORM FEATURES STYLING
   ========================================================================== */
.case-list-features {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.feature-item {
  border-left: 3px solid var(--glass-border);
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  transition: border-left-color var(--transition-fast);
}

.feature-item strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--text-primary);
  display: inline-block;
  margin-bottom: 0.25rem;
}

.feature-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.feature-badge.accent-blue { background: rgba(59, 130, 246, 0.15); color: #60A5FA; border: 1px solid rgba(59, 130, 246, 0.3); }
.feature-badge.accent-cyan { background: rgba(6, 182, 212, 0.15); color: #22D3EE; border: 1px solid rgba(6, 182, 212, 0.3); }
.feature-badge.accent-green { background: rgba(16, 185, 129, 0.15); color: #34D399; border: 1px solid rgba(16, 185, 129, 0.3); }
.feature-badge.accent-red { background: rgba(239, 68, 68, 0.15); color: #F87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.feature-badge.accent-purple { background: rgba(168, 85, 247, 0.15); color: #C084FC; border: 1px solid rgba(168, 85, 247, 0.3); }

/* Left border highlights on hover of feature items */
.feature-item:hover {
  border-left-color: var(--accent-primary);
}

/* ==========================================================================
   NETFLIX-STYLE PREMIUM CERTIFICATIONS DASHBOARD
   ========================================================================== */
.certifications-dashboard-container {
  position: relative;
  width: 100%;
  margin: 2rem auto;
  padding: 2rem;
  background: radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.03) 0%, transparent 70%);
  border-radius: 20px;
  box-sizing: border-box;
}

/* Header Styles */
.cert-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  gap: 2rem;
}

.cert-medal-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 12px;
  background: rgba(11, 25, 44, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
  flex-shrink: 0;
}

.cert-medal-badge svg {
  width: 1.75rem;
  height: 1.75rem;
}

.cert-title-wrapper {
  text-align: center;
  flex-grow: 1;
}

.prof-growth-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.5rem;
}

.premium-cert-title {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.02em;
}

.premium-cert-title .gradient-text-blue {
  background: linear-gradient(135deg, #00E5FF 0%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.premium-cert-subtitle {
  font-size: 0.9375rem;
  color: var(--text-muted);
  max-width: 32rem;
  margin: 0 auto;
  line-height: 1.5;
}

.cert-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--font-display);
  font-size: 0.8125rem !important;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(19, 26, 44, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-transform: none;
}

.cert-view-all-btn:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: transparent;
  transform: translateY(-2px);
}

.view-all-arrow {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--transition-fast);
}

.cert-view-all-btn:hover .view-all-arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   RADIAL TRANSITION MASK STYLING
   ========================================================================== */
.radial-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-primary);
  z-index: 9999;
  pointer-events: none;
  clip-path: circle(0% at 0% 100%);
  transition: clip-path 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.radial-transition-overlay.active {
  clip-path: circle(150% at 0% 100%);
  pointer-events: auto;
}
/* Contact Footer Actions Layout */
.contact-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  gap: 2rem;
}

.contact-direct-links {
  display: flex;
  align-items: center;
}

.direct-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.direct-link svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent-primary);
}

.direct-link:hover {
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .security-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .contact-footer-actions {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
}


/* Slider Track Layout */
.slider-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.slider-track {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2.5rem 1.25rem;
  margin: 0 -1.25rem;
}

.slider-track::-webkit-scrollbar {
  display: none;
}

/* High-End Certification Card */
.cert-card {
  position: relative;
  flex: 0 0 16.5rem; /* width 264px */
  height: 25.5rem;    /* height 408px - increased to prevent overlaps */
  background: rgba(11, 20, 38, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  transform-origin: center center;
  transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out, border-color 300ms ease-in-out, background 300ms ease-in-out;
  cursor: pointer;
  z-index: 1;
  contain: layout paint;
}

/* Top Pill Labels */
.cert-pills-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.cert-pill {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.cert-pill.platform-blue { background: rgba(59, 130, 246, 0.12); color: #3B82F6; border: 1px solid rgba(59, 130, 246, 0.2); }
.cert-pill.platform-green { background: rgba(16, 185, 129, 0.12); color: #10B981; border: 1px solid rgba(16, 185, 129, 0.2); }
.cert-pill.platform-purple { background: rgba(139, 92, 246, 0.12); color: #8B5CF6; border: 1px solid rgba(139, 92, 246, 0.2); }
.cert-pill.featured-star {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(251, 191, 36, 0.12);
  color: #FBBF24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

.featured-star svg {
  width: 0.6875rem;
  height: 0.6875rem;
  fill: currentColor;
}

/* Logo Circle in Center */
.cert-logo-circle {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: rgba(19, 28, 48, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.75rem auto; /* Saved 24px of vertical space */
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
  transition: border-color 300ms ease-in-out, transform 300ms ease-in-out;
}

.brand-logo-svg {
  width: 2.25rem;
  height: 2.25rem;
}

/* Card Content Middle */
.cert-info-col {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: 0.5rem;
}

.cert-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.7rem; /* Standardized height for exactly 2 lines of title */
  text-align: center;
}

.cert-card-subtitle {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
  display: block;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cert-card-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cert-card-date svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* Pinned Bottom Button */
.cert-verify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  height: 2.5rem; /* Fixed height for all buttons */
  padding: 0 1rem !important;
  font-family: var(--font-display);
  font-size: 0.8125rem !important;
  font-weight: 700;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  transition: all 300ms ease-in-out;
  text-transform: none;
  margin-top: auto; /* Standardized flex-push to bottom of the card */
  box-sizing: border-box;
}

.cert-verify-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Hover Scaling and Glowing Effects */
.cert-card:hover {
  transform: scale(1.08);
  background: rgba(15, 29, 54, 0.75);
  border-color: var(--accent-primary);
  box-shadow: 0 0 35px rgba(0, 229, 255, 0.25);
  z-index: 10;
}

.cert-card:hover .cert-logo-circle {
  border-color: rgba(0, 229, 255, 0.25);
  transform: scale(1.05);
}

.cert-card:hover .cert-verify-btn {
  background: linear-gradient(135deg, #00E5FF 0%, #3B82F6 100%);
  color: var(--bg-primary);
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

/* Navigation Chevrons */
.slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(11, 19, 36, 0.75);
  border: 1px solid rgba(0, 229, 255, 0.15);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-normal);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.slider-nav-btn:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.25);
}

.slider-nav-btn.prev-btn { left: -1rem; }
.slider-nav-btn.next-btn { right: -1rem; }

.certifications-dashboard-container:hover .slider-nav-btn {
  opacity: 1;
  pointer-events: auto;
}

/* Dot Indicators */
.slider-dots-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  margin: 1.5rem 0 3.5rem 0;
}

.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.slider-dot.active {
  width: 14px;
  border-radius: 3px;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
}

/* Dashboard Metadata Bottom Bar */
.cert-dashboard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px dashed var(--glass-border);
  padding-top: 2rem;
  gap: 2rem;
}

.footer-meta-card {
  flex: 0 1 17.5rem;
  background: rgba(11, 20, 38, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
}

.meta-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.meta-card-body {
  display: flex;
  flex-direction: column;
}

.meta-card-body strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
}

.meta-card-body .meta-date,
.meta-card-body .meta-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Pulse Cyan Dot */
.pulse-cyan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7);
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(0, 229, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 229, 255, 0);
  }
}

.meta-shield-icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--accent-secondary);
}

/* Center Text */
.constantly-learning-text {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.constantly-learning-text .cyan-tag {
  color: var(--accent-primary);
  font-family: var(--font-mono);
  font-weight: 700;
}

/* Responsive details */
@media (max-width: 768px) {
  .cert-dashboard-header {
    flex-direction: column;
    text-align: center;
  }
  .cert-view-all-wrapper {
    margin-top: 0.5rem;
  }
  .cert-dashboard-footer {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-meta-card {
    width: 100%;
    flex: none;
  }
}

/* ==========================================================================
   LIGHT MODE CERTIFICATIONS OPTIMIZATIONS
   ========================================================================== */
.light-theme .cert-card {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.light-theme .cert-logo-circle {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.05);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.04);
}

.light-theme .cert-card-subtitle {
  color: #2563EB; /* High-contrast blue */
}

.light-theme .cert-card-date {
  color: #64748B;
}

.light-theme .cert-verify-btn {
  color: #334155;
  border-color: rgba(15, 23, 42, 0.12);
}

.light-theme .cert-card:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #3B82F6;
  box-shadow: 0 15px 35px rgba(59, 130, 246, 0.18);
}

.light-theme .cert-card:hover .cert-verify-btn {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.light-theme .slider-nav-btn {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #1E293B;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.light-theme .slider-nav-btn:hover {
  border-color: #3B82F6;
  color: #2563EB;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.light-theme .slider-dot {
  background: rgba(15, 23, 42, 0.15);
}

.light-theme .slider-dot.active {
  background: #3B82F6;
  box-shadow: 0 0 8px #3B82F6;
}

.light-theme .footer-meta-card {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);
}

/* Light Theme Header & View-All Button Overrides */
.light-theme .cert-medal-badge {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: #2563EB !important;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.08) !important;
}

.light-theme .cert-view-all-btn {
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  color: #1E293B !important;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03) !important;
}

.light-theme .cert-view-all-btn:hover {
  background: #1E293B !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Grid Layout Wrap for Certifications Row */
.slider-track.grid-layout {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(1, 1fr) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: 29.5rem !important;
  gap: 2rem !important;
  padding: 1.5rem 0.75rem !important;
  margin: 0 !important;
}

/* Custom Scrollbar for Certifications Grid View */
.slider-track.grid-layout::-webkit-scrollbar {
  width: 6px;
}

.slider-track.grid-layout::-webkit-scrollbar-track {
  background: rgba(19, 26, 44, 0.4);
  border-radius: 4px;
}

.slider-track.grid-layout::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
  border-radius: 4px;
}

.slider-track.grid-layout::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

@media (min-width: 48rem) {
  .slider-track.grid-layout {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 64rem) {
  .slider-track.grid-layout {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.slider-track.grid-layout .cert-card {
  flex: none !important;
  width: 100% !important;
  height: 24.5rem !important;
}

/* Premium Certificate Lightbox Modal Styles */
.cert-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.cert-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.cert-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(8px);
}

.cert-modal-container {
  position: relative;
  width: 95%;
  max-width: 1000px;
  background: var(--bg-secondary);
  border: 4px solid var(--text-primary) !important;
  box-shadow: 8px 8px 0 var(--text-primary) !important;
  border-radius: 16px;
  padding: 2rem;
  z-index: 10001;
  transform: scale(0.9);
  transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cert-modal.active .cert-modal-container {
  transform: scale(1);
}

.light-theme .cert-modal-container {
  background: rgba(255, 255, 255, 0.98);
  border-color: #000000 !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

.cert-modal-close {
  position: absolute;
  top: -1.25rem;
  right: -1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 2px solid var(--text-primary);
  box-shadow: 3px 3px 0 var(--text-primary);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10002;
  transition: all var(--transition-normal);
}

.light-theme .cert-modal-close {
  background: #FFFFFF;
  border-color: #000000;
  color: #1E293B;
  box-shadow: 3px 3px 0 #000000;
}

.cert-modal-close:hover {
  transform: rotate(90deg) scale(1.1);
  background: var(--accent-primary);
  color: #0B0F19;
}

.light-theme .cert-modal-close:hover {
  background: #3B82F6;
  color: #FFFFFF;
}

/* ==========================================================================
   TWO-COLUMN DIALOG LAYOUT
   ========================================================================== */
.cert-modal-content {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
  min-height: 480px;
}

@media (max-width: 64rem) {
  .cert-modal-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    min-height: auto;
  }
}

.cert-modal-preview-pane {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 480px;
  background: rgba(0, 0, 0, 0.25);
  border: 2px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
}

.light-theme .cert-modal-preview-pane {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
}

@media (max-width: 64rem) {
  .cert-modal-preview-pane {
    height: 300px;
  }
}

.cert-preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
}

.cert-modal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.light-theme .cert-modal-img {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1);
}

.cert-modal-pdf {
  width: 100%;
  height: 100% !important;
  border-radius: 6px;
  border: none;
}

/* Metadata & Info Pane */
.cert-modal-info-pane {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.25rem;
}

.cert-modal-header {
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1rem;
}

.light-theme .cert-modal-header {
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.cert-title-display {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.light-theme .cert-title-display {
  color: #1E293B;
}

.cert-meta-display {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.light-theme .cert-meta-display {
  color: #475569;
}

/* Learning and Skills Sections */
.cert-modal-learning h4,
.cert-modal-skills-section h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  margin-top: 0;
}

.light-theme .cert-modal-learning h4,
.light-theme .cert-modal-skills-section h4 {
  color: #2563EB;
}

.cert-learning-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.light-theme .cert-learning-text {
  color: #475569;
}

.cert-modal-skills-section {
  margin-top: 0.25rem;
}

.cert-modal-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  justify-content: flex-start;
}

/* Actions & Fullscreen Trigger */
.cert-modal-actions {
  margin-top: auto;
  padding-top: 1rem;
}

.cert-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--accent-primary) !important;
  color: #0B0F19 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0 #000000 !important;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
}

.light-theme .cert-fullscreen-btn {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

.cert-fullscreen-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000000 !important;
}

.cert-fullscreen-btn:active {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 #000000 !important;
}

.action-icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.5;
}

/* Fallback Error Box (Only on Load failure) */
.cert-modal-error-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  width: 100%;
  height: 100%;
}

.fallback-medal-icon {
  width: 4rem;
  height: 4rem;
  color: var(--accent-secondary);
  margin-bottom: 1.5rem;
}

.fallback-medal-icon svg {
  width: 100%;
  height: 100%;
}

.cert-modal-error-box h3 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--text-primary);
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.cert-modal-error-box p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 320px;
}

.cert-path-display {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  border: 1px dashed var(--glass-border);
}

.light-theme .cert-path-display {
  color: #0D9488;
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.1);
}

.fallback-note code {
  color: var(--accent-primary);
  font-family: var(--font-mono);
}

.light-theme .fallback-note code {
  color: #2563EB;
}


/* ==========================================================================
   CERT STATS STRIP
   ========================================================================== */
.cert-stats-strip {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cert-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: 12px;
  min-width: 120px;
}

.cert-stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--accent-primary);
  line-height: 1;
}

.cert-stat-number::after {
  content: '+';
  font-size: 1.25rem;
  color: var(--text-muted);
  margin-left: 2px;
}

.cert-stat-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.light-theme .cert-stat-number {
  color: #2563EB;
}

@media (max-width: 48rem) {
  .cert-stats-strip {
    gap: 0.75rem;
  }
  .cert-stat-item {
    padding: 0.75rem 1rem;
    min-width: 90px;
  }
  .cert-stat-number {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   CERT FILTER CHIPS
   ========================================================================== */
.cert-filter-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.cert-filter-chip {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  padding: 0.375rem 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cert-filter-chip:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.cert-filter-chip.active {
  color: #0B0F19;
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.25);
}

.light-theme .cert-filter-chip:hover {
  border-color: #3B82F6;
}

.light-theme .cert-filter-chip.active {
  color: #FFFFFF;
  background: #3B82F6;
  border-color: #3B82F6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

/* ==========================================================================
   PREMIUM CARD HOVER TILT & GRADIENT BORDER
   ========================================================================== */
.cert-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  position: relative;
}

.cert-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(135deg, transparent 40%, rgba(0, 229, 255, 0.3) 50%, transparent 60%);
  background-size: 300% 300%;
  background-position: 0% 0%;
  z-index: -1;
  opacity: 0;
  transition: opacity 300ms ease, background-position 600ms ease;
}

.cert-card:hover::before {
  opacity: 1;
  background-position: 100% 100%;
}

.light-theme .cert-card::before {
  background: linear-gradient(135deg, transparent 40%, rgba(59, 130, 246, 0.25) 50%, transparent 60%);
  background-size: 300% 300%;
  background-position: 0% 0%;
}

.cert-card:hover {
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.03);
}

/* The old modal styling block has been consolidated into the unified two-column modal styles above */

/* ==========================================================================
   GLOBAL NEO-BRUTALIST STYLING FOR STRUCTURAL CARDS
   ========================================================================== */
.about-highlights-card,
.about-focus-card,
.timeline-card,
.achievement-card,
.contact-card {
  border: 4px solid var(--text-primary) !important;
  background: #1E293B !important; /* Softened from #131A2C to medium slate-800 */
  color: #F3F4F6 !important; /* Force light text color */
  box-shadow: 6px 6px 0 var(--text-primary) !important;
  border-radius: 16px !important; /* Rounded corners to match other portfolio elements */
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.about-highlights-card:hover,
.about-focus-card:hover,
.timeline-card:hover,
.achievement-card:hover,
.contact-card:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 10px 10px 0 var(--accent-primary) !important;
}

/* Force light colors on headings, lists, and details inside these dark cards */
.about-highlights-card h3,
.about-highlights-card h4,
.about-highlights-card p,
.about-focus-card h3,
.about-focus-card li,
.timeline-card h3,
.timeline-card p,
.timeline-card span,
.achievement-card h3,
.achievement-card h4,
.achievement-card p,
.contact-card h2,
.contact-card p,
.contact-card label {
  color: #F3F4F6 !important;
}

/* Keep accent colors on specific metadata highlights */
.timeline-date,
.timeline-institution,
.achievement-event,
.focus-list li::before {
  color: var(--accent-primary) !important;
}

/* Specific timeline card layout stack fix */
.timeline-card {
  justify-content: flex-start !important;
}

.timeline-card .timeline-header {
  margin-bottom: 1rem !important;
}

.timeline-card .timeline-field {
  margin-bottom: 0.75rem !important;
}

.timeline-card .timeline-desc {
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
}

.timeline-card .timeline-grade-badge {
  align-self: flex-start;
  margin-top: auto; /* Push badge to bottom if extra space, but keeps normal flow */
}

/* Retain left accent stripe on achievements card */
.achievement-card.highlight-border {
  border-left: 5px solid var(--accent-primary) !important;
}

/* ==========================================================================
   NEO-BRUTALIST STYLING FOR CERTIFICATIONS SECTION
   ========================================================================== */
.certifications-dashboard-container,
.cert-card {
  border: 4px solid #000000 !important;
  box-shadow: 6px 6px 0 #000000 !important;
  border-radius: 16px !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.cert-card {
  box-shadow: 4px 4px 0 #000000 !important;
  transform: none !important;
}

.cert-card:hover {
  transform: translate(-4px, -4px) !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

/* Disable the old hover tilt and glow borders on cert card */
.cert-card::before {
  display: none !important;
}

/* ==========================================================================
   PROJECT BRAND LOGO STRIP
   ========================================================================== */
.project-brand-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
}

.brand-strip-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.brand-strip-logos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.brand-logo-item:hover {
  opacity: 1;
  transform: scale(1.1);
}

.brand-logo-item svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ==========================================================================
   CONTACT FORM INPUT VISIBILITY OVERRIDES (FOR DARK CARD BACKGROUND)
   ========================================================================== */
.contact-card .form-group input,
.contact-card .form-group textarea {
  border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
  color: #FFFFFF !important;
}

.contact-card .form-group label {
  color: rgba(255, 255, 255, 0.6) !important;
}

.contact-card .form-group input:focus,
.contact-card .form-group textarea:focus {
  border-bottom-color: var(--accent-primary) !important;
}

.contact-card .form-group input:focus ~ label,
.contact-card .form-group input:not(:placeholder-shown) ~ label,
.contact-card .form-group textarea:focus ~ label,
.contact-card .form-group textarea:not(:placeholder-shown) ~ label {
  color: var(--accent-primary) !important;
}

/* ==========================================================================
   PREMIUM AMBIENT CSS RAIN BACKGROUND
   ========================================================================== */
.rain-bg-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2; /* Safely behind all content elements */
  pointer-events: none;
  --c: var(--accent-primary);
  opacity: 0.16; /* Subtle, professional opacity */
  mix-blend-mode: screen;
  transition: opacity var(--transition-normal);
  
  background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
    radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  animation: hi 150s linear infinite;
  will-change: background-position;
}

/* Light theme color blending adjust */
.light-theme .rain-bg-container {
  opacity: 0.15; /* Beautifully visible yet professional */
  mix-blend-mode: normal;
  --c: var(--accent-primary); /* Uses the theme's royal blue accent */
}

.rain-bg-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(
    circle at 50% 50%,
    #0000 0,
    #0000 2px,
    var(--bg-primary) 2px
  );
  background-size: 8px 8px;
  --f: blur(1em) brightness(6);
  animation: hii 12s linear infinite;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 350.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

@keyframes hii {
  0% {
    backdrop-filter: var(--f) hue-rotate(0deg);
  }
  to {
    backdrop-filter: var(--f) hue-rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rain-bg-container,
  .rain-bg-container::after {
    animation: none !important;
    backdrop-filter: none !important;
  }
}

/* Cert card brief description styling inside the slider */
.cert-card-brief-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.4rem; /* Standardized height for alignment */
}

.light-theme .cert-card-brief-desc {
  color: #64748B;
}

/* ==========================================================================
   404 ERROR PAGE STYLING
   ========================================================================== */
.error-page-body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--bg-primary);
}

.error-page-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  z-index: 10;
  position: relative;
}

.error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2.5rem;
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  background: var(--bg-card);
  border: 4px solid var(--text-primary) !important;
  box-shadow: 8px 8px 0 var(--text-primary) !important;
}

.light-theme .error-card {
  background: rgba(255, 255, 255, 0.98);
  border-color: #000000 !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

.error-badge {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-primary);
  background: rgba(0, 229, 255, 0.08);
  border: 1px solid rgba(0, 229, 255, 0.2);
  padding: 4px 12px;
  border-radius: 50px;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.light-theme .error-badge {
  color: #2563EB;
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}

.error-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

.light-theme .error-title {
  color: #1E293B;
}

.error-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 2rem 0;
}

.light-theme .error-description {
  color: #475569;
}

.return-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: var(--accent-primary) !important;
  color: #0B0F19 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0 #000000 !important;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  width: 100%;
  cursor: pointer;
}

.light-theme .return-home-btn {
  background: #3B82F6 !important;
  color: #FFFFFF !important;
}

.return-home-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 #000000 !important;
}

.return-home-btn:active {
  transform: translate(0, 0);
  box-shadow: 3px 3px 0 #000000 !important;
}

.return-home-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.5;
  transition: transform 0.2s ease;
}

.return-home-btn:hover svg {
  transform: translateX(-4px);
}