/* ==========================================================================
ITCSS ARCHITECTURE - Professional CSS Organization
Respecting CSS Cascade & Specificity Order
==========================================================================

1. SETTINGS: Variables and configuration
2. TOOLS: Mixins and functions (reference only)
3. GENERIC: Reset and normalization
4. ELEMENTS: Base HTML element styling
5. OBJECTS: Layout and structural patterns
6. COMPONENTS: UI components and modules
7. UTILITIES: Helper and utility classes
8. ANIMATIONS: All keyframes grouped together
9. RESPONSIVE: Media queries consolidated at end

========================================================================== */

/* ==========================================================================
1. SETTINGS: Variables and Configuration (:root)
========================================================================== */
:root {
  /* Typography */
  --font-title: 'League Spartan', sans-serif;
  --font-body: 'Karla', sans-serif;
  
  /* Primary Color Palette */
  --primary-blue: #173F5F;
  --accent-blue: #065F8A;
  --light-blue: #84CBF1;
  --very-light-blue: #E0F7FF;
  --deep-navy: #173F5F;
  --white: #ffffff;
  
  /* Secondary Colors */
  --muted-teal: #009AC9;
  
  /* Neon Colors */
  --neon-green: #0FFF50;
  --neon-blue: #00F3FF;
  
  /* Glass & Special Effects */
  --cyber-mint: #4BF0B6;
  --cyber-teal: rgba(38, 166, 154, 1);
  
  /* Modern Color Set */
  --color-deep-ocean: #023047;
  --color-lagoon: #219EBC;
  --color-lime: #4BF0B6;
  --yellow-gold: #FFDF00;
  
  /* Spacing Scale */
  --space-md: 1rem;
  
  /* Transitions */
  --transition-normal: 0.3s ease;
}

/* ==========================================================================
2. TOOLS: Mixins, Functions, and Utilities (Reference)
========================================================================== */
/* Note: CSS preprocessor mixins not applicable in plain CSS.
Using CSS variables as the modern approach for reusable values. */

/* ==========================================================================
3. GENERIC: Reset and Normalization
========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  width: 100%;
}


/* Touch optimization */
/* Remove default touch delay (300ms) */
html {
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; /* Remove gray flash */
}

body {
  font-family: var(--font-body), sans-serif;
  color: var(--deep-navy);
  background-color: var(--very-light-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  padding-bottom: 0;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
4. ELEMENTS: Base HTML Element Styling
========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title), sans-serif;
  line-height: 1.3;
  font-weight: 800;
  text-transform: uppercase;
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: all var(--transition-normal);
}


a:hover {
  color: var(--accent-blue);
  text-decoration: none;
}

/* ==========================================================================
5. OBJECTS: Layout and Structural Patterns
========================================================================== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.sticky-cta {
  z-index: 1050;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0.5rem;
}

.faq-accordion {
  max-width: 800px;
}

.logos-marquee {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.logos-content {
  display: flex;
  gap: 3rem;
  padding: 0;
  width: max-content;
  animation: scroll-logos 40s linear infinite;
}

.logo-item {
  display: inline-block;
  flex-shrink: 0;
  height: 77px;
  margin: 0 15px;
  transition: opacity 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}

.logo-item:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.marquee-section {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.marquee-content {
  display: flex;
  gap: 3rem;
  animation: scroll-left 40s linear infinite;
}

.marquee-item {
  display: inline-block;
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* ==========================================================================
6. COMPONENTS: UI Components and Modules
========================================================================== */

/* ======== HEADER / NAVBAR ======== */
.header {
  padding: 0.4rem 0;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

.header .navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.navbar-brand {
  transition: transform 0.5s ease;
}

.navbar-brand:hover {
  transform: rotate(360deg);
}

.navbar-toggler {
  transition: box-shadow 0.3s ease;
}

.navbar-toggler:focus {
  box-shadow: 0 0 10px rgba(75, 240, 182, 0.5);
  outline: none;
}

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

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

.header__logo {
  color: var(--yellow-gold);
  font-weight: 700;
  transition: all 0.3s ease;
}

.header__logo:hover {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(15, 255, 80, 0.7);
  transform: scale(1.05);
}

.header__menu .nav-link {
  color: var(--white);
  transition: all 0.3s ease;
}

.header__menu .nav-link:hover {
  color: var(--yellow-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.header__menu .btn {
  font-weight: 700;
}

/* ======== BUTTONS ======== */

/* conformity conventions */ 
/* Ensure minimum tap target */
button, a.cta, input[type="submit"] {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 16px; /* Internal padding */
}
/* Better hover/focus states */
button {
  -webkit-appearance: none; /* Reset iOS default styling */
  outline: 2px solid transparent;
}

button:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Add touch-friendly spacing around interactive elements */
button + button {
  margin-left: 8px; /* Min gap between buttons */
}
/* ./ conformity conventions */ 




.btn-lime {
  color: var(--color-deep-ocean);
  background-color: #4BF0B6;
  border: none;
  border-radius: 50px;
  padding: 1.2rem 3rem;
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: 0 10px 20px rgba(75, 240, 182, 0.3);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-lime:hover {
  transform: scale(1.05) translateY(-5px);
  box-shadow: 0 15px 30px rgba(75, 240, 182, 0.5), 0 0 20px rgba(75, 240, 182, 0.3);
}

.btn-electric-amber {
  font-family: var(--font-title);
  position: relative;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.1rem;
  color: #0F172A;
  font-weight: 700;
  border: none;
  display: block;
  overflow: hidden;
  z-index: 1;
  border-radius: 50px;
}

.btn-electric-amber {
  background: linear-gradient(180deg, #FFDF00 0%, #FF8C00 100%);
  box-shadow: 0 0 35px rgba(255, 140, 0, 0.8);
}

.btn-electric::after,
.btn-electric-lime::after,
.btn-electric-amber::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
  transparent,
  rgba(255, 255, 255, 0.4),
  transparent);
  transform: skewX(-20deg);
  animation: hypnotic-sweep 3s infinite linear;
}

.btn-electric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0.3;
  filter: blur(12px);
  animation: pulse-slow 3s infinite ease-in-out;
}

.btn-electric-lime:hover,
.btn-electric:hover {
  transform: scale(1.03);
  background: linear-gradient(180deg, #FFDF00 0%, #FF8C00 100%);
  box-shadow: 0 0 35px rgba(255, 140, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-electric-amber:hover {
  transform: scale(1.03);
  background: linear-gradient(135deg, #FF007A 0%, #A000FF 100%);
  box-shadow: 0 0 35px rgba(144, 0, 255, 0.8);
  color: #fff200;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-accent-gold:hover {
  background-color: #e6b800;
  color: var(--deep-navy);
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
}

.btn-light-blue:hover {
  background: linear-gradient(180deg, #FFDF00 0%, #FF8C00 100%);
  color: #173F5F;
  box-shadow: 0 12px 25px rgba(255, 140, 0, 0.35), 0 0 20px rgba(255, 191, 0, 0.6);
  transform: translateY(-2px) scale(1.02);
}

.btn-light-blue:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 6px 15px rgba(255, 140, 0, 0.25);
}

.btn-sunset:hover,
.btn-sunset:focus {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(6, 95, 138, 0.22), inset 0 -2px 6px rgba(0, 0, 0, 0.06);
  filter: saturate(1.03) brightness(1.02);
  outline: none;
}

.btn-sunset:active {
  transform: translateY(-1px) scale(0.995);
}

.btn-cta-new:hover {
  background: linear-gradient(180deg, #FFDF00 0%, #FF8C00 100%);
  color: #173F5F;
  box-shadow: 0 12px 25px rgba(255, 140, 0, 0.35), 0 0 20px rgba(255, 191, 0, 0.6);
  transform: translateY(-2px) scale(1.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-cta:hover,
.btn-hero-cta-alt:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 15px 30px rgba(255, 0, 122, 0.5);
}

.btn-hero-cta::after,
.btn-hero-cta-alt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-100%);
  animation: electric-slide 3s infinite;
}

/* ======== BADGES ======== */
.badge-before {
  background: #6c757d;
  color: white;
}

.badge-after {
  background: #00F3FF;
  color: #01080b;
  font-weight: 800;
}

/* ======== CARDS & GLASS EFFECTS ======== */
.card-glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-8px);
  border-color: rgba(0, 243, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.card-glass-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 15px 35px rgba(2, 48, 71, 0.05);
  transition: all 0.4s ease;
}

.card-glass-light:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(2, 48, 71, 0.1);
}

.card-featured-dark {
  background: linear-gradient(135deg, #023047 0%, #1a535c 100%);
  border: 1px solid rgba(0, 243, 255, 0.2);
  box-shadow: 0 25px 50px rgba(2, 48, 71, 0.3);
  z-index: 2;
}

.card-about-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-about-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-8px);
  border-color: rgba(0, 243, 255, 0.4);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.card-business-light {
  background: rgba(0, 255, 128, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ======== TRAVEL CARDS ======== */
.card.travel-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(0, 255, 200, 0.25), transparent 65%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}


/* ======== BUSINESS SECTION BACKGROUND ======== */
#business .section__title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

#business p {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.card-business-light:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(2, 48, 71, 0.1) !important;
}

.card-fast-start {
  background: linear-gradient(145deg, #023047 0%, #001d2d 100%);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
}

.card-before {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}

.card-after {
  background: rgba(0, 243, 255, 0.05);
  border: 1px solid rgba(0, 243, 255, 0.4);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.15);
  transition: all 0.3s ease;
}

.card-after:hover {
  box-shadow: 0 0 45px rgba(0, 243, 255, 0.3);
  transform: translateY(-5px);
}

.about .card {
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(23, 63, 95, 0.1);
}

.about .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(23, 63, 95, 0.15);
}

.about .bg-yellow-gold {
  background-color: #FFDF00;
  color: #173F5F;
}

.about .card-title {
  font-size: 1.2rem;
}

.about .card-text {
  font-size: 0.95rem;
  line-height: 1.6;
}


.prestations .card {
  height: auto;
  min-height: 140px;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
}

.prestations .card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.prestations .card .fs-3 {
  font-size: 1.25rem !important;
  margin-bottom: 0.5rem !important;
}

.prestations .card .card-title {
  font-size: 0.9rem !important;
  margin-bottom: 0.4rem !important;
}

.prestations .card .card-text {
  font-size: 0.75rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3;
  flex: 1;
}

.prestations .card .badge {
  font-size: 0.65rem !important;
  padding: 0.25rem 0.4rem !important;
  align-self: center;
  margin-top: auto;
}

.offers__card:nth-child(1) {
  animation-delay: 0.2s;
}

.offers__card:nth-child(2) {
  animation-delay: 0.4s;
}

.offers__card:nth-child(3) {
  animation-delay: 0.6s;
}

form.card {
  border-radius: 10px;
}

.card-glass-dark-pro {
  background: rgba(1, 15, 20, 0.85);
  border: 1px solid rgba(0, 243, 255, 0.2);
  box-shadow: 0 0 40px rgba(0, 243, 255, 0.1);
}

/* ======== HERO SECTION ======== */
#hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(1, 8, 11, 0.85) 0%, rgba(2, 48, 71, 0.75) 50%, rgba(1, 8, 11, 0.9) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 15s ease infinite;
  min-height: 80vh;
}

/* Cinematic vignette effect */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(1, 8, 11, 0.7) 85%, rgba(0, 0, 0, 0.95) 100%);
  pointer-events: none;
}

