/* ==========================================================================
   Go Green EV - Clean, Modern & Responsive Mobility Design
   ========================================================================== */

:root {
  /* Color Palette - Light & Fresh Eco-Mobility Theme */
  --bg-primary: #F6FAF8;
  --bg-surface-light: #FFFFFF;
  --bg-accent-light: #F0FDF4;
  --bg-hero-dark: #070b13;
  --bg-card: rgba(255, 255, 255, 0.08);
  --bg-card-hover: rgba(255, 255, 255, 0.14);
  --nav-bg: rgba(9, 16, 30, 0.45);

  /* Electric Accents */
  --accent-primary: #00F29D;
  --accent-secondary: #00D2FF;
  --accent-green-dark: #059669;
  --accent-gradient: linear-gradient(135deg, #00F29D 0%, #00C896 50%, #00A6B4 100%);
  --accent-glow: rgba(0, 242, 157, 0.25);
  --cyan-glow: rgba(0, 210, 255, 0.18);

  /* Text Colors */
  --text-white: #ffffff;
  --text-dark: #0b1329;
  --text-slate: #334155;
  --text-muted: rgba(226, 232, 240, 0.85);
  --text-subtle: rgba(148, 163, 184, 0.8);
  --text-muted-dark: #64748b;

  /* Typography */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ================= CSS RESET & BASE ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-dark);
  font-family: var(--font-body);
  line-height: 1.55;
  overflow-x: hidden;
  width: 100%;
}

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

ul {
  list-style: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

/* ================= HERO SECTION LAYOUT ================= */
.hero-section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background-color: var(--bg-hero-dark);
  color: var(--text-white);
}

.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(to bottom, transparent 0%, rgba(246, 250, 248, 0.6) 65%, #F6FAF8 100%);
  pointer-events: none;
  z-index: 5;
}

/* Background Video & Subtle Transparent Overlay */
.hero-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-bg-image,
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.88;
  filter: contrast(1.04) brightness(0.88);
  transform: scale(1.01);
  transition: transform 1.2s ease-out;
}

/* Very subtle dark overlay so the background video remains clearly visible */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(6, 12, 22, 0.5) 0%,
      rgba(6, 12, 22, 0.3) 50%,
      rgba(6, 12, 22, 0.45) 100%);
}

.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 15%, transparent 75%);
}

/* Ambient Ambient Glow Orbs */
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  opacity: 0.3;
  animation: pulseGlow 10s ease-in-out infinite alternate;
}

.hero-glow-1 {
  top: 15%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}

.hero-glow-2 {
  bottom: 10%;
  right: 5%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 70%);
  animation-delay: -5s;
}

@keyframes pulseGlow {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.25;
  }

  50% {
    transform: scale(1.1) translate(15px, -15px);
    opacity: 0.4;
  }

  100% {
    transform: scale(0.95) translate(-10px, 10px);
    opacity: 0.25;
  }
}

.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to top, rgba(7, 11, 19, 0.6) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ================= STICKY FLOATING NAVBAR (NO BORDERS) ================= */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  padding: 1.25rem 2rem 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-wrapper.scrolled {
  padding: 0.65rem 2rem 0;
}

.floating-navbar {
  width: 100%;
  max-width: 1240px;
  height: 64px;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.25), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: all var(--transition-smooth);
  pointer-events: auto;
}

.navbar-wrapper.scrolled .floating-navbar {
  background: rgba(8, 15, 28, 0.55);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px -5px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 242, 157, 0.1);
}

.floating-navbar:hover {
  background: rgba(9, 16, 30, 0.6);
  border-color: rgba(0, 242, 157, 0.3);
  box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.35), 0 0 25px rgba(0, 242, 157, 0.15);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-white);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-logo:hover {
  transform: scale(1.02);
}

.nav-logo-img {
  height: 40px;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.logo-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 242, 157, 0.15);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.logo-text {
  font-weight: 700;
}

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

/* Center Nav Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  border: none;
  transition: all var(--transition-fast);
}

.nav-link:hover {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
}

.nav-link.active {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

/* Right Nav: Phone CTA */
.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-phone-btn {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 9999px;
  color: var(--text-white);
  font-size: 0.825rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all var(--transition-smooth);
}

.phone-icon-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: #061019;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-bounce);
}

.nav-phone-btn:hover {
  background: rgba(0, 242, 157, 0.15);
  transform: translateY(-1px);
}

.nav-phone-btn:hover .phone-icon-wrap {
  transform: scale(1.1) rotate(10deg);
}

/* Mobile Toggle Hamburger */
.mobile-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  gap: 4px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mobile-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.mobile-toggle-btn .bar {
  width: 18px;
  height: 2px;
  background: var(--text-white);
  border-radius: 2px;
  transition: all var(--transition-smooth);
}

.mobile-toggle-btn.active .bar-1 {
  transform: translateY(6px) rotate(45deg);
}

.mobile-toggle-btn.active .bar-2 {
  opacity: 0;
  transform: translateX(-10px);
}

.mobile-toggle-btn.active .bar-3 {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Slide-out Menu (Transparent Blur) */
.mobile-menu-overlay {
  display: none;
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(8, 14, 26, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  flex-direction: column;
  gap: 1rem;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-smooth);
  z-index: 99;
}

.mobile-menu-overlay.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 10px;
  transition: all var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.08);
  padding-left: 1.25rem;
}

.mobile-menu-footer {
  padding-top: 0.85rem;
}

.mobile-phone-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.75rem;
  border-radius: 10px;
  background: rgba(0, 242, 157, 0.15);
  border: none;
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.925rem;
}

/* ================= MAIN HERO CONTAINER ================= */
.hero-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 6.5rem 2rem 3.5rem;
  flex: 1;
  display: flex;
  align-items: center;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}

/* ================= LEFT COLUMN: HERO CONTENT ================= */
.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  max-width: 580px;
}

/* Hero Content Slider System */
.hero-slider-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
}

.hero-slide {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 2;
}

/* Badge (No border) */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.35rem 0.85rem;
  background: rgba(0, 242, 157, 0.12);
  border: none;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-primary);
  letter-spacing: 0.02em;
}

.badge-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* Clean, Compact, Professional Headline */
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 2.75vw, 2.65rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-white);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Compact Description */
.hero-description {
  font-size: clamp(0.925rem, 1.05vw, 1rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 480px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* CTA Buttons (No borders) */
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.35rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.75rem 1.45rem;
  border-radius: 9999px;
  border: none;
  font-size: 0.885rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Primary CTA Button */
.btn-primary {
  background: var(--accent-gradient);
  color: #061019;
  box-shadow: 0 8px 20px -4px rgba(0, 242, 157, 0.35);
}

.btn-primary .btn-icon {
  display: flex;
  align-items: center;
  transition: transform var(--transition-bounce);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 25px -4px rgba(0, 242, 157, 0.45);
}

.btn-primary:hover .btn-icon {
  transform: translateX(3px);
}

.btn-primary .btn-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.5s ease;
  pointer-events: none;
}

.btn-primary:hover .btn-glow {
  opacity: 1;
  transform: scale(1);
}

/* Secondary CTA Button (Transparent Glass, No border) */
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text-white);
  border: none;
}

.btn-secondary .btn-icon {
  display: flex;
  align-items: center;
  color: var(--accent-primary);
  transition: transform var(--transition-smooth);
}

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

.btn-secondary:hover .btn-icon {
  transform: translateY(2px);
}

/* Trust Bar */
.hero-trust-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 0.5rem;
  padding-top: 0.85rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-subtle);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.trust-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-primary);
}

/* ================= RIGHT COLUMN: LIGHTWEIGHT GLASS STATS (NO BORDERS) ================= */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
  max-width: 380px;
  margin-left: auto;
}

.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.35rem;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-smooth);
  overflow: hidden;
  cursor: default;
}

.stat-card:hover {
  transform: translateX(-4px);
  background: var(--bg-card-hover);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.stat-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 50%, rgba(0, 242, 157, 0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  pointer-events: none;
}

.stat-card:hover .stat-glow {
  opacity: 1;
}

/* Icon Wrap (No border) */
.stat-icon-wrapper {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  transition: all var(--transition-smooth);
}

.stat-card:hover .stat-icon-wrapper {
  background: rgba(0, 242, 157, 0.18);
  transform: scale(1.05);
}

/* Text info */
.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

/* ================= ANIMATIONS & KEYFRAMES ================= */
.animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.animate-stat {
  opacity: 0;
  transform: translateX(25px);
  animation: slideInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= RESPONSIVE DESIGN BREAKPOINTS ================= */

/* Medium Laptop / Large Tablet (Max 1120px) */
@media screen and (max-width: 1120px) {
  .hero-layout {
    grid-template-columns: 1.15fr 1fr;
    gap: 2rem;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .nav-links {
    gap: 0.2rem;
  }

  .nav-link {
    padding: 0.4rem 0.65rem;
    font-size: 0.825rem;
  }
}

/* Tablet (Max 992px) */
@media screen and (max-width: 992px) {
  .navbar-wrapper {
    padding: 1rem 1.25rem 0;
  }

  .floating-navbar {
    height: 58px;
    padding: 0 1.25rem;
  }

  .nav-links {
    display: none;
    /* Collapses to Hamburger */
  }

  .mobile-toggle-btn {
    display: flex;
  }

  .mobile-menu-overlay {
    display: flex;
  }

  .hero-container {
    padding: 5.5rem 1.25rem 2.5rem;
  }

  .hero-layout {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .hero-content {
    max-width: 100%;
    text-align: left;
  }

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

  .stat-card:hover {
    transform: translateY(-3px);
  }
}

/* Small Tablet & Large Mobile (Max 768px) */
@media screen and (max-width: 768px) {
  .navbar-wrapper {
    padding: 0.85rem 0.85rem 0;
  }

  .floating-navbar {
    height: 54px;
    padding: 0 0.85rem;
  }

  .nav-phone-btn .phone-number {
    display: none;
  }

  .nav-phone-btn {
    padding: 0.35rem;
    border-radius: 50%;
  }

  .hero-container {
    padding: 5rem 0.85rem 2.5rem;
  }

  .hero-title {
    font-size: 1.85rem;
  }

  .hero-description {
    font-size: 0.885rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .stat-card {
    padding: 0.85rem 1.15rem;
  }

  .stat-icon-wrapper {
    width: 38px;
    height: 38px;
  }

  .stat-value {
    font-size: 1.25rem;
  }

  .hero-trust-bar {
    gap: 0.75rem;
  }
}

/* Extra Small Mobile (Max 480px) */
@media screen and (max-width: 480px) {
  .hero-title {
    font-size: 1.65rem;
  }

  .hero-badge {
    font-size: 0.725rem;
    padding: 0.3rem 0.7rem;
  }

  .nav-logo-img {
    height: 32px;
  }

  .logo-text {
    font-size: 1.1rem;
  }

  .logo-icon-box {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   ABOUT US SECTION - Premium EV Technology Aesthetic
   ========================================================================== */
.about-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem 8rem;
  background: linear-gradient(180deg, #F6FAF8 0%, #FFFFFF 45%, #F0FDF4 100%);
  color: #0b1329;
  overflow: hidden;
  z-index: 10;
}

/* Background Ambient Elements */
.about-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.about-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.45;
}

.about-blob-1 {
  top: 10%;
  left: -5%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
}

.about-blob-2 {
  bottom: 5%;
  right: -5%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
}

.about-dots-pattern {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.7;
}

.about-curve-line {
  position: absolute;
  top: 20%;
  left: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
}

/* Container & Grid Layout */
.about-container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.about-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 4.5rem;
  align-items: center;
}

/* ================= LEFT: CONTENT COMPOSITION ================= */
.about-content {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #059669;
  background: rgba(0, 242, 157, 0.12);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.about-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
}

.about-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: #0b1329;
}

.about-title-gradient {
  background: linear-gradient(135deg, #059669 0%, #00B4D8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-desc {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: #475569;
  line-height: 1.7;
}

/* 3 Compact Feature Items */
.about-features {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.35rem;
}

.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 0.95rem 1.25rem;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.85);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.about-feature-item:hover {
  background: #ffffff;
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 0 15px rgba(0, 242, 157, 0.12);
  transform: translateX(6px);
}

.feature-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 242, 157, 0.14);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.about-feature-item:hover .feature-icon-box {
  background: var(--accent-primary);
  color: #061019;
  transform: scale(1.08);
}

.feature-heading {
  font-family: var(--font-heading);
  font-size: 1.025rem;
  font-weight: 700;
  color: #0b1329;
}

.feature-subtext {
  font-size: 0.865rem;
  color: #64748b;
  margin-top: 0.15rem;
  line-height: 1.5;
}

/* Action Link */
.about-action-row {
  margin-top: 0.5rem;
}

.about-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #059669;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

.about-cta-link svg {
  transition: transform 0.25s ease;
}

.about-cta-link:hover {
  color: #00B4D8;
}

.about-cta-link:hover svg {
  transform: translateX(4px);
}

/* ================= RIGHT: VISUAL CANVAS & FLOATING CARDS ================= */
.about-visual-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.about-visual-canvas {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 480px;
  border-radius: 32px;
  background: linear-gradient(145deg, #091322 0%, #0d1b33 100%);
  box-shadow: 0 25px 50px -12px rgba(11, 19, 41, 0.28), 0 0 1px 1px rgba(0, 242, 157, 0.15);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.visual-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}

.visual-glow-primary {
  top: -10%;
  right: -10%;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.25) 0%, transparent 70%);
}

.visual-glow-cyan {
  bottom: -10%;
  left: -10%;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.2) 0%, transparent 70%);
}

.visual-circle-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.ring-outer {
  width: 380px;
  height: 380px;
  animation: rotateRing 40s linear infinite;
}

.ring-inner {
  width: 260px;
  height: 260px;
  border: 1px solid rgba(0, 242, 157, 0.15);
}

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

.visual-media-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.about-visual-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.use-placeholder-graphic .about-visual-image {
  display: none;
}

.use-placeholder-graphic .visual-graphic-placeholder {
  display: flex;
}

.visual-graphic-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}

.placeholder-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.15), rgba(0, 210, 255, 0.15));
  border: 1px solid rgba(0, 242, 157, 0.3);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 242, 157, 0.25);
  animation: pulseBox 3s ease-in-out infinite alternate;
}

@keyframes pulseBox {
  0% { transform: scale(0.96); box-shadow: 0 0 20px rgba(0, 242, 157, 0.2); }
  100% { transform: scale(1.04); box-shadow: 0 0 35px rgba(0, 242, 157, 0.35); }
}

.placeholder-caption {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.placeholder-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.status-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  animation: pulseDot 2s infinite;
}

.visual-telemetry-badge {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  background: rgba(9, 16, 28, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 5;
}

.telemetry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
}

/* ================= 3 FLOATING INFO CARDS ================= */
.about-floating-card {
  position: absolute;
  padding: 0.85rem 1.25rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.12), 0 0 1px 1px rgba(15, 23, 42, 0.05);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  cursor: default;
  white-space: nowrap;
}

.about-floating-card:hover {
  transform: scale(1.06) translateY(-4px) !important;
  box-shadow: 0 20px 40px -5px rgba(15, 23, 42, 0.18), 0 0 20px rgba(0, 242, 157, 0.2);
}

.float-card-1 {
  top: -15px;
  right: -25px;
  animation: floatBobbing 6s ease-in-out infinite;
}

.float-card-2 {
  bottom: 50px;
  left: -35px;
  animation: floatBobbing 7s ease-in-out infinite 1.5s;
}

.float-card-3 {
  bottom: -20px;
  right: 15px;
  animation: floatBobbing 6.5s ease-in-out infinite 3s;
}

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

.float-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.float-card-icon.green {
  background: rgba(0, 242, 157, 0.15);
  color: #059669;
}

.float-card-icon.cyan {
  background: rgba(0, 210, 255, 0.15);
  color: #0284c7;
}

.float-card-icon.purple {
  background: rgba(168, 85, 247, 0.15);
  color: #7c3aed;
}

.float-card-text {
  display: flex;
  flex-direction: column;
}

.float-card-value {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0b1329;
}

.float-card-label {
  font-size: 0.775rem;
  font-weight: 500;
  color: #64748b;
  margin-top: 0.1rem;
}

/* ================= SCROLL REVEAL UTILITIES ================= */
.reveal-init {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ================= ABOUT RESPONSIVE BREAKPOINTS ================= */
@media screen and (max-width: 1024px) {
  .about-section {
    padding: 5.5rem 1.5rem 6.5rem;
  }

  .about-layout {
    gap: 3rem;
  }

  .about-visual-canvas {
    max-width: 400px;
    height: 400px;
  }

  .float-card-1 {
    right: -10px;
    top: -10px;
  }

  .float-card-2 {
    left: -20px;
  }
}

@media screen and (max-width: 860px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-content {
    max-width: 100%;
  }

  .about-visual-wrapper {
    margin-top: 1rem;
  }
}

@media screen and (max-width: 560px) {
  .about-section {
    padding: 4.5rem 1rem 5.5rem;
  }

  .about-title {
    font-size: 1.95rem;
  }

  .about-visual-canvas {
    max-width: 100%;
    height: 360px;
    border-radius: 24px;
  }

  .about-floating-card {
    padding: 0.65rem 0.95rem;
    border-radius: 14px;
  }

  .float-card-icon {
    width: 30px;
    height: 30px;
  }

  .float-card-value {
    font-size: 1.05rem;
  }

  .float-card-label {
    font-size: 0.725rem;
  }

  .float-card-1 {
    top: -12px;
    right: -5px;
  }

  .float-card-2 {
    bottom: 25px;
    left: -5px;
  }

  .float-card-3 {
    bottom: -15px;
    right: 5px;
  }
}

/* ==========================================================================
   DISCOVER OUR CHARGERS SECTION - Expand-on-Hover / Tap Interactive Panels
   ========================================================================== */
.chargers-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem 8rem;
  background: linear-gradient(180deg, #F0FDF4 0%, #F7FBF9 45%, #EAF5F0 100%);
  color: #0b1329;
  overflow: hidden;
  z-index: 10;
}

.chargers-container {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header */
.chargers-header {
  text-align: center;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
}

.chargers-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #059669;
  background: rgba(0, 242, 157, 0.15);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.chargers-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
}

.chargers-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #0b1329;
  line-height: 1.15;
}

.chargers-title-gradient {
  background: linear-gradient(135deg, #059669 0%, #00B4D8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.chargers-subtitle {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: #475569;
  line-height: 1.6;
}

/* Panels Split Container */
.chargers-panels-container {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  height: 640px;
  perspective: 1200px;
}

/* Base Panel */
.charger-panel {
  position: relative;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
  cursor: pointer;
  outline: none;
  transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s ease,
              box-shadow 0.4s ease;
  will-change: flex;
}

/* EXPANDED vs COLLAPSED flex allocation */
.charger-panel.is-expanded {
  flex: 0 0 68%;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.16), 0 0 1px 1px rgba(0, 242, 157, 0.35);
  cursor: default;
}

.charger-panel.is-collapsed {
  flex: 0 0 calc(32% - 1.5rem);
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.1), 0 0 1px 1px rgba(226, 232, 240, 0.9);
  opacity: 0.92;
}

.charger-panel.is-collapsed:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.15), 0 0 18px rgba(0, 242, 157, 0.25);
}

/* Background Media & Overlays */
.charger-bg-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #0a1120;
}

.charger-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s ease;
}

.charger-panel.is-expanded .charger-image {
  transform: scale(1.05);
  filter: brightness(0.85) contrast(1.05);
}

.charger-panel.is-collapsed .charger-image {
  transform: scale(1);
  filter: brightness(0.45) contrast(1.1);
}

.charger-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 19, 0.15) 0%,
    rgba(7, 11, 19, 0.55) 35%,
    rgba(7, 11, 19, 0.95) 100%
  );
  transition: opacity 0.5s ease;
}

.charger-panel.is-collapsed .charger-overlay {
  background: linear-gradient(
    180deg,
    rgba(7, 11, 19, 0.4) 0%,
    rgba(7, 11, 19, 0.8) 50%,
    rgba(7, 11, 19, 0.98) 100%
  );
}

/* Subtle ambient energy glow */
.charger-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.3;
}

.ac-glow {
  bottom: 10%;
  left: 10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.25) 0%, transparent 70%);
}

.dc-glow {
  bottom: 10%;
  right: 10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.25) 0%, transparent 70%);
}

/* Watermark text */
.charger-watermark-text {
  position: absolute;
  top: 10%;
  right: -10px;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: 0.08em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Content Layout inside Panel */
.charger-content-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

/* Badge Row */
.panel-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.panel-type-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-primary);
  background: rgba(0, 242, 157, 0.12);
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.panel-type-badge.dc-badge {
  color: #00D2FF;
  background: rgba(0, 210, 255, 0.12);
}

.panel-indicator {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.4s ease;
}

.charger-panel.is-expanded .panel-indicator {
  opacity: 1;
  transform: translateX(0);
}

/* Title & Lead */
.panel-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.panel-title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 2.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.15;
}

.panel-lead {
  font-size: 0.925rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 580px;
  transition: opacity 0.4s ease, max-height 0.4s ease;
}

.charger-panel.is-collapsed .panel-lead {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
}

/* Products Grid (Collapses smoothly when inactive) */
.panel-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.85rem;
  width: 100%;
  max-height: 400px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.charger-panel.is-collapsed .panel-products-grid {
  max-height: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  overflow: hidden;
  margin: 0;
  gap: 0;
}

/* Individual Product Card */
.product-card {
  padding: 1rem 1.15rem;
  border-radius: 16px;
  background: rgba(12, 22, 38, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.25s ease,
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-3px);
  background: rgba(16, 28, 48, 0.85);
  border-color: rgba(0, 242, 157, 0.35);
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 242, 157, 0.12);
}

.product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.product-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(0, 242, 157, 0.12);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-icon-wrap.dc-icon {
  background: rgba(0, 210, 255, 0.12);
  color: #00D2FF;
}

