/* ==========================================================================
   GEN-Z TRIVE - DESIGN SYSTEM & CORE STYLES (NEO-BRUTALISM + CYBER GLASS)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Color Palette - Vibrant Gen-Z Cyber Dark */
  --bg-dark: #07090E;
  --bg-card: rgba(18, 22, 34, 0.75);
  --bg-card-hover: rgba(28, 34, 52, 0.85);
  
  --primary-neon: #0809e0;      /* Vibrant Royal Electric Blue */
  --primary-glow: rgba(8, 9, 224, 0.45);
  
  --accent-cyan: #06B6D4;       /* Cyber Cyan */
  --accent-cyan-glow: rgba(6, 182, 212, 0.35);
  
  --accent-lime: #84CC16;       /* Acid Lime */
  --accent-pink: #EC4899;       /* Cyber Pink */
  
  --text-main: #F8FAFC;
  --text-muted: #94A3B8;
  --text-sub: #cbd5e1;

  --border-light: rgba(255, 255, 255, 0.12);
  --border-neon: rgba(8, 9, 224, 0.5);

  /* Typography */
  --font-display: 'Syne', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Spacing & Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
html.lenis,
html.lenis-stopped,
html.lenis-scrolling {
  scroll-behavior: smooth;
  font-size: 16px;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

body {
  background: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
}

/* Background Ambient Glows */
.ambient-glow-1 {
  position: fixed;
  top: -10%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--primary-glow) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0.6;
}

.ambient-glow-2 {
  position: fixed;
  top: 40%;
  right: 0;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-cyan-glow) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(90px);
  opacity: 0.5;
  overflow: hidden;
}

/* ==========================================================================
   PRELOADER STYLING (#NoRegretZ, #NoExcuseZ, #NoDramaZ)
   ========================================================================== */
.preloader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0809e0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}

.preloader-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.3;
}

.preloader-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preloader-logo-wrapper {
  margin-bottom: 2.4rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

/* SVG ring wraps around the logo */
.preloader-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  pointer-events: none;
}

.preloader-ring-track {
  stroke: rgba(255, 255, 255, 0.2);
  fill: none;
}

.preloader-ring-fill {
  stroke: #FFFFFF;
  fill: none;
  stroke-linecap: round;
  /* circumference = 2π × 88 ≈ 552.92 */
  stroke-dasharray: 552.92;
  stroke-dashoffset: 552.92;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
}

.preloader-logo-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 178px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.4));
  transform-origin: center center;
}

@keyframes logoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.97); opacity: 0.9; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

.preloader-text-stage {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  padding: 0 1rem;
}

.preloader-hashtag {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 800;
  color: #FFFFFF;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.8rem;
  white-space: nowrap;
}

.preloader-subtext {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.45;
  opacity: 0.9;
}

/* Old bottom progress bar removed — now using SVG ring */

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.5rem 5%;
  transition: background 0.3s ease, padding 0.3s ease, border-bottom 0.3s ease;
}

.nav-container {
  width: max-content;
  max-width: 95vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 0;
  box-shadow: none;
  gap: 0;
  will-change: max-width, padding, gap, background;
  transition: background 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              padding 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              gap 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.6rem;
  list-style: none;
  margin: 0 auto;
  transition: gap 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link {
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  transition: color 0.25s ease;
  position: relative;
  white-space: nowrap;
  opacity: 1 !important;
}

.nav-link:hover,
.nav-link.active {
  color: #93C5FD !important;
}

.nav-logo-scrolled {
  position: relative;
  left: auto;
  top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: scale(0.7) rotate(-5deg);
  transition: max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s ease, 
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-logo-img {
  height: 34px;
  width: 34px;
  object-fit: cover;
  border-radius: 50%;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
  flex-shrink: 0;
}

.nav-actions {
  position: relative;
  right: auto;
  top: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: max-width 0.55s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.4s ease, 
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar.scrolled .nav-container {
  background: #0809e0;
  border-color: rgba(255, 255, 255, 0.25);
  padding: 0.45rem 2.8rem 0.45rem 2.2rem;
  gap: 2.4rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.navbar.scrolled .nav-logo-scrolled {
  opacity: 1;
  pointer-events: auto;
  max-width: 50px;
  transform: scale(1) rotate(0deg);
  transition: max-width 0.85s cubic-bezier(0.25, 1, 0.3, 1), 
              opacity 0.75s cubic-bezier(0.25, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.25, 1, 0.3, 1);
}

.navbar.scrolled .nav-actions {
  opacity: 1;
  pointer-events: auto;
  max-width: 220px;
  transform: scale(1);
  overflow: visible;
  transition: max-width 0.85s cubic-bezier(0.25, 1, 0.3, 1), 
              opacity 0.75s cubic-bezier(0.25, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.25, 1, 0.3, 1);
}

.nav-btn-scrolled {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #0809e0 !important;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.45rem 1.45rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  outline: none;
  cursor: pointer !important;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  overflow: hidden;
}

.nav-btn-scrolled:hover {
  background: #0B0CF0;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.65);
  cursor: pointer !important;
  transform: scale(1.05) translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.nav-btn-scrolled:active {
  transform: scale(0.98);
}

.navbar.scrolled .nav-links {
  gap: 2rem;
  margin: 0;
}

.navbar.scrolled .nav-btn-scrolled {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
  transition: opacity 0.75s cubic-bezier(0.25, 1, 0.3, 1), 
              transform 0.85s cubic-bezier(0.25, 1, 0.3, 1), 
              background 0.3s ease, 
              color 0.3s ease;
}

.navbar.scrolled .nav-link,
.navbar.scrolled ul.nav-links li a.nav-link,
.navbar.scrolled a.nav-link {
  color: #FFFFFF !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  font-size: 0.92rem;
  white-space: nowrap;
  opacity: 1 !important;
}

.navbar.scrolled .nav-link:hover, 
.navbar.scrolled .nav-link.active,
.navbar.scrolled ul.nav-links li a.nav-link:hover, 
.navbar.scrolled ul.nav-links li a.nav-link.active {
  color: #93C5FD !important;
}

/* Main Content Overlay Container */
.main-content-overlay {
  position: relative;
  z-index: 10;
  margin-top: 100vh;
  padding-top: 0 !important;
  background-color: #FFFFFF !important;
  color: #0F172A;
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.15);
}

.main-content-overlay .section {
  background-color: #FFFFFF;
}

.logo-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.logo-badge {
  background: var(--accent-lime);
  color: #000;
  font-family: var(--font-display);
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 1rem;
  transform: rotate(-3deg);
  display: inline-block;
  box-shadow: 3px 3px 0px #000;
}

.logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(124, 58, 237, 0.4));
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.logo-text span {
  color: var(--primary-neon);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none;
}

.nav-link {
  color: #E2E8F0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  position: relative;
}

.nav-link:hover, .nav-link.active {
  color: #FFFFFF;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #FFFFFF;
  transition: width var(--transition-fast);
}

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

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

/* Buttons */
.btn-genz {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.btn-primary {
  background: var(--primary-neon);
  color: #FFF;
  box-shadow: 0 0 25px var(--primary-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: #0607c0;
  box-shadow: 0 0 35px var(--primary-glow);
}

.btn-lime {
  background: var(--accent-lime);
  color: #000;
  border: 1px solid #000;
  box-shadow: 4px 4px 0px #000;
}

.btn-lime:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Hero Slideshow Section */
.hero-slideshow-section {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 5% 4rem;
  z-index: 1;
  transform-origin: center center;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Main Content Overlay Container */
.main-content-overlay {
  position: relative;
  z-index: 10;
  margin-top: 105vh;
  padding-top: 2rem;
  background: var(--bg-dark);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.9);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.hero-slideshow-track {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(1);
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

/* Ken Burns zoom only on slide transitions (not initial load) */
.hero-slideshow-section.init-done .hero-slide {
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 6s ease-out;
}

.hero-slideshow-section.init-done .hero-slide:not(.active) {
  transform: scale(1.05);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.45) 0%, rgba(7, 9, 14, 0.2) 50%, rgba(7, 9, 14, 0.95) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Big Spinning Logo on Bottom Right */
.hero-big-spinner-wrapper {
  position: absolute;
  bottom: 40px;
  right: 6%;
  z-index: 3;
  pointer-events: none;
}

.hero-big-spinning-logo {
  width: 250px;
  height: auto;
  object-fit: contain;
  /* animation removed: logo is now static */
}

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

@media (max-width: 992px) {
  .hero-big-spinner-wrapper {
    display: none !important;
  }
}

/* Bottom Bar Caption & Controls */
.hero-bottom-bar {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.hero-slide-caption {
  max-width: 850px;
}

.slide-title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: none;
  margin-bottom: 1.5rem;
}

.slide-title span {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 800;
  color: #3B82F6;
  -webkit-text-fill-color: #3B82F6;
  text-shadow: none;
  white-space: nowrap;
}

.hero-slide-controls {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.slide-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
}

.slide-btn:hover {
  background: var(--primary-neon);
  border-color: var(--primary-neon);
  box-shadow: 0 0 20px var(--primary-glow);
  transform: scale(1.08);
}

/* Remove sticky hover on touchscreens */
@media (hover: none) {
  .slide-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: none;
    transform: none;
  }

  .slide-btn:active {
    background: var(--primary-neon);
    border-color: var(--primary-neon);
    transform: scale(0.95);
  }
}

/* ==========================================================================
   HERO INTERACTIVE DRAG & LIGHTBOX MODAL STYLES
   ========================================================================== */

.hero-slideshow-section {
  cursor: grab;
  user-select: none;
}

.hero-slideshow-section:active {
  cursor: grabbing;
}

/* Slide Dots */
.hero-slide-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.6rem;
}

.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.hero-dot.active {
  width: 28px;
  border-radius: 14px;
  background: #3B82F6;
  box-shadow: none;
}

/* Marquee Section */
.marquee-container {
  width: 100%;
  overflow: hidden;
  background: var(--primary-neon);
  color: #FFF;
  padding: 1.1rem 0;
  margin: 0 0 3.5rem;
  position: relative;
  top: 0;
  z-index: 5;
  box-shadow: 0 10px 30px rgba(8, 9, 224, 0.3);
}

.marquee-content {
  display: flex;
  white-space: nowrap;
  gap: 2rem;
  animation: marqueeScroll 20s linear infinite;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-transform: uppercase;
}

.marquee-item i {
  font-size: 1rem;
}

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

/* Section Shared */
.section {
  padding: 100px 5%;
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.section-tag {
  font-family: var(--font-heading);
  color: #0809e0;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
  display: block;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.section-title span {
  color: #0809e0;
}

.section-subtitle {
  color: #475569;
  font-size: 1.08rem;
  font-family: var(--font-body);
  font-weight: 500;
}

/* Core Values & Manifesto Section (Editorial Layout) */
/* Redesigned Modern Split Layout Manifesto Section */

.manifesto-section {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 100px 5% 120px;
  background: #FFFFFF;
}

@media (max-width: 992px) {
  .manifesto-section {
    padding: 70px 4% 90px;
  }
}

@media (max-width: 768px) {
  .manifesto-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    box-sizing: border-box !important;
  }
}

.manifesto-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: start;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .manifesto-grid-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.manifesto-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.editorial-vibe-tag {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.2rem;
}

.editorial-line {
  width: 28px;
  height: 2px;
  background: #0809e0;
  display: inline-block;
}

.editorial-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: #0809e0;
  text-transform: uppercase;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #0809e0;
  border-radius: 50%;
  box-shadow: 0 0 10px #0809e0;
  animation: pulseGlow 1.8s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.manifesto-title,
.manifesto-subtitle {
  font-family: var(--font-body);
  color: #0F172A;
}

.manifesto-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #0F172A;
}

.manifesto-title .highlight-blue {
  color: #0809e0;
  font-weight: 800;
  font-size: clamp(3rem, 5.5vw, 5rem);
  display: inline-block;
}

.manifesto-title .est-tag {
  color: #0809e0;
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
}

.manifesto-subtitle {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
  color: #334155;
  margin-top: 0.5rem;
}

.manifesto-disclaimer-box {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  color: #0809e0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  margin-top: 1rem;
  width: fit-content;
}

/* Right Column Subtitle Quote & Disclaimer Pill */
.manifesto-side-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 2.2rem;
  justify-content: flex-start;
}

@media (max-width: 1024px) {
  .manifesto-side-col {
    padding-top: 0;
  }
}

.motto-clean-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}


.motto-item-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.45rem;
  color: #0809e0;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}

.motto-item-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #475569;
  line-height: 1.55;
  font-weight: 500;
}

.manifesto-disclaimer-plain {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: #0809e0;
  font-weight: 700;
  margin-top: -0.6rem;
}

.motto-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: #0809e0;
}

.manifesto-motto-stack {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.motto-card-v2 {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 18px;
  padding: 0.95rem 1.1rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
}

.motto-card-v2:hover {
  border-color: #0809e0;
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(8, 9, 224, 0.14);
}

.motto-img-wrapper {
  width: 95px;
  height: 95px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F1F5F9;
  position: relative;
  border: 1px solid #E2E8F0;
}

.motto-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.motto-card-v2:hover .motto-img {
  transform: scale(1.08);
}

.motto-header-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.motto-num-badge {
  background: #0809e0;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  line-height: 1;
}

/* ==========================================================================
   RUNNING GALLERY TRACK (FULL WIDTH EDGE-TO-EDGE)
   ========================================================================== */
.values-running-gallery {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  padding: 1.5rem 0 3.5rem;
  margin: 0 0 2rem 0;
  display: flex;
  background: transparent;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.values-running-gallery:active {
  cursor: grabbing;
}

.gallery-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: galleryScrollLeft 45s linear infinite;
  will-change: transform;
}

.gallery-marquee-track:hover {
  animation-play-state: paused;
}

.gallery-marquee-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-right: 1.5rem;
  flex-shrink: 0;
}

.gallery-img-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: none !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.gallery-img-card:hover {
  transform: translateY(-4px);
  box-shadow: none !important;
}

.gallery-img-card img {
  height: 380px;
  width: auto;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  pointer-events: none;
}

@keyframes galleryScrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.333333%); }
}

@media (max-width: 992px) {
  .values-running-gallery {
    margin-top: 3rem;
  }
  .gallery-img-card img {
    height: 280px;
  }
}

.motto-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.motto-hashtag {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0809e0;
  letter-spacing: -0.02em;
}

.motto-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.45;
}

/* ==========================================================================
   SuperMentors & Community Showcase Section (Custom Modern Grid Layout)
   ========================================================================== */
.mentors-section {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 100px 5% 120px;
  background: #FFFFFF;
}

@media (max-width: 992px) {
  .mentors-section {
    padding: 70px 4% 90px;
  }
}

@media (max-width: 768px) {
  .mentors-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    box-sizing: border-box !important;
  }
}

.mentors-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 0 auto 3.5rem;
  max-width: 1240px;
  width: 100%;
}

.editorial-vibe-tag.center-tag {
  justify-content: center;
}

.mentors-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
}

.mentors-title .highlight-blue,
.mentors-title span:not(.title-line-1):not(.title-line-2),
.partners-filter-section .section-title span,
.partners-filter-section .section-title .highlight-blue {
  color: #0809e0 !important;
}

@media (max-width: 768px) {
  .mentors-title .title-line-2 {
    display: block;
  }
}

.mentors-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: #64748B;
  font-weight: 500;
}

.mentors-grid-container {
  position: relative;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 28px;
  padding: 3rem 2rem 3.5rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: center;
  overflow: hidden;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.mentors-bg-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 350px;
  background: radial-gradient(circle, rgba(8, 9, 224, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}

/* SuperMentors & Mentors Center Showcase (4-Card Horizontal Row) */
.supermentors-spotlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  width: 100%;
  z-index: 2;
}

.tier-header-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tier-icon {
  width: 16px;
  height: 16px;
  margin-right: 0.35rem;
  vertical-align: -2px;
  color: #0809e0;
}

.spotlight-title-text {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #0809e0;
  text-transform: uppercase;
  text-align: center;
}

.quad-mentors-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 900px) {
  .quad-mentors-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

@media (max-width: 550px) {
  .quad-mentors-grid {
    grid-template-columns: 1fr;
    max-width: 300px;
  }
}

.supermentor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.1rem;
  text-decoration: none;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.mentor-flip-card:hover .supermentor-card {
  border-color: #0809e0;
  box-shadow: 0 18px 40px rgba(8, 9, 224, 0.18);
}

.mentor-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0.8rem;
  background: #F1F5F9;
}

.mentor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mentor-flip-card:hover .mentor-img {
  transform: scale(1.06);
}

.social-hover-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background: rgba(8, 9, 224, 0.9);
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  padding: 0.45rem 1rem;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  box-shadow: 0 8px 20px rgba(8, 9, 224, 0.35);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  white-space: nowrap;
}

.mentor-flip-card:hover .social-hover-overlay {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.mentor-info {
  text-align: center;
  padding: 0.2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.mentor-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: #0F172A;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.mentor-role-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0809e0;
}

/* ==========================================================================
   3D FLIP TEASER CARDS (HOMEPAGE SNAPSHOT)
   ========================================================================== */
.mentor-flip-card {
  perspective: 1000px;
  -webkit-perspective: 1000px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  outline: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mentor-flip-card:hover {
  transform: translateY(-8px);
}

.mentor-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.2, 0.85, 0.35, 1.2);
}

.mentor-flip-card.is-flipped .mentor-flip-inner,
.mentor-flip-card:hover .mentor-flip-inner {
  transform: rotateY(180deg);
}

.mentor-flip-face {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  transform: translate3d(0, 0, 0);
}

.mentor-flip-front {
  position: relative;
  z-index: 2;
  transform: rotateY(0deg) translate3d(0, 0, 0);
  margin: 0;
}

.flip-hint-badge {
  display: none;
}

@media (max-width: 768px) {
  .flip-hint-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.85;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
}

/* Back Face Styling (Clean Modern White & Electric Blue Theme) */
.mentor-flip-back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg) translate3d(0, 0, 0);
  background: #FFFFFF;
  border: 1.5px solid #0809e0;
  border-radius: 20px;
  padding: 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 36px rgba(8, 9, 224, 0.16);
  color: #0F172A;
  text-align: left;
  z-index: 1;
}

.flip-back-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.flip-badge {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  margin-bottom: 0.25rem;
}

.flip-badge.super,
.flip-badge.standard {
  background: rgba(8, 9, 224, 0.08);
  color: #0809e0;
  border: 1px solid rgba(8, 9, 224, 0.25);
}

.flip-back-name {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
}

.flip-back-role {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0809e0;
}

.flip-back-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  margin: 0.45rem 0 0.5rem;
  gap: 0.5rem;
  overflow: hidden;
}

.flip-back-bio {
  font-size: 0.77rem;
  line-height: 1.5;
  color: #475569;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quote Box with Solid Blue Vertical Accent Bar */
.flip-back-quote {
  position: relative;
  background: #F8FAFC;
  border-left: 3.5px solid #0809e0;
  border-radius: 0 10px 10px 0;
  padding: 0.6rem 0.8rem;
  margin: 0.2rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.flip-quote-icon {
  font-size: 0.85rem;
  color: #0809e0;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.flip-quote-text {
  font-size: 0.74rem;
  font-style: italic;
  line-height: 1.5;
  color: #1E293B;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

.flip-back-footer {
  width: 100%;
  margin-top: auto;
}

.flip-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: #0809e0;
  color: #FFFFFF;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(8, 9, 224, 0.25);
}

.flip-cta-btn:hover {
  background: #2528f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(8, 9, 224, 0.45);
  color: #FFFFFF;
}

/* Gen-Z Community Members Avatar Marquee & Drag Slider */
.community-faces-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  padding-top: 1rem;
  border-top: 1px dashed #E2E8F0;
}

.community-header-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding: 0 0.5rem;
  margin-top: -1rem;
}

.community-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: #0809e0;
  text-align: center;
}

.community-slider-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  position: relative;
}

.community-side-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1E293B;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.community-side-btn:hover {
  background: #0809e0;
  border-color: #0809e0;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(8, 9, 224, 0.4);
}

.community-side-btn:active {
  transform: scale(0.95);
}

/* ==========================================================================
   HOMEPAGE MODERN EMPTY STATES
   ========================================================================== */
.section-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 2rem;
  background: #FFFFFF;
  border: 1.5px dashed #CBD5E1;
  border-radius: 24px;
  width: 100%;
  max-width: 650px;
  margin: 1.5rem auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.empty-state-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #F1F5F9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.empty-state-icon-wrap i {
  font-size: 2rem;
  color: #64748B;
}

.empty-state-icon-wrap.blue {
  background: rgba(8, 9, 224, 0.08);
}

.empty-state-icon-wrap.blue i {
  color: #0809e0;
}

.empty-state-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.4rem;
}

.empty-state-desc {
  font-size: 0.85rem;
  color: #64748B;
  max-width: 420px;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  background: #0809e0;
  color: #FFFFFF;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.25);
}

.empty-state-btn:hover {
  background: #2528f5;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(8, 9, 224, 0.4);
  color: #FFFFFF;
}

/* Full Width Empty State Card in Dedicated Pages Grid */
.col-span-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.news-page-grid > .col-span-full,
.events-page-grid > .col-span-full,
.gallery-masonry-grid > .col-span-full,
.speakers-roster-grid > .col-span-full,
.members-page-grid > .col-span-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.section-empty-state.full-width {
  width: 100% !important;
  max-width: 100% !important;
  padding: 4.5rem 2rem;
  margin: 1rem 0 3rem;
  box-sizing: border-box;
}

.section-empty-state.full-width .empty-state-title {
  font-size: 1.3rem;
  text-align: center;
}

.section-empty-state.full-width .empty-state-desc {
  font-size: 0.95rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  text-align: center;
}

.community-marquee-container {
  flex: 1;
  overflow: hidden;
  padding: 1rem 0.2rem 1.8rem;
  width: calc(100% - 90px);
}

.community-marquee-track {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: max-content;
  padding: 0 0.5rem;
}

.community-avatar {
  width: 90px;
  height: 90px;
  min-width: 90px;
  min-height: 90px;
  flex-shrink: 0;
  border-radius: 50%;
  position: relative;
  border: 3.5px solid #FFFFFF;
  background: #F8FAFC;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.community-avatar:hover {
  transform: scale(1.18);
  border-color: #0809e0;
  box-shadow: none;
  z-index: 10;
}

/* Name tooltip handled by JS (body-level) — see app.js */
#communityAvatarTooltip {
  position: fixed;
  background: #0809e0;
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.65rem;
  border-radius: 99px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#communityAvatarTooltip.visible {
  opacity: 1;
  transform: translateY(0);
}