/* Earth visual with slow zoom effect */
.earth-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/img/earth_with_glow.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  z-index: 1;
  animation: earth-zoom 10s ease-in-out infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes earth-zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

#hero-content {
  position: relative;
  z-index: 10 !important;
  animation: fadeInUp 0.8s ease-out;
}

.hero-subtitle-premium {
  /* display: inline-block; */
  color: #00F3FF;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 7px;
  text-shadow: 0 2px 10px rgba(0, 243, 255, 0.5);
}

.hero-benefit-item strong {
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.hero-benefit-item span {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.display-huge,
h1.display-huge {
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.1;  letter-spacing: -2px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 243, 255, 0.2);
  display: inline-block;
  animation: text-shine 4s infinite alternate ease-in-out;
}

.hero-glow-text {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 243, 255, 0.2);
  animation: text-shine 4s infinite alternate ease-in-out;
}

#hero .text-lime,
.text-lime {
  color: #4BF0B6;
  display: inline-block;
  text-shadow: 0 2px 15px rgba(75, 240, 182, 0.5), 0 0 30px rgba(75, 240, 182, 0.3);
  animation: text-shine 4s infinite alternate ease-in-out;
}

.hero-lead-text,
p.hero-lead-text {
  color: #FFFFFF;
  opacity: 1;
  font-weight: 400;
  line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 4px;
}

/* ======== FORMS ======== */
.form__container {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#qualifyFormFinal {
  max-width: 430px;
  border: 1px solid rgba(0, 243, 255, 0.6) !important;
  box-shadow:
  0 0 10px rgba(0, 243, 255, 0.4),
  0 0 40px rgba(0, 243, 255, 0.45),
  inset 0 0 15px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: aura-breathing 3s infinite alternate ease-in-out;
}

#qualifyFormFinal .form-control,
#qualifyFormFinal .form-select {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  height: 44px;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(0, 243, 255, 0.4);
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

#qualifyFormFinal .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#qualifyFormFinal .form-control:focus,
#qualifyFormFinal .form-select:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--neon-blue);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.25), inset 0 0 10px rgba(0, 243, 255, 0.05);
  outline: none;
}

#qualifyFormFinal .form-select option {
  background-color: #01080b;
  color: #ffffff;
  font-size: 0.9rem;
}

#qualifyFormFinal .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
}

#qualifyFormHero {
  max-width: 430px;
  border: 1px solid rgba(0, 243, 255, 0.6);
  box-shadow:
  0 0 10px rgba(0, 243, 255, 0.4),
  0 0 40px rgba(0, 243, 255, 0.45),
  inset 0 0 15px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: aura-breathing 3s infinite alternate ease-in-out;
}

#qualifyFormHero .form-control,
#qualifyFormHero .form-select {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

#qualifyFormHero .form-control::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

#qualifyFormHero .form-control:focus,
#qualifyFormHero .form-select:focus {
  border-color: var(--color-lime);
  box-shadow: 0 0 0 0.25rem rgba(0, 255, 140, 0.237);
  outline: none;
}

/* Hero form submit button glow effect */
#qualifyFormHero button[type="submit"],
.hero-form-glass button[type="submit"] {
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(75, 240, 182, 0.3);
}

#qualifyFormHero button[type="submit"]:hover,
.hero-form-glass button[type="submit"]:hover {
  box-shadow: 0 6px 25px rgba(75, 240, 182, 0.5), 0 0 20px rgba(75, 240, 182, 0.3);
  transform: translateY(-2px);
}

#qualifyFormHero .form-select option {
  background-color: #ffffff;
  color: #333;
  font-size: 0.9rem;
}

.input-hero-dark {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

.input-hero-dark::placeholder {
  color: rgba(255, 255, 255, 0.9);
}

.input-hero-dark:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--neon-blue);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
  outline: none;
}

select.input-hero-dark {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.form-select-night {
  color: rgba(255, 255, 255, 0.5);
}

.form-select-night.form-select-night:focus,
.form-select-night:not([value=""]):valid {
  color: #ffffff;
}

.form-select-night option {
  background-color: #01080b;
  color: #ffffff;
  padding: 10px;
}

.form-select-night:focus {
  background-color: #01080b;
  border-color: var(--neon-blue);
  box-shadow: 0 0 0 0.25rem rgba(204, 255, 0, 0.25);
}

form .fa-solid,
form .fa-brands {
  font-size: 1rem;
  vertical-align: middle;
}

/* ======== FORM VALIDATION FEEDBACK ======== */
.form-control.is-valid,
.form-select.is-valid {
  border-color: #4BF0B6 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234BF0B6' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: #4BF0B6 !important;
  box-shadow: 0 0 0 0.25rem rgba(75, 240, 182, 0.25) !important;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #ff4d4d !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='%23ff4d4d'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L7 6.293l1.646-1.647a.5.5 0 0 1 .708.708L7.707 7l1.647 1.646a.5.5 0 0 1-.708.708L7 7.707l-1.646 1.647a.5.5 0 0 1-.708-.708L6.293 7 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 16px 12px !important;
  padding-right: 2.5rem !important;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 0.25rem rgba(255, 77, 77, 0.25) !important;
}

/* Validation message animation */
.invalid-feedback {
  animation: slideInUp 0.3s ease-out;
  font-size: 0.8rem;
}

.valid-feedback {
  color: #4BF0B6;
  font-size: 0.8rem;
  display: none;
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback {
  display: block;
}

/* Input group with validation icon */
.input-group-validate {
  position: relative;
}

.input-group-validate .form-control {
  padding-right: 2.5rem;
}

.input-valid-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #4BF0B6;
  font-size: 0.9rem;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.input-valid-icon.show {
  opacity: 1;
}

/* ======== FINAL CTA SECTION ======== */
#cta-final {
  /* background-color: #01080b; */
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-bottom: 0;
}

#cta-final::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#cta-final::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(75, 240, 182, 0.15) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

.benefit-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.5rem;
  border-radius: 1.2rem;
  transition: all 0.3s ease;
  height: 100%;
  filter: drop-shadow(0 0 8px rgba(75, 240, 182, 0.4));
}