.product-power-tag {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-primary);
  background: rgba(0, 242, 157, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.product-power-tag.dc-power {
  color: #00D2FF;
  background: rgba(0, 210, 255, 0.1);
}

.product-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.product-desc {
  font-size: 0.785rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Panel Bottom Action */
.panel-action-row {
  display: flex;
  align-items: center;
  max-height: 80px;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.charger-panel.is-collapsed .panel-action-row {
  max-height: 0;
  opacity: 0;
  transform: translateY(15px);
  pointer-events: none;
  overflow: hidden;
  margin: 0;
}

.btn-panel-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.45rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #061019;
  font-size: 0.885rem;
  font-weight: 700;
  transition: all var(--transition-smooth);
  box-shadow: 0 8px 20px -4px rgba(0, 242, 157, 0.35);
}

.btn-panel-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 25px -4px rgba(0, 242, 157, 0.45);
}

.btn-panel-primary svg {
  transition: transform 0.25s ease;
}

.btn-panel-primary:hover svg {
  transform: translateX(3px);
}

/* ================= CHARGERS RESPONSIVE BREAKPOINTS ================= */
@media screen and (max-width: 1024px) {
  .chargers-section {
    padding: 5.5rem 1.5rem 6.5rem;
  }

  .chargers-panels-container {
    height: 600px;
    gap: 1.25rem;
  }

  .charger-panel {
    padding: 2rem;
  }

  .charger-panel.is-expanded {
    flex: 0 0 62%;
  }

  .charger-panel.is-collapsed {
    flex: 0 0 calc(38% - 1.25rem);
  }
}

/* Mobile & Small Tablet (Accordion Stack) */
@media screen and (max-width: 768px) {
  .chargers-section {
    padding: 4.5rem 1rem 5.5rem;
  }

  .chargers-header {
    margin-bottom: 2.5rem;
  }

  .chargers-panels-container {
    flex-direction: column;
    height: auto;
    gap: 1.25rem;
  }

  .charger-panel {
    width: 100%;
    padding: 1.75rem 1.5rem;
    border-radius: 22px;
    min-height: 120px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .charger-panel.is-expanded {
    flex: none;
    min-height: 520px;
  }

  .charger-panel.is-collapsed {
    flex: none;
    min-height: 120px;
  }

  .panel-products-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .panel-title {
    font-size: 1.75rem;
  }
}

/* ==========================================================================
   FOOTER SECTION - Premium EV Charging Dark Theme
   ========================================================================== */
.site-footer {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 2.5rem;
  background: linear-gradient(180deg, #091222 0%, #060B14 100%);
  color: #ffffff;
  overflow: hidden;
  z-index: 20;
}

/* Ambient Glows & Tech Grid Background Elements */
.footer-bg-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.footer-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
}

.footer-glow-1 {
  top: 15%;
  left: -5%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.18) 0%, transparent 70%);
}

.footer-glow-2 {
  bottom: 10%;
  right: -5%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.16) 0%, transparent 70%);
}

.footer-glow-orange {
  top: 40%;
  right: 25%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 140, 0, 0.08) 0%, transparent 70%);
}

.footer-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.6;
}

.footer-circuit-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Container */
.footer-container {
  position: relative;
  z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* Main Layout Grid: Left (Brand) + Right (3-Col Glass Container) */
.footer-main-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start;
}

/* ================= LEFT SIDE: BRAND & SOCIALS ================= */
.footer-brand-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  transition: transform 0.25s ease;
  width: fit-content;
}

.footer-brand-logo:hover {
  transform: scale(1.02);
}

.footer-logo-img {
  height: 44px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.footer-logo-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #061019;
  box-shadow: 0 4px 16px rgba(0, 242, 157, 0.3);
}

.footer-brand-name .brand-green {
  color: var(--accent-primary);
}

.footer-brand-desc {
  font-size: 0.925rem;
  line-height: 1.65;
  color: #94A3B8;
  max-width: 320px;
}

/* Social Media Section */
.footer-social-wrapper {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.social-eyebrow {
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
  text-transform: uppercase;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-icon-btn:hover {
  transform: translateY(-3px) scale(1.08);
  background: rgba(0, 242, 157, 0.15);
  border-color: rgba(0, 242, 157, 0.4);
  color: #00F29D;
  box-shadow: 0 8px 20px -4px rgba(0, 242, 157, 0.35);
}

/* ================= RIGHT SIDE: TRANSLUCENT 3-COLUMN BOX ================= */
.footer-translucent-box {
  position: relative;
  border-radius: 28px;
  background: rgba(13, 22, 40, 0.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2.75rem 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.footer-box-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle at top right, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.footer-columns-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 2.5rem;
}

/* Navigation Columns */
.footer-nav-col {
  display: flex;
  flex-direction: column;
}

.footer-col-title {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.35rem;
  text-transform: uppercase;
}

.col-title-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
}

.col-title-dot.cyan-dot {
  background: #00D2FF;
  box-shadow: 0 0 8px #00D2FF;
}

.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-nav-link {
  font-size: 0.885rem;
  color: #94A3B8;
  transition: all 0.25s ease;
  display: inline-block;
  width: fit-content;
}

.footer-nav-link:hover {
  color: #00F29D;
  transform: translateX(4px);
}

/* Contact Column */
.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.contact-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  color: inherit;
  transition: transform 0.25s ease;
}

.contact-item-row:hover {
  transform: translateX(3px);
}

.contact-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(0, 242, 157, 0.12);
  color: #00F29D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: all 0.25s ease;
}

.contact-item-row:hover .contact-icon-box {
  background: #00F29D;
  color: #061019;
  transform: scale(1.05);
}

.contact-item-details {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.contact-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contact-value {
  font-size: 0.865rem;
  font-weight: 500;
  color: #E2E8F0;
  line-height: 1.4;
  transition: color 0.25s ease;
}

.contact-item-row:hover .contact-value {
  color: #00D2FF;
}

/* 24/7 Support Live Badge */
.footer-support-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  background: rgba(0, 242, 157, 0.08);
  border: 1px solid rgba(0, 242, 157, 0.25);
  margin-top: 0.4rem;
  width: fit-content;
}

.support-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
  animation: pulseDot 2s infinite;
}

.support-pill-icon {
  display: flex;
  align-items: center;
  color: #00F29D;
}

.support-pill-text {
  font-size: 0.775rem;
  font-weight: 700;
  color: #00F29D;
  letter-spacing: 0.02em;
}

/* ================= BOTTOM COPYRIGHT BAR ================= */
.footer-bottom-bar {
  padding: 1.25rem 2rem;
  border-radius: 20px;
  background: rgba(13, 22, 40, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-copyright-text {
  font-size: 0.84rem;
  color: #94A3B8;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.legal-link {
  font-size: 0.84rem;
  color: #94A3B8;
  transition: color 0.25s ease;
}

.legal-link:hover {
  color: #00F29D;
}

.footer-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
}

/* ================= FLOATING BACK TO TOP BUTTON ================= */
.back-to-top-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #0b1528;
  border: 1px solid rgba(0, 242, 157, 0.35);
  color: #00F29D;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 242, 157, 0.2);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  pointer-events: none;
  transform: translateY(15px);
}

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

.back-to-top-btn:hover {
  transform: translateY(-4px) scale(1.1);
  background: var(--accent-primary);
  color: #061019;
  box-shadow: 0 12px 30px rgba(0, 242, 157, 0.45);
}

.top-btn-glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.3) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.back-to-top-btn:hover .top-btn-glow {
  opacity: 1;
}

/* ================= FOOTER RESPONSIVE BREAKPOINTS ================= */
@media screen and (max-width: 1080px) {
  .footer-main-layout {
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
  }

  .footer-translucent-box {
    padding: 2.25rem 2rem;
  }

  .footer-columns-grid {
    gap: 1.75rem;
  }
}

@media screen and (max-width: 860px) {
  .site-footer {
    padding: 5rem 1.5rem 2rem;
  }

  .footer-main-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-brand-desc {
    max-width: 500px;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-contact-col {
    grid-column: span 2;
  }
}

@media screen and (max-width: 580px) {
  .site-footer {
    padding: 4rem 1rem 1.75rem;
  }

  .footer-translucent-box {
    padding: 1.75rem 1.25rem;
    border-radius: 22px;
  }

  .footer-columns-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-contact-col {
    grid-column: span 1;
  }

  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem 1rem;
  }

  .footer-legal-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
  }

  .back-to-top-btn {
    bottom: 1.25rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   OUR CHARGING NETWORK SECTION - Premium Horizontal Stats Banner
   ========================================================================== */
.network-stats-section {
  position: relative;
  width: 100%;
  padding: 4.5rem 2rem 4.5rem;
  background: transparent;
  color: var(--text-white);
  z-index: 10;
}

.network-stats-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}

/* Main Banner Card */
.network-banner-card {
  position: relative;
  width: 100%;
  border-radius: 30px;
  background: linear-gradient(135deg, #071225 0%, #0d1e3d 48%, #08152c 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  padding: 3.5rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.5rem;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.network-banner-card:hover {
  border-color: rgba(0, 242, 157, 0.25);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 242, 157, 0.1);
}

/* Ambient Decorative Glows inside Card */
.network-card-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.network-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.35;
}

.network-glow-left {
  top: -20%;
  left: -5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.25) 0%, transparent 70%);
}

.network-glow-right {
  bottom: -20%;
  right: -5%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.22) 0%, transparent 70%);
}

.network-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
}

/* Left Column: Heading, Tag, Description, CTA */
.network-info-col {
  position: relative;
  z-index: 2;
  max-width: 440px;
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.network-banner-card.is-inview .network-info-col {
  opacity: 1;
  transform: translateX(0);
}

.network-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-primary);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.pulse-spark {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
  animation: pulseDot 2s infinite;
}

.network-title {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 3vw, 2.45rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 0.65rem;
}

.network-description {
  font-size: 0.96rem;
  color: rgba(226, 232, 240, 0.8);
  line-height: 1.55;
  margin-bottom: 1.85rem;
}

/* CTA Button */
.network-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1.65rem;
  border-radius: 9999px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.35);
  color: #00F29D;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 242, 157, 0.08);
}

.cta-arrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.network-cta-btn:hover {
  background: #00F29D;
  border-color: #00F29D;
  color: #071224;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 242, 157, 0.38);
}

.network-cta-btn:hover .cta-arrow-icon {
  transform: translateX(4px);
}

/* Right Column: 3 Horizontal Statistics */
.network-stats-col {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.75rem;
  flex: 1;
  max-width: 620px;
}

.network-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.5rem;
  cursor: default;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.network-banner-card.is-inview .stat-item-1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.network-banner-card.is-inview .stat-item-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.network-banner-card.is-inview .stat-item-3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

.stat-number-wrap {
  position: relative;
  display: inline-block;
}

.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.8vw, 3.4rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.025em;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease, text-shadow 0.3s ease;
}

.network-stat-item:hover .stat-number {
  transform: scale(1.08);
  color: #00F29D;
  text-shadow: 0 0 25px rgba(0, 242, 157, 0.45);
}

.stat-label {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.75);
  margin-top: 0.65rem;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.network-stat-item:hover .stat-label {
  color: #FFFFFF;
}

/* Subtle Vertical Dividers */
.network-stat-divider {
  width: 1px;
  height: 65px;
  background: linear-gradient(180deg, 
    rgba(255, 255, 255, 0.02) 0%, 
    rgba(255, 255, 255, 0.18) 50%, 
    rgba(255, 255, 255, 0.02) 100%
  );
  opacity: 0;
  transition: opacity 0.8s ease 0.35s;
}

.network-banner-card.is-inview .network-stat-divider {
  opacity: 1;
}

/* Responsive Styles */
@media screen and (max-width: 1080px) {
  .network-banner-card {
    padding: 3rem 2.75rem;
    gap: 2.5rem;
  }

  .network-stats-col {
    gap: 1.75rem;
  }

  .stat-number {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 880px) {
  .network-banner-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 2.75rem 2.25rem;
    gap: 2.5rem;
  }

  .network-info-col {
    max-width: 100%;
  }

  .network-stats-col {
    width: 100%;
    max-width: 100%;
    justify-content: space-around;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

@media screen and (max-width: 600px) {
  .network-stats-section {
    padding: 3rem 1.15rem 3.5rem;
  }

  .network-banner-card {
    padding: 2rem 1.4rem;
    border-radius: 22px;
    gap: 2rem;
  }

  .network-title {
    font-size: 1.65rem;
  }

  .network-description {
    font-size: 0.9rem;
    margin-bottom: 1.4rem;
  }

  .network-cta-btn {
    width: 100%;
    justify-content: center;
  }

  .network-stats-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.75rem;
  }

  .network-stat-item {
    align-items: flex-start;
    text-align: left;
    padding: 0;
  }

  .network-stat-divider {
    display: none;
  }

  .stat-number {
    font-size: 2.25rem;
  }

  .stat-label {
    margin-top: 0.35rem;
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   HOW TO CHARGE SECTION - Premium EV 3-Step Journey
   ========================================================================== */
.how-to-charge-section {
  position: relative;
  width: 100%;
  padding: 8rem 2rem 8.5rem;
  background: linear-gradient(180deg, #060B14 0%, #091325 50%, #060B14 100%);
  color: var(--text-white);
  overflow: hidden;
  z-index: 10;
}

/* Ambient Background Lights & Grid */
.charge-bg-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.charge-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.28;
  pointer-events: none;
}

.charge-glow-1 {
  top: 10%;
  left: -8%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, #00F29D 0%, rgba(0, 242, 157, 0) 70%);
}

.charge-glow-2 {
  top: 45%;
  right: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #00D2FF 0%, rgba(0, 210, 255, 0) 70%);
}

.charge-glow-3 {
  bottom: 5%;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #00F29D 0%, rgba(0, 242, 157, 0) 70%);
  opacity: 0.18;
}

.charge-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.15) 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.15) 80%, transparent 100%);
}

.charge-ambient-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  animation: orbDrift 14s ease-in-out infinite alternate;
}

.charge-ambient-orb.orb-1 {
  top: 25%;
  right: 15%;
  width: 280px;
  height: 280px;
  background: rgba(0, 210, 255, 0.08);
}

.charge-ambient-orb.orb-2 {
  bottom: 25%;
  left: 12%;
  width: 320px;
  height: 320px;
  background: rgba(0, 242, 157, 0.06);
  animation-duration: 18s;
  animation-delay: -5s;
}

@keyframes orbDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -35px) scale(1.08); }
  100% { transform: translate(-20px, 25px) scale(0.95); }
}

/* Container */
.charge-container {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
}

/* Section Header */
.charge-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 5rem;
}

.charge-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1.15rem;
  border-radius: 9999px;
  background: rgba(0, 242, 157, 0.08);
  border: 1px solid rgba(0, 242, 157, 0.25);
  box-shadow: 0 0 15px rgba(0, 242, 157, 0.12);
  color: var(--accent-primary);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.charge-eyebrow-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.charge-main-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 4.2vw, 3.25rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}

.charge-heading-gradient {
  background: linear-gradient(135deg, #FFFFFF 15%, #00F29D 60%, #00D2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.charge-sub-description {
  font-size: 1.08rem;
  color: rgba(226, 232, 240, 0.8);
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
}

/* Timeline Wrapper & Vertical Spine Track */
.charge-timeline-wrapper {
  position: relative;
  width: 100%;
}

.charge-spine-track {
  position: absolute;
  top: 3rem;
  bottom: 3rem;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.charge-spine-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    rgba(0, 242, 157, 0.15) 0%, 
    rgba(0, 210, 255, 0.25) 50%, 
    rgba(0, 242, 157, 0.15) 100%
  );
  box-shadow: 0 0 10px rgba(0, 242, 157, 0.15);
}

.charge-spine-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #00F29D 0%, #00D2FF 100%);
  box-shadow: 0 0 14px rgba(0, 242, 157, 0.65), 0 0 24px rgba(0, 210, 255, 0.4);
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Spine Marker Nodes */
.step-spine-node {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.node-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 242, 157, 0.35);
  animation: nodeSpin 12s linear infinite;
}

.node-pulse.cyan {
  border-color: rgba(0, 210, 255, 0.35);
}

.node-pulse.green {
  border-color: rgba(0, 242, 157, 0.35);
}

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

.node-badge {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0b172e;
  border: 2px solid #00F29D;
  box-shadow: 0 0 16px rgba(0, 242, 157, 0.4), inset 0 0 8px rgba(0, 242, 157, 0.2);
  color: #00F29D;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.node-badge.cyan {
  border-color: #00D2FF;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.4), inset 0 0 8px rgba(0, 210, 255, 0.2);
  color: #00D2FF;
}

.node-badge.green {
  border-color: #00F29D;
  box-shadow: 0 0 16px rgba(0, 242, 157, 0.4), inset 0 0 8px rgba(0, 242, 157, 0.2);
  color: #00F29D;
}

/* Step Rows Layout */
.charge-step-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 6rem;
  z-index: 2;
}

.charge-step-row:last-child {
  margin-bottom: 0;
}

/* Step Column */
.step-col {
  position: relative;
  width: 100%;
}

/* Image Card */
.step-image-card {
  position: relative;
  border-radius: 26px;
  background: rgba(11, 22, 44, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 0.65rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.step-image-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 242, 157, 0.35);
  box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 242, 157, 0.15);
}

.step-row-02 .step-image-card:hover {
  border-color: rgba(0, 210, 255, 0.35);
  box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 210, 255, 0.15);
}

.step-image-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  min-height: 290px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #091325;
}

.step-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.step-image-card:hover .step-img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* High-Tech Fallback Graphic (Shown ONLY if image fails to load) */
.step-graphic-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #102144 0%, #081122 80%);
  padding: 2rem;
  text-align: center;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.use-placeholder-graphic .step-graphic-fallback {
  display: flex;
}

.use-placeholder-graphic .step-img {
  display: none;
}

.step-graphic-fallback.cyan {
  background: radial-gradient(circle at center, #0e274b 0%, #081122 80%);
}

.fallback-tech-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 242, 157, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 242, 157, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.fallback-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.25);
  color: #00F29D;
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
  z-index: 2;
}

.fallback-status-tag.cyan {
  background: rgba(0, 210, 255, 0.1);
  border-color: rgba(0, 210, 255, 0.25);
  color: #00D2FF;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
  animation: pulseDot 2s infinite;
}

.pulse-dot.cyan {
  background: #00D2FF;
  box-shadow: 0 0 8px #00D2FF;
}

.pulse-dot.green {
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.fallback-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: rgba(0, 242, 157, 0.08);
  border: 1px solid rgba(0, 242, 157, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00F29D;
  margin-bottom: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 242, 157, 0.1);
  z-index: 2;
}

.fallback-icon-wrap.cyan {
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.2);
  color: #00D2FF;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 210, 255, 0.1);
}

.fallback-icon-wrap.green {
  background: rgba(0, 242, 157, 0.08);
  border-color: rgba(0, 242, 157, 0.2);
  color: #00F29D;
}

.fallback-info {
  z-index: 2;
}

.fallback-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
}

.fallback-desc {
  display: block;
  font-size: 0.82rem;
  color: rgba(226, 232, 240, 0.7);
}

/* Glass Badge Inside Image */
.step-glass-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.95rem;
  border-radius: 9999px;
  background: rgba(8, 17, 34, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  font-size: 0.8rem;
  font-weight: 600;
  color: #FFFFFF;
  pointer-events: none;
}

.badge-top-right {
  top: 1rem;
  right: 1rem;
}

.badge-bottom-left {
  bottom: 1rem;
  left: 1rem;
}

.badge-icon-box {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-icon-box.green {
  background: rgba(0, 242, 157, 0.2);
  color: #00F29D;
}

.badge-icon-box.cyan {
  background: rgba(0, 210, 255, 0.2);
  color: #00D2FF;
}

.step-card-glow {
  position: absolute;
  inset: -15px;
  border-radius: 35px;
  filter: blur(35px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.step-card-glow.glow-green {
  background: radial-gradient(circle, rgba(0, 242, 157, 0.2) 0%, transparent 70%);
}

.step-card-glow.glow-cyan {
  background: radial-gradient(circle, rgba(0, 210, 255, 0.2) 0%, transparent 70%);
}

.step-image-card:hover .step-card-glow {
  opacity: 1;
}

/* ================= HOW TO CHARGE: STEP CONTENT CARDS ================= */
.how-to-charge-section .step-content-card,
.step-content-card {
  position: relative;
  padding: 2.75rem 2.5rem;
  background: rgba(11, 23, 44, 0.88) !important;
  border: 1px solid rgba(0, 242, 157, 0.22) !important;
  border-radius: 26px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.65), 0 0 25px rgba(0, 242, 157, 0.08) !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.how-to-charge-section .step-content-card:hover,
.step-content-card:hover {
  border-color: rgba(0, 242, 157, 0.45) !important;
  box-shadow: 0 25px 55px -8px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 242, 157, 0.15) !important;
  transform: translateY(-3px);
}

.how-to-charge-section .step-badge-row,
.step-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.how-to-charge-section .step-num-pill,
.step-num-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.3);
  color: #00F29D;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.how-to-charge-section .step-num-pill.cyan,
.step-num-pill.cyan {
  background: rgba(0, 210, 255, 0.12);
  border-color: rgba(0, 210, 255, 0.3);
  color: #00D2FF;
}

.how-to-charge-section .step-num-pill.green,
.step-num-pill.green {
  background: rgba(0, 242, 157, 0.12);
  border-color: rgba(0, 242, 157, 0.3);
  color: #00F29D;
}

.step-num-sep {
  opacity: 0.55;
  font-size: 0.75rem;
}

.step-num-max {
  opacity: 0.75;
  font-size: 0.75rem;
}

.how-to-charge-section .step-tag-text,
.step-tag-text {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #00F29D;
}

.how-to-charge-section .step-tag-text.cyan,
.step-tag-text.cyan {
  color: #00D2FF;
}

.how-to-charge-section .step-tag-text.green,
.step-tag-text.green {
  color: #00F29D;
}

.how-to-charge-section .step-title-group,
.step-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

.how-to-charge-section .step-icon-bubble,
.step-icon-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 242, 157, 0.15);
  border: 1px solid rgba(0, 242, 157, 0.3);
  color: #00F29D;
  flex-shrink: 0;
}

.how-to-charge-section .step-icon-bubble.cyan,
.step-icon-bubble.cyan {
  background: rgba(0, 210, 255, 0.15);
  border-color: rgba(0, 210, 255, 0.3);
  color: #00D2FF;
}

.how-to-charge-section .step-heading,
.step-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 800;
  color: #FFFFFF !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.how-to-charge-section .step-paragraph,
.step-paragraph {
  font-size: 1.02rem;
  color: rgba(226, 232, 240, 0.9) !important;
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

/* Feature Check Chips */
.how-to-charge-section .step-features-grid,
.step-features-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.how-to-charge-section .step-feature-item,
.step-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #F8FAFC !important;
}

.how-to-charge-section .feature-bullet,
.feature-bullet {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.how-to-charge-section .feature-bullet.green,
.feature-bullet.green {
  background: rgba(0, 242, 157, 0.2);
  color: #00F29D;
}

.how-to-charge-section .feature-bullet.cyan,
.feature-bullet.cyan {
  background: rgba(0, 210, 255, 0.2);
  color: #00D2FF;
}
  background: rgba(0, 210, 255, 0.15);
  color: #00D2FF;
}