.community-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .community-faces-wrapper {
    gap: 0.6rem;
    padding-top: 0.8rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }

  .community-header-bar {
    padding: 0 0.2rem;
  }

  .community-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }

  .community-slider-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
  }

  .community-side-btn {
    display: none !important;
  }

  .community-marquee-container {
    flex: 1 !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    padding: 0.6rem 0 !important;
  }

  .community-marquee-container::-webkit-scrollbar {
    display: none !important;
  }

  .community-marquee-track {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: max-content !important;
    transform: none !important;
    padding: 0 0.5rem !important;
  }

  .community-avatar {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    border-width: 3px !important;
  }

  .community-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
  }
}

.value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #0809e0, var(--accent-cyan));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.value-card:hover {
  transform: translateY(-8px);
  border-color: #0809e0;
  box-shadow: 0 20px 40px rgba(8, 9, 224, 0.12);
}

.value-card:hover::before {
  opacity: 1;
}

.value-hashtag {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  color: #0809e0;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.value-desc {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: #334155;
  line-height: 1.5;
  font-weight: 500;
}

.value-icon-bg {
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-size: 8rem;
  opacity: 0.04;
  color: #000;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 800;
}

/* ==========================================================================
   INTERACTIVE FOLDER-TAB PILLARS SHOWCASE
   ========================================================================== */
/* Pillars Section Clean Design — Removed Background Image */
.pillars-section {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 100px 5% 120px;
  background: #FFFFFF;
  min-height: auto;
}

@media (max-width: 992px) {
  .pillars-section {
    padding: 70px 4% 90px;
  }
}

.pillars-section .section-title {
  color: #0F172A !important;
  text-shadow: none !important;
}

.pillars-section .section-title span {
  color: #0809e0 !important;
  text-shadow: none !important;
}

.pillars-section .section-subtitle {
  color: #475569 !important;
  font-weight: 500;
  text-shadow: none !important;
}

.pillars-section .editorial-text {
  color: #0809e0 !important;
  font-weight: 800;
}

.pillars-section .editorial-line {
  background: #0809e0 !important;
}

.folder-showcase-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

/* File Folder Tab Bar (Centered with Original Colors & File Tab Shape) */
.pillars-segmented-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex-wrap: wrap;
  z-index: 10;
  margin-bottom: -1px;
  position: relative;
}

.folder-tab {
  background: #0809e0 !important;
  color: #FFFFFF !important;
  padding: 0.85rem 2rem !important;
  border-radius: 16px 16px 0 0 !important;
  border: 1.5px solid #0809e0 !important;
  border-bottom: none !important;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  width: auto !important;
  height: auto !important;
  position: relative;
  top: 0;
}

.folder-tab i {
  width: 18px;
  height: 18px;
  color: #FFFFFF !important;
  transition: color 0.25s ease;
}

.folder-tab:hover {
  background: #0506a8 !important;
  color: #FFFFFF !important;
  border-color: #0506a8 !important;
  transform: none !important;
}

.folder-tab:hover i {
  color: #FFFFFF !important;
}

.folder-tab.active {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #E2E8F0 !important;
  border-bottom: 2px solid #FFFFFF !important;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05) !important;
  z-index: 12;
}

.folder-tab.active i {
  color: #0809e0 !important;
}

/* Folder Card Body — Solid Clean White Card Container */
.folder-card-body {
  width: 100%;
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-radius: 24px !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden;
  position: relative;
  z-index: 4;
  height: 480px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}

.folder-card-body.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 992px) {
  .folder-card-body {
    height: auto;
  }
}

@media (max-width: 768px) {
  .pillars-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    box-sizing: border-box !important;
  }

  .folder-showcase-container {
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
  }

  .pillars-segmented-tabs {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0 !important;
    gap: 0.35rem !important;
    padding: 0.3rem 0 0 0 !important;
    margin-bottom: 0 !important;
    margin-right: -1.5px !important;
    z-index: 10 !important;
  }

  .folder-tab {
    /* Flips to rounded outer left edge & flat inner right edge when rotated 180deg */
    border-radius: 0 12px 12px 0 !important;
    border: 1.5px solid #0809e0 !important;
    border-left: none !important;
    padding: 0.85rem 0.2rem !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    white-space: nowrap !important;
    width: 100% !important;
  }

  /* Completely hide icons on mobile tabs */
  .folder-tab i,
  .pillars-segmented-tabs .folder-tab i,
  .folder-showcase-container .folder-tab i,
  .pillars-section .folder-tab i,
  .folder-tab svg {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .folder-tab:hover,
  .folder-tab.active {
    transform: rotate(180deg) !important;
  }

  .folder-tab {
    box-shadow: none !important;
  }

  .folder-tab.active {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1.5px solid #E2E8F0 !important;
    border-left: 2px solid #FFFFFF !important;
    box-shadow: none !important;
    z-index: 12 !important;
  }

  .folder-tab[data-tooltip]::after {
    display: none;
  }

  .folder-card-body {
    border-radius: 0 20px 20px 20px !important;
    flex: 1 !important;
    width: calc(100% - 38px) !important;
    height: auto !important;
    margin-right: 0 !important;
  }

  .folder-panel-content {
    padding: 1.6rem 1.4rem 1.8rem 1.4rem !important;
  }
}

.folder-panel {
  display: none !important;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: stretch;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.folder-panel.active {
  display: grid !important;
  opacity: 1;
}

@media (max-width: 992px) {
  .folder-panel {
    grid-template-columns: 1fr;
    height: auto;
  }
}

/* Panel Content Left Column */
.folder-panel-content {
  padding: 3.5rem 3.5rem 3.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
}

@media (max-width: 768px) {
  .folder-panel-content {
    padding: 2.5rem 2rem;
  }
}

.panel-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  color: #0F172A !important;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.panel-desc {
  font-family: var(--font-body);
  color: #0F172A !important;
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 400;
}

/* Feature Check Grid */
.panel-features-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.4rem 0 0.4rem;
}

.pfeature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  color: #0F172A !important;
}

.pfeature-item i {
  color: #0809e0 !important;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.panel-actions .btn-primary {
  background: #0809e0 !important;
  color: #FFFFFF !important;
  font-weight: 800;
  border-color: #0809e0 !important;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.3) !important;
}

.panel-actions .btn-primary:hover {
  background: #0506a8 !important;
  color: #FFFFFF !important;
  border-color: #0506a8 !important;
  transform: translateY(-2px);
}

.panel-actions .btn-secondary {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
}

.panel-actions .btn-secondary:hover {
  background: #F1F5F9 !important;
  color: #0809e0 !important;
  border-color: #94A3B8 !important;
  transform: translateY(-2px);
}

/* Panel Media Right Column — Stretch 100% Seamlessly */
.folder-panel-media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  display: block;
}

@media (max-width: 992px) {
  .folder-panel-media {
    min-height: 320px;
    height: 320px;
  }
}

.folder-showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.folder-panel:hover .folder-showcase-img {
  transform: scale(1.05);
}

.media-overlay-badge {
  display: none !important;
}

/* Option 1: Minimalist Filter Tabs Ecosystem Section (Full Width & Flexbox GSAP Filtering) */
.partners-filter-section {
  padding: 75px 4vw 120px 4vw;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ecosystem-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F8FAFC;
  padding: 6px;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.ecosystem-filter-btn {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A !important;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.7rem 1.6rem;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ecosystem-filter-btn:hover {
  background: #EEF2FF !important;
  color: #0809e0 !important;
  transform: translateY(-2px);
}

.ecosystem-filter-btn.active {
  background: #0809e0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.25);
  transform: translateY(0);
}

.ecosystem-logos-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  align-items: flex-start;
  gap: 1.2rem;
  width: 100%;
  transition: min-height 0.3s ease;
}

.ecosystem-logo-item {
  background: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  width: calc(12.5% - 1.1rem); /* 8 logos per row on desktop */
  flex-grow: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

@media (max-width: 1400px) {
  .ecosystem-logo-item {
    width: calc(16.666% - 1rem); /* 6 logos per row */
  }
}

@media (max-width: 1024px) {
  .ecosystem-logo-item {
    width: calc(25% - 0.9rem); /* 4 logos per row */
  }
}

@media (max-width: 768px) {
  .ecosystem-logo-item {
    width: calc(50% - 0.6rem) !important;
    min-width: 0 !important;
    flex: 0 0 calc(50% - 0.6rem) !important;
  }
}

@media (max-width: 640px) {
  /* Shorten the decorative lines flanking the section label */
  .partners-filter-section .editorial-line {
    width: 14px !important;
  }

  .partners-filter-section .editorial-vibe-tag {
    gap: 0.4rem !important;
  }

  /* Filter tab bar: clean 2x2 grid */
  .ecosystem-filter-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
    padding: 6px !important;
    width: 100% !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
  }

  .ecosystem-filter-btn {
    width: 100% !important;
    padding: 0.65rem 0.6rem !important;
    font-size: 0.82rem !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    border-radius: 12px !important;
  }
}

.ecosystem-logo-item:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: #0809e0;
  box-shadow: 0 12px 28px rgba(8, 9, 224, 0.15);
}

.wall-logo-img {
  max-height: 50px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  filter: grayscale(0%) opacity(0.9);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.ecosystem-logo-item:hover .wall-logo-img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

.partner-logo-img {
  max-height: 52px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.75);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.partner-logo-img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.08);
}

.partners-divider {
  height: 1px;
  background: #E2E8F0;
  width: 100%;
}

@media (max-width: 768px) {
  .ecosystem-partners-card {
    padding: 1.75rem 1.25rem;
    gap: 1.5rem;
  }
  .partner-logo-img {
    max-height: 42px;
    max-width: 110px;
  }
}

/* Stats Counter Grid */
.stats-banner {
  background: linear-gradient(135deg, #0809e0 0%, #1d4ed8 100%);
  border-radius: var(--radius-lg);
  padding: 3.5rem 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
  margin: 5rem 0;
  box-shadow: 0 15px 40px rgba(8, 9, 224, 0.25);
  color: #FFF;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4rem);
  font-weight: 800;
  color: #FFF;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-family: var(--font-heading);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Top Banner + Bottom Grid Layout Upcoming Events Section */
.events-section-v2 {
  position: relative;
  padding: 85px 1.5rem 95px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.events-section-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), var(--energy-bg, url('images/join_energy_bg.png'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.events-section-v2 > * {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.events-main-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0F172A;
  line-height: 1.15;
}

.events-highlight-blue,
.events-main-title span {
  color: #0809e0 !important;
}

.events-stacked-container {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

/* Top Banner Featured Card (1320px Balanced Center) */
.event-hero-card.wide-banner {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
  min-height: 440px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
}

.event-hero-card.wide-banner .event-hero-image-box {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem 3rem 2.8rem;
  z-index: 3;
}

.event-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-hero-card:hover .event-hero-img {
  transform: scale(1.04);
}

.event-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.55) 60%, rgba(15, 23, 42, 0.25) 100%);
  z-index: 2;
}

.event-hero-top-badges {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.event-badge {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
}

.badge-featured {
  background: #0809e0;
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.4);
}

.event-hero-date {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.event-hero-meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.event-hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  color: #FFFFFF;
  margin-top: 1.5rem;
}

.event-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 800;
  line-height: 1.2;
  color: #FFFFFF;
  letter-spacing: -0.02em;
}

.event-hero-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  max-width: 680px;
}

.event-hero-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  margin-top: 0.8rem;
  flex-wrap: wrap;
}