.benefit-card:hover {
  background: rgba(0, 243, 255, 0.05);
  border-color: rgba(0, 243, 255, 0.3);
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 0 15px rgba(75, 240, 182, 0.8));
}

.urgent-glass-box {
  background: rgba(204, 255, 0, 0.05);
  border: 1px solid rgba(204, 255, 0, 0.2);
  border-left: 4px solid var(--color-lime);
  backdrop-filter: blur(15px);
}

.benefits-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefit-row {
  display: flex;
  align-items: center;
  padding: 8px;
  width: 100%;
}

.benefit-icon-box {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.benefit-text {
  margin-left: 16px;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.special-turbo {
  margin-top: 5px;
}

.pulse-glow {
  box-shadow: 0 0 0 0 rgba(75, 240, 182, 0.7);
  animation: icon-pulse 2s infinite;
}

/* ======== FOOTER ======== */
.footer {
  background: #01080b;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 0;
  margin-bottom: 0;
}

.hover-lime {
  transition: all 0.3s ease;
}

.hover-lime:hover {
  color: #4BF0B6;
  text-shadow: 0 0 10px rgba(75, 240, 182, 0.4);
}

.tracking-wider {
  letter-spacing: 4px;
  text-transform: uppercase;
}

.footer-brand {
  font-family: var(--font-title);
  letter-spacing: 1px;
}

.footer-distributor-logo {
  height: 70px;
  width: auto;
}

/* ======== STATS CARDS ======== */
.stat-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(75, 240, 182, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 30px rgba(75, 240, 182, 0.2);
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(75, 240, 182, 0.15);
  border-color: rgba(75, 240, 182, 0.7);
  box-shadow: 0 15px 40px rgba(75, 240, 182, 0.4);
}

.stat-icon i {
  color: #4BF0B6;
  filter: drop-shadow(0 0 10px rgba(75, 240, 182, 0.6));
}

.stat-number {
  font-family: var(--font-title);
  background: linear-gradient(135deg, #4BF0B6 0%, #00F3FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px rgba(75, 240, 182, 0.5);
}

.stat-label {
  font-weight: 700;
  letter-spacing: 2px;
}

/* Dark stat cards for company-stats section */
.stat-card-dark {
  background: rgba(1, 15, 20, 0.7) !important;
  border: 1px solid rgba(0, 243, 255, 0.3) !important;
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.15);
}

.stat-card-dark .stat-number {
  font-size: 3.5rem !important;
}

/* Ensure neon-blue works on stat numbers */
.stat-card-dark .stat-number.text-neon-blue {
  color: var(--neon-blue) !important;
  text-shadow: 0 0 20px rgba(0, 243, 255, 0.6), 0 0 40px rgba(0, 243, 255, 0.3);
}

/* Larger icons for dark stat cards */
.stat-card-dark .stat-icon i {
  font-size: 3rem !important;
}

/* Better readability for labels on dark cards */
.stat-card-dark .stat-label {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ======== BELOMONDO CENTER LOGO ======== */
.belomondo-center-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.belomondo-center-logo img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.belomondo-center-logo img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 30px rgba(75, 240, 182, 0.8)) !important;
}

@keyframes glow-pulse {
  0% { filter: drop-shadow(0 0 15px rgba(75, 240, 182, 0.4)); }
  100% { filter: drop-shadow(0 0 30px rgba(75, 240, 182, 0.7)); }
}


/* ======== WHATSAPP FLOAT ======== */
.whatsapp-float {
  position: fixed !important;
  bottom: 88px;
  right: 24px;
  left: auto;
  top: auto;
  width: 56px;
  height: 56px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 9999;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}

.whatsapp-icon {
  width: 55%;
  height: 55%;
  display: block;
  flex-shrink: 0;
}

/* ======== REVEAL CARDS ======== */
.reveal-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ======== SECTION - IMAGINE ======== */
.icon-circle {
  width: 77px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

#imagine .icon-circle i {
  font-size: 2.2rem;
  display: block;
  line-height: 1;
}

.title-underline {
  width: 80px;
  height: 4px;
  background: #00F3FF;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.8);
}

.title-underline_dark {
  width: 80px;
  height: 4px;
  background: var(--color-deep-ocean);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(15, 23, 42, 0.8);
}

.title-underline_lime {
  width: 80px;
  height: 4px;
  background: var(--color-lime);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(15, 42, 41, 0.8);
}

.transform-scale {
  border: 2px solid var(--deep-navy);
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.transform-scale:hover {
  transform: scale(1.05);
  box-shadow: 0 1rem 3rem rgba(6, 95, 138, 0.2);
}

/* ======== SUBSCRIPTION SECTION ======== */
.section-subscription__title {
  font-family: var(--font-title);
}

.section-subscription__text {
  font-family: var(--font-body);
}

.step {
  display: flex;
  align-items: center;
}

.step__icon-wrapper {
  width: 65px;
  height: 65px;
  background: rgba(0, 243, 255, 0.05);
  border: 1px solid rgba(0, 243, 255, 0.3);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.step:hover .step__icon-wrapper {
  background: rgba(0, 243, 255, 0.15);
  border-color: #00F3FF;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.2);
}

.step__icon {
  font-size: 1.6rem;
  color: #00F3FF;
}

.step__number {
  font-family: var(--font-title);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.75rem;
}

.step__title {
  font-family: var(--font-body);
  color: #ffffff;
  margin: 5px 0 0 0;
}

.simulator {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
  
}



.simulator__title {
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
}

.simulator__result-box {
  background: rgba(75, 240, 182, 0.05);
  border: 1px solid rgba(75, 240, 182, 0.2);
}

.custom-range::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.1);
  height: 6px;
  border-radius: 3px;
}

.custom-range::-webkit-slider-thumb {
  background: #00F3FF;
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.8);
  margin-top: -6px;
}

/* ======== FAQ ACCORDION ======== */
.faq-accordion .accordion-item {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.faq-accordion .accordion-item:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(5px);
}

.faq-accordion .accordion-button {
  background: transparent;
  color: #023047;
  padding: 1.5rem;
  box-shadow: none;
  border-radius: 1rem;
}

.faq-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23219ebc'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-size: 1.5rem;
  transition: transform 0.3s ease;
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: #219ebc;
}