/* Scroll Animations - Fully Visible by Default, Enhanced with Smooth Inview Transitions */
.slide-from-left,
.slide-from-right {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.charge-step-row.is-inview .slide-from-left,
.charge-step-row.is-inview .slide-from-right {
  opacity: 1;
  transform: translateX(0);
}

.charge-step-row.is-inview .step-spine-node .node-badge {
  transform: scale(1.1);
}

/* ================= RESPONSIVE DESIGN ================= */
@media screen and (max-width: 1080px) {
  .charge-step-row {
    gap: 3.5rem;
    margin-bottom: 5rem;
  }

  .step-content-card {
    padding: 2.2rem 1.85rem;
  }
}

@media screen and (max-width: 900px) {
  .how-to-charge-section {
    padding: 6rem 1.5rem 6.5rem;
  }

  .charge-header {
    margin-bottom: 3.5rem;
  }

  .charge-step-row {
    gap: 2.5rem;
    margin-bottom: 4rem;
  }

  .step-image-inner {
    min-height: 250px;
  }

  .step-heading {
    font-size: 1.45rem;
  }

  .step-paragraph {
    font-size: 0.92rem;
  }
}

/* Mobile Screens (Single column layout) */
@media screen and (max-width: 768px) {
  .how-to-charge-section {
    padding: 5rem 1.15rem 5.5rem;
  }

  .charge-header {
    margin-bottom: 3rem;
  }

  .charge-spine-track {
    display: none;
  }

  .step-spine-node {
    display: none;
  }

  .charge-step-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }

  /* Keep regular DOM order on mobile for Step 02 (Image first or Content first) */
  .step-row-reversed .step-col:nth-child(2) {
    order: 2; /* Content */
  }

  .step-row-reversed .step-col:nth-child(3) {
    order: 1; /* Image */
  }

  .step-image-inner {
    aspect-ratio: 16 / 11;
    min-height: 220px;
  }

  .step-content-card {
    padding: 1.75rem 1.35rem;
    border-radius: 20px;
  }

  .step-heading {
    font-size: 1.35rem;
  }

  .slide-from-left,
  .slide-from-right {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@media screen and (max-width: 480px) {
  .charge-main-heading {
    font-size: 1.8rem;
  }

  .charge-sub-description {
    font-size: 0.95rem;
  }

  .fallback-icon-wrap {
    width: 64px;
    height: 64px;
  }

  .fallback-icon-wrap svg {
    width: 42px;
    height: 42px;
  }

  .step-glass-badge {
    font-size: 0.725rem;
    padding: 0.35rem 0.75rem;
  }
}

/* ==========================================================================
   ABOUT US PAGE - CODE GREEN / GOGREEN EV MOBILITY BRANDING
   ========================================================================== */

/* Base & Tag Pills */
.about-page-body {
  background-color: var(--bg-primary);
  color: var(--text-dark);
}

.section-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.95rem;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.28);
  border-radius: 999px;
  color: #059669;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  display: inline-block;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

/* ================= 1. HERO BANNER ================= */
.about-hero-section {
  position: relative;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #060c16;
  color: var(--text-white);
  padding: 8.5rem 1.5rem 6.5rem;
  overflow: hidden;
  text-align: center;
}

.about-hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.about-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.42;
  filter: contrast(1.1) brightness(0.75);
  animation: heroBgZoom 20s infinite alternate ease-in-out;
}

.about-hero-bg-img.hide-img {
  display: none;
}

@keyframes heroBgZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, 
    rgba(6, 12, 22, 0.85) 0%, 
    rgba(6, 12, 22, 0.7) 45%, 
    rgba(6, 12, 22, 0.95) 100%
  );
}

.about-hero-mesh-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.25;
  pointer-events: none;
}

.about-hero-mesh-glow.glow-1 {
  top: -100px;
  left: 10%;
  background: radial-gradient(circle, #00F29D 0%, transparent 70%);
}

.about-hero-mesh-glow.glow-2 {
  bottom: -100px;
  right: 10%;
  background: radial-gradient(circle, #00D2FF 0%, transparent 70%);
}

.about-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 80%);
}

.about-hero-container {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
}

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

.about-badge {
  margin-bottom: 1.5rem;
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-white);
  margin-bottom: 1.35rem;
  max-width: 860px;
}

.about-hero-subtitle {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 680px;
  margin-bottom: 2.25rem;
  font-weight: 400;
}

.about-hero-cta-wrap {
  display: flex;
  justify-content: center;
}

.hero-vision-btn {
  padding: 0.95rem 2.2rem;
  font-size: 1.05rem;
  box-shadow: 0 8px 25px rgba(0, 242, 157, 0.35);
}

.about-hero-curve-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 3;
  pointer-events: none;
}

.about-hero-curve-bottom svg {
  display: block;
  width: 100%;
  height: 50px;
}


/* ================= 2. ABOUT GOGREEN (SPLIT SECTION) ================= */
.about-story-section {
  padding: 7rem 1.5rem;
  background: var(--bg-primary);
  position: relative;
}

.about-story-container {
  max-width: 1240px;
  margin: 0 auto;
}

.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4.5rem;
  align-items: center;
}

/* Left Visual Card */
.story-image-card {
  position: relative;
  border-radius: 28px;
  background: #09121f;
  border: 1px solid rgba(0, 242, 157, 0.2);
  box-shadow: 0 24px 50px -15px rgba(9, 18, 31, 0.15), 0 0 30px rgba(0, 242, 157, 0.08);
  padding: 12px;
}

.story-image-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #071426 0%, #03201a 100%);
}

.story-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-image-card:hover .story-main-image {
  transform: scale(1.05);
}

.story-img-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 14, 26, 0.8) 100%);
  pointer-events: none;
}

/* Fallback Graphic */
.story-graphic-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, #0a2522 0%, #06111e 80%);
  color: #fff;
  text-align: center;
  padding: 2rem;
}

.show-fallback .story-graphic-fallback {
  display: flex;
}

.show-fallback .story-main-image {
  display: none;
}

.fallback-icon-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 242, 157, 0.12);
  border: 2px solid rgba(0, 242, 157, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  box-shadow: 0 0 25px rgba(0, 242, 157, 0.3);
}

.fallback-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.3rem;
}

.fallback-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Floating Tag */
.story-floating-tag {
  position: absolute;
  bottom: -22px;
  right: 25px;
  background: rgba(7, 16, 30, 0.88);
  border: 1px solid rgba(0, 242, 157, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 0.85rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 242, 157, 0.15);
  z-index: 4;
}

.floating-tag-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary);
  animation: pulseDot 2s infinite ease-in-out;
}

.floating-tag-icon {
  color: var(--accent-primary);
  display: flex;
  align-items: center;
}

.floating-tag-text {
  display: flex;
  flex-direction: column;
}

.tag-bold {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

.tag-sub {
  font-size: 0.72rem;
  color: var(--accent-primary);
  font-weight: 600;
}

/* Right Content */
.story-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-bottom: 1.25rem;
}

.story-lead-para {
  font-size: 1.12rem;
  color: #1e293b;
  font-weight: 600;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.story-secondary-para {
  font-size: 0.98rem;
  color: var(--text-slate);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.story-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.story-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  padding: 1.15rem 1.35rem;
  background: var(--bg-surface-light);
  border: 1px solid rgba(0, 242, 157, 0.18);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  transition: all var(--transition-smooth);
}

.story-highlight-card:hover {
  transform: translateX(6px);
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 10px 25px rgba(0, 242, 157, 0.1);
}

.highlight-icon-box {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.15) 0%, rgba(0, 210, 255, 0.1) 100%);
  border: 1px solid rgba(0, 242, 157, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
}

.highlight-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.highlight-desc {
  font-size: 0.88rem;
  color: var(--text-slate);
  line-height: 1.5;
}


/* ================= 3. MISSION & VISION (PREMIUM SPLIT SECTION) ================= */
.mission-vision-section {
  padding: 7.5rem 1.5rem;
  background: #060c18;
  color: var(--text-white);
  position: relative;
  overflow: hidden;
}

.mv-bg-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.mv-glow-orb {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.18;
}

.mv-glow-1 {
  top: 10%;
  left: -100px;
  background: #00F29D;
}

.mv-glow-2 {
  bottom: 10%;
  right: -100px;
  background: #00D2FF;
}

.mv-connecting-svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 200px;
  transform: translateY(-50%);
  opacity: 0.35;
}

.mission-vision-container {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}

.mv-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4.5rem;
}

.mv-main-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-white);
  margin-bottom: 1.15rem;
}

.mv-main-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.mv-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.mv-card {
  position: relative;
  background: rgba(13, 23, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  padding: 3rem 2.75rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mv-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 242, 157, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 35px rgba(0, 242, 157, 0.15);
}

.mv-card-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.15;
  pointer-events: none;
  top: -40px;
  right: -40px;
}

.vision-glow {
  background: #00D2FF;
}

.mission-glow {
  background: #00F29D;
}

.mv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.mv-icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vision-badge {
  background: rgba(0, 210, 255, 0.15);
  border: 1px solid rgba(0, 210, 255, 0.35);
  color: #00D2FF;
}

.mission-badge {
  background: rgba(0, 242, 157, 0.15);
  border: 1px solid rgba(0, 242, 157, 0.35);
  color: var(--accent-primary);
}

.mv-card-type {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-subtle);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.mv-card-heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.mv-card-text {
  font-size: 1.02rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.15rem;
}

.mv-card-text strong {
  color: #ffffff;
  font-weight: 700;
}

/* Vision Stat Callout */
.mv-stat-callout {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.1) 0%, rgba(0, 210, 255, 0.08) 100%);
  border: 1px solid rgba(0, 242, 157, 0.28);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0 1rem;
}

.stat-callout-icon {
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 242, 157, 0.15);
}

.stat-callout-number {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}

.stat-callout-label {
  font-size: 0.85rem;
  color: var(--accent-primary);
  font-weight: 600;
}

.mv-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  width: fit-content;
}

.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00D2FF;
}

/* Mission Pillars */
.mission-pillars-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.mission-pillar-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.95rem 1.15rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
}

.pillar-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent-primary);
}

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

.pillar-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.pillar-desc {
  font-size: 0.82rem;
  color: var(--text-subtle);
  line-height: 1.4;
}


/* ================= 4. WHAT WE DO ================= */
.what-we-do-section {
  padding: 7.5rem 1.5rem;
  background: var(--bg-primary);
  position: relative;
}

.what-we-do-container {
  max-width: 1240px;
  margin: 0 auto;
}

.wwd-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 4.5rem;
}

.wwd-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1.15rem;
  letter-spacing: -0.02em;
}

.wwd-subtitle {
  font-size: 1.08rem;
  color: var(--text-slate);
  line-height: 1.65;
}

.wwd-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.wwd-card {
  position: relative;
  background: var(--bg-surface-light);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 26px;
  padding: 2.75rem 2.25rem 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.wwd-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 25px rgba(0, 242, 157, 0.12);
  border-color: rgba(0, 242, 157, 0.4);
}

.wwd-featured-card {
  background: linear-gradient(180deg, #091728 0%, #06111f 100%);
  color: var(--text-white);
  border-color: rgba(0, 242, 157, 0.35);
  box-shadow: 0 18px 45px rgba(6, 17, 31, 0.25), 0 0 35px rgba(0, 242, 157, 0.15);
  transform: scale(1.02);
}

.wwd-featured-card:hover {
  transform: scale(1.02) translateY(-8px);
}

.wwd-featured-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #00F29D 0%, #00D2FF 100%);
  color: #060c16;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.35rem;
}

.wwd-number-badge {
  position: absolute;
  top: 1.75rem;
  right: 2rem;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
}

.wwd-featured-card .wwd-number-badge {
  color: rgba(255, 255, 255, 0.08);
  top: 2.2rem;
}

.wwd-icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  margin-bottom: 1.75rem;
  transition: transform var(--transition-bounce);
}

.wwd-featured-card .wwd-icon-circle {
  background: rgba(0, 242, 157, 0.2);
  color: var(--accent-primary);
  border-color: rgba(0, 242, 157, 0.4);
}

.wwd-card:hover .wwd-icon-circle {
  transform: scale(1.1) rotate(5deg);
}

.wwd-card-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.95rem;
  letter-spacing: -0.01em;
}

.wwd-featured-card .wwd-card-title {
  color: #ffffff;
}

.wwd-card-desc {
  font-size: 0.95rem;
  color: var(--text-slate);
  line-height: 1.65;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.wwd-featured-card .wwd-card-desc {
  color: var(--text-muted);
}

.wwd-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.wwd-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
}

.wwd-featured-card .wwd-pill {
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent-primary);
  border: 1px solid rgba(0, 242, 157, 0.2);
}


/* ================= 5. OUR TEAM ================= */
.our-team-section {
  padding: 7.5rem 1.5rem;
  background: #f8fafc;
  position: relative;
}

.our-team-container {
  max-width: 1240px;
  margin: 0 auto;
}

.team-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4.5rem;
}

.team-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.team-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted-dark);
}

/* Asymmetrical Layout: CEO Card + 3 Member Cards */
.team-showcase-layout {
  display: grid;
  grid-template-columns: 1.15fr 1.85fr;
  gap: 2.5rem;
  align-items: stretch;
}

/* Base Team Card */
.team-card {
  position: relative;
  background: var(--bg-surface-light);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08), 0 0 30px rgba(0, 242, 157, 0.15);
  border-color: rgba(0, 242, 157, 0.45);
}

/* Featured CEO Card */
.team-card-featured {
  background: linear-gradient(180deg, #091524 0%, #050e1a 100%);
  color: var(--text-white);
  border: 1px solid rgba(0, 242, 157, 0.35);
  box-shadow: 0 18px 45px rgba(6, 17, 31, 0.25), 0 0 35px rgba(0, 242, 157, 0.15);
}

.featured-leader-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(6, 14, 26, 0.85);
  border: 1px solid rgba(0, 242, 157, 0.4);
  backdrop-filter: blur(10px);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
}

.leader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
}

.team-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Team Image Wrapper */
.team-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  background: #0f1f33;
  overflow: hidden;
}

.team-card-featured .team-image-wrapper {
  aspect-ratio: 1 / 1;
}

.team-member-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover .team-member-photo {
  transform: scale(1.08);
}

/* Fallback Avatar Graphics */
.team-avatar-fallback {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #0b1a2d 0%, #05241b 100%);
  color: #fff;
}

.use-avatar-fallback .team-avatar-fallback {
  display: flex;
}

.use-avatar-fallback .team-member-photo {
  display: none;
}

.avatar-initials {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--accent-primary);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(0, 242, 157, 0.12);
  border: 2px solid rgba(0, 242, 157, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 0 25px rgba(0, 242, 157, 0.2);
}

.avatar-role-tag {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.team-badge-overlay {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(6, 14, 26, 0.85);
  border: 1px solid rgba(0, 242, 157, 0.4);
  backdrop-filter: blur(8px);
  color: var(--accent-primary);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Team Info Body */
.team-info-body {
  padding: 1.65rem 1.65rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.team-member-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

.team-card-featured .team-member-name {
  color: #ffffff;
  font-size: 1.65rem;
}

.team-member-position {
  font-size: 0.92rem;
  font-weight: 600;
  color: #059669;
  display: block;
  margin-bottom: 0.65rem;
}

.team-card-featured .team-member-position {
  color: var(--accent-primary);
  font-size: 1.02rem;
}

.team-member-bio {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.team-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: auto;
}

.team-card-featured .team-footer-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.team-tag-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-primary);
  background: rgba(0, 242, 157, 0.12);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 242, 157, 0.25);
}

.member-department-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
}

.team-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: all var(--transition-fast);
}

.team-card-featured .team-social-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.team-card:hover .team-social-btn {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #060c16;
  box-shadow: 0 0 12px rgba(0, 242, 157, 0.4);
  transform: scale(1.08);
}

/* Members Grid: 3 Cards */
.team-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}


/* ================= 6. IMPACT / FUTURE VISION (STATISTICS) ================= */
.about-stats-section {
  padding: 2.5rem 1.5rem 7.5rem;
  background: #f8fafc;
  position: relative;
}

.about-stats-container {
  max-width: 1240px;
  margin: 0 auto;
}

.stats-glass-board {
  position: relative;
  background: linear-gradient(135deg, #091626 0%, #05101d 100%);
  border: 1px solid rgba(0, 242, 157, 0.28);
  border-radius: 30px;
  padding: 4rem 3.5rem;
  box-shadow: 0 25px 60px -15px rgba(6, 17, 31, 0.35), 0 0 40px rgba(0, 242, 157, 0.12);
  overflow: hidden;
}

.stats-ambient-light {
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.stats-board-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 3.5rem;
}

.stats-board-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #ffffff;
  margin-top: 0.5rem;
}

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

.impact-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  transition: all var(--transition-smooth);
}

.impact-stat-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 242, 157, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 242, 157, 0.1);
}

.impact-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  margin-bottom: 1.25rem;
}

.impact-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.impact-number.text-static {
  background: linear-gradient(135deg, #00F29D 0%, #00D2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.impact-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.4;
}


/* ================= 7. FINAL CTA ================= */
.about-cta-section {
  padding: 4rem 1.5rem 8rem;
  background: var(--bg-primary);
  position: relative;
}

.about-cta-container {
  max-width: 1140px;
  margin: 0 auto;
}

.about-cta-card {
  position: relative;
  background: linear-gradient(135deg, #071524 0%, #041f17 50%, #051220 100%);
  border: 1px solid rgba(0, 242, 157, 0.35);
  border-radius: 32px;
  padding: 5rem 3rem;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(6, 17, 31, 0.3), 0 0 50px rgba(0, 242, 157, 0.15);
}

.cta-glow {
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.3;
}

.cta-glow-left {
  top: -100px;
  left: -100px;
  background: #00F29D;
}

.cta-glow-right {
  bottom: -100px;
  right: -100px;
  background: #00D2FF;
}

.cta-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

.cta-content-wrapper {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}

.cta-badge {
  margin-bottom: 1.5rem;
}

.cta-main-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

.cta-description {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 2.75rem;
}

.cta-buttons-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.cta-btn-franchise {
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
}

.cta-btn-network {
  padding: 1rem 2.2rem;
  font-size: 1.05rem;
}


/* ================= SCROLL REVEAL UTILITIES ================= */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================= RESPONSIVE MEDIA QUERIES ================= */

/* Laptop & Medium Desktops */
@media screen and (max-width: 1199px) {
  .about-story-grid {
    gap: 3rem;
  }

  .team-showcase-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .team-card-featured {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
  }

  .team-members-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-grid-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Tablets (1024px & 768px) */
@media screen and (max-width: 991px) {
  .about-hero-section {
    min-height: 65vh;
    padding: 7.5rem 1.25rem 5.5rem;
  }

  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .story-visual-col {
    max-width: 580px;
    margin: 0 auto;
    width: 100%;
  }

  .mv-cards-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .what-we-do-section {
    padding: 5.5rem 1.25rem;
  }

  .wwd-features-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .wwd-featured-card {
    transform: none;
  }

  .wwd-featured-card:hover {
    transform: translateY(-8px);
  }

  .team-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-glass-board {
    padding: 3rem 2rem;
  }
}

/* Mobile Screens */
@media screen and (max-width: 767px) {
  .about-hero-section {
    min-height: 60vh;
    padding: 6.5rem 1rem 4.5rem;
  }

  .about-story-section {
    padding: 4.5rem 1rem;
  }

  .story-image-card {
    padding: 8px;
    border-radius: 20px;
  }

  .story-floating-tag {
    position: static;
    margin-top: 1rem;
    width: 100%;
    justify-content: center;
  }

  .mission-vision-section {
    padding: 5rem 1rem;
  }

  .mv-card {
    padding: 2.2rem 1.5rem;
    border-radius: 22px;
  }

  .mv-connecting-svg {
    display: none;
  }

  .our-team-section {
    padding: 5rem 1rem;
  }

  .team-members-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .about-stats-section {
    padding: 1.5rem 1rem 5rem;
  }

  .stats-glass-board {
    padding: 2.5rem 1.25rem;
    border-radius: 22px;
  }

  .stats-grid-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-cta-section {
    padding: 2rem 1rem 5rem;
  }

  .about-cta-card {
    padding: 3.5rem 1.5rem;
    border-radius: 24px;
  }

  .cta-buttons-row {
    flex-direction: column;
    width: 100%;
  }

  .cta-buttons-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Very Small Mobile Screens */
@media screen and (max-width: 480px) {
  .about-hero-title {
    font-size: 2rem;
  }

  .about-hero-subtitle {
    font-size: 0.95rem;
  }

  .story-heading {
    font-size: 1.85rem;
  }

  .mv-main-title,
  .wwd-title,
  .team-title,
  .cta-main-heading {
    font-size: 1.85rem;
  }

  .mv-card-heading {
    font-size: 1.6rem;
  }

  .stat-callout-number {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   CLEAN & PRECISE ABOUT US SECTIONS (EXACT CONTENT PRESENTATION)
   ========================================================================== */

.story-quote-card {
  background: var(--bg-surface-light);
  border: 1px solid rgba(0, 242, 157, 0.25);
  border-left: 4px solid var(--accent-primary);
  border-radius: 18px;
  padding: 1.75rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  margin-top: 1rem;
}

.story-quote-card .story-lead-para {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--text-slate);
  font-weight: 500;
  margin-bottom: 0;
  font-style: normal;
  letter-spacing: -0.01em;
}

.section-clean-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: var(--text-white);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

/* ================= 3. VISION SECTION (CLEAN & HIGHLIGHTED) ================= */
.vision-section-clean {
  padding: 6.5rem 1.5rem;
  background: #060c18;
  color: var(--text-white);
  position: relative;
  overflow: hidden;
}

.vision-clean-container {
  max-width: 1140px;
  margin: 0 auto;
}

.vision-card-master {
  position: relative;
  background: rgba(13, 23, 38, 0.8);
  border: 1px solid rgba(0, 242, 157, 0.28);
  border-radius: 30px;
  padding: 4rem 3.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px -15px rgba(6, 17, 31, 0.4), 0 0 40px rgba(0, 242, 157, 0.12);
  overflow: hidden;
}

.vision-card-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.vision-lead-text {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 2.75rem;
  letter-spacing: -0.01em;
}

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

.vision-stat-card {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.85rem 1.5rem;
  text-align: center;
  overflow: hidden;
  transition: all var(--transition-smooth);
}

.vision-stat-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 242, 157, 0.15);
}

.stat-card-featured {
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.12) 0%, rgba(0, 210, 255, 0.08) 100%);
  border-color: rgba(0, 242, 157, 0.35);
}

.stat-tag-label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.stat-highlight-val {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}


/* ================= 4. MISSION SECTION (CLEAN) ================= */
.mission-section-clean {
  padding: 6.5rem 1.5rem;
  background: var(--bg-primary);
  color: var(--text-dark);
  position: relative;
}

.mission-clean-container {
  max-width: 1140px;
  margin: 0 auto;
}

.mission-card-master {
  position: relative;
  background: var(--bg-surface-light);
  border: 1px solid rgba(0, 242, 157, 0.25);
  border-radius: 30px;
  padding: 4rem 3.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04), 0 0 30px rgba(0, 242, 157, 0.08);
  overflow: hidden;
}

.mission-card-master .section-clean-title {
  color: var(--text-dark);
}

.mission-card-glow {
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.mission-lead-text {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-slate);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.01em;
}


/* ================= 5. WHAT WE DO (CLEAN) ================= */
.what-we-do-clean-section {
  padding: 6.5rem 1.5rem;
  background: #060c18;
  color: var(--text-white);
  position: relative;
  overflow: hidden;
}

.what-we-do-clean-container {
  max-width: 1140px;
  margin: 0 auto;
}

.wwd-clean-card {
  position: relative;
  background: rgba(13, 23, 38, 0.8);
  border: 1px solid rgba(0, 242, 157, 0.28);
  border-radius: 30px;
  padding: 4rem 3.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px -15px rgba(6, 17, 31, 0.4), 0 0 40px rgba(0, 242, 157, 0.12);
  overflow: hidden;
}

.wwd-clean-glow {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.wwd-primary-para {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

.wwd-secondary-pill {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.15) 0%, rgba(0, 210, 255, 0.1) 100%);
  border: 1px solid rgba(0, 242, 157, 0.35);
  border-radius: 20px;
  padding: 1.15rem 1.75rem;
}