.event-location {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Bottom Grid Layout - Independent Full Spacious 5-Card Row (Up to 1600px) */
.events-grid-layout {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.35rem;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* Ultra Wide Desktop (>1440px): Strict 5 Cards in 1 Row */
@media (min-width: 1441px) {
  .events-grid-layout {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    max-width: 1600px;
    gap: 1.25rem;
  }

  .events-grid-layout .event-card-item:nth-child(n+6) {
    display: none !important;
  }
}

/* Standard Laptop & Compact Desktop (1025px - 1440px, incl. 1366x768): Spacious 4 Cards in 1 Row */
@media (min-width: 1025px) and (max-width: 1440px) {
  .events-grid-layout {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 1320px;
    gap: 1.25rem;
  }

  /* Tampil tepat 4 kartu di 1366x768, sembunyikan kartu ke-5 dan ke-6 */
  .events-grid-layout .event-card-item:nth-child(n+5) {
    display: none !important;
  }

  /* Align Events Section Left & Right with Other Sections on Laptop View */
  .events-section-v2 {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .event-hero-card.wide-banner {
    max-width: 100% !important;
  }
}

/* Tablet (768px - 1024px): 3 Cards */
@media (min-width: 769px) and (max-width: 1024px) {
  .events-grid-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

@media (max-width: 768px) {
  .events-grid-layout {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 1.2rem !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    padding-bottom: 1rem !important;
    margin: 0 -1.2rem !important;
    width: calc(100% + 2.4rem) !important;
    scrollbar-width: none !important; /* Hide scrollbar Firefox */
    -webkit-overflow-scrolling: touch;
  }

  .events-grid-layout::-webkit-scrollbar {
    display: none !important; /* Hide scrollbar Chrome/Safari */
  }

  /* Force cards visible — override GSAP opacity that may not fire on mobile */
  .event-card-item {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    background: transparent !important; /* Keep background transparent like desktop */
    flex: 0 0 85% !important; /* Make each card take 85% of screen width */
    max-width: 320px !important;
    scroll-snap-align: center !important;
  }

  .event-card-body {
    margin: -36px 14px 0 14px !important; /* Restore 14px side margins for floating ticket effect */
    border-radius: 0 0 20px 20px !important;
  }
}

/* Event Card Item Container */
.event-card-item {
  position: relative;
  background: transparent;
  border: none;
  border-radius: 24px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 1;
  visibility: visible;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.event-card-item:hover {
  transform: translateY(-8px) scale(1.01);
}

/* WIDER Top Image Container - Extends Past Floating White Ticket Card on Left & Right */
.event-card-media {
  position: relative;
  width: 100%;
  height: 210px;
  border-radius: 22px;
  overflow: hidden;
  background: #0F172A;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.1);
}

.event-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-no-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 2.5rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.event-card-item:hover .event-card-media img,
.event-card-item:hover .event-card-media .event-no-image-placeholder {
  transform: scale(1.08);
}

.event-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  z-index: 5;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.event-type-tag {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  color: #0809e0;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #FFFFFF !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  box-sizing: border-box;
  padding: 0 0.7rem;
  border-radius: 9999px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-status-tag,
.tag-online,
.tag-open {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #0809e0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  box-sizing: border-box;
  padding: 0 0.7rem;
  border-radius: 9999px;
  border: none !important;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.35) !important;
  white-space: nowrap;
}

.tag-free {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #059669 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  box-sizing: border-box;
  padding: 0 0.7rem;
  border-radius: 9999px;
  border: none !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
  white-space: nowrap;
}

.tag-limited {
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #DC2626 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  box-sizing: border-box;
  padding: 0 0.7rem;
  border-radius: 9999px;
  border: none !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  white-space: nowrap;
}

/* Floating White Ticket Body - NARROWER than Image (10px Side Margins) Overlapping in Center */
.event-card-body {
  position: relative;
  z-index: 5;
  margin: -36px 12px 0 12px;
  background: #FFFFFF;
  padding: 1.6rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(226, 232, 240, 0.8);
}

.event-card-body::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 9px;
  background: radial-gradient(circle at 6px 0px, transparent 4px, #FFFFFF 4.5px) repeat-x;
  background-size: 12px 9px;
  z-index: 6;
}



.event-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin: 0 0 0.5rem 0;
  display: block;
  overflow: visible;
  word-break: break-word;
  transition: color 0.3s ease;
}

.event-card-item:hover .event-card-title {
  color: #0809e0;
}

.event-card-date {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  background: transparent;
  border: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: auto;
}

.event-card-date i {
  width: 15px;
  height: 15px;
  color: #94A3B8;
  flex-shrink: 0;
}

.event-card-location {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed #E2E8F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card-location span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-card-location i {
  width: 15px;
  height: 15px;
  color: #94A3B8;
  flex-shrink: 0;
}

.btn-rsvp {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1.25rem;
  background: #0809e0;
  border: none;
  border-radius: 14px;
  color: #FFFFFF !important;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.4rem;
}

.btn-rsvp i {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
  padding: 3px;
}

.btn-rsvp:hover {
  background: #0506a8;
  box-shadow: none !important;
  transform: translateY(-2px);
  color: #FFFFFF !important;
}

.btn-rsvp:hover i {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.35);
}

/* See More Events Footer CTA */
.events-footer-cta {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
  width: 100%;
}

.btn-see-more-events {
  background: #EEF2FF !important;
  border: 1.5px solid rgba(8, 9, 224, 0.18) !important;
  color: #0809e0 !important;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.85rem 2.4rem;
  border-radius: 9999px !important;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .btn-see-more-events {
    padding: 0.75rem 1.6rem !important;
    font-size: 0.88rem !important;
    gap: 0.5rem !important;
  }
}

.btn-see-more-events:hover {
  background: #0809e0 !important;
  color: #FFFFFF !important;
  border-color: #0809e0 !important;
  transform: translateY(-3px) !important;
  box-shadow: none !important;
}

.btn-see-more-events i {
  transition: transform 0.3s ease;
}

.btn-see-more-events:hover i {
  transform: translateX(4px);
}


/* ==========================================================================
   3D STACKED COMMUNITY VOICES REVIEWS CAROUSEL
   ========================================================================== */
.community-voices-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem;
}

.stacked-slider-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stacked-deck-container {
  position: relative;
  width: 100%;
  height: 540px;
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stacked-card-item {
  position: absolute;
  width: min(94%, 660px);
  height: 440px;
  min-height: 440px;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 30px;
  padding: 2.2rem 2.5rem;
  box-shadow: 0 25px 65px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s ease, box-shadow 0.55s ease;
  transform-origin: center center;
  user-select: none;
  cursor: pointer;
  backface-visibility: hidden;
  will-change: transform, opacity;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stacked-quote-icon {
  font-family: Georgia, serif;
  font-size: 3.8rem;
  line-height: 1;
  color: rgba(8, 9, 224, 0.15);
  position: absolute;
  top: 1.4rem;
  right: 1.8rem;
  pointer-events: none;
}

.stacked-quote-text {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  color: #0F172A;
  line-height: 1.62;
  margin: 0 0 1rem 0;
  position: relative;
  z-index: 2;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stacked-author-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(226, 232, 240, 0.8);
}

.stacked-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  flex-shrink: 0;
}

.stacked-author-meta {
  display: flex;
  flex-direction: column;
}

.stacked-author-name {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.stacked-author-age {
  font-size: 1rem;
  font-weight: 700;
  color: #475569;
}

.stacked-author-role {
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 0.15rem;
}

/* Hide text, quote icon, and author details on background cards so only clean card ears stick out */
.stacked-quote-icon,
.stacked-quote-text,
.stacked-author-row {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease 0.1s;
}

.stacked-card-item.is-active .stacked-quote-icon,
.stacked-card-item.is-active .stacked-quote-text,
.stacked-card-item.is-active .stacked-author-row,
.stacked-card-item.is-animating-next .stacked-quote-icon,
.stacked-card-item.is-animating-next .stacked-quote-text,
.stacked-card-item.is-animating-next .stacked-author-row,
.stacked-card-item.is-animating-prev .stacked-quote-icon,
.stacked-card-item.is-animating-prev .stacked-quote-text,
.stacked-card-item.is-animating-prev .stacked-author-row {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.35s ease 0.15s;
}

/* CSS Keyframes for Wiza Lift-from-Behind Animation */
/* Next: starts from right behind, lifts UP-RIGHT (tilted right), sweeps to front */
@keyframes liftAndLandNext {
  0% {
    transform: translate3d(40px, 0, -20px) scale(1.06, 0.94) rotate(0deg);
    opacity: 0.85;
  }
  40% {
    transform: translate3d(110px, -75px, 100px) rotate(14deg) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* Prev: starts from left behind, lifts UP-LEFT (tilted left), sweeps to front */
@keyframes liftAndLandPrev {
  0% {
    transform: translate3d(-40px, 0, -20px) scale(1.06, 0.94) rotate(0deg);
    opacity: 0.85;
  }
  40% {
    transform: translate3d(-110px, -75px, 100px) rotate(-14deg) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

.stacked-card-item.is-animating-next,
.stacked-card-item.is-animating-prev {
  transition: none !important;
  will-change: transform, opacity;
}

.stacked-card-item.is-animating-next {
  animation: liftAndLandNext 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.stacked-card-item.is-animating-prev {
  animation: liftAndLandPrev 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Position States for Single Symmetrical Background Card Deck */
/* State: ACTIVE FRONT MAIN CARD */
.stacked-card-item.is-active {
  z-index: 10;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  opacity: 1;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.9);
  pointer-events: auto;
}

/* State: SINGLE SYMMETRICAL BACKGROUND CARD DIRECTLY BEHIND */
.stacked-card-item.is-behind-1 {
  z-index: 6;
  transform: translate3d(0, 0, -20px) scale(1.09, 0.94);
  opacity: 0.85;
  height: 440px;
  pointer-events: auto;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

/* State: HIDDEN IN BACK DECK */
.stacked-card-item.is-behind-2,
.stacked-card-item.is-hidden-back {
  z-index: 1;
  transform: translate3d(0, 0, -60px) scale(0.85);
  opacity: 0;
  pointer-events: none;
}

/* Side Arrow Navigation Buttons */
.stacked-arrow-btn.side-arrow {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 25;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #0809e0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stacked-arrow-btn.side-arrow.prev-btn {
  left: 20px;
}

.stacked-arrow-btn.side-arrow.next-btn {
  right: 20px;
}

.stacked-arrow-btn.side-arrow:hover {
  background: #0809e0;
  border-color: #0809e0;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 30px rgba(8, 9, 224, 0.3);
}

.stacked-arrow-btn.side-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

@media (max-width: 640px) {
  /* Section: vertical & side padding so section header text has clean side margins */
  .community-voices-section {
    padding: 3.5rem 1.2rem !important;
    overflow: visible !important;
  }

  /* Wrapper: centered with equal horizontal margin as the gap source */
  .stacked-slider-wrapper {
    margin-top: 1.5rem;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hide arrows entirely on mobile — swipe is used instead */
  .stacked-arrow-btn.side-arrow {
    display: none !important;
  }

  /* Deck: fixed height, full width */
  .stacked-deck-container {
    position: relative !important;
    width: 100% !important;
    height: 540px !important;
    min-height: 540px !important;
    perspective: 1200px;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    touch-action: pan-y !important;
  }

  /* All cards hidden by default */
  .stacked-card-item {
    position: absolute !important;
    width: 100% !important;
    height: 540px !important;
    min-height: 540px !important;
    max-height: 540px !important;
    padding: 1.6rem 1.4rem;
    border-radius: 20px;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden;
  }

  /* Only active card shows */
  .stacked-card-item.is-active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 10;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.9);
  }

  /* Background cards invisible on mobile */
  .stacked-card-item.is-behind-1,
  .stacked-card-item.is-behind-2,
  .stacked-card-item.is-hidden-back {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Quote text scrollable inside fixed height card */
  .stacked-quote-text {
    font-size: 0.93rem;
    line-height: 1.58;
    overflow-y: auto;
    max-height: 380px;
    scrollbar-width: thin;
    scrollbar-color: #E2E8F0 transparent;
  }

  .stacked-quote-text::-webkit-scrollbar {
    width: 3px;
  }

  .stacked-quote-text::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 10px;
  }

  /* Force all card content visible on mobile */
  .stacked-card-item.is-active .stacked-quote-icon,
  .stacked-card-item.is-active .stacked-quote-text,
  .stacked-card-item.is-active .stacked-author-row {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Single Stacked Modern FAQ Accordion List */
.faq-section {
  position: relative;
  background: #FFFFFF !important;
  padding: 6rem 2rem 7rem;
  width: 100%;
}

.faq-single-container {
  max-width: 900px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.06);
}

.faq-item.active {
  border-color: #0809e0;
  background: #F8FAFC;
  box-shadow: 0 15px 35px rgba(8, 9, 224, 0.1);
}

.faq-question {
  padding: 1.4rem 1.6rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
}

.faq-question-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.faq-icon-badge {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: rgba(8, 9, 224, 0.08);
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.faq-item.active .faq-icon-badge {
  background: #0809e0;
  color: #FFFFFF;
  transform: scale(1.05);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding-left: 4.6rem;
  padding-right: 1.6rem;
  padding-top: 0;
  padding-bottom: 0;
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.65;
  box-sizing: border-box;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding-bottom 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 1.4rem;
  opacity: 1;
}

.faq-icon {
  transition: transform 0.35s ease, color 0.35s ease;
  color: #64748B;
  flex-shrink: 0;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: #0809e0;
}

@media (max-width: 992px) {
  .faq-grid-container {
    grid-template-columns: 1fr;
  }
}

/* CTA Section Canvas Background */
#join {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 100px 5% 120px;
  box-sizing: border-box !important;
  background-color: #FFFFFF;
  background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), var(--cta-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
}

.cta-banner-wrapper {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

/* CTA Box (Solid Color - No Gradients) */
.cta-banner {
  position: relative;
  background: #0809e0;
  border-radius: 36px;
  padding: 5rem 2.5rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(8, 9, 224, 0.3);
  color: #FFFFFF;
}

.cta-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.cta-title span,
.cta-highlight-blue {
  font-family: var(--font-heading);
  font-style: normal;
  color: #93C5FD;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.cta-desc {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 640px;
  margin: 0 auto 2.8rem;
  line-height: 1.6;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.btn-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.4rem;
  background: #FFFFFF;
  color: #0809e0;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-cta-primary:hover {
  transform: translateY(-3px);
  background: #F8FAFC;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.btn-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 2.4rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  border-radius: 99px;
  text-decoration: none;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

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

/* Redesigned 3-Column Solid Blue Footer */
.footer {
  border-top: none;
  padding: 80px 5% 40px;
  background: #0809e0;
  color: #FFFFFF;
  position: relative;
  z-index: 2;
}

.footer-new-grid {
  max-width: 1240px;
  margin: 0 auto 4rem;
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1fr;
  gap: 3rem;
  align-items: center;
}

.footer-col-left {
  text-align: left;
}

.footer-hq-name {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  margin: 0.2rem 0 0.5rem 0;
  line-height: 1.35;
}

.footer-hq-address {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.5;
  margin-bottom: 1.4rem;
}

.footer-hq-contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.footer-contact-link {
  font-size: 1.02rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.footer-contact-link:hover {
  opacity: 0.85;
  text-decoration: underline;
}

.footer-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}

.footer-big-logo {
  height: 225px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.38));
  transition: transform 0.35s ease;
}

.footer-center-logo-link:hover .footer-big-logo {
  transform: scale(1.06);
}

.footer-center-desc {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.05em;
  margin: 0;
  max-width: 520px;
  line-height: 1.2;
  white-space: nowrap;
}

.footer-center-subdesc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.03em;
  margin: -0.15rem 0 0;
  white-space: nowrap;
}

.footer-kodebyte-link {
  color: #FFFFFF;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.25s ease, color 0.25s ease;
}

.footer-kodebyte-link:hover {
  opacity: 0.85;
  color: #60A5FA;
}

.footer-col-right {
  text-align: right;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0;
  margin: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.footer-links a:hover {
  color: #FFFFFF;
  opacity: 1;
}

.footer-col-right .footer-links a i {
  display: none;
}

.footer-col-right .footer-links a .cta-btn-icon-img,
.footer-col-right .footer-links a .footer-brand-img {
  display: none;
  filter: brightness(0) invert(1);
}

.footer-bottom {
  max-width: 1240px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 600;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 992px) {
  .footer-new-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
    gap: 2.5rem;
  }
  .footer-col-center {
    order: 1 !important;
    text-align: center;
    align-items: center;
    width: 100% !important;
    padding: 0 0.8rem !important;
    box-sizing: border-box !important;
  }
  .footer-center-desc {
    white-space: nowrap !important;
    font-size: clamp(0.72rem, 3.3vw, 0.95rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    margin: 0 !important;
  }
  .footer-center-subdesc {
    white-space: nowrap !important;
    font-size: clamp(0.6rem, 2.7vw, 0.78rem) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    margin: 0.35rem 0 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }
  .footer-col-left {
    order: 2 !important;
    text-align: center;
    align-items: center;
  }
  .footer-col-right {
    order: 3 !important;
    text-align: center;
    align-items: center;
  }
  .footer-col-right .footer-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    margin-top: 0.8rem !important;
  }
  .footer-col-right .footer-links li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  .footer-col-right .footer-links li a:hover {
    background: #FFFFFF !important;
    color: #0809e0 !important;
    transform: translateY(-3px) !important;
  }
  .footer-col-right .footer-links li a i {
    display: inline-block !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
  }
  .footer-col-right .footer-links li a .footer-brand-img,
  .footer-col-right .footer-links li a .cta-btn-icon-img {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    transition: filter 0.3s ease !important;
  }
  .footer-col-right .footer-links li a:hover .footer-brand-img,
  .footer-col-right .footer-links li a:hover .cta-btn-icon-img {
    filter: brightness(0) saturate(100%) invert(10%) sepia(90%) saturate(6000%) hue-rotate(242deg) brightness(95%) contrast(110%) !important;
  }
  .footer-col-right .social-text {
    display: none !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }
}

/* Mobile Nav Toggle */
.mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.8rem;
  cursor: pointer;
}

@media (max-width: 992px) {
  .navbar {
    padding: 1rem 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* On Mobile: Hide logo from main screen, show floating circular hamburger icon on right */
  .nav-logo-scrolled,
  .navbar.scrolled .nav-logo-scrolled {
    display: none !important;
  }

  .nav-container,
  .navbar.scrolled .nav-container,
  .navbar:not(.scrolled) .nav-container {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    justify-content: flex-end !important;
    width: auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 0 0 auto !important;
  }

  .nav-actions,
  .navbar.scrolled .nav-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    max-width: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  .mobile-toggle { 
    display: flex !important; 
    align-items: center;
    justify-content: center;
    background: #0809e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    width: auto !important;
    height: 34px !important;
    border-radius: 99px !important;
    font-size: 0.75rem !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    cursor: pointer !important;
    padding: 0 1.2rem !important;
    box-shadow: 0 4px 12px rgba(8, 9, 224, 0.25) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .mobile-toggle:active {
    transform: scale(0.92);
  }

  .nav-btn-scrolled,
  .navbar.scrolled .nav-btn-scrolled {
    display: none !important;
  }

  /* Fixed Drawer Overlay Above Everything - Completely Hidden Offscreen When Inactive */
  .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    margin: 0 !important;
    width: 82% !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #0809e0 !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 1.2rem !important;
    padding: 2rem 1.5rem !important;
    transform: translate3d(105%, 0, 0) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease, opacity 0.35s ease !important;
    z-index: 100000 !important;
    box-shadow: -15px 0 40px rgba(8, 9, 224, 0.5) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .nav-links.active {
    transform: translate3d(0, 0, 0) !important;
    right: 0 !important;
    top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 1.2rem !important;
    margin-bottom: 0.8rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .drawer-brand-logo {
    display: flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
  }

  .drawer-logo-img {
    height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    border-radius: 50% !important;
  }

  .drawer-brand-title {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: #FFFFFF !important;
    letter-spacing: -0.01em !important;
  }

  .mobile-close-btn {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #FFFFFF;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .mobile-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .nav-links li {
    width: 100%;
    list-style: none;
  }

  .nav-links .nav-link {
    display: block !important;
    width: 100% !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    padding: 0.6rem 0.8rem !important;
    border-radius: 10px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }

  .nav-links .nav-link:hover,
  .nav-links .nav-link.active {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #FFFFFF !important;
  }

  .mobile-only-nav-item {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 1.5rem !important;
  }

  .btn-mobile-join {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
    padding: 0.85rem 1.5rem !important;
    background: #FFFFFF !important;
    color: #0809e0 !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
  }
}

.mobile-drawer-header {
  display: none;
}
.mobile-only-nav-item {
  display: none;
}

/* ==========================================================================
   NEWS SECTION STYLES (TRUE EDGE-TO-EDGE FULL WIDTH)
   ========================================================================== */
.news-section {
  padding: 5rem 1.5rem;
}

/* Laptop View (1025px - 1440px, incl. 1366x768): Align News Section with Other Sections */
@media (min-width: 1025px) and (max-width: 1440px) {
  .news-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .news-container {
    max-width: 100% !important;
  }
}

.news-container {
  max-width: 1240px;
  margin: 3rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* Featured Top Banner (Split 50/50 Layout) */
.news-featured-card {
  position: relative;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 28px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.news-featured-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(8, 9, 224, 0.12);
}

.news-featured-text-col {
  padding: 3rem 3.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.news-featured-image-col {
  width: 100%;
  height: 100%;
  min-height: 380px;
  overflow: hidden;
  position: relative;
}

.news-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-no-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 220px;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 2.5rem;
}

.news-no-image-placeholder.thumb-placeholder {
  min-height: 180px;
  font-size: 2rem;
}

.news-featured-card:hover .news-featured-img {
  transform: scale(1.06);
}

.news-featured-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.news-badge {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.38rem 0.9rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  text-transform: uppercase;
}

.news-date {
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.news-featured-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin-bottom: 1.2rem;
  transition: color 0.3s ease;
}

.news-featured-card:hover .news-featured-title {
  color: #0809e0;
}

.news-featured-excerpt {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.68;
  margin-bottom: 2rem;
}

.news-meta-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
}

.news-author,
.news-read-time {
  font-size: 0.86rem;
  font-weight: 600;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.news-read-more-btn {
  margin-left: auto;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0809e0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  transition: gap 0.25s ease;
}

.news-featured-card:hover .news-read-more-btn,
.news-read-more-btn:hover {
  gap: 0.7rem;
}

.news-read-more-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* Secondary News Cards Grid (3 Columns) */
.news-secondary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.news-card-item {
  position: relative;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  padding: 0;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.news-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.news-card-thumb {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.news-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.news-card-item:hover .news-thumb-img {
  transform: scale(1.08);
}

.news-card-body {
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  gap: 1rem;
}

.news-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news-card-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.4;
  margin: 0;
  transition: color 0.3s ease;
}

.news-card-item:hover .news-card-title {
  color: #0809e0;
}

.news-card-excerpt {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

.news-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.8rem;
  border-top: 1px dashed rgba(226, 232, 240, 0.9);
}

.news-link-inline {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0809e0;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  transition: gap 0.25s ease;
}

.news-card-item:hover .news-link-inline,
.news-link-inline:hover {
  gap: 0.5rem;
}

.news-link-inline::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

/* News Footer CTA Button */
.news-footer-cta {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

.btn-see-more-news {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2.6rem;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.3);
  color: #0809e0;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
}

.btn-see-more-news:hover {
  transform: translateY(-3px);
  background: #0809e0;
  border-color: #0809e0;
  color: #FFFFFF;
  box-shadow: none !important;
  gap: 1.1rem;
}

@media (max-width: 992px) {
  .news-featured-card {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 993px) and (max-width: 1366px) {
  .news-secondary-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Show 6 news cards on 1366x768 view — 2 clean rows of 3 */
  .news-secondary-grid .news-card-item:nth-child(n+7) {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .news-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Show only 4 news cards on tablet — 2 clean rows of 2 */
  .news-secondary-grid .news-card-item:nth-child(n+5) {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .news-secondary-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 1.2rem !important;
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
    padding-bottom: 1rem !important;
    margin: 0 -1.2rem !important;
    width: calc(100% + 2.4rem) !important;
    scrollbar-width: none !important; /* Hide scrollbar Firefox */
    -webkit-overflow-scrolling: touch;
  }

  .news-secondary-grid::-webkit-scrollbar {
    display: none !important; /* Hide scrollbar Chrome/Safari */
  }

  .news-secondary-grid .news-card-item {
    flex: 0 0 85% !important; /* Make each news card take 85% of screen width */
    max-width: 320px !important;
    scroll-snap-align: center !important;
  }

  .news-card-header,
  .news-featured-badge-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.4rem !important;
  }

  .news-badge {
    font-size: 0.65rem !important;
    padding: 0.28rem 0.65rem !important;
    letter-spacing: 0.05em !important;
    white-space: nowrap !important;
  }

  .news-date {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .news-meta-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.6rem 1rem !important;
  }

  .news-author {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  .news-read-time {
    display: inline-flex !important;
    align-items: center !important;
  }

  .news-read-more-btn {
    margin-left: auto !important;
    width: auto !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
  }
}

/* Floating Back to Top Button */
.back-to-top-btn {
  position: fixed;
  bottom: 2.2rem;
  right: 2.2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0809e0;
  color: #FFFFFF;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 990;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease;
}

.back-to-top-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Hide back-to-top button when any modal is open */
body:has(.vv-modal-overlay.active) .back-to-top-btn,
body:has(.modal-active) .back-to-top-btn {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.back-to-top-btn:hover {
  transform: translateY(-4px) scale(1.08);
  background: #1d4ed8;
  box-shadow: none !important;
}

.back-to-top-btn:active {
  transform: translateY(-1px) scale(0.96);
}

@media (max-width: 768px) {
  .back-to-top-btn {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 46px;
    height: 46px;
    font-size: 1.1rem;
    z-index: 990;
  }
}

/* ============================================================
   GLOBAL & PER-SECTION MOBILE LAYOUT FIXES (<= 768px)
   Ensures ALL sections, hero banners, card bodies, mentors grid,
   community voices deck, and news cards have 100% symmetric
   left & right gaps (1.4rem) from screen edges on mobile.
   ============================================================ */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-content-overlay {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  /* All section containers get exact 1.4rem symmetric side gaps & center alignment */
  .section,
  .pillars-section,
  .mentors-section,
  .partners-filter-section,
  .events-section-v2,
  .community-voices-section,
  .news-section,
  .manifesto-section,
  .faq-section {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Pillars Folder Container & Body */
  .folder-showcase-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pillars-segmented-tabs {
    width: 34px !important;
    min-width: 34px !important;
  }

  .folder-card-body {
    width: calc(100% - 33px) !important;
    margin-right: 0 !important;
    flex: 1 !important;
    box-sizing: border-box !important;
  }

  .folder-panel-content {
    padding: 1.5rem 1.2rem !important;
    box-sizing: border-box !important;
  }

  /* Mentors Container */
  .mentors-grid-container {
    padding: 1.8rem 1.2rem 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Supermentors Grid - Mobile 1-Row Horizontal Scroll Track */
  .quad-mentors-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.9rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    padding: 0.4rem 0.2rem 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    scroll-snap-type: x mandatory;
  }

  .quad-mentors-grid::-webkit-scrollbar {
    display: none !important;
  }

  .supermentor-card {
    flex: 0 0 210px !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    padding: 0.85rem !important;
    border-radius: 18px !important;
    scroll-snap-align: start;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .supermentor-card .mentor-img-wrapper {
    width: 100% !important;
    aspect-ratio: 1 / 1.15 !important;
    border-radius: 14px !important;
    margin-bottom: 0.75rem !important;
    background: #F1F5F9 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  .supermentor-card .mentor-info {
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.15rem !important;
    flex: 1 !important;
  }

  .supermentor-card .mentor-name {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #0F172A !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    word-break: break-word !important;
  }

  .supermentor-card .mentor-role-subtitle {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #0809e0 !important;
    text-align: center !important;
    line-height: 1.25 !important;
    text-transform: capitalize !important;
    width: 100% !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .supermentors-spotlight {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ecosystem / Partners Grid & Logos (Option 1: 2-Row Horizontal Swipe Track) */
  .ecosystem-filter-bar {
    display: none !important;
  }

  .ecosystem-logos-wall {
    display: grid !important;
    grid-template-rows: repeat(2, 76px) !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 140px !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0.7rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    margin: 0 -1.4rem !important;
    width: calc(100% + 2.8rem) !important;
    max-width: calc(100% + 2.8rem) !important;
    min-height: 0 !important;
    padding: 0.5rem 1.4rem 0.8rem 1.4rem !important;
    box-sizing: border-box !important;
  }

  .ecosystem-logos-wall::-webkit-scrollbar {
    display: none !important;
  }

  .ecosystem-logo-item {
    width: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    height: 76px !important;
    box-sizing: border-box !important;
    padding: 0.55rem 0.8rem !important;
    border-radius: 16px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Events Hero Banner & Containers */
  .events-stacked-container,
  .event-hero-card.wide-banner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .event-hero-card.wide-banner .event-hero-image-box {
    padding: 1.8rem 1.2rem 1.6rem !important;
    min-height: 360px !important;
    box-sizing: border-box !important;
  }

  /* Community Voices Review Card Deck */
  .stacked-slider-wrapper,
  .stacked-deck-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .stacked-card-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem 1.2rem !important;
  }

  /* News Section Cards & Headers */
  .news-featured-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .news-featured-text-col {
    padding: 1.6rem 1.2rem !important;
    box-sizing: border-box !important;
  }

  .cta-genz-word {
    display: inline !important;
    white-space: nowrap !important;
  }

  .cta-highlight-blue {
    white-space: nowrap !important;
    display: inline-block !important;
  }

  .desktop-btn-text {
    display: none !important;
  }

  .mobile-btn-text {
    display: inline !important;
  }

  /* Hero bottom bar: prevent slide controls from overflowing off-screen on mobile */
  .hero-bottom-bar {
    gap: 0.8rem !important;
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
  }

  .hero-slide-caption {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .slide-title {
    font-size: clamp(1.4rem, 6vw, 2rem) !important;
    word-break: break-word !important;
  }

  .hero-slide-controls {
    flex-shrink: 0 !important;
  }
}

.mobile-btn-text {
  display: none;
}

/* ==========================================================================
   DEDICATED PAGE: VIBE VALUES (vibe-values.html - WHITE THEME)
   ========================================================================== */
.page-vibe-values,
.page-vibe-values,
.page-pillars,
.page-mentors,
.page-events,
.page-news {
  background: #FFFFFF !important;
  color: #0F172A !important;
  padding-top: 80px;
}

.page-vibe-values .ambient-glow-1,
.page-vibe-values .ambient-glow-2,
.page-pillars .ambient-glow-1,
.page-pillars .ambient-glow-2,
.page-mentors .ambient-glow-1,
.page-mentors .ambient-glow-2,
.page-events .ambient-glow-1,
.page-events .ambient-glow-2,
.page-news .ambient-glow-1,
.page-news .ambient-glow-2,
.page-news-detail .ambient-glow-1,
.page-news-detail .ambient-glow-2,
.page-gallery .ambient-glow-1,
.page-gallery .ambient-glow-2 {
  display: none !important;
}

body.page-vibe-values,
body.page-pillars,
body.page-mentors,
body.page-events,
body.page-news,
body.page-news-detail {
  background-color: #FFFFFF !important;
  color: var(--text-main) !important;
}

.page-vibe-values .navbar:not(.scrolled) .nav-link,
.page-pillars .navbar:not(.scrolled) .nav-link,
.page-mentors .navbar:not(.scrolled) .nav-link,
.page-events .navbar:not(.scrolled) .nav-link,
.page-news .navbar:not(.scrolled) .nav-link,
.page-news-detail .navbar:not(.scrolled) .nav-link,
.page-gallery .navbar:not(.scrolled) .nav-link {
  color: #FFFFFF !important;
}

.page-vibe-values .navbar:not(.scrolled) .nav-link::after,
.page-pillars .navbar:not(.scrolled) .nav-link::after,
.page-mentors .navbar:not(.scrolled) .nav-link::after,
.page-events .navbar:not(.scrolled) .nav-link::after,
.page-news .navbar:not(.scrolled) .nav-link::after,
.page-news-detail .navbar:not(.scrolled) .nav-link::after,
.page-gallery .navbar:not(.scrolled) .nav-link::after {
  background: #FFFFFF !important;
}

.page-vibe-values .navbar:not(.scrolled) .nav-link:hover,
.page-vibe-values .navbar:not(.scrolled) .nav-link.active,
.page-pillars .navbar:not(.scrolled) .nav-link:hover,
.page-pillars .navbar:not(.scrolled) .nav-link.active,
.page-mentors .navbar:not(.scrolled) .nav-link:hover,
.page-mentors .navbar:not(.scrolled) .nav-link.active,
.page-events .navbar:not(.scrolled) .nav-link:hover,
.page-events .navbar:not(.scrolled) .nav-link.active,
.page-news .navbar:not(.scrolled) .nav-link:hover,
.page-news .navbar:not(.scrolled) .nav-link.active,
.page-news-detail .navbar:not(.scrolled) .nav-link:hover,
.page-news-detail .navbar:not(.scrolled) .nav-link.active,
.page-gallery .navbar:not(.scrolled) .nav-link:hover,
.page-gallery .navbar:not(.scrolled) .nav-link.active {
  color: #FFFFFF !important;
}

.page-vibe-values .mobile-toggle,
.page-pillars .mobile-toggle,
.page-mentors .mobile-toggle,
.page-events .mobile-toggle,
.page-news .mobile-toggle,
.page-news-detail .mobile-toggle,
.page-gallery .mobile-toggle {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: #0809e0 !important;
}

.vv-hero-section {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 1.5rem 6rem;
  background-image: linear-gradient(180deg, rgba(7, 9, 14, 0.65) 0%, rgba(7, 9, 14, 0.8) 100%), url('images/hero-1.jpg');
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vv-hero-container {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.vv-hero-section .editorial-text,
.events-hero-section .editorial-text {
  color: #3B82F6 !important;
}

.vv-hero-section .editorial-line,
.events-hero-section .editorial-line {
  background: rgba(255, 255, 255, 0.3) !important;
}

.vv-hero-title {
  font-family: var(--font-body);
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 1.2rem auto 1.4rem;
  max-width: 100%;
  letter-spacing: -0.02em;
}

.vv-hero-title span,
.vv-hero-title .highlight-blue {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  color: #3B82F6 !important;
  -webkit-text-fill-color: #3B82F6 !important;
}

.vv-hero-subtitle {
  font-size: 1.15rem;
  color: #E2E8F0;
  max-width: 720px;
  margin: 0 auto 2.2rem;
  line-height: 1.68;
}

.vv-hero-pills {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.vv-pill-badge {
  padding: 0.6rem 1.4rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  backdrop-filter: blur(8px);
}

.vv-main-content {
  padding-bottom: 5rem;
}

.vv-container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 768px) {
  .vv-container {
    padding: 0 1.2rem;
  }
}

/* About Section (What is Gen-Z Trive) - White Background */
.vv-about-section {
  padding: 100px 5% 100px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  width: 100%;
}

@media (max-width: 992px) {
  .vv-about-section {
    padding: 70px 4% 80px;
  }
}

@media (max-width: 768px) {
  .vv-about-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
}

.vv-about-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

.vv-about-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 1rem 0 1.2rem;
}

.vv-about-title span,
.vv-stance-title span {
  color: #0809e0;
}

.vv-about-lead {
  font-size: 1.1rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}

.vv-about-body {
  font-size: 0.98rem;
  color: #64748B;
  line-height: 1.7;
}

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

.vv-about-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  padding: 1.5rem 1.8rem;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.vv-about-card:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 9, 224, 0.4);
  box-shadow: none;
}

.vv-about-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #EEF2FF;
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.vv-about-card-content {
  flex: 1;
  min-width: 0;
}

.motto-desktop-header {
  display: block;
  margin-bottom: 0.3rem;
}

.motto-mobile-header {
  display: none;
}

.vv-about-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
}

.vv-motto-badge {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .motto-desktop-header {
    display: none !important;
  }
  .motto-mobile-header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-bottom: 0.45rem;
  }
}

.vv-about-card p {
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* WHAT IS GEN-ZTRIVE? - Interactive Feature Deck */
.vv-feature-deck-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.vv-deck-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  border-radius: 22px;
  padding: 1.4rem 1.6rem;
  display: flex;
  gap: 1.3rem;
  align-items: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.vv-deck-card:hover {
  background: #FFFFFF;
  border-color: rgba(8, 9, 224, 0.3);
  transform: translateX(6px);
  box-shadow: none;
}

.vv-deck-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.12);
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(8, 9, 224, 0.08);
  transition: all 0.3s ease;
}

.vv-deck-card:hover .vv-deck-icon-wrap {
  background: #0809e0;
  color: #FFFFFF;
  border-color: #0809e0;
  transform: scale(1.05);
}

.vv-deck-body {
  flex: 1;
}

.vv-deck-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.35rem;
}

.vv-deck-header h4 {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.vv-deck-pill {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.12);
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.vv-deck-body p {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

/* Foundational Motto Codes - Gray Background */
.vv-pillars-section {
  padding: 100px 5% 110px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  width: 100%;
}

@media (max-width: 992px) {
  .vv-pillars-section {
    padding: 70px 4% 80px;
  }
}

@media (max-width: 768px) {
  .vv-pillars-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
}

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

.vv-pillar-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.vv-pillar-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 9, 224, 0.4);
  box-shadow: 0 20px 40px rgba(8, 9, 224, 0.12);
}

.vv-pillar-card.highlight-card {
  background: linear-gradient(135deg, rgba(8, 9, 224, 0.04), #FFFFFF);
  border: 1px solid rgba(8, 9, 224, 0.3);
}

.vv-pillar-icon-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  color: #0809e0;
  font-size: 1.8rem;
}

.vv-pillar-number {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #94A3B8;
}

.vv-pillar-tag {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  color: #0809e0;
  margin-bottom: 0.5rem;
}

.vv-pillar-heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.8rem;
}

.vv-pillar-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.vv-pillar-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.8rem;
}

.vv-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: #334155;
}

.vv-check-item i {
  color: #0809e0;
  margin-top: 0.15rem;
  font-size: 1rem;
}

.vv-quote-box {
  font-style: italic;
  font-size: 0.85rem;
  color: #475569;
  background: #F8FAFC;
  padding: 0.8rem 1rem;
  border-left: 3px solid #0809e0;
  border-radius: 0 12px 12px 0;
}

/* Stance Section - White Background */
.vv-stance-section {
  padding: 100px 5% 110px;
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  position: relative;
  overflow: hidden;
  width: 100%;
}

@media (max-width: 992px) {
  .vv-stance-section {
    padding: 70px 4% 80px;
  }
}

@media (max-width: 768px) {
  .vv-stance-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
}

.vv-stance-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3.5rem;
  align-items: center;
}

/* Left Column: Community Trust Charter & Terminal */
.vv-trust-charter-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.vv-trust-charter-card:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 9, 224, 0.35);
  box-shadow: none;
}

.vv-charter-top-bar {
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  padding: 0.9rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vv-terminal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.t-dot.red { background: #EF4444; }
.t-dot.yellow { background: #F59E0B; }
.t-dot.green { background: #10B981; }

.vv-charter-protocol-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.73rem;
  font-weight: 800;
  color: #0809e0;
  letter-spacing: 0.08em;
}

.vv-charter-status-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  color: #15803D;
  background: #DCFCE7;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
}

.vv-live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 8px #16A34A;
  animation: pulseDot 2s infinite;
}

.vv-charter-content {
  padding: 2.2rem 2rem;
  position: relative;
  overflow: hidden;
}

.vv-charter-watermark {
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 11rem;
  color: rgba(8, 9, 224, 0.03);
  pointer-events: none;
}

.vv-charter-badge-seal {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.18);
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  margin-bottom: 1.2rem;
  letter-spacing: 0.06em;
}

.vv-charter-quote {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.4;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.vv-charter-subtext {
  font-size: 0.9rem;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 1.8rem;
}

.vv-charter-rules {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.vv-crule-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  transition: all 0.25s ease;
}

.vv-crule-item:hover {
  background: #EEF2FF;
  border-color: rgba(8, 9, 224, 0.25);
  transform: translateX(4px);
}

.vv-crule-code {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  color: #0809e0;
  background: #FFFFFF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.18rem 0.5rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.vv-crule-text {
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

.vv-charter-footer {
  padding-top: 1.4rem;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.vv-sign-col {
  display: flex;
  flex-direction: column;
}

.vv-sign-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.08em;
}

.vv-sign-name {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
}

.vv-sign-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  letter-spacing: 0.04em;
}

/* Stance Right Content */
.vv-stance-content {
  display: flex;
  flex-direction: column;
}

.vv-stance-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0.8rem 0 1.2rem;
}

.vv-stance-title .highlight-blue,
.highlight-blue {
  color: #0809e0 !important;
}

.vv-stance-desc {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 2.2rem;
}

/* Connected Stepper Timeline (Clean & Non-Card) */
.vv-stepper-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0.5rem;
}

.vv-stepper-item {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  position: relative;
}

.vv-stepper-node-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
}

.vv-stepper-node {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #FFFFFF;
  border: 2px solid #E2E8F0;
  color: #0809e0;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2;
}

.vv-stepper-item:hover .vv-stepper-node {
  background: #0809e0;
  border-color: #0809e0;
  color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(8, 9, 224, 0.28);
}

.vv-stepper-line {
  position: absolute;
  top: 44px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: #E2E8F0;
  z-index: 1;
  transition: background 0.3s ease;
}

.vv-stepper-item:hover .vv-stepper-line {
  background: #0809e0;
}

.vv-stepper-body {
  flex: 1;
  padding-bottom: 2.2rem;
  padding-top: 0.2rem;
  transition: transform 0.3s ease;
}

.vv-stepper-item:last-child .vv-stepper-body {
  padding-bottom: 0.5rem;
}

.vv-stepper-item:hover .vv-stepper-body {
  transform: translateX(4px);
}

.vv-stepper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.vv-stepper-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}

.vv-stepper-item:hover .vv-stepper-title {
  color: #0809e0;
}

.vv-stepper-badge {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.vv-stepper-desc {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .vv-stance-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .vv-stance-content {
    order: 1;
  }

  .vv-trust-charter-card {
    order: 2;
  }
}

@media (max-width: 640px) {
  .vv-stats-bento-card {
    padding: 2rem 1.4rem;
    border-radius: 24px;
  }

  .vv-stats-list {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }

  .vv-stance-title {
    font-size: 1.85rem;
  }
}

/* Gallery Section - Gray Background */
.vv-gallery-section {
  padding: 100px 5% 110px;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  width: 100%;
}

@media (max-width: 992px) {
  .vv-gallery-section {
    padding: 70px 4% 80px;
  }
}

@media (max-width: 768px) {
  .vv-gallery-section {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
}

.vv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.vv-gallery-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 260px;
  cursor: pointer;
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: block;
  text-decoration: none;
  background: #0F172A;
}

.vv-gallery-item.lg-item {
  grid-column: span 2;
}

.vv-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.vv-gallery-item:hover img {
  transform: scale(1.06);
}

.vv-gallery-caption {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85), transparent 65%);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #FFFFFF;
}

.vv-gallery-caption span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vv-gallery-caption h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-top: 0.3rem;
  color: #FFFFFF;
}

/* CTA Section */
.vv-cta-section {
  padding: 5rem 0 6rem;
  background: #FFFFFF;
}

.vv-main-content {
  background: #FFFFFF;
}

.vv-cta-box {
  background: #0809e0;
  border-radius: 36px;
  padding: 4.5rem 2.5rem;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
  box-shadow: 0 25px 60px rgba(8, 9, 224, 0.3);
  color: #FFFFFF;
}

.vv-cta-badge {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.vv-cta-heading {
  font-size: 2.4rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.vv-cta-heading span,
.vv-cta-heading .cta-highlight-blue {
  color: #93C5FD;
}

.mobile-cta-break {
  display: none;
}

@media (max-width: 768px) {
  .mobile-cta-break {
    display: block;
  }
}

.vv-cta-desc {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  max-width: 600px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

.vv-cta-btns {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-vv-primary {
  padding: 1rem 2.2rem;
  background: #FFFFFF;
  color: #0809e0;
  font-weight: 800;
  border-radius: 99px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.btn-vv-primary:hover {
  transform: translateY(-3px);
  background: #F8FAFC;
  color: #0506a8;
}

.btn-vv-secondary {
  padding: 1rem 2.2rem;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 700;
  border-radius: 99px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.btn-vv-secondary:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.28);
  border-color: #FFFFFF;
}

/* ==========================================================================
   TABLET VIEW ONLY (769px - 1024px): ALIGN MENTORS, GALLERY, EVENTS & NEWS SECTIONS WITH FOOTER
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Padding kiri-kanan 5% di level section luar (sama seperti footer) */
  .speakers-page-section,
  .mentors-page-section,
  .members-page-section,
  .gallery-page-main-section,
  .gallery-detail-hero,
  .gallery-detail-main,
  .gallery-related-section,
  .events-main-content,
  .event-detail-full-hero,
  .event-detail-main,
  .newsroom-page-section,
  .news-detail-full-hero,
  .news-detail-main,
  .vv-cta-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Hilangkan double padding pada nested section di dalam events-main-content */
  .events-main-content .events-grid-section,
  .events-main-content .events-main-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .speakers-page-section .vv-container,
  .mentors-page-section .vv-container,
  .members-page-section .vv-container,
  .gallery-page-main-section .vv-container,
  .gallery-detail-hero .vv-container,
  .gallery-detail-main .vv-container,
  .gallery-related-section .vv-container,
  .events-main-content .vv-container,
  .event-detail-full-hero .vv-container,
  .event-detail-main .vv-container,
  .newsroom-page-section .vv-container,
  .news-detail-full-hero .vv-container,
  .news-detail-main .vv-container,
  .vv-cta-section .vv-container {
    max-width: 1240px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Pastikan elemen grid, controls bar, dan banner mengambil lebar 100% container */
  .events-controls-bar,
  .events-page-grid,
  .event-detail-grid-layout,
  .news-filter-wrapper,
  .news-page-grid,
  .news-newsletter-banner,
  .news-detail-grid-layout,
  .gallery-detail-layout-grid,
  .related-events-section,
  .related-events-grid,
  #relatedGalleryGrid {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Related posts di bawah artikel news & event detail 2 kolom rapi di tablet view */
  .related-events-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }

  /* CTA banner di page mentors, gallery & events agar lebarnya memenuhi 100% container (1240px) sejajar dengan footer */
  .vv-cta-box {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   LAPTOP VIEW (1025px - 1440px, incl. 1366x768): ALIGN MENTORS PAGE MARGINS WITH FOOTER
   ========================================================================== */
@media (min-width: 1025px) and (max-width: 1440px) {
  .speakers-page-section,
  .mentors-page-section,
  .members-page-section {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .speakers-page-section .vv-container,
  .mentors-page-section .vv-container,
  .members-page-section .vv-container {
    max-width: 1240px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  .speakers-roster-grid {
    gap: 1.25rem !important;
  }
}

.btn-vv-pillars-cta .mobile-btn-text {
  display: none;
}

.btn-vv-pillars-cta .desktop-btn-text {
  display: inline;
}

/* Vibe Values - Interactive Pillars Showcase CTA Button Mobile Responsiveness */
@media (max-width: 768px) {
  .btn-vv-pillars-cta {
    padding: 0.75rem 1.4rem !important;
    font-size: 0.85rem !important;
    max-width: 90% !important;
    width: auto !important;
    text-align: center !important;
    line-height: 1.3 !important;
    gap: 0.5rem !important;
  }

  .btn-vv-pillars-cta .desktop-btn-text {
    display: none !important;
  }

  .btn-vv-pillars-cta .mobile-btn-text {
    display: inline !important;
  }
}

/* Dedicated Pillars Bento Grid & Comparison Matrix */
.bento-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

/* Interactive Sticky Tab Showcase / Pillar Switcher */
.pillar-tab-showcase {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.pillar-tabs-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  background: #F8FAFC;
  padding: 0.6rem;
  border-radius: 24px;
  border: 1px solid #E2E8F0;
}

.pillar-nav-btn {
  background: transparent;
  border: none;
  border-radius: 18px;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.pillar-nav-btn:hover {
  background: rgba(255, 255, 255, 0.8);
}

.pillar-nav-btn.active {
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(8, 9, 224, 0.2);
}

.p-nav-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #EEF2FF;
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.pillar-nav-btn.active .p-nav-icon {
  background: #0809e0;
  color: #FFFFFF;
  box-shadow: none;
}

.p-nav-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.p-nav-num {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}

.pillar-nav-btn.active .p-nav-num {
  color: #0809e0;
}

.p-nav-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

/* Master Stage Panel (Split 50:50) */
.pillar-stage-wrapper {
  position: relative;
  min-height: 460px;
}

.pillar-stage-panel {
  display: none;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid rgba(226, 232, 240, 0.9);
  border-radius: 32px;
  padding: 2.2rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05);
}

.pillar-stage-panel.active {
  display: grid;
  animation: pillarPanelFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pillarPanelFade {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Responsive adjustment for Pillar Switcher & Stage */
@media (max-width: 992px) {
  .pillar-tabs-nav {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 0.5rem;
  }

  .pillar-nav-btn {
    padding: 0.85rem 1.1rem;
  }

  .pillar-stage-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1.6rem;
    border-radius: 24px;
  }

  .pillar-stage-media {
    height: 300px;
  }

  .side-shift-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .shift-center-node {
    margin: 0.5rem 0;
  }

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

  .blueprint-card-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .blueprint-card-media {
    order: -1;
    height: 200px;
  }

  .blueprint-rules-list {
    grid-template-columns: 1fr;
  }

  .pillars-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pillar-tabs-nav {
    border-radius: 18px;
  }

  .p-nav-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .p-nav-title {
    font-size: 1rem;
  }

  .p-nav-num {
    font-size: 0.62rem;
  }

  .pillar-content-title {
    font-size: 1.7rem;
  }

  .pillar-stage-media {
    height: 220px;
  }
}

.pillar-stage-media {
  position: relative;
  height: 420px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.pillar-stage-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.pillar-stage-panel:hover .pillar-stage-img {
  transform: scale(1.03);
}

.pillar-stage-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF;
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pillar-stage-badge i {
  color: #38BDF8;
}

.pillar-stage-content {
  display: flex;
  flex-direction: column;
}

.pillar-meta-tag {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.meta-tag-num {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}

.meta-tag-sub {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.08em;
}

.pillar-content-title {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.8rem;
  letter-spacing: -0.02em;
}

.pillar-content-lead {
  font-size: 0.96rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.pillar-content-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
}

.pillar-bullet-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.p-bullet-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #EEF2FF;
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.p-bullet-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.p-bullet-info strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
}

.p-bullet-info span {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.6;
}

.pillar-quote-callout {
  background: #F8FAFC;
  border-left: 3px solid #0809e0;
  padding: 0.85rem 1.2rem;
  border-radius: 0 14px 14px 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pillar-quote-callout i {
  color: #0809e0;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.pillar-quote-callout p {
  font-style: italic;
  font-size: 0.88rem;
  font-weight: 500;
  color: #334155;
  margin: 0;
  line-height: 1.5;
}

/* Side-by-Side Mindset Transformation Stage */
.side-shift-container {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  margin-top: 2.5rem;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.side-shift-row {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  align-items: stretch;
  position: relative;
  padding-bottom: 2.8rem;
  border-bottom: 2px dashed #CBD5E1;
}

.side-shift-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.shift-side-rejected {
  background: #FFF1F2;
  border: 1.5px solid #FECDD3;
  border-radius: 22px;
  padding: 1.8rem 2rem;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.shift-side-rejected:hover {
  transform: translateX(-4px);
  border-color: #E11D48;
}

.shift-side-badge-red {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #E11D48;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #FFE4E6;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  margin-bottom: 0.8rem;
  width: fit-content;
}

.shift-side-title-red {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #9F1239;
  margin-bottom: 0.5rem;
}

.shift-side-desc-red {
  font-size: 0.9rem;
  color: #881337;
  line-height: 1.6;
  margin: 0;
}

/* Center Connector Node */
.shift-center-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
}

.shift-center-node::before {
  display: none;
}

.shift-node-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #0809e0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: none;
  border: 3.5px solid #FFFFFF;
  outline: 1.5px solid rgba(203, 213, 225, 0.8);
}

.shift-node-badge i {
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  text-align: center;
}

.shift-node-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.2);
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
  margin-top: 0.4rem;
  position: relative;
  z-index: 2;
  letter-spacing: 0.05em;
}

.shift-side-code {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 22px;
  padding: 1.8rem 2rem;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  outline: none;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.shift-side-code:hover {
  transform: translateX(4px);
  border: 1.5px solid #0809e0;
  box-shadow: none;
}

.shift-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.shift-side-badge-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0809e0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #EEF2FF;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  margin-bottom: 0;
}

.shift-side-tag-code {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: #0809e0;
  background: rgba(8, 9, 224, 0.08);
  border: 1px solid rgba(8, 9, 224, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  letter-spacing: 0.02em;
  margin-left: auto;
}

.shift-side-title-blue {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.5rem;
}

.shift-side-desc-blue {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.6;
  font-weight: 600;
  margin: 0;
}

@media (max-width: 992px) {
  .side-shift-row {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
  }

  .shift-center-node {
    margin: 0.4rem auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .shift-node-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .shift-node-badge i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    transform: rotate(90deg) !important;
    transform-origin: 50% 50% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .shift-side-rejected,
  .shift-side-code {
    padding: 1.5rem !important;
    border-radius: 18px !important;
  }

  .shift-side-rejected:hover,
  .shift-side-code:hover {
    transform: none !important;
  }
}

/* Clean Editorial Matrix Accordion */
.editorial-matrix-accordion {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-top: 3rem;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.matrix-acc-item {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.matrix-acc-item:hover {
  border-color: #CBD5E1;
}

.matrix-acc-item.active {
  border-color: #0809e0;
  box-shadow: 0 16px 36px rgba(8, 9, 224, 0.08);
}

.matrix-acc-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.6rem 2rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease;
}

.matrix-acc-header:hover {
  background: #F8FAFC;
}

.matrix-acc-item.active .matrix-acc-header {
  background: #FBFBFF;
  border-bottom: 1px solid #EEF2FF;
}

.matrix-acc-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 150px;
}

.matrix-acc-num {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0809e0;
  letter-spacing: 0.08em;
}

.matrix-acc-tag {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  color: #64748B;
  background: #F1F5F9;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.05em;
  display: inline-block;
  width: fit-content;
}

.matrix-acc-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.matrix-acc-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.matrix-acc-item.active .matrix-acc-title {
  color: #0809e0;
}

.matrix-acc-subtitle {
  font-size: 0.88rem;
  color: #64748B;
  font-weight: 500;
}

.matrix-acc-action {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.matrix-acc-status {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  color: #0809e0;
  background: #EEF2FF;
  padding: 0.3rem 0.75rem;
  border-radius: 99px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.matrix-acc-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #F1F5F9;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.matrix-acc-item.active .matrix-acc-icon {
  background: #0809e0;
  color: #FFFFFF;
  transform: rotate(45deg);
}

/* Accordion Expandable Body */
.matrix-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.matrix-acc-item.active .matrix-acc-body {
  max-height: 1800px;
}

.matrix-acc-content-wrap {
  padding: 2.2rem 2.4rem;
  background: #FFFFFF;
}

.matrix-acc-header-row {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2.5rem;
  margin-bottom: 1.1rem;
}

.matrix-acc-header-spacer {
  display: block;
}

.matrix-rules-heading {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  color: #94A3B8;
  letter-spacing: 0.1em;
  margin: 0;
  line-height: 1;
}

.matrix-acc-content-grid {
  padding: 0;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.matrix-acc-visual {
  position: relative;
  width: 100%;
  align-self: stretch;
}

.matrix-visual-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  background: #0F172A;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.matrix-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.matrix-acc-item:hover .matrix-visual-img {
  transform: scale(1.04);
}

.matrix-acc-rules {
  width: 100%;
}

.matrix-rules-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
}

.matrix-rule-row {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: all 0.2s ease;
}

.matrix-rule-row:hover {
  background: #EEF2FF;
  border-color: rgba(8, 9, 224, 0.25);
  transform: translateY(-2px);
}

.matrix-rule-idx {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  color: #0809e0;
  background: #FFFFFF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.matrix-rule-desc {
  flex: 1;
  min-width: 0;
}

.matrix-rule-desc strong {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 800;
  color: #0F172A;
  display: block;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.matrix-rule-desc p,
.matrix-rule-desc span {
  font-size: 0.88rem;
  color: #64748B !important;
  line-height: 1.55;
  margin: 0;
  display: block;
}

@media (max-width: 1040px) {
  .matrix-acc-content-wrap {
    padding: 1.8rem;
  }

  .matrix-acc-header-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .matrix-acc-header-spacer {
    display: none;
  }

  .matrix-acc-content-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .matrix-acc-visual {
    height: 250px;
  }

  .matrix-visual-card {
    position: relative;
    inset: auto;
    height: 250px;
  }
}

@media (max-width: 900px) {
  .matrix-acc-header {
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
  }

  .matrix-acc-meta {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    min-width: auto;
  }

  .matrix-acc-content-wrap {
    padding: 1.4rem;
  }

  .matrix-rules-list {
    grid-template-columns: 1fr;
  }

  .matrix-acc-visual {
    height: 210px;
  }

  .matrix-visual-card {
    position: relative;
    inset: auto;
    height: 210px;
  }

  .matrix-acc-status {
    display: none;
  }
}

/* Pillars Action 3-Column Feature Cards */
.pillars-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

.action-feature-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}

.action-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(8, 9, 224, 0.12);
}

.action-card-badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
}

.action-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.action-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #0809e0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 0;
  box-shadow: none;
}

.action-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0;
  line-height: 1.3;
}

.action-card-desc {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
}

/* Technical Blueprint Cards */
.blueprint-card-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2.5rem;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.blueprint-item-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 2.2rem;
  color: #0F172A;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

.blueprint-item-card:hover {
  border-color: #0809e0;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(8, 9, 224, 0.1);
}

.blueprint-card-inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2rem;
  align-items: center;
}

.blueprint-card-content {
  display: flex;
  flex-direction: column;
}

.blueprint-card-media {
  width: 100%;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: #F1F5F9;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.blueprint-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.blueprint-item-card:hover .blueprint-media-img {
  transform: scale(1.05);
}

.blueprint-top-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}

.blueprint-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.blueprint-tag-pill i {
  font-size: 1rem;
  color: #0809e0;
}

.blueprint-protocol-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #0809e0;
  letter-spacing: -0.01em;
}

.blueprint-heading-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.blueprint-body-desc {
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.blueprint-rules-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.blueprint-rule-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.81rem;
  font-weight: 500;
  line-height: 1.35;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.blueprint-rule-item i {
  color: #0809e0;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ==========================================================================
   GUEST & EVENT SPEAKERS SECTION (mentors.html)
   ========================================================================== */
.speakers-page-section {
  padding: 5.5rem 0;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0;
}

/* --------------------------------------------------------------------------
   SPEAKERS SECTION - FILTER TABS & PORTRAIT CARDS
   -------------------------------------------------------------------------- */
.speakers-filter-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2.2rem;
  margin-bottom: 2.5rem;
}

.speakers-filter-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  padding: 0.4rem 0.5rem;
  border-radius: 99px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  flex-wrap: wrap;
  justify-content: center;
}

.speaker-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border-radius: 99px;
  border: none;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 0.84rem;
  font-weight: 700;
  color: #64748B;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.speaker-filter-tab i {
  font-size: 1rem;
}

.speaker-tab-count {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 99px;
  background: #F1F5F9;
  color: #64748B;
  transition: all 0.25s ease;
}

.speaker-filter-tab:hover {
  color: #0809e0;
  background: #EEF2FF;
}

.speaker-filter-tab.active {
  background: #0809e0;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.25);
}

.speaker-filter-tab.active .speaker-tab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
}

.speakers-page-section .vv-container {
  max-width: 1380px;
  padding: 0 0.5rem;
}

.speakers-roster-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

/* ==========================================================================
   PORTRAIT SPEAKER CARD (MENTOR STYLE, COMPACT RATIO)
   ========================================================================== */
.portrait-speaker-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
}

.portrait-speaker-card:hover {
  transform: translateY(-8px);
  border-color: rgba(8, 9, 224, 0.35);
  box-shadow: 0 20px 45px rgba(8, 9, 224, 0.12), 0 4px 12px rgba(8, 9, 224, 0.04);
}

/* 1. Portrait Photo Cover Header (Mentor Style - 290px Matching SuperMentors) */
.portrait-speaker-card .speaker-portrait-cover {
  position: relative;
  width: 100%;
  height: 290px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #EEF2FF 0%, #E0E7FF 60%, #F1F5F9 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-speaker-card .speaker-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portrait-speaker-card:hover .speaker-cover-img {
  transform: scale(1.06);
}

.portrait-speaker-card .speaker-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.45) 0%, transparent 60%);
  pointer-events: none;
}

.portrait-speaker-card .speaker-event-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.speaker-event-badge.summit {
  background: rgba(255, 255, 255, 0.95);
  color: #0809e0;
  border: 1px solid rgba(8, 9, 224, 0.25);
}

.speaker-event-badge.workshop {
  background: rgba(255, 255, 255, 0.95);
  color: #DB2777;
  border: 1px solid rgba(219, 39, 119, 0.25);
}

.speaker-event-badge.office-hours {
  background: rgba(255, 255, 255, 0.95);
  color: #16A34A;
  border: 1px solid rgba(22, 163, 74, 0.25);
}

.speaker-event-badge.hackathon {
  background: rgba(255, 255, 255, 0.95);
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.25);
}

/* 2. Speaker Card Body */
.portrait-speaker-card .speaker-card-body {
  padding: 1.4rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.speaker-identity-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.1rem;
}

.speaker-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.portrait-speaker-card .speaker-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  letter-spacing: -0.01em;
}