.faq-accordion .accordion-body {
  padding: 1.5rem;
  padding-top: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

/* ======== MOCK UI ELEMENTS ======== */
.font-karla {
  font-family: var(--font-body);
}

.ui-barre.lime {
  background: #4BF0B6;
  width: 40%;
}

.pill-benefit {
  background: rgba(75, 240, 182, 0.1);
  border: 1px solid rgba(75, 240, 182, 0.2);
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.pill-benefit:hover {
  border-color: #4BF0B6;
  transform: translateY(-2px);
}

.card-title-white {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.card-text-soft {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ======== FORM MESSAGES ======== */
#heroFormMessage,
#finalFormMessage {
  font-size: 0.95rem;
  font-weight: 500;
  animation: slideInUp 0.3s ease-out;
}

#heroFormMessage.alert-success,
#finalFormMessage.alert-success {
  background-color: rgba(75, 240, 182, 0.15);
  border: 1px solid rgba(75, 240, 182, 0.3);
  color: #4BF0B6;
}

#heroFormMessage.alert-danger,
#finalFormMessage.alert-danger {
  background-color: rgba(255, 77, 77, 0.15);
  border: 1px solid rgba(255, 77, 77, 0.3);
  color: #ff4d4d;
}

.icon-wrap i {
  font-size: 2.5rem;
  color: #00F3FF;
  filter: drop-shadow(0 0 12px rgba(0, 243, 255, 0.5));
  margin-bottom: 10px;
}

.list-icon-box {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ======== PAS FORMAT STYLES ======== */
.pas-benefits {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pas-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
}

.pas-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex-shrink: 0;
}

.pas-icon i {
  font-size: 1.2rem;
}

.divider-bridge {
  border-top: 1px solid rgba(0, 243, 255, 0.2);
  width: 100px;
  margin: 3rem auto 2rem;
}

/* ======== MISCELLANEOUS ======== */
.score-display {
  line-height: 1;
}

.logo-img {
  height: 60px;
  width: auto;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.logo-img:hover {
  transform: rotate(360deg);
  filter: hue-rotate(-20deg) saturate(1.5) brightness(0.9);
}

.header__logo h4 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

.text-neon-blue {
  font-size: inherit;
}

.section__title {
  font-weight: 800;
  margin-bottom: 1.5rem;
}

.fw-1000 {
  font-weight: 1000;
}

.about .card {
  animation: fadeInUp 0.8s ease-out;
}

.about .card:nth-child(1) {
  animation-delay: 0.2s;
}

.about .card:nth-child(2) {
  animation-delay: 0.4s;
}

.about .card:nth-child(3) {
  animation-delay: 0.6s;
}

.about .card:nth-child(4) {
  animation-delay: 0.8s;
}

.trust-widget:hover {
  transform: translateY(-5px);
  box-shadow: 0 1rem 3rem rgba(6, 95, 138, 0.35);
}

/* ==========================================================================
7. UTILITIES: Helper and Utility Classes
========================================================================== */

.text-lagoon { color: var(--color-lagoon); }
.text-deep-ocean { color: #001a26; }
.text-muted-teal { color: var(--muted-teal); }
.text-deep-navy { color: var(--deep-navy); }
.text-yellow-gold { color: var(--yellow-gold); }
.text-neon { color: var(--neon-green); }
.text-neon-blue { color: var(--neon-blue); }
.text-amber { color: #FF8C00; }
.text-lime { color: #4BF0B6; }
.text-spacing { letter-spacing: 0.5px; }
.tracking-wider { letter-spacing: 0.05em; }
.x-small { font-size: 0.75rem; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; }
.navy-outline { -webkit-text-stroke: 0.4px var(--color-neon-blue); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); }

.bg-gradient-light-blue { background: linear-gradient(135deg, #84CBF1, #B7E0F7, #E0F7FF); }
.bg-very-light-blue { background-color: var(--very-light-blue);}
.bg-soft-lagoon { background: rgba(33, 158, 188, 0.1); color: #219ebc; }
.bg-soft-lime { background: rgba(204, 255, 0, 0.1); color:var(--color-lime); }
.bg-gradient-lagoon { background: radial-gradient(circle at 80% 20%, rgba(38, 166, 154, 0.2), transparent 50%), linear-gradient(90deg, rgba(2, 48, 71, 0.95) 0%, rgba(38, 166, 154, 0.7) 100%); backdrop-filter: blur(10px); }
.bg-glass { background: rgba(255, 255, 255, 0.217); backdrop-filter: blur(30px); border: 1px solid rgba(255, 255, 255, 0.5); border-style: groove; }

/* Hero Form Glass - Style solution premium */
.hero-form-glass {
    background: rgba(10, 30, 40, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(75, 240, 182, 0.3);
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.hero-form-glass:hover {
    border-color: rgba(75, 240, 182, 0.5);
    box-shadow: 0 0 30px rgba(75, 240, 182, 0.2);
}

.hero-form-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-lime), transparent);
    opacity: 0.8;
}

.hero-form-glass::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(75, 240, 182, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.hero-form-glass .form-control,
.hero-form-glass .form-select {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(75, 240, 182, 0.2);
    color: #fff !important;
}

.hero-form-glass .form-control:focus,
.hero-form-glass .form-select:focus {
    border-color: var(--color-lime);
    box-shadow: 0 0 15px rgba(75, 240, 182, 0.3);
}

/* Hero Benefits List */
.hero-benefits-list {
    margin-top: 0.5rem;
}

.hero-benefits-list .text-white-50 {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.hero-benefit-item {
    transition: transform 0.3s ease;
}

.hero-benefit-item:hover {
    transform: translateX(8px);
}

.hero-benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(75, 240, 182, 0.15);
    border-radius: 50%;
    border: 1px solid rgba(75, 240, 182, 0.3);
    box-shadow: 0 0 15px rgba(75, 240, 182, 0.2);
}

/* Hero Content Column - Full height on mobile */
@media (max-width: 767.98px) {
    .hero-content-col {
        min-height: 100vh;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    
    /* Augmenter la taille du H1 sur mobile pour remplir l'espace */
    .hero-content-col .display-huge {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
        line-height: 1.1 !important;
    }
}
.bg-gradient-lime { background: linear-gradient(135deg, var(--color-lime) 0%, #2EC4B6 100%); }
.bg-deep-ocean { background-color: var(--color-deep-ocean); }
.bg-lime { background-color: var(--color-lime); }
.bg-amber { background: linear-gradient(180deg, #FFDF00 0%, #FF8C00 100%); }
.bg-white-5 { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); }
.light-glass { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); }
.bg-neon-blue { background-color: var(--neon-blue); }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(23, 63, 95, .075); }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(23, 63, 95, .175); }
.shadow-lagoon { box-shadow: 0 15px 35px rgba(2, 43, 58, 0.4); }
.shadow-lime-glow { box-shadow: 0 0 15px rgba(204, 255, 0, 0.3); }
.white-glow { text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
.blue-glow { text-shadow: 0 0 10px rgba(0, 69, 106, 0.7); }
.blue-neon-glow { text-shadow: 0 0 10px rgba(0, 243, 255, 0.7); }
.neon-glow { text-shadow: 0 0 10px rgba(15, 255, 80, 0.7); }
.lime-glow { text-shadow: 0 0 10px rgba(15, 255, 199, 0.7); }
.box-white-glow { box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }
.box-lime-glow { box-shadow: 0 0 10px rgba(15, 255, 199, 0.7); }

.bg-icon-watermark { position: absolute; top: -10px; right: -10px; font-size: 8rem; opacity: 0.07; transform: rotate(15deg); pointer-events: none; }

.border-accent-blue { border-color: var(--accent-blue); }
.border-deep-ocean { border-color: var(--color-deep-ocean); }
.border-lime { border-color: var(--color-lime); }
.border-white-10 { border-color: rgba(255, 255, 255, 0.1); }

.transition-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.transition-hover:hover { transform: translateY(-5px); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .1); }
.z-index-2 { z-index: 2; }
.mobile-cta-btn { flex: 1; max-width: 200px; transition: all 180ms ease; }
.star-rating { color: var(--yellow-gold); text-shadow: 0 0 2px var(--deep-navy); }
.pulse-anim { position: relative; z-index: 1; }
.pulse-anim::after { content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; animation: pulse-gold 2s infinite; }

/* ==========================================================================
8. ANIMATIONS: All Keyframes Grouped Together
========================================================================== */

@keyframes hypnotic-sweep {
  0% { left: -150%; }
  80% { left: 150%; }
  100% { left: 150%; }
}

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

@keyframes pulse-hero-urgency {
  0% { box-shadow: 0 0 0 0 rgba(45, 255, 143, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(45, 255, 143, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 255, 143, 0); }
}

@keyframes pulse-gold {
  0% { box-shadow: 0 0 0 0 rgba(53, 255, 53, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(53, 255, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(53, 255, 53, 0); }
}

@keyframes pulse-mag {
  0% { transform: scale(0.95); opacity: 0.7; text-shadow: 0 0 0px rgba(255, 0, 122, 0); }
  50% { transform: scale(1.2); opacity: 1; text-shadow: 0 0 12px rgba(255, 0, 122, 0.8); }
  100% { transform: scale(0.95); opacity: 0.7; text-shadow: 0 0 0px rgba(255, 0, 122, 0); }
}

@keyframes pulse-lime {
  0% { text-shadow: 0 0 10px rgba(204, 255, 0, 0.5); }
  50% { text-shadow: 0 0 25px rgba(204, 255, 0, 0.8), 0 0 40px rgba(204, 255, 0, 0.4); }
  100% { text-shadow: 0 0 10px rgba(204, 255, 0, 0.5); }
}

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

@keyframes text-shine {
  0% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.2), 0 0 20px rgba(0, 243, 255, 0.1); }
  100% { text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(0, 243, 255, 0.4); }
}

@keyframes earth-drift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-15px, -10px); }
}

@keyframes twinkle {
  0% { opacity: 0.4; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.3); box-shadow: 0 0 12px 2px rgba(75, 240, 182, 0.4); }
}

@keyframes move-aurora-final {
  0% { transform: translate(-15%, -15%) rotate(0deg) scale(1); opacity: 0.3; }
  50% { transform: translate(10%, 5%) rotate(8deg) scale(1.3); opacity: 0.7; }
  100% { transform: translate(-10%, 15%) rotate(-5deg) scale(1); opacity: 0.3; }
}

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

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

@keyframes electric-slide {
  0% { transform: translateX(-100%); }
  40% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

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

@keyframes flash-lime {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); color: #ffffff; }
  100% { transform: scale(1); }
}

@keyframes icon-pulse {
  0% { box-shadow: 0 0 0 0 rgba(75, 240, 182, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(75, 240, 182, 0); }
  100% { box-shadow: 0 0 0 0 rgba(75, 240, 182, 0); }
}

@keyframes aura-breathing {
  from {
    box-shadow: 0 0 8px rgba(0, 243, 255, 0.3), 0 0 30px rgba(0, 243, 255, 0.25), inset 0 0 10px rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 243, 255, 0.3) !important;
  }
  to {
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.6), 0 0 60px rgba(0, 243, 255, 0.6), inset 0 0 20px rgba(255, 255, 255, 0.2);
    border-color: rgba(0, 243, 255, 0.8) !important;
  }
}


@keyframes pulse-green-halo {
  0% {
    box-shadow: 0 0 25px rgba(75, 240, 182, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(75, 240, 182, 0.6), 0 0 10px rgba(75, 240, 182, 0.4);
  }
  100% {
    box-shadow: 0 0 25px rgba(75, 240, 182, 0.3);
  }
}

@keyframes pulse-divider {
  from {
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.4);
  }
  to {
    box-shadow: 0 0 25px rgba(0, 243, 255, 1), 0 0 5px rgba(255, 255, 255, 1);
  }
}

@keyframes flicker {
  0%, 100% { opacity: 0.2; }
  20% { opacity: 0.5; }
  22% { opacity: 0.1; }
  25% { opacity: 0.4; }
  30% { opacity: 0.05; }
  35% { opacity: 0.6; }
  40% { opacity: 0.15; }
}


/* ==========================================================================
9. RESPONSIVE: Media Queries Consolidated at End
========================================================================== */

@media (max-width: 576px) {
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .sticky-cta {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom) !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.5rem !important;
    margin: 0 !important;
    z-index: 9999 !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }
  .sticky-cta .d-flex {
    gap: 0 !important;
  }
  .sticky-cta span {
    font-size: 0.7rem !important;
    line-height: 1 !important;
  }
  .sticky-cta .fw-bold {
    font-size: 0.75rem !important;
  }
  .sticky-cta .text-muted-teal {
    font-size: 0.65rem !important;
  }
  .sticky-cta-content {
    min-width: 0;
    flex-grow: 1;
  }
  .sticky-cta-btn {
    flex-shrink: 0 !important;
    min-width: 120px !important;
    width: 42% !important;
    max-width: 42% !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.5rem !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }
  .hero {
    align-items: flex-start !important;
  }
  #heroCarousel {
    max-height: 100vh;
    overflow-y: auto;
    padding-bottom: 1rem;
    /* Fix: CSS containment + aspect ratio */ 
    contain: layout style paint;
    /* aspect-ratio: 16 / 9; */
  }
  .form__container {
    max-height: 100vh;
    /* overflow-y: auto; */
    padding-bottom: 1rem;
  }
  .display-huge,
  h1.display-huge {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  }
  .hero-subtitle-premium {
    font-size: 0.7rem !important;
    margin-bottom: 0.8rem !important;
  }
  .hero-lead-text,
  p.hero-lead-text {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.8rem !important;
  }
  #hero .small {
    font-size: 0.75rem !important;
  }
  #qualifyFormHero .h4 {
    font-size: 1.1rem !important;
  }
  #qualifyFormHero .small {
    font-size: 0.65rem !important;
  }
  #qualifyFormHero .badge {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.6rem !important;
  }
  .carousel-inner .container {
    padding: 1rem 0.5rem !important;
  }
  .logo-img { height: 45px; }
  .header__logo h4 { font-size: 0.95rem; }
  .btn-electric-amber { font-size: 0.85rem; padding: 0.75rem 1.5rem !important; }
  .mobile-cta-btn { flex-grow: 1; max-width: 100%; font-size: 0.75rem; padding: 0.35rem 0.6rem !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  .chart-container { height: 300px; }
  .whatsapp-float { width: 48px; height: 48px; bottom: 77px; right: 16px; z-index: 11;}
  .whatsapp-icon { width: 50%; height: 50%; }
  .phone-frame { display: none; }
  #imagine .section__title { font-size: 1.8rem; }
  #imagine .card { text-align: center; }
  .transform-scale { transform: scale(1) !important; margin: 10px 0; }
  .card-glass-light, .card-featured-dark { padding: 1.5rem !important; }
  .card-featured-dark .display-title.fs-2 { font-size: 1.5rem !important; padding: 0.8rem 1.5rem !important; }
  .icon-circle { margin-left: auto; margin-right: auto; }
  .reveal-card { transition-delay: 0.05s !important; transform: translateY(20px); }
  .step__icon-wrapper { width: 50px; height: 50px; }
  .step__icon { font-size: 1.2rem; }
}