.pill-sparkle {
  font-size: 1.25rem;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.wwd-secondary-para {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: 0;
  letter-spacing: -0.01em;
}


/* ================= 6. OUR TEAM (CLEAN & MODERN) ================= */
.our-team-clean-section {
  padding: 7rem 1.5rem;
  background: var(--bg-primary);
  position: relative;
}

.our-team-clean-container {
  max-width: 1180px;
  margin: 0 auto;
}

.our-team-clean-section .section-clean-title {
  color: var(--text-dark);
}

.team-clean-showcase {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

/* Base Clean Team Card */
.team-clean-card {
  position: relative;
  background: var(--bg-surface-light);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.team-clean-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08), 0 0 30px rgba(0, 242, 157, 0.15);
  border-color: rgba(0, 242, 157, 0.45);
}

/* Featured CEO Card Layout - Centered & Prominent */
.team-ceo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  border-radius: 26px;
  background: linear-gradient(135deg, #091728 0%, #06111f 100%);
  color: #ffffff;
  border: 1px solid rgba(0, 242, 157, 0.38);
  box-shadow: 0 20px 50px rgba(6, 17, 31, 0.3), 0 0 40px rgba(0, 242, 157, 0.18);
}

.team-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.08;
  background: #0d1b2a;
  overflow: hidden;
}

.team-ceo-card .team-image-box {
  width: 100%;
  aspect-ratio: 1 / 1.12;
  height: auto;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-clean-card:hover .team-photo {
  transform: scale(1.08);
}

.team-avatar-box {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0b1a2d 0%, #05241b 100%);
}

.show-avatar .team-avatar-box {
  display: flex;
}

.show-avatar .team-photo {
  display: none;
}

.avatar-circle {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--accent-primary);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 242, 157, 0.12);
  border: 2px solid rgba(0, 242, 157, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 242, 157, 0.2);
}

.team-details-box {
  padding: 1.65rem 1.5rem;
}

.team-ceo-card .team-details-box {
  padding: 1.85rem 1.75rem 2rem;
  width: 100%;
}

.team-name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-dark);
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}

.team-ceo-card .team-name {
  color: #ffffff;
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}

.team-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: #059669;
  display: block;
}

.team-ceo-card .team-role {
  color: var(--accent-primary);
  font-size: 1.05rem;
}

.team-clean-members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* Responsive Queries for Clean Layout */
@media screen and (max-width: 991px) {
  .vision-highlights-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .team-clean-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .vision-card-master,
  .mission-card-master,
  .wwd-clean-card {
    padding: 2.5rem 1.5rem;
    border-radius: 22px;
  }

  .team-clean-members-grid {
    grid-template-columns: 1fr;
  }

  .wwd-secondary-pill {
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.25rem;
  }
}

/* ==========================================================================
   MISSION & VISION INTERACTIVE TAB SECTION
   ========================================================================== */
.mission-vision-tab-section {
  padding: 6.5rem 1.5rem;
  background: #060c18;
  color: var(--text-white);
  position: relative;
  overflow: hidden;
}

.mv-tab-container {
  max-width: 1140px;
  margin: 0 auto;
}

.mv-tab-card {
  position: relative;
  background: rgba(13, 23, 38, 0.85);
  border: 1px solid rgba(0, 242, 157, 0.28);
  border-radius: 30px;
  padding: 4rem 3.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 25px 60px -15px rgba(6, 17, 31, 0.45), 0 0 40px rgba(0, 242, 157, 0.12);
  overflow: hidden;
}

.mv-tab-card-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.18) 0%, rgba(0, 210, 255, 0.12) 50%, transparent 70%);
  pointer-events: none;
}

.mv-tab-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.75rem;
}

.mv-tab-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  margin-top: 1rem;
}

.mv-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.tab-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.mv-tab-btn:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.mv-tab-btn.active {
  background: linear-gradient(135deg, #00F29D 0%, #00D2FF 100%);
  color: #060c16;
  box-shadow: 0 0 25px rgba(0, 242, 157, 0.45);
}

.mv-tab-btn.active .tab-btn-icon {
  transform: scale(1.1);
}

.mv-tab-panels {
  position: relative;
  min-height: 200px;
}

.mv-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mv-tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.panel-sub-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}

.mv-lead-text {
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 767px) {
  .mv-tab-card {
    padding: 2.5rem 1.5rem;
    border-radius: 22px;
  }

  .mv-tab-nav {
    width: 100%;
    justify-content: center;
  }

  .mv-tab-btn {
    flex: 1;
    padding: 0.65rem 1rem;
    font-size: 0.92rem;
    justify-content: center;
  }
}

/* ==========================================================================
   LOCATIONS PAGE STYLES - LIGHT THEME EV CHARGING NETWORK
   ========================================================================== */

.locations-page-body {
  background-color: #F8FAFC;
  color: #0F172A;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2. MAP SHOWCASE SECTION (LIGHT THEME)
   -------------------------------------------------------------------------- */
.map-showcase-section {
  position: relative;
  width: 100%;
  padding: 3rem 1.5rem 7rem;
  background: linear-gradient(180deg, #F8FAFC 0%, #F0FDF4 50%, #F8FAFC 100%);
}

.map-showcase-container {
  max-width: 1320px;
  margin: 0 auto;
}

.map-section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.map-section-header .section-tag-pill {
  background: rgba(0, 242, 157, 0.15);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.map-section-header .tag-dot {
  background: #059669;
  box-shadow: 0 0 8px #059669;
}

.map-main-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  margin: 0.75rem 0 1rem;
}

.map-main-title .text-gradient {
  background: linear-gradient(135deg, #059669 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.map-main-desc {
  font-family: var(--font-body);
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   MAP WORKSPACE CARD & AMBIENT GLOW
   -------------------------------------------------------------------------- */
.map-workspace-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(5, 150, 105, 0.18);
  border-radius: 28px;
  padding: 1.75rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 3.5rem;
}

.map-iframe-card {
  padding: 0.85rem;
  border-radius: 24px;
}

.map-card-ambient-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   GOOGLE MY MAPS IFRAME & OVERLAY
   -------------------------------------------------------------------------- */
.iframe-container {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(5, 150, 105, 0.2);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: linear-gradient(180deg, #070e1c 0%, rgba(7, 14, 28, 0.96) 90%, rgba(7, 14, 28, 0.85) 100%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid rgba(0, 242, 157, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.iframe-overlay-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.overlay-brand-icon {
  font-size: 1.1rem;
  color: #00F29D;
  filter: drop-shadow(0 0 6px #00F29D);
}

.overlay-brand-text {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.overlay-brand-text span {
  font-size: 0.75rem;
  font-weight: 700;
  color: #00F29D;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.25);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.05em;
}

.iframe-overlay-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(241, 245, 249, 0.9);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.google-map-iframe {
  width: 100%;
  height: 740px;
  border: none;
  display: block;
  background: #ffffff;
}

@media screen and (max-width: 1024px) {
  .google-map-iframe {
    height: 600px;
  }
}

@media screen and (max-width: 768px) {
  .map-iframe-card {
    padding: 0.5rem;
    border-radius: 18px;
  }
  
  .iframe-container {
    border-radius: 14px;
  }

  .iframe-overlay {
    height: 48px;
    padding: 0 1rem;
  }

  .overlay-brand-text {
    font-size: 0.92rem;
  }

  .overlay-brand-text span {
    display: none;
  }

  .iframe-overlay-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
  }

  .google-map-iframe {
    height: 480px;
  }
}

@media screen and (max-width: 480px) {
  .google-map-iframe {
    height: 400px;
  }
}

/* --------------------------------------------------------------------------
   8. LOCATION SUMMARY STATISTICS BOARD (LIGHT THEME)
   -------------------------------------------------------------------------- */
.locations-summary-board {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: 22px;
  padding: 2.25rem 2rem;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06);
}

.summary-card-glow {
  position: absolute;
  top: 0;
  left: 30%;
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #059669, transparent);
}

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

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.summary-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.summary-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(5, 150, 105, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  margin-bottom: 0.85rem;
  transition: transform 0.3s ease;
}

.summary-item:hover .summary-icon-circle {
  transform: scale(1.1);
}

.summary-value {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.summary-label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #64748B;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   STATION DETAILS POPUP MODAL
   -------------------------------------------------------------------------- */
.station-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 8, 16, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.station-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.station-modal-card {
  background: #ffffff;
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  padding: 2.25rem;
  box-shadow: 0 25px 70px rgba(15, 23, 42, 0.25);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  color: #0F172A;
}

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

.modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.modal-badge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-pill-type {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 242, 157, 0.15);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.3);
}

.modal-pill-status {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.status-available {
  background: rgba(2, 132, 199, 0.12);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.status-busy {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.25);
}

.modal-close-btn {
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #0F172A;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(15, 23, 42, 0.12);
  transform: rotate(90deg);
}

.modal-title-group {
  margin-bottom: 1.5rem;
}

.modal-station-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.modal-station-address {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.55;
}

.modal-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.spec-card {
  background: #F8FAFC;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 0.9rem;
}

.spec-label {
  font-size: 0.75rem;
  color: #64748B;
  margin-bottom: 0.25rem;
}

.spec-val {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: #059669;
}

.modal-actions-row {
  display: flex;
  gap: 0.85rem;
}

.modal-call-btn {
  flex: 1;
  padding: 0.85rem;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0F172A;
  text-decoration: none;
}

.modal-call-btn:hover {
  background: rgba(15, 23, 42, 0.1);
}

.modal-dir-btn {
  flex: 1.6;
  padding: 0.85rem;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 12px;
}

/* --------------------------------------------------------------------------
   RESPONSIVE DESIGN (Tablets & Mobile)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
  .summary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.5rem;
  }

  .summary-item:nth-child(2)::after {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .locations-hero-section {
    padding: 7.5rem 1.25rem 4rem;
    min-height: 400px;
  }

  .locations-hero-title {
    font-size: 2.1rem;
  }

  .map-showcase-section {
    padding: 2.5rem 1rem 4.5rem;
  }

  .map-workspace-card {
    padding: 1rem;
    border-radius: 20px;
  }

  .summary-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .summary-value {
    font-size: 1.85rem;
  }

  .station-modal-card {
    padding: 1.5rem;
  }

  .modal-specs-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .modal-actions-row {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  .locations-hero-title {
    font-size: 1.75rem;
  }

  .summary-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .summary-item::after {
    display: none !important;
  }
}

/* ==========================================================================
   CHARGING LOCATIONS SECTION - "WHERE WE ARE" HORIZONTAL SLIDER (LIGHT THEME)
   ========================================================================== */
.charging-locations-section {
  position: relative;
  width: 100%;
  padding: 6rem 1.5rem 6.5rem;
  background-color: var(--bg-primary, #F6FAF8);
  background: linear-gradient(180deg, #F8FCFA 0%, #EFF8F3 100%);
  color: var(--text-dark, #0b1329);
  overflow: hidden;
  border-top: 1px solid rgba(5, 150, 105, 0.1);
  border-bottom: 1px solid rgba(5, 150, 105, 0.1);
}

/* Section Container */
.loc-section-container {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
}

/* Section Header */
.loc-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}

.loc-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.15rem;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.22);
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(5, 150, 105, 0.08);
}

.loc-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-green-dark, #059669);
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.6);
  animation: locDotPulse 2s ease-in-out infinite;
}

@keyframes locDotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.7;
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.8);
  }
}

.loc-eyebrow-text {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-green-dark, #059669);
}

.loc-main-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--text-dark, #0b1329);
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}

.loc-title-gradient {
  background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.loc-sub-title {
  font-size: 1.05rem;
  color: var(--text-muted-dark, #64748b);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ================= HORIZONTAL SLIDER / MARQUEE ================= */
.loc-slider-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 1.5rem 0 2rem;
  /* Premium edge fade mask */
  mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
  cursor: default;
  user-select: none;
}

.loc-slider-track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
}

/* ================= LOCATION CARD (LIGHT THEME) ================= */
.loc-card {
  flex: 0 0 340px;
  width: 340px;
  background: #FFFFFF;
  border: 1px solid #E2ECE5;
  border-radius: 18px;
  padding: 1.6rem 1.45rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  box-shadow: 0 10px 30px -4px rgba(11, 19, 41, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  position: relative;
}

/* Card Header */
.loc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.loc-icon-bubble {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.22);
  color: var(--accent-green-dark, #059669);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.loc-lightning-svg {
  filter: drop-shadow(0 0 4px rgba(5, 150, 105, 0.3));
  transition: transform 0.3s ease, filter 0.3s ease;
}

.loc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #F0FDF4;
  border: 1px solid rgba(5, 150, 105, 0.2);
  font-size: 0.72rem;
  font-weight: 600;
  color: #065f46;
  letter-spacing: 0.02em;
}

.loc-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* Card Body */
.loc-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-grow: 1;
}

.loc-district-name {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-green-dark, #059669);
}

.loc-station-name {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-dark, #0b1329);
  margin-bottom: 0.45rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.loc-address-box {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: #F8FAFC;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  transition: background 0.3s ease, border-color 0.3s ease;
  margin-top: auto;
}

.loc-pin-icon {
  color: #0284c7;
  flex-shrink: 0;
  margin-top: 2px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.loc-address-text {
  font-size: 0.82rem;
  color: var(--text-slate, #334155);
  line-height: 1.45;
  margin: 0;
}

/* Card Footer */
.loc-card-footer {
  margin-top: 0.25rem;
}

.loc-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 1.1rem;
  border-radius: 12px;
  background: #F0FDF4;
  border: 1px solid rgba(5, 150, 105, 0.28);
  color: var(--accent-green-dark, #059669);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.btn-action-arrow {
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================= HOVER INTERACTION ON CARD ================= */
.loc-card:hover,
.loc-card:focus-visible {
  transform: translateY(-6px) scale(1.02);
  background: #FFFFFF;
  border-color: #059669;
  box-shadow: 0 20px 40px -6px rgba(5, 150, 105, 0.16), 0 8px 24px rgba(0, 0, 0, 0.06);
  z-index: 10;
}

.loc-card:hover .loc-icon-bubble,
.loc-card:focus-visible .loc-icon-bubble {
  background: #059669;
  border-color: #059669;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
  transform: scale(1.06);
}

.loc-card:hover .loc-lightning-svg,
.loc-card:focus-visible .loc-lightning-svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8));
}

.loc-card:hover .loc-address-box,
.loc-card:focus-visible .loc-address-box {
  background: #F0FDF4;
  border-color: rgba(5, 150, 105, 0.25);
}

.loc-card:hover .loc-address-text,
.loc-card:focus-visible .loc-address-text {
  color: var(--text-dark, #0b1329);
}

.loc-card:hover .loc-pin-icon,
.loc-card:focus-visible .loc-pin-icon {
  color: #059669;
  transform: scale(1.1);
}

.loc-card:hover .loc-action-btn,
.loc-card:focus-visible .loc-action-btn {
  background: linear-gradient(135deg, #059669 0%, #00F29D 100%);
  border-color: #059669;
  color: #070b13;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.25);
  font-weight: 700;
}

.loc-card:hover .btn-action-arrow,
.loc-card:focus-visible .btn-action-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   CHARGING LOCATIONS SECTION - DARK THEME VARIANT (.theme-dark)
   ========================================================================== */
.charging-locations-section.theme-dark {
  background-color: var(--bg-hero-dark, #070b13);
  background: #070b13;
  color: #ffffff;
  border-top: 1px solid rgba(0, 242, 157, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.charging-locations-section.theme-dark .loc-eyebrow-pill {
  background: rgba(0, 242, 157, 0.08);
  border: 1px solid rgba(0, 242, 157, 0.28);
  box-shadow: 0 0 20px -3px rgba(0, 242, 157, 0.2);
}

.charging-locations-section.theme-dark .loc-pulse-dot {
  background-color: var(--accent-primary, #00F29D);
  box-shadow: 0 0 10px #00F29D;
}

.charging-locations-section.theme-dark .loc-eyebrow-text {
  color: var(--accent-primary, #00F29D);
}

.charging-locations-section.theme-dark .loc-main-title {
  color: #ffffff;
}

.charging-locations-section.theme-dark .loc-title-gradient {
  background: linear-gradient(135deg, #00F29D 0%, #00E5C9 50%, #00D2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.charging-locations-section.theme-dark .loc-sub-title {
  color: rgba(226, 232, 240, 0.82);
}

/* Dark Theme Cards */
.charging-locations-section.theme-dark .loc-card {
  background: #0d1728;
  background: linear-gradient(180deg, rgba(16, 28, 49, 0.95) 0%, rgba(10, 18, 33, 0.98) 100%);
  border: 1px solid rgba(0, 242, 157, 0.16);
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, 0.5), 0 0 16px -4px rgba(0, 242, 157, 0.05);
}

.charging-locations-section.theme-dark .loc-icon-bubble {
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.3);
  color: var(--accent-primary, #00F29D);
}

.charging-locations-section.theme-dark .loc-lightning-svg {
  filter: drop-shadow(0 0 6px rgba(0, 242, 157, 0.5));
}

.charging-locations-section.theme-dark .loc-status-pill {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.85);
}

.charging-locations-section.theme-dark .loc-status-dot {
  background: #00F29D;
  box-shadow: 0 0 6px #00F29D;
}

.charging-locations-section.theme-dark .loc-district-name {
  color: var(--accent-primary, #00F29D);
}

.charging-locations-section.theme-dark .loc-station-name {
  color: #ffffff;
}

.charging-locations-section.theme-dark .loc-address-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.charging-locations-section.theme-dark .loc-pin-icon {
  color: var(--accent-secondary, #00D2FF);
}

.charging-locations-section.theme-dark .loc-address-text {
  color: rgba(226, 232, 240, 0.82);
}

.charging-locations-section.theme-dark .loc-action-btn {
  background: rgba(0, 242, 157, 0.08);
  border: 1px solid rgba(0, 242, 157, 0.25);
  color: var(--accent-primary, #00F29D);
}

/* Dark Theme Hover State */
.charging-locations-section.theme-dark .loc-card:hover,
.charging-locations-section.theme-dark .loc-card:focus-visible {
  background: linear-gradient(180deg, rgba(20, 36, 62, 0.98) 0%, rgba(12, 22, 40, 1) 100%);
  border-color: #00F29D;
  box-shadow: 0 18px 40px -6px rgba(0, 0, 0, 0.7), 0 0 26px -2px rgba(0, 242, 157, 0.32);
}

.charging-locations-section.theme-dark .loc-card:hover .loc-icon-bubble,
.charging-locations-section.theme-dark .loc-card:focus-visible .loc-icon-bubble {
  background: rgba(0, 242, 157, 0.22);
  border-color: #00F29D;
  color: #00F29D;
  box-shadow: 0 0 14px rgba(0, 242, 157, 0.45);
}

.charging-locations-section.theme-dark .loc-card:hover .loc-lightning-svg,
.charging-locations-section.theme-dark .loc-card:focus-visible .loc-lightning-svg {
  filter: drop-shadow(0 0 8px #00F29D);
}

.charging-locations-section.theme-dark .loc-card:hover .loc-address-box,
.charging-locations-section.theme-dark .loc-card:focus-visible .loc-address-box {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 242, 157, 0.25);
}

.charging-locations-section.theme-dark .loc-card:hover .loc-address-text,
.charging-locations-section.theme-dark .loc-card:focus-visible .loc-address-text {
  color: #ffffff;
}

.charging-locations-section.theme-dark .loc-card:hover .loc-pin-icon,
.charging-locations-section.theme-dark .loc-card:focus-visible .loc-pin-icon {
  color: #00F29D;
}

.charging-locations-section.theme-dark .loc-card:hover .loc-action-btn,
.charging-locations-section.theme-dark .loc-card:focus-visible .loc-action-btn {
  background: var(--accent-primary, #00F29D);
  border-color: var(--accent-primary, #00F29D);
  color: #070b13;
  box-shadow: 0 0 18px rgba(0, 242, 157, 0.45);
  font-weight: 700;
}

/* ================= RESPONSIVE DESIGN ================= */
@media screen and (max-width: 1024px) {
  .charging-locations-section {
    padding: 5rem 1.25rem 5.5rem;
  }

  .loc-main-title {
    font-size: 2.25rem;
  }

  .loc-card {
    flex: 0 0 300px;
    width: 300px;
    padding: 1.45rem 1.3rem;
  }

  .loc-station-name {
    font-size: 1.22rem;
  }
}

@media screen and (max-width: 768px) {
  .charging-locations-section {
    padding: 4.2rem 1rem 4.8rem;
  }

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

  .loc-main-title {
    font-size: 1.95rem;
  }

  .loc-sub-title {
    font-size: 0.95rem;
  }

  .loc-slider-wrapper {
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  }

  .loc-card {
    flex: 0 0 290px;
    width: 290px;
    padding: 1.35rem 1.2rem;
    gap: 1rem;
  }

  .loc-station-name {
    font-size: 1.15rem;
  }

  .loc-address-text {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 480px) {
  .charging-locations-section {
    padding: 3.5rem 0.75rem 4rem;
  }

  .loc-main-title {
    font-size: 1.65rem;
  }

  .loc-slider-wrapper {
    padding: 1rem 0 1.5rem;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .loc-slider-track {
    gap: 1rem;
  }

  .loc-card {
    flex: 0 0 calc(100vw - 48px);
    width: calc(100vw - 48px);
    max-width: 290px;
    padding: 1.25rem 1.1rem;
    border-radius: 16px;
  }

  .loc-station-name {
    font-size: 1.1rem;
  }

  .loc-address-box {
    padding: 0.65rem 0.75rem;
  }

  .loc-address-text {
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   DOWNLOAD APP PAGE STYLES (download-app.html)
   ========================================================================== */

.app-page-body {
  background-color: #060B14;
  color: #FFFFFF;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  overflow-x: hidden;
}

/* Common Pill Badge */
.app-badge-pill {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  background: rgba(0, 242, 157, 0.08);
  border: 1px solid rgba(0, 242, 157, 0.25);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  margin-bottom: 1.25rem;
}

.app-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #00F29D;
  box-shadow: 0 0 10px #00F29D;
  animation: badgeDotPulse 2s infinite ease-in-out;
}

@keyframes badgeDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.app-badge-text {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #00F29D;
}

/* ================= 1. DOWNLOAD APP HERO SECTION ================= */
.app-hero-section {
  position: relative;
  width: 100%;
  padding: 9.5rem 2rem 5.5rem;
  background: radial-gradient(circle at 50% 10%, #0C1A30 0%, #060B14 70%);
  overflow: hidden;
  z-index: 10;
}

/* Light Theme Version for Download App Hero (When Placed Below Banner) */
.app-hero-section.theme-light {
  padding: 5.5rem 2rem 5.5rem;
  background: #F6FAF8;
  color: #0F172A;
}

.app-hero-section.theme-light .light-glow-1 {
  top: 0;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
}

.app-hero-section.theme-light .light-glow-2 {
  top: 30%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
}

.app-badge-pill.light-badge {
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.app-badge-pill.light-badge .app-badge-text {
  color: #047857;
}

.light-hero-title {
  color: #0F172A;
}

.light-hero-desc {
  color: #475569;
}

.store-badge-btn.light-store-btn {
  background: #0F172A;
  border-color: #1E293B;
  color: #FFFFFF;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

.store-badge-btn.light-store-btn:hover {
  background: #020617;
  border-color: #00F29D;
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 242, 157, 0.25);
}

.light-rating-label {
  color: #64748B;
}

.light-rating-label strong {
  color: #0F172A;
}

/* Light Theme Floating Badges & Mockups */
.floating-app-badge.light-float-badge {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 242, 157, 0.35);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 20px rgba(0, 242, 157, 0.12);
}

.floating-app-badge.light-float-badge .float-badge-title {
  color: #0F172A;
}

.floating-app-badge.light-float-badge .float-badge-sub {
  color: #64748B;
}

.phone-mockup-frame.light-phone-frame {
  background: linear-gradient(145deg, #FFFFFF, rgba(255, 255, 255, 0.6) 50%, rgba(0, 242, 157, 0.25));
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.14), 0 0 35px rgba(0, 242, 157, 0.15);
}

/* Light Theme Benefits */
.app-benefits-wrapper.light-benefits {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.benefit-card.light-benefit-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.benefit-card.light-benefit-card:hover {
  background: #FFFFFF;
  border-color: rgba(0, 242, 157, 0.6);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08), 0 0 25px rgba(0, 242, 157, 0.15);
}

.benefit-card.light-benefit-card .benefit-num {
  color: #CBD5E1;
}

.benefit-card.light-benefit-card:hover .benefit-num {
  color: #059669;
}

.benefit-icon-box.light-icon-box {
  background: rgba(0, 242, 157, 0.15);
  border-color: rgba(0, 242, 157, 0.3);
  color: #059669;
}

.benefit-card.light-benefit-card:hover .benefit-icon-box {
  background: #00F29D;
  color: #060B14;
}

.benefit-card.light-benefit-card .benefit-title {
  color: #0F172A;
}

.benefit-card.light-benefit-card .benefit-desc {
  color: #475569;
}


.app-hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.hero-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.hero-glow-1 {
  top: -10%;
  left: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.18) 0%, rgba(0, 242, 157, 0) 70%);
}

.hero-glow-2 {
  top: 25%;
  right: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.16) 0%, rgba(0, 210, 255, 0) 70%);
}

.hero-glow-3 {
  bottom: -15%;
  left: 40%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0) 70%);
}

.app-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.6;
}

.app-hero-circuit-lines {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(0, 242, 157, 0.05) 0%, transparent 60%);
}

.app-hero-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

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

.app-hero-content {
  max-width: 600px;
}

.app-hero-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #000;
  margin-bottom: 1.25rem;
}

.app-hero-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 2.25rem;
  font-weight: 400;
}

/* Store Download Badges */
.app-download-badges {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.store-badge-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.4rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  color: #FFFFFF;
  text-decoration: none;
  backdrop-filter: blur(14px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.store-badge-btn:hover {
  border-color: #00F29D;
  background: rgba(0, 242, 157, 0.1);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 242, 157, 0.2);
}

.store-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-btn-sub {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94A3B8;
  line-height: 1.2;
}

.store-btn-main {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.store-btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg);
  transition: left 0.75s ease;
}

.store-badge-btn:hover .store-btn-shine {
  left: 200%;
}

.app-trust-rating {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.5rem;
}

.rating-stars {
  color: #FBBF24;
  font-size: 1rem;
  letter-spacing: 2px;
}

.rating-label {
  font-size: 0.88rem;
  color: #94A3B8;
}

.rating-label strong {
  color: #FFFFFF;
}

/* HERO RIGHT: Overlapping Mockups Composition */
.app-hero-mockups-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockups-composition-wrapper {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 560px;
  margin: 0 auto;
}

/* Smartphone Mockup Universal Component */
.phone-mockup-frame {
  position: absolute;
  border-radius: 42px;
  padding: 8px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.03) 50%, rgba(0, 242, 157, 0.18));
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 242, 157, 0.15);
  backdrop-filter: blur(20px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.phone-mockup-frame:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 40px 85px rgba(0, 0, 0, 0.9), 0 0 50px rgba(0, 242, 157, 0.25);
}

.phone-case {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  background: #02050B;
  border: 4px solid #111A2E;
}

.phone-speaker-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 18px;
  background: #02050B;
  border-radius: 12px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.phone-screen-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 30px;
  background: #060B14;
}

.app-screen-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 9 / 16;
}

.screen-gloss-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

/* Front & Back Overlap Positions */
.phone-front {
  left: 0;
  bottom: 0;
  width: 280px;
  z-index: 3;
  animation: heroPhoneFloatFront 6s ease-in-out infinite;
}

.phone-back {
  right: 15px;
  top: 0;
  width: 270px;
  z-index: 2;
  filter: brightness(0.92);
  animation: heroPhoneFloatBack 6s ease-in-out infinite 1s;
}

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

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

.phone-glow-aura {
  position: absolute;
  inset: -20px;
  border-radius: 50px;
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

.glow-green {
  background: radial-gradient(circle, rgba(0, 242, 157, 0.35) 0%, transparent 70%);
}

.glow-cyan {
  background: radial-gradient(circle, rgba(0, 210, 255, 0.3) 0%, transparent 70%);
}

.glow-center {
  background: radial-gradient(circle, rgba(0, 242, 157, 0.25) 0%, rgba(0, 210, 255, 0.2) 50%, transparent 75%);
}

.glow-interactive {
  background: radial-gradient(circle, rgba(0, 242, 157, 0.3) 0%, rgba(0, 210, 255, 0.2) 60%, transparent 75%);
}

/* Floating Glass Badges in Hero */
.floating-app-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: rgba(11, 23, 43, 0.85);
  border: 1px solid rgba(0, 242, 157, 0.3);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 157, 0.15);
  z-index: 5;
  transition: transform 0.3s ease;
}

.float-badge-top {
  top: 12%;
  left: -25px;
  animation: floatTopBadge 5s ease-in-out infinite;
}

.float-badge-bottom {
  bottom: 8%;
  right: -25px;
  animation: floatBottomBadge 5.5s ease-in-out infinite 0.5s;
}

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

@keyframes floatBottomBadge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.float-badge-icon {
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-icon {
  color: #00F29D;
  animation: pulseIcon 1.5s infinite;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 10px #00F29D;
}

.float-badge-content {
  display: flex;
  flex-direction: column;
}

.float-badge-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #FFFFFF;
}

.float-badge-sub {
  font-size: 0.7rem;
  color: #94A3B8;
}

/* ================= APP BENEFITS (4 COMPACT BENEFITS) ================= */
.app-benefits-wrapper {
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.benefit-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.benefit-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 242, 157, 0.35);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(0, 242, 157, 0.12);
}