.speaker-verified-icon {
  color: #0809e0;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.speaker-role {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0809e0;
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}

.portrait-speaker-card .speaker-org {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748B;
}

.portrait-speaker-card .speaker-org i {
  color: #0809e0;
  font-size: 0.85rem;
}

/* 3. Speaker Card Details & Trigger */
.speaker-card-bio {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.speaker-sessions-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  margin-bottom: 0.9rem;
  align-self: flex-start;
}

.speaker-sessions-count-pill i {
  font-size: 0.85rem;
}

.speaker-detail-trigger-btn {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.2);
  color: #0809e0;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: auto;
  margin-bottom: 0.85rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.speaker-detail-trigger-btn:hover {
  background: #0809e0;
  color: #FFFFFF;
  border-color: #0809e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.25);
}

/* 4. Minimalist Social Footer (Pill Buttons) */
.speaker-card-footer {
  display: flex;
  align-items: center;
  padding-top: 0.85rem;
  border-top: 1px dashed #E2E8F0;
}

.speaker-social-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}

.speaker-social-links.icon-only-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
}

.speaker-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex: 1;
}

.speaker-social-btn i {
  font-size: 1rem;
}

.speaker-social-btn.icon-only {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.speaker-social-btn.icon-only i {
  font-size: 1.15rem;
}

/* Primary Blue LinkedIn Pill */
.speaker-social-btn.linkedin-btn {
  background: #0066CC;
  color: #FFFFFF;
  border: 1px solid #0066CC;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.2);
}

.speaker-social-btn.linkedin-btn:hover {
  background: #0052A3;
  border-color: #0052A3;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3);
}

/* Outlined White/Light Instagram Pill */
.speaker-social-btn.instagram-btn {
  background: #FFFFFF;
  color: #0F172A;
  border: 1.5px solid #CBD5E1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}

.speaker-social-btn.instagram-btn i {
  color: #0F172A;
}

.speaker-social-btn.instagram-btn:hover {
  background: #F8FAFC;
  border-color: #E1306C;
  color: #E1306C;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(225, 48, 108, 0.18);
}

.speaker-social-btn.instagram-btn:hover i {
  color: #E1306C;
}

/* Load More Button Wrapper */
.speakers-action-bar {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

.speakers-load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #FFFFFF;
  border: 1.5px solid #0809e0;
  color: #0809e0;
  padding: 0.9rem 2rem;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(8, 9, 224, 0.08);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.speakers-load-more-btn i {
  font-size: 1.1rem;
  transition: transform 0.3s ease;
}

.speakers-load-more-btn:hover {
  background: #0809e0;
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(8, 9, 224, 0.22);
}

.speakers-load-more-btn.expanded i {
  transform: rotate(180deg);
}

/* Extra speaker hide/show animation */
.speaker-profile-card.extra-speaker {
  display: none;
  opacity: 0;
}

.speaker-profile-card.extra-speaker.is-visible {
  display: flex;
  opacity: 1;
}

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

@media (min-width: 769px) and (max-width: 1024px) {
  .speakers-roster-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.35rem !important;
  }
}

@media (max-width: 768px) {
  .mentors-grid-container {
    overflow: visible !important;
  }

  .home-speakers-block {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .speakers-roster-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 1.4rem !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    gap: 1.2rem !important;
    padding: 0.5rem 1.4rem 1.4rem 1.4rem !important;
    margin: 0 -1.4rem !important;
    width: calc(100% + 2.8rem) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .speakers-roster-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .speakers-roster-grid .portrait-speaker-card {
    flex: 0 0 285px !important;
    width: 285px !important;
    max-width: 285px !important;
    min-width: 285px !important;
    scroll-snap-align: start !important;
    scroll-margin-left: 1.4rem !important;
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  .speakers-roster-grid .portrait-speaker-card .speaker-portrait-cover {
    height: 290px !important;
  }

  .speakers-roster-grid .portrait-speaker-card:first-child {
    margin-left: 0 !important;
  }

  .speaker-profile-card.extra-speaker {
    display: flex !important;
    opacity: 1 !important;
  }

  .speakers-action-bar,
  .speakers-filter-wrap {
    display: none !important;
  }

  /* Mobile Guest/Speaker Cards Refinements (Compact Pills fitting side-by-side & Compact Explore Profile) */
  .speaker-social-btn span {
    display: inline !important;
  }

  .speaker-social-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0.42rem 0.5rem !important;
    border-radius: 99px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
    font-size: 0.74rem !important;
    white-space: nowrap !important;
  }

  .speaker-social-btn i {
    font-size: 0.88rem !important;
    flex-shrink: 0 !important;
  }

  .speaker-social-links {
    display: flex !important;
    width: 100% !important;
    gap: 0.45rem !important;
  }

  .speakers-roster-grid .speaker-card-bio {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    min-height: 4.8rem !important;
    margin-bottom: 1.1rem !important;
  }

  .speaker-detail-trigger-btn {
    font-size: 0 !important; /* Hide original text node while keeping icon */
    padding: 0.65rem 0.9rem !important;
    gap: 0.45rem !important;
  }

  .speaker-detail-trigger-btn i {
    font-size: 0.88rem !important;
  }

  .speaker-detail-trigger-btn::after {
    content: "Explore Profile & Sessions";
    font-size: 0.8rem;
    font-family: var(--font-heading);
    font-weight: 700;
  }
}

@media (max-width: 992px) {
  .vv-about-grid,
  .vv-pillars-grid,
  .vv-stance-grid,
  .vv-gallery-grid,
  .bento-pillars-grid,
  .pillar-comparison-grid,
  .pillars-action-grid,
  .blueprint-card-inner,
  .blueprint-rules-list {
    grid-template-columns: 1fr !important;
  }

  .vv-gallery-item.lg-item {
    grid-column: auto !important;
  }

  /* What Is Gen-Ztrive Feature Deck Card Mobile Alignment */
  .vv-deck-card {
    align-items: flex-start !important;
    padding: 1.25rem !important;
    gap: 0.95rem !important;
    border-radius: 18px !important;
  }

  .vv-deck-icon-wrap {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    font-size: 1.25rem !important;
    margin-top: 0.15rem !important;
    border-radius: 12px !important;
  }

  .vv-deck-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
    margin-bottom: 0.45rem !important;
  }

  .vv-deck-header h4 {
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
  }

  .vv-deck-pill {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.45rem !important;
    border-radius: 99px !important;
    display: inline-block !important;
    align-self: flex-start !important;
  }

  .vv-deck-body p {
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
  }
}

/* ==========================================================================
   REAL MOMENTS GALLERY LIGHTBOX MODAL (vibe-values.html)
   ========================================================================== */
.vv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateZ(0);
  will-change: opacity, visibility;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

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

.vv-modal-backdrop {
  position: absolute;
  inset: 0;
}

.vv-modal-container {
  position: relative;
  z-index: 2;
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(1150px, 94vw);
  max-height: 92vh;
  margin: 0 auto;
  background: #0B1120;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

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

.vv-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.vv-modal-close:hover {
  background: #0809e0;
  color: #FFFFFF;
  transform: rotate(90deg) scale(1.08);
}

.vv-modal-media {
  width: 100%;
  height: auto;
  max-height: 76vh;
  background: #060B14;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.vv-modal-media img {
  width: auto;
  height: auto;
  max-width: min(1150px, 94vw);
  max-height: 76vh;
  object-fit: contain;
  display: block;
}

.vv-modal-info {
  padding: 1.35rem 2rem;
  background: #0B1120;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-sizing: border-box;
}

.vv-modal-category {
  font-size: 0.82rem;
  font-weight: 700;
  color: #818CF8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.35rem;
}

.vv-modal-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .vv-modal-overlay {
    padding: 0.75rem;
  }

  .vv-modal-container {
    max-width: 100%;
    border-radius: 18px;
  }
  
  .vv-modal-media img {
    max-height: 65vh;
  }
  
  .vv-modal-info {
    padding: 1rem 1.25rem;
  }
  
  .vv-modal-title {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   DEDICATED GALLERY PAGE (gallery.html)
   ========================================================================== */
body.page-gallery {
  background-color: #FFFFFF;
  color: #0F172A;
}

body.page-gallery .vv-main-content {
  background: #FFFFFF;
}

.gallery-page-main-section {
  padding: 2.5rem 0 5.5rem;
  background: #FFFFFF;
}

.gallery-controls-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.6rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
}

.gallery-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gallery-control-label {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748B;
  white-space: nowrap;
}

.custom-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  min-width: 210px;
  padding: 0.68rem 1.2rem;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.custom-select-btn:hover {
  border-color: #0809e0;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.12);
}

.gallery-dropdown-wrap.open .custom-select-btn {
  border-color: #0809e0;
  box-shadow: 0 0 0 3px rgba(8, 9, 224, 0.15);
}

.select-selected-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  color: #0F172A;
}

.select-selected-content i {
  font-size: 1.1rem;
  color: #0809e0;
}

.selected-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.5rem;
  border-radius: 99px;
  background: #EEF2FF;
  color: #0809e0;
  font-size: 0.75rem;
  font-weight: 800;
}

.select-caret-icon {
  font-size: 1rem;
  color: #94A3B8;
  transition: transform 0.3s ease;
}

.gallery-dropdown-wrap.open .select-caret-icon {
  transform: rotate(180deg);
  color: #0809e0;
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.gallery-dropdown-wrap.open .custom-select-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-option:hover {
  background: #F1F5F9;
  color: #0809e0;
}

.select-option.active {
  background: #EEF2FF;
  color: #0809e0;
}

.option-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.option-left i {
  font-size: 1.05rem;
  color: #64748B;
  transition: color 0.2s ease;
}

.select-option:hover .option-left i,
.select-option.active .option-left i {
  color: #0809e0;
}

.option-badge {
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  background: #E2E8F0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
}

.select-option.active .option-badge {
  background: #0809e0;
  color: #FFFFFF;
}

@media (max-width: 768px) {
  .gallery-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .gallery-dropdown-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .custom-select-btn {
    width: 100%;
  }
  .custom-select-options {
    width: 100%;
  }
}

.gallery-masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.gallery-card-item {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  border: 1.5px solid #F1F5F9;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.3s ease;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  cursor: pointer;
}

.gallery-card-media-wrap {
  position: relative;
  width: 100%;
  height: 230px;
  overflow: hidden;
  border-radius: 20px;
  background: #F1F5F9;
  cursor: pointer;
}

.gallery-card-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.gallery-card-badge-top {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 3;
}

.gallery-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.85rem;
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gallery-tag-pill.summit {
  background: rgba(8, 9, 224, 0.9);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(8, 9, 224, 0.3);
}

.gallery-tag-pill.workshop {
  background: rgba(219, 39, 119, 0.9);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(219, 39, 119, 0.3);
}

.gallery-tag-pill.mentorship {
  background: rgba(22, 163, 74, 0.9);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

.gallery-tag-pill.hangout {
  background: rgba(217, 119, 6, 0.9);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.3);
}

.gallery-card-zoom-hint {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #0809e0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card-info-box {
  padding: 1.2rem 0.5rem 0.5rem;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.gallery-card-cat-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.gallery-card-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem 0;
  line-height: 1.35;
  transition: color 0.25s ease;
  width: 100%;
}

.gallery-card-location {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748B;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.gallery-card-location i {
  color: #0809e0;
  font-size: 0.88rem;
}

.gallery-card-desc {
  font-size: 0.83rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 1.25rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.85rem;
}

.gallery-card-footer-row {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 0.95rem;
  border-top: 1.5px dashed #CBD5E1;
}

.gallery-meta-triplet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
}

.triplet-item {
  display: flex;
  flex-direction: column;
}

.triplet-val {
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.1;
  white-space: nowrap;
}

.triplet-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: #94A3B8;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.gallery-card-item:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 9, 224, 0.25);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

.gallery-card-item:hover .gallery-card-media-wrap img {
  transform: scale(1.06);
}

.gallery-card-item:hover .gallery-card-zoom-hint {
  opacity: 1;
  transform: scale(1);
}

.gallery-card-item:hover .gallery-card-title,
.gallery-card-item:hover .gallery-title-link {
  color: #0809e0 !important;
}

.gallery-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.gallery-title-link:hover {
  color: #0809e0 !important;
}

@media (max-width: 1024px) {
  .gallery-masonry-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.4rem !important;
  }
}

@media (max-width: 640px) {
  .gallery-masonry-grid {
    grid-template-columns: 1fr !important;
    gap: 1.4rem !important;
  }

  .gallery-card-item {
    border-radius: 20px !important;
    padding: 0.8rem !important;
  }

  .gallery-card-media-wrap {
    height: 200px !important;
    border-radius: 16px !important;
  }

  .gallery-card-desc {
    min-height: auto !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    margin-bottom: 0.9rem !important;
  }

  .gallery-meta-triplet {
    gap: 0.35rem !important;
  }

  .triplet-val {
    font-size: 0.78rem !important;
  }

  .triplet-lbl {
    font-size: 0.65rem !important;
  }
}

/* ==========================================================================
   GALLERY DETAIL PAGE STYLES
   ========================================================================== */
.page-gallery-detail {
  background: #FFFFFF;
  color: #0F172A;
}

.gallery-detail-hero {
  position: relative;
  min-height: 380px;
  padding: 8.5rem 0 4.5rem;
  overflow: hidden;
  background: #07090E;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

/* Background Image & Contrast Overlay */
.gallery-hero-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.gallery-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.35) contrast(1.1);
}

