@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 20px;
        }
        
        .mobile-mockup {
            position: relative;
            max-width: 300px;
            margin: 0 auto;
        }
        
        .mobile-mockup::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 20px;
            background: #111;
            border-radius: 10px;
            z-index: 10;
        }
        
        .mobile-mockup::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 10px;
            background: #111;
            border-radius: 5px;
            z-index: 10;
        }
        
        .ussd-code {
            font-family: monospace;
            letter-spacing: 2px;
        }
        
        .payment-option:hover .payment-icon {
            transform: scale(1.1);
        }


        .bande-ess {
          background: #254eb8; /* Dégradé vert/bleu */
          color: white !important;
          
    }

    .text-bl-600 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}


/* BTN héros “éclair” */
.btn-ess{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.875rem 1.5rem; border-radius:.75rem; color:#fff; font-weight:600;
  background: linear-gradient(90deg,#6d28d9,#3b82f6 50%,#0ea5e9);
  box-shadow: 0 10px 25px rgba(59,130,246,.35), 0 2px 8px rgba(0,0,0,.12);
  overflow:hidden; transition: transform .15s ease, filter .15s ease;
}
.btn-ess:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* Ruban de brillance qui “balaye” le bouton en continu */
.btn-ess::before{
  content:""; position:absolute; top:-40%; left:-150%;
  width:55%; height:180%; transform: rotate(25deg);
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  filter: blur(2px);
  animation: essShine 3.6s linear infinite;
}
@keyframes essShine{
  0%{ left:-150%; } 100%{ left:150%; }
}

/* Variante compacte si tu en as besoin
.btn-ess.sm{ padding:.65rem 1.1rem; font-weight:600 } */

/* Grille avec perspective 3D */
.flags-3d{ perspective: 1200px; }

/* Carte drapeau avec bord dégradé + 3D */
.flag-card{
  position:relative; padding:1.25rem; border-radius:1rem;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#8b5cf6,#3b82f6,#06b6d4) border-box;
  border:2px solid transparent;
  transform-style: preserve-3d;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.flag-card:hover{
  transform: translateY(-6px) rotateX(6deg) rotateY(-5deg);
  box-shadow: 0 22px 40px rgba(0,0,0,.15);
  filter: saturate(1.15);
}
/* Halo/shine au survol */
.flag-card::after{
  content:""; position:absolute; inset:-1px; border-radius:1rem;
  background: radial-gradient(120px 60px at 20% -20%, rgba(255,255,255,.6), transparent 60%),
              radial-gradient(120px 60px at 120% 120%, rgba(255,255,255,.4), transparent 60%);
  opacity:.0; transition: opacity .25s ease;
}
.flag-card:hover::after{ opacity:.7; }

.flag-img{
  width:4rem; height:4rem; border-radius:9999px; overflow:hidden;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.08);
  transform: translateZ(24px);
}

/* Override : éclair JAUNE pour le bouton héros */
.btn-ess{ --ess-shine: rgba(255, 215, 0, .85); } /* or #FFD700 */
.btn-ess::before{
  background: linear-gradient(90deg, transparent, var(--ess-shine), transparent);
  mix-blend-mode: screen;           /* rend le jaune plus lumineux sans ternir le fond */
  filter: blur(1.5px);              /* léger flou pour un effet “éclair” doux */
  animation: essShine 3.6s linear infinite;
}


/* Force l'éclair JAUNE et passe devant toute règle précédente */
a.btn-ess::before{
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,215,0,0) 35%,
    rgba(255,215,0,.95) 50%,
    rgba(255,215,0,0) 65%,
    transparent 100%
  ) !important;
  mix-blend-mode: normal !important; /* évite l'effet "blanchi" */
  filter: blur(1px);                  /* éclat doux (optionnel) */
}

/* === 3D Goals === */
.goals-wrap{ perspective:1200px; }
.goal-card{
  position:relative; border-radius:1rem; padding:1.5rem;
  /* bord dégradé + fond blanc */
  background:
    linear-gradient(#ffffff,#ffffff) padding-box,
    linear-gradient(135deg,#8b5cf6,#3b82f6,#06b6d4) border-box;
  border:2px solid transparent;
  transform-style: preserve-3d;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.goal-card:hover{
  transform: translateY(-6px) rotateX(6deg) rotateY(-5deg);
  box-shadow: 0 22px 42px rgba(0,0,0,.18);
  filter: saturate(1.05);
}
/* halo / brillance */
.goal-card::after{
  content:""; position:absolute; inset:-1px; border-radius:1rem; pointer-events:none;
  background:
    radial-gradient(140px 80px at 20% -20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(140px 80px at 120% 120%, rgba(255,255,255,.35), transparent 60%);
  opacity:.0; transition:opacity .25s ease;
}
.goal-card:hover::after{ opacity:.8; }

/* couches en profondeur */
.goal-icon, .goal-title, .goal-text{ will-change: transform; }
.goal-icon{ transform: translateZ(36px); }
.goal-title{ transform: translateZ(28px); }
.goal-text{ transform: translateZ(18px); }

/* pastille icône en relief */
.goal-icon{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#e0e7ff,#bfdbfe);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.8),
    inset 0 -6px 16px rgba(0,0,0,.07),
    0 10px 24px rgba(59,130,246,.25);
  color:#2563eb;
  margin: 0 auto 1rem;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .goal-card, .goal-card:hover{ transform:none !important; }
}



/* Grille : donne une perspective douce à l'ensemble (optionnel) */
.steps-3d{ perspective:1000px; }

/* Bulle 3D animée + éclair jaune au survol */
.step-bubble{
  position:relative; width:4rem; height:4rem; /* w-16 h-16 */
  border-radius:9999px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:1.5rem;
  /* dégradé bleu profond + relief */
  background: radial-gradient(120% 140% at 30% 20%, #93c5fd 0%, #3b82f6 35%, #2563eb 70%, #1d4ed8 100%);
  border:2px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 3px 10px rgba(255,255,255,.35),
    inset 0 -10px 20px rgba(0,0,0,.28),
    0 16px 28px rgba(30,64,175,.35),
    0 4px 10px rgba(0,0,0,.10);
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  animation: floatY 3.5s ease-in-out infinite alternate;
}
/* effet 3D au survol */
.step-bubble:hover{
  transform: translateY(-8px) rotateX(14deg) rotateY(-10deg);
  box-shadow:
    inset 0 6px 16px rgba(255,255,255,.4),
    inset 0 -14px 28px rgba(0,0,0,.30),
    0 26px 46px rgba(30,64,175,.45),
    0 6px 14px rgba(0,0,0,.12);
  filter: saturate(1.08);
}
/* éclat glossy permanent */
.step-bubble::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(120px 60px at 30% 25%, rgba(255,255,255,.55), transparent 60%);
  transform: translateZ(8px);
}


/* animation de flottement douce */
@keyframes floatY{ from{transform:translateY(0)} to{transform:translateY(-6px)} }

/* accessibilité : réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .step-bubble{ animation:none; transition:none }
  .step-bubble:hover{ transform:none }
}