body { padding-top: 56px; font-family: 'SF Pro Display', -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; }
h1 { font-size: 2.5rem; letter-spacing: -0.02em; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background: linear-gradient(135deg, #f0f9f0 0%, #e8f5e8 100%); position: relative; overflow: hidden; }

/* ----------------------------- */
/* Fleur Glassmorphism Theme     */
/* ----------------------------- */
:root {
  --fl-primary: #4caf50;
  --fl-primary-2: #66bb6a;
  --fl-accent: #e8f5e9;
  --fl-mint: #f1f8f6;
  --fl-cream: #faf7f2;
  --fl-brown: #8d6e63;
  --fl-charcoal: #212121;
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-shadow: 0 10px 30px rgba(76, 175, 80, 0.08);
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-fast: 150ms ease;
}

/* Text defaults */
body, p, li { color: var(--fl-charcoal); }

/* Glass nav */
.glass-nav { 
  background: rgba(255,255,255,0.8);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  z-index: 1050 !important; /* Ensure navbar stays above other elements */
}
.glass-nav .navbar-nav {
  z-index: 1051 !important;
}
.glass-nav .navbar-collapse {
  z-index: 1052 !important;
}
.glass-nav .nav-link { color: #1b1b1b; position: relative; transition: color 0.3s ease; }
.glass-nav .nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--fl-primary), var(--fl-primary-2)); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; }
.glass-nav .nav-link:hover { color: var(--fl-primary); }
.glass-nav .nav-link:hover::after { transform: scaleX(1); }
.glass-nav .navbar-brand { font-weight: 700; color: #1b1b1b; }
/* Dropdown menus glass */
.dropdown-menu { 
  background: rgba(255,255,255,0.95); 
  backdrop-filter: blur(14px); 
  -webkit-backdrop-filter: blur(14px); 
  border: 1px solid var(--glass-border); 
  box-shadow: var(--glass-shadow); 
  z-index: 1060 !important; /* Ensure dropdown stays above navbar and other elements */
}
.dropdown-item:hover { background: rgba(76,175,80,0.08); }

/* Ensure nav items stay above other content */
.navbar-nav .nav-item { 
  position: relative; 
  z-index: 1055; 
}
.navbar-nav .dropdown-toggle {
  position: relative;
  z-index: 1056;
}

/* Mobile navbar toggle with logo and close state */
.navbar-toggler .toggler-close { display: none; font-size: 1.75rem; line-height: 1; margin-left: .25rem; }
.navbar-toggler .toggler-hamburger { display: inline-block; }
.navbar-toggler[aria-expanded="true"] .toggler-hamburger { display: none; }
.navbar-toggler[aria-expanded="true"] .toggler-close { display: inline-block; }
.toggler-logo { height: 28px; width: 28px; border-radius: 6px; }

/* Make dropdowns usable on small screens (stacked within the collapse) */
@media (max-width: 991.98px) {
  .navbar-collapse { background: rgba(255,255,255,0.96); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.12); padding: .5rem; margin-top: .5rem; }
  .navbar-nav .dropdown-menu { position: static !important; float: none; box-shadow: none; background: transparent; border: 0; padding-top: 0; padding-bottom: .5rem; }
  .navbar-nav .dropdown-menu .dropdown-item { padding-left: 1.25rem; }
}

/* Hide toggle button on large screens */
@media (min-width: 992px) {
  .navbar-toggler { display: none !important; }
}

/* Glass cards (applied to Bootstrap .card and callouts) */
.glass-card, .bd-callout, .card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
}
.card:hover, .bd-callout:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(76, 175, 80, 0.12); border-color: rgba(76,175,80,0.35); }
.card, .bd-callout { transition: transform var(--transition-fast), box-shadow var(--transition-fast); }