.gallery-hero-dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.75) 0%, rgba(7, 9, 14, 0.6) 50%, rgba(7, 9, 14, 0.88) 100%);
  pointer-events: none;
}

.gallery-hero-content-relative {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.gallery-detail-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: #94A3B8;
  margin-bottom: 1.2rem;
}

.gallery-detail-breadcrumb a {
  color: #CBD5E1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.gallery-detail-breadcrumb a:hover {
  color: #FFFFFF;
}

.gallery-detail-breadcrumb .bc-sep {
  color: #64748B;
  font-size: 0.8rem;
}

.gallery-detail-breadcrumb .bc-active {
  color: #93C5FD;
  font-weight: 600;
  max-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-detail-hero-banner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.85rem;
}

.gallery-detail-hero-tag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.gallery-detail-hero-tag-wrap .gallery-tag-pill {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 1.15rem;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.gallery-detail-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.16;
  margin: 0.2rem 0;
  letter-spacing: -0.025em;
  text-align: left;
}

.gallery-detail-hero-stats-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0.35rem;
}

.hero-bottom-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-bottom-stat-item i {
  color: #60A5FA;
  font-size: 1.2rem;
}

.hero-bottom-stat-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: #60A5FA;
  opacity: 0.8;
}

.hero-sub-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-sub-item i {
  color: #60A5FA;
  font-size: 1.05rem;
}

.hero-sub-dot {
  color: rgba(255, 255, 255, 0.3);
}

/* Gallery Detail Main Grid */
.gallery-detail-main {
  padding: 3.5rem 0 2rem;
  background: #FFFFFF;
}

.gallery-detail-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 3.5rem;
  align-items: start;
  width: 100%;
}

.gallery-detail-content-col {
  min-width: 0;
  width: 100%;
}

.gallery-detail-sidebar-col {
  min-width: 0;
  width: 100%;
}

.gallery-detail-featured-media {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 440px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
  border: 1.5px solid #F1F5F9;
  margin-bottom: 2.8rem;
  background: #F1F5F9;
}

.gallery-detail-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-media-overlay-badge {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 99px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.featured-media-overlay-badge i {
  color: #38BDF8;
}

/* Sub Photo Mosaic Grid */
.gallery-detail-sub-grid-section {
  margin-bottom: 3.2rem;
}

.sub-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.sub-grid-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mosaic-slider-arrows {
  display: none;
  align-items: center;
  gap: 0.45rem;
}

.mosaic-slider-arrows.active {
  display: flex;
}

.mosaic-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.mosaic-nav-btn:hover:not(:disabled) {
  background: #0809e0;
  border-color: #0809e0;
  color: #FFFFFF;
  transform: scale(1.06);
}

.mosaic-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.sub-grid-title,
.story-section-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.sub-grid-title i,
.story-section-title i {
  color: #0809e0;
}

.sub-grid-hint {
  font-size: 0.78rem;
  color: #94A3B8;
  font-weight: 600;
}

.mosaic-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.gallery-detail-photos-mosaic {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  padding-bottom: 0.4rem;
}

.gallery-detail-photos-mosaic::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.mosaic-photo-item {
  position: relative;
  flex: 0 0 calc((100% - 2rem) / 3);
  width: calc((100% - 2rem) / 3);
  height: 180px;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #E2E8F0;
  background: #F1F5F9;
  scroll-snap-align: start;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.mosaic-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mosaic-photo-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
}

.mosaic-photo-item:hover img {
  transform: scale(1.08);
}

.mosaic-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 224, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.25rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mosaic-photo-item:hover .mosaic-photo-overlay {
  opacity: 1;
}

/* Editorial Story & Takeaways */
.gallery-detail-story-section,
.gallery-detail-takeaways-section {
  margin-bottom: 3rem;
  padding-top: 1rem;
}

.gallery-detail-hosts-section {
  margin-bottom: 0;
  padding-top: 1rem;
}

.story-body-text {
  margin-top: 1.2rem;
  font-size: 1rem;
  line-height: 1.8;
  color: #475569;
}

.takeaways-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.takeaways-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
  background: #F8FAFC;
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}

