/* ==========================================================================
   GE26 (Global Entreprep 2026) Design System & Stylesheet
   Color Palette: #DA060E (VinUni Red), #38329E (GE Indigo), Deep Space Navy
   ========================================================================== */

/* --- CSS Variables --- */
:root {
  --color-ge-red: #da060e;
  --color-ge-red-glow: rgba(218, 6, 14, 0.45);
  --color-ge-indigo: #38329e;
  --color-ge-indigo-glow: rgba(56, 50, 158, 0.45);
  --color-ge-purple: #38329e;
  --color-ge-pink: #d9006c;
  --color-dark: #21195a;
  --color-dark-surface: #2b2176;
  --color-dark-card: rgba(255, 255, 255, 0.08);
  --font-primary: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

/* --- Base Reset & Typography --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-primary);
  background-color: #21195a;
  color: #ffffff;
}

body {
  font-family: var(--font-primary);
  background-color: #1b154a;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-syne, .font-heading {
  font-family: var(--font-heading);
  font-weight: 800; /* Extra Bold */
  letter-spacing: -0.02em;
}

.font-mono {
  font-family: var(--font-mono);
}

.text-ge-red {
  color: var(--color-ge-red);
}

.bg-ge-red {
  background-color: var(--color-ge-red);
}

.bg-dark {
  background-color: var(--color-dark);
}

/* --- High-Performance Rich Mesh Gradient Background (#da060e & #38329e) --- */
.mesh-background-container {
  position: fixed;
  inset: 0;
  z-index: -10;
  background: 
    radial-gradient(circle at 85% 15%, rgba(218, 6, 14, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 15% 35%, rgba(56, 50, 158, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 80% 65%, rgba(218, 6, 14, 0.35) 0%, transparent 45%),
    radial-gradient(circle at 20% 85%, rgba(56, 50, 158, 0.5) 0%, transparent 50%),
    linear-gradient(135deg, #1b154a 0%, #2f227c 30%, #681559 60%, #9e0c27 85%, #be0512 100%);
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform;
}

.mesh-orb {
  display: none;
}

.mesh-cursor-follower {
  display: none;
}

.noise-overlay {
  display: none;
}

/* --- High-Performance Ambient Glow Blobs --- */
.glow-blob-indigo {
  background: radial-gradient(circle, rgba(56, 50, 158, 0.35) 0%, rgba(56, 50, 158, 0.08) 50%, transparent 70%);
  border-radius: 9999px;
  pointer-events: none;
  transform: translateZ(0);
}

.glow-blob-red {
  background: radial-gradient(circle, rgba(218, 6, 14, 0.3) 0%, rgba(218, 6, 14, 0.06) 50%, transparent 70%);
  border-radius: 9999px;
  pointer-events: none;
  transform: translateZ(0);
}

/* --- Content Visibility for Smooth 60/120fps Scrolling --- */
section:not(#hero) {
  content-visibility: auto;
  contain-intrinsic-size: 1px 750px;
}

/* --- Geometric Chevron Accents (Gradient Red -> Indigo/Purple) --- */
.chevron-decor {
  position: absolute;
  width: 280px;
  height: 280px;
  opacity: 0.35;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
}

.chevron-decor.top-right {
  top: 5%;
  right: 2%;
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='120' viewBox='0 0 240 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='cg1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2338329e'/%3E%3Cstop offset='50%25' stop-color='%23801488'/%3E%3Cstop offset='100%25' stop-color='%23da060e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L40 60L0 120H30L70 60L30 0H0ZM60 0L100 60L60 120H90L130 60L90 0H60ZM120 0L160 60L120 120H150L190 60L150 0H120ZM180 0L220 60L180 120H210L250 60L210 0H180Z' fill='url(%23cg1)' fill-opacity='0.9'/%3E%3C/svg%3E");
}

.chevron-decor.bottom-left {
  bottom: 5%;
  left: 2%;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='120' viewBox='0 0 240 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='cg2' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23da060e'/%3E%3Cstop offset='50%25' stop-color='%23801488'/%3E%3Cstop offset='100%25' stop-color='%2338329e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L40 60L0 120H30L70 60L30 0H0ZM60 0L100 60L60 120H90L130 60L90 0H60ZM120 0L160 60L120 120H150L190 60L150 0H120ZM180 0L220 60L180 120H210L250 60L210 0H180Z' fill='url(%23cg2)' fill-opacity='0.9'/%3E%3C/svg%3E");
}

.chevron-strip {
  position: absolute;
  width: 220px;
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}

.top-right-chevrons {
  top: 20px;
  right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='80' viewBox='0 0 200 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradR' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2338329e'/%3E%3Cstop offset='50%25' stop-color='%23801488'/%3E%3Cstop offset='100%25' stop-color='%23da060e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L30 40L0 80H25L55 40L25 0H0ZM45 0L75 40L45 80H70L100 40L70 0H45ZM90 0L120 40L90 80H115L145 40L115 0H90ZM135 0L165 40L135 80H160L190 40L160 0H135Z' fill='url(%23gradR)'/%3E%3C/svg%3E");
}

.bottom-left-chevrons {
  bottom: 20px;
  left: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='80' viewBox='0 0 200 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradL' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23da060e'/%3E%3Cstop offset='50%25' stop-color='%23801488'/%3E%3Cstop offset='100%25' stop-color='%2338329e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L30 40L0 80H25L55 40L25 0H0ZM45 0L75 40L45 80H70L100 40L70 0H45ZM90 0L120 40L90 80H115L145 40L115 0H90ZM135 0L165 40L135 80H160L190 40L160 0H135Z' fill='url(%23gradL)'/%3E%3C/svg%3E");
}

.bottom-right-chevrons {
  bottom: 20px;
  right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='80' viewBox='0 0 200 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradBR' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2338329e'/%3E%3Cstop offset='50%25' stop-color='%23801488'/%3E%3Cstop offset='100%25' stop-color='%23da060e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0L30 40L0 80H25L55 40L25 0H0ZM45 0L75 40L45 80H70L100 40L70 0H45ZM90 0L120 40L90 80H115L145 40L115 0H90ZM135 0L165 40L135 80H160L190 40L160 0H135Z' fill='url(%23gradBR)'/%3E%3C/svg%3E");
}

/* --- Navigation Links --- */
.nav-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
  text-decoration: none;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.nav-link:hover {
  color: #ffffff;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-ge-red);
  transition: width 0.3s ease;
  border-radius: 2px;
}

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

.mobile-nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  display: block;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, #da060e 0%, #b8050c 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  box-shadow: 0 4px 20px var(--color-ge-red-glow);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(218, 6, 14, 0.65);
  background: linear-gradient(135deg, #ff1a23 0%, #da060e 100%);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.925rem;
  padding: 0.75rem 1.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

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

/* --- Section 1: Hero Interactive Logo --- */
.hero-logo-wrapper {
  perspective: 1000px;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-logo-wrapper:hover {
  /* Jump/Pop interaction when mouse hovers as requested */
  transform: translateY(-16px) scale(1.05) rotateX(4deg);
}

.hero-logo-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(218, 6, 14, 0.35) 0%, rgba(56, 50, 158, 0.25) 50%, transparent 75%);
  filter: blur(40px);
  opacity: 0.7;
  transition: opacity 0.4s ease;
  border-radius: 30px;
  pointer-events: none;
}

.hero-logo-wrapper:hover .hero-logo-glow {
  opacity: 1;
  filter: blur(50px);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.stat-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 1.25rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-ge-red);
  transform: translateY(-4px);
}

.stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(to right, #ffffff, #ffa0a4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.25rem;
  font-weight: 500;
}

/* --- Section 2: Browser Window Cards (Matching Image 1) --- */
.browser-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform-style: preserve-3d;
  will-change: transform;
}

@media (min-width: 640px) {
  .browser-card {
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.15);
  }
}

