.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:100px;overflow:hidden}
    .hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(0,217,255,.15) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(112,0,255,.15) 0%,transparent 50%);z-index:-1}
    .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
    .hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.3);border-radius:50px;color:var(--accent-cyan);font-size:.9rem;margin-bottom:2rem}
    .badge-dot{width:8px;height:8px;background:var(--accent-success);border-radius:50%;animation:pulse 2s infinite}
    @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}}
    .hero-title{font-size:clamp(2.5rem,5vw,4rem);margin-bottom:1.5rem}
    .hero-description{font-size:1.1rem;color:var(--text-secondary);margin-bottom:2.5rem;line-height:1.7}
    .hero-buttons{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3rem}
    .hero-features{display:flex;gap:2rem;flex-wrap:wrap}
    .hero-features .feature{color:var(--text-secondary);font-size:.95rem}
    .hero-visual{display:flex;justify-content:center;align-items:center}
    .hero-image{width:100%;max-width:500px;height:auto;will-change:transform;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 20px 60px rgba(0,217,255,.3));aspect-ratio:1/1}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}
    .carousel-section{padding:4rem 0;background:var(--bg-secondary);overflow:hidden}
    @media(max-width:768px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-visual{order:-1}.hero-buttons{justify-content:center;align-items:center;flex-direction:column}.hero-features{justify-content:center;flex-direction:column;align-items:center}.hero-image{max-width:320px;animation:none;filter:drop-shadow(0 10px 30px rgba(0,217,255,.2))}}
    

    /* ===== FAQ Section ===== */
    .faq-section { background: var(--bg-secondary, #0f0f1a); padding: 80px 0; }
    .faq-grid { display: flex; flex-direction: column; gap: 12px; max-width: 800px; margin: 48px auto 0; }
    .faq-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; transition: border-color .3s; }
    .faq-item:hover { border-color: rgba(108,99,255,0.4); }
    .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: none; border: none; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; gap: 16px; }
    .faq-question:hover { color: #6c63ff; }
    .faq-icon { font-size: 1.4rem; flex-shrink: 0; transition: transform .3s; color: #6c63ff; }
    .faq-item.open .faq-icon { transform: rotate(45deg); }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; }
    .faq-item.open .faq-answer { max-height: 600px; }
    .faq-answer p { padding: 0 24px 20px; color: rgba(255,255,255,0.7); line-height: 1.7; margin: 0; }

    /* ===== Reviews Section ===== */

    /* ===== Payment Logos ===== */
    .payment-logos { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
    /* rgba(255,255,255,0.5) = ~#888 sur #141414 → ratio ~4.0:1 insuffisant → #aaa = ~5.5:1 ✅ */
    .payment-label { color: #aaaaaa; font-size: 0.8rem; }
    .payment-badge { display: inline-flex; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
    .payment-badge svg { display: block; }
    .payment-secure { color: #aaaaaa; font-size: 0.8rem; margin-left: 6px; }

    @media (max-width: 768px) {
        .reviews-grid { grid-template-columns: 1fr; }
        .faq-question { font-size: 0.9rem; padding: 16px 18px; }
        .payment-logos { gap: 8px; }
        #villes .container > div:last-child { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 480px) {
        #villes .container > div:last-child { grid-template-columns: 1fr !important; }
    }