.takeaways-list li i {
  color: #0809e0;
  font-size: 1.1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* Hosts Grid */
.gallery-hosts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}

.gallery-host-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.35rem;
  border-radius: 18px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  transition: all 0.25s ease;
}

.gallery-host-card:hover {
  background: #FFFFFF;
  border-color: #CBD5E1;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}

.host-avatar-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.host-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.host-info-wrap h4 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
  line-height: 1.3;
}

.host-info-wrap span {
  font-size: 0.8rem;
  color: #64748B;
  font-weight: 500;
  line-height: 1.4;
}

/* Sidebar Styling */
.gallery-sidebar-sticky-wrap {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sidebar-facts-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.facts-card-header {
  background: #0809e0;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: center;
}

.facts-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.facts-card-title i {
  color: #60A5FA;
  font-size: 1.15rem;
}

.facts-card-body {
  padding: 1.3rem 1.4rem;
  background: #FFFFFF;
}

.fact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-bottom: 1px dashed #F1F5F9;
  font-size: 0.86rem;
}

.fact-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.fact-label-group {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #64748B;
  font-weight: 600;
}

.fact-label-group i {
  color: #0809e0;
  font-size: 0.95rem;
}

.fact-value {
  font-weight: 700;
  color: #0F172A;
  text-align: right;
}

.fact-value.highlight-vibe {
  color: #0809e0;
}

.sidebar-share-card {
  background: #F8FAFC;
  border: 1px solid #F1F5F9;
  border-radius: 20px;
  padding: 1.3rem;
}

.share-card-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.share-card-title i {
  color: #0809e0;
}

.share-card-desc {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0 0 1rem 0;
}

.share-btn-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-share-action {
  flex: 1;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #1E293B;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-share-action:hover {
  background: #0809e0;
  border-color: #0809e0;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(8, 9, 224, 0.2);
}

.btn-share-action:active {
  transform: scale(0.98);
}

.btn-share-social {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-share-social:hover {
  transform: translateY(-2px);
}

.btn-share-social.instagram:hover {
  background: #E1306C;
  border-color: #E1306C;
  color: #FFFFFF;
}

.btn-share-social.linkedin:hover {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #FFFFFF;
}

.sidebar-cta-card {
  position: relative;
  background: #0809e0;
  border-radius: 20px;
  padding: 1.5rem;
  color: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(8, 9, 224, 0.22);
}

.cta-card-sparkle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.2);
}

.cta-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.4rem 0;
}

.cta-card-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0 0 1.2rem 0;
}

.btn-sidebar-event {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.65rem 1rem;
  background: #FFFFFF;
  color: #0809e0;
  font-weight: 800;
  font-size: 0.82rem;
  border-radius: 99px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-sidebar-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* Related Gallery Moments */
.gallery-related-section {
  margin-top: 1.5rem;
  padding-top: 3.5rem;
  padding-bottom: 6rem;
  border-top: 1px solid #F1F5F9;
  background: #FFFFFF;
}

.related-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.related-section-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.related-section-title i {
  color: #0809e0;
}

.related-section-sub {
  font-size: 0.88rem;
  color: #64748B;
  margin: 0;
}

.btn-view-all-gallery {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #0809e0;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.btn-view-all-gallery:hover {
  gap: 0.65rem;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .gallery-detail-layout-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .gallery-sidebar-sticky-wrap {
    position: static;
  }
  .gallery-detail-featured-media {
    height: 360px;
  }
}

@media (max-width: 640px) {
  .gallery-detail-featured-media {
    height: 240px;
    border-radius: 18px;
  }
  .gallery-detail-photos-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
  .mosaic-photo-item {
    height: 120px;
  }
  .gallery-detail-hero-title {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   DEDICATED PAGE: MENTORS & MEMBERS (mentors.html)
   ========================================================================== */
.mentors-page-section {
  padding: 5rem 0 3rem;
}

/* Mentor Filter Tabs */
.mentor-filter-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.mentor-filter-btn,
.event-filter-btn {
  padding: 0.65rem 1.4rem;
  border-radius: 99px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #64748B;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mentor-filter-btn:hover,
.event-filter-btn:hover {
  background: #EEF2FF;
  color: #0809e0;
  border-color: rgba(8, 9, 224, 0.3);
  transform: translateY(-2px);
}

.mentor-filter-btn.active,
.event-filter-btn.active {
  background: #0809e0;
  color: #FFFFFF;
  border-color: #0809e0;
  box-shadow: 0 8px 20px rgba(8, 9, 224, 0.25);
}

.mentors-page-section .vv-container {
  max-width: 1380px;
  padding: 0 0.5rem;
}

.quad-mentors-row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  margin-top: 2.8rem;
}

/* Vertical Portrait Cards Base */
.mentor-portrait-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
  position: relative;
  overflow: hidden;
}

.mentor-card-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(8, 9, 224, 0.06), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.mentor-portrait-card:hover .mentor-card-spotlight {
  opacity: 1;
}

/* Center SuperMentor Cards */
.mentor-portrait-card.super-portrait-card {
  background: linear-gradient(180deg, rgba(8, 9, 224, 0.04) 0%, #FFFFFF 45%);
  border: 1.5px solid rgba(8, 9, 224, 0.4);
  box-shadow: 0 16px 36px rgba(8, 9, 224, 0.08);
  z-index: 3;
}

.mentor-portrait-card.super-portrait-card:hover {
  transform: translateY(-6px);
  border-color: #0809e0;
  box-shadow: 0 24px 50px rgba(8, 9, 224, 0.16);
}

/* Side Standard Mentor Cards */
.mentor-portrait-card.standard-portrait-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
}

.mentor-portrait-card.standard-portrait-card:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 9, 224, 0.35);
  box-shadow: 0 20px 40px rgba(8, 9, 224, 0.1);
}

/* Cover Image Box - 290px Equal Height Across All 4 Cards */
.mentor-portrait-cover {
  position: relative;
  width: 100%;
  height: 290px;
  overflow: hidden;
  background: #F8FAFC;
}

.mentor-portrait-cover.compact-cover {
  height: 290px;
}

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

.mentor-portrait-card:hover .mentor-cover-img {
  transform: scale(1.08);
}

.mentor-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.4) 0%, transparent 60%);
}

.mentor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.mentor-badge.super {
  background: #0809e0 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

.mentor-badge.standard {
  background: #EEF2FF !important;
  color: #0809e0 !important;
  border: 1px solid rgba(8, 9, 224, 0.2);
}

.mentor-portrait-body .mentor-badge {
  align-self: flex-start;
  margin-top: 0;
  margin-bottom: 0.55rem;
}

/* Card Body - Super Mentor (Large) vs Standard (Compact) */
.mentor-portrait-body {
  padding: 1.5rem 1.1rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mentor-portrait-body.compact-body {
  padding: 1.4rem 0.95rem 1.4rem;
}

.mentor-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
  flex-wrap: wrap;
}

.mentor-portrait-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.compact-body .mentor-portrait-name {
  font-size: 1.16rem;
}

.mentor-verified-icon {
  color: #0809e0;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.mentor-portrait-role {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0809e0;
  margin-bottom: 0.75rem;
}

.mentor-portrait-bio {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  flex: 1;
}

.mentor-tag-pills {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
}

.m-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0809e0;
  background: rgba(8, 9, 224, 0.06);
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
}

.mentor-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px dashed #E2E8F0;
}

.mentor-card-actions.side-by-side {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed #E2E8F0;
}

.mentor-social-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.mentor-social-btn.linkedin {
  background: #0A66C2;
  color: #FFFFFF;
  border: 1px solid #0A66C2;
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.2);
}

.mentor-social-btn.linkedin:hover {
  background: #004182;
  border-color: #004182;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.35);
}

.mentor-social-btn.instagram {
  background: #F8FAFC;
  color: #0F172A;
  border: 1px solid #CBD5E1;
}

.mentor-social-btn.instagram:hover {
  background: #E1306C;
  color: #FFFFFF;
  border-color: #E1306C;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(225, 48, 108, 0.35);
}

.mentor-action-btn.primary {
  padding: 0.55rem 1.1rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 4px 12px rgba(8, 9, 224, 0.2);
  transition: all 0.25s ease;
}

.mentor-action-btn.primary.sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
}

.mentor-action-btn.primary:hover {
  background: #3B82F6;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(59, 130, 246, 0.3);
}

.mentor-profile-socials {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mentor-social-link {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.25s ease;
}

.mentor-social-link.sm {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.mentor-social-link:hover {
  background: #0809e0;
  color: #FFFFFF;
  border-color: #0809e0;
  transform: translateY(-2px);
}

/* Members Section Grid */
.members-page-section {
  padding: 4rem 0 6rem;
  background: #F8FAFC;
  border-top: 1px solid #E2E8F0;
}

.members-page-section .vv-container {
  max-width: 1380px;
  padding: 0 0.5rem;
}

.members-page-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.member-card {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.03);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.member-card:hover {
  transform: translateY(-5px);
  border-color: rgba(8, 9, 224, 0.3);
  box-shadow: 0 15px 35px rgba(8, 9, 224, 0.08);
}

.member-avatar {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  margin-bottom: 1.15rem;
  flex-shrink: 0;
  background: #F8FAFC;
  position: relative;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.member-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.25rem;
}

.member-age {
  font-size: 0.88rem;
  font-weight: 500;
  color: #64748B;
  margin-left: 0.25rem;
}

.member-role {
  font-size: 0.75rem;
  font-weight: 700;
  color: #3B82F6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.member-job {
  font-size: 0.88rem;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 0.75rem;
}

.member-desc {
  font-size: 0.85rem;
  color: #64748B;
  line-height: 1.5;
  margin-bottom: 1.2rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.member-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px dashed #E2E8F0;
}

.member-footer .mentor-social-btn {
  flex: 1;
  padding: 0.45rem 0.4rem;
  font-size: 0.74rem;
  border-radius: 99px;
}

.member-footer .mentor-social-btn.instagram-only {
  flex: 0 1 140px;
}

@media (max-width: 1100px) {
  .quad-mentors-row-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .members-page-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 850px) {
  .members-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .quad-mentors-row-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-left: 1.4rem !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    gap: 1.2rem !important;
    padding: 0.5rem 1.4rem 1.4rem 1.4rem !important;
    margin: 0 -1.4rem !important;
    width: calc(100% + 2.8rem) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    position: relative !important;
    z-index: 5 !important;
  }

  .quad-mentors-row-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .quad-mentors-row-grid .mentor-portrait-card {
    flex: 0 0 285px !important;
    width: 285px !important;
    max-width: 285px !important;
    min-width: 285px !important;
    scroll-snap-align: start !important;
    scroll-margin-left: 1.4rem !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    transform: none !important;
  }

  .quad-mentors-row-grid .mentor-portrait-card .mentor-portrait-cover {
    height: 290px !important;
  }

  .members-page-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1.1rem !important;
    padding: 0.5rem 0.5rem 1rem !important;
    margin: 0 -0.5rem !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .members-page-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .members-page-grid .member-card {
    flex: 0 0 250px !important;
    width: 250px !important;
    max-width: 250px !important;
    scroll-snap-align: start !important;
  }
}

/* Mentor Detail Trigger Button on Cards */
.mentor-detail-trigger-btn {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  color: #0F172A;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: auto;
  margin-bottom: 0.8rem;
  transition: all 0.25s ease;
}

.mentor-detail-trigger-btn:hover {
  background: #0809e0;
  color: #FFFFFF;
  border-color: #0809e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.25);
}

.mentor-detail-trigger-btn.super-btn {
  background: rgba(8, 9, 224, 0.08);
  border-color: rgba(8, 9, 224, 0.25);
  color: #0809e0;
}

/* Mentor Profile Detail Modal */
.mentor-detail-modal-card {
  background: #FFFFFF;
  border-radius: 28px;
  width: 100%;
  max-width: 940px;
  padding: 2.4rem;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.8);
  animation: modalScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mentor-modal-grid {
  display: grid;
  grid-template-columns: 295px 1fr;
  gap: 2.2rem;
}

.mentor-modal-avatar-box {
  width: 100%;
  height: 310px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  background: #F8FAFC;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.mentor-modal-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.mentor-modal-overlay-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.35) 0%, transparent 60%);
}

.mentor-modal-right {
  display: flex;
  flex-direction: column;
}

.mentor-modal-right .mentor-badge {
  align-self: flex-start;
  margin-bottom: 0.55rem;
}

.mentor-modal-availability-pill {
  margin-top: 1rem;
  padding: 0.55rem 0.9rem;
  border-radius: 12px;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-size: 0.76rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
  display: inline-block;
  flex-shrink: 0;
}

.modal-left-expertise-block {
  margin-top: 1.1rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1.1rem 1rem;
}

.modal-left-expertise-block .modal-block-title {
  justify-content: center;
  text-align: center;
}

.modal-left-expertise-block .modal-expertise-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem 0.35rem;
}

.modal-mentor-name {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.2rem;
  line-height: 1.2;
}

.modal-mentor-role {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0809e0;
  margin-bottom: 0.8rem;
}

.modal-mentor-bio {
  font-size: 0.92rem;
  color: #475569;
  line-height: 1.65;
  margin-bottom: 0.8rem;
}

/* Advisor Quote Box */
.modal-mentor-quote {
  background: #F8FAFC;
  border-left: 3px solid #0809e0;
  border-radius: 0 14px 14px 0;
  padding: 0.8rem 1rem;
  margin: 0.8rem 0 1rem;
  font-size: 0.86rem;
  font-style: italic;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}

.modal-mentor-quote i {
  color: #0809e0;
  font-size: 1.1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

/* Proven Track Record Stats Bar */
.modal-track-record-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.modal-stat-card {
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  border-radius: 12px;
  padding: 0.6rem 0.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.modal-stat-val {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0809e0;
  line-height: 1.1;
}

.modal-stat-lbl {
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 0.2rem;
  line-height: 1.2;
}

.modal-section-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 1.2rem 0;
}

.modal-block-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0F172A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.modal-block-title i {
  color: #0809e0;
  font-size: 1.1rem;
}

.modal-expertise-tags {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.modal-left-expertise-block .modal-expertise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.35rem;
}

.topic-badge-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0809e0;
  background: rgba(8, 9, 224, 0.07);
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
}

.modal-left-expertise-block .topic-badge-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.32rem 0.65rem;
  border-radius: 99px;
  white-space: nowrap;
  display: inline-block;
}

.modal-perks-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-perks-list li {
  font-size: 0.88rem;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}

.modal-perks-list li i {
  color: #10B981;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.modal-action-footer {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px dashed #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.modal-connect-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0F172A;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-socials-row.side-by-side {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.modal-socials-row .modal-social-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  text-decoration: none;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.modal-socials-row .modal-social-icon-btn.linkedin {
  background: #0A66C2;
  color: #FFFFFF;
  border: 1px solid #0A66C2;
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.25);
}

.modal-socials-row .modal-social-icon-btn.linkedin:hover {
  background: #004182;
  border-color: #004182;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(10, 102, 194, 0.4);
}

.modal-socials-row .modal-social-icon-btn.instagram {
  background: #F8FAFC;
  color: #0F172A;
  border: 1px solid #CBD5E1;
}

.modal-socials-row .modal-social-icon-btn.instagram:hover {
  background: #E1306C;
  color: #FFFFFF;
  border-color: #E1306C;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(225, 48, 108, 0.35);
}

.modal-sessions-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.modal-session-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: all 0.25s ease;
  text-decoration: none !important;
  color: inherit !important;
  touch-action: pan-y !important;
  -webkit-user-drag: none;
  user-select: none;
}

.modal-session-card.clickable-session-card {
  cursor: pointer;
  position: relative;
  touch-action: pan-y !important;
}

.modal-session-card.clickable-session-card:hover {
  background: #EEF2FF;
  border-color: #0809e0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(8, 9, 224, 0.08);
}

.modal-session-link-icon {
  font-size: 1.1rem;
  color: #94A3B8;
  transition: all 0.2s ease;
}

.modal-session-card.clickable-session-card:hover .modal-session-link-icon {
  color: #0809e0;
  transform: translate(2px, -2px);
}

.modal-session-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.modal-session-head-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.modal-session-stage-label {
  font-size: 0.74rem;
  font-weight: 600;
  color: #64748B;
  display: inline-flex;
  align-items: center;
}

.modal-session-stage-label::before {
  content: "•";
  margin-right: 0.5rem;
  color: #CBD5E1;
  font-size: 0.9rem;
}

.modal-session-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.7rem;
  border-radius: 99px;
  background: #EEF2FF;
  color: #0809e0;
  border: 1px solid rgba(8, 9, 224, 0.2);
  display: inline-flex;
  align-items: center;
}

.modal-session-tag.keynote {
  background: #EEF2FF;
  color: #0809e0;
  border: 1px solid rgba(8, 9, 224, 0.2);
}

.modal-session-tag.panel {
  background: #DCFCE7;
  color: #16A34A;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.modal-session-tag.workshop {
  background: #FCE7F3;
  color: #DB2777;
  border: 1px solid rgba(219, 39, 119, 0.2);
}

.modal-session-tag.office-hour {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.modal-session-tag.hackathon {
  background: #F3E8FF;
  color: #7E22CE;
  border: 1px solid rgba(126, 34, 206, 0.2);
}

.modal-session-topic {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.4;
}

.modal-session-card.clickable-session-card:hover .modal-session-topic {
  color: #0809e0;
}

.modal-session-desc {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 768px) {
  .vv-modal-overlay {
    padding: 0.8rem !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .mentor-detail-modal-card,
  .event-detail-modal-card {
    position: relative !important;
    padding: 1.2rem 1.1rem 1.6rem !important;
    max-height: 85vh !important;
    height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    border-radius: 24px !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .mentor-detail-modal-card .vv-modal-close,
  .event-detail-modal-card .vv-modal-close {
    position: sticky !important;
    top: 0px !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: -38px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 1.15rem !important;
    z-index: 1000 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  .mentor-detail-modal-card::-webkit-scrollbar,
  .event-detail-modal-card::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .mentor-modal-grid {
    grid-template-columns: 1fr;
  }

  .mentor-modal-avatar-box {
    height: 320px;
  }

  .modal-sessions-list,
  .modal-session-card,
  .modal-session-card * {
    touch-action: pan-y !important;
  }

  .modal-session-card {
    -webkit-tap-highlight-color: transparent !important;
  }

  .modal-action-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-book-cta-btn {
    justify-content: center;
  }
}

/* ==========================================================================
   DEDICATED PAGE: EVENTS & INTERACTIVE SPRINTS (events.html)
   ========================================================================== */
.events-hero-section {
  position: relative;
  min-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9.5rem 1.5rem 7rem;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
}

.events-hero-content {
  margin-bottom: 3rem;
}

/* Add generous breathing room between hero and events content */
.events-main-content,
.events-hero-section + .vv-main-content {
  padding-top: 5.5rem;
}

/* ==========================================================================
   MASTER VIP SUMMIT PASS (FEATURED EVENT TICKETING BANNER)
   ========================================================================== */
.master-vip-ticket {
  display: flex;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(8, 9, 224, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: visible;
  margin-top: 2rem;
  margin-bottom: 4.5rem;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.master-vip-ticket:hover {
  transform: translateY(-4px);
  border-color: rgba(8, 9, 224, 0.4);
  box-shadow: 0 25px 55px rgba(8, 9, 224, 0.14);
}

/* Left Main Ticket Content */
.master-ticket-main {
  flex: 1.45;
  padding: 2.2rem 2.5rem;
  display: flex;
  flex-direction: column;
}

.master-ticket-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.master-badge-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.master-badge-flag {
  background: #0809e0;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  box-shadow: 0 4px 12px rgba(8, 9, 224, 0.3);
}

.master-badge-id {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.06em;
  background: #F1F5F9;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
}

.master-featured-badge {
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  color: #B45309;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  letter-spacing: 0.05em;
  background: #FFFBEB;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.12);
}

.master-featured-badge i {
  color: #D97706;
  font-size: 0.9rem;
}

.master-live-status {
  font-size: 0.75rem;
  font-weight: 800;
  color: #059669;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.04em;
  background: #ECFDF5;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  border: 1px solid #A7F3D0;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #059669;
  border-radius: 50%;
  animation: pulseBeacon 1.8s infinite ease-in-out;
}

@keyframes pulseBeacon {
  0% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.6); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
  100% { transform: scale(0.9); opacity: 0.8; box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.master-date-pill {
  font-size: 0.84rem;
  font-weight: 800;
  color: #0809e0;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.master-ticket-title {
  font-family: var(--font-heading);
  font-size: 1.95rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin: 0 0 0.8rem;
}

.master-ticket-desc {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}

/* Master Countdown & Location Row */
.master-meta-countdown-row {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1rem 1.4rem;
  flex-wrap: wrap;
}

.master-countdown-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.countdown-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748B;
}

.countdown-timer-boxes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cd-box {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 0.3rem 0.55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.cd-val {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0809e0;
  line-height: 1.1;
}

.cd-unit {
  font-size: 0.55rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.05em;
}

.cd-divider {
  font-weight: 800;
  color: #94A3B8;
  font-size: 1rem;
}

.master-location-info {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: 1.5rem;
  border-left: 1px dashed #CBD5E1;
}

.master-loc-item {
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.master-loc-item i {
  color: #0809e0;
  font-size: 0.95rem;
}

/* Vertical Perforation Tear Line with Notches */
.master-ticket-perforation {
  position: relative;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 -10px;
  z-index: 5;
}

.master-perforation-line {
  height: 100%;
  width: 0;
  border-left: 2px dashed #CBD5E1;
}

.master-notch {
  position: absolute;
  width: 24px;
  height: 24px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 50%;
  z-index: 6;
}

.master-notch-top {
  top: -13px;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  transform: rotate(45deg);
  background: #FFFFFF;
}

.master-notch-bottom {
  bottom: -13px;
  border-bottom-color: transparent !important;
  border-right-color: transparent !important;
  transform: rotate(45deg);
  background: #FFFFFF;
}

/* Right Stub: Full-Bleed Visual Stage Section */
.master-ticket-stub.full-bleed-stub {
  flex: 1.15;
  position: relative;
  border-radius: 0 24px 24px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 380px;
  background: #0F172A;
}

.master-full-bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.master-vip-ticket:hover .master-full-bleed-img {
  transform: scale(1.05);
}

.master-full-bleed-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.2) 40%, rgba(15, 23, 42, 0.85) 100%);
  z-index: 2;
}

/* Top Chips */
.master-stub-top-chip {
  position: relative;
  z-index: 3;
  padding: 1.25rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.stage-tag {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #F8FAFC;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.seat-tag {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  color: #CBD5E1;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 0.35rem 0.75rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Floating Glassmorphism Footer Bar */
.master-glass-footer {
  position: relative;
  z-index: 3;
  margin: auto 1.2rem 1.2rem 1.2rem;
  padding: 0.9rem 1.2rem;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* Headliner Speaker Pill */
.master-headliner-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.headliner-avatar-wrap {
  position: relative;
  width: 38px;
  height: 38px;
}

.headliner-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.headliner-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.headliner-name {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1.1;
}

.headliner-name i {
  color: #38BDF8;
  font-size: 0.85rem;
}

.headliner-role {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.02em;
}

.master-claim-btn {
  padding: 0.85rem 1.6rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(8, 9, 224, 0.45);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.master-claim-btn:hover {
  background: #3B82F6;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.5);
}

@media (max-width: 992px) {
  .master-vip-ticket {
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
  }
  .master-ticket-perforation {
    display: none;
  }
  .master-ticket-main {
    padding: 1.6rem 1.4rem;
  }
  .master-ticket-topbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 1.1rem;
    gap: 0.5rem;
  }
  .master-badge-group {
    flex-shrink: 0;
  }
  .master-featured-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.3rem 0.75rem;
  }
  .master-ticket-title {
    font-size: 1.45rem;
    margin-bottom: 0.6rem;
  }
  .master-ticket-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 1.2rem;
  }
  .master-meta-countdown-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
  }
  .master-location-info {
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px dashed #CBD5E1;
  }
  .master-ticket-stub.full-bleed-stub {
    min-height: 300px;
    height: 300px;
    border-radius: 0 0 24px 24px;
    border-left: none;
    border-top: 1px solid #E2E8F0;
  }
  .master-glass-footer {
    margin: 0.9rem;
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  .master-claim-btn {
    padding: 0.65rem 1.2rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .master-glass-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }
  .master-claim-btn {
    justify-content: center;
    width: 100%;
  }
}

/* Events Grid Section */
.events-grid-section {
  padding-bottom: 5rem;
}

.events-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  margin-top: 2.8rem;
}

/* ==========================================================================
   NEO-BRUTALIST TICKET / BOARDING PASS EVENT CARD STYLES
   ========================================================================== */
.ticket-pass-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: visible;
}

.ticket-pass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(8, 9, 224, 0.4);
  box-shadow: 0 20px 45px rgba(8, 9, 224, 0.12);
}

.ticket-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  border-radius: 18px 18px 0 0;
}

.ticket-type-tag {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.08em;
}

.ticket-cover-wrap {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
  background: #0F172A;
}

.ticket-cover-wrap .event-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ticket-pass-card:hover .event-cover-img {
  transform: scale(1.06);
}

.ticket-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.6) 100%);
}