@media (min-width: 768px) {
  .transform-scale { transform: scale(1.08); z-index: 10; }
  .card-glass-light { text-align: left; }
  .phone-frame { display: block; }
  .delay-1 { transition-delay: 0.1s; }
  .delay-2 { transition-delay: 0.2s; }
  .delay-3 { transition-delay: 0.3s; }
  .delay-4 { transition-delay: 0.4s; }
  .delay-5 { transition-delay: 0.5s; }
  .delay-6 { transition-delay: 0.6s; }
  .chart-container { height: 400px; }
}

@media (min-width: 768px) and (max-width: 991px) {
  .reveal-card { transition-delay: 0.05s !important; transform: translateY(20px); }
  .step__icon-wrapper { width: 50px; height: 50px; }
  .step__icon { font-size: 1.2rem; }
}

@media (min-width: 992px) {
  .transform-scale:hover { transform: scale(1.05); box-shadow: 0 1rem 3rem rgba(6, 95, 138, 0.2) !important; }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  .card-glass-light { backdrop-filter: blur(20px); }
}
/* ==========================================================================
COMPONENT: PRICE COMPARISON CARDS (ENHANCED)
========================================================================== */



.comparison-card {
  background: rgba(10, 28, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
}

.comparison-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 98%, rgba(255, 255, 255, 0.1) 98%, rgba(255, 255, 255, 0.1) 100%);
  background-size: 100% 3px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
  animation: flicker 0.15s infinite;
}


.comparison-card:hover {
  transform: translateY(-15px) scale(1.03);
}

.comparison-card .card-img-top {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.85;
  transition: opacity 0.3s ease, filter 0.3s ease;
  filter: saturate(0.9);
}

.comparison-card:hover .card-img-top {
  opacity: 1;
  filter: saturate(1);
}

.comparison-card .card-body {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

.comparison-card .card-title {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.75rem;
}

.comparison-card .card-text {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Halo Effects */
.comparison-card.card-expensive {
  box-shadow: 0 0 25px rgba(120, 130, 140, 0.2);
  border-color: rgba(180, 190, 200, 0.2);
}

.comparison-card.card-expensive:hover {
  box-shadow: 0 0 45px rgba(180, 190, 200, 0.4);
}

.comparison-card.card-expensive .card-title {
  color: rgba(255, 255, 255, 0.6);
}

.comparison-card.card-advantage {
  border-color: rgba(75, 240, 182, 0.3);
  animation: pulse-green-halo 3s infinite ease-in-out;
}

.comparison-card.card-advantage:hover {
  animation-play-state: paused;
  box-shadow: 0 0 50px rgba(75, 240, 182, 0.8), 0 0 20px rgba(75, 240, 182, 0.5);
  border-color: rgba(75, 240, 182, 0.6);
}

.comparison-card.card-advantage .card-title {
  color: var(--color-lime);
  text-shadow: 0 0 12px rgba(75, 240, 182, 0.6);
}

/* Divider */
.comparison-divider {
  width: 2px;
  height: 80%;
  background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.5) 50%, transparent);
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.7);
  animation: pulse-divider 2.5s infinite alternate;
}



/* ==========================================================================
10. COMPONENT: TRUSTPILOT MINI WIDGET
========================================================================== */
.trustpilot-mini-widget {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #023047;
  padding: 20px 28px;
  border-radius: 8px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  margin: 10px;
  min-width: 150px;
  /* height: 100%; */
}