/* Scroll-based reveal animations */
.reveal, .revealDelay1, .revealDelay2, .revealDelay3, .revealDelay4, .revealDelay5, .revealDelay6 {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.reveal.show, .revealDelay1.show, .revealDelay2.show, .revealDelay3.show, .revealDelay4.show, .revealDelay5.show, .revealDelay6.show {
  opacity: 1;
}

/* Interactive link image hover effects */
.link-img {
  background-size: 91% !important;
  transition: all 0.3s ease !important;
}

.link-img:hover {
  background-size: 96% !important;
}

/* Enhanced glass card hover effects */
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Responsive adjustments for animation elements */
@media (max-width: 768px) {
  .reveal, .revealDelay1, .revealDelay2, .revealDelay3, .revealDelay4, .revealDelay5, .revealDelay6 {
    opacity: 1; /* Show all elements on mobile to avoid issues */
  }
  
  .glass-card {
    margin-bottom: 1rem;
  }
}

/* Buttons (if used) */
.btn-primary { background: var(--fl-primary); border-color: var(--fl-primary); }
.btn-primary:hover { background: var(--fl-primary-2); border-color: var(--fl-primary-2); }

/* Hero: animated molecular pattern */
.bg-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( circle at 20% 30%, rgba(76,175,80,0.12), transparent 35% ),
              radial-gradient( circle at 80% 20%, rgba(102,187,106,0.12), transparent 40% ),
              radial-gradient( circle at 40% 80%, rgba(76,175,80,0.10), transparent 35% );
  animation: floatDots 16s linear infinite alternate;
}
@keyframes floatDots { from { transform: translateY(0px); } to { transform: translateY(-12px); } }
/* floating probiotic particles */
.hero-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-particles .p { position: absolute; width: 10px; height: 10px; background: rgba(76,175,80,0.15); border-radius: 50%; filter: blur(1px); animation: bubble 12s infinite ease-in-out; }
@keyframes bubble { 0%{ transform: translateY(20px); opacity: 0.0;} 30%{opacity:.6;} 100%{ transform: translateY(-220px); opacity: 0;} }
/* Hero card + text styles */
.hero-card { background: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--glass-shadow); }
.hero-title { font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.hero-tagline { font-size: 1.1rem; opacity: .9; }
.pulse { animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ opacity: .9 } 50%{ opacity: 1 } }

/* Section backgrounds */
.section { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5)); border-radius: var(--radius-lg); }

/* Micro-interactions */
a { transition: color var(--transition-fast), opacity var(--transition-fast); }
a:hover { color: var(--fl-primary); }

/* ----------------------------- */
/* Homepage full background      */
/* ----------------------------- */
/* Applies a full-page background image with a dark overlay only on the homepage. */
.home-page {
  /* Overlay first, then image */
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    /* url('https://static.igem.wiki/teams/6036/project/background-3.webp') center top / cover no-repeat fixed; */
    url('https://static.igem.wiki/teams/6036/assets/fleur-bg-3.avif') center top / cover no-repeat fixed;
    /* Nudge visible area to show more of the center/lower portion */
  background-position: center 70%;
}
/* Prefer AVIF with WEBP fallback on hosts/browsers that cache/ignore AVIF */
@supports (background-image: image-set(url("https://static.igem.wiki/teams/6036/assets/fleur-bg-3.avif") type("image/avif") 1x)) {
  .home-page {
    background:
      linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
      image-set(
        url('https://static.igem.wiki/teams/6036/assets/fleur-bg-3.avif') type('image/avif') 1x,
        url('https://static.igem.wiki/teams/6036/project/background-3.webp') type('image/webp') 1x
      ) center top / cover no-repeat fixed;
  }
}

/* Make the hero transparent so the background image shows through */
.home-page .video-hero-fullwidth {
  background: transparent;
}

/* iOS/mobile fallback: avoid fixed attachment issues */
@media (max-width: 1024px) {
  .home-page {
    background-attachment: scroll;
    /* Keep mobile view focused lower as well */
    background-position: center 70%;
    background-size: cover;
  }
}

/* Prevent header/menu pushing the hero too far down on short widths */
@media (max-width: 1200px) {
  .home-page .video-hero-fullwidth { padding-top: 56px; }
}

/* If menu wraps to two lines, keep the visual center of the image in view */
@media (max-width: 992px) {
  .home-page { background-position: center 60%; }
}

