/* ==========================================================================
           1. VARIABLES & RESET
           ========================================================================== */
        :root {
            --primary: #15ABC6;
            --primary-hover: #0f8a9f;
            --primary-light: #e8f7fa;
            --primary-gradient: linear-gradient(135deg, #15ABC6 0%, #0d7a8d 100%);
            --secondary: #0A2540;
            --text-dark: #1E293B;
            --text-muted: #64748B;
            --bg-light: #F8FAFC;
            --bg-white: #FFFFFF;
            --border-color: #E2E8F0;
            --shadow-sm: 0 2px 8px rgba(21, 171, 198, 0.08);
            --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 20px 35px -10px rgba(15, 23, 42, 0.12);
            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--text-dark);
            background-color: var(--bg-white);
            line-height: 1.6;
            overflow-x: hidden;
        }

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

        ul {
            list-style: none;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* ==========================================================================
           2. UTILITIES & COMPONENTS
           ========================================================================== */
        .container {
            max-width: 1240px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .section-padding {
            padding: 100px 0;
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 16px;
            background-color: var(--primary-light);
            color: var(--primary);
            font-weight: 700;
            font-size: 0.875rem;
            border-radius: 100px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--secondary);
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .section-subtitle {
            font-size: 1.125rem;
            color: var(--text-muted);
            max-width: 650px;
            margin-bottom: 40px;
        }

        .text-center {
            text-align: center;
        }

        .text-center .section-subtitle {
            margin-left: auto;
            margin-right: auto;
        }

        /* Buttons */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 28px;
            font-size: 1rem;
            font-weight: 700;
            border-radius: 100px;
            transition: var(--transition);
            cursor: pointer;
            border: none;
            outline: none;
        }

        .btn-primary {
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 8px 20px rgba(21, 171, 198, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(21, 171, 198, 0.4);
        }

        .btn-secondary {
            background-color: var(--bg-white);
            color: var(--secondary);
            border: 2px solid var(--border-color);
        }

        .btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
            background-color: var(--primary-light);
            transform: translateY(-2px);
        }

        .btn-white {
            background-color: white;
            color: var(--secondary);
        }

        .btn-white:hover {
            background-color: var(--primary-light);
            color: var(--primary);
            transform: translateY(-2px);
        }

        .badge {
            display: inline-block;
            padding: 4px 12px;
            background: rgba(21, 171, 198, 0.1);
            color: var(--primary);
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* Animations scroll reveal */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

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

        /* ==========================================================================
           3. HEADER & NAVIGATION
           ========================================================================== */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            transition: var(--transition);
        }

        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 80px;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 8px;
        }

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

        .nav-links {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .nav-link {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--text-dark);
            transition: var(--transition);
        }

        .nav-link:hover {
            color: var(--primary);
        }

        .hamburger {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--secondary);
        }

        /* ==========================================================================
           4. HERO SECTION
           ========================================================================== */
        .hero {
            padding-top: 140px;
            padding-bottom: 80px;
            background: linear-gradient(180deg, #F4FBFC 0%, #FFFFFF 100%);
            position: relative;
            overflow: hidden;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.15;
            color: var(--secondary);
            margin-bottom: 24px;
        }

        .hero-title span {
            color: var(--primary);
            position: relative;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            color: var(--text-muted);
            margin-bottom: 32px;
        }

        .destinations-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 36px;
        }

        .pill {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: var(--bg-white);
            border: 1px solid var(--border-color);
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }

        .hero-cta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .hero-image-wrapper {
            position: relative;
        }

        .hero-img {
            width: 100%;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            object-fit: cover;
        }

        .floating-badge {
            position: absolute;
            background: white;
            padding: 16px 20px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-lg);
            display: flex;
            align-items: center;
            gap: 14px;
            z-index: 2;
            animation: float 4s ease-in-out infinite;
        }

        .floating-badge.badge-1 {
            top: 10%;
            left: -30px;
        }

        .floating-badge.badge-2 {
            bottom: 10%;
            right: -20px;
            animation-delay: 2s;
        }

        .badge-icon {
            width: 48px;
            height: 48px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .badge-text h4 {
            font-size: 0.95rem;
            color: var(--secondary);
        }

        .badge-text p {
            font-size: 0.8rem;
            color: var(--text-muted);
        }

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

        /* ==========================================================================
           5. SECTION QUI SOMMES-NOUS
           ========================================================================== */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .about-text {
            font-size: 1.05rem;
            color: var(--text-muted);
            margin-bottom: 20px;
        }

        .about-quote {
            padding: 20px 24px;
            background-color: var(--primary-light);
            border-left: 4px solid var(--primary);
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
            margin-top: 24px;
            font-weight: 600;
            color: var(--secondary);
        }

        .mission-blocks {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .mission-card {
            background: var(--bg-light);
            padding: 24px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            transition: var(--transition);
        }

        .mission-card:hover {
            background: white;
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
        }

        .mission-icon {
            font-size: 1.75rem;
            color: var(--primary);
            margin-bottom: 12px;
        }

        .mission-card h4 {
            font-size: 1.1rem;
            color: var(--secondary);
            margin-bottom: 6px;
        }

        /* ==========================================================================
           6. POURQUOI SMARTPATH STUDY
           ========================================================================== */
        .why-section {
            background-color: var(--bg-light);
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
        }

        .why-card {
            background: white;
            padding: 32px 24px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .why-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary);
        }

        .why-icon {
            width: 56px;
            height: 56px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 20px;
        }

        .why-card h3 {
            font-size: 1.15rem;
            color: var(--secondary);
            margin-bottom: 10px;
        }

        .why-card p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        /* ==========================================================================
           7. DESTINATIONS (IMMERSIVE CARDS)
           ========================================================================== */
        .destinations-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 32px;
        }

        .destination-card {
            background: white;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

        .destination-card:hover {
            box-shadow: var(--shadow-lg);
            transform: translateY(-6px);
        }

        .destination-header {
            padding: 24px 28px;
            background: linear-gradient(135deg, var(--secondary) 0%, #1a3b5c 100%);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .destination-title {
            font-size: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .destination-body {
            padding: 28px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .destination-desc {
            color: var(--text-muted);
            font-size: 0.95rem;
            margin-bottom: 20px;
            font-style: italic;
        }

        .destination-features {
            margin-bottom: 20px;
        }

        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 0.9rem;
            color: var(--text-dark);
        }

        .feature-item i {
            color: var(--primary);
            margin-top: 4px;
        }

        .durations-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }

        .duration-tag {
            background: var(--bg-light);
            border: 1px solid var(--border-color);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--secondary);
        }

        .partner-list-mini {
            margin-top: auto;
            padding-top: 16px;
            border-top: 1px dashed var(--border-color);
        }

        .partner-list-mini h5 {
            font-size: 0.85rem;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .partner-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .partner-pill {
            background: var(--primary-light);
            color: var(--primary);
            font-size: 0.75rem;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
        }

        /* ==========================================================================
           8. TROUVE TA FORMATION (INTERACTIVE)
           ========================================================================== */
        .finder-section {
            background-color: var(--bg-light);
        }

        .filter-container {
            background: white;
            padding: 24px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            margin-bottom: 40px;
            border: 1px solid var(--border-color);
        }

        .filter-group {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }

        .filter-btn {
            padding: 8px 18px;
            border-radius: 50px;
            background: var(--bg-light);
            border: 1px solid var(--border-color);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-muted);
            cursor: pointer;
            transition: var(--transition);
        }

        .filter-btn:hover, .filter-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 20px;
        }

        .course-card {
            background: white;
            padding: 20px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .course-card:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        .course-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .course-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--secondary);
        }

        /* ==========================================================================
           9. UNIVERSITÉS PARTENAIRES
           ========================================================================== */
        .partners-tabs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 10px 24px;
            border-radius: 100px;
            border: 1px solid var(--border-color);
            background: white;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
        }

        .tab-btn.active, .tab-btn:hover {
            background: var(--secondary);
            color: white;
            border-color: var(--secondary);
        }

        .partner-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
        }

        .uni-card {
            background: white;
            padding: 24px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            text-align: center;
            font-weight: 700;
            color: var(--secondary);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100px;
        }

        .uni-card:hover {
            border-color: var(--primary);
            color: var(--primary);
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        /* ==========================================================================
           10. COMMENT ÇA MARCHE (TIMELINE)
           ========================================================================== */
        .timeline-section {
            background-color: var(--bg-light);
        }

        .timeline {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 24px;
            position: relative;
        }

        .step-card {
            background: white;
            padding: 32px 24px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
            position: relative;
            box-shadow: var(--shadow-sm);
        }

        .step-number {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary);
            opacity: 0.8;
            margin-bottom: 12px;
        }

        .step-title {
            font-size: 1.2rem;
            color: var(--secondary);
            margin-bottom: 10px;
        }

        .step-desc {
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        /* ==========================================================================
           11. CONDITIONS D'ADMISSION
           ========================================================================== */
        .admission-container {
            background: linear-gradient(135deg, var(--secondary) 0%, #113154 100%);
            border-radius: var(--radius-lg);
            padding: 60px 40px;
            color: white;
        }

        .admission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .admission-box {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 32px;
            border-radius: var(--radius-md);
        }

        .admission-box h3 {
            font-size: 1.5rem;
            color: var(--primary);
            margin-bottom: 12px;
        }

        .admission-notice {
            background: rgba(21, 171, 198, 0.15);
            border-left: 4px solid var(--primary);
            padding: 16px 20px;
            border-radius: 4px;
            font-size: 0.95rem;
            margin-bottom: 30px;
        }

        /* ==========================================================================
           12. FAQ (ACCORDION)
           ========================================================================== */
        .faq-accordion {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            margin-bottom: 12px;
            overflow: hidden;
            transition: var(--transition);
        }

        .faq-header {
            padding: 20px 24px;
            font-weight: 700;
            color: var(--secondary);
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
        }

        .faq-header i {
            color: var(--primary);
            transition: var(--transition);
        }

        .faq-body {
            padding: 0 24px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease-out;
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .faq-item.active .faq-header i {
            transform: rotate(180deg);
        }

        .faq-item.active .faq-body {
            padding: 0 24px 20px 24px;
            max-height: 200px;
        }

        /* ==========================================================================
           13. CTA FINAL & FOOTER
           ========================================================================== */
        .cta-final-section {
            background: var(--primary-gradient);
            color: white;
            text-align: center;
            padding: 80px 0;
        }

        .cta-final-section h2 {
            font-size: 2.8rem;
            font-weight: 800;
            margin-bottom: 16px;
        }

        .cta-final-section p {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto 32px auto;
            opacity: 0.95;
        }

        .cta-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .footer {
            background-color: var(--secondary);
            color: white;
            padding: 60px 0 30px 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-brand p {
            color: #94A3B8;
            margin-top: 12px;
            max-width: 300px;
        }

        .footer-links h4 {
            font-size: 1.1rem;
            margin-bottom: 16px;
            color: white;
        }

        .footer-links ul li {
            margin-bottom: 8px;
        }

        .footer-links ul li a {
            color: #94A3B8;
            transition: var(--transition);
        }

        .footer-links ul li a:hover {
            color: var(--primary);
        }

        .footer-bottom {
            border-top: 1px solid #1E293B;
            padding-top: 24px;
            text-align: center;
            color: #64748B;
            font-size: 0.875rem;
        }

        /* Placeholder badge styling */
        .placeholder-tag {
            background-color: #FEF3C7;
            color: #92400E;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        /* ==========================================================================
           14. RESPONSIVE DESIGN
           ========================================================================== */
        @media (max-width: 992px) {
            .hero-grid, .about-grid, .admission-grid {
                grid-template-columns: 1fr;
            }

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

            .nav-links {
                position: fixed;
                top: 80px;
                left: -100%;
                width: 100%;
                height: calc(100vh - 80px);
                background: white;
                flex-direction: column;
                align-items: center;
                padding: 40px 0;
                transition: var(--transition);
            }

            .nav-links.active {
                left: 0;
            }

            .hamburger {
                display: block;
            }

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

        @media (max-width: 576px) {
            .hero-title {
                font-size: 2rem;
            }

            .section-title {
                font-size: 1.8rem;
            }

            .floating-badge {
                display: none;
            }

            .admission-container {
                padding: 30px 20px;
            }
        }
    

.logo img{display:block;width:220px;height:auto;max-height:72px;object-fit:contain}.footer .logo{background:transparent;border-radius:0;padding:0;width:max-content}.footer .logo img{width:210px}.hamburger{background:none;border:0;color:inherit;font-size:1.5rem;cursor:pointer}.uni-card img{max-width:150px;max-height:70px;object-fit:contain}.uni-card{flex-direction:column;gap:12px}.destination-title img{width:32px;vertical-align:middle}.pill img{width:22px;vertical-align:middle}.faq-header{width:100%;border:0;background:transparent;font:inherit;text-align:left;color:inherit}.sps-empty{padding:1rem;text-align:center}.sps-form{display:grid;gap:16px}.sps-form label{display:grid;gap:6px;font-weight:600}.sps-form input,.sps-form select,.sps-form textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit}.sps-form textarea{min-height:110px}.sps-modal{border:0;border-radius:20px;padding:28px;max-width:640px;width:calc(100% - 32px);max-height:90vh;overflow:auto;margin:auto;color:var(--text-dark);background:#fff}.sps-modal::backdrop{background:rgba(0,0,0,.6)}.sps-close{float:right;border:0;background:none;font-size:28px;cursor:pointer}.sps-status{min-height:24px}.sps-trap{position:absolute;left:-10000px}.reveal{opacity:1;transform:none}.sps-js .reveal:not(.active){opacity:0;transform:translateY(30px)}.sps-js .reveal.active{opacity:1;transform:none}.desktop-appointment{display:none}:focus-visible{outline:3px solid #15ABC6;outline-offset:4px}[hidden]{display:none!important}
@media(min-width:1100px){.desktop-appointment{display:inline-flex}.logo img{width:195px}.nav-links{gap:18px}}@media(max-width:600px){.logo img{width:175px}.sps-modal{padding:20px}.header .container{padding:0 16px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.sps-js .reveal:not(.active){opacity:1;transform:none}}.admin-bar .header{top:32px}@media(max-width:782px){.admin-bar .header{top:46px}}
.hamburger{width:44px;height:44px;flex-shrink:0}.hamburger i::before{content:'☰';font-family:Arial,sans-serif}
.hero-grid>*,.about-grid>*,.admission-grid>*,.footer-grid>*{min-width:0}.mission-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}.btn{max-width:100%;text-align:center}.mission-card,.destination-card,.admission-box{overflow-wrap:anywhere}@media(max-width:360px){.mission-blocks{grid-template-columns:1fr}.mission-card{padding:20px}.hero-cta .btn{width:100%}}
.destinations-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr))}

/* Version 1.1 — rythme des sections et confirmation de demande. */
.why-section{background:var(--primary-gradient);position:relative;overflow:hidden}
.why-section .section-title{color:#fff}.why-section .section-subtitle{color:rgba(255,255,255,.92)}
.why-section .section-tag{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25)}
.why-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;max-width:1080px;margin:auto}
.why-card{grid-column:span 2;padding:32px;box-shadow:0 12px 32px rgba(10,37,64,.12)}
.why-card:nth-child(4){grid-column:2 / span 2}.why-card:nth-child(5){grid-column:4 / span 2}
.finder-section{position:relative;isolation:isolate;background:#F8FAFC;overflow:hidden}
.finder-section::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,250,252,.94),rgba(248,250,252,.87),rgba(248,250,252,.94));pointer-events:none}
.sps-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;color:var(--primary);opacity:.14}
.sps-decor~.container{position:relative;z-index:1}.sps-decor svg{position:absolute;width:72px;height:72px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:sps-float 9s ease-in-out infinite}
.sps-decor .sps-star{top:12%;right:4%;width:54px;height:54px}.sps-decor .sps-book{left:3%;bottom:12%;animation-delay:-3s}.sps-decor .sps-cap{right:3%;bottom:10%;animation-delay:-5s}
.why-section .sps-decor,.cta-final-section .sps-decor{color:#fff;opacity:.17}.cta-final-section{position:relative;overflow:hidden}.sps-decor-light{position:relative;overflow:hidden}
@keyframes sps-float{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-14px) rotate(5deg)}}
.sps-modal [hidden]{display:none!important}.sps-success{text-align:center;padding:28px 12px 16px;outline:none}.sps-success h2{color:var(--secondary);font-size:1.8rem;margin-bottom:14px}.sps-success p{max-width:340px;margin:0 auto 28px;color:var(--text-muted);line-height:1.7}.sps-success-close{width:100%}
.sps-celebration{position:relative;width:240px;height:200px;margin:0 auto 12px;display:grid;place-items:center}.sps-success-check{width:120px;height:120px;overflow:visible;animation:sps-pop .45s cubic-bezier(.2,.8,.3,1.2) both}.sps-success-check circle{fill:#15ABC6;stroke:#e8f7fa;stroke-width:14}.sps-success-check path{fill:none;stroke:white;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:70;stroke-dashoffset:70;animation:sps-check .5s .2s ease forwards}
.sps-confetti{position:absolute;left:50%;top:50%;width:7px;height:12px;border-radius:2px;background:#75b8ff;opacity:0;animation:sps-confetti 1.5s .15s ease-out forwards;--x:-90px;--y:-70px;--r:65deg}.c2{--x:85px;--y:-60px;--r:-80deg;background:#15abc6}.c3{--x:-100px;--y:22px;--r:130deg;width:6px;height:6px;background:#b8c3ce}.c4{--x:105px;--y:28px;--r:160deg}.c5{--x:-50px;--y:-88px;--r:-45deg;background:#b8c3ce}.c6{--x:45px;--y:-85px;--r:95deg}.c7{--x:-72px;--y:72px;--r:180deg;background:#15abc6}.c8{--x:65px;--y:72px;--r:-120deg;background:#b8c3ce}
@keyframes sps-pop{from{opacity:0;transform:scale(.65)}to{opacity:1;transform:scale(1)}}@keyframes sps-check{to{stroke-dashoffset:0}}@keyframes sps-confetti{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media(max-width:991px){.why-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.why-card:nth-child(4){grid-column:span 2}.why-card:nth-child(5){grid-column:2 / span 2}.sps-decor svg{width:52px;height:52px}}
@media(max-width:600px){.why-grid{grid-template-columns:minmax(0,1fr)}.why-card,.why-card:nth-child(4),.why-card:nth-child(5){grid-column:1;padding:26px}.sps-decor{opacity:.08}.sps-decor .sps-book{left:-20px}.sps-decor .sps-cap{right:-20px}.sps-success{padding:16px 0}.sps-celebration{width:220px;height:180px}}
@media(prefers-reduced-motion:reduce){.sps-decor svg,.sps-success-check,.sps-success-check path,.sps-confetti{animation:none!important}.sps-success-check path{stroke-dashoffset:0}.sps-success-check{opacity:1}.sps-confetti{display:none}}

.sps-catalogue-background{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;z-index:-2;pointer-events:none}