.trustpilot-mini-widget:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tp-logo_ta {
  height: 140px; /* Give the container a fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-logo_mwr {
  height: 140px; /* Give the container a fixed height */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-company-logo {
  max-height: 100%;
  max-width: 150px; /* Prevent wide logos from overflowing */
  width: auto;
  object-fit: contain;
}


.tp-logo-star {
  width: 27px;
  height: 27px;
  background: #4BF0B6;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.tp-logo-text {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.tp-stars {
  display: flex;
  gap: 4px;
  margin: 4px 0;
}

.tp-star-box {
  width: 32px;
  height: 32px;
  background: #4BF0B6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: starPop 0.4s ease backwards;
}

.tp-star-box.empty {
  background: rgba(75, 240, 182, 0.25);
}

.tp-star-box svg {
  width: 23px;
  height: 23px;
}

.tp-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.tp-score {
  color: #fff;
  font-size: 33px;
  font-weight: 600;
  line-height: 1.2;
}

.tp-reviews {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 400;
}

.tp-loading {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-style: italic;
}

/* Animation au chargement */
@keyframes starPop {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
}
/* ==========================================================================
COMPONENT: PUNCHY PHRASE
========================================================================== */

.punchy-phrase {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1rem, 4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, var(--color-lime), var(--neon-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 1.5rem;
  margin-top: 3rem;
  border: 2px solid rgba(75, 240, 182, 0.5);
  border-radius: 15px;
  background-color: rgba(2, 48, 71, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 0 30px rgba(0, 243, 255, 0.2), inset 0 0 10px rgba(75, 240, 182, 0.1);
  animation: pulse-green-halo 4s infinite ease-in-out;
  line-height: 1.4;
}


.text-gradient-aurora {
  font-family: var(--font-title);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--color-lime), var(--neon-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* pour le maintien des accents */
  padding: 1rem 0.4rem;
  /* backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px); */
}





/* ==========================================================================
11. COMPONENT: FAKE VIDEO PLAYER THUMBNAIL - NO USED BUT CAN BE USEFUL
========================================================================== */

.video-thumbnail-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 100%;
}

.video-thumbnail-wrapper:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 40px rgba(0, 243, 255, 0.3);
}

.video-thumbnail-wrapper .img-fluid {
  transition: filter 0.3s ease;
  vertical-align: top;
}

.video-thumbnail-wrapper:hover .img-fluid {
  filter: brightness(0.9);
}

.play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  transition: background 0.3s ease;
}

.video-thumbnail-wrapper:hover .play-button-overlay {
  background: rgba(0,0,0,0.1);
}

.play-button-overlay .fa-play {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 30px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, color 0.3s ease;
}

.video-thumbnail-wrapper:hover .play-button-overlay .fa-play {
  transform: scale(1.1);
  color: #fff;
}



/* ==========================================================================
    NEW VERSION 
========================================================================== */
/* ==========================================================================
   CUSTOM STYLES POUR SECTIONS 2-4 (Bootstrap 5.3 Enhanced)
========================================================================== */

/* Background Gradients */
.bg-gradient-lagoon {
  background: linear-gradient(135deg, var(--color-deep-ocean) 0%, var(--color-lagoon) 50%, var(--accent-blue) 100%);
  position: relative;
}

.bg-gradient-dark {
  background: linear-gradient(135deg, #0F172A 0%, var(--primary-blue) 50%, var(--color-deep-ocean) 100%);
  position: relative;
}

/* Animated Particles Background */
.particles-bg {
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(75, 240, 182, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(33, 158, 188, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 223, 0, 0.05) 0%, transparent 50%);
  animation: particles-float 15s ease-in-out infinite;
  pointer-events: none;
}

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

/* Mesh Gradient Background */
.mesh-gradient-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(at 0% 0%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(75, 240, 182, 0.1) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(255, 223, 0, 0.05) 0%, transparent 50%);
  animation: mesh-pulse 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mesh-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* Grid Pattern Overlay */
.grid-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(23, 63, 95, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 63, 95, 0.02) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
}

/* Title with animated underline */
.title-underline {
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyber-mint) 0%, var(--yellow-gold) 100%);
  border-radius: 2px;
  animation: underline-expand 1.5s ease-out forwards;
}

@keyframes underline-expand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Glass Card Effect */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card-white {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(23, 63, 95, 0.1);
  box-shadow: 0 10px 40px rgba(23, 63, 95, 0.08);
}

/* Hover Lift Effect */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}

/* Trust Number Circle */
.trust-number-circle {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.2) 0%, rgba(255, 223, 0, 0.2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  position: relative;
  animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Stat Pulse Effect */
.stat-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border: 2px solid rgba(75, 240, 182, 0.5);
  border-radius: 50%;
  animation: pulse-ring 2s ease-out infinite;
  pointer-events: none;
}

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

/* Video Card with Play Overlay */
.video-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-thumbnail {
  overflow: hidden;
  border-radius: 12px;
}

.video-thumbnail img {
  transition: transform 0.4s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.1);
}

.play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .play-overlay {
  opacity: 1;
}

/* Cert Badge */
.cert-badge {
  transition: transform 0.3s ease;
}

.cert-badge:hover {
  transform: translateY(-3px);
}

/* Glowing Link Effect */
.btn-link-glow {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-link-glow::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyber-mint) 0%, var(--yellow-gold) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.btn-link-glow:hover::after {
  transform: scaleX(1);
}

/* Benefit Cards Modern */
.benefit-card-modern {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 5px 20px rgba(23, 63, 95, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
}

.benefit-card-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(23, 63, 95, 0.15);
  border-color: var(--cyber-mint);
}

.benefit-icon-wrapper {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.1) 0%, rgba(33, 158, 188, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.badge-stat {
  display: inline-block;
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.1) 0%, rgba(33, 158, 188, 0.1) 100%);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 600;
  color: var(--accent-blue);
  font-size: 0.95rem;
}

/* Simulation Box */
.simulation-box {
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.05) 0%, rgba(33, 158, 188, 0.05) 100%);
  border: 2px solid rgba(75, 240, 182, 0.2);
}

.slider-custom {
  accent-color: var(--cyber-mint);
}

.simulation-result {
  background: white;
  border: 2px solid var(--cyber-mint);
}

/* Price Comparison Box */
.price-comparison-box {
  background: linear-gradient(135deg, rgba(23, 63, 95, 0.03) 0%, rgba(33, 158, 188, 0.03) 100%);
  border: 2px solid rgba(23, 63, 95, 0.1);
}

/* Guarantee Box */
.guarantee-box {
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.1) 0%, rgba(255, 191, 0, 0.1) 100%);
  border-left: 4px solid var(--yellow-gold);
  color: #856404;
  font-size: 0.9rem;
}

/* Dark Benefit Cards (Ambassador Section) */
.benefit-card-dark {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.benefit-card-dark:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--yellow-gold);
  box-shadow: 0 15px 50px rgba(255, 223, 0, 0.2);
}

.benefit-icon-wrapper-dark {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.1) 0%, rgba(255, 107, 53, 0.1) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.badge-stat-dark {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.2) 0%, rgba(255, 107, 53, 0.2) 100%);
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 600;
  color: var(--yellow-gold);
  font-size: 0.95rem;
}

.example-box-dark,
.highlight-box-dark,
.stats-box-dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.time-badge-dark {
  display: inline-block;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Pulse Border Box */
.pulse-border-box {
  border: 2px solid var(--yellow-gold);
  animation: border-pulse 2s ease-in-out infinite;
}

@keyframes border-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 223, 0, 0.7); }
  50% { box-shadow: 0 0 0 10px rgba(255, 223, 0, 0); }
}

/* Utility Classes */
.letter-spacing-2 {
  letter-spacing: 2px;
}

.text-cyber-mint {
  color: var(--cyber-mint) !important;
}

.text-primary-blue {
  color: var(--primary-blue) !important;
}

.text-accent-blue {
  color: var(--accent-blue) !important;
}

.cursor-pointer {
  cursor: pointer;
}

.z-1 {
  z-index: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
  }
  
  .glass-card,
  .benefit-card-modern,
  .benefit-card-dark {
    padding: 1.5rem;
  }
  
  .trust-number-circle,
  .benefit-icon-wrapper,
  .benefit-icon-wrapper-dark {
    width: 70px;
    height: 70px;
  }
}


/* ==========================================================================
   CUSTOM STYLES SECTIONS 5-7 (Bootstrap 5.3 Enhanced)
========================================================================== */

/* FAQ Accordion Custom */
.accordion-custom .accordion-item {
  background: white;
  border: 2px solid rgba(23, 63, 95, 0.1);
  border-radius: 12px !important;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-custom .accordion-item:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 5px 20px rgba(23, 63, 95, 0.1);
}

.accordion-custom .accordion-button {
  background: linear-gradient(135deg, rgba(23, 63, 95, 0.02) 0%, rgba(33, 158, 188, 0.02) 100%);
  color: var(--primary-blue);
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1.5rem 1.5rem;
  border: none;
  transition: all 0.3s ease;
}