/* When navbar collapses (<992px), swap to a dark green gradient only */
@media (max-width: 991.98px) {
  .home-page {
    background-image: linear-gradient(135deg, #0c3a1f 0%, #092b16 100%) !important;
  }
}

/* Apply photo background + transparent header to all non-home pages.
   Uses CSS var --page-bg-url if provided via inline style; falls back to default. */
body:not(.home-page) {
  background:
    linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
    var(--page-bg-url, url('https://static.igem.wiki/teams/6036/wetlab/hartzer-3.webp')) center 35% / cover no-repeat fixed;
}
@media (max-width: 1024px) {
  body:not(.home-page) {
    background-attachment: scroll;
    background-position: center 70%;
  }
}
body:not(.home-page) .bg-hero { background: transparent !important; padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
body:not(.home-page) .bg-hero:before { display: none !important; }
body:not(.home-page) .bg-hero .display-4 { color: #ffffff !important; font-size: clamp(3.25rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.02em; text-shadow: 0 3px 12px rgba(0,0,0,0.35); }

/* Page title hero (non-home) */
.page-title-hero {
  padding: 10rem 0 4rem;
}
.page-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(3.25rem, 7vw, 5rem);
  text-shadow: 0 6px 30px rgba(0,0,0,0.45);
  margin: 0 0 0.5rem;
}

/* ----------------------------- */
/* Engineering page background    */
/* ----------------------------- */
/* Engineering page keeps same global system; no hard-coded image here. */

/* Remove green hero background and style title on Engineering */
.engineering-page .bg-hero { background: transparent !important; }
.engineering-page .bg-hero:before { display: none !important; }
.engineering-page .bg-hero { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.engineering-page .bg-hero .display-4 {
  color: #ffffff !important;
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

/* Progress indicators */
.progress { height: 10px; background: rgba(0,0,0,0.06); border-radius: 999px; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, #4caf50, #66bb6a); box-shadow: 0 0 8px rgba(76,175,80,0.25); transition: width 1.2s ease; }
.progress-label { font-weight: 600; font-size: .9rem; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom: 1.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* Members page circular avatars */
#pi .card-img-top,
#advisors .card-img-top,
#leaders .card-img-top,
#members .card-img-top {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 1.25rem auto 0;
}

.rotate-90 {
  transform: rotate(90deg);
}

@media (max-width: 576px) {
  #pi .card-img-top,
  #advisors .card-img-top,
  #leaders .card-img-top,
  #members .card-img-top {
    width: 140px;
    height: 140px;
  }
}

/* Hero animation overlay */
.animation-container {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  width: 100%;
  max-width: 3000px;
  padding: 2rem 0;
}

.text-animation {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity 1s ease-in-out;
  margin-bottom: 0;
}

.text-animation.fade-out {
  opacity: 0;
}

.text-animation span {
  font-size: 4rem;
  font-weight: 700;
  color: rgb(255, 255, 255);
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  line-height: 1.2;
  display: inline-block;
}

.text-animation-second {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 25;
  text-align: center;
  width: 90%;
}

.text-animation-second.show {
  opacity: 1;
}

.text-animation-second span {
  font-size: 4rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  line-height: 1.2;
  display: inline-block;
}

.text-animation-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 24;
  text-align: center;
  width: 90%;
}

.text-animation-middle.show {
  opacity: 1;
}

.text-animation-middle.fade-out {
  opacity: 0;
}

.text-animation-middle span {
  font-size: 4rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  line-height: 1.2;
  display: inline-block;
}

/* Fourth text (final) */
.text-animation-fourth {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 2s ease-in-out;
  z-index: 26;
  text-align: center;
  width: 90%;
}
.text-animation-fourth.show { opacity: 1; }
.text-animation-fourth span {
  font-size: 4rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8);
  line-height: 1.2;
  display: inline-block;
}

.animation-logo {
  max-width: 500px;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 4s ease-in-out;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}

.animation-logo.show {
  opacity: 1;
}

/* Responsive text animation */
@media (max-width: 1200px) {
  .text-animation span,
  .text-animation-middle span,
  .text-animation-second span,
  .text-animation-fourth span {
    font-size: 2.5rem;
  }
  
  .animation-logo {
    max-width: 400px;
  }
  
  .text-animation {
    top: -60px;
  }
  
  .text-animation-middle {
    top: 35%;
  }
  
  .text-animation-second {
    top: 0%;
  }
}

@media (max-width: 768px) {
  .text-animation span,
  .text-animation-middle span,
  .text-animation-second span,
  .text-animation-fourth span {
    font-size: 2rem;
  }
  
  .animation-logo {
    max-width: 350px;
  }
  
  .animation-container {
    width: 95%;
    padding: 1.5rem 0;
  }
  
  .text-animation {
    margin-bottom: 2rem;
    top: -50px;
  }
  
  .text-animation-middle {
    top: 35%;
  }
  
  .text-animation-second {
    top: 0%;
  }
}

@media (max-width: 576px) {
  .text-animation span,
  .text-animation-middle span,
  .text-animation-second span,
  .text-animation-fourth span {
    font-size: 1.6rem;
  }
  
  .animation-logo {
    max-width: 280px;
  }
  
  .text-animation {
    margin-bottom: 1.5rem;
    top: -40px;
  }
  
  .text-animation-middle {
    top: 35%;
  }
  
  .text-animation-second {
    top: 0%;
  }
}

/* Video Hero Section - Full Width Immersive */
.video-hero-fullwidth {
  position: relative;
  overflow: hidden;
  margin-top: -56px; /* Offset the body padding-top to make section flush with navbar */
  padding-top: 56px; /* Add padding back to account for fixed navbar */
  min-height: 100vh;
  background: linear-gradient(135deg, #85e15d 0%, #6bc73e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video-fullwidth {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  /* Fallback for older browsers using padding-based technique */
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  height: 0;
  overflow: hidden;
}

.hero-video-immersive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Modern browsers: use aspect-ratio property */
  aspect-ratio: 16 / 9;
}

/* Hero Text Overlay */
.hero-text-overlay {
  position: absolute;
  bottom: 20%;
  left: 0;
  right: 0;
  z-index: 10;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
  padding: 3rem 0;
}

.hero-title-immersive {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 4px 20px rgba(0,0,0,0.8) !important;
}

.hero-tagline-immersive {
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Responsive full-width video */
@media (max-width: 1200px) {
  /* Video will automatically maintain 16:9 aspect ratio */
}

@media (max-width: 768px) {
  /* Video will automatically maintain 16:9 aspect ratio */
  
  .video-hero-fullwidth h1 {
    font-size: 2.2rem !important;
  }
  
  .video-hero-fullwidth .lead {
    font-size: 1.1rem !important;
  }
  
  .hero-text-overlay {
    bottom: 15%;
    padding: 2rem 0;
  }
}

@media (max-width: 576px) {
  /* Video will automatically maintain 16:9 aspect ratio */
  
  .video-hero-fullwidth h1 {
    font-size: 1.8rem !important;
  }
  
  .hero-text-overlay {
    bottom: 10%;
    padding: 1.5rem 0;
  }
}

/* Green Wave Animation */
.wave-container-green {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.wave-container-green svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}

.wave-container-green .parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.wave-container-green .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.wave-container-green .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.wave-container-green .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.wave-container-green .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

/* Legacy Video Hero Section (keeping for compatibility) */
.video-hero {
  position: relative;
  overflow: hidden;
}

.hero-video-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.hero-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  display: block;
}

/* Responsive video */
@media (max-width: 768px) {
  .hero-video-container {
    max-width: 100%;
    margin: 0 1rem;
  }
  
  .video-hero h1 {
    font-size: 2.5rem !important;
  }
  
  .video-hero .lead {
    font-size: 1.1rem !important;
  }
}

@media (max-width: 576px) {
  .video-hero h1 {
    font-size: 2rem !important;
  }
  
  .hero-video-container {
    margin: 0 0.5rem;
  }
}

/* Wave Animation */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.wave-container svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}

.wave-container .parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.wave-container .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.wave-container .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.wave-container .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.wave-container .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

/* Hero content styling */
.hero-content {
  z-index: 2;
  position: relative;
}

.hero-title {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Enhanced Footer Styles */
.footer-enhanced {
  background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(33,33,33,0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 4rem 0 2rem;
  margin-top: 4rem;
  position: relative;
  overflow: hidden;
}

.footer-enhanced::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(76,175,80,0.5), transparent);
}

/* Sponsors */
.footer-sponsors {
  border-top: 1px solid rgba(255,255,255,0.12);
}
.sponsor-logos {
  margin: 0;
  padding: 0;
}
.sponsor-logo {
  height: 150px;
  width: auto;
  opacity: 0.9;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
.sponsor-logo:hover { opacity: 1; background: rgba(255,255,255,0.12); }

@media (max-width: 576px) {
  .sponsor-logo { height: 100px; padding: 6px 8px; }
}

/* Homepage inline image standardization */
.homepage-image-frame {
  max-width: min(70vw, 1100px);
  margin: 2.25rem auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.homepage-image-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(280px, 45vh, 520px);
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .homepage-image-frame { max-width: 92vw; margin: 1.5rem auto; }
}

/* How it works numbered bullets */
.how-it-works-list { text-align: left; display: inline-block; margin: 0 auto; padding-left: 0; font-size: 1.1rem; }
.how-it-works-list li { position: relative; padding: 0.5rem 0 0.5rem 2.2rem; color: var(--fl-charcoal); }
.how-it-works-list .hiw-num {
  position: absolute; left: 0; top: 0.55rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: linear-gradient(135deg, #85e15d, #6bc73e);
  color: hsl(0, 0%, 100%); font-weight: 700; font-size: 0.95rem; line-height: 1.6rem; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Homepage: make text cards opaque with a subtle gradient for better legibility */
.home-page .glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,251,247,0.98));
  border: 1px solid rgba(0,0,0,0.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* One-screen pacing between homepage sections, with sticky card visuals */
.home-page .home-section { padding: 10vh 0 12vh; }
@media (min-height: 900px) { .home-page .home-section { padding: 14vh 0 16vh; } }
@media (min-height: 900px) { .home-page .home-section { padding: 16vh 0 18vh; } }
@media (max-width: 992px) { .home-page .home-section { padding: 8vh 0 10vh; } }

/* Explore cards on homepage */
.home-link-card {
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-link-card img { border-radius: 12px; object-fit: cover; width: 100%; height: 180px; }
.home-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
}

/* Homepage typography enhancements */
.home-page .glass-card h2 {
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--fl-charcoal);
  text-shadow: 0 2px 10px rgba(0,0,0,0.06);
  margin-bottom: 1rem;
}
.home-page .glass-card p.lead {
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  line-height: 1.65;
  color: #2a3a32;
}
.home-page .glass-card p.lead b,
.home-page .glass-card p.lead strong {
  color: #17361f;
}

/* Decorative accent for small labels (optional use) */
.home-page .eyebrow {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #85e15d, #6bc73e);
  color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .04em;
}
/* Footer Brand Section */
.footer-brand {
  padding-right: 2rem;
}

.footer-logo {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  text-shadow: 0 2px 10px rgba(76,175,80,0.3);
}

.footer-description {
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Contact Section */
.footer-contact p {
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
}

.contact-icon {
  margin-right: 0.5rem;
  font-size: 1rem;
}

/* Social Links */
.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: rgba(76,175,80,0.3);
  border-color: rgba(76,175,80,0.5);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(76,175,80,0.2);
}

.social-icon {
  font-size: 1.2rem;
}

/* Footer Headings */
.footer-heading {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--fl-primary), var(--fl-primary-2));
  border-radius: 1px;
}