.ticket-pill {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Perforation Tear Line with Notches */
.ticket-perforation {
  position: relative;
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  margin-top: -1px;
}

.perforation-line {
  flex: 1;
  border-top: 2px dashed #CBD5E1;
  margin: 0 14px;
}

.perforation-notch {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.notch-left {
  left: -11px;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  transform: translateY(-50%) rotate(45deg);
  background: #FFFFFF;
}

.notch-right {
  right: -11px;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  transform: translateY(-50%) rotate(45deg);
  background: #FFFFFF;
}

/* Body Content */
.ticket-body-content {
  padding: 0.85rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ticket-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.ticket-category-meta-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}

.ticket-schedule-text-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 0;
}

.ticket-schedule-text-row i {
  font-size: 0.82rem;
  color: #64748B;
}

.event-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0809e0;
  margin: 0 0 0.5rem;
  line-height: 1.35;
}

.event-card-title a,
.event-title-link {
  color: #0809e0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.event-card-title a:hover,
.event-title-link:hover {
  color: #2563EB;
  opacity: 0.85;
}

.ticket-time-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ticket-access-badge {
  color: #0809e0;
}

.ticket-host-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.ticket-host-avatars-group {
  display: flex;
  align-items: center;
}

.ticket-host-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.ticket-host-avatar-fallback {
  background: #EEF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0809e0;
  font-size: 0.85rem;
}

.ticket-stub-footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px dashed #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Neo-Brutalist Ultra-Realistic Ticket Barcode */
.ticket-barcode-wrap {
  display: flex;
  align-items: center;
  opacity: 0.8;
}

.ticket-barcode-lines {
  width: 72px;
  height: 24px;
  background: repeating-linear-gradient(
    90deg,
    #0F172A 0px,
    #0F172A 1.5px,
    transparent 1.5px,
    transparent 3px,
    #0F172A 3px,
    #0F172A 5px,
    transparent 5px,
    transparent 6.5px,
    #0F172A 6.5px,
    #0F172A 7.5px,
    transparent 7.5px,
    transparent 9px,
    #0F172A 9px,
    #0F172A 12px,
    transparent 12px,
    transparent 13.5px,
    #0F172A 13.5px,
    #0F172A 15px,
    transparent 15px,
    transparent 17px
  );
  border-radius: 1px;
}

.event-category-pill {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.75rem;
  border-radius: 99px;
}

.event-category-pill.workshop {
  background: #EEF2FF;
  color: #0809e0;
}

.event-category-pill.summit {
  background: #EFF6FF;
  color: #2563EB;
}

.event-category-pill.office-hours {
  background: #ECFDF5;
  color: #059669;
}

.event-category-pill.hackathon {
  background: #FEF3C7;
  color: #D97706;
}

.event-category-pill.past {
  background: #F1F5F9;
  color: #64748B;
}

.event-status-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  text-transform: uppercase;
  display: inline-block;
  box-shadow: none !important;
  background: #059669;
  color: #FFFFFF;
}

.event-status-tag.free,
.event-status-tag.free-entry,
.event-status-tag.open,
.event-status-tag.rsvp-open {
  background: #059669 !important;
  color: #FFFFFF !important;
}

.event-status-tag.featured,
.event-status-tag.featured-event {
  background: #D97706 !important;
  color: #FFFFFF !important;
}

.event-status-tag.limited,
.event-status-tag.limited-seats {
  background: #DC2626 !important;
  color: #FFFFFF !important;
}

.event-status-tag.online {
  background: #0809e0 !important;
  color: #FFFFFF !important;
}

.event-status-tag.sold-out,
.event-status-tag.closed {
  background: #475569 !important;
  color: #FFFFFF !important;
}

.event-status-tag.past,
.event-status-tag.recorded,
.event-status-tag.finished,
.event-status-tag.ended {
  background: #64748B !important;
  color: #FFFFFF !important;
  border: 1px solid #475569 !important;
}

.event-day {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: #0809e0;
  line-height: 1;
}

.event-month {
  font-size: 0.85rem;
  font-weight: 800;
  color: #64748B;
  text-transform: uppercase;
}

.event-card-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.event-card-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 0.85rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 4.5em; /* 3 lines * 1.5 line-height */
  word-break: break-word;
}

.speaker-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748B;
}

.event-action-btn {
  background: transparent;
  border: none;
  color: #0809e0;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.event-action-btn:hover {
  transform: translateX(3px);
  color: #3B82F6;
}

/* Event Detail RSVP Modal (#eventDetailModal) */
.event-detail-modal-card {
  background: #FFFFFF;
  border-radius: 28px;
  width: 100%;
  max-width: 860px;
  padding: 2.4rem;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.8);
  animation: modalScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.event-modal-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.event-modal-title {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.event-modal-meta-bar {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.2rem;
}

.modal-meta-item {
  font-size: 0.88rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.modal-meta-item i {
  color: #0809e0;
}

.event-modal-description {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.65;
}

.event-agenda-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-agenda-list li {
  font-size: 0.9rem;
  color: #334155;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
}

.event-agenda-list li i {
  color: #10B981;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.event-hosts-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.host-mini-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 0.6rem 1rem;
}

.host-mini-card img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.host-info-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0F172A;
}

.host-info-role {
  font-size: 0.75rem;
  color: #64748B;
}

.event-rsvp-info {
  display: flex;
  flex-direction: column;
}

.event-seats-tag {
  font-size: 0.78rem;
  color: #10B981;
  font-weight: 700;
}

.event-primary-rsvp-btn {
  padding: 0.8rem 1.6rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 6px 18px rgba(8, 9, 224, 0.3);
  transition: all 0.25s ease;
}

.event-primary-rsvp-btn:hover {
  background: #3B82F6;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(59, 130, 246, 0.35);
}

@media (max-width: 1024px) {
  .featured-event-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .events-page-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 768px) {
  .events-hero-section {
    margin-bottom: 1.2rem !important;
    min-height: auto !important;
    padding: 6.5rem 1.2rem 3.5rem !important;
  }

  .gallery-page-main-section {
    padding: 1rem 0 4rem !important;
  }
}

/* ==========================================================================
   DEDICATED PAGE: NEWSROOM & STORIES (news.html)
   ========================================================================== */
.newsroom-page-section {
  padding: 4.5rem 0 3rem;
}

.newsroom-headline-block {
  margin-bottom: 3.5rem;
}

/* 1. EDITORIAL MAGAZINE COVER BANNER (Compact & Elegant) */
.magazine-featured-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
}

.magazine-featured-card:hover {
  transform: translateY(-5px);
  border-color: rgba(8, 9, 224, 0.35);
  box-shadow: 0 20px 45px rgba(8, 9, 224, 0.1), 0 4px 12px rgba(8, 9, 224, 0.03);
}

/* Compact Cinematic Cover (280px) */
.magazine-cover-media {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #0F172A;
}

.magazine-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.magazine-featured-card:hover .magazine-cover-img {
  transform: scale(1.04);
}

.magazine-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.05) 50%, rgba(15, 23, 42, 0.6) 100%);
  pointer-events: none;
}

/* Floating Glass Badges */
.magazine-floating-meta {
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  z-index: 5;
  flex-wrap: wrap;
}

.magazine-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.35);
  text-transform: uppercase;
}

.magazine-tag-glass {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.92);
  color: #0F172A;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
}

.magazine-tag-glass i {
  color: #0809e0;
  font-size: 0.85rem;
}

/* Article Body - Compact Padding & Proportions */
.magazine-article-body {
  padding: 1.8rem 2.2rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.magazine-meta-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.magazine-meta-row i {
  color: #0809e0;
  font-size: 0.9rem;
}

.magazine-bullet-divider {
  color: #CBD5E1;
}

.magazine-headline-title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin: 0 0 0.85rem;
  letter-spacing: -0.015em;
  transition: color 0.25s ease;
}

.magazine-featured-card:hover .magazine-headline-title {
  color: #0809e0;
}

.magazine-lead-paragraph {
  font-size: 0.95rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 0 1.5rem;
  font-weight: 450;
}

/* Author Signature & Read CTA Bar */
.magazine-signature-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed #E2E8F0;
  flex-wrap: wrap;
}

.magazine-author-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.magazine-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.18);
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.magazine-author-info {
  display: flex;
  flex-direction: column;
}

.magazine-author-info .author-name {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0F172A;
}

.magazine-author-info .author-role {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748B;
}

.magazine-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #0809e0;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  padding: 0.65rem 1.4rem;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.25);
  transition: all 0.25s ease;
}

.magazine-read-btn:hover {
  background: #0607b3;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(8, 9, 224, 0.32);
  gap: 0.7rem;
}

@media (max-width: 768px) {
  .magazine-cover-media {
    height: 200px;
  }
  
  .magazine-article-body {
    padding: 1.4rem 1.1rem 1.1rem;
  }
  
  .magazine-floating-meta {
    top: 0.85rem;
    left: 0.85rem;
    right: 0.85rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

/* News Category Filter & Sort Bar (Dual Dropdown Controls) */
.news-filter-wrapper.news-dual-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.8rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #E2E8F0;
  width: 100%;
}

.news-controls-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.news-controls-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.news-controls-title .mobile-text {
  display: none;
}

.news-controls-title .desktop-text {
  display: inline;
}

.news-controls-title i {
  color: #0809e0;
  font-size: 1.3rem;
}

.news-total-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  background: #EEF2FF;
  color: #0809e0;
  border: 1px solid rgba(8, 9, 224, 0.2);
}

.news-controls-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.news-dropdown-item {
  display: flex;
  align-items: center;
}

.news-sort-select-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 99px;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.news-sort-select-box:hover,
.news-sort-select-box:focus-within {
  border-color: #0809e0;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.15);
}

.news-sort-select-box .sort-icon {
  color: #0809e0;
  font-size: 1rem;
  margin-right: 0.5rem;
  pointer-events: none;
}

.news-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 700;
  color: #0F172A;
  cursor: pointer;
  padding-right: 1.4rem;
}

.news-sort-select-box .caret-icon {
  position: absolute;
  right: 1rem;
  color: #64748B;
  font-size: 0.85rem;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.news-sort-select-box:focus-within .caret-icon {
  transform: rotate(180deg);
  color: #0809e0;
}

@media (max-width: 1024px) {
  .news-filter-wrapper.news-dual-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
  }

  .news-controls-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
  }

  .news-controls-title {
    font-size: 1.05rem !important;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    white-space: nowrap;
  }

  .news-controls-title .desktop-text {
    display: none !important;
  }

  .news-controls-title .mobile-text {
    display: inline !important;
  }

  .news-controls-title i {
    font-size: 1.15rem !important;
    flex-shrink: 0;
  }

  .news-total-badge {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.25rem 0.65rem;
  }
  
  .news-controls-group {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .news-dropdown-item,
  .news-sort-select-box {
    width: 100%;
  }

  .news-sort-select {
    width: 100%;
  }
}

/* News Page Grid (3 Columns) */
.news-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4.5rem;
}

.news-page-grid .news-card-item {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.news-page-grid .news-card-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-page-grid .news-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.4;
  margin: 0.8rem 0 0.6rem;
  transition: color 0.25s ease;
}

.news-page-grid .news-card-item:hover .news-card-title {
  color: #0809e0;
}

.news-page-grid .news-card-excerpt {
  font-size: 0.92rem;
  color: #64748B;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

/* Press & Media Inquiry Banner (Light Theme) */
.news-newsletter-banner {
  background: radial-gradient(circle at 50% 0%, #EEF2FF 0%, #F8FAFC 70%, #FFFFFF 100%);
  border: 1.5px solid #E2E8F0;
  border-radius: 28px;
  padding: 3.8rem 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
}

.news-newsletter-banner::before {
  content: '';
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 250px;
  background: radial-gradient(ellipse at center, rgba(8, 9, 224, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.news-newsletter-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

.newsletter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.25);
  padding: 0.35rem 0.85rem;
  border-radius: 99px;
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
}

.newsletter-title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.3;
  margin-bottom: 0.8rem;
  letter-spacing: -0.01em;
}

.newsletter-desc {
  font-size: 1rem;
  color: #64748B;
  line-height: 1.65;
  margin-bottom: 2rem;
}

.newsletter-action-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.newsletter-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #0809e0;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  padding: 0.85rem 1.8rem;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(8, 9, 224, 0.28);
  transition: all 0.3s ease;
}

.newsletter-btn-primary:hover {
  background: #0607b3;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(8, 9, 224, 0.35);
}

.newsletter-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.85rem 1.8rem;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
}

.newsletter-btn-secondary i {
  color: #16A34A;
  font-size: 1.15rem;
}

.newsletter-btn-secondary:hover {
  background: #F0FDF4;
  border-color: #22C55E;
  color: #15803D;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.15);
}

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

@media (max-width: 640px) {
  .news-page-grid {
    grid-template-columns: 1fr;
  }
  
  .news-newsletter-banner {
    padding: 2.5rem 1.5rem;
  }
}

/* ==========================================================================
   DEDICATED PAGE: EVENT DETAIL (event-detail.html - LIGHT THEME)
   ========================================================================== */
.page-event-detail {
  background: #FFFFFF !important;
  color: #0F172A !important;
  padding-top: 80px;
}

body.page-event-detail {
  background-color: #FFFFFF !important;
  color: var(--text-main) !important;
}

.page-event-detail .ambient-glow-1,
.page-event-detail .ambient-glow-2 {
  display: none !important;
}

.page-event-detail .navbar:not(.scrolled) .nav-link {
  color: #FFFFFF !important;
}

.page-event-detail .navbar:not(.scrolled) .nav-link::after {
  background: #FFFFFF !important;
}

.page-event-detail .navbar:not(.scrolled) .nav-link:hover,
.page-event-detail .navbar:not(.scrolled) .nav-link.active {
  color: #FFFFFF !important;
}

.page-event-detail .mobile-toggle {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  background: #0809e0 !important;
}

/* Hero & Breadcrumb Area */
/* ==========================================================================
   DEDICATED EVENT DETAIL HERO: FULL CINEMATIC BACKGROUND IMAGE (DARK THEME HEADER)
   ========================================================================== */
.event-detail-full-hero {
  position: relative;
  min-height: 380px;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
  background: #07090E;
  display: flex;
  align-items: center;
}

/* Background Image & Contrast Overlay */
.event-hero-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.event-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.65) saturate(1.1);
}

.event-hero-dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.75) 0%, rgba(7, 9, 14, 0.45) 50%, rgba(7, 9, 14, 0.95) 100%);
  pointer-events: none;
}

.event-hero-content-relative {
  position: relative;
  z-index: 3;
  width: 100%;
}

/* Breadcrumbs (White on Dark) */
.event-detail-full-hero .detail-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.event-detail-full-hero .detail-breadcrumbs a {
  color: #CBD5E1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}

.event-detail-full-hero .detail-breadcrumbs a:hover {
  color: #FFFFFF;
}

.event-detail-full-hero .crumb-separator {
  color: #64748B;
}

.event-detail-full-hero .crumb-current {
  color: #60A5FA;
  font-weight: 700;
}

/* Top Badges & Glass Share Button */
.detail-header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.detail-badge-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.detail-cat-badge {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.4);
}

.detail-cat-badge.workshop {
  background: #BE185D;
  color: #FFFFFF;
}

.detail-cat-badge.summit {
  background: #0809e0;
  color: #FFFFFF;
}

.detail-cat-badge.hackathon {
  background: #D97706;
  color: #FFFFFF;
}

.detail-cat-badge.office-hours {
  background: #15803D;
  color: #FFFFFF;
}

.detail-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.95rem;
  border-radius: 99px;
  background: rgba(16, 185, 129, 0.2);
  color: #34D399;
  border: 1px solid rgba(52, 211, 153, 0.4);
  backdrop-filter: blur(10px);
}

.detail-status-pill.limited {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
  border-color: rgba(248, 113, 113, 0.4);
}

.detail-share-btn-glass {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 99px;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
}

.detail-share-btn-glass:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

/* Event Title in Hero */
.detail-event-title-hero {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
  margin: 0.5rem 0 0;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  max-width: 900px;
}

/* Key Info Floating Glass Bar */
.detail-key-info-bar-hero {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 1.2rem 2.2rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  flex-wrap: wrap;
}

.detail-key-info-bar-hero .key-info-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.detail-key-info-bar-hero .key-info-item i {
  color: #FFFFFF;
  font-size: 1.5rem;
  background: #0809e0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(8, 9, 224, 0.4);
}

.detail-key-info-bar-hero .key-info-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.detail-key-info-bar-hero .key-info-val {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #FFFFFF;
}

.detail-key-info-bar-hero .key-info-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.15);
}

.key-info-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.key-info-item i {
  color: #0809e0;
  font-size: 1.6rem;
  background: #EEF2FF;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.key-info-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.15rem;
}

.key-info-val {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
}

.key-info-divider {
  width: 1px;
  height: 38px;
  background: #E2E8F0;
}

/* 2-Column Grid Layout */
.event-detail-grid-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.8rem;
  margin-top: 3.5rem;
  align-items: flex-start;
}

.event-detail-content-col {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

/* Event Detail Card Box (Integrated Top Cover Media) */
.detail-card-box {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 24px;
  padding: 2.2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
}

.detail-card-box-with-cover {
  padding: 0 !important;
  overflow: hidden;
}

.detail-card-cover-media {
  position: relative;
  width: 100%;
  height: 420px;
  background: #0F172A;
  overflow: hidden;
}

.detail-card-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.detail-card-box-with-cover:hover .detail-card-cover-img {
  transform: scale(1.04);
}

.detail-card-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.5) 100%);
  pointer-events: none;
}

.detail-card-cover-badge {
  position: absolute;
  bottom: 1.2rem;
  left: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0F172A;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.detail-card-cover-badge i {
  color: #0809e0;
}

.detail-card-inner-body {
  padding: 2.2rem;
}

@media (max-width: 768px) {
  .detail-card-cover-media {
    height: 260px;
  }
  
  .detail-card-inner-body {
    padding: 1.5rem;
  }
}

.detail-box-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #E2E8F0;
}

.detail-box-head .box-icon {
  color: #0809e0;
  font-size: 1.4rem;
}

.detail-box-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.detail-box-desc {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.detail-box-desc p {
  margin: 0 0 1rem 0;
}

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

.detail-takeaways-wrapper {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1.5px dashed #CBD5E1;
}

.detail-sub-head {
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: none;
}

.detail-sub-head .box-icon {
  color: #10B981;
}

.detail-sub-head .detail-box-title {
  font-size: 1.15rem;
}

.detail-highlights-pills {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.highlight-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: #0F172A;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  padding: 0.7rem 1.1rem;
  border-radius: 12px;
}

.highlight-pill i {
  color: #16A34A;
  font-size: 1.1rem;
}

/* Itinerary Timeline */
.detail-agenda-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
}

.timeline-step-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  position: relative;
  padding-bottom: 1.25rem;
}

.timeline-step-item:last-child {
  padding-bottom: 0;
}

/* Vertical line segment extending from current dot to next dot */
.timeline-step-item:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  bottom: -50%;
  left: 9px;
  width: 2px;
  background: #0809e0;
  z-index: 1;
}

.timeline-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0809e0;
  box-shadow: 0 0 0 4px #FFFFFF, 0 0 0 6px #EEF2FF;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin: 0 4px;
}

.timeline-step-text {
  font-size: 0.95rem;
  color: #334155;
  font-weight: 600;
  line-height: 1.55;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 0.9rem 1.2rem;
  flex: 1;
  transition: all 0.25s ease;
}