.accordion-custom .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--primary-blue) 100%);
  color: white;
  box-shadow: none;
}

.accordion-custom .accordion-button:focus {
  box-shadow: none;
  border: none;
}

.accordion-custom .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23173F5F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: transform 0.3s ease;
}

.accordion-custom .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-custom .accordion-body {
  padding: 1.5rem;
  color: #555;
  line-height: 1.7;
}

/* FAQ Content Cards */
.example-card {
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.05) 0%, rgba(33, 158, 188, 0.05) 100%);
  border-left: 4px solid var(--cyber-mint);
}

.guarantee-highlight {
  background: linear-gradient(135deg, rgba(255, 223, 0, 0.1) 0%, rgba(255, 191, 0, 0.1) 100%);
  border-left: 4px solid var(--yellow-gold);
  color: #856404;
}

.trust-badge-small {
  background: linear-gradient(135deg, rgba(23, 63, 95, 0.03) 0%, rgba(33, 158, 188, 0.03) 100%);
  border: 1px solid rgba(23, 63, 95, 0.1);
  transition: all 0.3s ease;
}

.trust-badge-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(23, 63, 95, 0.1);
}

.stats-card-faq {
  background: rgba(248, 249, 250, 0.8);
}

.scenario-card {
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.05) 0%, rgba(33, 158, 188, 0.05) 100%);
  border: 1px solid rgba(75, 240, 182, 0.2);
  transition: all 0.3s ease;
}

.scenario-card:hover {
  transform: translateX(5px);
  border-color: var(--cyber-mint);
}

.scenario-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--cyber-mint) 0%, var(--accent-blue) 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  flex-shrink: 0;
}

.comparison-card {
  transition: all 0.3s ease;
}

.comparison-bad {
  background: linear-gradient(135deg, rgba(220, 53, 69, 0.05) 0%, rgba(220, 53, 69, 0.02) 100%);
  border: 2px solid rgba(220, 53, 69, 0.2);
}

.comparison-good {
  background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(40, 167, 69, 0.02) 100%);
  border: 2px solid rgba(40, 167, 69, 0.2);
}

.proof-box {
  background: linear-gradient(135deg, rgba(33, 158, 188, 0.05) 0%, rgba(23, 63, 95, 0.05) 100%);
  border-left: 4px solid var(--accent-blue);
}

.approach-box {
  background: linear-gradient(135deg, rgba(75, 240, 182, 0.05) 0%, rgba(33, 158, 188, 0.05) 100%);
  border: 2px solid rgba(75, 240, 182, 0.2);
}

.time-box {
  background: linear-gradient(135deg, var(--cyber-mint) 0%, var(--accent-blue) 100%);
  color: white;
}

/* Animated Link */
.btn-link-animated {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-link-animated::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--cyber-mint) 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.btn-link-animated:hover::after {
  transform: scaleX(1);
}

/* Waves Background */
.waves-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='rgba(255,255,255,0.05)' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  pointer-events: none;
  animation: waves-move 15s ease-in-out infinite;
}

@keyframes waves-move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

/* BFM TV Card */
.bfm-tv-card {
  transition: all 0.3s ease;
}

.bfm-logo-badge {
  background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  font-size: 1.2rem;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}

.video-quote-premium {
  background: linear-gradient(135deg, rgba(23, 63, 95, 0.03) 0%, rgba(33, 158, 188, 0.03) 100%);
  border-left: 4px solid var(--accent-blue);
  position: relative;
}

.trust-logo-item-inline {
  transition: transform 0.3s ease;
}

.trust-logo-item-inline:hover {
  transform: translateY(-3px);
}

/* Gradient Orbs */
.gradient-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

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

.orb-1 {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, var(--cyber-mint) 0%, var(--accent-blue) 100%);
  top: -100px;
  right: -100px;
  animation: orb-float 20s ease-in-out infinite;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: linear-gradient(135deg, var(--yellow-gold) 0%, var(--primary-blue) 100%);
  bottom: -100px;
  left: -100px;
  animation: orb-float 25s ease-in-out infinite reverse;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -50px) scale(1.1); }
}

/* Form Card Premium */
.form-card-premium {
  border: 2px solid rgba(23, 63, 95, 0.1);
  transition: all 0.3s ease;
}

.form-card-premium:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 20px 60px rgba(23, 63, 95, 0.15) !important;
}

.form-custom {
  border: 2px solid rgba(23, 63, 95, 0.1);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-custom:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0.2rem rgba(33, 158, 188, 0.15);
}

.benefit-badge {
  padding: 0.75rem;
  border-radius: 8px;
  background: rgba(23, 63, 95, 0.02);
  transition: all 0.3s ease;
}

.benefit-badge:hover {
  background: rgba(23, 63, 95, 0.05);
  transform: translateY(-2px);
}

.benefit-badge i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
}

.trust-badge-footer {
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.trust-badge-footer:hover {
  color: var(--accent-blue) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .accordion-custom .accordion-button {
    font-size: 1rem;
    padding: 1rem;
  }
  
  .display-4 {
    font-size: 2rem;
  }
  
  .orb {
    width: 200px !important;
    height: 200px !important;
  }
}

/* ==========================================================================
   ROADMAP SECTION STYLES
   ========================================================================== */
.roadmap-section {
    position: relative;
    overflow: hidden;
}

.roadmap-bg-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(75, 240, 182, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75, 240, 182, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

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

.cyber-orb.orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #4BF0B6 0%, #219EBC 100%);
    top: -100px;
    right: -100px;
    animation: orb-float 20s ease-in-out infinite;
}

.cyber-orb.orb-2 {
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #FFDF00 0%, #173F5F 100%);
    bottom: -100px;
    left: -100px;
    animation: orb-float 25s ease-in-out infinite reverse;
}

.roadmap-timeline {
    position: relative;
    padding-left: 100px;
}

.roadmap-timeline::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(75, 240, 182, 0.5) 20%, rgba(75, 240, 182, 0.5) 80%, transparent);
}

.roadmap-icon-wrapper {
    position: relative;
    z-index: 2;
}

.roadmap-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    position: relative;
    transition: all 0.4s ease;
}

.roadmap-icon::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, var(--color-lime), var(--neon-blue));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotate-border 10s linear infinite;
}

.cyber-icon-1 {
    background: rgba(0, 243, 255, 0.1);
    border: 2px solid rgba(0, 243, 255, 0.5);
    color: var(--neon-blue);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

.cyber-icon-2 {
    background: rgba(75, 240, 182, 0.1);
    border: 2px solid rgba(75, 240, 182, 0.5);
    color: var(--color-lime);
    box-shadow: 0 0 20px rgba(75, 240, 182, 0.3);
}

.cyber-icon-3 {
    background: rgba(255, 184, 0, 0.15);
    border: 2px solid rgba(255, 184, 0, 0.6);
    color: #FFB800;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
}

.cyber-icon-4 {
    background: rgba(75, 240, 182, 0.15);
    border: 2px solid var(--color-lime);
    color: var(--color-lime);
    box-shadow: 0 0 30px rgba(75, 240, 182, 0.5);
}

.cyber-icon-5 {
    background: linear-gradient(135deg, rgba(75, 240, 182, 0.2) 0%, rgba(0, 243, 255, 0.2) 100%);
    border: 2px solid var(--color-lime);
    color: var(--color-lime);
    box-shadow: 0 0 40px rgba(75, 240, 182, 0.6);
    animation: pulse-green 2s ease-in-out infinite;
}

.roadmap-connector {
    position: absolute;
    left: 50%;
    bottom: -50px;
    width: 2px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(75, 240, 182, 0.5), transparent);
    transform: translateX(-50%);
}

.roadmap-item:last-child .roadmap-connector {
    display: none;
}

.bg-glass-cyber {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.bg-glass-cyber:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(10px);
    border-color: rgba(75, 240, 182, 0.3);
    box-shadow: 0 10px 40px rgba(75, 240, 182, 0.1);
}

