/* ═══════════════════════════════════════════════════════════════════════════
   PyStatR+ Complete Styles for Quarto
   Award-Winning Futuristic Design
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS VARIABLE RESETS - Override Bootstrap defaults
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bs-nav-link-focus-shadow: none !important;
  --bs-navbar-active-color: #ffffff !important;
  --bs-focus-ring-width: 0 !important;
  --bs-focus-ring-opacity: 0 !important;
  --bs-focus-ring-color: transparent !important;
  --bs-navbar-nav-link-padding-x: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: REMOVE GAP BETWEEN NAVBAR AND HERO
   ═══════════════════════════════════════════════════════════════════════════ */
#quarto-content,
.page-layout-full,
main.content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.column-screen,
.column-screen-inset,
.column-page {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure Quarto column classes don't add unwanted margins */
.column-screen-inset {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

/* Ensure column-screen extends full viewport */
.column-screen {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden;
}

/* Hide Quarto title block on index */
.quarto-title-block,
#title-block-header {
  display: none !important;
}

/* White body background */
body {
  background-color: #ffffff !important;
  padding-top: 70px !important; /* Account for fixed navbar height */
}

main.content,
#quarto-content,
.page-columns {
  background-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK NAVBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.navbar,
.navbar.navbar-expand-lg,
.navbar.bg-light,
.navbar.bg-primary,
#quarto-header > nav,
header#quarto-header .navbar {
  background: linear-gradient(180deg, #0B1120 0%, #1E293B 100%) !important;
  border-bottom: 1px solid rgba(34, 211, 238, 0.25) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.navbar .container-fluid,
#quarto-header .navbar .container-fluid {
  padding-left: 2rem;
  padding-right: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.navbar-nav {
  margin-left: 2rem !important;
  gap: 0.5rem;
}

.navbar .navbar-nav.ms-auto,
#quarto-header .navbar-nav.ms-auto {
  margin-left: auto !important;
  gap: 0.75rem;
}

.navbar .navbar-brand,
#quarto-header .navbar-brand {
  padding: 0.5rem 0;
  margin-right: 2rem;
}

.navbar .navbar-brand img,
.navbar-brand img {
  height: 80px !important;
  width: auto !important;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
  transition: all 0.3s ease;
}

.navbar .navbar-brand:hover img {
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.6));
}

.navbar .nav-link,
.navbar .navbar-nav .nav-link,
#quarto-header .nav-link,
.navbar-nav .nav-link {
  color: #E5E7EB !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.3s ease !important;
}

.navbar .nav-link:hover,
.navbar .navbar-nav .nav-link:hover,
#quarto-header .nav-link:hover,
.navbar-nav .nav-link:hover {
  color: #22d3ee !important;
}

.navbar .dropdown-menu,
#quarto-header .dropdown-menu,
.dropdown-menu {
  background: #0B1120 !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.navbar .dropdown-item,
#quarto-header .dropdown-item,
.dropdown-menu .dropdown-item {
  color: #E5E7EB !important;
  padding: 0.5rem 1rem !important;
  transition: all 0.2s ease !important;
}

.navbar .dropdown-item:hover,
#quarto-header .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
  background: rgba(34, 211, 238, 0.15) !important;
  color: #22d3ee !important;
}

.navbar .bi,
.navbar i,
#quarto-header .bi {
  color: #9CA3AF !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
}

.navbar .bi:hover,
.navbar i:hover,
#quarto-header .bi:hover {
  color: #22d3ee !important;
}

#quarto-search input,
.navbar .aa-Form,
.navbar input[type="search"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  color: #E5E7EB !important;
  border-radius: 6px !important;
}

#quarto-search input::placeholder,
.navbar input::placeholder {
  color: #9CA3AF !important;
}

.navbar-toggler,
.navbar .navbar-toggler {
  border-color: rgba(34, 211, 238, 0.3) !important;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-label {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #22d3ee;
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: #0B1120;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #6B7280;
  max-width: 800px;
  margin: 0 auto;
}

.separator {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
  max-width: 800px;
  margin: 0 auto;
}

.text-muted { color: #6B7280; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  overflow: hidden;
  padding: 6rem 2rem 8rem;
  margin-top: -70px !important; /* Pull up to cover body padding */
  padding-top: calc(70px + 3rem) !important; /* Navbar height + desired padding */
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 25s linear infinite;
  z-index: 1;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 1;
}

.hero-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: float 10s ease-in-out infinite;
}

.hero-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  animation: float 12s ease-in-out infinite reverse;
}

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #22d3ee;
}

.particle-1 { top: 20%; left: 15%; animation: particleFloat 8s ease-in-out infinite; opacity: 0.6; }
.particle-2 { top: 40%; right: 20%; animation: particleFloat 10s ease-in-out infinite 1s; opacity: 0.4; }
.particle-3 { bottom: 30%; left: 25%; animation: particleFloat 12s ease-in-out infinite 2s; opacity: 0.5; }
.particle-4 { top: 60%; right: 30%; animation: particleFloat 9s ease-in-out infinite 0.5s; opacity: 0.3; background: #FFD700; }
.particle-5 { bottom: 20%; right: 15%; animation: particleFloat 11s ease-in-out infinite 1.5s; opacity: 0.4; }

.accent-line {
  position: absolute;
  z-index: 3;
}

.accent-line-top {
  top: 60px;
  left: 40px;
  width: 3px;
  height: 80px;
  background: linear-gradient(to bottom, #22d3ee, transparent);
  opacity: 0.6;
}

.accent-line-bottom {
  bottom: 80px;
  right: 60px;
  width: 120px;
  height: 3px;
  background: linear-gradient(to right, transparent, #22d3ee);
  opacity: 0.4;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items: center;
}

.hero-text { text-align: left; }

.hero-title {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.text-gradient {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 25%, #FFD700 50%, #22d3ee 75%, #06b6d4 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease-in-out infinite;
}

/* Hero Tagline - Stacked Design */
.hero-tagline-stack {
  margin-bottom: 1.5rem;
}

.tagline-top {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #22d3ee;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

.tagline-bottom {
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  color: #f59e0b;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* Legacy single tagline (keep for fallback) */
.hero-tagline {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  color: transparent;
  background: linear-gradient(135deg, #22d3ee 0%, #FFD700 50%, #22d3ee 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  animation: taglineShimmer 4s ease-in-out infinite;
}

@keyframes taglineShimmer {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.hero-description {
  font-size: 1.125rem;
  color: #E5E7EB;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 540px;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: white !important;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(34, 211, 238, 0.3);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.4);
  color: white !important;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  border: 2px solid rgba(34, 211, 238, 0.5);
  color: #22d3ee !important;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-outline:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: #22d3ee;
  color: #22d3ee !important;
}

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  border: 2px solid #22d3ee;
  color: #22d3ee !important;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-outline-dark:hover {
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee !important;
}

.btn-outline-light {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  border: 2px solid white;
  color: white !important;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-outline-light:hover {
  background: white;
  color: #0B1120 !important;
}

.hero-secondary-link {
  display: inline-block;
  margin-top: 1rem;
  color: #22d3ee;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hero-secondary-link:hover {
  color: #67e8f9;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hero Image Frame - Futuristic Container */
.hero-image-frame {
  position: relative;
  width: 100%;
  max-width: 500px;
  height: 380px;
  border-radius: 8px;
  overflow: visible;
}

/* Animated glowing border */
.image-glow-border {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6, #22d3ee);
  padding: 2px;
  animation: borderPulse 3s ease-in-out infinite;
  z-index: 0;
}

.image-glow-border::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0B1120;
  border-radius: 6px;
}

/* Corner geometric accents */
.corner-accent {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 20;
  opacity: 0.8;
}

.corner-tl {
  top: -4px;
  left: -4px;
  border-top: 2px solid #22d3ee;
  border-left: 2px solid #22d3ee;
  border-top-left-radius: 8px;
}

.corner-tr {
  top: -4px;
  right: -4px;
  border-top: 2px solid #3b82f6;
  border-right: 2px solid #3b82f6;
  border-top-right-radius: 8px;
}

.corner-bl {
  bottom: -4px;
  left: -4px;
  border-bottom: 2px solid #3b82f6;
  border-left: 2px solid #3b82f6;
  border-bottom-left-radius: 8px;
}

.corner-br {
  bottom: -4px;
  right: -4px;
  border-bottom: 2px solid #22d3ee;
  border-right: 2px solid #22d3ee;
  border-bottom-right-radius: 8px;
}

/* Image carousel */
.hero-carousel {
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  overflow: hidden;
  z-index: 10;
}

.hero-carousel .carousel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero-carousel .carousel-img.active {
  opacity: 1;
}

/* CSS-only carousel animation fallback */
.hero-carousel .carousel-img:nth-child(1) { animation: carouselFade 80s infinite 0s; }
.hero-carousel .carousel-img:nth-child(2) { animation: carouselFade 80s infinite 8s; }
.hero-carousel .carousel-img:nth-child(3) { animation: carouselFade 80s infinite 16s; }
.hero-carousel .carousel-img:nth-child(4) { animation: carouselFade 80s infinite 24s; }
.hero-carousel .carousel-img:nth-child(5) { animation: carouselFade 80s infinite 32s; }
.hero-carousel .carousel-img:nth-child(6) { animation: carouselFade 80s infinite 40s; }
.hero-carousel .carousel-img:nth-child(7) { animation: carouselFade 80s infinite 48s; }
.hero-carousel .carousel-img:nth-child(8) { animation: carouselFade 80s infinite 56s; }
.hero-carousel .carousel-img:nth-child(9) { animation: carouselFade 80s infinite 64s; }
.hero-carousel .carousel-img:nth-child(10) { animation: carouselFade 80s infinite 72s; }

@keyframes carouselFade {
  0%, 8% { opacity: 1; }
  10%, 100% { opacity: 0; }
}

/* Pulse glow effect overlay */
.scan-line-container {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  z-index: 15;
  pointer-events: none;
}

.scan-line {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 30px rgba(34, 211, 238, 0.3);
  animation: imagePulseGlow 3s ease-in-out infinite;
}

@keyframes imagePulseGlow {
  0%, 100% { 
    box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.2);
    opacity: 0.6;
  }
  50% { 
    box-shadow: inset 0 0 40px rgba(34, 211, 238, 0.4), inset 0 0 60px rgba(59, 130, 246, 0.2);
    opacity: 1;
  }
}

/* Data grid overlay */
.image-grid-overlay {
  position: absolute;
  inset: 2px;
  border-radius: 6px;
  opacity: 0.05;
  z-index: 12;
  pointer-events: none;
  background-image: 
    linear-gradient(0deg, rgba(34, 211, 238, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

@keyframes borderPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

/* Legacy logo styles (keep for other pages) */
.logo-container {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.3) 0%, transparent 70%);
  animation: pulse 3s ease-in-out infinite;
}

.logo-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(34, 211, 238, 0.3);
  animation: ringPulse 4s ease-in-out infinite;
}

.hero-logo {
  width: 200px;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(34, 211, 238, 0.4));
  animation: floatSlow 6s ease-in-out infinite;
}

.hero-bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOUNDER STORY SECTION - FLOATING CARD
   ═══════════════════════════════════════════════════════════════════════════ */
.section-founder-wrapper {
  padding: 0 2rem 4rem;
  margin-top: -8rem;
  position: relative;
  z-index: 20;
  background: transparent;
}

.section-founder-wrapper::before {
  content: '';
  position: absolute;
  top: 8rem;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, #f8fafc 15%);
  z-index: -1;
}

.section-founder {
  padding: 4rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 -10px 40px rgba(0, 0, 0, 0.3),
    0 25px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.section-founder::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
  filter: blur(60px);
}

.section-founder::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
  filter: blur(60px);
}

/* Glowing border accent */
.section-founder .glow-border {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  padding: 2px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.4), transparent 40%, transparent 60%, rgba(245, 158, 11, 0.3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

.section-founder .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

/* Founder Header */
.founder-header {
  text-align: center;
  margin-bottom: 3rem;
}

.founder-header .section-label {
  color: #22d3ee;
  margin-bottom: 0.5rem;
}

.founder-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: white;
  margin-bottom: 0;
  line-height: 1.1;
  background: linear-gradient(135deg, #ffffff 0%, #22d3ee 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Founder Grid */
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3rem;
}

/* Founder Image */
.founder-image-wrapper {
  position: relative;
}

.founder-image-frame {
  position: relative;
  border-radius: 12px;
  overflow: visible;
}

/* Animated glowing border - Gold/Amber theme */
.founder-image-frame .image-glow-border {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706, #f59e0b);
  padding: 2px;
  animation: borderPulseGold 3s ease-in-out infinite;
  z-index: 0;
}

.founder-image-frame .image-glow-border::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0B1120;
  border-radius: 10px;
}

@keyframes borderPulseGold {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    opacity: 0.8;
  }
  50% { 
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.6);
    opacity: 1;
  }
}

/* Corner geometric accents - Gold theme */
.founder-image-frame .corner-accent {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 20;
  opacity: 0.9;
}

.founder-image-frame .corner-tl {
  top: -6px;
  left: -6px;
  border-top: 2px solid #f59e0b;
  border-left: 2px solid #f59e0b;
  border-top-left-radius: 10px;
}

.founder-image-frame .corner-tr {
  top: -6px;
  right: -6px;
  border-top: 2px solid #22d3ee;
  border-right: 2px solid #22d3ee;
  border-top-right-radius: 10px;
}

.founder-image-frame .corner-bl {
  bottom: -6px;
  left: -6px;
  border-bottom: 2px solid #22d3ee;
  border-left: 2px solid #22d3ee;
  border-bottom-left-radius: 10px;
}

.founder-image-frame .corner-br {
  bottom: -6px;
  right: -6px;
  border-bottom: 2px solid #f59e0b;
  border-right: 2px solid #f59e0b;
  border-bottom-right-radius: 10px;
}

/* Image container */
.founder-image-frame .founder-image-inner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  z-index: 5;
}

.founder-photo {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(10%) contrast(1.05);
  transition: all 0.5s ease;
}

.founder-image-frame:hover .founder-photo {
  filter: sepia(0%) contrast(1.1);
  transform: scale(1.02);
}

/* Pulse glow overlay */
.founder-image-frame .pulse-overlay {
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  box-shadow: inset 0 0 30px rgba(245, 158, 11, 0.2);
  animation: imagePulseGold 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes imagePulseGold {
  0%, 100% { 
    box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.15);
    opacity: 0.6;
  }
  50% { 
    box-shadow: inset 0 0 40px rgba(245, 158, 11, 0.3), inset 0 0 60px rgba(34, 211, 238, 0.1);
    opacity: 1;
  }
}

.founder-image-frame .founder-image-inner .image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(11, 17, 32, 0.95), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 6;
}

.caption-location {
  color: #22d3ee;
  font-size: 0.875rem;
  font-weight: 600;
}

.caption-date {
  color: #f59e0b;
  font-size: 0.875rem;
  font-weight: 500;
}

/* Founder Story Content */
.founder-story {
  color: #E5E7EB;
}

.founder-narrative p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #D1D5DB;
  margin-bottom: 1.25rem;
}

.founder-narrative .story-lead {
  font-size: 1.15rem;
  color: #E5E7EB;
  font-weight: 500;
  line-height: 1.8;
}

.founder-quote {
  position: relative;
  margin: 1.5rem 0 0 0;
  padding: 1.25rem 1.5rem;
  background: rgba(34, 211, 238, 0.08);
  border-left: 4px solid #22d3ee;
  border-radius: 0 8px 8px 0;
  font-size: 1.1rem;
  font-style: italic;
  color: #22d3ee;
  line-height: 1.7;
}