/* Footer Links */
.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  padding: 0.25rem 0;
}

.footer-links a:hover {
  color: var(--fl-primary);
  transform: translateX(5px);
  text-decoration: none;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 2rem;
  margin-top: 2rem;
}

.footer-legal p {
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.license-link, .repo-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  transition: color 0.3s ease;
}

.license-link:hover, .repo-link:hover {
  color: var(--fl-primary);
  text-decoration: none;
}

.license-icon, .repo-icon {
  margin-right: 0.25rem;
}

/* iGEM Badge */
.footer-badge {
  text-align: right;
}

.igem-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--fl-primary), var(--fl-primary-2));
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(76,175,80,0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  .footer-enhanced {
    padding: 3rem 0 1.5rem;
  }
  
  .footer-brand {
    padding-right: 0;
    margin-bottom: 2rem;
  }
  
  .footer-social {
    justify-content: center;
    margin-top: 1.5rem;
  }
  
  .footer-badge {
    text-align: center;
    margin-top: 1rem;
  }
  
  .footer-links a:hover {
    transform: none;
  }
}
/* Scroll reveal */
.reveal-up { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-up.in { opacity: 1; transform: translateY(0); }
/* Mobile adjustments */
@media (max-width: 576px) { .glass-nav { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }

/* Small grid horizontal offset to align sections */
/* .grid-offset { margin-left: 10px; }
@media (max-width: 576px) { .grid-offset { margin-left: 10; } } */

/* Sticky TOC on description page */
.toc-sticky { position: sticky; top: 88px; }
.toc-sticky .nav-link { color: #ffffff; font-weight: 700; font-size: 1.05rem; padding-left: 0; display: block; padding: .5rem .75rem; border-radius: 10px; }
.toc-sticky .nav-link:hover { text-decoration: none; background: rgba(255,255,255,0.12); }
.engineering-page .toc-sticky .nav-link { color: #ffffff; }
.toc-sticky .nav-link.active { color: #0c2340; background: #ffffff; font-weight: 800; text-decoration: none; }

/* Default left sidebar include styles */
.toc-sticky .nav .nav-link.fw-bold { color: #ffffff; }
.toc-sticky .collapse .nav-link { font-weight: 600; color: #eaf7ec; }
.toc-sticky .collapse .nav-link:hover { background: rgba(255,255,255,0.12); }

/* Page-like surface for main content */
.content-surface { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 60px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); padding: 2rem; }
.content-surface > h2, .content-surface > h3 { scroll-margin-top: 120px; }

/* Unified subtitle/section heading style (all pages except Home) */
body:not(.home-page) h2 {
  text-align: center;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -0.01em;
  color: var(--fl-charcoal);
  margin: 2.5rem 0 1.5rem;
}

/* Optional smaller subtitle style */
body:not(.home-page) h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fl-charcoal);
}