.stat-card-cyber {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(75, 240, 182, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.stat-card-cyber:hover {
    transform: translateY(-5px);
    border-color: rgba(75, 240, 182, 0.5);
    box-shadow: 0 15px 40px rgba(75, 240, 182, 0.2);
}

.stat-icon-cyber i {
    filter: drop-shadow(0 0 10px currentColor);
}

.bg-gradient-aurora {
    background: linear-gradient(135deg, #4BF0B6 0%, #00F3FF 100%);
}

.cta-cyber {
    transition: all 0.4s ease;
}

.cta-cyber:hover {
    border-color: rgba(75, 240, 182, 0.5) !important;
    box-shadow: 0 0 30px rgba(75, 240, 182, 0.2);
}

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

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 30px rgba(75, 240, 182, 0.5); }
    50% { box-shadow: 0 0 50px rgba(75, 240, 182, 0.8); }
}

@media (max-width: 768px) {
    .roadmap-timeline {
        padding-left: 70px;
    }
    .roadmap-timeline::before {
        left: 25px;
    }
    .roadmap-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    .roadmap-connector {
        bottom: -40px;
        height: 40px;
    }
    .stat-card-cyber {
        padding: 1rem !important;
    }
    .stat-icon-cyber i {
        font-size: 1.5rem !important;
    }
}

/* ==========================================================================
   CERTIFICATIONS CYBER SECTION STYLES
   ========================================================================== */
.certifications-cyber-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #023047 0%, #0a1a2a 100%);
}

.certifications-bg-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(75, 240, 182, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75, 240, 182, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

/* Certification Cards */
.cert-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cert-card:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-8px);
    border-color: rgba(75, 240, 182, 0.4);
    box-shadow: 0 20px 40px rgba(75, 240, 182, 0.15);
}

.cert-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-icon {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    position: relative;
    transition: all 0.4s ease;
}

.cert-icon::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 22px;
    padding: 2px;
    background: linear-gradient(135deg, var(--color-lime), var(--neon-blue));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.cyber-icon-1 {
    background: rgba(0, 243, 255, 0.1);
    border: 2px solid rgba(0, 243, 255, 0.5);
    color: var(--neon-blue);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.3);
}

.cyber-icon-2 {
    background: rgba(75, 240, 182, 0.1);
    border: 2px solid rgba(75, 240, 182, 0.5);
    color: var(--color-lime);
    box-shadow: 0 0 20px rgba(75, 240, 182, 0.3);
}

.cyber-icon-3 {
    background: rgba(255, 184, 0, 0.1);
    border: 2px solid rgba(255, 184, 0, 0.6);
    color: #FFB800;
    box-shadow: 0 0 20px rgba(255, 184, 0, 0.3);
}

.cyber-icon-4 {
    background: rgba(75, 240, 182, 0.15);
    border: 2px solid var(--color-lime);
    color: var(--color-lime);
    box-shadow: 0 0 30px rgba(75, 240, 182, 0.5);
}

.cert-card:hover .cert-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 40px rgba(75, 240, 182, 0.5);
}

.cert-glow {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(75, 240, 182, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

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

/* Certifications Marquee */
.certifications-marquee {
    position: relative;
    overflow: hidden;
}

.logos-content-cyber {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.logo-item-cyber {
    transition: all 0.3s ease;
    filter: grayscale(30%) brightness(1.1);
}

.logo-item-cyber:hover {
    filter: grayscale(0%) brightness(1.3);
    transform: scale(1.1);
}

/* Certifications Stats - reuse roadmap stats */
.cert-stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(75, 240, 182, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.cert-stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(75, 240, 182, 0.5);
    box-shadow: 0 15px 40px rgba(75, 240, 182, 0.2);
}

/* CTA Button Lime */
.btn-electric-lime {
    font-family: var(--font-title);
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
    color: #0F172A;
    font-weight: 700;
    border: none;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
    border-radius: 50px;
    background: linear-gradient(180deg, #4BF0B6 0%, #2EC4B6 100%);
    box-shadow: 0 0 25px rgba(75, 240, 182, 0.5);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-electric-lime:hover {
    transform: scale(1.03);
    box-shadow: 0 0 40px rgba(75, 240, 182, 0.8);
    color: #023047;
}

/* ==========================================================================
    PROBLEM-SOLUTION GLASSMORPHISM CYBER SECTION
    ========================================================================== */
.problem-solution-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0a1a2a 0%, #01080b 100%);
}

.problem-solution-bg-effects {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Glass Cards - Problem (Before) */
.glass-card-problem {
    background: rgba(255, 77, 77, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 77, 77, 0.15);
    border-top: 1px solid rgba(255, 77, 77, 0.2);
    border-left: 1px solid rgba(255, 77, 77, 0.15);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card-problem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff4d4d, rgba(255, 77, 77, 0.3), #ff4d4d);
}

.glass-card-problem:hover {
    transform: translateY(-8px);
    background: rgba(255, 77, 77, 0.06);
    border-color: rgba(255, 77, 77, 0.3);
    box-shadow: 0 20px 40px rgba(255, 77, 77, 0.15);
}

.card-glow-effect {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 77, 77, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Glass Cards - Solution (After) */
.glass-card-solution {
    background: rgba(75, 240, 182, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 240, 182, 0.15);
    border-top: 1px solid rgba(75, 240, 182, 0.2);
    border-left: 1px solid rgba(75, 240, 182, 0.15);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card-solution::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #4BF0B6, rgba(75, 240, 182, 0.3), #4BF0B6);
    box-shadow: 0 0 20px rgba(75, 240, 182, 0.5);
}

.glass-card-solution:hover {
    transform: translateY(-8px);
    background: rgba(75, 240, 182, 0.06);
    border-color: rgba(75, 240, 182, 0.4);
    box-shadow: 0 20px 40px rgba(75, 240, 182, 0.2);
}

.card-glow-effect-solution {
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(75, 240, 182, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Badges */
.badge-problem {
    background: linear-gradient(135deg, rgba(255, 77, 77, 0.2) 0%, rgba(255, 77, 77, 0.1) 100%);
    border: 1px solid rgba(255, 77, 77, 0.4);
    color: #ff4d4d;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 50px;
}

.badge-solution {
    background: linear-gradient(135deg, rgba(75, 240, 182, 0.2) 0%, rgba(75, 240, 182, 0.1) 100%);
    border: 1px solid rgba(75, 240, 182, 0.4);
    color: #4BF0B6;
    font-size: 0.75rem;
    letter-spacing: 1px;
    border-radius: 50px;
    box-shadow: 0 0 15px rgba(75, 240, 182, 0.2);
}

/* Icons */
.pas-icon-problem {
    background: rgba(255, 77, 77, 0.1);
    border: 1px solid rgba(255, 77, 77, 0.2);
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.pas-icon-problem i {
    color: #ff4d4d;
    filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.5));
}

.pas-icon-solution {
    background: rgba(75, 240, 182, 0.1);
    border: 1px solid rgba(75, 240, 182, 0.2);
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.pas-icon-solution i {
    color: #4BF0B6;
    filter: drop-shadow(0 0 6px rgba(75, 240, 182, 0.5));
}

/* Bridge Animation */
.bridge-container {
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bridge-line {
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(75, 240, 182, 0.5), transparent);
    position: relative;
    animation: bridge-pulse 2s ease-in-out infinite;
}

.bridge-line::before,
.bridge-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4BF0B6;
    box-shadow: 0 0 10px rgba(75, 240, 182, 0.8);
}

.bridge-line::before {
    left: 0;
}

.bridge-line::after {
    right: 0;
}

@keyframes bridge-pulse {
    0%, 100% {
        opacity: 0.5;
        box-shadow: 0 0 10px rgba(75, 240, 182, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(75, 240, 182, 0.6);
    }
}

.bridge-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(75, 240, 182, 0.1);
    border: 1px solid rgba(75, 240, 182, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arrow-bounce 2s ease-in-out infinite;
}

.bridge-icon i {
    color: #4BF0B6;
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(75, 240, 182, 0.6));
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(33px);
    }
    75% {
        transform: translateX(60px);
    }
}

/* Quote Card */
.quote-card {
    background: rgba(75, 240, 182, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(75, 240, 182, 0.15);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.quote-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4BF0B6, transparent);
}

.quote-icon i {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(75, 240, 182, 0.4));
}

.quote-author {
    font-style: italic;
}

/* Neon Dot */
.neon-dot {
    display: inline-block;
    margin-left: 0.5rem;
}

.neon-dot i {
    /* color: #4BF0B6; */
    filter: drop-shadow(0 0 8px rgba(75, 240, 182, 0.8));
    animation: pulse-mag 2s infinite;
}

@keyframes pulse-mag {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .bridge-container {
        height: 40px;
    }
    
    .bridge-line {
        width: 120px;
    }
    
    .glass-card-problem,
    .glass-card-solution {
        padding: 1.5rem !important;
    }
    
    .pas-icon-problem,
    .pas-icon-solution {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    
    .pas-icon-problem i,
    .pas-icon-solution i {
        font-size: 0.9rem;
    }
    
    .stat-card-cyber {
        padding: 1rem !important;
    }
    
    .stat-number-cyber {
        font-size: 1.5rem !important;
    }
}