.benefit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.benefit-num {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

.benefit-card:hover .benefit-num {
  color: #00F29D;
}

.benefit-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00F29D;
  transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon-box {
  background: #00F29D;
  color: #060B14;
  transform: scale(1.08);
}

.benefit-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

.benefit-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #94A3B8;
  margin: 0;
}

.benefit-border-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00F29D, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.benefit-card:hover .benefit-border-glow {
  opacity: 1;
}

/* ================= 2. APP FEATURES / EXPERIENCE SECTION ================= */
.app-features-section {
  position: relative;
  width: 100%;
  padding: 7.5rem 2rem;
  background: linear-gradient(180deg, #060B14 0%, #0A1426 50%, #060B14 100%);
  overflow: hidden;
  z-index: 10;
}

.features-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.feat-glow-1 {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.14) 0%, transparent 70%);
  filter: blur(100px);
}

.feat-glow-2 {
  position: absolute;
  bottom: 10%;
  right: -5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, transparent 70%);
  filter: blur(100px);
}

.feat-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 0.5;
}

.features-section-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.features-main-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 5rem;
  align-items: center;
}

/* Large Mockup on Left */
.features-visual-col {
  display: flex;
  justify-content: center;
}

.large-mockup-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
}

.large-phone {
  position: relative;
  width: 100%;
  max-width: 320px;
}

.mockup-floating-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  background: rgba(11, 23, 43, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 157, 0.12);
  z-index: 5;
  transition: transform 0.3s ease;
}

.pill-left {
  top: 25%;
  left: -35px;
  border-color: rgba(0, 242, 157, 0.3);
  animation: floatTopBadge 6s ease-in-out infinite;
}

.pill-right {
  bottom: 25%;
  right: -35px;
  border-color: rgba(0, 210, 255, 0.3);
  animation: floatBottomBadge 6.5s ease-in-out infinite 0.7s;
}

.pill-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 242, 157, 0.15);
  color: #00F29D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.check-circle {
  background: rgba(0, 210, 255, 0.15);
  color: #00D2FF;
}

.pill-info {
  display: flex;
  flex-direction: column;
}

.pill-label {
  font-size: 0.72rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pill-val {
  font-size: 0.9rem;
  font-weight: 700;
  color: #FFFFFF;
}

/* Features Content on Right */
.features-content-col {
  max-width: 620px;
}

.features-main-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.features-sub-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 2.5rem;
}

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

.feature-item-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.4rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.feature-item-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 242, 157, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.feat-num-badge {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  color: #00F29D;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.25);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.feat-text-wrap {
  display: flex;
  flex-direction: column;
}

.feat-item-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}

.feat-item-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: #94A3B8;
  margin: 0;
}

/* ================= 3. HOW TO USE THE APP (STICKY SCROLL SECTION) ================= */
.app-how-it-works-section {
  position: relative;
  width: 100%;
  padding: 8rem 2rem 9rem;
  background: radial-gradient(circle at 50% 50%, #0B172B 0%, #060B14 80%);
  color: #FFFFFF;
  overflow: visible; /* Required for sticky inside section */
  z-index: 10;
}

.how-ambient-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.how-glow-top {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
  filter: blur(120px);
}

.how-glow-bottom {
  position: absolute;
  bottom: 5%;
  right: 15%;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, transparent 70%);
  filter: blur(120px);
}

.how-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
}

.how-section-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  padding: 0 1.5rem;
}

.how-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto 4.5rem;
  width: 100%;
  max-width: 800px;
}

.how-header-row .app-badge-pill {
  margin: 0 auto 1.25rem;
  align-self: center;
}

.how-main-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 auto 0.85rem;
  text-align: center;
  width: 100%;
}

.how-header-desc {
  font-size: 1.1rem;
  color: #94A3B8;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

/* Interactive Sticky 2-Column Layout */
.how-interactive-layout {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 5rem;
  align-items: flex-start;
  position: relative;
}

/* Sticky Phone Column */
.how-sticky-phone-col {
  position: relative;
  height: 100%;
}

.sticky-phone-wrapper {
  position: sticky;
  top: 130px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

.how-interactive-phone {
  position: relative;
  width: 100%;
}

#howScreenContainer {
  position: relative;
  width: 100%;
  height: 560px;
  background: #02050B;
}

.how-app-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.how-app-screen.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* Sticky Step Pill */
.sticky-step-pill {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 1.25rem;
  background: rgba(11, 23, 43, 0.9);
  border: 1px solid rgba(0, 242, 157, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
}

.step-pill-indicator {
  color: #00F29D;
  font-size: 0.8rem;
  animation: pulseIcon 1.5s infinite;
}

.step-pill-text {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

/* Steps Column on Right */
.how-steps-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-left: 1.5rem;
}

.steps-progress-track {
  position: absolute;
  top: 2rem;
  bottom: 4rem;
  left: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  background: linear-gradient(180deg, #00F29D 0%, #00D2FF 100%);
  box-shadow: 0 0 12px #00F29D;
  border-radius: 3px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Step Row & Card */
.step-card-row {
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.45;
  filter: grayscale(40%);
}

.step-card-row.active {
  opacity: 1;
  filter: none;
}

/* Mobile Screen Wrapper (Hidden on desktop) */
.step-mobile-screen-wrap {
  display: none;
  margin-bottom: 1.5rem;
}

.mobile-phone-mini-frame {
  max-width: 280px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 6px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(0, 242, 157, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 45px rgba(0,0,0,0.6);
  overflow: hidden;
}

.mobile-step-img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  display: block;
}

.app-how-it-works-section .step-content-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 2.75rem 2.5rem;
  backdrop-filter: blur(14px);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.app-how-it-works-section .step-card-row.active .step-content-card {
  background: rgba(11, 23, 43, 0.7);
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 242, 157, 0.12);
  transform: translateX(10px);
}

.step-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.step-badge {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00F29D;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.25);
  padding: 0.35rem 0.9rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.step-card-row.active .step-badge {
  background: #00F29D;
  color: #060B14;
  box-shadow: 0 0 15px rgba(0, 242, 157, 0.4);
}

.step-status-tag {
  font-size: 0.82rem;
  color: #64748B;
  font-weight: 600;
}

.step-card-row.active .step-status-tag {
  color: #00D2FF;
}

.step-card-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.85rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 1rem;
  line-height: 1.25;
}

.step-card-desc {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #94A3B8;
  margin-bottom: 1.75rem;
}

.step-features-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.step-chip {
  font-size: 0.82rem;
  font-weight: 600;
  color: #E2E8F0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.step-card-row.active .step-chip {
  background: rgba(0, 242, 157, 0.08);
  border-color: rgba(0, 242, 157, 0.25);
  color: #00F29D;
}

.step-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.step-card-row.active .step-card-glow {
  opacity: 1;
}

/* ================= LIGHT THEME FOR HOW TO USE THE APP (EASY 4-STEP GUIDE) ================= */
.app-how-it-works-section.theme-light {
  background: #F6FAF8;
  color: #0F172A;
}

.app-how-it-works-section.theme-light .light-how-glow {
  top: 10%;
  left: 15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
}

.app-how-it-works-section.theme-light .light-how-glow-2 {
  bottom: 5%;
  right: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
}

.light-how-heading {
  color: #0F172A;
  text-align: center;
}

.light-how-desc {
  color: #475569;
  text-align: center;
  margin: 0 auto;
}

/* Light Sticky Phone */
.app-how-it-works-section.theme-light .how-interactive-phone {
  background: linear-gradient(145deg, #FFFFFF, rgba(255, 255, 255, 0.7) 50%, rgba(0, 242, 157, 0.25));
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12), 0 0 35px rgba(0, 242, 157, 0.15);
}

.app-how-it-works-section.theme-light .sticky-step-pill {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 242, 157, 0.35);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.app-how-it-works-section.theme-light .sticky-step-pill .step-pill-text {
  color: #0F172A;
}

/* Light Steps Column */
.app-how-it-works-section.theme-light .steps-progress-track {
  background: rgba(0, 0, 0, 0.08);
}

.app-how-it-works-section.theme-light .step-card-row {
  opacity: 0.55;
  filter: none;
}

.app-how-it-works-section.theme-light .step-card-row.active {
  opacity: 1;
  filter: none;
}

.app-how-it-works-section.theme-light .step-content-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.app-how-it-works-section.theme-light .step-card-row.active .step-content-card {
  background: #FFFFFF;
  border-color: rgba(0, 242, 157, 0.7);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08), 0 0 30px rgba(0, 242, 157, 0.18);
  transform: translateX(10px);
}

.app-how-it-works-section.theme-light .step-badge {
  background: rgba(0, 242, 157, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.app-how-it-works-section.theme-light .step-card-row.active .step-badge {
  background: #00F29D;
  color: #060B14;
  box-shadow: 0 0 15px rgba(0, 242, 157, 0.4);
}

.app-how-it-works-section.theme-light .step-status-tag {
  color: #94A3B8;
}

.app-how-it-works-section.theme-light .step-card-row.active .step-status-tag {
  color: #0284C7;
  font-weight: 700;
}

.app-how-it-works-section.theme-light .step-card-title {
  color: #0F172A;
}

.app-how-it-works-section.theme-light .step-card-desc {
  color: #475569;
}

.app-how-it-works-section.theme-light .step-chip {
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  color: #334155;
}

.app-how-it-works-section.theme-light .step-card-row.active .step-chip {
  background: rgba(0, 242, 157, 0.12);
  border-color: rgba(5, 150, 105, 0.3);
  color: #047857;
}

.app-how-it-works-section.theme-light .step-card-glow {
  background: radial-gradient(circle, rgba(0, 242, 157, 0.08) 0%, transparent 70%);
}

.app-how-it-works-section.theme-light .mobile-phone-mini-frame {
  background: linear-gradient(145deg, #FFFFFF, rgba(0, 242, 157, 0.15));
  border: 1px solid #E2E8F0;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

/* ================= RESPONSIVE DESIGN (MEDIA QUERIES) ================= */

@media screen and (max-width: 1200px) {
  .app-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .how-interactive-layout {
    grid-template-columns: 380px 1fr;
    gap: 3.5rem;
  }
}

@media screen and (max-width: 991px) {
  .app-hero-section {
    padding: 8rem 1.5rem 4rem;
  }

  .app-hero-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    text-align: center;
  }

  .app-hero-content {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .app-download-badges {
    justify-content: center;
  }

  .app-trust-rating {
    justify-content: center;
  }

  .mockups-composition-wrapper {
    height: 480px;
  }

  .phone-front {
    width: 240px;
  }

  .phone-back {
    width: 230px;
  }

  .app-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .features-main-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
    text-align: center;
  }

  .features-content-col {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .features-list-grid {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  /* Disable Sticky Layout on Tablet & Mobile */
  .how-interactive-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .how-sticky-phone-col {
    display: none; /* Hide Desktop Sticky Column */
  }

  .how-steps-col {
    padding-left: 0;
  }

  .steps-progress-track {
    display: none;
  }

  .step-card-row {
    opacity: 1;
    filter: none;
  }

  .step-card-row.active .step-content-card {
    transform: none;
  }

  /* Show Inlined Step Mockup on Mobile */
  .step-mobile-screen-wrap {
    display: block;
  }
}

@media screen and (max-width: 640px) {
  .app-hero-section {
    padding: 7.5rem 1rem 3.5rem;
  }

  .app-hero-title {
    font-size: 2.2rem;
  }

  .app-download-badges {
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
  }

  .store-badge-btn {
    width: 100%;
    justify-content: center;
  }

  .mockups-composition-wrapper {
    height: 400px;
    max-width: 320px;
  }

  .phone-front {
    width: 190px;
  }

  .phone-back {
    width: 180px;
  }

  .float-badge-top {
    left: -10px;
    top: 5%;
  }

  .float-badge-bottom {
    right: -10px;
    bottom: 5%;
  }

  .app-benefits-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .features-list-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .step-content-card {
    padding: 2rem 1.5rem;
  }

  .step-card-title {
    font-size: 1.5rem;
  }

  .mockup-floating-pill {
    display: none;
  }
}

/* ==========================================================================
   FRANCHISE PAGE STYLES (franchise.html)
   ========================================================================== */

.franchise-page-body {
  background-color: #F6FAF8;
  color: #0F172A;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  overflow-x: hidden;
}

/* 1. FRANCHISE BANNER CUSTOMIZATION */
.franchise-banner-section {
  position: relative;
  width: 100%;
}

.franchise-banner-section .about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.franchise-banner-section .about-hero-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.franchise-banner-section .about-hero-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 2. FRANCHISOR SUPPORT SECTION (LIGHT THEME) */
.franchise-support-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 7.5rem;
  background: #F6FAF8;
  overflow: hidden;
  z-index: 10;
}

.support-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.support-glow-1 {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
  filter: blur(100px);
}

.support-glow-2 {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
  filter: blur(100px);
}

.support-section-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.support-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 4.5rem;
  width: 100%;
}

.support-main-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin-bottom: 0.85rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.support-sub-heading {
  font-size: 1.12rem;
  color: #475569;
  max-width: 620px;
  margin: 0 auto;
  font-weight: 500;
  text-align: center;
}

/* Six Floating Modules Grid */
.support-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.support-module-card {
  position: relative;
  height: 100%;
}

.module-card-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 24px;
  padding: 2.5rem 2.2rem 2.2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.support-module-card:hover .module-card-inner {
  transform: translateY(-8px);
  border-color: rgba(0, 242, 157, 0.7);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.08), 0 0 30px rgba(0, 242, 157, 0.16);
}

.module-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.module-number {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.8rem;
  font-weight: 800;
  color: #CBD5E1;
  letter-spacing: -0.5px;
  transition: color 0.3s ease;
}

.support-module-card:hover .module-number {
  color: #059669;
}

.module-icon-box {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  transition: all 0.35s ease;
}

.support-module-card:hover .module-icon-box {
  background: #00F29D;
  color: #060B14;
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(0, 242, 157, 0.4);
}

.module-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 0.85rem;
  line-height: 1.3;
}

.module-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #475569;
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  border-top: 1px solid #F1F5F9;
}

.module-tag {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #059669;
}

.module-arrow {
  font-size: 1.25rem;
  color: #94A3B8;
  transition: transform 0.3s ease, color 0.3s ease;
}

.support-module-card:hover .module-arrow {
  color: #059669;
  transform: translateX(6px);
}

.module-glow-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #00F29D, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.support-module-card:hover .module-glow-border {
  opacity: 1;
}

/* 3. FULL-WIDTH CTA BANNER SECTION */
.franchise-cta-section {
  position: relative;
  width: 100%;
  padding: 8.5rem 2rem;
  background: #060B14;
  color: #FFFFFF;
  overflow: hidden;
  z-index: 10;
}

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

.cta-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.6);
  transform: scale(1.03);
  transition: transform 10s ease-out;
}

.franchise-cta-section:hover .cta-bg-image {
  transform: scale(1.07);
}

.cta-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 20, 0.88) 0%, rgba(6, 11, 20, 0.65) 50%, rgba(6, 11, 20, 0.92) 100%),
              radial-gradient(circle at center, rgba(0, 242, 157, 0.2) 0%, transparent 65%);
}

.cta-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}

.cta-glow-left {
  top: 20%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.22) 0%, transparent 70%);
}

.cta-glow-right {
  bottom: 10%;
  right: 10%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.18) 0%, transparent 70%);
}

.cta-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
}

.cta-content-container {
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cta-text-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.cta-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin-bottom: 1.25rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.cta-description {
  font-size: 1.12rem;
  line-height: 1.75;
  color: #E2E8F0;
  max-width: 780px;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.cta-action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.franchise-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 999px;
  background: #00F29D;
  color: #060B14;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.4);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.franchise-cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
  background: #00FFB0;
  box-shadow: 0 16px 40px rgba(0, 242, 157, 0.6);
  color: #02050B;
}

.cta-trust-chips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 3.5rem;
  width: 100%;
}

.cta-chip {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.35rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  font-size: 0.9rem;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.chip-icon {
  font-size: 1rem;
}

/* 4. FRANCHISE ENQUIRY FORM SECTION (LIGHT THEME) */
.franchise-form-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem 8.5rem;
  background: #F6FAF8;
  color: #0F172A;
  overflow: hidden;
  z-index: 10;
}

.form-ambient-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.form-glow-1 {
  position: absolute;
  top: 15%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.1) 0%, transparent 70%);
  filter: blur(100px);
}

.form-glow-2 {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
  filter: blur(100px);
}

.form-section-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.form-header-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 3.5rem;
  width: 100%;
}

.form-main-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0F172A;
  margin-bottom: 0.85rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.form-sub-heading {
  font-size: 1.1rem;
  color: #475569;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.franchise-form-card-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.franchise-form-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 28px;
  padding: 3.5rem 3.5rem 3rem;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.06);
  position: relative;
}