.browser-card-purple {
  border: 1.5px solid #5a4cb5;
}

.browser-card-blue {
  border: 1.5px solid #2d6cd8;
}

.browser-card-red {
  border: 1.5px solid #ff2a33;
}

@media (min-width: 640px) {
  .browser-card-purple { border-width: 2px; }
  .browser-card-blue { border-width: 2px; }
  .browser-card-red { border-width: 2px; }
}

/* --- Section 3: FAST-TRACK Outline Cards (Matching Image 2 & 3) --- */
.fast-track-card {
  position: relative;
  border: 2px solid #ffffff;
  border-radius: 14px;
  padding: 3.25rem 2rem 2.25rem 2rem;
  background: rgba(40, 25, 100, 0.25);
  backdrop-filter: blur(14px);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 2.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.card-icon-wrapper {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  padding: 0 10px;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.icon-circle {
  width: 62px;
  height: 62px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #2e217d 0%, #4a1c6d 60%, #7d133a 100%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card-text {
  font-size: 1.15rem;
  line-height: 1.55;
  color: #ffffff;
  font-weight: 400;
  transition: color 0.4s ease;
  margin-top: 0.25rem;
}

/* Hover state matching Image 3: Solid White card, Red gradient circle outline & Red icon */
.fast-track-card:hover {
  background: #ffffff !important;
  border-color: #ffffff;
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}

.fast-track-card:hover .card-icon-wrapper {
  background: transparent;
}

.fast-track-card:hover .icon-circle {
  background: #ffffff;
  border: 2.5px solid #da060e;
  color: #da060e;
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(218, 6, 14, 0.35);
}

.fast-track-card:hover .card-text {
  color: #07060e; /* Solid dark text on white background */
}

/* --- Section 4: Board of Mentors (Matching Image 3) --- */
.filter-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: linear-gradient(135deg, var(--color-ge-red), #99004d);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(218, 6, 14, 0.4);
}

.mentor-item {
  position: relative;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;
  cursor: zoom-in;
}

.mentor-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.mentor-item:hover {
  transform: translateY(-8px) scale(1.03);
  filter: drop-shadow(0 15px 30px rgba(56, 50, 158, 0.5));
}

/* --- Lightbox Image Zoom Modal (Pure Clean Image, No Bounding Box/Frame) --- */
.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5, 4, 15, 0.9);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  cursor: zoom-out;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
}