.founder-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 15px;
  font-size: 3.5rem;
  color: rgba(34, 211, 238, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

/* Mission Statement - Full Width */
.founder-mission {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2.5rem;
  margin-top: 1rem;
}

.mission-content {
  max-width: 900px;
  margin: 0 auto 2rem;
  text-align: center;
}

.mission-content p {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #D1D5DB;
  margin-bottom: 1rem;
}

.mission-content p:last-child {
  margin-bottom: 0;
}

.mission-content strong {
  color: #f59e0b;
}

.mission-content em {
  color: #22d3ee;
  font-style: normal;
  font-weight: 600;
}

/* Founder Footer */
.founder-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.founder-signature {
  text-align: left;
}

.signature-name {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}

.signature-title {
  display: block;
  font-size: 0.9rem;
  color: #9CA3AF;
}

.founder-footer .cta-button {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
}

/* Responsive */
@media (max-width: 1024px) {
  .founder-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .founder-image-wrapper {
    max-width: 500px;
    margin: 0 auto;
  }
  
  .section-founder-wrapper {
    padding: 0 1rem;
  }
  
  .section-founder {
    padding: 3rem 2rem;
    border-radius: 20px;
  }
}

@media (max-width: 768px) {
  .section-founder-wrapper {
    margin-top: -2rem;
  }
  
  .section-founder {
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
  }
  
  .founder-mission {
    padding: 2rem 1.5rem;
  }
  
  .founder-footer {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }
  
  .founder-signature {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .section-founder-wrapper {
    padding: 0 0.75rem;
  }
  
  .section-founder {
    padding: 2rem 1.25rem;
  }
  
  .founder-narrative p {
    font-size: 1rem;
  }
  
  .founder-quote {
    font-size: 1rem;
    padding: 1rem 1.25rem;
  }
  
  .mission-content p {
    font-size: 1rem;
  }
}

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

.section-cta-center p {
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-mission {
  padding: 5rem 0;
  background: #ffffff;
}

.section-mission .container {
  max-width: 1200px;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.mission-grid.reverse {
  direction: rtl;
}

.mission-grid.reverse > * {
  direction: ltr;
}

.mission-content {
  text-align: left;
}

.mission-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0B1120;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.mission-subtitle {
  font-size: 1.35rem;
  font-weight: 600;
  color: #22d3ee !important;
  margin-bottom: 1.25rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.mission-content p.mission-subtitle {
  color: #22d3ee !important;
}

.mission-text {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.mission-text-muted {
  font-size: 1rem;
  color: #6B7280;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.mission-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.3), transparent);
  margin: 4rem 0;
}

.mission-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REUSABLE FUTURISTIC FRAME COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */
.futuristic-frame {
  position: relative;
  border-radius: 12px;
  overflow: visible;
  width: 100%;
  max-width: 450px;
}

/* Frame glow border - base */
.futuristic-frame .frame-glow-border {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  z-index: 0;
}

.futuristic-frame .frame-glow-border::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #f8fafc;
  border-radius: 10px;
}

/* Corner accents - base */
.futuristic-frame .corner-accent {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 20;
  opacity: 0.9;
}

.futuristic-frame .corner-tl {
  top: -5px;
  left: -5px;
  border-top-left-radius: 8px;
}

.futuristic-frame .corner-tr {
  top: -5px;
  right: -5px;
  border-top-right-radius: 8px;
}

.futuristic-frame .corner-bl {
  bottom: -5px;
  left: -5px;
  border-bottom-left-radius: 8px;
}

.futuristic-frame .corner-br {
  bottom: -5px;
  right: -5px;
  border-bottom-right-radius: 8px;
}

/* Frame inner */
.futuristic-frame .frame-inner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  z-index: 5;
}

.futuristic-frame .frame-img {
  width: 100%;
  height: auto;
  display: block;
  transition: all 0.5s ease;
}

.futuristic-frame:hover .frame-img {
  transform: scale(1.03);
}

/* Pulse overlay - base */
.futuristic-frame .frame-pulse-overlay {
  position: absolute;
  inset: 2px;
  border-radius: 10px;
  z-index: 10;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CYAN COLOR THEME
   ═══════════════════════════════════════════════════════════════════════════ */
.frame-cyan .frame-glow-border {
  background: linear-gradient(135deg, #22d3ee, #3b82f6, #22d3ee);
  animation: borderPulseCyan 3s ease-in-out infinite;
}

.frame-cyan .corner-tl {
  border-top: 2px solid #22d3ee;
  border-left: 2px solid #22d3ee;
}

.frame-cyan .corner-tr {
  border-top: 2px solid #3b82f6;
  border-right: 2px solid #3b82f6;
}

.frame-cyan .corner-bl {
  border-bottom: 2px solid #3b82f6;
  border-left: 2px solid #3b82f6;
}

.frame-cyan .corner-br {
  border-bottom: 2px solid #22d3ee;
  border-right: 2px solid #22d3ee;
}

.frame-cyan .frame-pulse-overlay {
  box-shadow: inset 0 0 25px rgba(34, 211, 238, 0.15);
  animation: framePulseCyan 3s ease-in-out infinite;
}

@keyframes borderPulseCyan {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
    opacity: 0.8;
  }
  50% { 
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.5);
    opacity: 1;
  }
}

@keyframes framePulseCyan {
  0%, 100% { 
    box-shadow: inset 0 0 20px rgba(34, 211, 238, 0.1);
    opacity: 0.5;
  }
  50% { 
    box-shadow: inset 0 0 35px rgba(34, 211, 238, 0.2);
    opacity: 0.8;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GOLD COLOR THEME
   ═══════════════════════════════════════════════════════════════════════════ */
.frame-gold .frame-glow-border {
  background: linear-gradient(135deg, #f59e0b, #d97706, #f59e0b);
  animation: borderPulseGoldFrame 3s ease-in-out infinite;
}

.frame-gold .corner-tl {
  border-top: 2px solid #f59e0b;
  border-left: 2px solid #f59e0b;
}

.frame-gold .corner-tr {
  border-top: 2px solid #22d3ee;
  border-right: 2px solid #22d3ee;
}

.frame-gold .corner-bl {
  border-bottom: 2px solid #22d3ee;
  border-left: 2px solid #22d3ee;
}

.frame-gold .corner-br {
  border-bottom: 2px solid #f59e0b;
  border-right: 2px solid #f59e0b;
}

.frame-gold .frame-pulse-overlay {
  box-shadow: inset 0 0 25px rgba(245, 158, 11, 0.15);
  animation: framePulseGold 3s ease-in-out infinite;
}

@keyframes borderPulseGoldFrame {
  0%, 100% { 
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
    opacity: 0.8;
  }
  50% { 
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
    opacity: 1;
  }
}

@keyframes framePulseGold {
  0%, 100% { 
    box-shadow: inset 0 0 20px rgba(245, 158, 11, 0.1);
    opacity: 0.5;
  }
  50% { 
    box-shadow: inset 0 0 35px rgba(245, 158, 11, 0.2);
    opacity: 0.8;
  }
}

/* Legacy styles (fallback) */
.mission-img-actual,
.vision-img-actual {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Placeholder styles (fallback) */
.image-placeholder {
  width: 100%;
  height: 350px;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.image-placeholder span {
  font-size: 5rem;
}

.image-placeholder p {
  color: #6B7280;
  font-weight: 500;
}

.mission-img {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(59, 130, 246, 0.15));
}

.vision-img {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(249, 115, 22, 0.1));
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-services-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-services-dark {
  padding: 5rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(34, 211, 238, 0.1);
}

.section-services-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

.section-services-dark::after {
  content: "";
  position: absolute;
  top: 0;
  right: 25%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
  filter: blur(60px);
}

.section-header-dark {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.section-label-dark {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #22d3ee;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.section-title-dark {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
}

.section-subtitle-dark {
  font-size: 1.125rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto;
}

.services-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.service-card-futuristic {
  position: relative;
}

.service-card-futuristic .service-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(20px);
}

.service-card-futuristic.cyan .service-glow {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
}

.service-card-futuristic.violet .service-glow {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.service-card-futuristic.amber .service-glow {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.service-card-futuristic:hover .service-glow {
  opacity: 0.2;
}

.service-card-inner {
  position: relative;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.service-card-futuristic:hover .service-card-inner {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-5px);
}

.service-card-futuristic.cyan:hover .service-card-inner {
  border-color: rgba(34, 211, 238, 0.4);
}

.service-card-futuristic.violet:hover .service-card-inner {
  border-color: rgba(139, 92, 246, 0.4);
}

.service-card-futuristic.amber:hover .service-card-inner {
  border-color: rgba(245, 158, 11, 0.4);
}

.service-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 20px;
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.3);
}

.service-badge.violet {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.3);
}

.service-badge.amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.service-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.service-icon-box.cyan {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
}

.service-icon-box.violet {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
}

.service-icon-box.amber {
  background: linear-gradient(135deg, #f59e0b, #f97316);
}

.service-card-inner h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.75rem;
}

.service-card-inner p {
  font-size: 0.95rem;
  color: #9CA3AF;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-link.cyan { color: #22d3ee; }
.service-link.violet { color: #a78bfa; }
.service-link.amber { color: #fbbf24; }

.service-link span {
  transition: transform 0.3s ease;
}

.service-link:hover span {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .services-grid-3 {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* Legacy mini services */
.section-services {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #ffffff, #f8fafc);
}

.services-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.service-card-mini {
  position: relative;
  background: white;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  text-align: center;
  text-decoration: none;
  transition: all 0.4s ease;
}

.service-card-mini:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(34, 211, 238, 0.3);
}

.mini-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 0.2rem 0.5rem;
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: white;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 10px;
  text-transform: uppercase;
}

.service-icon-mini {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}

.service-card-mini:hover .service-icon-mini {
  transform: scale(1.1);
}

.service-icon-mini.cyan { background: linear-gradient(135deg, #22d3ee, #0ea5e9); }
.service-icon-mini.amber { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.service-icon-mini.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.service-icon-mini.rose { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.service-icon-mini.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }
.service-icon-mini.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.service-card-mini h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VALUES SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-values-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-values-dark {
  padding: 5rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(34, 211, 238, 0.1);
}

.section-values-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  border-radius: 24px;
}

/* Spinning Logo Hero */
.values-hero {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.spinning-logo-container-dark {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 2rem;
}

.spinning-ring-dark {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #3b82f6, #22d3ee, #f59e0b);
  animation: spin 12s linear infinite;
  opacity: 0.7;
  filter: blur(3px);
}

.spinning-ring-inner-dark {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, transparent, #f59e0b);
  animation: spin 8s linear infinite reverse;
  opacity: 0.5;
}

.logo-center-dark {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.4),
    inset 0 0 20px rgba(34, 211, 238, 0.1);
  border: 2px solid rgba(34, 211, 238, 0.2);
}

.spinning-logo-dark {
  width: 70px;
  height: 70px;
  animation: spin 20s linear infinite;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

.philosophy-statement-dark {
  margin-bottom: 1rem;
}

.philosophy-statement-dark p {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
}

.philosophy-statement-dark .text-gold { 
  color: #fbbf24; 
  font-style: italic; 
}
.philosophy-statement-dark .text-cyan { 
  color: #22d3ee; 
  font-style: italic; 
}
.philosophy-statement-dark .text-white { 
  color: #e5e7eb; 
  font-style: italic; 
}

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

.values-grid-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 2;
  margin-bottom: 3rem;
}

.value-card-modern {
  position: relative;
}

.value-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(15px);
}

.value-glow.cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.value-glow.rose { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.value-glow.blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.value-glow.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }

.value-card-modern:hover .value-glow {
  opacity: 0.2;
}

.value-card-inner {
  position: relative;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.value-card-modern:hover .value-card-inner {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.3);
}

.value-icon-modern {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.value-icon-modern.cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.value-icon-modern.rose { background: linear-gradient(135deg, #f43f5e, #ec4899); }
.value-icon-modern.blue { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.value-icon-modern.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }

.value-card-inner h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.value-tagline-modern {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.value-tagline-modern.cyan { color: #22d3ee; }
.value-tagline-modern.rose { color: #f43f5e; }
.value-tagline-modern.blue { color: #60a5fa; }
.value-tagline-modern.emerald { color: #34d399; }

.value-card-inner p {
  font-size: 0.9rem;
  color: #9CA3AF;
  line-height: 1.65;
}

.philosophy-modern {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 3rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 2;
}

.philosophy-quote-mark {
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  font-size: 4rem;
  color: rgba(34, 211, 238, 0.15);
  font-family: Georgia, serif;
  line-height: 1;
}

.philosophy-text {
  font-size: 1.1rem;
  color: #D1D5DB;
  line-height: 1.8;
  font-style: italic;
  text-align: center;
}

.philosophy-text .text-cyan { color: #22d3ee; font-style: normal; font-weight: 600; }
.philosophy-text .text-gold { color: #fbbf24; font-style: normal; font-weight: 600; }

@media (max-width: 1024px) {
  .values-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .values-grid-modern {
    grid-template-columns: 1fr;
  }
  .philosophy-modern {
    padding: 1.5rem;
  }
}

/* Legacy values section */
.section-values {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.values-header {
  text-align: center;
  margin-bottom: 4rem;
}

.spinning-logo-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
}

.spinning-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #3b82f6, #22d3ee);
  animation: spin 15s linear infinite;
  opacity: 0.6;
  filter: blur(2px);
}

.spinning-ring-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, transparent, #22d3ee);
  animation: spin 10s linear infinite reverse;
  opacity: 0.4;
}

.logo-center {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 2px solid #e5e7eb;
}

.spinning-logo {
  width: 60px;
  height: 60px;
  animation: spin 20s linear infinite;
}

.philosophy-statement {
  margin-bottom: 2rem;
}

.philosophy-statement p {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
}

.text-orange { color: #f59e0b; font-style: italic; }
.text-blue { color: #3b82f6; font-style: italic; }
.text-gray { color: #6B7280; font-style: italic; }

.philosophy-box {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 2.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.philosophy-box p {
  color: #374151;
  line-height: 1.8;
  margin-bottom: 1rem;
}

.philosophy-box p:last-child {
  margin-bottom: 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.value-card {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: white;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  transition: all 0.4s ease;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border-color: rgba(34, 211, 238, 0.3);
}

.value-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.value-content h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.25rem;
}

.value-tagline {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.value-tagline.cyan { color: #22d3ee; }
.value-tagline.rose { color: #f43f5e; }
.value-tagline.blue { color: #3b82f6; }
.value-tagline.emerald { color: #10b981; }

.value-content p {
  color: #6B7280;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-team {
  padding: 5rem 0;
  background: #ffffff;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.team-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  text-align: center;
  transition: all 0.4s ease;
}

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

.team-card.founder {
  border-color: rgba(34, 211, 238, 0.3);
  background: linear-gradient(to bottom, rgba(34, 211, 238, 0.03), white);
}

.team-avatar {
  margin-bottom: 1rem;
}

.avatar-placeholder {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #6B7280;
}

.founder-avatar {
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: white;
}

.team-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.85rem;
  color: #22d3ee;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.team-location {
  font-size: 0.8rem;
  color: #9CA3AF;
  margin-bottom: 1rem;
}

.team-bio {
  font-size: 0.85rem;
  color: #6B7280;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-team-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-team-dark {
  padding: 5rem 3rem;
  background: linear-gradient(to bottom, #0B1120, #1E293B, #0B1120);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(59, 130, 246, 0.1);
}

.section-team-dark::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  filter: blur(60px);
}

.team-grid-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.team-card-modern {
  position: relative;
}

.team-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(20px);
}

.team-card-glow.cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.team-card-glow.amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.team-card-glow.violet { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.team-card-glow.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }

.team-card-modern:hover .team-card-glow {
  opacity: 0.15;
}

.team-card-content {
  position: relative;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.team-card-modern:hover .team-card-content {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.3);
}

.team-card-modern.founder .team-card-content {
  border-color: rgba(34, 211, 238, 0.2);
  background: rgba(34, 211, 238, 0.03);
}

.team-avatar-modern {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 1.25rem;
}

.avatar-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  animation: spin 10s linear infinite;
  opacity: 0.6;
}

.avatar-ring.amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.avatar-ring.violet { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.avatar-ring.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }

.avatar-placeholder-modern {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  border: 3px solid #0B1120;
}

.avatar-placeholder-modern.amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.avatar-placeholder-modern.violet { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.avatar-placeholder-modern.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }

.team-card-content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}

.team-role-modern {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.team-role-modern.cyan { color: #22d3ee; }
.team-role-modern.amber { color: #fbbf24; }
.team-role-modern.violet { color: #a78bfa; }
.team-role-modern.emerald { color: #34d399; }

.team-location-modern {
  font-size: 0.8rem;
  color: #9CA3AF;
  margin-bottom: 1rem;
}

.team-bio-modern {
  font-size: 0.85rem;
  color: #9CA3AF;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.team-badges {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.team-badge {
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 20px;
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.2);
}

.team-badge.amber {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.2);
}

.team-badge.violet {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.2);
}

.team-badge.emerald {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.2);
}

.btn-outline-light {
  display: inline-block;
  padding: 0.875rem 2rem;
  border: 2px solid rgba(34, 211, 238, 0.4);
  color: #22d3ee;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-outline-light:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: #22d3ee;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}

@media (max-width: 1024px) {
  .team-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .team-grid-modern {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM SECTION - 2 COLUMN HORIZONTAL CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
.team-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.team-card-horizontal {
  display: flex;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.4s ease;
}

.team-card-horizontal:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}


/* Photo Side */
.team-photo-side {
  position: relative;
  width: 200px;
  min-height: 280px;
  flex-shrink: 0;
  overflow: hidden;
}

.team-photo-side.cyan { background: linear-gradient(135deg, #22d3ee, #3b82f6); }
.team-photo-side.amber { background: linear-gradient(135deg, #f59e0b, #f97316); }
.team-photo-side.violet { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.team-photo-side.emerald { background: linear-gradient(135deg, #10b981, #14b8a6); }

.team-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.team-card-horizontal:hover .team-photo-img {
  transform: scale(1.05);
}

.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
  pointer-events: none;
}

.location-badge {
  bottom: 1rem;
  left: 1rem;
  z-index: 3;
  background: rgba(0, 0, 0, 0.75);
}

.award-badge, .experience-badge, .student-badge {
  top: 1rem;
  right: 1rem;
  z-index: 3;
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.team-photo-side.emerald .student-badge {
  background: rgba(16, 185, 129, 0.9);
}

/* Info Side */
.team-info-side {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.team-info-side h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}

.team-role-h {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.team-role-h.cyan { color: #22d3ee; }
.team-role-h.amber { color: #fbbf24; }
.team-role-h.violet { color: #a78bfa; }
.team-role-h.emerald { color: #34d399; }

.team-bio-h {
  font-size: 0.85rem;
  color: #9CA3AF;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.team-education {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.edu-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.edu-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.edu-items span {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
  border-radius: 4px;
  border: 1px solid rgba(34, 211, 238, 0.15);
}

.team-philosophy {
  font-size: 0.85rem;
  font-style: italic;
  color: #22d3ee;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-philosophy.amber { color: #fbbf24; }
.team-philosophy.violet { color: #a78bfa; }
.team-philosophy.emerald { color: #34d399; }

@media (max-width: 1024px) {
  .team-grid-2col {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .team-card-horizontal,
  
  .team-photo-side {
    width: 100%;
    min-height: 200px;
  }
  
  .team-info-side {
    padding: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERITAGE BANNER
   ═══════════════════════════════════════════════════════════════════════════ */
.section-heritage {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 100%);
  position: relative;
  overflow: hidden;
}

.section-heritage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
  filter: blur(60px);
}

.heritage-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.heritage-quote {
  position: relative;
}

.quote-mark {
  font-size: 6rem;
  color: rgba(34, 211, 238, 0.3);
  font-family: Georgia, serif;
  line-height: 1;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.heritage-quote p {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: #E5E7EB;
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  padding-top: 2rem;
}

.quote-author {
  display: block;
  font-size: 1rem;
  color: #22d3ee;
  font-weight: 600;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-blog-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-blog-dark {
  padding: 5rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(34, 211, 238, 0.1);
}

.section-blog-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  border-radius: 24px;
}

.blog-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}

.blog-card-modern {
  position: relative;
}

.blog-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(15px);
}

.blog-card-modern:hover .blog-card-glow {
  opacity: 0.15;
}

.blog-card-inner {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
}

.blog-card-modern:hover .blog-card-inner {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.3);
}

.blog-thumbnail-modern {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.blog-thumbnail-modern.cyan { background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(59, 130, 246, 0.2)); }
.blog-thumbnail-modern.violet { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.2)); }
.blog-thumbnail-modern.emerald { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(20, 184, 166, 0.2)); }

.thumbnail-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.blog-icon-modern {
  font-size: 3rem;
  position: relative;
  z-index: 1;
}

.blog-content-modern {
  padding: 1.5rem;
}

.blog-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.blog-category-modern {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
}

.blog-category-modern.cyan {
  background: rgba(34, 211, 238, 0.15);
  color: #22d3ee;
}

.blog-category-modern.violet {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
}

.blog-category-modern.emerald {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.blog-read-time {
  font-size: 0.75rem;
  color: #6B7280;
}

.blog-content-modern h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.blog-content-modern p {
  font-size: 0.875rem;
  color: #9CA3AF;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-status {
  font-size: 0.75rem;
  font-weight: 600;
  color: #fbbf24;
  padding: 0.2rem 0.5rem;
  background: rgba(251, 191, 36, 0.1);
  border-radius: 4px;
}

.blog-arrow {
  color: #22d3ee;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.blog-card-modern:hover .blog-arrow {
  transform: translateX(4px);
}

@media (max-width: 1024px) {
  .blog-grid-modern {
    grid-template-columns: 1fr;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Legacy Blog Section */
/* ═══════════════════════════════════════════════════════════════════════════
   BLOG SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-blog {
  padding: 5rem 0;
  background: linear-gradient(to bottom, #f8fafc, #ffffff);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

.blog-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: all 0.4s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(34, 211, 238, 0.3);
}

.blog-thumbnail {
  height: 180px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(59, 130, 246, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-icon {
  font-size: 4rem;
}

.blog-content {
  padding: 1.5rem;
}

.blog-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #22d3ee;
  margin-bottom: 0.75rem;
}

.blog-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.blog-content p {
  font-size: 0.9rem;
  color: #6B7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #9CA3AF;
  padding-top: 1rem;
  border-top: 1px solid #e5e7eb;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-testimonials {
  padding: 5rem 0;
  background: #ffffff;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.testimonial-card {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  position: relative;
  transition: all 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.testimonial-quote {
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  font-size: 4rem;
  color: rgba(34, 211, 238, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-text {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  position: relative;
  z-index: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #6B7280;
}

.author-info strong {
  display: block;
  font-size: 0.95rem;
  color: #0B1120;
}

.author-info span {
  font-size: 0.8rem;
  color: #9CA3AF;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-testimonials-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-testimonials-dark {
  padding: 5rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(34, 211, 238, 0.1);
}

.section-testimonials-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridFlow 20s linear infinite;
}

.section-testimonials-dark::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
  filter: blur(60px);
}

@keyframes gridFlow {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(50px) translateX(50px); }
}

.section-title-gradient {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  background: linear-gradient(135deg, #22d3ee, #3b82f6, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.testimonials-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 2;
}

.testimonial-card-modern {
  position: relative;
}

.testimonial-glow {
  display: none;
}

.testimonial-card-inner {
  position: relative;
  padding: 2rem;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  overflow: hidden;
}

/* Top glow bar - hidden by default */
.testimonial-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card-modern:hover .testimonial-card-inner {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

/* Show top glow bar on hover */
.testimonial-card-modern:hover .testimonial-card-inner::before {
  opacity: 1;
}

.testimonial-quote-icon {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 4rem;
  color: rgba(34, 211, 238, 0.2);
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial-stars {
  color: #fbbf24;
  font-size: 0.9rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.testimonial-text-modern {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.testimonial-service-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 20px;
  background: rgba(34, 211, 238, 0.1);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.4);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
  margin-bottom: 1.5rem;
}

.testimonial-service-badge.violet {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.2);
}

.testimonial-service-badge.emerald {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.2);
}

.testimonial-author-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #e2e8f0;
}

.author-avatar-modern {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  border: 2px solid rgba(34, 211, 238, 0.5);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.2);
}

.author-avatar-modern.violet {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.author-avatar-modern.emerald {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.2);
}

.author-info-modern strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 700;
}

.author-info-modern span {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
}

.author-info-modern .author-location {
  font-size: 0.75rem;
  color: #6B7280;
  margin-top: 0.25rem;
}

@media (max-width: 1024px) {
  .testimonials-grid-modern {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ETHICS SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-ethics-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-ethics-dark {
  padding: 5rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(59, 130, 246, 0.1);
}

.section-ethics-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  border-radius: 24px;
}

.ethics-content-modern {
  position: relative;
  z-index: 2;
}

.ethics-intro-modern {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ethics-icon-large {
  font-size: 3rem;
  flex-shrink: 0;
}

.ethics-intro-modern p {
  font-size: 1.1rem;
  color: #D1D5DB;
  line-height: 1.7;
}

.ethics-intro-modern strong {
  color: #22d3ee;
}

.ethics-grid-modern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 2rem;
}

.ethics-item-modern {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.ethics-item-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(34, 211, 238, 0.2);
  transform: translateY(-3px);
}

.ethics-check-modern {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #14b8a6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.ethics-item-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}

.ethics-item-content p {
  font-size: 0.875rem;
  color: #9CA3AF;
  line-height: 1.5;
}

.ethics-footer-modern {
  text-align: center;
  font-size: 0.9rem;
  color: #9CA3AF;
}

.ethics-footer-modern a {
  color: #22d3ee;
  text-decoration: none;
  font-weight: 600;
}

.ethics-footer-modern a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .ethics-intro-modern {
    flex-direction: column;
    text-align: center;
  }
  
  .ethics-grid-modern {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMUNITY SECTION - DARK FUTURISTIC
   ═══════════════════════════════════════════════════════════════════════════ */
.section-community-wrapper {
  padding: 4rem 2rem;
  background: linear-gradient(to bottom, #f8fafc 0%, #f8fafc 100%);
}

.section-community-dark {
  padding: 5rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(34, 211, 238, 0.1);
}

.section-community-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  border-radius: 24px;
}

.community-grid-modern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}

.community-card-modern {
  position: relative;
  text-decoration: none;
  display: block;
}

.community-card-glow {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.5s ease;
  filter: blur(15px);
}

.community-card-glow.youtube { background: linear-gradient(135deg, #ff0000, #cc0000); }
.community-card-glow.medium { background: linear-gradient(135deg, #00ab6c, #008f5a); }
.community-card-glow.facebook { background: linear-gradient(135deg, #1877f2, #0d5fc9); }
.community-card-glow.github { background: linear-gradient(135deg, #6e5494, #4a3a6b); }
.community-card-glow.store { background: linear-gradient(135deg, #f59e0b, #d97706); }

.community-card-modern:hover .community-card-glow {
  opacity: 0.25;
}

.community-card-inner {
  position: relative;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
}

.community-card-modern:hover .community-card-inner {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-5px);
}

.community-card-modern.youtube:hover .community-card-inner { border-color: rgba(255, 0, 0, 0.4); }
.community-card-modern.medium:hover .community-card-inner { border-color: rgba(0, 171, 108, 0.4); }
.community-card-modern.facebook:hover .community-card-inner { border-color: rgba(24, 119, 242, 0.4); }
.community-card-modern.github:hover .community-card-inner { border-color: rgba(110, 84, 148, 0.4); }
.community-card-modern.store:hover .community-card-inner { border-color: rgba(245, 158, 11, 0.4); }

.community-icon-box {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.community-icon-box.youtube { background: linear-gradient(135deg, #ff0000, #cc0000); }
.community-icon-box.medium { background: linear-gradient(135deg, #00ab6c, #008f5a); }
.community-icon-box.facebook { background: linear-gradient(135deg, #1877f2, #0d5fc9); }
.community-icon-box.github { background: linear-gradient(135deg, #6e5494, #4a3a6b); }
.community-icon-box.store { background: linear-gradient(135deg, #f59e0b, #d97706); }

.community-svg {
  width: 28px;
  height: 28px;
  color: white;
}

.community-card-inner h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.community-card-inner p {
  font-size: 0.85rem;
  color: #9CA3AF;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.community-cta {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #22d3ee;
  transition: all 0.3s ease;
}

.community-card-modern.youtube .community-cta { color: #ff6b6b; }
.community-card-modern.medium .community-cta { color: #00d68f; }
.community-card-modern.facebook .community-cta { color: #60a5fa; }
.community-card-modern.github .community-cta { color: #a78bfa; }
.community-card-modern.store .community-cta { color: #fbbf24; }

.community-card-modern:hover .community-cta {
  transform: translateX(4px);
}

.community-tagline {
  text-align: center;
  margin-top: 2.5rem;
  position: relative;
  z-index: 2;
}

.community-tagline p {
  font-size: 0.95rem;
  color: #9CA3AF;
  font-style: italic;
}

@media (max-width: 1200px) {
  .community-grid-modern {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .community-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .community-grid-modern {
    grid-template-columns: 1fr;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Legacy Ethics Section */
/* ═══════════════════════════════════════════════════════════════════════════
   ETHICS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-ethics {
  padding: 5rem 0;
  background: linear-gradient(135deg, #eff6ff, #ecfeff);
}

.ethics-box {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  padding: 3rem;
  border-radius: 1rem;
  border: 2px solid rgba(59, 130, 246, 0.2);
}

.ethics-header {
  margin-bottom: 2rem;
}

.ethics-header h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #0B1120;
  margin-bottom: 0.5rem;
}

.ethics-line {
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #22d3ee, #3b82f6);
  border-radius: 2px;
}

.ethics-intro {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 2rem;
}

.ethics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ethics-item {
  display: flex;
  gap: 1rem;
}

.ethics-check {
  color: #22d3ee;
  font-size: 1.25rem;
  font-weight: bold;
  flex-shrink: 0;
}

.ethics-item h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.25rem;
}

.ethics-item p {
  font-size: 0.875rem;
  color: #6B7280;
}

.ethics-footer {
  font-size: 0.9rem;
  color: #6B7280;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(59, 130, 246, 0.2);
}

.ethics-footer a {
  color: #22d3ee;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONNECT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-connect {
  padding: 5rem 0;
  background: #ffffff;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1.5rem;
  background: white;
  border-radius: 1rem;
  border: 2px solid #e5e7eb;
  text-decoration: none;
  transition: all 0.4s ease;
}

.social-card:hover {
  transform: translateY(-6px);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.social-icon-large {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.social-card h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.25rem;
}

.social-card p {
  font-size: 0.875rem;
  color: #6B7280;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.section-final-cta {
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
}

.final-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.cta-orb-1 {
  width: 400px;
  height: 400px;
  background: rgba(34, 211, 238, 0.15);
  top: -100px;
  right: -100px;
}

.cta-orb-2 {
  width: 300px;
  height: 300px;
  background: rgba(59, 130, 246, 0.1);
  bottom: -100px;
  left: -100px;
}

.final-cta-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.final-cta-content h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
}

.final-cta-content > p {
  font-size: 1.25rem;
  color: #9CA3AF;
  margin-bottom: 2.5rem;
}

.final-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.cta-button-large {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: white !important;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(34, 211, 238, 0.4);
}

.cta-button-large:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(34, 211, 238, 0.5);
  color: white !important;
}

.cta-help-text {
  font-size: 0.9rem;
  color: #6B7280;
}

.cta-help-text a {
  color: #22d3ee;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -30px); }
  66% { transform: translate(-20px, 20px); }
}

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

@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  50% { transform: translate(20px, -30px) scale(1.5); opacity: 0.2; }
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.1); }
}

@keyframes ringPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .hero-text { text-align: center; }
  .hero-description { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-visual { order: -1; }
  
  .hero-image-frame {
    max-width: 400px;
    height: 300px;
    margin: 0 auto;
  }
  
  .logo-container { width: 200px; height: 200px; }
  .hero-logo { width: 150px; }
  
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-grid.reverse { direction: ltr; }
  .mission-image { order: -1; }
  .mission-content { text-align: center; }
  .services-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 600px; margin-left: auto; margin-right: auto; }
  .ethics-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero-visual {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero-section { min-height: 50vh; padding: 4rem 1.5rem; }
  .hero-visual { display: none; }
  .hero-buttons { flex-direction: column; gap: 0.75rem; }
  .cta-button, .btn-outline { width: 100%; justify-content: center; }
  .courses-grid { grid-template-columns: 1fr; }
  .services-grid-6 { grid-template-columns: repeat(2, 1fr); }
  .value-card { flex-direction: column; text-align: center; gap: 1rem; }
  .team-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .final-cta-buttons { flex-direction: column; }
  .cta-button-large, .btn-outline-light { width: 100%; justify-content: center; }
  .ethics-box { padding: 1.5rem; }
}

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

:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

/* Selection styling */
::selection {
  background: rgba(34, 211, 238, 0.3);
  color: #0B1120;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

/* Print styles */
@media print {
  .navbar, #quarto-footer, .toc {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    color: black;
  }
}

/* ============================================
   REIMAGINED CTA SECTION V2
   ============================================ */
.section-final-cta-v2 {
  position: relative;
  padding: 6rem 2rem;
  background: linear-gradient(180deg, #0B1120 0%, #0F172A 50%, #0B1120 100%);
  overflow: hidden;
}

.cta-grid-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

.cta-glow-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-orb-v2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  animation: orbFloat 8s ease-in-out infinite;
}

.cta-orb-v2.orb-cyan {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.25), transparent 70%);
  top: -150px;
  right: -100px;
  animation-delay: 0s;
}

.cta-orb-v2.orb-blue {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 70%);
  bottom: -100px;
  left: -100px;
  animation-delay: -3s;
}

.cta-orb-v2.orb-gold {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.cta-content-v2 {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.3);
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.cta-badge-icon {
  font-size: 1rem;
}

.cta-badge span:last-child {
  font-size: 0.875rem;
  font-weight: 600;
  color: #22d3ee;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cta-content-v2 h2 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  color: white;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}

.text-gradient-cta {
  background: linear-gradient(135deg, #22d3ee, #3b82f6, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-subtitle {
  font-size: 1.25rem;
  color: #9CA3AF;
  max-width: 700px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

.cta-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  transition: all 0.3s ease;
}

.cta-feature:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-2px);
}

.cta-feature-icon {
  font-size: 1.25rem;
}

.cta-feature span:last-child {
  color: #E5E7EB;
  font-weight: 500;
  font-size: 0.95rem;
}

.cta-buttons-v2 {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(135deg, #22d3ee, #3b82f6);
  color: white !important;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 25px rgba(34, 211, 238, 0.35), 0 0 0 0 rgba(34, 211, 238, 0);
  position: relative;
  overflow: hidden;
}

.cta-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #06b6d4, #2563eb);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 35px rgba(34, 211, 238, 0.45), 0 0 0 4px rgba(34, 211, 238, 0.15);
}

.cta-btn-primary:hover::before {
  opacity: 1;
}

.cta-btn-primary span,
.cta-btn-primary svg {
  position: relative;
  z-index: 1;
}

.cta-btn-primary svg {
  transition: transform 0.3s ease;
}

.cta-btn-primary:hover svg {
  transform: translateX(4px);
}

.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 1.25rem 2.5rem;
  background: transparent;
  color: white !important;
  font-weight: 600;
  font-size: 1.125rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px);
}

.cta-reassurance {
  font-size: 0.95rem;
  color: #6B7280;
}

.cta-reassurance a {
  color: #22d3ee;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cta-reassurance a:hover {
  color: #67e8f9;
  text-decoration: underline;
}

/* ============================================
   SITE FOOTER - Keep Quarto default
   ============================================ */
/* No custom footer needed - using Quarto's built-in footer */

/* CTA Responsive Styles */
@media (max-width: 640px) {
  .cta-features {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .cta-buttons-v2 {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-btn-primary,
  .cta-btn-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE LIGHT SECTIONS CSS
   Add these styles to your styles.css file
   ═══════════════════════════════════════════════════════════════════════════ */

/* White Separator */
.section-separator-white {
  height: 4rem;
  background: white;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION/VISION LIGHT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.section-mission-light {
  padding: 5rem 2rem;
  background: #f8fafc;
}

.section-mission-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-mission-light .mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.mission-content-light {
  padding: 2rem 0;
}

.section-label-light {
  display: inline-block;
  color: #0891b2;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.mission-title-light {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #0B1120;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.mission-subtitle-light {
  color: #0891b2;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.mission-text-light {
  color: #374151;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.mission-text-muted-light {
  color: #6B7280;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.mission-image-light {
  position: relative;
}

.mission-image-light .mission-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.mission-divider-light {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 4rem 0;
}

.btn-outline-light-page {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 2px solid #0891b2;
  color: #0891b2;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  background: transparent;
}

.btn-outline-light-page:hover {
  background: #0891b2;
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VALUES LIGHT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.section-values-light {
  padding: 5rem 2rem;
  background: white;
}

.section-values-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Spinning Logo Light */
.values-hero-light {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3rem;
  gap: 1.5rem;
}

.spinning-logo-container-light {
  position: relative;
  width: 120px;
  height: 120px;
}

.spinning-ring-light {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(34, 211, 238, 0.3);
  border-radius: 50%;
  animation: spin 20s linear infinite;
  border-top-color: #22d3ee;
}

.spinning-ring-inner-light {
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-radius: 50%;
  animation: spin 15s linear infinite reverse;
  border-bottom-color: #f59e0b;
}

.logo-center-light {
  position: absolute;
  inset: 20px;
  background: linear-gradient(135deg, #f8fafc, white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.spinning-logo-light {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

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

.philosophy-statement-light {
  text-align: center;
}

.philosophy-statement-light p {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.text-gold-light { color: #d97706; }
.text-cyan-light { color: #0891b2; }
.text-dark { color: #0B1120; }

/* Section Header Light */
.section-header-light {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title-light-page {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0B1120;
  margin: 0;
}

.section-subtitle-light-page {
  font-size: 1.125rem;
  color: #6B7280;
  margin-top: 1rem;
}

/* CEIA Charter Elevated Styles */
.ceia-label-elevated {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.ceia-values-headline {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ceia-values-headline .ceia-dot {
  color: #9CA3AF;
  font-weight: 400;
}

.ceia-values-headline .ceia-val-c {
  color: #e11d48;
}

.ceia-values-headline .ceia-val-e {
  color: #f59e0b;
}

.ceia-values-headline .ceia-val-i {
  color: #7c3aed;
}

.ceia-values-headline .ceia-val-a {
  color: #0891b2;
}

/* Values Grid Light */
.values-grid-light {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Charter Link */
.charter-link-container {
  text-align: center;
  margin-top: 2rem;
}

.charter-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #003366;
  background: transparent;
  border: 1px solid #003366;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.charter-link:hover {
  background: #003366;
  color: #ffffff;
}

.value-card-light {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.value-card-light:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.value-card-light.cyan:hover { border-color: #22d3ee; }
.value-card-light.rose:hover { border-color: #f43f5e; }
.value-card-light.blue:hover { border-color: #3b82f6; }
.value-card-light.emerald:hover { border-color: #10b981; }

.value-icon-light {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 1rem;
}

.value-icon-light.cyan { background: rgba(34, 211, 238, 0.15); }
.value-icon-light.rose { background: rgba(244, 63, 94, 0.15); }
.value-icon-light.blue { background: rgba(59, 130, 246, 0.15); }
.value-icon-light.emerald { background: rgba(16, 185, 129, 0.15); }

.value-card-light h4 {
  color: #0B1120;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.value-tagline-light {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.value-tagline-light.cyan { color: #0891b2; }
.value-tagline-light.rose { color: #e11d48; }
.value-tagline-light.blue { color: #2563eb; }
.value-tagline-light.emerald { color: #059669; }

.value-card-light p {
  color: #6B7280;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* Philosophy Light */
.philosophy-light {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(245, 158, 11, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(34, 211, 238, 0.2);
}

.philosophy-quote-mark-light {
  font-size: 4rem;
  color: #22d3ee;
  line-height: 1;
  margin-bottom: -1rem;
}

.philosophy-text-light {
  font-size: 1.1rem;
  color: #374151;
  line-height: 1.8;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG LIGHT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.section-blog-light {
  padding: 5rem 2rem;
  background: #f8fafc;
}

.section-blog-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

.blog-grid-light {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card-light {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-card-light:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.blog-card-light.cyan:hover { border-color: #22d3ee; }
.blog-card-light.violet:hover { border-color: #8b5cf6; }
.blog-card-light.emerald:hover { border-color: #10b981; }

.blog-thumbnail-light {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.blog-thumbnail-light.cyan { background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.05)); }
.blog-thumbnail-light.violet { background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05)); }
.blog-thumbnail-light.emerald { background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05)); }

.blog-icon-light {
  font-size: 3rem;
}

.blog-content-light {
  padding: 1.5rem;
}

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

.blog-category-light {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.blog-category-light.cyan { background: rgba(34, 211, 238, 0.15); color: #0891b2; }
.blog-category-light.violet { background: rgba(139, 92, 246, 0.15); color: #7c3aed; }
.blog-category-light.emerald { background: rgba(16, 185, 129, 0.15); color: #059669; }

.blog-read-time-light {
  color: #9CA3AF;
  font-size: 0.8rem;
}

.blog-content-light h3 {
  color: #0B1120;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.blog-content-light p {
  color: #6B7280;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.blog-footer-light {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.blog-status-light {
  color: #f59e0b;
  font-size: 0.85rem;
  font-weight: 600;
}

.blog-arrow-light {
  color: #0891b2;
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.blog-card-light:hover .blog-arrow-light {
  transform: translateX(4px);
}

.section-cta-center-light {
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ETHICS LIGHT SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.section-ethics-light {
  padding: 5rem 2rem;
  background: white;
}

.section-ethics-light .container {
  max-width: 1000px;
  margin: 0 auto;
}

.ethics-content-light {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 3rem;
}

.ethics-intro-light {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.ethics-icon-large-light {
  font-size: 3rem;
  flex-shrink: 0;
}

.ethics-intro-light p {
  color: #374151;
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0;
}

.ethics-intro-light strong {
  color: #0B1120;
}

.ethics-grid-light {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ethics-item-light {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.ethics-item-light:hover {
  border-color: #22d3ee;
  box-shadow: 0 5px 20px rgba(34, 211, 238, 0.1);
}

.ethics-check-light {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  flex-shrink: 0;
}

.ethics-item-content-light h4 {
  color: #0B1120;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.ethics-item-content-light p {
  color: #6B7280;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

.ethics-footer-light {
  text-align: center;
  color: #6B7280;
  font-size: 0.95rem;
  margin: 0;
}

.ethics-footer-light a {
  color: #0891b2;
  text-decoration: none;
  font-weight: 600;
}

.ethics-footer-light a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .section-mission-light .mission-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .values-grid-light {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .blog-grid-light {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .ethics-grid-light {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .section-separator-white {
    height: 2rem;
  }
  
  .values-grid-light {
    grid-template-columns: 1fr;
  }
  
  .ethics-intro-light {
    flex-direction: column;
    text-align: center;
  }
  
  .ethics-content-light {
    padding: 2rem 1.5rem;
  }
}

/* Full Width Sections - Remove card styling for edge-to-edge */
.section-testimonials-dark.full-width,
.section-services-dark.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION/VISION ANIMATED IMAGES
   ═══════════════════════════════════════════════════════════════════════════ */

.mission-img-animated {
  position: relative;
  display: inline-block;
}

.mission-img-animated .mission-img {
  position: relative;
  z-index: 2;
  animation: float-gentle 4s ease-in-out infinite;
  border-radius: 16px;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(34, 211, 238, 0.1);
}

.img-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(245, 158, 11, 0.1));
  filter: blur(30px);
  animation: glow-pulse 3s ease-in-out infinite;
  z-index: 1;
}

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

@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Hover enhancement */
.mission-img-animated:hover .mission-img {
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(34, 211, 238, 0.3);
}

.mission-img-animated:hover .img-glow-ring {
  opacity: 1;
  filter: blur(40px);
}
/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES PAGE STYLES
   Add these to your main styles.css file
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.services-hero {
  position: relative;
  padding: 8rem 2rem 6rem;
  padding-top: calc(70px + 5rem) !important; /* Navbar height + desired padding */
  margin-top: -70px !important; /* Pull up to cover body padding */
  background: linear-gradient(135deg, #0B1120 0%, #1a1a2e 50%, #0B1120 100%);
  overflow: hidden;
}

.services-hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

.services-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.services-hero-orb-1 {
  top: 10%;
  left: 20%;
  width: 300px;
  height: 300px;
  background: rgba(34, 211, 238, 0.1);
}

.services-hero-orb-2 {
  bottom: 10%;
  right: 20%;
  width: 250px;
  height: 250px;
  background: rgba(139, 92, 246, 0.08);
}

.services-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.services-hero-label {
  display: inline-block;
  color: #22d3ee;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

.services-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}

.services-hero-subtitle {
  font-size: 1.25rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.services-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  line-height: 1;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, rgba(34, 211, 238, 0.3), transparent);
}

.services-hero-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES SECTIONS - DARK
   ═══════════════════════════════════════════════════════════════════════════ */

.services-section-dark {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
}

.services-section-dark.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.services-section-dark .container {
  max-width: 1200px;
  margin: 0 auto;
}

.services-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.services-label {
  display: inline-block;
  color: #22d3ee;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.services-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.services-subtitle {
  font-size: 1.1rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES SECTIONS - LIGHT
   ═══════════════════════════════════════════════════════════════════════════ */

.services-section-light {
  padding: 5rem 2rem;
  background: #f8fafc;
}

.services-section-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

.services-section-header-light {
  text-align: center;
  margin-bottom: 3rem;
}

.services-label-light {
  display: inline-block;
  color: #0891b2;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.services-title-light {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0B1120;
  margin: 0 0 1rem;
}

.services-subtitle-light {
  font-size: 1.1rem;
  color: #6B7280;
  max-width: 600px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE CARDS - DARK THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.services-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.services-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.service-card-dark {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.service-card-dark:hover {
  transform: translateY(-5px);
  border-color: rgba(34, 211, 238, 0.3);
}

.service-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-card-dark:hover .service-card-glow {
  opacity: 1;
}

.service-card-glow.youtube { background: linear-gradient(90deg, #ff0000, #ff4444); }
.service-card-glow.facebook { background: linear-gradient(90deg, #1877f2, #42a5f5); }
.service-card-glow.blog { background: linear-gradient(90deg, #22d3ee, #06b6d4); }
.service-card-glow.design { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.service-card-glow.flyer { background: linear-gradient(90deg, #f43f5e, #fb7185); }
.service-card-glow.products { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.service-card-glow.shop { background: linear-gradient(90deg, #10b981, #34d399); }

.service-card-inner {
  padding: 2rem;
  position: relative;
  z-index: 2;
}

.service-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.service-icon-wrapper.youtube { background: rgba(255, 0, 0, 0.15); color: #ff4444; }
.service-icon-wrapper.facebook { background: rgba(24, 119, 242, 0.15); color: #42a5f5; }
.service-icon-wrapper.blog { background: rgba(34, 211, 238, 0.15); color: #22d3ee; }
.service-icon-wrapper.design { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.service-icon-wrapper.flyer { background: rgba(244, 63, 94, 0.15); color: #fb7185; }
.service-icon-wrapper.products { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
.service-icon-wrapper.shop { background: rgba(16, 185, 129, 0.15); color: #34d399; }

.service-icon-svg {
  width: 28px;
  height: 28px;
}

.service-icon-emoji {
  font-size: 1.75rem;
}

.service-badge-free {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-badge-guarantee {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-card-dark h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.75rem;
}

.service-card-dark p {
  color: #9CA3AF;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.service-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.service-features li {
  color: #d1d5db;
  font-size: 0.875rem;
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
}

.service-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #22d3ee;
  font-weight: 700;
}

.service-pricing {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(34, 211, 238, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.1);
}

.service-pricing .price-label {
  display: block;
  font-size: 0.75rem;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.service-pricing .price-amount {
  font-size: 2rem;
  font-weight: 800;
  color: #22d3ee;
}

.service-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-cta.youtube { background: #ff0000; color: white; }
.service-cta.youtube:hover { background: #cc0000; box-shadow: 0 10px 30px rgba(255, 0, 0, 0.3); }

.service-cta.facebook { background: #1877f2; color: white; }
.service-cta.facebook:hover { background: #1565c0; box-shadow: 0 10px 30px rgba(24, 119, 242, 0.3); }

.service-cta.blog { background: linear-gradient(135deg, #22d3ee, #0891b2); color: white; }
.service-cta.blog:hover { box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3); }

.service-cta.design { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; }
.service-cta.design:hover { box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); }

.service-cta.flyer { background: linear-gradient(135deg, #f43f5e, #e11d48); color: white; }
.service-cta.flyer:hover { box-shadow: 0 10px 30px rgba(244, 63, 94, 0.3); }

.service-cta.products { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white; }
.service-cta.products:hover { box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3); }

.service-cta.shop { background: linear-gradient(135deg, #10b981, #059669); color: white; }
.service-cta.shop:hover { box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3); }

.service-cta.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.cta-arrow {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.service-cta:hover .cta-arrow {
  transform: translateX(4px);
}

.service-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-right: 0.75rem;
}

.service-cta-outline:hover {
  border-color: #22d3ee;
  color: #22d3ee;
}

.service-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.coming-soon-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: #fbbf24;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE CARDS - LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */

.service-card-light {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.service-card-light:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.service-card-light.cyan:hover { border-color: #22d3ee; }
.service-card-light.emerald:hover { border-color: #10b981; }

.service-icon-light {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.service-icon-light.cyan { background: rgba(34, 211, 238, 0.15); }
.service-icon-light.emerald { background: rgba(16, 185, 129, 0.15); }

.service-card-light h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.75rem;
}

.service-card-light p {
  color: #6B7280;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.service-topics h4 {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.75rem;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.topic-tag {
  padding: 0.35rem 0.75rem;
  background: #f3f4f6;
  border-radius: 20px;
  font-size: 0.8rem;
  color: #4B5563;
}

.service-pricing-light {
  padding: 1rem;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 1.5rem;
}

.service-pricing-light .price-label {
  display: block;
  font-size: 0.75rem;
  color: #9CA3AF;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.service-pricing-light .price-amount {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0B1120;
}

.service-pricing-light .price-unit {
  font-size: 1rem;
  font-weight: 500;
  color: #6B7280;
}

.service-cta-light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-cta-light.cyan {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: white;
}

.service-cta-light.emerald {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.service-cta-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SATISFACTION BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.satisfaction-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  margin-bottom: 3rem;
}

.satisfaction-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.satisfaction-content h3 {
  color: #34d399;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.satisfaction-content p {
  color: #9CA3AF;
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEB DEVELOPMENT CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.services-grid-3-light {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.webdev-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.webdev-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  border-color: #22d3ee;
}

.webdev-card.featured {
  border-color: #22d3ee;
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.1);
}

.webdev-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.webdev-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.webdev-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.5rem;
}

.webdev-card p {
  color: #6B7280;
  font-size: 0.9rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.webdev-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.webdev-features span {
  padding: 0.25rem 0.6rem;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #4B5563;
}

.webdev-price {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0891b2;
}

.webdev-cta-center {
  text-align: center;
  margin-top: 2.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRAINING SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.training-highlight {
  text-align: center;
  margin-bottom: 2.5rem;
}

.training-location {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 30px;
}

.location-icon {
  font-size: 1.25rem;
}

.location-text {
  color: #92400e;
  font-size: 0.95rem;
}

.training-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
}

.training-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.training-card.featured {
  border-color: #f59e0b;
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.1);
}

.training-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.training-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1rem;
}

.training-icon.university { background: rgba(139, 92, 246, 0.15); }
.training-icon.business { background: rgba(245, 158, 11, 0.15); }
.training-icon.group { background: rgba(34, 211, 238, 0.15); }

.training-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.5rem;
}

.training-card p {
  color: #6B7280;
  font-size: 0.9rem;
  margin: 0 0 1rem;
  line-height: 1.5;
}

.training-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.training-features li {
  color: #4B5563;
  font-size: 0.875rem;
  padding: 0.35rem 0;
  padding-left: 1.25rem;
  position: relative;
}

.training-features li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0891b2;
  font-weight: 700;
}

.training-cta {
  display: inline-flex;
  align-items: center;
  color: #0891b2;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.training-cta:hover {
  color: #0e7490;
}

.training-topics {
  margin-top: 3rem;
  text-align: center;
}

.training-topics h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem;
}

.topics-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.topic-item {
  padding: 0.5rem 1rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #4B5563;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHY SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.why-card {
  text-align: center;
  padding: 2rem 1.5rem;
}

.why-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.why-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem;
}

.why-card p {
  color: #9CA3AF;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* Payment Section */
.payment-section {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.payment-section h3 {
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.payment-methods {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.payment-method {
  padding: 0.5rem 1.25rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 8px;
  color: #22d3ee;
  font-size: 0.9rem;
  font-weight: 600;
}

.payment-note {
  color: #6B7280;
  font-size: 0.8rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICES CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.services-cta-section {
  position: relative;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  overflow: hidden;
}

.services-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.1), transparent 70%);
}

.services-cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.services-cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.services-cta-content p {
  font-size: 1.1rem;
  color: #9CA3AF;
  margin: 0 0 2rem;
}

.services-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-button-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(34, 211, 238, 0.3);
}

.cta-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button-secondary:hover {
  border-color: #22d3ee;
  color: #22d3ee;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .services-grid-3,
  .services-grid-3-light {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-hero-stats {
    gap: 1.5rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .services-hero {
    padding: 6rem 1.5rem 4rem;
  }
  
  .services-grid-3,
  .services-grid-2,
  .services-grid-3-light {
    grid-template-columns: 1fr;
  }
  
  .why-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .services-hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .stat-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(34, 211, 238, 0.3), transparent);
  }
  
  .satisfaction-banner {
    flex-direction: column;
    text-align: center;
  }
  
  .service-cta-group {
    flex-direction: column;
  }
  
  .service-cta-outline {
    margin-right: 0;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .services-hero-title {
    font-size: 2rem;
  }
  
  .service-card-inner {
    padding: 1.5rem;
  }
  
  .payment-methods {
    flex-direction: column;
    align-items: center;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO PAGE STYLES
   Add these to your main styles.css file
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-hero {
  position: relative;
  padding: 8rem 2rem 6rem;
  padding-top: calc(70px + 5rem) !important; /* Navbar height + desired padding */
  margin-top: -70px !important; /* Pull up to cover body padding */
  background: linear-gradient(135deg, #0B1120 0%, #1a1a2e 50%, #0B1120 100%);
  overflow: hidden;
}

.portfolio-hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(245, 158, 11, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.portfolio-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.portfolio-hero-orb-1 {
  top: 10%;
  left: 20%;
  width: 300px;
  height: 300px;
  background: rgba(245, 158, 11, 0.1);
}

.portfolio-hero-orb-2 {
  bottom: 10%;
  right: 20%;
  width: 250px;
  height: 250px;
  background: rgba(34, 211, 238, 0.08);
}

.portfolio-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.portfolio-hero-label {
  display: inline-block;
  color: #f59e0b;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

.portfolio-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.portfolio-hero-subtitle {
  font-size: 1.25rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.portfolio-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.portfolio-hero-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.5), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROCESS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-process-light {
  padding: 5rem 2rem;
  background: #f8fafc;
}

.portfolio-process-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-section-header-light {
  text-align: center;
  margin-bottom: 3rem;
}

.portfolio-label-light {
  display: inline-block;
  color: #0891b2;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.portfolio-title-light {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0B1120;
  margin: 0 0 1rem;
}

.portfolio-subtitle-light {
  font-size: 1.1rem;
  color: #6B7280;
  max-width: 600px;
  margin: 0 auto;
}

.process-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.process-step {
  flex: 1;
  min-width: 200px;
  max-width: 250px;
  text-align: center;
  padding: 1.5rem;
}

.process-number {
  font-size: 3rem;
  font-weight: 900;
  color: #e5e7eb;
  line-height: 1;
  margin-bottom: 1rem;
}

.process-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.5rem;
}

.process-content p {
  font-size: 0.9rem;
  color: #6B7280;
  line-height: 1.5;
  margin: 0;
}

.process-connector {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #e5e7eb, #0891b2, #e5e7eb);
  margin-top: 3rem;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO DARK SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-section-dark {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
}

.portfolio-section-dark.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.portfolio-section-dark .container {
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.portfolio-label {
  display: inline-block;
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.portfolio-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.portfolio-subtitle {
  font-size: 1.1rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO GRID & CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.portfolio-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.portfolio-card:hover {
  transform: translateY(-8px);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.portfolio-card-image {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portfolio-card-image img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

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

.portfolio-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 32, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .portfolio-card-overlay {
  opacity: 1;
}

.view-project {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 8px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.portfolio-card:hover .view-project {
  transform: translateY(0);
}

.portfolio-card-content {
  padding: 1.5rem;
}

.portfolio-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.portfolio-badge.logo {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.portfolio-card-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem;
}

.portfolio-card-content p {
  font-size: 0.875rem;
  color: #9CA3AF;
  margin: 0;
  line-height: 1.5;
}

/* Coming Soon Box */
.portfolio-coming-soon {
  text-align: center;
  padding: 3rem;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(59, 130, 246, 0.05));
  border: 2px dashed rgba(34, 211, 238, 0.3);
  border-radius: 16px;
}

.coming-soon-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.portfolio-coming-soon h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem;
}

.portfolio-coming-soon p {
  color: #9CA3AF;
  font-size: 0.95rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEB PORTFOLIO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-web-light {
  padding: 5rem 2rem;
  background: white;
}

.portfolio-web-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

.web-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.web-portfolio-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.web-portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #0891b2;
}

.web-portfolio-image {
  position: relative;
  height: 250px;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  overflow: hidden;
}

.web-portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.web-portfolio-card:hover .web-portfolio-image img {
  transform: scale(1.05);
}

.web-portfolio-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 17, 32, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.web-portfolio-card:hover .web-portfolio-overlay {
  opacity: 1;
}

.view-project-light {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 8px;
}

.web-portfolio-content {
  padding: 1.5rem;
}

.web-badge {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.web-portfolio-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.5rem;
}

.web-portfolio-content p {
  font-size: 0.9rem;
  color: #6B7280;
  margin: 0 0 1rem;
  line-height: 1.5;
}

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

.web-tech-tags span {
  padding: 0.25rem 0.6rem;
  background: #e5e7eb;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #4B5563;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-testimonials-dark {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
}

.portfolio-testimonials-dark.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.portfolio-testimonials-dark .container {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.testimonial-card-dark {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
}

.testimonial-card-dark:hover {
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-5px);
}

.testimonial-quote {
  font-size: 4rem;
  font-weight: 900;
  color: rgba(34, 211, 238, 0.2);
  line-height: 1;
  position: absolute;
  top: 1rem;
  right: 1.5rem;
}

.testimonial-stars {
  color: #fbbf24;
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.testimonial-text {
  color: #d1d5db;
  font-size: 0.95rem;
  line-height: 1.7;
  font-style: italic;
  margin: 0 0 1.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.1rem;
}

.author-info strong {
  display: block;
  color: white;
  font-size: 0.95rem;
}

.author-info span {
  color: #9CA3AF;
  font-size: 0.8rem;
}

.testimonial-badge {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  padding: 0.3rem 0.6rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #22d3ee;
  text-transform: uppercase;
}

.testimonials-cta {
  text-align: center;
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #22d3ee;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.view-all-link:hover {
  color: #06b6d4;
}

.view-all-link svg {
  transition: transform 0.3s ease;
}

.view-all-link:hover svg {
  transform: translateX(4px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GUARANTEE SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-guarantee-light {
  padding: 4rem 2rem;
  background: #f8fafc;
}

.portfolio-guarantee-light .container {
  max-width: 900px;
  margin: 0 auto;
}

.guarantee-box {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03));
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 20px;
}

.guarantee-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.guarantee-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #065f46;
  margin: 0 0 0.75rem;
}

.guarantee-content p {
  color: #047857;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.guarantee-features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.guarantee-features span {
  color: #065f46;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.portfolio-cta-section {
  position: relative;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  overflow: hidden;
}

.portfolio-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(245, 158, 11, 0.1), transparent 70%);
}

.portfolio-cta-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.portfolio-cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.portfolio-cta-content p {
  font-size: 1.1rem;
  color: #9CA3AF;
  margin: 0 0 2rem;
}

.portfolio-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.portfolio-cta-pricing {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.pricing-item {
  text-align: center;
}

.pricing-service {
  display: block;
  font-size: 0.8rem;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.pricing-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #f59e0b;
}

.pricing-divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .portfolio-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .process-connector {
    display: none;
  }
  
  .process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .process-step {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .portfolio-hero {
    padding: 6rem 1.5rem 4rem;
  }
  
  .portfolio-grid,
  .web-portfolio-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
  .process-grid {
    grid-template-columns: 1fr;
  }
  
  .portfolio-hero-stats {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .guarantee-box {
    flex-direction: column;
    text-align: center;
  }
  
  .guarantee-features {
    justify-content: center;
  }
  
  .portfolio-cta-pricing {
    flex-direction: column;
    gap: 1rem;
  }
  
  .pricing-divider {
    width: 60px;
    height: 1px;
  }
}

@media (max-width: 480px) {
  .portfolio-hero-title {
    font-size: 2rem;
  }
  
  .portfolio-card-content,
  .web-portfolio-content {
    padding: 1.25rem;
  }
  
  .testimonial-card-dark {
    padding: 1.5rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   SHOP PAGE STYLES
   Add these to your main styles.css file
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-hero {
  position: relative;
  padding: 8rem 2rem 6rem;
  padding-top: calc(70px + 5rem) !important; /* Navbar height + desired padding */
  margin-top: -70px !important; /* Pull up to cover body padding */
  background: linear-gradient(135deg, #0B1120 0%, #1a1a2e 50%, #0B1120 100%);
  overflow: hidden;
}

.shop-hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(16, 185, 129, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.shop-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.shop-hero-orb-1 {
  top: 10%;
  left: 20%;
  width: 300px;
  height: 300px;
  background: rgba(16, 185, 129, 0.1);
}

.shop-hero-orb-2 {
  bottom: 10%;
  right: 20%;
  width: 250px;
  height: 250px;
  background: rgba(139, 92, 246, 0.08);
}

.shop-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.shop-hero-label {
  display: inline-block;
  color: #10b981;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

.shop-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}

.text-gradient-emerald {
  background: linear-gradient(135deg, #10b981, #34d399, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shop-hero-subtitle {
  font-size: 1.25rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.shop-hero-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.shop-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.shop-nav-btn.digital {
  background: rgba(139, 92, 246, 0.15);
  border: 2px solid rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}

.shop-nav-btn.digital:hover {
  background: rgba(139, 92, 246, 0.25);
  border-color: #a78bfa;
  transform: translateY(-2px);
}

.shop-nav-btn.merch {
  background: rgba(16, 185, 129, 0.15);
  border: 2px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.shop-nav-btn.merch:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: #34d399;
  transform: translateY(-2px);
}

.nav-icon {
  font-size: 1.25rem;
}

.nav-icon-svg {
  width: 24px;
  height: 24px;
}

.shop-hero-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.5), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-section-dark {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
}

.shop-section-dark.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.shop-section-dark .container,
.shop-section-light .container {
  max-width: 1200px;
  margin: 0 auto;
}

.shop-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.shop-label {
  display: inline-block;
  color: #a78bfa;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.shop-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.shop-subtitle {
  font-size: 1.1rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto;
}

/* Light Section */
.shop-section-light {
  padding: 5rem 2rem;
  background: #f8fafc;
}

.shop-section-header-light {
  text-align: center;
  margin-bottom: 3rem;
}

.shop-label-light {
  display: inline-block;
  color: #10b981;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.shop-title-light {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0B1120;
  margin: 0 0 1rem;
}

.shop-subtitle-light {
  font-size: 1.1rem;
  color: #6B7280;
  max-width: 600px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMING SOON BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.coming-soon-banner {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(139, 92, 246, 0.05));
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-radius: 16px;
  margin-bottom: 3rem;
}

.coming-soon-icon {
  font-size: 3rem;
  flex-shrink: 0;
}

.coming-soon-icon-box {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coming-soon-icon-box svg {
  width: 32px;
  height: 32px;
  stroke: #a78bfa;
}

.coming-soon-text h3 {
  color: #a78bfa;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.coming-soon-text p {
  color: #9CA3AF;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}

.coming-soon-cta {
  flex-shrink: 0;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.coming-soon-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DIGITAL PRODUCTS GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.digital-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.digital-product-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.digital-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(139, 92, 246, 0.4);
}

.digital-product-preview {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.digital-product-preview.ebook { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.1)); }
.digital-product-preview.quarto { background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(6, 182, 212, 0.1)); }
.digital-product-preview.code { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1)); }
.digital-product-preview.cheatsheet { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1)); }
.digital-product-preview.flyer { background: linear-gradient(135deg, rgba(244, 63, 94, 0.2), rgba(225, 29, 72, 0.1)); }
.digital-product-preview.invitation { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.1)); }

.preview-icon {
  font-size: 4rem;
  opacity: 0.8;
}

.preview-svg {
  width: 64px;
  height: 64px;
  opacity: 0.8;
}

.digital-product-preview.ebook .preview-svg { stroke: #3b82f6; }
.digital-product-preview.quarto .preview-svg { stroke: #22d3ee; }
.digital-product-preview.code .preview-svg { stroke: #10b981; }
.digital-product-preview.cheatsheet .preview-svg { stroke: #f59e0b; }
.digital-product-preview.flyer .preview-svg { stroke: #f43f5e; }
.digital-product-preview.invitation .preview-svg { stroke: #a78bfa; }

.preview-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.35rem 0.75rem;
  background: rgba(139, 92, 246, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.5);
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.digital-product-info {
  padding: 1.5rem;
}

.digital-product-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem;
}

.digital-product-info p {
  font-size: 0.875rem;
  color: #9CA3AF;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.format-tag {
  padding: 0.25rem 0.6rem;
  background: rgba(139, 92, 246, 0.15);
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #a78bfa;
}

.platform-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 1rem;
  color: #6B7280;
  font-size: 0.875rem;
}

.platform-icon {
  margin-right: 0.5rem;
}

.platform-icon-svg {
  width: 20px;
  height: 20px;
  stroke: #9CA3AF;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MERCHANDISE SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.merch-cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.5rem;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
  border: 2px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  margin-bottom: 3rem;
}

.merch-cta-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #065f46;
  margin: 0 0 0.35rem;
}

.merch-cta-content p {
  color: #047857;
  font-size: 0.95rem;
  margin: 0;
}

.merch-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.merch-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

/* Merchandise Grid */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

/* Spreadshop Embed Container */
.spreadshop-embed-container {
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.spreadshop-iframe {
  width: 100%;
  height: 800px;
  border: none;
  background: white;
}

@media (max-width: 768px) {
  .spreadshop-iframe {
    height: 600px;
  }
}

.merch-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.3s ease;
}

.merch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: #10b981;
}

.merch-image {
  height: 120px;
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
}

.merch-placeholder {
  font-size: 2.5rem;
  opacity: 0.7;
}

.merch-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.merch-icon-box svg {
  width: 28px;
  height: 28px;
  stroke: #6B7280;
}

.merch-icon-box.tshirt { background: rgba(59, 130, 246, 0.1); }
.merch-icon-box.tshirt svg { stroke: #3b82f6; }

.merch-icon-box.hoodie { background: rgba(139, 92, 246, 0.1); }
.merch-icon-box.hoodie svg { stroke: #8b5cf6; }

.merch-icon-box.mug { background: rgba(245, 158, 11, 0.1); }
.merch-icon-box.mug svg { stroke: #f59e0b; }

.merch-icon-box.sticker { background: rgba(16, 185, 129, 0.1); }
.merch-icon-box.sticker svg { stroke: #10b981; }

.merch-icon-box.bag { background: rgba(244, 63, 94, 0.1); }
.merch-icon-box.bag svg { stroke: #f43f5e; }

.merch-icon-box.phone { background: rgba(34, 211, 238, 0.1); }
.merch-icon-box.phone svg { stroke: #22d3ee; }

.merch-icon-box.notebook { background: rgba(99, 102, 241, 0.1); }
.merch-icon-box.notebook svg { stroke: #6366f1; }

.merch-icon-box.cap { background: rgba(236, 72, 153, 0.1); }
.merch-icon-box.cap svg { stroke: #ec4899; }

.merch-icon-box.bottle { background: rgba(20, 184, 166, 0.1); }
.merch-icon-box.bottle svg { stroke: #14b8a6; }

.merch-icon-box.mousepad { background: rgba(107, 114, 128, 0.1); }
.merch-icon-box.mousepad svg { stroke: #6b7280; }

.merch-icon-box.poster { background: rgba(251, 146, 60, 0.1); }
.merch-icon-box.poster svg { stroke: #fb923c; }

.merch-info {
  padding: 1rem;
}

.merch-info h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0B1120;
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.merch-category {
  font-size: 0.75rem;
  color: #6B7280;
}

/* View All */
.merch-view-all {
  text-align: center;
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.view-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.store-note {
  color: #6B7280;
  font-size: 0.85rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WHY SHOP SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-why-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
}

.shop-why-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.why-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.why-shop-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.why-shop-card:hover {
  border-color: rgba(16, 185, 129, 0.3);
  transform: translateY(-3px);
}

.why-shop-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.why-shop-icon-box {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.why-shop-icon-box svg {
  width: 28px;
  height: 28px;
  stroke: #34d399;
}

.why-shop-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem;
}

.why-shop-card p {
  color: #9CA3AF;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHOP CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.shop-cta-section {
  position: relative;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  overflow: hidden;
}

.shop-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.1), transparent 70%);
}

.shop-cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.shop-cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.shop-cta-content p {
  font-size: 1.1rem;
  color: #9CA3AF;
  margin: 0 0 2rem;
}

.shop-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .digital-products-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .merch-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .why-shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .shop-hero {
    padding: 6rem 1.5rem 4rem;
  }
  
  .coming-soon-banner,
  .merch-cta-banner {
    flex-direction: column;
    text-align: center;
  }
  
  .digital-products-grid {
    grid-template-columns: 1fr;
  }
  
  .merch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .why-shop-grid {
    grid-template-columns: 1fr;
  }
  
  .shop-hero-nav {
    flex-direction: column;
  }
  
  .shop-nav-btn {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .shop-hero-title {
    font-size: 2rem;
  }
  
  .merch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .merch-image {
    height: 100px;
  }
  
  .merch-info {
    padding: 0.75rem;
  }
  
  .merch-info h4 {
    font-size: 0.8rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PAGE STYLES
   Add these to your main styles.css file
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG HERO SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-hero {
  position: relative;
  padding: 8rem 2rem 6rem;
  padding-top: calc(70px + 5rem) !important; /* Navbar height + desired padding */
  margin-top: -70px !important; /* Pull up to cover body padding */
  background: linear-gradient(135deg, #0B1120 0%, #1a1a2e 50%, #0B1120 100%);
  overflow: hidden;
}

.blog-hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.blog-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.blog-hero-orb-1 {
  top: 10%;
  left: 20%;
  width: 300px;
  height: 300px;
  background: rgba(34, 211, 238, 0.1);
}

.blog-hero-orb-2 {
  bottom: 10%;
  right: 20%;
  width: 250px;
  height: 250px;
  background: rgba(59, 130, 246, 0.08);
}

.blog-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.blog-hero-label {
  display: inline-block;
  color: #22d3ee;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

.blog-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1.5rem;
  line-height: 1.1;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #22d3ee, #06b6d4, #0891b2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blog-hero-subtitle {
  font-size: 1.25rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.blog-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.blog-stat-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.blog-stat-icon {
  width: 40px;
  height: 40px;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke: #22d3ee;
}

.blog-stat-text {
  color: #d1d5db;
  font-size: 0.9rem;
  font-weight: 500;
}

.blog-stat-divider {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.1);
}

.blog-hero-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.5), transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG TOPICS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-topics-section {
  padding: 4rem 2rem;
  background: #f8fafc;
}

.blog-topics-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.blog-topics-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.blog-topics-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0B1120;
  margin: 0 0 0.5rem;
}

.blog-topics-header p {
  color: #6B7280;
  font-size: 1rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG TOPICS SECTION - Explore Topics Grid
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-topics-section .topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.blog-topics-section .topic-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-topics-section .topic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.blog-topics-section .topic-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.blog-topics-section .topic-icon-box svg {
  width: 24px;
  height: 24px;
}

.blog-topics-section .topic-content {
  flex: 1;
  min-width: 0;
}

.blog-topics-section .topic-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.25rem;
}

.blog-topics-section .topic-content p {
  font-size: 0.8rem;
  color: #6B7280;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-topics-section .topic-arrow {
  width: 24px;
  height: 24px;
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.blog-topics-section .topic-arrow svg {
  width: 20px;
  height: 20px;
  stroke: #6B7280;
}

.blog-topics-section .topic-card:hover .topic-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Topic Card Color Variants - Blog Specific */
.blog-topics-section .topic-card.topic-python { border-left: 3px solid #3b82f6; }
.blog-topics-section .topic-card.topic-python .topic-icon-box { background: rgba(59, 130, 246, 0.1); }
.blog-topics-section .topic-card.topic-python .topic-icon-box svg { stroke: #3b82f6; }
.blog-topics-section .topic-card.topic-python:hover { border-color: #3b82f6; }

.blog-topics-section .topic-card.topic-r { border-left: 3px solid #2563eb; }
.blog-topics-section .topic-card.topic-r .topic-icon-box { background: rgba(37, 99, 235, 0.1); }
.blog-topics-section .topic-card.topic-r .topic-icon-box svg { stroke: #2563eb; }
.blog-topics-section .topic-card.topic-r:hover { border-color: #2563eb; }

.blog-topics-section .topic-card.topic-stats { border-left: 3px solid #8b5cf6; }
.blog-topics-section .topic-card.topic-stats .topic-icon-box { background: rgba(139, 92, 246, 0.1); }
.blog-topics-section .topic-card.topic-stats .topic-icon-box svg { stroke: #8b5cf6; }
.blog-topics-section .topic-card.topic-stats:hover { border-color: #8b5cf6; }

.blog-topics-section .topic-card.topic-ml { border-left: 3px solid #f59e0b; }
.blog-topics-section .topic-card.topic-ml .topic-icon-box { background: rgba(245, 158, 11, 0.1); }
.blog-topics-section .topic-card.topic-ml .topic-icon-box svg { stroke: #f59e0b; }
.blog-topics-section .topic-card.topic-ml:hover { border-color: #f59e0b; }

.blog-topics-section .topic-card.topic-viz { border-left: 3px solid #10b981; }
.blog-topics-section .topic-card.topic-viz .topic-icon-box { background: rgba(16, 185, 129, 0.1); }
.blog-topics-section .topic-card.topic-viz .topic-icon-box svg { stroke: #10b981; }
.blog-topics-section .topic-card.topic-viz:hover { border-color: #10b981; }

.blog-topics-section .topic-card.topic-quarto { border-left: 3px solid #22d3ee; }
.blog-topics-section .topic-card.topic-quarto .topic-icon-box { background: rgba(34, 211, 238, 0.1); }
.blog-topics-section .topic-card.topic-quarto .topic-icon-box svg { stroke: #22d3ee; }
.blog-topics-section .topic-card.topic-quarto:hover { border-color: #22d3ee; }

/* Responsive - Blog Topics */
@media (max-width: 900px) {
  .blog-topics-section .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .blog-topics-section .topics-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG ARTICLES SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-articles-section {
  padding: 5rem 2rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
}

.blog-articles-section.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.blog-articles-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.blog-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.blog-label {
  display: inline-block;
  color: #22d3ee;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.blog-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 0.75rem;
}

.blog-subtitle {
  font-size: 1rem;
  color: #9CA3AF;
  max-width: 600px;
  margin: 0 auto;
}

.blog-section-bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.4), transparent);
}

.blog-articles-section {
  position: relative;
}

.blog-listing-spacer {
  height: 3rem;
  background: linear-gradient(180deg, #1E293B 0%, #f8fafc 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUARTO LISTING CUSTOMIZATION
   ═══════════════════════════════════════════════════════════════════════════ */

#blog-listing {
  padding: 4rem 2rem;
  background: #f8fafc;
  margin-top: 2rem;
}

#blog-listing .quarto-listing {
  max-width: 1200px;
  margin: 0 auto;
}

/* Listing Header/Filters */
#blog-listing .listing-actions {
  margin-bottom: 2.5rem;
  padding: 1.75rem;
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

#blog-listing .form-control {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

#blog-listing .form-control:focus {
  border-color: #22d3ee;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

/* Listing Cards */
#blog-listing .quarto-listing-default {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}

#blog-listing .quarto-post {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

#blog-listing .quarto-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #22d3ee;
}

#blog-listing .quarto-post .thumbnail {
  height: 200px;
  overflow: hidden;
  background: linear-gradient(135deg, #0B1120, #1E293B);
}

#blog-listing .quarto-post .thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#blog-listing .quarto-post:hover .thumbnail img {
  transform: scale(1.05);
}

#blog-listing .quarto-post .body {
  padding: 1.5rem;
}

#blog-listing .quarto-post .listing-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

#blog-listing .quarto-post .listing-title a {
  color: inherit;
  text-decoration: none;
}

#blog-listing .quarto-post .listing-title a:hover {
  color: #0891b2;
}

#blog-listing .quarto-post .listing-description {
  font-size: 0.9rem;
  color: #6B7280;
  line-height: 1.6;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#blog-listing .quarto-post .listing-date {
  font-size: 0.8rem;
  color: #9CA3AF;
}

#blog-listing .quarto-post .listing-reading-time {
  font-size: 0.8rem;
  color: #9CA3AF;
}

#blog-listing .quarto-post .listing-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

#blog-listing .quarto-post .listing-category {
  padding: 0.25rem 0.6rem;
  background: rgba(34, 211, 238, 0.1);
  color: #0891b2;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}

#blog-listing .quarto-post .listing-category:hover {
  background: rgba(34, 211, 238, 0.2);
}

/* Categories Sidebar */
#blog-listing .quarto-listing-category {
  background: white;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  margin-bottom: 2rem;
}

#blog-listing .quarto-listing-category-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 1rem;
}

#blog-listing .category {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  margin: 0.25rem;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #4B5563;
  text-decoration: none;
  transition: all 0.2s ease;
}

#blog-listing .category:hover {
  background: #22d3ee;
  color: white;
}

/* Pagination */
#blog-listing .page-link {
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #4B5563;
  text-decoration: none;
  transition: all 0.2s ease;
}

#blog-listing .page-link:hover {
  background: #22d3ee;
  border-color: #22d3ee;
  color: white;
}

#blog-listing .page-item.active .page-link {
  background: #0891b2;
  border-color: #0891b2;
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG NEWSLETTER SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-newsletter-section {
  padding: 4rem 2rem;
  background: #f8fafc;
}

.blog-newsletter-section .container {
  max-width: 900px;
  margin: 0 auto;
}

.newsletter-box {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.03));
  border: 2px solid rgba(34, 211, 238, 0.3);
  border-radius: 20px;
}

.newsletter-icon-box {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.newsletter-icon-box svg {
  width: 32px;
  height: 32px;
  stroke: white;
}

.newsletter-content {
  flex: 1;
}

.newsletter-content h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0B1120;
  margin: 0 0 0.5rem;
}

.newsletter-content p {
  color: #6B7280;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}

.newsletter-cta-btn {
  flex-shrink: 0;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.newsletter-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG RESOURCES SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-resources-section {
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
}

.blog-resources-section.full-width {
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.blog-resources-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.resource-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.05);
}

.resource-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.resource-icon-box svg {
  width: 28px;
  height: 28px;
}

.resource-content {
  flex: 1;
  min-width: 0;
}

.resource-content h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.35rem;
}

.resource-content p {
  font-size: 0.85rem;
  color: #9CA3AF;
  margin: 0;
  line-height: 1.4;
}

.resource-arrow {
  width: 24px;
  height: 24px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.resource-arrow svg {
  width: 20px;
  height: 20px;
  stroke: #9CA3AF;
}

.resource-card:hover .resource-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Resource Card Variants */
.resource-card.resource-youtube .resource-icon-box {
  background: rgba(239, 68, 68, 0.15);
}
.resource-card.resource-youtube .resource-icon-box svg {
  fill: #ef4444;
}
.resource-card.resource-youtube:hover {
  border-color: rgba(239, 68, 68, 0.3);
}

.resource-card.resource-facebook .resource-icon-box {
  background: rgba(59, 130, 246, 0.15);
}
.resource-card.resource-facebook .resource-icon-box svg {
  fill: #3b82f6;
}
.resource-card.resource-facebook:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.resource-card.resource-tutoring .resource-icon-box {
  background: rgba(34, 211, 238, 0.15);
}
.resource-card.resource-tutoring .resource-icon-box svg {
  stroke: #22d3ee;
}
.resource-card.resource-tutoring:hover {
  border-color: rgba(34, 211, 238, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG CTA SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-cta-section {
  position: relative;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120, #1E293B);
  overflow: hidden;
}

.blog-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(34, 211, 238, 0.1), transparent 70%);
}

.blog-cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.blog-cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: white;
  margin: 0 0 1rem;
}

.blog-cta-content p {
  font-size: 1.1rem;
  color: #9CA3AF;
  margin: 0 0 2rem;
}

.blog-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .resources-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 6rem 1.5rem 4rem;
  }
  
  .blog-hero-stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .blog-stat-divider {
    display: none;
  }
  
  .topics-grid {
    grid-template-columns: 1fr;
  }
  
  .newsletter-box {
    flex-direction: column;
    text-align: center;
  }
  
  #blog-listing .quarto-listing-default {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .blog-hero-title {
    font-size: 2rem;
  }
  
  .topic-card {
    padding: 1rem;
  }
  
  .topic-content p {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   PYSTATR+ ENHANCED COMPONENTS
   - Futuristic Animated Navbar
   - Story Section Overlay Restoration
   - Reimagined Footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FUTURISTIC ANIMATED NAVBAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Navbar Base */
.navbar {
  background: rgba(11, 17, 32, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(34, 211, 238, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(11, 17, 32, 0.98) !important;
  border-bottom-color: rgba(34, 211, 238, 0.2);
}

/* Navbar Container */
.navbar .container-fluid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0.75rem 2rem;
}

/* Logo Enhancement */
.navbar-brand {
  position: relative;
  transition: all 0.3s ease;
}

.navbar-brand::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.navbar-brand:hover::after {
  width: 80%;
}

/* Nav Links Base */
.navbar-nav .nav-link {
  position: relative;
  color: #9CA3AF !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.75rem 1.25rem !important;
  margin: 0 0.25rem;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Hover Glow Background */
.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(245, 158, 11, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 8px;
}

.navbar-nav .nav-link:hover::before {
  opacity: 1;
}

/* Animated Underline */
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b, #22d3ee);
  background-size: 200% 100%;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.navbar-nav .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-nav .nav-link:hover {
  color: white !important;
  transform: translateY(-1px);
}

/* Active Tab - Glowing Effect */
.navbar-nav .nav-link.active {
  color: white !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(245, 158, 11, 0.1));
  border: none !important;
  outline: none !important;
  box-shadow: 
    0 0 20px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  animation: activeGlow 3s ease-in-out infinite;
}

@keyframes activeGlow {
  0%, 100% {
    box-shadow: 
      0 0 15px rgba(34, 211, 238, 0.3),
      0 0 30px rgba(34, 211, 238, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 
      0 0 15px rgba(245, 158, 11, 0.3),
      0 0 30px rgba(245, 158, 11, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

.navbar-nav .nav-link.active::after {
  transform: translateX(-50%) scaleX(1);
  animation: activeUnderline 3s ease-in-out infinite;
}

@keyframes activeUnderline {
  0%, 100% {
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
  }
  50% {
    background: linear-gradient(90deg, #f59e0b, #d97706);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUTURISTIC DROPDOWN MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar .dropdown-menu {
  background: rgba(11, 17, 32, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 16px;
  padding: 0.75rem;
  margin-top: 0.5rem;
  min-width: 240px;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: dropdownFadeIn 0.25s ease;
  overflow: hidden;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown Header Glow */
.navbar .dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, #f59e0b, transparent);
  animation: dropdownGlow 4s ease infinite;
}

@keyframes dropdownGlow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Dropdown Items */
.navbar .dropdown-item {
  position: relative;
  color: #9CA3AF;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.875rem 1.25rem;
  border-radius: 10px;
  margin: 0.25rem 0;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Dropdown Item Hover Gradient */
.navbar .dropdown-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(245, 158, 11, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.navbar .dropdown-item:hover::before,
.navbar .dropdown-item:focus::before {
  opacity: 1;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: white;
  background: transparent;
  transform: translateX(5px);
}

/* Dropdown Item Icon Effect */
.navbar .dropdown-item::after {
  content: '→';
  position: absolute;
  right: 1rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  color: #22d3ee;
}

.navbar .dropdown-item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Dropdown Divider */
.navbar .dropdown-divider {
  border-color: rgba(34, 211, 238, 0.1);
  margin: 0.5rem 0;
}

/* Dropdown Toggle Arrow */
.navbar .dropdown-toggle::after {
  border: none;
  content: '▾';
  font-size: 0.7rem;
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
  color: #22d3ee;
}

.navbar .dropdown-toggle.show::after {
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR SOCIAL ICONS
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar .navbar-nav.ms-auto .nav-link {
  padding: 0.5rem !important;
  margin: 0 0.15rem;
}

.navbar .navbar-nav.ms-auto .nav-link svg,
.navbar .navbar-nav.ms-auto .nav-link i {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
}

.navbar .navbar-nav.ms-auto .nav-link:hover svg,
.navbar .navbar-nav.ms-auto .nav-link:hover i {
  color: #22d3ee !important;
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

/* CTA Button in Navbar */
.navbar .btn-primary,
.navbar .cta-button {
  background: linear-gradient(135deg, #22d3ee, #0891b2);
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: white;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.navbar .btn-primary::before,
.navbar .cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.navbar .btn-primary:hover::before,
.navbar .cta-button:hover::before {
  opacity: 1;
}

.navbar .btn-primary span,
.navbar .cta-button span {
  position: relative;
  z-index: 1;
}

.navbar .btn-primary:hover,
.navbar .cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY SECTION OVERLAY RESTORATION
   ═══════════════════════════════════════════════════════════════════════════ */

/* Increase negative margin for overlay effect */
.section-founder-wrapper {
  padding: 0 2rem 4rem;
  margin-top: -8rem !important;
  position: relative;
  z-index: 20;
  background: transparent;
}

/* Transition gradient from hero to light section */
.section-founder-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12rem;
  background: linear-gradient(to bottom, transparent 0%, #f8fafc 100%);
  z-index: -1;
}

/* Enhanced card styling for overlap effect */
.section-founder {
  padding: 4rem 3rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1300px;
  margin: 0 auto;
  box-shadow: 
    0 -10px 40px rgba(0, 0, 0, 0.3),
    0 25px 60px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(34, 211, 238, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════════
   REIMAGINED FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.footer {
  background: linear-gradient(180deg, #0B1120 0%, #070a14 100%);
  position: relative;
  overflow: hidden;
}

/* Animated Background Grid */
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: footerGridMove 20s linear infinite;
}

@keyframes footerGridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(60px, 60px); }
}

/* Glowing Orbs */
.footer::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
  filter: blur(60px);
}

/* Footer Top Line */
.footer-top-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, #22d3ee, #f59e0b, #22d3ee, transparent);
  animation: footerLineGlow 4s ease infinite;
}

@keyframes footerLineGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Footer Container */
.footer-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 2rem;
}

/* Footer Grid */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

/* Brand Column */
.footer-brand {
  max-width: 320px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.footer-logo img {
  width: 48px;
  height: 48px;
}

.footer-logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
}

.footer-logo-text span {
  color: #22d3ee;
}

.footer-tagline {
  color: #9CA3AF;
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

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

.footer-social-link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #9CA3AF;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.1));
  border-color: #22d3ee;
  color: #22d3ee;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(34, 211, 238, 0.2);
}

.footer-social-link svg {
  width: 20px;
  height: 20px;
}

/* Footer Columns */
.footer-column h4 {
  color: white;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-column h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b);
  border-radius: 2px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a {
  color: #9CA3AF;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a::before {
  content: '';
  width: 0;
  height: 2px;
  background: #22d3ee;
  transition: width 0.3s ease;
}

.footer-links a:hover {
  color: #22d3ee;
  transform: translateX(5px);
}

.footer-links a:hover::before {
  width: 10px;
}

/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copyright {
  color: #6B7280;
  font-size: 0.85rem;
}

.footer-copyright a {
  color: #22d3ee;
  text-decoration: none;
}

.footer-legal {
  display: flex;
  gap: 2rem;
}

.footer-legal a {
  color: #6B7280;
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: #22d3ee;
}

/* Footer Badge */
.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.2);
  border-radius: 20px;
  font-size: 0.8rem;
  color: #22d3ee;
}

/* Mission Statement in Footer */
.footer-mission {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-mission p {
  color: #f59e0b;
  font-size: 1.1rem;
  font-style: italic;
  margin: 0;
}

/* Footer Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  
  .footer-brand {
    grid-column: span 2;
    max-width: none;
    text-align: center;
  }
  
  .footer-social {
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .footer-brand {
    grid-column: span 1;
  }
  
  .footer-column h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .footer-links a::before {
    display: none;
  }
  
  .footer-links a:hover {
    transform: none;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(11, 17, 32, 0.98);
    border-radius: 16px;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(34, 211, 238, 0.1);
  }
  
  .navbar-nav .nav-link {
    padding: 0.875rem 1rem !important;
    margin: 0.25rem 0;
  }
  
  .navbar .dropdown-menu {
    background: rgba(30, 41, 59, 0.95);
    border: none;
    border-left: 2px solid #22d3ee;
    border-radius: 0 12px 12px 0;
    margin-left: 1rem;
  }
}

/* Hamburger Menu Animation */
.navbar-toggler {
  border: 1px solid rgba(34, 211, 238, 0.3);
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.navbar-toggler:hover {
  border-color: #22d3ee;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2834, 211, 238, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ═══════════════════════════════════════════════════════════════════════════
   PYSTATR+ ENHANCED COMPONENTS v2
   - Futuristic Animated Navbar with Glowing Active States
   - Story Section Overlay Restoration  
   - Reimagined Footer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   FUTURISTIC ANIMATED NAVBAR
   ═══════════════════════════════════════════════════════════════════════════ */

/* Navbar Base - Override Quarto defaults */
#quarto-header,
.navbar {
  background: rgba(11, 17, 32, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(34, 211, 238, 0.15) !important;
  box-shadow: 
    0 4px 30px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(34, 211, 238, 0.1) inset !important;
  transition: all 0.3s ease !important;
}

/* Scrolled state */
#quarto-header.headroom--not-top {
  background: rgba(11, 17, 32, 0.98) !important;
  border-bottom-color: rgba(34, 211, 238, 0.25) !important;
  box-shadow: 
    0 8px 40px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(34, 211, 238, 0.2) inset !important;
}

/* Logo Enhancement */
.navbar-brand {
  position: relative;
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.02);
}

.navbar-brand::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.navbar-brand:hover::after {
  width: 100%;
}

/* Nav Links Base */
.navbar .navbar-nav .nav-item .nav-link {
  position: relative;
  color: #9CA3AF !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.65rem 1.1rem !important;
  margin: 0 0.15rem;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 1;
}

/* Hover Background Glow */
.navbar .navbar-nav .nav-item .nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(245, 158, 11, 0.06));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
  z-index: -1;
}

.navbar .navbar-nav .nav-item .nav-link:hover::before {
  opacity: 1;
}

/* Animated Underline with Gradient */
.navbar .navbar-nav .nav-item .nav-link::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, #22d3ee, #f59e0b, #22d3ee);
  background-size: 200% 100%;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: navGradientShift 3s ease infinite;
}

@keyframes navGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.navbar .navbar-nav .nav-item .nav-link:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: white !important;
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTIVE TAB - ALTERNATING PYSTATR+ GLOW
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .nav-link.active {
  color: white !important;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(245, 158, 11, 0.06)) !important;
  border: none !important;
  outline: none !important;
  border-radius: 10px !important;
  animation: activeTabGlow 4s ease-in-out infinite !important;
}

@keyframes activeTabGlow {
  0%, 100% {
    box-shadow: 
      0 0 15px rgba(34, 211, 238, 0.3),
      0 0 30px rgba(34, 211, 238, 0.1),
      inset 0 0 15px rgba(34, 211, 238, 0.05);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(34, 211, 238, 0.05)) !important;
  }
  50% {
    box-shadow: 
      0 0 15px rgba(245, 158, 11, 0.3),
      0 0 30px rgba(245, 158, 11, 0.1),
      inset 0 0 15px rgba(245, 158, 11, 0.05);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.05)) !important;
  }
}

.navbar .navbar-nav .nav-item .nav-link.active::after,
.navbar .navbar-nav .nav-item.active .nav-link::after,
.navbar .nav-link.active::after {
  transform: translateX(-50%) scaleX(1) !important;
  animation: activeUnderlineGlow 4s ease-in-out infinite !important;
}

@keyframes activeUnderlineGlow {
  0%, 100% {
    background: linear-gradient(90deg, #22d3ee, #06b6d4) !important;
    box-shadow: 0 0 8px rgba(34, 211, 238, 0.5);
  }
  50% {
    background: linear-gradient(90deg, #f59e0b, #d97706) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FUTURISTIC DROPDOWN MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar .dropdown-menu {
  background: rgba(11, 17, 32, 0.98) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(34, 211, 238, 0.25) !important;
  border-radius: 16px !important;
  padding: 0.75rem !important;
  margin-top: 0.75rem !important;
  min-width: 260px !important;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(34, 211, 238, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  animation: dropdownSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

@keyframes dropdownSlideIn {
  from {
    opacity: 0;
    transform: translateY(-15px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Dropdown Top Glow Line */
.navbar .dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, #22d3ee 30%, #f59e0b 70%, transparent 90%);
  animation: dropdownLineGlow 3s ease infinite;
}

@keyframes dropdownLineGlow {
  0%, 100% { 
    opacity: 0.7;
    background-position: 0% 50%;
  }
  50% { 
    opacity: 1;
    background-position: 100% 50%;
  }
}

/* Dropdown Items */
.navbar .dropdown-menu .dropdown-item {
  position: relative;
  color: #9CA3AF !important;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.9rem 1.25rem !important;
  border-radius: 10px !important;
  margin: 0.2rem 0 !important;
  transition: all 0.3s ease;
  overflow: hidden;
  background: transparent !important;
}

/* Dropdown Item Hover Effect */
.navbar .dropdown-menu .dropdown-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(245, 158, 11, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 10px;
}

.navbar .dropdown-menu .dropdown-item:hover::before,
.navbar .dropdown-menu .dropdown-item:focus::before {
  opacity: 1;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  color: white !important;
  background: transparent !important;
  transform: translateX(8px);
}

/* Arrow indicator on hover */
.navbar .dropdown-menu .dropdown-item::after {
  content: '→';
  position: absolute;
  right: 1rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
  color: #22d3ee;
  font-weight: bold;
}

.navbar .dropdown-menu .dropdown-item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* Dropdown Toggle Arrow */
.navbar .dropdown-toggle::after {
  border: none !important;
  content: '▾' !important;
  font-size: 0.65rem !important;
  margin-left: 0.4rem !important;
  vertical-align: middle !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
  color: #22d3ee !important;
}

.navbar .dropdown-toggle:hover::after {
  color: #f59e0b !important;
}

.navbar .dropdown.show .dropdown-toggle::after {
  transform: rotate(180deg) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVBAR SOCIAL ICONS & CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.navbar .navbar-nav .nav-link svg,
.navbar .navbar-nav .nav-link i {
  transition: all 0.3s ease;
}

.navbar .navbar-nav .nav-link:hover svg,
.navbar .navbar-nav .nav-link:hover i {
  color: #22d3ee !important;
  transform: scale(1.15);
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.5));
}

/* Hamburger Menu */
.navbar-toggler {
  border: 1px solid rgba(34, 211, 238, 0.4) !important;
  padding: 0.5rem !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

.navbar-toggler:hover {
  border-color: #22d3ee !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.3) !important;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25) !important;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2834, 211, 238, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Mobile Nav */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(11, 17, 32, 0.98) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    margin-top: 1rem !important;
    border: 1px solid rgba(34, 211, 238, 0.15) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
  }
  
  .navbar .dropdown-menu {
    background: rgba(30, 41, 59, 0.95) !important;
    border: none !important;
    border-left: 2px solid #22d3ee !important;
    border-radius: 0 12px 12px 0 !important;
    margin-left: 1rem !important;
    margin-top: 0.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUARTO NAVBAR OVERRIDES - Remove default borders
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove all default Quarto active styling */
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-item .nav-link:focus,
.navbar .nav-item .nav-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure no borders on active state */
#quarto-header .navbar .nav-link.active,
#quarto-header .navbar .nav-item.active > .nav-link,
.quarto-title-banner .nav-link.active {
  border: none !important;
  outline: none !important;
  border-color: transparent !important;
}

/* Override any Bootstrap/Quarto border styles */
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  border: none !important;
  border-color: transparent !important;
}

/* Specific fix for the bordered active state */
.navbar .navbar-nav .nav-link[aria-current="page"],
.navbar .navbar-nav .nav-link.active {
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  outline-width: 0 !important;
}

/* Additional aggressive overrides */
.navbar .nav-link,
.navbar .nav-link:active,
.navbar .nav-link:focus,
.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  border: 0 !important;
  border-style: none !important;
  outline: 0 !important;
  outline-style: none !important;
  box-decoration-break: clone !important;
}

/* Remove Bootstrap focus ring */
.navbar .nav-link:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Target specific Quarto/Bootstrap classes */
.navbar .nav-link.nav-link,
.navbar-nav > .nav-item > .nav-link {
  border: none !important;
}

/* Override any inherited border styles */
.navbar .navbar-nav .nav-item .nav-link {
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ULTRA-AGGRESSIVE NAVBAR RESET - Ensure no borders anywhere
   ═══════════════════════════════════════════════════════════════════════════ */

/* Reset all possible nav link states */
.navbar a,
.navbar a:link,
.navbar a:visited,
.navbar a:hover,
.navbar a:active,
.navbar a:focus,
.navbar a:focus-visible,
.navbar .nav-link,
.navbar .nav-link:link,
.navbar .nav-link:visited,
.navbar .nav-link:hover,
.navbar .nav-link:active,
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
.navbar-nav .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav > .nav-item > .nav-link,
.navbar-nav > .nav-item > .nav-link.active,
#quarto-header .nav-link,
#quarto-header .nav-link.active {
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  outline: 0 !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Specifically target the active state box */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  border-radius: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NUCLEAR OPTION - Remove ALL styling that could create borders
   ═══════════════════════════════════════════════════════════════════════════ */

/* Target Bootstrap 5 focus ring which uses box-shadow */
.navbar .nav-link:focus,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  box-shadow: 
    0 0 15px rgba(34, 211, 238, 0.3),
    0 0 30px rgba(34, 211, 238, 0.1),
    inset 0 0 15px rgba(34, 211, 238, 0.05) !important;
}

/* Remove any pseudo-element borders */
.navbar .nav-link::before,
.navbar .nav-link::after,
.navbar .nav-link.active::before,
.navbar .nav-link[aria-current="page"]::before {
  border: none !important;
  outline: none !important;
}

/* Override Bootstrap's .nav-link styles completely */
.nav-link:focus:not(:focus-visible) {
  outline: 0 !important;
}

.navbar .nav-link:focus-visible {
  outline: 0 !important;
  box-shadow: 
    0 0 15px rgba(34, 211, 238, 0.3),
    0 0 30px rgba(34, 211, 238, 0.1) !important;
}

/* Target Quarto's specific class patterns */
.navbar-expand-lg .navbar-nav .nav-link.active,
.navbar-expand-lg .navbar-nav .nav-link[aria-current="page"] {
  border: 0 !important;
  outline: 0 !important;
}

/* Reset from Bootstrap nav styles */
.nav-link {
  --bs-nav-link-focus-shadow: none;
}

.navbar-nav .nav-link.active {
  --bs-navbar-active-color: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINAL NUCLEAR OPTION - Absolutely no borders on nav links
   ═══════════════════════════════════════════════════════════════════════════ */

/* Target every possible selector combination */
.navbar .nav-link,
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
.navbar-nav .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link[aria-current="page"],
.navbar-nav .nav-item .nav-link,
.navbar-nav .nav-item .nav-link.active,
.navbar-nav > li > a,
.navbar-nav > li > a.active,
#quarto-header .nav-link,
#quarto-header .nav-link.active,
#quarto-header .navbar-nav .nav-link,
#quarto-header .navbar-nav .nav-link.active,
.navbar-expand-lg .navbar-nav .nav-link,
.navbar-expand-lg .navbar-nav .nav-link.active {
  border: 0 none transparent !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
  border-top: 0 none transparent !important;
  border-right: 0 none transparent !important;
  border-bottom: 0 none transparent !important;
  border-left: 0 none transparent !important;
  outline: 0 none transparent !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  text-decoration: none !important;
  -webkit-tap-highlight-color: transparent !important;
  box-decoration-break: clone !important;
}

/* Target focus and focus-visible states specifically */
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .nav-link.active:focus,
.navbar .nav-link.active:focus-visible,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible,
#quarto-header .nav-link:focus,
#quarto-header .nav-link:focus-visible {
  border: 0 none transparent !important;
  outline: 0 none transparent !important;
  box-shadow: 
    0 0 15px rgba(34, 211, 238, 0.3),
    0 0 30px rgba(34, 211, 238, 0.1) !important;
}

/* Ensure active state has proper glow, not border */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(245, 158, 11, 0.06)) !important;
  border-radius: 10px !important;
  box-shadow: 
    0 0 15px rgba(34, 211, 238, 0.3),
    0 0 30px rgba(34, 211, 238, 0.1),
    inset 0 0 15px rgba(34, 211, 238, 0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORY SECTION OVERLAY - RESTORED
   ═══════════════════════════════════════════════════════════════════════════ */

.section-founder-wrapper {
  padding: 0 2rem 4rem !important;
  margin-top: -10rem !important;
  position: relative !important;
  z-index: 20 !important;
  background: transparent !important;
}

.section-founder-wrapper::before {
  content: '' !important;
  position: absolute !important;
  top: 10rem !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(to bottom, transparent 0%, #f8fafc 20%) !important;
  z-index: -1 !important;
}

.section-founder {
  box-shadow: 
    0 -15px 50px rgba(0, 0, 0, 0.4),
    0 30px 70px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(34, 211, 238, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Responsive overlay adjustments */
@media (max-width: 1024px) {
  .section-founder-wrapper {
    margin-top: -8rem !important;
    padding: 0 1.5rem 3rem !important;
  }
}

@media (max-width: 768px) {
  .section-founder-wrapper {
    margin-top: -6rem !important;
    padding: 0 1rem 2rem !important;
  }
  
  .section-founder-wrapper::before {
    top: 6rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REIMAGINED FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override Quarto footer completely */
footer.nav-footer {
  background: linear-gradient(180deg, #0B1120 0%, #050810 100%) !important;
  border-top: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Animated Grid Background */
footer.nav-footer::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: 
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  animation: footerGridDrift 25s linear infinite !important;
}

@keyframes footerGridDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Glowing Orb Effect */
footer.nav-footer::after {
  content: '' !important;
  position: absolute !important;
  bottom: -80px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 500px !important;
  height: 250px !important;
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.1) 0%, transparent 70%) !important;
  filter: blur(50px) !important;
  pointer-events: none !important;
}

/* Top Glow Line */
.footer-glow-line {
  height: 3px;
  background: linear-gradient(90deg, transparent, #22d3ee 25%, #f59e0b 50%, #22d3ee 75%, transparent);
  animation: footerLineShimmer 4s ease infinite;
}

@keyframes footerLineShimmer {
  0%, 100% { opacity: 0.6; background-position: 0% 50%; }
  50% { opacity: 1; background-position: 100% 50%; }
}

/* Footer Content Container */
footer.nav-footer .nav-footer-left,
footer.nav-footer .nav-footer-center,
footer.nav-footer .nav-footer-right {
  position: relative !important;
  z-index: 2 !important;
}

footer.nav-footer p,
footer.nav-footer a {
  position: relative !important;
  z-index: 2 !important;
}

/* Footer Links Styling */
footer.nav-footer a {
  color: #9CA3AF !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

footer.nav-footer a:hover {
  color: #22d3ee !important;
}

footer.nav-footer a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, #22d3ee, #f59e0b) !important;
  transition: width 0.3s ease !important;
}

footer.nav-footer a:hover::after {
  width: 100% !important;
}

/* Footer Text */
footer.nav-footer .nav-footer-left {
  color: #6B7280 !important;
}

footer.nav-footer .nav-footer-right {
  color: #f59e0b !important;
  font-style: italic !important;
}

/* Footer Padding */
footer.nav-footer > div {
  padding: 1.5rem 2rem !important;
}/* ═══════════════════════════════════════════════════════════════════════════
   BLOG PAGE PULSATING LOGO
   ═══════════════════════════════════════════════════════════════════════════ */

.blog-hero-logo-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 1.5rem;
}

.blog-hero-logo-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  object-fit: contain;
  z-index: 10;
  filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.4));
}

/* Pulsating Rings */
.pulsating-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid;
  opacity: 0;
}

.pulsating-ring-1 {
  width: 60px;
  height: 60px;
  border-color: #22d3ee;
  animation: pulsate 2s ease-out infinite;
}

.pulsating-ring-2 {
  width: 60px;
  height: 60px;
  border-color: #f59e0b;
  animation: pulsate 2s ease-out infinite 0.5s;
}

.pulsating-ring-3 {
  width: 60px;
  height: 60px;
  border-color: #22d3ee;
  animation: pulsate 2s ease-out infinite 1s;
}

@keyframes pulsate {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DONATION PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Donation Hero */
.donate-hero {
  position: relative;
  padding: 8rem 2rem 6rem;
  padding-top: calc(70px + 5rem) !important;
  margin-top: -70px !important;
  background: linear-gradient(135deg, #0B1120 0%, #1a1a2e 50%, #0B1120 100%);
  overflow: hidden;
  text-align: center;
}

.donate-hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(245, 158, 11, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

.donate-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.donate-hero-orb-1 {
  top: 10%;
  left: 20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
  animation: floatOrb 8s ease-in-out infinite;
}

.donate-hero-orb-2 {
  bottom: 10%;
  right: 15%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
  animation: floatOrb 10s ease-in-out infinite reverse;
}

.donate-hero-particles {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.3) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
}

.donate-hero-content {
  position: relative;
  z-index: 10;
  max-width: 800px;
  margin: 0 auto;
}

/* Pulsating Heart Logo */
.donate-hero-logo-container {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
}

.donate-heart-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  color: #f59e0b;
  z-index: 10;
  animation: heartBeat 1.5s ease-in-out infinite;
}

.donate-heart-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.5));
}

@keyframes heartBeat {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.15); }
}

.donate-hero-label {
  display: inline-block;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 50px;
  color: #f59e0b;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.donate-hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: white;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.text-gradient-gold {
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3s ease-in-out infinite;
}

@keyframes goldShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.donate-hero-subtitle {
  font-size: 1.15rem;
  color: #9CA3AF;
  line-height: 1.7;
  max-width: 650px;
  margin: 0 auto 2.5rem;
}

.donate-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.donate-stat-item {
  text-align: center;
}

.donate-stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 0.25rem;
}

.donate-stat-text {
  font-size: 0.9rem;
  color: #9CA3AF;
}

.donate-stat-divider {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(245, 158, 11, 0.3), transparent);
}

.donate-hero-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

/* Why Support Section */
.donate-why-section {
  padding: 5rem 2rem;
  background: #ffffff;
}

.donate-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.donate-label {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 50px;
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.donate-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 1rem;
}

.donate-subtitle {
  font-size: 1.1rem;
  color: #6B7280;
  max-width: 600px;
  margin: 0 auto;
}

.donate-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.donate-impact-card {
  background: #f8fafc;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.donate-impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.donate-impact-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.donate-impact-icon svg {
  width: 32px;
  height: 32px;
}

.donate-impact-icon-education {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.05));
  color: #22d3ee;
}

.donate-impact-icon-africa {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
  color: #f59e0b;
}

.donate-impact-icon-tools {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  color: #3b82f6;
}

.donate-impact-icon-mentorship {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
  color: #10b981;
}

.donate-impact-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.75rem;
}

.donate-impact-card p {
  font-size: 0.95rem;
  color: #6B7280;
  line-height: 1.6;
}

/* Donation Options Section */
.donate-options-section {
  position: relative;
  padding: 5rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 100%);
  overflow: hidden;
}

.donate-options-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(245, 158, 11, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.donate-section-header-light {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 10;
}

.donate-label-light {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 50px;
  color: #f59e0b;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.donate-title-light {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.donate-subtitle-light {
  font-size: 1.1rem;
  color: #9CA3AF;
}

/* Toggle Buttons */
.donate-toggle-container {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
}

.donate-toggle-btn {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  background: transparent;
  color: #9CA3AF;
  cursor: pointer;
  transition: all 0.3s ease;
}

.donate-toggle-btn:hover {
  border-color: rgba(245, 158, 11, 0.5);
  color: white;
}

.donate-toggle-active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: white;
}

/* Donation Tiers */
.donate-tiers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
  position: relative;
  z-index: 10;
}

.donate-tier-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.donate-tier-card:hover {
  transform: translateY(-5px);
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.donate-tier-selected {
  border-color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.1) !important;
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.2);
}

.donate-tier-featured {
  border-color: rgba(245, 158, 11, 0.5);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
  transform: scale(1.05);
}

.donate-tier-featured:hover {
  transform: scale(1.05) translateY(-5px);
}

.donate-tier-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50px;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.donate-tier-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(34, 211, 238, 0.15);
  border-radius: 50px;
  color: #22d3ee;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.donate-tier-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1rem;
}

.donate-tier-description {
  margin-bottom: 1.5rem;
}

.donate-tier-description p {
  font-size: 0.9rem;
  color: #9CA3AF;
  line-height: 1.5;
}

.donate-tier-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  text-align: left;
}

.donate-tier-benefits li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  color: #E5E7EB;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.donate-tier-benefits li:last-child {
  border-bottom: none;
}

.donate-tier-benefits svg {
  width: 16px;
  height: 16px;
  color: #10b981;
  flex-shrink: 0;
}

.donate-tier-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: 2px solid rgba(34, 211, 238, 0.5);
  border-radius: 12px;
  background: transparent;
  color: #22d3ee;
  cursor: pointer;
  transition: all 0.3s ease;
}

.donate-tier-btn:hover {
  background: rgba(34, 211, 238, 0.15);
  border-color: #22d3ee;
}

.donate-tier-btn-featured {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: white;
}

.donate-tier-btn-featured:hover {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

/* Custom Amount */
.donate-custom-container {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
}

.donate-custom-container h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1rem;
}

.donate-custom-input-wrapper {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.donate-custom-input-wrapper:focus-within {
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.donate-currency {
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.donate-custom-input {
  width: 200px;
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  background: transparent;
  border: none;
  outline: none;
}

.donate-custom-input::placeholder {
  color: #6B7280;
}

/* Payment Methods */
.donate-payment-section {
  text-align: center;
  position: relative;
  z-index: 10;
}

.donate-payment-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.5rem;
}

.donate-payment-subtitle {
  font-size: 1rem;
  color: #9CA3AF;
  margin-bottom: 2rem;
}

.donate-payment-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.donate-payment-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.donate-payment-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.donate-payment-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.donate-payment-icon svg {
  width: 28px;
  height: 28px;
}

.donate-payment-stripe .donate-payment-icon {
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.2), rgba(99, 91, 255, 0.1));
  color: #635bff;
}

.donate-payment-paypal .donate-payment-icon {
  background: linear-gradient(135deg, rgba(0, 48, 135, 0.2), rgba(0, 48, 135, 0.1));
  color: #003087;
}

.donate-payment-info {
  flex: 1;
  text-align: left;
}

.donate-payment-info h4 {
  font-size: 1rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.25rem;
}

.donate-payment-info p {
  font-size: 0.85rem;
  color: #9CA3AF;
}

.donate-payment-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.donate-payment-btn svg {
  width: 18px;
  height: 18px;
}

.donate-btn-stripe {
  background: linear-gradient(135deg, #635bff, #5851ea);
  color: white;
}

.donate-btn-stripe:hover {
  box-shadow: 0 10px 30px rgba(99, 91, 255, 0.3);
  transform: translateY(-2px);
}

.donate-btn-paypal {
  background: linear-gradient(135deg, #0070ba, #003087);
  color: white;
}

.donate-btn-paypal:hover {
  box-shadow: 0 10px 30px rgba(0, 112, 186, 0.3);
  transform: translateY(-2px);
}

/* Trust Badges */
.donate-trust-badges {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6B7280;
  font-size: 0.85rem;
}

.trust-badge svg {
  width: 20px;
  height: 20px;
  color: #10b981;
}

/* Transparency Section */
.donate-transparency-section {
  padding: 5rem 2rem;
  background: #ffffff;
}

.donate-allocation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.donate-allocation-chart {
  display: flex;
  justify-content: center;
}

.allocation-ring {
  position: relative;
  width: 250px;
  height: 250px;
}

.allocation-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.allocation-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.allocation-total {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0B1120;
}

.allocation-label {
  display: block;
  font-size: 0.9rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.donate-allocation-breakdown {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.allocation-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 12px;
}

.allocation-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.allocation-color-cyan { background: #22d3ee; }
.allocation-color-gold { background: #f59e0b; }
.allocation-color-green { background: #10b981; }

.allocation-info {
  flex: 1;
}

.allocation-info h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.25rem;
}

.allocation-info p {
  font-size: 0.85rem;
  color: #6B7280;
}

.allocation-percent {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0B1120;
}

/* Alternatives Section */
.donate-alternatives-section {
  padding: 5rem 2rem;
  background: #f8fafc;
}

.donate-alternatives-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.donate-alt-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.donate-alt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(34, 211, 238, 0.3);
}

.donate-alt-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(34, 211, 238, 0.05));
  color: #22d3ee;
}

.donate-alt-icon svg {
  width: 28px;
  height: 28px;
}

.donate-alt-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0B1120;
  margin-bottom: 0.75rem;
}

.donate-alt-card p {
  font-size: 0.9rem;
  color: #6B7280;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.donate-alt-social {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.social-share-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-share-btn svg {
  width: 18px;
  height: 18px;
}

.social-twitter {
  background: #1DA1F2;
  color: white;
}

.social-linkedin {
  background: #0A66C2;
  color: white;
}

.social-facebook {
  background: #1877F2;
  color: white;
}

.social-share-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.donate-alt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #22d3ee;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.donate-alt-link svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.donate-alt-link:hover {
  color: #06b6d4;
}

.donate-alt-link:hover svg {
  transform: translateX(5px);
}

/* Final CTA Section */
.donate-cta-section {
  position: relative;
  padding: 6rem 2rem;
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 50%, #0B1120 100%);
  overflow: hidden;
  text-align: center;
}

.donate-cta-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(245, 158, 11, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
}

.donate-cta-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.donate-cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.donate-cta-orb-1 {
  top: 20%;
  left: 10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
}

.donate-cta-orb-2 {
  bottom: 20%;
  right: 10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
}

.donate-cta-content {
  position: relative;
  z-index: 10;
  max-width: 700px;
  margin: 0 auto;
}

.donate-cta-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  color: #f59e0b;
  animation: heartBeat 1.5s ease-in-out infinite;
}

.donate-cta-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.4));
}

.donate-cta-content h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.donate-cta-content > p {
  font-size: 1.1rem;
  color: #9CA3AF;
  margin-bottom: 2rem;
}

.donate-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.donate-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.donate-cta-btn-primary svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: none;
}

.donate-cta-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(245, 158, 11, 0.3);
}

.donate-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.donate-cta-btn-secondary:hover {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
}

.donate-cta-tagline {
  font-size: 1rem;
  font-style: italic;
  color: #f59e0b;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .donate-hero-title { font-size: 2.75rem; }
  .donate-impact-grid { grid-template-columns: repeat(2, 1fr); }
  .donate-tiers-grid { grid-template-columns: repeat(2, 1fr); }
  .donate-alternatives-grid { grid-template-columns: repeat(2, 1fr); }
  .donate-allocation-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .donate-hero-title { font-size: 2.25rem; }
  .donate-hero-stats { gap: 1.5rem; }
  .donate-stat-number { font-size: 1.5rem; }
  .donate-impact-grid { grid-template-columns: 1fr; }
  .donate-tiers-grid { grid-template-columns: 1fr; }
  .donate-tier-featured { transform: scale(1); }
  .donate-tier-featured:hover { transform: translateY(-5px); }
  .donate-payment-methods { grid-template-columns: 1fr; }
  .donate-alternatives-grid { grid-template-columns: 1fr; }
  .donate-cta-content h2 { font-size: 2rem; }
}

@media (max-width: 480px) {
  .donate-hero-title { font-size: 1.85rem; }
  .donate-title { font-size: 1.85rem; }
  .donate-hero-stats { flex-direction: column; gap: 1rem; }
  .donate-stat-divider { width: 40px; height: 1px; }
  .donate-toggle-container { flex-direction: column; gap: 0.5rem; }
  .donate-toggle-btn { width: 100%; }
  .donate-trust-badges { flex-direction: column; gap: 1rem; }
}

/* Animation for orbs */
@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -30px); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   THE JOURNEY TIMELINE - Flowing Light Path Design
   Golden light ribbons weaving through soft-edged photos
   ═══════════════════════════════════════════════════════════════════════════ */

.journey-section {
  position: relative;
  padding: 2rem 2rem 0;
  margin: 2rem auto;
  max-width: 1400px;
  overflow: hidden;
  background: 
    linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, 
      #0B1120 0%,
      #0d1526 15%,
      #111b2e 35%,
      #0f172a 55%,
      #0c1322 75%,
      #0B1120 100%
    );
  background-size: 40px 40px, 40px 40px, 100% 100%;
  border-radius: 24px;
  box-shadow: 
    0 0 60px rgba(34, 211, 238, 0.1),
    0 20px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Glowing border effect */
.journey-section::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  pointer-events: none;
  z-index: 2;
}

/* Cosmic Background with Stars */
.journey-cosmic-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.journey-stars {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 230px 80px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 370px 50px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 450px 180px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 520px 90px, rgba(255,255,255,0.6), transparent),
    radial-gradient(2px 2px at 600px 130px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 680px 200px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 750px 60px, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 850px 170px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 920px 100px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 1000px 140px, rgba(255,255,255,0.5), transparent);
  background-size: 1100px 220px;
  animation: twinkleStars 8s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes twinkleStars {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.5; }
}

.journey-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.25;
}

.journey-nebula-1 {
  top: 0%;
  left: 5%;
  width: 500px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.3) 0%, transparent 70%);
}

.journey-nebula-2 {
  bottom: 10%;
  right: 0%;
  width: 600px;
  height: 450px;
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
}

/* Quote Header */
.journey-quote-header {
  position: relative;
  z-index: 10;
  text-align: left;
  padding: 1rem 2rem 0.5rem;
  max-width: 1000px;
  margin: 0;
}

.journey-quote {
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.journey-quote-mark {
  font-size: 1.3rem;
  color: #22d3ee;
  font-weight: 700;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.5);
}

.journey-quote-star {
  margin-left: 0.5rem;
  font-style: normal;
  color: #fbbf24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT PATH CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.journey-lightpath-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 580px;
  padding: 1rem 2rem;
}

/* SVG Light Ribbons */
.journey-light-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* Animated light paths */
.light-ribbon {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.light-ribbon-gold {
  stroke: url(#goldGradient);
  stroke-width: 3;
  filter: url(#glowGold);
  opacity: 0.9;
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
  animation: drawRibbon 4s ease-out forwards;
}

.light-ribbon-gold-bright {
  stroke: url(#goldBrightGradient);
  stroke-width: 5;
  filter: url(#glowGoldBright);
  opacity: 0.7;
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
  animation: drawRibbon 4s ease-out 0.3s forwards;
}

.light-ribbon-cyan {
  stroke: url(#cyanGradient);
  stroke-width: 2;
  filter: url(#glowCyan);
  opacity: 0.6;
  stroke-dasharray: 2500;
  stroke-dashoffset: 2500;
  animation: drawRibbon 4s ease-out 0.6s forwards;
}

@keyframes drawRibbon {
  to {
    stroke-dashoffset: 0;
  }
}

/* Particle sparkles along path */
.light-particle {
  fill: #fbbf24;
  filter: url(#glowParticle);
  opacity: 0;
  animation: sparkle 3s ease-in-out infinite;
}

.light-particle:nth-child(odd) {
  fill: #22d3ee;
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOTO CARDS - Soft Edges, No Hard Frames
   ═══════════════════════════════════════════════════════════════════════════ */

.journey-photo {
  position: absolute;
  z-index: 10;
  transition: transform 0.5s ease, z-index 0.1s;
  opacity: 0;
  animation: photoReveal 0.8s ease forwards;
}

.journey-photo:hover {
  transform: scale(1.1) !important;
  z-index: 100;
}

/* Staggered reveal */
.photo-1 { animation-delay: 0.5s; }
.photo-2 { animation-delay: 0.7s; }
.photo-3 { animation-delay: 0.9s; }
.photo-4 { animation-delay: 1.1s; }
.photo-5 { animation-delay: 1.3s; }
.photo-6 { animation-delay: 1.5s; }
.photo-7 { animation-delay: 1.7s; }
.photo-8 { animation-delay: 1.9s; }
.photo-9 { animation-delay: 2.1s; }
.photo-10 { animation-delay: 2.3s; }
.photo-11 { animation-delay: 2.5s; }

@keyframes photoReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* Photo inner with soft vignette edges */
.journey-photo-inner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 
    0 0 40px rgba(245, 158, 11, 0.3),
    0 0 80px rgba(245, 158, 11, 0.15),
    0 20px 60px rgba(0, 0, 0, 0.5);
}

.journey-photo-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 30px 15px rgba(10, 5, 21, 0.7);
  pointer-events: none;
}

.journey-photo-inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Soft glow behind photos */
.journey-photo-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(245, 158, 11, 0.2) 0%, transparent 70%);
  z-index: -1;
  filter: blur(20px);
}

/* Placeholder card for missing photos (like 2017 MBA) */
.journey-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, 
    rgba(34, 211, 238, 0.15) 0%,
    rgba(11, 17, 32, 0.9) 50%,
    rgba(245, 158, 11, 0.15) 100%
  );
  text-align: center;
  padding: 1rem;
}

.placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.6));
}

.placeholder-degree {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  color: #22d3ee;
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.6);
  letter-spacing: 0.1em;
}

.placeholder-school {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* Year label */
.journey-photo-year {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.3rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: #22d3ee;
  text-shadow: 
    0 0 20px rgba(34, 211, 238, 0.8),
    0 0 40px rgba(34, 211, 238, 0.4);
  white-space: nowrap;
}

/* Caption on hover */
.journey-photo-caption {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  text-align: center;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.journey-photo:hover .journey-photo-caption {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOTO POSITIONS - Flowing S-Curve Layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* Small photos */
.photo-small .journey-photo-inner {
  width: 120px;
  height: 150px;
}

/* Medium photos */
.photo-medium .journey-photo-inner {
  width: 140px;
  height: 175px;
}

/* Large photos */
.photo-large .journey-photo-inner {
  width: 180px;
  height: 225px;
}

/* Position each photo along the flowing path */
.photo-1 { left: 2%; top: 55%; }      /* 1996 - bottom left */
.photo-2 { left: 10%; top: 35%; }     /* 1998 - rising */
.photo-3 { left: 18%; top: 50%; }     /* 2000 - dip */
.photo-4 { left: 27%; top: 25%; }     /* 2001a - peak */
.photo-5 { left: 36%; top: 45%; }     /* 2001b - valley */
.photo-6 { left: 45%; top: 20%; }     /* 2008 - peak */
.photo-7 { left: 54%; top: 40%; }     /* 2010 - dip */
.photo-8 { left: 62%; top: 15%; }     /* 2011 - peak */
.photo-9 { left: 71%; top: 35%; }     /* 2017 - mid */
.photo-10 { left: 80%; top: 10%; }    /* 2020 - high */
.photo-11 { left: 88%; top: 25%; }    /* 2025 - prominent */

/* Make key milestones larger */
.photo-5 .journey-photo-inner,
.photo-11 .journey-photo-inner {
  width: 160px;
  height: 200px;
}

.photo-6 .journey-photo-inner,
.photo-8 .journey-photo-inner,
.photo-10 .journey-photo-inner {
  width: 150px;
  height: 188px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM QUOTE
   ═══════════════════════════════════════════════════════════════════════════ */

.journey-bottom-quote {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.journey-bottom-quote p {
  font-size: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISSION BANNER (unchanged from previous)
   ═══════════════════════════════════════════════════════════════════════════ */

.journey-mission-banner {
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  overflow: hidden;
  z-index: 20;
  border-radius: 0 0 24px 24px;
}

.journey-banner-content {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.journey-banner-scroll {
  display: flex;
  gap: 2rem;
  animation: bannerScroll 45s linear infinite;
  white-space: nowrap;
}

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

.journey-banner-scroll span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0B1120;
  font-style: italic;
}

.journey-banner-separator {
  color: #0B1120;
  opacity: 0.5;
}

.journey-banner-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 1.5rem;
  background: rgba(11, 17, 32, 0.95);
  border-radius: 10px 0 0 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.journey-banner-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.journey-banner-tagline {
  display: flex;
  flex-direction: column;
}

.tagline-main {
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
  font-family: 'Poppins', sans-serif;
}

.tagline-sub {
  font-size: 0.55rem;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .journey-lightpath-container {
    min-height: 500px;
  }
  
  .photo-small .journey-photo-inner {
    width: 100px;
    height: 125px;
  }
  
  .photo-medium .journey-photo-inner {
    width: 120px;
    height: 150px;
  }
  
  .journey-photo-year {
    font-size: 1.1rem;
    bottom: -30px;
  }
}

@media (max-width: 900px) {
  .journey-lightpath-container {
    min-height: auto;
    padding: 1rem;
  }
  
  .journey-light-svg {
    display: none;
  }
  
  /* Switch to grid layout */
  .journey-photos-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 1rem;
    padding: 2rem 1rem;
  }
  
  .journey-photo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto;
  }
  
  .journey-photo-inner,
  .photo-small .journey-photo-inner,
  .photo-medium .journey-photo-inner,
  .photo-large .journey-photo-inner,
  .photo-5 .journey-photo-inner,
  .photo-6 .journey-photo-inner,
  .photo-8 .journey-photo-inner,
  .photo-10 .journey-photo-inner,
  .photo-11 .journey-photo-inner {
    width: 100% !important;
    max-width: 140px !important;
    height: auto !important;
    aspect-ratio: 3/4;
  }
  
  .journey-photo-caption {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: 100%;
    margin-top: 2rem;
    opacity: 1;
  }
  
  .journey-quote {
    font-size: 0.9rem;
  }
  
  .journey-bottom-quote p {
    font-size: 0.85rem;
  }
}

@media (max-width: 600px) {
  .journey-photos-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 0.75rem;
  }
  
  .journey-photo-inner {
    max-width: 120px !important;
  }
  
  .journey-photo-year {
    font-size: 0.95rem;
    bottom: -25px;
  }
  
  .journey-photo-caption {
    font-size: 0.6rem;
    margin-top: 1.5rem;
  }
  
  .journey-quote-header,
  .journey-bottom-quote {
    padding: 1rem;
  }
  
  .journey-mission-banner {
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.75rem;
  }
  
  .journey-banner-logo {
    border-radius: 8px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 400px) {
  .journey-photo-inner {
    max-width: 100px !important;
  }
}
/* Transparent-2 Section Spacing */
.donate-transparent-2-section {
  padding: 4rem 0;
  background: #ffffff;
}

/* Section Header */
.donate-transparent-2-header {
  text-align: center;
  margin-bottom: 3rem;
}

.donate-transparent-2-label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.donate-transparent-2-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}

.donate-transparent-2-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* Chart Container */
.donate-transparent-2-chart {
  margin-bottom: 3rem;
}

.transparent-2-bar-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.transparent-2-bar {
  display: flex;
  width: 100%;
  height: 70px;
  border-radius: 35px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  margin-bottom: 1.5rem;
  position: relative;
}

.transparent-2-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.transparent-2-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.transparent-2-seg:hover {
  filter: brightness(1.15) saturate(1.1);
}

.transparent-2-seg-cyan {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
}

.transparent-2-seg-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.transparent-2-seg-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.transparent-2-seg-label {
  font-weight: 700;
  font-size: 1.125rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

/* Center Caption */
.transparent-2-center {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.8) 100%);
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.transparent-2-total {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.transparent-2-caption {
  display: block;
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

/* Breakdown Grid */
.donate-transparent-2-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.transparent-2-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.transparent-2-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.transparent-2-item:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
}

.transparent-2-item:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

.transparent-2-item:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, #10b981, transparent);
}

.transparent-2-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(203, 213, 225, 1);
}

.transparent-2-item:hover::before {
  opacity: 1;
}

/* Colored Percentage Values - Now at Top */
.transparent-2-percent {
  font-size: 3.5rem;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.transparent-2-percent-cyan {
  color: #22d3ee;
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.transparent-2-percent-gold {
  color: #f59e0b;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.transparent-2-percent-green {
  color: #10b981;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.transparent-2-info {
  width: 100%;
}

.transparent-2-info h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.3px;
}

.transparent-2-info p {
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Tablet Layout - 2 Columns */
@media (max-width: 1024px) {
  .donate-transparent-2-title {
    font-size: 2rem;
  }
  
  .donate-transparent-2-breakdown {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .transparent-2-item:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
  }
  
  .transparent-2-percent {
    font-size: 3rem;
  }
}

/* Tablet - Smaller */
@media (max-width: 768px) {
  .donate-transparent-2-section {
    padding: 3rem 0;
  }
  
  .donate-transparent-2-header {
    margin-bottom: 2rem;
  }
  
  .donate-transparent-2-title {
    font-size: 1.75rem;
  }
  
  .donate-transparent-2-subtitle {
    font-size: 1rem;
  }
  
  .donate-transparent-2-chart {
    margin-bottom: 2rem;
  }
  
  .transparent-2-bar {
    height: 60px;
    border-radius: 30px;
  }
  
  .transparent-2-seg-label {
    font-size: 1rem;
  }
  
  .transparent-2-total {
    font-size: 1.25rem;
  }
  
  .transparent-2-caption {
    font-size: 0.875rem;
  }
  
  .transparent-2-item:nth-child(3) {
    max-width: 100%;
  }
  
  .transparent-2-percent {
    font-size: 2.75rem;
  }
}

/* Mobile Layout - 1 Column */
@media (max-width: 640px) {
  .donate-transparent-2-section {
    padding: 2rem 0;
  }
  
  .donate-transparent-2-title {
    font-size: 1.5rem;
  }
  
  .donate-transparent-2-subtitle {
    font-size: 0.9375rem;
  }
  
  .donate-transparent-2-breakdown {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .transparent-2-item {
    padding: 1.5rem 1.25rem;
    gap: 1rem;
  }
  
  .transparent-2-item:nth-child(3) {
    grid-column: auto;
  }
  
  .transparent-2-bar {
    height: 50px;
    border-radius: 25px;
  }
  
  .transparent-2-seg-label {
    font-size: 0.9375rem;
  }
  
  .transparent-2-seg[style*="width: 10%"] .transparent-2-seg-label {
    display: none;
  }
  
  .transparent-2-info h4 {
    font-size: 1.125rem;
  }
  
  .transparent-2-percent {
    font-size: 2.5rem;
  }
}

/* Extra Small Mobile */
@media (max-width: 420px) {
  .transparent-2-seg-label {
    display: none;
  }
  
  .transparent-2-bar {
    height: 44px;
    border-radius: 22px;
  }
  
  .transparent-2-center {
    padding: 1rem;
  }
  
  .transparent-2-total {
    font-size: 1.125rem;
  }
  
  .transparent-2-caption {
    font-size: 0.8125rem;
  }
  
  .transparent-2-percent {
    font-size: 2.25rem;
  }
}
/* Social Share Buttons - Centered with Square Design */
.donate-alt-social {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
}

.social-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  flex-shrink: 0;
}

.social-share-btn svg {
  width: 20px;
  height: 20px;
}

.social-facebook {
  background: #1877f2;
  color: #ffffff;
}

.social-facebook:hover {
  background: #145dbf;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

.social-youtube {
  background: #ff0000;
  color: #ffffff;
}

.social-youtube:hover {
  background: #cc0000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
}

.social-medium {
  background: #000000;
  color: #ffffff;
}

.social-medium:hover {
  background: #2d2d2d;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.social-linkedin {
  background: #0a66c2;
  color: #ffffff;
}

.social-linkedin:hover {
  background: #084e94;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.4);
}

/* Ensure card content is centered */
.donate-alt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Priority Banner - Full Width Futuristic Design */
.donate-priority-banner {
  margin-top: 4rem;
  width: 100%;
}

.donate-priority-content {
  position: relative;
  width: 100%;
  padding: 2.5rem 3rem;
  background: linear-gradient(135deg, 
    rgba(34, 211, 238, 0.08) 0%, 
    rgba(59, 130, 246, 0.08) 50%,
    rgba(168, 85, 247, 0.08) 100%);
  border-radius: 20px;
  border: 1px solid rgba(34, 211, 238, 0.2);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.donate-priority-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%,
    #22d3ee 20%,
    #3b82f6 50%,
    #a855f7 80%,
    transparent 100%);
  animation: shimmer 3s ease-in-out infinite;
}

.donate-priority-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 211, 238, 0.1) 50%,
    transparent 100%);
  animation: slide 4s ease-in-out infinite;
}

.donate-priority-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, 
    rgba(34, 211, 238, 0.15) 0%, 
    transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: pulse 4s ease-in-out infinite;
}

.donate-priority-text {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.8;
  margin: 0;
  letter-spacing: -0.3px;
}

/* Animations */
@keyframes shimmer {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes slide {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Tablet Responsiveness */
@media (max-width: 768px) {
  .donate-priority-content {
    padding: 2rem 2rem;
    border-radius: 16px;
  }
  
  .donate-priority-text {
    font-size: 1.125rem;
    line-height: 1.7;
  }
  
  .donate-priority-glow {
    width: 300px;
    height: 300px;
  }
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .donate-priority-banner {
    margin-top: 3rem;
  }
  
  .donate-priority-content {
    padding: 1.75rem 1.5rem;
    border-radius: 12px;
  }
  
  .donate-priority-text {
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .donate-priority-glow {
    width: 200px;
    height: 200px;
  }
}

.learn-microcopy {
  font-size: 1rem;
  color: #ffffff;
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 2px solid rgba(34, 211, 238, 0.4);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.learn-microcopy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%,
    #22d3ee 20%,
    #3b82f6 50%,
    #22d3ee 80%,
    transparent 100%);
}

.learn-microcopy::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, 
    transparent 0%,
    #22d3ee 20%,
    #3b82f6 50%,
    #22d3ee 80%,
    transparent 100%);
}

@media (max-width: 768px) {
  .learn-microcopy {
    margin-top: 2rem;
    font-size: 0.9375rem;
    padding: 1.25rem 1.5rem;
    max-width: 90%;
  }
}

@media (max-width: 480px) {
  .learn-microcopy {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
  }
}

/* Topic Cards - Correct Top-Down Layout */
/* ═══════════════════════════════════════════════════════════════════════════
   LEARN PAGE - TOPIC CARDS (What You'll Learn Section)
   ═══════════════════════════════════════════════════════════════════════════ */

.learn-topics-section .topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.learn-topics-section .topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.9) 100%);
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.learn-topics-section .topic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.learn-topics-section .topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  border-color: rgba(203, 213, 225, 1);
}

.learn-topics-section .topic-card:hover::before {
  opacity: 1;
}

/* Icon at Top - Centered */
.learn-topics-section .topic-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  transition: transform 0.3s ease;
}

.learn-topics-section .topic-card:hover .topic-icon {
  transform: scale(1.1) rotate(5deg);
}

.learn-topics-section .topic-icon.cyan {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
  box-shadow: 0 4px 12px rgba(34, 211, 238, 0.2);
}

.learn-topics-section .topic-icon.amber {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.learn-topics-section .topic-icon.violet {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.learn-topics-section .topic-icon.emerald {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.15) 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

/* Heading - Centered Below Icon */
.learn-topics-section .topic-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.5rem 0;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Language Badges */
.lang-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lang-badge.python {
  background: linear-gradient(135deg, #3776ab 0%, #ffd343 100%);
  color: #ffffff;
}

.lang-badge.r-lang {
  background: linear-gradient(135deg, #276dc3 0%, #75aadb 100%);
  color: #ffffff;
}

/* List - Left-Aligned Below Title */
.learn-topics-section .topic-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  text-align: left;
}

.learn-topics-section .topic-card li {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.6;
  padding-left: 2rem;
  position: relative;
  font-weight: 500;
  transition: all 0.3s ease;
}

.learn-topics-section .topic-card li:hover {
  color: #1e293b;
  transform: translateX(4px);
}

/* Futuristic Bullet Design */
.learn-topics-section .topic-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
  transition: all 0.3s ease;
}

.learn-topics-section .topic-card li::after {
  content: '';
  position: absolute;
  left: -4px;
  top: calc(0.5em - 4px);
  width: 14px;
  height: 14px;
  border: 2px solid rgba(34, 211, 238, 0.3);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease;
}

.learn-topics-section .topic-card li:hover::before {
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  transform: scale(1.2);
}

.learn-topics-section .topic-card li:hover::after {
  opacity: 1;
  transform: scale(1.2);
}

/* Color-coded bullets per card */
.learn-topics-section .topic-card:nth-child(1) li::before {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

.learn-topics-section .topic-card:nth-child(1) li::after {
  border-color: rgba(34, 211, 238, 0.3);
}

.learn-topics-section .topic-card:nth-child(1)::before {
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
}

.learn-topics-section .topic-card:nth-child(2) li::before {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.learn-topics-section .topic-card:nth-child(2) li::after {
  border-color: rgba(245, 158, 11, 0.3);
}

.learn-topics-section .topic-card:nth-child(2)::before {
  background: linear-gradient(90deg, transparent, #f59e0b, transparent);
}

.learn-topics-section .topic-card:nth-child(3) li::before {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.learn-topics-section .topic-card:nth-child(3) li::after {
  border-color: rgba(139, 92, 246, 0.3);
}

.learn-topics-section .topic-card:nth-child(3)::before {
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
}

.learn-topics-section .topic-card:nth-child(4) li::before {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.learn-topics-section .topic-card:nth-child(4) li::after {
  border-color: rgba(16, 185, 129, 0.3);
}

.learn-topics-section .topic-card:nth-child(4)::before {
  background: linear-gradient(90deg, transparent, #10b981, transparent);
}

/* Mobile Responsiveness - Learn Topics */
@media (max-width: 768px) {
  .learn-topics-section .topics-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .learn-topics-section .topic-card {
    padding: 1.75rem 1.25rem;
  }
  
  .learn-topics-section .topic-icon {
    width: 70px;
    height: 70px;
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .learn-topics-section .topic-card h4 {
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
  }
  
  .learn-topics-section .topic-card ul {
    gap: 0.75rem;
  }
  
  .learn-topics-section .topic-card li {
    font-size: 0.875rem;
    padding-left: 1.75rem;
  }
}

@media (max-width: 480px) {
  .learn-topics-section .topic-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
  }
  
  .learn-topics-section .topic-card h4 {
    font-size: 1rem;
  }
  
  .learn-topics-section .topic-card li {
    font-size: 0.8125rem;
    padding-left: 1.5rem;
  }
  
  .learn-topics-section .topic-card li::before {
    width: 5px;
    height: 5px;
  }
  
  .learn-topics-section .topic-card li::after {
    width: 12px;
    height: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOG ARTICLE/POST PAGE STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

/* Article Header */
.quarto-title-meta-heading {
  font-weight: 600;
  color: #64748b;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quarto-title-meta-contents {
  color: #475569;
  font-size: 0.95rem;
}

.quarto-title-meta-contents a {
  color: #22d3ee;
  text-decoration: none;
}

.quarto-title-meta-contents a:hover {
  color: #0891b2;
}

/* Article Headings */
.quarto-post-content h2,
article h2 {
  color: #0f172a;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgba(34, 211, 238, 0.3);
}

.quarto-post-content h3,
article h3 {
  color: #1e293b;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Article Lists */
.quarto-post-content ul,
article ul {
  margin: 1rem 0;
  padding-left: 0;
  list-style: none;
}

.quarto-post-content ul li,
article ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  color: #475569;
  line-height: 1.7;
}

.quarto-post-content ul li::before,
article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: #22d3ee;
  border-radius: 50%;
}

/* Citation Block Styling */
#quarto-appendix,
.quarto-appendix {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

#quarto-appendix .quarto-appendix-heading,
.quarto-appendix-heading {
  color: #0f172a;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

#quarto-appendix .quarto-appendix-contents,
.quarto-appendix-contents {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
}

/* BibTeX Citation Box */
.sourceCode.bibtex,
pre.bibtex,
.quarto-appendix pre {
  background: linear-gradient(135deg, #0B1120 0%, #1e293b 100%) !important;
  border: 1px solid rgba(34, 211, 238, 0.2) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  margin: 1rem 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
}

.sourceCode.bibtex code,
pre.bibtex code,
.quarto-appendix pre code {
  color: #e2e8f0 !important;
  background: transparent !important;
}

/* Article Code Blocks */
.quarto-post-content pre,
article pre {
  background: linear-gradient(135deg, #0B1120 0%, #1e293b 100%);
  border: 1px solid rgba(34, 211, 238, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.quarto-post-content pre code,
article pre code {
  color: #e2e8f0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Inline Code */
.quarto-post-content code:not(pre code),
article code:not(pre code) {
  background: rgba(34, 211, 238, 0.1);
  color: #0891b2;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
}

/* Table of Contents - On This Page */
#toc-title,
.toc-title-container {
  font-weight: 700;
  color: #0f172a;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

#TOC a,
.sidebar nav a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

#TOC a:hover,
.sidebar nav a:hover,
#TOC a.active,
.sidebar nav a.active {
  color: #22d3ee;
}

/* Article Footer Citation Reference */
.quarto-appendix-citeas {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #22d3ee;
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #475569;
}

.quarto-appendix-citeas a {
  color: #22d3ee;
  word-break: break-all;
}

/* Categories on Article Page */
.quarto-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.quarto-category {
  background: rgba(34, 211, 238, 0.1);
  color: #0891b2;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.quarto-category:hover {
  background: rgba(34, 211, 238, 0.2);
  color: #0e7490;
}

/* === CEIA HERO - FUTURISTIC ANIMATED === */

.ceia-hero {
  max-width: 420px;
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
}

.hero-visual.ceia-hero {
  align-self: flex-start;
  justify-self: start;
  margin-left: 1.75rem;
  margin-top: 1rem;
}

/* Futuristic Card Container */
.ceia-card {
  position: relative;
  background: rgba(10, 20, 40, 0.85);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: ceiaCardEntrance 0.8s ease-out;
}

@keyframes ceiaCardEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animated Border Glow */
.ceia-border-glow {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.5),
    rgba(34, 211, 238, 0.1) 25%,
    transparent 50%,
    rgba(255, 215, 0, 0.1) 75%,
    rgba(255, 215, 0, 0.4)
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ceiaBorderShift 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ceiaBorderShift {
  0%, 100% { 
    background-position: 0% 50%;
    opacity: 0.7;
  }
  50% { 
    background-position: 100% 50%;
    opacity: 1;
  }
}

/* Scanning Line Effect */
.ceia-scan-line {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  animation: ceiaScanLine 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes ceiaScanLine {
  0% { left: -100%; opacity: 0; }
  50% { opacity: 0.8; }
  100% { left: 100%; opacity: 0; }
}

/* Corner Accents */
.ceia-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 5;
}

.ceia-corner-tl {
  top: 0;
  left: 0;
  border-top: 2px solid rgba(34, 211, 238, 0.6);
  border-left: 2px solid rgba(34, 211, 238, 0.6);
  border-top-left-radius: 4px;
}

.ceia-corner-tr {
  top: 0;
  right: 0;
  border-top: 2px solid rgba(34, 211, 238, 0.6);
  border-right: 2px solid rgba(34, 211, 238, 0.6);
  border-top-right-radius: 4px;
}

.ceia-corner-bl {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  border-left: 2px solid rgba(255, 215, 0, 0.4);
  border-bottom-left-radius: 4px;
}

.ceia-corner-br {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  border-right: 2px solid rgba(255, 215, 0, 0.4);
  border-bottom-right-radius: 4px;
}

/* Card Inner Content */
.ceia-card-inner {
  position: relative;
  z-index: 2;
}

.ceia-static {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(34, 211, 238, 0.1);
}

.ceia-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ceia-brand {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #FFD700 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ceiaGradientShift 4s ease-in-out infinite;
}

@keyframes ceiaGradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.ceia-dash {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.ceia-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.ceia-value-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: default;
  opacity: 0;
  transform: translateY(8px);
  animation: ceiaTagEntrance 0.5s ease-out forwards;
}

.ceia-value-tag:nth-child(1) { animation-delay: 0.3s; }
.ceia-value-tag:nth-child(3) { animation-delay: 0.45s; }
.ceia-value-tag:nth-child(5) { animation-delay: 0.6s; }
.ceia-value-tag:nth-child(7) { animation-delay: 0.75s; }

@keyframes ceiaTagEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ceia-value-tag.compassion {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.1);
  border: 1px solid rgba(244, 114, 182, 0.25);
}

.ceia-value-tag.excellence {
  color: #FFD700;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
}

.ceia-value-tag.integrity {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
}

.ceia-value-tag.accessibility {
  color: #22d3ee;
  background: rgba(34, 211, 238, 0.1);
  border: 1px solid rgba(34, 211, 238, 0.25);
}

.ceia-value-tag:hover {
  transform: translateY(-2px);
}

.ceia-value-tag.compassion:hover { box-shadow: 0 4px 15px rgba(244, 114, 182, 0.3); }
.ceia-value-tag.excellence:hover { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); }
.ceia-value-tag.integrity:hover { box-shadow: 0 4px 15px rgba(167, 139, 250, 0.3); }
.ceia-value-tag.accessibility:hover { box-shadow: 0 4px 15px rgba(34, 211, 238, 0.3); }

.ceia-dot {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.5rem;
  opacity: 0;
  animation: ceiaTagEntrance 0.5s ease-out forwards;
}

.ceia-dot:nth-of-type(2) { animation-delay: 0.37s; }
.ceia-dot:nth-of-type(4) { animation-delay: 0.52s; }
.ceia-dot:nth-of-type(6) { animation-delay: 0.67s; }

.ceia-principle {
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0;
  opacity: 0;
  animation: ceiaFadeIn 0.6s ease-out 0.9s forwards;
}

@keyframes ceiaFadeIn {
  to { opacity: 1; }
}

/* Rotator Section */
.ceia-rotator {
  position: relative;
  min-height: 100px;
  width: 100%;
  background: rgba(34, 211, 238, 0.02);
  padding: 1rem 1.5rem 1rem 1.75rem;
}

/* Animated Quote Bar */
.ceia-quote-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(to bottom, #22d3ee, #FFD700);
  animation: ceiaBarGlow 2.5s ease-in-out infinite;
}

@keyframes ceiaBarGlow {
  0%, 100% { 
    opacity: 0.5;
    box-shadow: none;
  }
  50% { 
    opacity: 1;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  }
}

/* Value Labels - Phase 1 */
.ceia-label {
  position: absolute;
  top: 1rem;
  left: 1.75rem;
  right: 1.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.ceia-label.active {
  opacity: 1;
  transform: translateY(0);
}

/* Value Descriptions - Phase 2 */
.ceia-desc {
  position: absolute;
  top: 1rem;
  left: 1.75rem;
  right: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  margin: 0;
}

.ceia-desc.active {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: show all content statically */
@media (prefers-reduced-motion: reduce) {
  .ceia-card {
    animation: none;
  }
  
  .ceia-border-glow,
  .ceia-scan-line {
    animation: none;
    opacity: 0.5;
  }
  
  .ceia-value-tag,
  .ceia-dot,
  .ceia-principle {
    opacity: 1;
    transform: none;
    animation: none;
  }
  
  .ceia-quote-bar {
    animation: none;
    opacity: 0.7;
  }
  
  .ceia-rotator {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .ceia-label,
  .ceia-desc {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  
  .ceia-label {
    margin-bottom: 0.25rem;
  }
  
  .ceia-desc {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .ceia-desc:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-visual.ceia-hero {
    margin-left: 0;
    margin-top: 2rem;
  }
  
  .ceia-hero {
    max-width: 100%;
  }
  
  .ceia-card {
    max-width: 100%;
  }
  
  .ceia-rotator {
    min-height: 120px;
  }
  
  .ceia-title {
    font-size: 1rem;
  }
  
  .ceia-value-tag {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
  }
  
  .ceia-label {
    font-size: 1rem;
  }
  
  .ceia-desc {
    font-size: 0.75rem;
  }
}