.form-status-alert {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.4rem 1.6rem;
  border-radius: 18px;
  background: rgba(0, 242, 157, 0.12);
  border: 1.5px solid #00F29D;
  color: #065F46;
  margin-bottom: 2rem;
  animation: fadeInAlert 0.4s ease-out;
}

@keyframes fadeInAlert {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.alert-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #00F29D;
  color: #060B14;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alert-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #064E3B;
  margin-bottom: 0.25rem;
}

.alert-message {
  font-size: 0.94rem;
  line-height: 1.5;
  color: #047857;
  margin: 0;
}

/* Form Fields */
.form-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-bottom: 1.5rem;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.full-width-field {
  margin-bottom: 1.5rem;
}

.form-field-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: #334155;
}

.required-mark {
  color: #EF4444;
}

.input-control-wrap {
  position: relative;
  width: 100%;
}

.form-input-control {
  width: 100%;
  padding: 0.95rem 1.1rem 0.95rem 2.85rem;
  background: #F8FAFC;
  border: 1.5px solid #CBD5E1;
  border-radius: 14px;
  color: #0F172A;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.96rem;
  transition: all 0.3s ease;
}

.form-input-control:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #00F29D;
  box-shadow: 0 0 0 4px rgba(0, 242, 157, 0.18);
}

.form-input-control.error {
  border-color: #EF4444;
  background: #FEF2F2;
}

.form-input-control::placeholder {
  color: #94A3B8;
}

.input-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: color 0.3s ease;
}

.form-input-control:focus ~ .input-icon {
  color: #059669;
}

/* Select Control */
.select-control-wrap {
  position: relative;
}

.form-select-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  padding-left: 1.1rem;
  cursor: pointer;
}

.select-dropdown-arrow {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94A3B8;
  pointer-events: none;
}

/* Textarea */
.form-textarea-control {
  padding-left: 1.1rem;
  resize: vertical;
  min-height: 130px;
}

/* Checkbox */
.form-checkbox-group {
  margin: 1.5rem 0;
}

.custom-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-checkmark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid #CBD5E1;
  background: #F8FAFC;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: all 0.25s ease;
}

.custom-checkbox-container input:checked ~ .checkbox-checkmark {
  background: #00F29D;
  border-color: #00F29D;
}

.checkbox-checkmark:after {
  content: "";
  display: none;
  width: 6px;
  height: 11px;
  border: solid #060B14;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.custom-checkbox-container input:checked ~ .checkbox-checkmark:after {
  display: block;
}

.checkbox-label-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #475569;
}

/* CAPTCHA Card */
.captcha-verification-box {
  margin-bottom: 2rem;
}

.captcha-card {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 0.75rem 1.25rem;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
}

.captcha-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.captcha-checkbox-label input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}

.captcha-box-check {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.captcha-checkbox-label input:checked ~ .captcha-box-check {
  background: #00F29D;
  border-color: #00F29D;
}

.captcha-box-check:after {
  content: "";
  display: none;
  width: 6px;
  height: 11px;
  border: solid #060B14;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.captcha-checkbox-label input:checked ~ .captcha-box-check:after {
  display: block;
}

.captcha-text {
  font-size: 0.94rem;
  font-weight: 500;
  color: #334155;
}

.captcha-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.captcha-brand {
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.3px;
}

.captcha-terms {
  font-size: 0.62rem;
  color: #94A3B8;
}

/* Submit Button */
.franchise-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.15rem 2rem;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.12rem;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  background: #00F29D;
  color: #060B14;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 242, 157, 0.35);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.franchise-submit-btn:hover {
  transform: translateY(-3px);
  background: #00FFB0;
  box-shadow: 0 16px 35px rgba(0, 242, 157, 0.5);
}

.franchise-submit-btn .btn-icon {
  font-size: 1.3rem;
  transition: transform 0.3s ease;
}

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

.field-error-msg {
  font-size: 0.82rem;
  color: #EF4444;
  font-weight: 600;
  margin-top: 0.25rem;
  display: none;
}

.field-error-msg.show {
  display: block;
}

/* ================= RESPONSIVE DESIGN FOR FRANCHISE PAGE ================= */

@media screen and (max-width: 1024px) {
  .support-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }

  .franchise-form-card {
    padding: 3rem 2.5rem;
  }
}

@media screen and (max-width: 768px) {
  .franchise-support-section {
    padding: 5rem 1.25rem 6rem;
  }

  .support-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .franchise-cta-section {
    padding: 6.5rem 1.25rem;
  }

  .cta-heading {
    font-size: 2.2rem;
  }

  .cta-description {
    font-size: 1rem;
  }

  .franchise-form-section {
    padding: 5rem 1.25rem 6rem;
  }

  .form-grid-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .franchise-form-card {
    padding: 2.25rem 1.5rem;
    border-radius: 20px;
  }

  .captcha-card {
    width: 100%;
  }
}

/* ==========================================================================
   TERMS & CONDITIONS PAGE STYLES (terms-and-conditions.html)
   ========================================================================== */

.terms-page-body {
  background-color: #F8FAFC;
  color: #0F172A;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  overflow-x: hidden;
}

/* 1. TERMS BANNER SECTION */
.terms-banner-section {
  position: relative;
  width: 100%;
}

.terms-banner-section .about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  max-width: 900px;
}

.terms-banner-section .about-hero-title {
  text-align: center;
  width: 100%;
}

.terms-meta-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.terms-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #E2E8F0;
  font-size: 0.85rem;
  font-weight: 500;
}

.terms-meta-pill.highlight {
  background: rgba(0, 242, 157, 0.12);
  border-color: rgba(0, 242, 157, 0.35);
  color: #00F29D;
}

/* 2. TERMS MAIN SECTION & 2-COLUMN LAYOUT */
.terms-main-section {
  position: relative;
  padding: 5rem 1.5rem 7rem;
  background: #F8FAFC;
  z-index: 10;
}

.terms-container {
  max-width: 1320px;
  margin: 0 auto;
}

.terms-layout-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 3.5rem;
  align-items: flex-start;
}

/* 3. STICKY TABLE OF CONTENTS SIDEBAR */
.terms-toc-sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.terms-toc-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.terms-toc-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #F1F5F9;
}

.toc-icon {
  color: #059669;
  display: flex;
  align-items: center;
}

.terms-toc-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0F172A;
  margin: 0;
}

.terms-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: calc(100vh - 350px);
  overflow-y: auto;
  padding-right: 0.35rem;
}

.terms-toc-nav::-webkit-scrollbar {
  width: 4px;
}

.terms-toc-nav::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

.terms-toc-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  color: #64748B;
  font-size: 0.865rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1.35;
}

.terms-toc-link:hover,
.terms-toc-link.active {
  background: rgba(0, 242, 157, 0.08);
  color: #047857;
  font-weight: 600;
  padding-left: 1.05rem;
}

.toc-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: #94A3B8;
  min-width: 18px;
}

.terms-toc-link.active .toc-num,
.terms-toc-link:hover .toc-num {
  color: #059669;
}

/* Sidebar Quick Support Box */
.terms-sidebar-support {
  background: linear-gradient(145deg, #061019, #0B192C);
  border-radius: 20px;
  padding: 1.75rem 1.5rem;
  color: #FFFFFF;
  border: 1px solid rgba(0, 242, 157, 0.25);
  box-shadow: 0 15px 35px rgba(6, 16, 25, 0.15);
  position: relative;
  overflow: hidden;
}

.terms-sidebar-support::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.support-box-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  color: #FFFFFF;
}

.support-box-desc {
  font-size: 0.835rem;
  color: #94A3B8;
  margin-bottom: 1.15rem;
  line-height: 1.45;
}

.support-box-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #00F29D;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
  word-break: break-all;
}

.support-box-email:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* 4. TERMS CONTENT COLUMN & CARDS */
.terms-content-col {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.terms-lead-banner-card {
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.06), rgba(0, 210, 255, 0.04));
  border: 1.5px solid rgba(0, 242, 157, 0.35);
  border-radius: 20px;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.terms-lead-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background: rgba(0, 242, 157, 0.15);
  border-radius: 999px;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.terms-lead-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 0.85rem;
  line-height: 1.25;
}

.terms-lead-para {
  font-size: 1.025rem;
  line-height: 1.7;
  color: #334155;
  margin: 0;
}

/* Individual Clause Cards */
.terms-clause-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  scroll-margin-top: 110px;
}

.terms-clause-card:hover {
  border-color: rgba(0, 242, 157, 0.4);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

.terms-clause-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #F1F5F9;
}

.clause-num-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 242, 157, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.25);
  border-radius: 10px;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 0.95rem;
  font-weight: 800;
  flex-shrink: 0;
}

.clause-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  margin: 0;
}

.terms-clause-body {
  font-size: 0.965rem;
  line-height: 1.75;
  color: #475569;
}

.terms-clause-body p {
  margin-bottom: 1.15rem;
}

.terms-clause-body p:last-child {
  margin-bottom: 0;
}

/* Highlight Alert Notice Inside Terms */
.terms-alert-box {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #D97706;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.35rem 0;
  color: #92400E;
  font-size: 0.915rem;
  line-height: 1.6;
}

.terms-alert-box.danger-alert {
  background: #FEF2F2;
  border-color: #FECACA;
  border-left: 4px solid #DC2626;
  color: #991B1B;
}

.terms-alert-box.primary-alert {
  background: #F0FDF4;
  border-color: #BBF7D0;
  border-left: 4px solid #16A34A;
  color: #166534;
}

/* Numbered / Bulleted Lists in Terms */
.terms-items-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.terms-items-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-size: 0.945rem;
  line-height: 1.65;
  color: #334155;
}

.terms-list-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  color: #0F172A;
  font-size: 0.75rem;
  font-weight: 700;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.terms-items-list li.prohibited-item .terms-list-index {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

/* Sub-section headings */
.terms-sub-heading {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  margin: 1.75rem 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.terms-sub-heading::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: #00F29D;
  border-radius: 2px;
}

/* Contact Details Card at the Bottom */
.terms-contact-card {
  background: linear-gradient(145deg, #FFFFFF, #F1FBF7);
  border: 1.5px solid rgba(0, 242, 157, 0.35);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.terms-contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.terms-contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  transition: all 0.25s ease;
}

.terms-contact-item:hover {
  border-color: #00F29D;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 242, 157, 0.08);
}

.terms-contact-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 242, 157, 0.12);
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-contact-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748B;
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.terms-contact-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0F172A;
  text-decoration: none;
}

.terms-contact-val:hover {
  color: #059669;
}

/* Responsive Media Queries for Terms Page */
@media screen and (max-width: 1024px) {
  .terms-layout-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .terms-toc-sidebar {
    position: static;
  }

  .terms-toc-card {
    padding: 1.5rem;
  }

  .terms-toc-nav {
    max-height: 220px;
  }
}

@media screen and (max-width: 768px) {
  .terms-main-section {
    padding: 3.5rem 1rem 5rem;
  }

  .terms-clause-card {
    padding: 1.75rem 1.25rem;
    border-radius: 16px;
  }

  .clause-title {
    font-size: 1.2rem;
  }

  .terms-lead-banner-card {
    padding: 1.75rem 1.25rem;
  }

  .terms-lead-title {
    font-size: 1.35rem;
  }

  .terms-meta-pills {
    flex-direction: column;
    width: 100%;
  }

  .terms-meta-pill {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   HOMEPAGE NEW SECTIONS: SERVICES, VIDEO (LIGHT), NETWORK LOCATIONS, APP (LIGHT)
   ========================================================================== */

/* Shared Homepage Section Header - Center Aligned & Balanced */
.home-section-header {
  max-width: 820px;
  margin: 0 auto 3.5rem;
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-section-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-top: 0.85rem;
  margin-bottom: 1rem;
  text-align: center;
}

.home-section-subheading {
  font-size: 1rem;
  color: #94A3B8;
  line-height: 1.65;
  max-width: 650px;
  margin: 0 auto;
  text-align: center;
}

.section-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.25);
  color: var(--accent-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.section-eyebrow-pill .eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  animation: pulseDot 2s infinite;
}

/* ================= 5. SERVICE CARDS SECTION ================= */
.home-services-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem;
  background: #070D18;
  color: #ffffff;
  overflow: hidden;
}

.home-services-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.services-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.22;
}

.services-glow-1 {
  top: 10%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.2) 0%, transparent 70%);
}

.services-glow-2 {
  bottom: 10%;
  right: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.18) 0%, transparent 70%);
}

.services-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 60px 60px;
}

.home-services-container {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
}

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

.home-service-card {
  position: relative;
  padding: 2.25rem 2rem;
  border-radius: 22px;
  background: rgba(13, 23, 42, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.home-service-card:hover {
  transform: translateY(-6px);
  background: rgba(18, 32, 58, 0.75);
  border-color: rgba(0, 242, 157, 0.35);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 242, 157, 0.12);
}

.service-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at top right, rgba(0, 242, 157, 0.08) 0%, transparent 70%);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

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

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

.service-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.25);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.service-icon-box.cyan {
  background: rgba(0, 210, 255, 0.12);
  border-color: rgba(0, 210, 255, 0.25);
  color: #00D2FF;
}

.service-icon-box.gold {
  background: rgba(255, 184, 0, 0.12);
  border-color: rgba(255, 184, 0, 0.3);
  color: #FFB800;
}

.home-service-card:hover .service-icon-box {
  transform: scale(1.08) rotate(5deg);
}

.service-card-num {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.05em;
}

.service-badge-soon {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFB800;
  background: rgba(255, 184, 0, 0.12);
  border: 1px solid rgba(255, 184, 0, 0.3);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.service-card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.service-card-desc {
  font-size: 0.925rem;
  color: #94A3B8;
  line-height: 1.6;
  flex: 1;
}

.service-card-footer {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.service-tag {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.service-tag.gold-tag {
  color: #FFB800;
}

.featured-service-card {
  grid-column: span 2;
}

/* ================= 6. VIDEO SHOWCASE SECTION (LIGHT THEME) ================= */
.home-video-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem;
  background: #F6FAF8;
  color: #0b1329;
  overflow: hidden;
}

.home-video-section .home-section-heading {
  color: #0b1329;
}

.home-video-section .home-section-subheading {
  color: #475569;
}

.home-video-section .section-eyebrow-pill {
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.25);
  color: #059669;
}

.home-video-section .section-eyebrow-pill .eyebrow-dot {
  background: #059669;
  box-shadow: 0 0 8px #059669;
}

.video-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v-glow-1 {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(0, 242, 157, 0.12) 0%, rgba(0, 210, 255, 0.08) 40%, transparent 70%);
  filter: blur(90px);
}

.home-video-container {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
}

.video-showcase-frame {
  position: relative;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 1.25rem;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.12), 0 0 30px rgba(0, 242, 157, 0.08);
}

.video-media-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #000000;
  aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.showcase-video-elem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.video-thumbnail-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 5;
  transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.45s ease;
  overflow: hidden;
  border-radius: 20px;
}

.video-thumbnail-cover.hide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.video-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-thumbnail-cover:hover .video-cover-img {
  transform: scale(1.03);
}

.video-cover-overlay-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
  transition: opacity 0.3s ease;
}

.video-thumbnail-cover:hover .video-cover-overlay-gradient {
  opacity: 0.8;
}

.video-play-btn-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-play-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f29d 0%, #00c878 100%);
  color: #08100c;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 35px rgba(0, 242, 157, 0.5), 0 0 0 8px rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
  position: relative;
  z-index: 2;
}

.video-thumbnail-cover:hover .video-play-btn {
  transform: scale(1.12);
  box-shadow: 0 16px 45px rgba(0, 242, 157, 0.7), 0 0 0 12px rgba(255, 255, 255, 0.3);
}

.video-play-btn svg {
  margin-left: 4px;
}

.play-btn-pulse {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid rgba(0, 242, 157, 0.75);
  animation: playPulse 2.2s cubic-bezier(0.25, 0, 0, 1) infinite;
  z-index: 1;
}

@keyframes playPulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

.video-badge-overlay {
  position: absolute;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.15rem;
  background: rgba(9, 17, 32, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.top-left-badge {
  top: 2.5rem;
  left: 2.5rem;
}

.bottom-right-badge {
  bottom: 2.5rem;
  right: 2.5rem;
}

.badge-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 10px var(--accent-primary);
  animation: pulseDot 2s infinite;
}

.badge-icon-check {
  color: var(--accent-primary);
  font-weight: 800;
}

/* ================= 7. NETWORK LOCATIONS LIST SECTION ================= */
.network-locations-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem;
  background: #080F1D;
  color: #ffffff;
  overflow: hidden;
}

.net-loc-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.net-glow-left {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.15) 0%, transparent 70%);
  filter: blur(100px);
}

.net-glow-right {
  position: absolute;
  bottom: 20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.15) 0%, transparent 70%);
  filter: blur(100px);
}

.network-locations-container {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
}

.network-columns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.network-col-card {
  border-radius: 24px;
  padding: 2.5rem 2.25rem;
  background: rgba(13, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.col-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.col-header-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.col-header-icon-box.green {
  background: rgba(0, 242, 157, 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(0, 242, 157, 0.3);
}

.col-header-icon-box.cyan {
  background: rgba(0, 210, 255, 0.15);
  color: #00D2FF;
  border: 1px solid rgba(0, 210, 255, 0.3);
}

.col-header-text {
  flex: 1;
}

.col-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.col-subtitle-tag {
  font-size: 0.8rem;
  color: #94A3B8;
  font-weight: 500;
}

.col-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.col-status-badge.active-badge {
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.3);
  color: var(--accent-primary);
}

.col-status-badge.soon-badge {
  background: rgba(0, 210, 255, 0.12);
  border: 1px solid rgba(0, 210, 255, 0.3);
  color: #00D2FF;
}

.status-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
  animation: pulseDot 2s infinite;
}

.status-radar-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00D2FF;
}

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

.city-chip {
  padding: 1rem 1.15rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: all 0.25s ease;
}

.city-chip:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.active-chip:hover {
  border-color: rgba(0, 242, 157, 0.4);
  box-shadow: 0 4px 15px rgba(0, 242, 157, 0.1);
}

.soon-chip:hover {
  border-color: rgba(0, 210, 255, 0.4);
  box-shadow: 0 4px 15px rgba(0, 210, 255, 0.1);
}

.city-name {
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
}

.chip-power-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-primary);
  background: rgba(0, 242, 157, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

.chip-soon-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #00D2FF;
  background: rgba(0, 210, 255, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
}

/* Network Bottom CTA Banner */
.network-cta-banner {
  padding: 1.75rem 2.5rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(13, 23, 42, 0.9) 0%, rgba(18, 33, 60, 0.9) 100%);
  border: 1px solid rgba(0, 242, 157, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 242, 157, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-banner-text-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cta-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(0, 242, 157, 0.15);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cta-banner-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
}

/* ================= 8. APP DOWNLOAD SECTION (LIGHT THEME) ================= */
.home-app-section {
  position: relative;
  width: 100%;
  padding: 7rem 2rem;
  background: #F0FDF4;
  color: #0b1329;
  overflow: hidden;
}

.home-app-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.app-glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
}

.blob-1 {
  top: 15%;
  left: 10%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
}

.blob-2 {
  bottom: 10%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
}

.home-app-container {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
}

.home-app-card {
  border-radius: 32px;
  padding: 4rem 3.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.08), 0 0 35px rgba(0, 242, 157, 0.08);
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.home-app-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.home-app-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0b1329;
}

.home-app-subtext {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.65;
  max-width: 520px;
}

.home-app-card .section-eyebrow-pill {
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.25);
  color: #059669;
  width: fit-content;
}

.home-app-card .section-eyebrow-pill .eyebrow-dot {
  background: #059669;
  box-shadow: 0 0 8px #059669;
}

.home-app-buttons-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.home-app-card .store-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.45rem;
  border-radius: 14px;
  background: #0B1329;
  border: 1px solid #0B1329;
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.home-app-card .store-badge-btn:hover {
  transform: translateY(-3px);
  background: #059669;
  border-color: #059669;
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.35);
}

.home-app-card .store-btn-soon {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #475569;
  cursor: default;
}

.home-app-card .store-btn-soon:hover {
  transform: none;
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: none;
}

.home-app-card .store-btn-soon .store-btn-main {
  color: #0B1329;
}

.home-app-card .store-btn-soon .store-btn-sub {
  color: #64748B;
}

.home-app-points {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.home-app-card .app-point-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1E293B;
}

.home-app-card .app-point-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(5, 150, 105, 0.15);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Home App Screenshot Mockup */
.home-app-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.home-phone-mockup-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  justify-content: center;
}

.home-phone-frame {
  position: relative;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.2), 0 0 30px rgba(5, 150, 105, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #0B1329;
}

.home-phone-screen {
  position: relative;
  display: block;
  width: 100%;
}

.home-app-screen-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.home-phone-frame:hover .home-app-screen-img {
  transform: scale(1.02);
}

.home-phone-badge {
  position: absolute;
  bottom: 2rem;
  right: -1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.phone-badge-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(5, 150, 105, 0.15);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.phone-badge-info {
  display: flex;
  flex-direction: column;
}

.phone-badge-title {
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 700;
  color: #0B1329;
}

.phone-badge-sub {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 600;
}

/* ================= RESPONSIVE DESIGN FOR NEW SECTIONS ================= */
@media screen and (max-width: 1024px) {
  .home-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-service-card {
    grid-column: span 2;
  }

  .home-app-card {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 3rem 2rem;
  }

  .home-phone-badge {
    right: 0;
  }
}

@media screen and (max-width: 768px) {
  .home-services-section,
  .home-video-section,
  .network-locations-section,
  .home-app-section {
    padding: 5rem 1.25rem;
  }

  .home-services-grid {
    grid-template-columns: 1fr;
  }

  .featured-service-card {
    grid-column: span 1;
  }

  .network-columns-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .city-chips-list {
    grid-template-columns: 1fr;
  }

  .network-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 1.75rem 1.25rem;
  }

  .cta-banner-text-group {
    flex-direction: column;
  }

  .video-badge-overlay {
    position: static;
    margin: 0.75rem auto 0;
    display: flex;
    justify-content: center;
    width: fit-content;
  }

  .home-app-buttons-row {
    flex-direction: column;
    align-items: stretch;
  }

  .home-app-card .store-badge-btn {
    justify-content: center;
  }

  .home-phone-badge {
    position: static;
    margin-top: 1rem;
  }
}

/* ==========================================================================
   ABOUT US PAGE: BANNER, WHO WE ARE INTRO & 3 INTERACTIVE TABS
   ========================================================================== */

/* 1. Page Banner with Breadcrumb */
.about-hero-section {
  position: relative;
  min-height: 480px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070D18;
  color: #ffffff;
  padding: 8rem 2rem 5rem;
  overflow: hidden;
}

.about-hero-bg-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

.about-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  transform: scale(1.05);
  transition: transform 10s ease;
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 13, 24, 0.75) 0%, rgba(7, 13, 24, 0.95) 100%);
}

.about-hero-mesh-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}

.about-hero-mesh-glow.glow-1 {
  top: -10%;
  left: 20%;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.18) 0%, transparent 70%);
}

.about-hero-mesh-glow.glow-2 {
  bottom: 0;
  right: 15%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.15) 0%, transparent 70%);
}

.about-hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
}