.timeline-step-text:hover {
  background: #FFFFFF;
  border-color: rgba(8, 9, 224, 0.3);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

/* Hosts Grid */
.detail-hosts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.detail-host-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  transition: all 0.25s ease;
}

.detail-host-card:hover {
  background: #FFFFFF;
  border-color: #0809e0;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(8, 9, 224, 0.1);
}

.detail-host-avatar {
  width: 58px;
  height: 58px;
  min-width: 58px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.detail-host-info {
  display: flex;
  flex-direction: column;
}

.detail-host-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.2rem;
}

.detail-host-role {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748B;
}

/* Access Guidelines */
.access-guidelines-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.access-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 1.1rem 1.3rem;
}

.access-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #EEF2FF;
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.access-info strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.25rem;
}

.access-info p {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

/* Sticky RSVP Ticket Card Sidebar */
.event-detail-sidebar-col {
  position: sticky;
  top: 100px;
}

.sticky-rsvp-ticket-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.02);
}

.rsvp-card-top-strip {
  background: linear-gradient(135deg, #0809e0 0%, #050699 100%);
  padding: 1rem 1.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rsvp-ticket-type {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.rsvp-free-badge {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #FFFFFF;
  background: #059669;
  padding: 0.25rem 0.65rem;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rsvp-free-badge.free,
.rsvp-free-badge.free-entry,
.rsvp-free-badge.open,
.rsvp-free-badge.rsvp-open {
  background: #059669 !important;
  color: #FFFFFF !important;
}

.rsvp-free-badge.limited,
.rsvp-free-badge.limited-seats {
  background: #DC2626 !important;
  color: #FFFFFF !important;
}

.rsvp-free-badge.online {
  background: #0809e0 !important;
  color: #FFFFFF !important;
}

.rsvp-free-badge.featured,
.rsvp-free-badge.featured-event {
  background: #D97706 !important;
  color: #FFFFFF !important;
}

.rsvp-free-badge.sold-out,
.rsvp-free-badge.closed {
  background: #475569 !important;
  color: #FFFFFF !important;
}

.rsvp-free-badge.past,
.rsvp-free-badge.recorded,
.rsvp-free-badge.finished {
  background: #1D4ED8 !important;
  color: #FFFFFF !important;
}

.rsvp-card-body {
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.rsvp-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.rsvp-currency {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0809e0;
}

.rsvp-amount {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1;
}

.rsvp-period {
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748B;
}

.rsvp-tier-note {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.45;
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}

.rsvp-divider-dashed {
  width: 100%;
  height: 1px;
  border-top: 1.5px dashed #CBD5E1;
  margin: 1.5rem 0 1.6rem 0;
}

.rsvp-meta-summary {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.rsvp-summary-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.rsvp-summary-item i {
  color: #0809e0;
  font-size: 1.25rem;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #EEF2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.summary-label {
  display: block;
  font-size: 0.72rem;
  color: #64748B;
  font-weight: 600;
}

.rsvp-summary-item strong {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: #0F172A;
}

.rsvp-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}

.rsvp-main-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #0809e0;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  padding: 0.95rem 1.5rem;
  border-radius: 99px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  width: 100%;
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rsvp-main-cta-btn:hover {
  background: #0607b3;
  transform: translateY(-2px);
  box-shadow: none;
}

.rsvp-calendar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  color: #475569;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.75rem 1.2rem;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.rsvp-calendar-btn:hover {
  background: #EEF2FF;
  border-color: #0809e0;
  color: #0809e0;
}

.rsvp-security-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: #64748B;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}

.rsvp-security-badge i {
  color: #16A34A;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Sidebar Share Event Card (Below Ticket Card) */
.sidebar-share-card {
  margin-top: 1.2rem;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sidebar-share-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.share-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #EEF2FF;
  color: #0809e0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.share-text-wrap {
  display: flex;
  flex-direction: column;
}

.share-text-wrap strong {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  color: #0F172A;
}

.share-text-wrap span {
  font-size: 0.74rem;
  color: #64748B;
  font-weight: 500;
}

.sidebar-copy-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 99px;
  padding: 0.65rem 1.2rem;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  color: #0F172A;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sidebar-copy-link-btn:hover {
  background: #EEF2FF;
  border-color: #0809e0;
  color: #0809e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(8, 9, 224, 0.15);
}

/* Related Events Bottom Section */
.related-events-section {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid #E2E8F0;
}

.section-header-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}

.section-compact-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0;
}

.view-all-events-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #0809e0;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: gap 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.view-all-events-link:hover {
  gap: 0.7rem;
}

.related-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  width: 100%;
}

.ticket-pass-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ticket-pass-card:hover {
  transform: translateY(-4px);
  border-color: #0809e0;
  box-shadow: 0 12px 28px rgba(8, 9, 224, 0.1);
}

.ticket-header-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.2rem;
  background: #F8FAFC;
  border-bottom: 1px solid #E2E8F0;
  gap: 0.5rem;
}

.ticket-type-tag {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #64748B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ticket-body-content {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-pill-wrap {
  margin-bottom: 0.9rem;
}

.event-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.35;
  margin: 0 0 0.8rem;
  word-break: break-word;
}

.event-date-info {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748B;
  margin-bottom: 1.4rem;
}

.event-date-info i {
  color: #0809e0;
}

.event-action-wrap {
  margin-top: auto;
  text-align: right;
}

.event-action-btn {
  color: #0809e0;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.2s ease;
}

.event-action-btn:hover {
  gap: 0.55rem;
}

@media (max-width: 1024px) {
  .event-detail-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .detail-hero-img-box {
    height: 260px;
  }

  .event-detail-grid-layout {
    grid-template-columns: 1fr;
  }
  
  .event-detail-sidebar-col {
    position: static;
    order: -1;
  }

  .related-events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

@media (max-width: 768px) {
  .related-events-section {
    margin-top: 3.5rem;
    padding-top: 2rem;
  }

  .section-header-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
  }

  .section-compact-title {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  .related-events-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    width: 100% !important;
  }

  .ticket-pass-card {
    width: 100% !important;
  }

  .detail-hero-img-box {
    height: 200px;
  }

  .detail-key-info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }

  .key-info-divider {
    display: none;
  }

  .detail-hosts-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   DEDICATED NEWS DETAIL PAGE STYLES (.page-news-detail)
   ========================================================================== */
.news-detail-full-hero {
  position: relative;
  min-height: 400px;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
  background: #07090E;
  display: flex;
  align-items: center;
}

.news-hero-bg-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.news-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.6) saturate(1.1);
}

.news-hero-dark-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.8) 0%, rgba(7, 9, 14, 0.5) 50%, rgba(7, 9, 14, 0.95) 100%);
  pointer-events: none;
}

.news-hero-content-relative {
  position: relative;
  z-index: 3;
  width: 100%;
}

.news-detail-full-hero .detail-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.news-detail-full-hero .detail-breadcrumbs a {
  color: #CBD5E1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}

.news-detail-full-hero .detail-breadcrumbs a:hover {
  color: #FFFFFF;
}

.news-detail-full-hero .crumb-separator {
  color: #64748B;
}

.news-detail-full-hero .crumb-current {
  color: #60A5FA;
  font-weight: 700;
}

.news-hero-byline-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #CBD5E1;
  flex-wrap: wrap;
}

.news-byline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.news-byline-item i {
  color: #60A5FA;
  font-size: 1.05rem;
}

.news-byline-divider {
  color: #475569;
}

/* News Detail Grid (Reading Content 68% / Sticky Sidebar 32%) */
.news-detail-grid-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.8rem;
  margin-top: 3.5rem;
  align-items: flex-start;
}

.news-detail-content-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.news-story-cover-media {
  height: 420px;
}

/* Key Highlights & Strategic Takeaways Box */
.news-takeaways-box {
  background: #F8FAFC;
  border-left: 4px solid #0809e0;
  border-radius: 0 16px 16px 0;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
}

.takeaways-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #0809e0;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.news-detail-takeaways-box .takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.news-detail-takeaways-box .takeaways-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  font-weight: 600;
}

.news-detail-takeaways-box .takeaways-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #0809e0;
  font-weight: 800;
}

/* Rich Text Typography for Reading */
.news-article-rich-body {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #1E293B;
}

.news-article-rich-body p {
  margin-bottom: 1.5rem;
  color: #1E293B;
  font-weight: 400;
}

.news-article-rich-body strong,
.news-article-rich-body b {
  font-weight: 700;
  color: #0F172A;
}

.news-lead-paragraph {
  font-size: 1.2rem;
  line-height: 1.8;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

.news-article-rich-body h1,
.news-article-rich-body h2,
.news-article-rich-body h3,
.news-article-rich-body h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
}

.news-article-rich-body h1 {
  font-size: 1.85rem;
  margin: 2.5rem 0 1.2rem;
}

.news-article-rich-body h2 {
  font-size: 1.55rem;
  margin: 2.2rem 0 1.1rem;
}

.news-article-rich-body h3 {
  font-size: 1.35rem;
  margin: 2rem 0 1rem;
}

.news-article-rich-body h4 {
  font-size: 1.15rem;
  margin: 1.8rem 0 0.8rem;
}

.news-article-rich-body ul,
.news-article-rich-body ol {
  margin: 1.2rem 0 1.6rem 1.5rem;
  padding: 0;
}

.news-article-rich-body ul {
  list-style-type: disc;
}

.news-article-rich-body ol {
  list-style-type: decimal;
}

.news-article-rich-body li {
  margin-bottom: 0.6rem;
  line-height: 1.75;
}

/* In-Article Rich Pullquote / Blockquote */
.news-article-rich-body blockquote {
  margin: 2.2rem 0;
  padding: 1.8rem 2.2rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 5px solid #0809e0;
  border-radius: 0 20px 20px 0;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  font-style: italic;
  color: #0F172A;
  line-height: 1.65;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.news-article-rich-body blockquote p {
  margin-bottom: 0.6rem;
  color: #0F172A;
  font-weight: 700;
  font-style: italic;
  line-height: 1.65;
}

.news-article-rich-body blockquote p:last-child {
  margin-bottom: 0;
}

.news-article-rich-body blockquote cite,
.news-article-rich-body blockquote small,
.news-article-rich-body blockquote .quote-author {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0809e0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-style: normal;
}

.news-pullquote-block {
  margin: 2.2rem 0;
  padding: 1.8rem 2.2rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 5px solid #0809e0;
  border-radius: 0 20px 20px 0;
}

.news-pullquote-block blockquote {
  margin: 0 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  font-style: italic;
  color: #0F172A;
  line-height: 1.6;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.news-pullquote-block cite {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0809e0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-style: normal;
}

/* Author Signature Card */
.news-author-signature-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 3rem;
  padding: 1.8rem;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
}

.author-signature-top-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.author-avatar-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #0809e0;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

.author-details-meta strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  display: block;
}

.author-details-meta span {
  display: inline-block;
  font-size: 0.76rem;
  color: #0809e0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  margin-top: 0.25rem;
}

.author-signature-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
  width: 100%;
}

/* Back Button */
.news-back-action-wrap {
  margin-top: 1rem;
}

.news-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  color: #0F172A;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.75rem 1.4rem;
  border-radius: 99px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.news-back-btn:hover {
  background: #EEF2FF;
  border-color: #0809e0;
  color: #0809e0;
  transform: translateX(-3px);
}

/* Press & Media Desk Card in Sidebar (Brand Blue Theme) */
.sidebar-press-card {
  margin-top: 1.2rem;
  background: linear-gradient(135deg, #0809e0 0%, #050699 100%);
  border-radius: 20px;
  padding: 1.6rem;
  color: #FFFFFF;
  box-shadow: 0 10px 30px rgba(8, 9, 224, 0.18);
}

.press-card-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.press-card-head i {
  color: #FFFFFF;
  font-size: 1.5rem;
  background: rgba(255, 255, 255, 0.18);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.press-card-head strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  display: block;
}

.press-card-head span {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.press-card-desc {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.press-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.press-action-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.7rem 1.1rem;
  border-radius: 99px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.press-action-link:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #FFFFFF;
  transform: translateY(-2px);
}

.press-action-link.whatsapp {
  background: #16A34A;
  border-color: #22C55E;
}

.press-action-link.whatsapp:hover {
  background: #15803D;
  transform: translateY(-2px);
}

/* Related News Detail Grid (3 Cards) */
.related-news-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

@media (max-width: 1024px) {
  .news-detail-grid-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2.5rem !important;
    width: 100% !important;
  }

  .news-detail-content-col {
    width: 100% !important;
    order: 1;
  }

  .event-detail-sidebar-col,
  .news-detail-sidebar-col {
    width: 100% !important;
    position: static !important;
    order: 2;
  }

  .related-news-detail-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
}

@media (max-width: 768px) {
  .news-detail-main {
    padding-top: 1.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .detail-card-cover-media {
    height: 220px !important;
  }

  .detail-card-box {
    padding: 1.4rem 1.2rem !important;
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .detail-card-box-with-cover {
    padding: 0 !important;
  }

  .detail-card-cover-badge {
    bottom: 0.8rem !important;
    left: 0.8rem !important;
    padding: 0.35rem 0.8rem !important;
    font-size: 0.65rem !important;
  }

  .news-takeaways-card {
    padding: 1.2rem 1rem !important;
    margin-bottom: 1.5rem !important;
    border-radius: 0 16px 16px 0 !important;
  }

  .takeaway-item-pill {
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
    border-radius: 12px !important;
  }

  .news-article-rich-body {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  .news-pullquote-block {
    margin: 1.8rem 0 !important;
    padding: 1.2rem 1.4rem !important;
  }

  .news-pullquote-block blockquote {
    font-size: 0.98rem !important;
  }

  .related-news-detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    width: 100% !important;
  }

  .sticky-rsvp-ticket-card,
  .story-share-card,
  .press-desk-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Redesign Trive Editorial Board Card on Mobile */
  .news-author-signature-card {
    padding: 1.3rem 1.2rem !important;
    gap: 0.9rem !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
  }

  .author-signature-top-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    width: 100% !important;
  }

  .author-avatar-badge {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    font-size: 1.35rem !important;
    box-shadow: 0 4px 12px rgba(8, 9, 224, 0.25) !important;
  }

  .author-details-meta strong,
  .author-details-meta .author-name {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin: 0 !important;
  }

  .author-details-meta span,
  .author-details-meta .author-role-badge {
    font-size: 0.68rem !important;
    color: #0809e0 !important;
    background: #EEF2FF !important;
    border: 1px solid rgba(8, 9, 224, 0.15) !important;
    display: inline-block !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 6px !important;
    margin-top: 0.25rem !important;
    line-height: 1.3 !important;
  }

  .author-signature-desc {
    font-size: 0.85rem !important;
    color: #64748B !important;
    line-height: 1.55 !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   RSVP REGISTRATION MODAL FORM STYLES
   ========================================================================== */
.rsvp-modal-overlay {
  z-index: 10000;
}

.rsvp-modal-card {
  background: #FFFFFF !important;
  border-radius: 28px !important;
  width: 100% !important;
  max-width: 580px !important;
  padding: 2.2rem 2.4rem !important;
  color: #0F172A !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.rsvp-close-btn {
  background: #F1F5F9 !important;
  border: 1px solid #E2E8F0 !important;
  color: #64748B !important;
  width: 36px !important;
  height: 36px !important;
  top: 1.2rem !important;
  right: 1.2rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1rem !important;
}

.rsvp-close-btn:hover {
  background: #0809e0 !important;
  color: #FFFFFF !important;
  border-color: #0809e0 !important;
  transform: rotate(90deg) scale(1.05) !important;
}

.rsvp-modal-header {
  margin-bottom: 1.6rem;
  padding-right: 2rem;
}

.rsvp-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.3rem 0.8rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.rsvp-modal-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.35rem;
  line-height: 1.3;
}

.rsvp-modal-subtitle {
  font-size: 0.86rem;
  color: #64748B;
  line-height: 1.5;
  margin: 0;
}

.rsvp-form-container {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.rsvp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rsvp-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rsvp-form-group label {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rsvp-form-group label i {
  color: #0809e0;
  font-size: 0.95rem;
}

.rsvp-form-group label .req {
  color: #EF4444;
  font-weight: 800;
}

.rsvp-input-field {
  width: 100%;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #0F172A;
  outline: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.rsvp-input-field:focus {
  background: #FFFFFF;
  border-color: #0809e0;
  box-shadow: 0 0 0 3px rgba(8, 9, 224, 0.12);
}

.rsvp-input-field::placeholder {
  color: #94A3B8;
}

.rsvp-select-wrap {
  position: relative;
  width: 100%;
}

.rsvp-select-field {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 0.75rem 2.2rem 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: #0F172A;
  outline: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.rsvp-select-field:focus {
  background: #FFFFFF;
  border-color: #0809e0;
  box-shadow: 0 0 0 3px rgba(8, 9, 224, 0.12);
}

.rsvp-caret {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  pointer-events: none;
  font-size: 0.9rem;
}

.rsvp-modal-footer {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.rsvp-note-strip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: #059669;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 0.5rem 0.85rem;
  border-radius: 10px;
}

.rsvp-note-strip i {
  font-size: 1rem;
  flex-shrink: 0;
}

.rsvp-submit-btn {
  width: 100%;
  padding: 0.9rem 1.6rem;
  border-radius: 99px;
  background: #0809e0;
  color: #FFFFFF;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 8px 22px rgba(8, 9, 224, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rsvp-submit-btn:hover {
  background: #3B82F6;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.45);
}

/* Success State */
.rsvp-success-state {
  text-align: center;
  padding: 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeInModal 0.3s ease forwards;
}

.success-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ECFDF5;
  color: #059669;
  font-size: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.15);
}

.success-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.4rem;
}

.success-desc {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 1.4rem;
  max-width: 420px;
}

.success-ticket-summary {
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: 14px;
  padding: 1rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 380px;
  margin-bottom: 1.6rem;
}

.success-ticket-summary strong {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: #0809e0;
}

.success-ticket-summary span {
  font-size: 0.84rem;
  color: #475569;
  font-weight: 600;
}

.rsvp-success-close-btn {
  padding: 0.75rem 2.2rem;
  border-radius: 99px;
  background: #0F172A;
  color: #FFFFFF;
  border: none;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.rsvp-success-close-btn:hover {
  background: #0809e0;
  transform: translateY(-2px);
}

/* ==========================================================================
   INTERACTIVE JOIN COMMUNITY HUB MODAL (#joinCommunityModal)
   ========================================================================== */
.join-hub-modal-card {
  background: #FFFFFF;
  border-radius: 28px;
  width: 100%;
  max-width: 540px;
  padding: 2.2rem 2rem;
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.3);
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.9);
  animation: modalScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.join-hub-header {
  text-align: center;
  margin-bottom: 1.6rem;
}

.join-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #0809e0;
  background: #EEF2FF;
  border: 1px solid rgba(8, 9, 224, 0.15);
  padding: 0.25rem 0.75rem;
  border-radius: 99px;
  margin-bottom: 0.8rem;
  letter-spacing: 0.05em;
}

.join-hub-title {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.join-hub-desc {
  font-size: 0.88rem;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}

.join-channels-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.4rem;
}

.join-channel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.3rem;
  border-radius: 18px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.join-channel-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.join-channel-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.join-channel-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.join-channel-item.discord .join-channel-icon {
  background: #5865F2;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.25);
}

.join-channel-item.discord .join-channel-icon-img {
  filter: brightness(0) invert(1);
}

.join-channel-item.whatsapp .join-channel-icon {
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.join-channel-item.instagram .join-channel-icon {
  background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(221, 42, 123, 0.25);
}

.join-channel-item.tiktok .join-channel-icon {
  background: #000000;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.join-channel-item.tiktok .join-channel-icon i {
  color: #25F4EE;
  text-shadow: 2px 2px 0px #FE2C55;
}

.join-channel-item.youtube .join-channel-icon {
  background: #FF0000;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.25);
}

.cta-btn-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.join-channel-info h4 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 0.15rem;
}

.join-channel-info p {
  font-size: 0.78rem;
  color: #64748B;
  margin: 0;
}

.join-channel-action {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  color: #0809e0;
  transition: transform 0.25s ease;
}

.join-channel-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.join-channel-item.discord:hover {
  background: #F4F5FF;
  border-color: #5865F2;
}

.join-channel-item.whatsapp:hover {
  background: #F0FDF4;
  border-color: #25D366;
}

.join-channel-item.instagram:hover {
  background: #FDF2F8;
  border-color: #DD2A7B;
}

.join-channel-item.tiktok:hover {
  background: #F8FAFC;
  border-color: #0F172A;
}

.join-channel-item.youtube:hover {
  background: #FEF2F2;
  border-color: #EF4444;
}

.join-channel-item:hover .join-channel-action {
  transform: translateX(4px);
}

.join-hub-footer-note {
  text-align: center;
  font-size: 0.75rem;
  color: #94A3B8;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
}

@media (max-width: 600px) {
  .join-hub-modal-card {
    padding: 1.6rem 1.2rem !important;
    border-radius: 24px !important;
  }

  .join-channel-item {
    padding: 0.9rem 1rem !important;
  }

  .join-channel-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.2rem !important;
  }

  .join-channel-info h4 {
    font-size: 0.92rem !important;
  }

  .join-channel-info p {
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   FLOATING STICKY RSVP BOTTOM BAR (MOBILE ONLY - EVENT DETAIL)
   ========================================================================== */
.mobile-sticky-rsvp-bar {
  display: none;
}

@media (max-width: 768px) {
  .mobile-sticky-rsvp-bar {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 1.1rem 1.25rem calc(1.35rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 -12px 35px rgba(15, 23, 42, 0.12);
    animation: slideUpSticky 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes slideUpSticky {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .mobile-sticky-rsvp-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
  }

  .mobile-sticky-rsvp-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .mobile-sticky-tier {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-sticky-status {
    font-size: 0.72rem;
    font-weight: 700;
    color: #0809e0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .mobile-sticky-rsvp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    background: #0809e0;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.75rem 1.35rem;
    border-radius: 99px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(8, 9, 224, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
    flex-shrink: 0;
  }

  .mobile-sticky-rsvp-btn:active {
    transform: scale(0.96);
  }

  .mobile-sticky-rsvp-btn.watch-btn {
    background: #DC2626;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3);
  }

  .mobile-sticky-rsvp-btn.past-btn {
    background: #64748B;
    box-shadow: none;
    opacity: 0.85;
    cursor: not-allowed;
  }

  /* Add bottom padding to event detail container on mobile so content isn't covered by sticky bar */
  .event-detail-grid-layout {
    padding-bottom: 5.5rem !important;
  }
}