.image-zoom-modal.active {
  opacity: 1;
  visibility: visible;
}

.image-zoom-content {
  position: relative;
  max-width: 95vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default;
  transform: scale(0.88);
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.image-zoom-modal.active .image-zoom-content {
  transform: scale(1);
}

.image-zoom-img {
  max-width: 95vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.image-zoom-close {
  position: fixed;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10000;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.image-zoom-close:hover {
  background: #da060e;
  border-color: #da060e;
  transform: scale(1.12) rotate(90deg);
}

/* --- Section 5: Why Join Cards (Matching Image 4) --- */
.why-join-giant-chevrons-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.why-join-giant-chevrons-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

.why-item {
  position: relative;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;
}

.why-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.why-item:hover {
  transform: translateY(-8px) scale(1.02);
  filter: drop-shadow(0 20px 35px rgba(218, 6, 14, 0.4));
}

/* --- Section 6: Timeline (Matching Image 5) --- */
.timeline-container {
  border-color: rgba(255, 255, 255, 0.35);
}

.timeline-item {
  position: relative;
}

.timeline-month {
  background: linear-gradient(135deg, #ff905d 0%, #ffce81 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.timeline-dot {
  position: absolute;
  left: -41px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff905d 0%, #ffce81 100%);
  border: 3px solid #ffffff;
  box-shadow: 0 0 15px rgba(255, 144, 93, 0.65);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (max-width: 640px) {
  .timeline-dot {
    left: -25px;
    width: 14px;
    height: 14px;
    top: 6px;
  }
}

.timeline-item:hover .timeline-dot {
  transform: scale(1.4);
  background: #ffce81;
  box-shadow: 0 0 25px rgba(255, 206, 129, 0.9);
}

.dot-highlight {
  background: #ff905d;
}

.dot-final {
  background: #00e676;
  border-color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 230, 118, 0.7);
}

/* Metallic Shimmer Gradient for HYBRID text */
.hybrid-metallic-shimmer {
  background: linear-gradient(
    110deg,
    #ff905d 0%,
    #ffce81 25%,
    #ffffff 50%,
    #ffce81 75%,
    #ff905d 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-weight: 900;
  animation: metallicShimmer 3s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255, 144, 93, 0.6));
}

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

/* --- Section 7: Partnerships (Interactive White Cards & Logo Hover) --- */
.partner-logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 1.25rem 2rem;
  background: #ffffff;
  border-radius: 1rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  width: 100%;
  max-width: 360px;
  min-height: 120px;
}

.partner-logo-item:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(218, 6, 14, 0.4), 0 0 20px rgba(56, 50, 158, 0.3);
  border-color: rgba(255, 144, 93, 0.8);
}

.partner-logo-item img {
  max-height: 75px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}

.partner-logo-item:hover img {
  transform: scale(1.06);
}

/* --- Section 8: FAQ Accordion (Purple Shape Cards - Matching Image 2) --- */
.faq-chevron-badge-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px 4px 4px;
}

.faq-chevrons-container {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 150px;
  height: 48px;
  z-index: 1;
  pointer-events: none;
}

.faq-chevrons-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(218, 6, 14, 0.4));
}

.faq-pill-btn {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #4f3bbf 0%, #3a289f 100%);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding: 0.6rem 1.4rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.faq-purple-card {
  background: linear-gradient(135deg, #2d2685 0%, #352590 50%, #452488 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(106, 17, 203, 0.2);
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq-purple-card .faq-question {
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
}

.faq-purple-card:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 20px 45px rgba(45, 38, 133, 0.5);
  transform: translateY(-2px);
}

.faq-purple-card.active {
  background: linear-gradient(135deg, #322b91 0%, #3b289f 50%, #4e299a 100%);
  border-color: rgba(255, 144, 93, 0.5);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 20px rgba(56, 50, 158, 0.4);
}

.faq-purple-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  pointer-events: none;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.faq-purple-card:hover .faq-purple-icon-box {
  background: rgba(255, 255, 255, 0.2);
}

.faq-purple-card.active .faq-purple-icon-box {
  background: linear-gradient(135deg, #da060e, #ff905d);
  box-shadow: 0 4px 15px rgba(218, 6, 14, 0.4);
}

.faq-chevron {
  pointer-events: none;
  transition: transform 0.35s ease;
}

.faq-purple-card.active .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.faq-purple-card.active .faq-answer {
  max-height: 600px;
  opacity: 1;
}

.glass-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- Social Icon Buttons --- */
.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.social-icon-btn:hover {
  background: var(--color-ge-red);
  border-color: var(--color-ge-red);
  transform: translateY(-3px);
  color: #ffffff;
}

/* --- Media Queries / Responsiveness --- */
@media (max-width: 768px) {
  .hero-logo-wrapper {
    margin: 1rem 0;
  }
}