.about-hero-container {
  position: relative;
  z-index: 5;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.about-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Breadcrumb Styling */
.about-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  color: #94A3B8;
  margin-bottom: 0.5rem;
}

.breadcrumb-link {
  color: #E2E8F0;
  text-decoration: none;
  transition: color 0.25s ease;
}

.breadcrumb-link:hover {
  color: var(--accent-primary);
}

.breadcrumb-separator {
  color: var(--accent-primary);
  font-size: 0.95rem;
  font-weight: 700;
}

.breadcrumb-current {
  color: var(--accent-primary);
}

.about-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 900px;
}

.about-hero-curve-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 4;
}

.about-hero-curve-bottom svg {
  position: relative;
  display: block;
  width: 100%;
  height: 45px;
}

/* 2. Who We Are (Story Intro Section) */
.about-story-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem;
  background: #F6FAF8;
  color: #0b1329;
  overflow: hidden;
}

.about-story-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

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

.story-visual-col {
  position: relative;
}

.story-image-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.12), 0 0 35px rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #0B1329;
}

.story-image-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.2;
  overflow: hidden;
}

.story-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-image-card:hover .story-main-image {
  transform: scale(1.05);
}

.story-img-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11, 19, 41, 0.75) 100%);
  pointer-events: none;
}

.story-floating-badge {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: rgba(11, 19, 41, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.story-badge-item {
  display: flex;
  flex-direction: column;
}

.story-badge-val {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent-primary);
}

.story-badge-lbl {
  font-size: 0.72rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Story Right Content */
.story-content-col {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.story-content-col .section-eyebrow-pill {
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.25);
  color: #059669;
  width: fit-content;
}

.story-content-col .section-eyebrow-pill .eyebrow-dot {
  background: #059669;
  box-shadow: 0 0 8px #059669;
}

.story-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #0B1329;
}

.story-intro-body {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.story-para {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.75;
}

.story-highlight-box {
  margin-top: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: #FFFFFF;
  border-left: 4px solid #059669;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.story-highlight-box p {
  font-size: 0.98rem;
  color: #1E293B;
  font-weight: 600;
  line-height: 1.6;
}

/* 3. Interactive Tabs Section */
.mission-vision-tab-section {
  position: relative;
  width: 100%;
  padding: 6.5rem 2rem 7rem;
  background: #080F1D;
  color: #ffffff;
  overflow: hidden;
}

.mv-tab-container {
  max-width: 1140px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.mv-tab-card {
  position: relative;
  border-radius: 32px;
  padding: 3.5rem;
  background: rgba(13, 23, 42, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5), 0 0 35px rgba(0, 242, 157, 0.08);
}

.mv-tab-card-glow {
  position: absolute;
  top: 0;
  right: 10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.mv-tab-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.mv-tab-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  margin-top: 0.75rem;
}

.mv-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.65rem;
  border-radius: 9999px;
  font-size: 0.925rem;
  font-weight: 700;
  color: #94A3B8;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.mv-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.mv-tab-btn.active {
  color: #070D18;
  background: var(--accent-gradient);
  box-shadow: 0 4px 20px rgba(0, 242, 157, 0.35);
}

.mv-tab-btn.active .tab-btn-icon {
  color: #070D18;
}

.tab-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  transition: color 0.3s ease;
}

/* Tab Panels */
.mv-tab-panels {
  position: relative;
  width: 100%;
}

.mv-tab-panel {
  display: none;
  animation: fadeInPanel 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mv-tab-panel.active {
  display: block;
}

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

.panel-sub-title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.mv-lead-text {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #CBD5E1;
  max-width: 900px;
}

/* Vision Specific Highlight Cards */
.vision-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.vision-stat-card {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.vision-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 157, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.vision-stat-card.stat-card-featured {
  border-color: rgba(0, 242, 157, 0.35);
  background: rgba(0, 242, 157, 0.04);
}

.stat-tag-label {
  font-size: 0.8rem;
  color: #94A3B8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-highlight-val {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--accent-primary);
}

/* Mission List Grid (Tab 2) */
.mission-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

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

.mission-item-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 242, 157, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.mission-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 242, 157, 0.12);
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mission-item-text {
  font-size: 0.975rem;
  color: #E2E8F0;
  line-height: 1.6;
  font-weight: 500;
}

/* What We Do List Grid (Tab 3) */
.wwd-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

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

.wwd-item-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 210, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.wwd-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 210, 255, 0.12);
  color: #00D2FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wwd-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wwd-item-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
}

.wwd-item-desc {
  font-size: 0.925rem;
  color: #94A3B8;
  line-height: 1.55;
}

.wwd-item-featured {
  grid-column: span 2;
  border-color: rgba(0, 242, 157, 0.25);
  background: rgba(0, 242, 157, 0.03);
}

.wwd-item-featured .wwd-icon-box {
  background: rgba(0, 242, 157, 0.15);
  color: var(--accent-primary);
}

/* Responsive Styles for About Page */
@media screen and (max-width: 1024px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .mv-tab-card {
    padding: 2.5rem 2rem;
  }

  .mission-list-grid,
  .wwd-list-grid {
    grid-template-columns: 1fr;
  }

  .wwd-item-featured {
    grid-column: span 1;
  }
}

@media screen and (max-width: 768px) {
  .about-hero-section {
    padding: 7rem 1.25rem 4rem;
    min-height: 380px;
  }

  .about-story-section,
  .mission-vision-tab-section {
    padding: 4.5rem 1.25rem;
  }

  .mv-tab-nav {
    flex-direction: column;
    border-radius: 20px;
    width: 100%;
    padding: 0.5rem;
  }

  .mv-tab-btn {
    width: 100%;
    justify-content: center;
  }

  .vision-highlights-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LOCATIONS PAGE: BANNER, INTRO, STATUS FILTERS, CARDS & FRANCHISE CTA
   ========================================================================== */

/* 1. Location Intro Section */
.location-intro-section {
  position: relative;
  width: 100%;
  padding: 5rem 2rem 2rem;
  background: #F6FAF8;
  color: #0b1329;
}

.location-intro-container {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.location-intro-heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #0B1329;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.location-intro-text {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.75;
  max-width: 820px;
  margin: 0 auto;
}

/* 2. Location Status Filter Bar */
.location-filter-section {
  position: relative;
  width: 100%;
  padding: 1.5rem 2rem 3rem;
  background: #F6FAF8;
}

.location-filter-container {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1.25rem 2rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.loc-filter-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.loc-filter-label {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #0B1329;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loc-filter-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F1F5F9;
  padding: 0.35rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.loc-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #64748B;
  background: transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.loc-filter-btn:hover {
  color: #0B1329;
}

.loc-filter-btn.active {
  background: #0B1329;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(11, 19, 41, 0.25);
}

.loc-filter-btn.active .loc-filter-dot {
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
}

.loc-filter-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #94A3B8;
  transition: all 0.25s ease;
}

.loc-count-chip {
  font-size: 0.85rem;
  font-weight: 600;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
}

/* 3. Station Directory Grid & Cards */
.location-directory-section {
  position: relative;
  width: 100%;
  padding: 1rem 2rem 6rem;
  background: #F6FAF8;
}

.location-directory-container {
  max-width: 1240px;
  margin: 0 auto;
}

.stations-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.75rem;
}

/* Active Station Card */
.station-card {
  position: relative;
  border-radius: 24px;
  padding: 2.25rem 2rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.station-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.1), 0 0 25px rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.3);
}

.station-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.station-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.station-status-pill.status-active {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.station-status-pill.status-coming-soon {
  background: rgba(2, 132, 199, 0.12);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.station-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-active .station-status-dot {
  box-shadow: 0 0 6px #059669;
  animation: pulseDot 2s infinite;
}

.station-city-badge {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748B;
  background: #F1F5F9;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
}

.station-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #0B1329;
  line-height: 1.3;
}

.station-address-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: #64748B;
  line-height: 1.5;
}

.station-address-row svg {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: #059669;
}

.station-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  border-radius: 16px;
  background: #F8FAFC;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.station-spec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  gap: 0.75rem;
}

.spec-key {
  color: #64748B;
  font-weight: 600;
}

.spec-val {
  color: #0B1329;
  font-weight: 700;
  text-align: right;
}

.station-amenities-box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.amenities-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.amenities-text {
  font-size: 0.88rem;
  color: #334155;
  font-weight: 600;
}

.station-card-action {
  margin-top: auto;
  padding-top: 0.75rem;
}

.station-direction-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1.5rem;
  border-radius: 14px;
  background: #0B1329;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.station-direction-btn:hover {
  background: #059669;
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
  transform: translateY(-2px);
}

/* Coming Soon Station Card */
.station-card.card-coming-soon {
  background: #FFFFFF;
  border-color: rgba(2, 132, 199, 0.18);
  border-left: 4px solid #0284C7;
}

.station-card.card-coming-soon:hover {
  border-color: #0284C7;
  box-shadow: 0 20px 45px -10px rgba(2, 132, 199, 0.15);
}

.coming-soon-info-box {
  padding: 1.5rem;
  border-radius: 16px;
  background: #F0F9FF;
  border: 1px solid rgba(2, 132, 199, 0.15);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.coming-soon-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(2, 132, 199, 0.15);
  color: #0284C7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.coming-soon-meta {
  display: flex;
  flex-direction: column;
}

.coming-soon-region {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0B1329;
}

.coming-soon-sub {
  font-size: 0.85rem;
  color: #0284C7;
  font-weight: 600;
}

/* 4. Franchise Call to Action Section */
.franchise-cta-section {
  position: relative;
  width: 100%;
  padding: 6rem 2rem;
  background: #070D18;
  color: #ffffff;
  overflow: hidden;
}

.franchise-cta-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cta-glow-1 {
  position: absolute;
  top: 10%;
  left: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.15) 0%, transparent 70%);
  filter: blur(100px);
}

.cta-glow-2 {
  position: absolute;
  bottom: 10%;
  right: 20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, transparent 70%);
  filter: blur(100px);
}

.franchise-cta-container {
  position: relative;
  z-index: 5;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.franchise-cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.franchise-cta-desc {
  font-size: 1.15rem;
  color: #CBD5E1;
  line-height: 1.7;
  max-width: 700px;
}

.franchise-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.25rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #070D18;
  font-size: 1.05rem;
  font-weight: 800;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  margin-top: 0.5rem;
}

.franchise-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 242, 157, 0.5);
}

@media screen and (max-width: 768px) {
  .location-filter-container {
    flex-direction: column;
    align-items: stretch;
  }

  .loc-filter-buttons {
    flex-wrap: wrap;
    border-radius: 16px;
  }

  .loc-filter-btn {
    flex: 1;
    justify-content: center;
  }

  .stations-cards-grid {
    grid-template-columns: 1fr;
  }

  .franchise-cta-section {
    padding: 4.5rem 1.25rem;
  }
}

/* ==========================================================================
   DOWNLOAD APP PAGE STYLES (MATCHING BRAND SYSTEM)
   ========================================================================== */

.app-page-body {
  background-color: #070D18;
  color: #1E293B;
  overflow-x: clip;
}

/* 1. App Banner */
.app-banner-section {
  position: relative;
  padding: 8.5rem 2rem 5.5rem;
  background: #070D18;
  overflow: hidden;
  text-align: center;
}

/* 2. Download App Hero (Light Theme) */
.app-hero-section.theme-light {
  position: relative;
  padding: 5rem 2rem 6rem;
  background: linear-gradient(180deg, #F6FAF8 0%, #FFFFFF 100%);
  overflow: hidden;
}

.app-hero-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.light-glow-1 {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
  filter: blur(90px);
}

.light-glow-2 {
  position: absolute;
  bottom: -10%;
  left: -5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
  filter: blur(90px);
}

.app-hero-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.app-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 4rem;
}

.app-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.app-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.app-badge-pill.light-badge {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.app-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.6);
  animation: pulseDot 2s infinite;
}

.app-hero-title.light-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.2;
  color: #0B1329;
  letter-spacing: -0.02em;
  margin: 0;
}

.app-hero-desc.light-hero-desc {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #475569;
  max-width: 580px;
  margin: 0;
}

.app-download-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.store-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.5rem;
  border-radius: 14px;
  text-decoration: none;
  background: #0B1329;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(11, 19, 41, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.store-badge-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(5, 150, 105, 0.3);
  border-color: #00F29D;
  color: #FFFFFF;
}

.store-badge-btn.coming-soon-badge-btn {
  background: #111D35;
  border: 1px dashed rgba(0, 210, 255, 0.4);
  cursor: default;
}

.store-badge-btn.coming-soon-badge-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 210, 255, 0.2);
  border-color: #00D2FF;
}

.store-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.store-btn-sub {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94A3B8;
  line-height: 1.1;
}

.store-btn-main {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
}

.coming-soon-tag {
  font-size: 0.68rem;
  font-weight: 800;
  color: #00D2FF;
  background: rgba(0, 210, 255, 0.15);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  margin-left: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-block;
}

.app-trust-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.rating-stars {
  color: #F59E0B;
  font-size: 1.1rem;
  letter-spacing: 2px;
}

.rating-label.light-rating-label {
  font-size: 0.9rem;
  color: #64748B;
}

.rating-label.light-rating-label strong {
  color: #0B1329;
}

/* Smartphone Mockup Composition */
.app-hero-mockups-col {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mockups-composition-wrapper {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-mockup-frame {
  position: absolute;
  width: 260px;
  border-radius: 38px;
  padding: 10px;
  background: #0B1329;
  box-shadow: 0 25px 60px -15px rgba(11, 19, 41, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.phone-mockup-frame.phone-front {
  left: 10px;
  bottom: 10px;
  z-index: 3;
  transform: rotate(-4deg);
}

.phone-mockup-frame.phone-back {
  right: 15px;
  top: 15px;
  z-index: 2;
  transform: rotate(6deg) scale(0.95);
  opacity: 0.92;
}

.mockups-composition-wrapper:hover .phone-front {
  transform: rotate(-1deg) translateY(-8px);
}

.mockups-composition-wrapper:hover .phone-back {
  transform: rotate(3deg) translateY(-5px) scale(0.97);
}

.phone-case {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  background: #000000;
  border: 2px solid #1E293B;
}

.phone-speaker-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #0B1329;
  border-radius: 6px;
  z-index: 10;
}

.phone-screen-container {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 18.5;
  overflow: hidden;
  background: #0B1329;
}

.app-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.screen-gloss-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

.phone-glow-aura {
  position: absolute;
  inset: -15px;
  border-radius: 45px;
  filter: blur(25px);
  z-index: -1;
  opacity: 0.5;
}

.phone-glow-aura.glow-green {
  background: rgba(0, 242, 157, 0.35);
}

.phone-glow-aura.glow-cyan {
  background: rgba(0, 210, 255, 0.3);
}

.floating-app-badge {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.15rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.15);
  animation: floatBadge 4s ease-in-out infinite alternate;
}

.float-badge-top {
  top: 15px;
  left: -20px;
}

.float-badge-bottom {
  bottom: 25px;
  right: -15px;
  animation-delay: 2s;
}

@keyframes floatBadge {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

.float-badge-icon {
  font-size: 1.1rem;
}

.pulse-icon {
  animation: pulseIcon 1.5s infinite;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 10px #059669;
}

.float-badge-content {
  display: flex;
  flex-direction: column;
}

.float-badge-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0B1329;
}

.float-badge-sub {
  font-size: 0.72rem;
  color: #64748B;
}

/* ================= 3. APP FEATURES SECTION (2 CARDS - DARK THEME) ================= */
.app-features-section.theme-dark {
  position: relative;
  padding: 6.5rem 2rem;
  background: #070D18;
  overflow: hidden;
}

.features-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.feat-glow-1 {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.12) 0%, transparent 70%);
  filter: blur(80px);
}

.feat-glow-2 {
  position: absolute;
  bottom: 10%;
  right: 10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.1) 0%, transparent 70%);
  filter: blur(80px);
}

.app-features-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.features-header-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.features-dark-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.app-2features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.app-feature-card {
  position: relative;
  background: rgba(13, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  border: 1px solid rgba(0, 242, 157, 0.18);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.app-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.app-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 55px -10px rgba(0, 242, 157, 0.22);
  border-color: rgba(0, 242, 157, 0.45);
}

.app-feature-card:hover::before {
  opacity: 1;
}

.app-feature-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.25);
  color: #00F29D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.app-feature-card:hover .app-feature-icon-box {
  background: var(--accent-gradient);
  color: #070D18;
  border-color: transparent;
  transform: scale(1.08) rotate(3deg);
}

.app-feature-heading {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.app-feature-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0;
}

.app-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #00F29D;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.2);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  margin-top: auto;
}


/* ================= 4. EASY STEPS TO CHARGE (STICKY SCROLL INTERACTIVE) ================= */
.app-how-it-works-section.theme-light {
  position: relative;
  padding: 6.5rem 2rem 7.5rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAF9 100%);
  z-index: 5;
}

.how-ambient-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.light-how-glow {
  position: absolute;
  top: 15%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.1) 0%, transparent 70%);
  filter: blur(90px);
}

.light-how-glow-2 {
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
  filter: blur(90px);
}

.how-section-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.how-header-row {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.how-main-heading.light-how-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 800;
  color: #0B1329;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.how-header-desc.light-how-desc {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* Interactive Sticky Layout (Sticky Phone Left, Content Right) */
.how-interactive-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 4.5rem;
  align-items: start;
  position: relative;
}

.how-steps-col {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  position: relative;
  padding-left: 2rem;
}

.steps-progress-track {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 0;
  width: 4px;
  background: rgba(5, 150, 105, 0.15);
  border-radius: 4px;
}

.progress-bar-fill {
  width: 100%;
  height: 25%;
  background: var(--accent-gradient, #059669);
  border-radius: 4px;
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card-row {
  position: relative;
  transition: all 0.35s ease;
  cursor: pointer;
}

.how-steps-col .step-content-card,
.how-interactive-layout .step-content-card {
  background: #FFFFFF;
  border-radius: 24px;
  padding: 2.85rem 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.how-steps-col .step-card-row.active .step-content-card,
.how-interactive-layout .step-card-row.active .step-content-card {
  border-color: #059669;
  box-shadow: 0 18px 45px -10px rgba(5, 150, 105, 0.2);
  transform: translateX(8px);
  background: #FFFFFF;
}

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

.step-badge {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  padding: 0.35rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(5, 150, 105, 0.2);
  transition: all 0.3s ease;
}

.step-card-row.active .step-badge {
  background: #059669;
  color: #FFFFFF;
}

.step-status-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: #94A3B8;
}

.step-card-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #0B1329;
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.step-card-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #475569;
  margin: 0 0 1.25rem;
}

.step-features-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.step-chip {
  font-size: 0.82rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(5, 150, 105, 0.15);
}

.step-mobile-screen-wrap {
  display: none;
  margin-bottom: 1.5rem;
}

.mobile-phone-mini-frame {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border: 2px solid #0B1329;
  max-width: 240px;
  margin: 0 auto;
}

.mobile-step-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Sticky Phone Column (Left Side) */
.how-sticky-phone-col {
  position: -webkit-sticky;
  position: sticky;
  top: 130px;
  align-self: start;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.sticky-phone-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.how-interactive-phone {
  position: relative;
  width: 280px;
  border-radius: 40px;
  padding: 10px;
  background: #0B1329;
  box-shadow: 0 30px 70px -15px rgba(11, 19, 41, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.how-interactive-phone .phone-screen-container {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 18.5;
  overflow: hidden;
  background: #0B1329;
}

.how-app-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out;
  transform: scale(1.03);
  pointer-events: none;
}

.how-app-screen.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

.phone-glow-aura.glow-interactive {
  background: radial-gradient(circle, rgba(0, 242, 157, 0.3) 0%, rgba(0, 210, 255, 0.2) 60%, transparent 80%);
}

.sticky-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 1.35rem;
  border-radius: 9999px;
  background: #0B1329;
  color: #00F29D;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 242, 157, 0.35);
  letter-spacing: 0.02em;
}

.step-pill-indicator {
  color: #00F29D;
  font-size: 0.85rem;
  animation: pulseDot 1.5s infinite;
}

@media screen and (max-width: 991px) {
  .how-interactive-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .how-sticky-phone-col {
    display: none;
  }

  .step-mobile-screen-wrap {
    display: block;
  }

  .how-steps-col {
    padding-left: 0;
  }

  .steps-progress-track {
    display: none;
  }

  .step-card-row.active .step-content-card {
    transform: none;
  }
}

/* ================= 5. RFID CARD SECTION ================= */
.rfid-card-section {
  position: relative;
  padding: 7.5rem 2rem 7.5rem;
  background-color: #070D18;
  color: #FFFFFF;
  overflow: hidden;
  z-index: 25;
  isolation: isolate;
  clear: both;
}

.rfid-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rfid-glow-1 {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 242, 157, 0.15) 0%, transparent 70%);
  filter: blur(100px);
}

.rfid-glow-2 {
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.15) 0%, transparent 70%);
  filter: blur(100px);
}

.rfid-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.rfid-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 4rem;
}

.rfid-content-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.rfid-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  background: rgba(0, 242, 157, 0.1);
  color: #00F29D;
  border: 1px solid rgba(0, 242, 157, 0.25);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rfid-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00F29D;
  box-shadow: 0 0 8px #00F29D;
  animation: pulseDot 2s infinite;
}

.rfid-main-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

.rfid-desc {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0;
  max-width: 600px;
}

.rfid-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.5rem;
  list-style: none;
  padding: 0;
}

.rfid-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #F1F5F9;
}

.benefit-check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 242, 157, 0.15);
  border: 1px solid rgba(0, 242, 157, 0.35);
  color: #00F29D;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

.rfid-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 2.25rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #070D18;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0.75rem;
}

.rfid-apply-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 242, 157, 0.5);
  color: #070D18;
}

/* RFID Card Visual Mockup */
.rfid-visual-col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.rfid-card-wrap {
  position: relative;
  width: 100%;
  max-width: 420px;
}

.rfid-smart-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  border-radius: 20px;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, #0F1D36 0%, #081120 50%, #0F2E3A 100%);
  border: 1px solid rgba(0, 242, 157, 0.3);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), 0 0 35px rgba(0, 242, 157, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.rfid-card-wrap:hover .rfid-smart-card {
  transform: translateY(-8px) rotate(-1deg);
  border-color: rgba(0, 242, 157, 0.55);
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.7), 0 0 45px rgba(0, 242, 157, 0.25);
}

.rfid-card-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.08) 40%, rgba(0, 242, 157, 0.12) 50%, transparent 70%);
  pointer-events: none;
}

.rfid-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rfid-logo-text {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FFFFFF;
}

.rfid-wave-icon {
  color: #00F29D;
}

.rfid-chip-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rfid-emv-chip {
  width: 44px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(135deg, #d4af37 0%, #f6e27a 50%, #aa771c 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
  position: relative;
}

.rfid-emv-chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.3);
}

.rfid-card-tag {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #00D2FF;
  text-transform: uppercase;
}

.rfid-card-bottom-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.rfid-holder-info {
  display: flex;
  flex-direction: column;
}

.rfid-holder-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  font-weight: 700;
}

.rfid-holder-name {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}

.rfid-network-tag {
  font-size: 0.75rem;
  font-weight: 800;
  color: #00F29D;
  background: rgba(0, 242, 157, 0.12);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(0, 242, 157, 0.25);
}

/* ================= DOWNLOAD APP RESPONSIVE ================= */
@media screen and (max-width: 1024px) {
  .app-hero-grid,
  .rfid-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .app-hero-content,
  .rfid-content-col {
    align-items: center;
    text-align: center;
  }

  .app-hero-desc.light-hero-desc,
  .rfid-desc {
    max-width: 100%;
  }

  .app-download-badges,
  .app-trust-rating {
    justify-content: center;
  }

  .rfid-benefits-list {
    align-items: flex-start;
    text-align: left;
  }

  .app-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .app-2features-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .app-feature-card {
    padding: 2.25rem 1.75rem;
  }

  .app-steps-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .mockups-composition-wrapper {
    height: 420px;
  }

  .phone-mockup-frame {
    width: 220px;
  }

  .floating-app-badge {
    display: none;
  }
}


/* ==========================================================================
   FRANCHISE PAGE STYLES (MATCHING GOGREEN DESIGN SYSTEM)
   ========================================================================== */

.franchise-page-body {
  background-color: #070D18;
  color: #1E293B;
  overflow-x: clip;
}

.franchise-container {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.section-header-center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
}

.section-title-large {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.section-title-large.light-title {
  color: #0B1329;
}

.section-title-large.dark-title {
  color: #FFFFFF;
}

.section-subtitle {
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
}

.section-subtitle.light-subtitle {
  color: #475569;
}

.section-subtitle.dark-subtitle {
  color: #CBD5E1;
}

/* ================= 2. FRANCHISE INTRO SECTION (LIGHT THEME) ================= */
.franchise-intro-section {
  position: relative;
  padding: 6.5rem 2rem 7rem;
  background: #FFFFFF;
  overflow: hidden;
}

.intro-ambient-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.franchise-intro-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4.5rem;
  align-items: center;
}

.franchise-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.intro-text-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.intro-text-body p {
  font-size: 1.08rem;
  line-height: 1.75;
  color: #475569;
  margin: 0;
}

.intro-highlights-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.intro-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  color: #059669;
  font-size: 0.88rem;
  font-weight: 700;
}

.intro-chip-icon {
  font-size: 1rem;
}

/* Intro Visual Card */
.franchise-intro-visual {
  position: relative;
}

.intro-visual-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.12), 0 0 35px rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #0B1329;
}

.intro-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
}

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

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

.intro-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 19, 41, 0.8) 100%);
}

.intro-floating-stat-card {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: 20px;
  background: rgba(11, 19, 41, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 242, 157, 0.3);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #FFFFFF;
}

.stat-badge-icon {
  font-size: 1.8rem;
}

.stat-badge-text {
  display: flex;
  flex-direction: column;
}

.stat-badge-text strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  color: #00F29D;
}

.stat-badge-text span {
  font-size: 0.82rem;
  color: #CBD5E1;
}

/* ================= 3. WHY INVEST SECTION (DARK THEME) ================= */
.franchise-why-invest-section.theme-dark {
  position: relative;
  padding: 6.5rem 2rem;
  background: #070D18;
  overflow: hidden;
}

.why-invest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
}

.why-invest-card {
  position: relative;
  background: rgba(13, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 2.75rem 2rem;
  border: 1px solid rgba(0, 242, 157, 0.18);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.why-invest-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 22px 55px -10px rgba(0, 242, 157, 0.22);
}

.why-icon-box {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.25);
  color: #00F29D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.why-invest-card:hover .why-icon-box {
  background: var(--accent-gradient);
  color: #070D18;
  transform: scale(1.08) rotate(3deg);
}

.why-card-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.3;
}

.why-card-text {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #CBD5E1;
  margin: 0;
}

/* ================= 4. FRANCHISOR SUPPORT SECTION (LIGHT THEME) ================= */
.franchise-support-section {
  position: relative;
  padding: 6.5rem 2rem;
  background: linear-gradient(180deg, #F6FAF8 0%, #FFFFFF 100%);
  overflow: hidden;
}

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

.support-card-item {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 2.75rem 2.25rem;
  border: 1px solid rgba(5, 150, 105, 0.15);
  box-shadow: 0 12px 35px -10px rgba(5, 150, 105, 0.08);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.support-card-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--accent-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.support-card-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -10px rgba(5, 150, 105, 0.16);
  border-color: rgba(5, 150, 105, 0.35);
}

.support-card-item:hover::before {
  opacity: 1;
}

.support-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.support-step-num {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: rgba(5, 150, 105, 0.35);
  letter-spacing: -0.02em;
}

.support-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.support-card-item:hover .support-icon-circle {
  background: var(--accent-gradient);
  color: #070D18;
  transform: scale(1.08);
}

.support-card-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #0B1329;
  margin: 0;
  line-height: 1.3;
}

.support-card-desc {
  font-size: 0.98rem;
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

.support-card-footer {
  margin-top: auto;
  padding-top: 0.5rem;
}

.support-pill-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  padding: 0.3rem 0.8rem;
  border-radius: 9999px;
}

/* ================= 5. IDEAL STATION LOCATIONS (DARK THEME) ================= */
.franchise-locations-section.theme-dark {
  position: relative;
  padding: 6.5rem 2rem;
  background: #070D18;
  overflow: hidden;
}

.ideal-locations-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.location-card-item {
  position: relative;
  background: rgba(13, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 22px;
  padding: 2.25rem 1.5rem;
  border: 1px solid rgba(0, 242, 157, 0.16);
  box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.location-card-item:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 20px 45px -10px rgba(0, 242, 157, 0.2);
}

.location-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(0, 242, 157, 0.1);
  border: 1px solid rgba(0, 242, 157, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.loc-emoji {
  font-size: 1.6rem;
}

.loc-card-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.35;
}

.loc-card-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #CBD5E1;
  margin: 0;
}

.location-amenity-highlight {
  margin-top: 3.5rem;
  padding: 1.5rem 2.25rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 242, 157, 0.12) 0%, rgba(0, 210, 255, 0.08) 100%);
  border: 1px solid rgba(0, 242, 157, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.amenity-highlight-icon {
  font-size: 1.6rem;
}

.amenity-highlight-text {
  font-size: 1.05rem;
  color: #FFFFFF;
  margin: 0;
}

.amenity-highlight-text strong {
  color: #00F29D;
}

/* ================= 6. FRANCHISE MODELS (LIGHT THEME) ================= */
.franchise-models-section {
  position: relative;
  padding: 6.5rem 2rem;
  background: #FFFFFF;
  overflow: hidden;
}

.franchise-models-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.25rem;
  align-items: stretch;
}

.model-pricing-card {
  position: relative;
  background: #F8FAF9;
  border-radius: 28px;
  padding: 3rem 2.25rem 2.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.model-pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px -10px rgba(5, 150, 105, 0.18);
  border-color: rgba(5, 150, 105, 0.35);
  background: #FFFFFF;
}

.model-pricing-card.featured-model {
  background: #FFFFFF;
  border: 2px solid #059669;
  box-shadow: 0 20px 50px -10px rgba(5, 150, 105, 0.2);
  transform: scale(1.02);
}

.model-pricing-card.featured-model:hover {
  transform: scale(1.02) translateY(-8px);
}

.model-badge-top {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #0B1329;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.35rem 1rem;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.model-badge-popular {
  background: var(--accent-gradient);
  color: #070D18;
}

.model-card-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.model-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: #0B1329;
  margin: 0 0 0.85rem;
}

.model-target-pill {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #475569;
}

.model-target-pill .target-label {
  font-weight: 700;
  color: #059669;
}

.model-target-pill .target-val {
  font-weight: 600;
  color: #0B1329;
}

.model-details-body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-bottom: 2.25rem;
  flex-grow: 1;
}

.detail-block-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  margin: 0 0 0.85rem;
}

.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1E293B;
  font-weight: 600;
}

.list-bullet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #059669;
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.check-icon {
  color: #059669;
  font-weight: 800;
  flex-shrink: 0;
}

.model-card-action {
  margin-top: auto;
}

.btn-model-apply {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.95rem 1.5rem;
  border-radius: 16px;
  background: #0B1329;
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-model-apply:hover {
  background: #059669;
  box-shadow: 0 8px 25px rgba(5, 150, 105, 0.35);
  color: #FFFFFF;
}

.btn-model-apply.featured-btn {
  background: var(--accent-gradient);
  color: #070D18;
  font-weight: 800;
  box-shadow: 0 8px 25px rgba(0, 242, 157, 0.35);
}

.btn-model-apply.featured-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 242, 157, 0.5);
  color: #070D18;
}

/* ================= 7. HOW IT WORKS 5 STEPS (DARK THEME) ================= */
.franchise-how-it-works-section.theme-dark {
  position: relative;
  padding: 6.5rem 2rem;
  background: #070D18;
  overflow: hidden;
}

.franchise-steps-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  position: relative;
}

.timeline-step-card {
  position: relative;
  background: rgba(13, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 24px;
  padding: 2.5rem 1.75rem;
  border: 1px solid rgba(0, 242, 157, 0.18);
  box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 22px 55px -10px rgba(0, 242, 157, 0.22);
}

.step-badge-number {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: #00F29D;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.25);
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.step-card-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0;
}

.step-card-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #CBD5E1;
  margin: 0;
}

/* ================= 8. FRANCHISE ENQUIRY FORM SECTION (LIGHT THEME) ================= */
.franchise-form-section {
  position: relative;
  padding: 6.5rem 2rem;
  background: linear-gradient(180deg, #F6FAF8 0%, #FFFFFF 100%);
  overflow: hidden;
}

.form-ambient-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.franchise-form-card-wrapper {
  max-width: 860px;
  margin: 0 auto;
}

.franchise-form-card {
  background: #FFFFFF;
  border-radius: 32px;
  padding: 3.5rem 3rem;
  border: 1px solid rgba(5, 150, 105, 0.15);
  box-shadow: 0 25px 60px -15px rgba(5, 150, 105, 0.12);
}

.franchise-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.form-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.form-field-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field-group.full-width-field {
  grid-column: span 2;
}

.form-field-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0B1329;
}

.required-mark {
  color: #EF4444;
}

.input-control-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input-control {
  width: 100%;
  padding: 0.95rem 1.25rem 0.95rem 2.85rem;
  border-radius: 14px;
  border: 1.5px solid #E2E8F0;
  background: #F8FAFC;
  font-family: inherit;
  font-size: 0.98rem;
  color: #0B1329;
  transition: all 0.25s ease;
  outline: none;
}

.form-input-control:focus {
  border-color: #059669;
  background: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}

.form-input-control.error {
  border-color: #EF4444;
  background: #FEF2F2;
}

.input-icon {
  position: absolute;
  left: 1rem;
  color: #94A3B8;
  pointer-events: none;
}

.form-input-control:focus + .input-icon {
  color: #059669;
}

.form-select-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  cursor: pointer;
}

.select-dropdown-arrow {
  position: absolute;
  right: 1rem;
  color: #64748B;
  pointer-events: none;
}

.form-textarea-control {
  padding-left: 1.25rem;
  resize: vertical;
  min-height: 110px;
}

.field-error-msg {
  font-size: 0.8rem;
  color: #EF4444;
  font-weight: 600;
  display: none;
}

.field-error-msg.show {
  display: block;
}

/* Radio Pill Selector for Land */
.land-options-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.radio-pill-label {
  cursor: pointer;
}

.radio-pill-label input[type="radio"] {
  display: none;
}

.radio-pill-custom {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  transition: all 0.25s ease;
}

.radio-pill-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #CBD5E1;
  background: #FFFFFF;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.radio-pill-label input[type="radio"]:checked + .radio-pill-custom {
  background: rgba(5, 150, 105, 0.08);
  border-color: #059669;
  color: #059669;
}

.radio-pill-label input[type="radio"]:checked + .radio-pill-custom .radio-pill-dot {
  border-color: #059669;
  background: #059669;
  box-shadow: inset 0 0 0 3px #FFFFFF;
}

/* Confirmation Checkbox */
.form-checkbox-group {
  margin-top: 0.5rem;
}

.custom-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.custom-checkbox-container input[type="checkbox"] {
  display: none;
}

.checkbox-checkmark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #CBD5E1;
  background: #F8FAFC;
  flex-shrink: 0;
  margin-top: 0.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.custom-checkbox-container input[type="checkbox"]:checked + .checkbox-checkmark {
  background: #059669;
  border-color: #059669;
}

.custom-checkbox-container input[type="checkbox"]:checked + .checkbox-checkmark::after {
  content: '✓';
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 800;
}

.checkbox-label-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  font-weight: 500;
}

/* Submit Button */
.form-submit-row {
  margin-top: 0.5rem;
}

.franchise-submit-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.15rem 2rem;
  border-radius: 16px;
  background: var(--accent-gradient);
  color: #070D18;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.franchise-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 242, 157, 0.5);
}

/* Status Alert */
.form-status-alert {
  padding: 1.5rem 2rem;
  border-radius: 20px;
  background: rgba(5, 150, 105, 0.1);
  border: 1.5px solid #059669;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.form-status-alert .alert-icon-wrap {
  color: #059669;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.form-status-alert .alert-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 800;
  color: #059669;
  margin: 0 0 0.35rem;
}

.form-status-alert .alert-message {
  font-size: 0.95rem;
  color: #334155;
  margin: 0;
  line-height: 1.55;
}

/* ================= 9. FRANCHISE FAQS SECTION (DARK THEME) ================= */
.franchise-faq-section.theme-dark {
  position: relative;
  padding: 6.5rem 2rem 7.5rem;
  background: #070D18;
  overflow: hidden;
}

.faq-accordion-wrapper {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.faq-accordion-item {
  position: relative;
  background: rgba(13, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 20px;
  border: 1px solid rgba(0, 242, 157, 0.18);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-accordion-item.active {
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 15px 40px -10px rgba(0, 242, 157, 0.18);
}

.faq-question-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  transition: color 0.25s ease;
}

.faq-question-btn:hover {
  color: #00F29D;
}

.faq-toggle-icon {
  color: #00F29D;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.faq-accordion-item.active .faq-toggle-icon {
  transform: rotate(180deg);
}

.faq-answer-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 2rem;
}

.faq-accordion-item.active .faq-answer-panel {
  padding: 0 2rem 1.75rem;
}

.faq-answer-panel p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #CBD5E1;
  margin: 0;
}

/* ================= FRANCHISE RESPONSIVE DESIGN ================= */
@media screen and (max-width: 1024px) {
  .franchise-intro-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .why-invest-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .support-6cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ideal-locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .franchise-models-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  .model-pricing-card.featured-model {
    transform: none;
  }

  .model-pricing-card.featured-model:hover {
    transform: translateY(-8px);
  }

  .franchise-steps-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .franchise-intro-section,
  .franchise-why-invest-section.theme-dark,
  .franchise-support-section,
  .franchise-locations-section.theme-dark,
  .franchise-models-section,
  .franchise-how-it-works-section.theme-dark,
  .franchise-form-section,
  .franchise-faq-section.theme-dark {
    padding: 4.5rem 1.25rem;
  }

  .why-invest-grid {
    grid-template-columns: 1fr;
  }

  .support-6cards-grid {
    grid-template-columns: 1fr;
  }

  .ideal-locations-grid {
    grid-template-columns: 1fr;
  }

  .franchise-steps-timeline {
    grid-template-columns: 1fr;
  }

  .form-grid-row {
    grid-template-columns: 1fr;
  }

  .form-field-group.full-width-field {
    grid-column: span 1;
  }

  .land-options-row {
    grid-template-columns: 1fr;
  }

  .franchise-form-card {
    padding: 2.25rem 1.5rem;
  }

  .faq-question-btn {
    padding: 1.25rem 1.5rem;
    font-size: 1.05rem;
  }

  .faq-accordion-item.active .faq-answer-panel {
    padding: 0 1.5rem 1.25rem;
  }
}


/* ==========================================================================
   FAQ PAGE STYLES (MATCHING GOGREEN DESIGN SYSTEM)
   ========================================================================== */

.faq-page-body {
  background-color: #070D18;
  color: #1E293B;
  overflow-x: clip;
}

.faq-container {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   2. FAQ INTRO SECTION
   -------------------------------------------------------------------------- */
.faq-intro-section {
  position: relative;
  padding: 5.5rem 2rem 4rem;
  background: #FFFFFF;
  overflow: hidden;
}

.faq-intro-card {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.faq-intro-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 800;
  color: #0B1329;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.faq-intro-desc {
  font-size: 1.12rem;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

.faq-intro-action {
  margin-top: 0.75rem;
}

.faq-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.25rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #070D18;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 242, 157, 0.5);
}

/* --------------------------------------------------------------------------
   3. FAQ GROUP SECTIONS (CHARGING & APP + FRANCHISE)
   -------------------------------------------------------------------------- */
.faq-group-section {
  position: relative;
  padding: 5.5rem 2rem 6.5rem;
  overflow: hidden;
}

.faq-group-section.theme-light {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6FAF8 100%);
}

.faq-group-section.theme-dark {
  background: #070D18;
}

.faq-group-header {
  margin-bottom: 3.5rem;
}

.faq-group-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  background: rgba(5, 150, 105, 0.1);
  border: 1px solid rgba(5, 150, 105, 0.25);
  color: #059669;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

.faq-group-pill.dark-pill {
  background: rgba(0, 242, 157, 0.1);
  border-color: rgba(0, 242, 157, 0.25);
  color: #00F29D;
}

.faq-group-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: #0B1329;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem;
  line-height: 1.25;
}

.faq-group-title.dark-title {
  color: #FFFFFF;
}

.faq-group-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #475569;
  max-width: 680px;
  margin: 0;
}

.faq-group-desc.dark-desc {
  color: #CBD5E1;
}

/* Accordion Stack */
.faq-accordion-stack {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.faq-item-block {
  position: relative;
  background: #FFFFFF;
  border-radius: 20px;
  border: 1px solid rgba(5, 150, 105, 0.16);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item-block:hover {
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 15px 40px -10px rgba(5, 150, 105, 0.12);
}

.faq-item-block.active {
  border-color: #059669;
  box-shadow: 0 15px 40px -10px rgba(5, 150, 105, 0.16);
}

/* Dark Theme Item Block */
.faq-item-block.dark-block {
  background: rgba(13, 22, 40, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 242, 157, 0.18);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.faq-item-block.dark-block:hover {
  border-color: rgba(0, 242, 157, 0.45);
  box-shadow: 0 15px 40px -10px rgba(0, 242, 157, 0.18);
}

.faq-item-block.dark-block.active {
  border-color: rgba(0, 242, 157, 0.55);
  box-shadow: 0 20px 50px -10px rgba(0, 242, 157, 0.22);
}

/* Trigger Button */
.faq-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.65rem 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #0B1329;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  transition: all 0.25s ease;
}

.faq-trigger-btn.dark-trigger {
  color: #FFFFFF;
}

.faq-item-block:hover .faq-trigger-btn {
  color: #059669;
}

.faq-item-block.dark-block:hover .faq-trigger-btn.dark-trigger {
  color: #00F29D;
}

.faq-trigger-number {
  font-size: 1.1rem;
  font-weight: 800;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-item-block.dark-block .faq-trigger-number {
  color: #00F29D;
  background: rgba(0, 242, 157, 0.12);
  border: 1px solid rgba(0, 242, 157, 0.25);
}

.faq-trigger-text {
  flex-grow: 1;
}

.faq-chevron-icon {
  color: #059669;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.faq-item-block.dark-block .faq-chevron-icon {
  color: #00F29D;
}

.faq-item-block.active .faq-chevron-icon {
  transform: rotate(180deg);
}

/* Content Panel */
.faq-content-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 2rem 0 5.25rem;
}

.faq-item-block.active .faq-content-panel {
  padding: 0 2rem 1.75rem 5.25rem;
}

.faq-content-panel p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: #475569;
  margin: 0;
}

.faq-item-block.dark-block .faq-content-panel p {
  color: #CBD5E1;
}

.faq-inline-link {
  color: #059669;
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.faq-inline-link:hover {
  color: #0284C7;
}

.faq-inline-link.neon-link {
  color: #00F29D;
}

.faq-inline-link.neon-link:hover {
  color: #00D2FF;
}

/* Bullet list in answers */
.faq-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.faq-bullet-list li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #475569;
}

.faq-bullet-list li::before {
  content: '⚡';
  position: absolute;
  left: 0;
  font-size: 0.75rem;
  top: 0.2rem;
}

/* Franchise Footer CTA Link */
.faq-group-footer-cta {
  margin-top: 3.5rem;
}

.btn-franchise-more {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.25rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #070D18;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-franchise-more:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 242, 157, 0.5);
  color: #070D18;
}

/* --------------------------------------------------------------------------
   5. STILL HAVE QUESTIONS? SECTION
   -------------------------------------------------------------------------- */
.faq-still-questions-section {
  position: relative;
  padding: 6rem 2rem 7rem;
  background: #FFFFFF;
  overflow: hidden;
}

.still-questions-card {
  position: relative;
  background: #F8FAF9;
  border-radius: 32px;
  padding: 4rem 3rem;
  border: 1px solid rgba(5, 150, 105, 0.16);
  box-shadow: 0 25px 60px -15px rgba(5, 150, 105, 0.12);
  text-align: center;
}

.still-questions-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 720px;
  margin: 0 auto;
}

.still-questions-title {
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 3.8vw, 3rem);
  font-weight: 800;
  color: #0B1329;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.still-questions-desc {
  font-size: 1.15rem;
  color: #475569;
  margin: 0;
}

.still-contact-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  margin: 1.5rem 0 0.5rem;
}

.still-channel-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(5, 150, 105, 0.15);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
}

.still-channel-item:hover {
  transform: translateY(-4px);
  border-color: #059669;
  box-shadow: 0 15px 35px rgba(5, 150, 105, 0.15);
}

.channel-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.still-channel-item:hover .channel-icon-box {
  transform: scale(1.08);
  background: var(--accent-gradient);
  color: #070D18;
}

.channel-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.channel-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
}

.channel-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0B1329;
  word-break: break-all;
}

.channel-val small {
  font-size: 0.8rem;
  font-weight: 600;
  color: #059669;
}

.still-action-row {
  margin-top: 1rem;
}

.still-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.5rem;
  border-radius: 9999px;
  background: var(--accent-gradient);
  color: #070D18;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 242, 157, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.still-contact-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(0, 242, 157, 0.5);
  color: #070D18;
}

/* --------------------------------------------------------------------------
   FAQ RESPONSIVE
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .faq-intro-section,
  .faq-group-section,
  .faq-still-questions-section {
    padding: 4.5rem 1.25rem;
  }

  .faq-trigger-btn {
    padding: 1.25rem 1.25rem;
    gap: 0.85rem;
    font-size: 1.02rem;
  }

  .faq-trigger-number {
    width: 34px;
    height: 34px;
    font-size: 0.95rem;
  }

  .faq-content-panel {
    padding: 0 1.25rem 0 1.25rem;
  }

  .faq-item-block.active .faq-content-panel {
    padding: 0 1.25rem 1.5rem 1.25rem;
  }

  .still-contact-channels {
    grid-template-columns: 1fr;
  }

  .still-questions-card {
    padding: 2.75rem 1.5rem;
  }
}