```css
/* =========================================
   CONFIGURATION GÉNÉRALE
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background: #080b10;

    overflow-x: hidden;

}


/* =========================================
   SLIDESHOW ARRIÈRE-PLAN
========================================= */

#backgroundSlider {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    z-index: -3;

    transition:
        background-image 1.5s ease-in-out;

}


/* =========================================
   OVERLAY
========================================= */

.overlay {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.90) 0%,
            rgba(0, 0, 0, 0.70) 45%,
            rgba(0, 0, 0, 0.35) 100%
        );

    z-index: -2;

}


/* =========================================
   MARQUE
========================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 15px;

}

.brand-icon {

    width: 58px;
    height: 58px;

    border: 1px solid rgba(255,255,255,0.35);

    border-radius: 12px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

}

.brand-icon i {

    font-size: 30px;

    color: #ffffff;

}

.brand h2 {

    margin: 0;

    font-size: 26px;

    font-weight: 800;

    letter-spacing: 4px;

    color: #ffffff;

}

.brand span {

    font-size: 11px;

    letter-spacing: 3px;

    color: rgba(255,255,255,0.65);

}


/* =========================================
   BADGE
========================================= */

.status-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 15px;

    border-radius: 30px;

    border: 1px solid rgba(255,255,255,0.2);

    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(10px);

    color: #ffffff;

    font-size: 12px;

    letter-spacing: 2px;

}

.status-dot {

    width: 8px;
    height: 8px;

    background: #42d392;

    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(66,211,146,0.8);

}


/* =========================================
   TITRE
========================================= */

h1 {

    line-height: 1.05;

    letter-spacing: -2px;

}

.highlight {

    color: #ffffff;

    position: relative;

}


/* =========================================
   DESCRIPTION
========================================= */

.lead {

    max-width: 680px;

    line-height: 1.8;

    font-size: 18px;

}


/* =========================================
   BOUTONS
========================================= */

.btn {

    border-radius: 8px;

    font-weight: 600;

    transition: all 0.3s ease;

}

.btn-primary {

    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

}

.btn-primary:hover {

    background: transparent;

    color: #ffffff;

    border-color: #ffffff;

    transform: translateY(-2px);

}

.btn-outline-light:hover {

    transform: translateY(-2px);

}


/* =========================================
   SERVICES
========================================= */

.services {

    display: flex;

    flex-wrap: wrap;

    gap: 30px;

}

.service-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: rgba(255,255,255,0.75);

    font-size: 14px;

}

.service-item i {

    font-size: 20px;

    color: #ffffff;

}


/* =========================================
   FOOTER
========================================= */

footer {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 20px 0;

    color: rgba(255,255,255,0.45);

    font-size: 12px;

    border-top:
        1px solid rgba(255,255,255,0.1);

    background:
        rgba(0,0,0,0.20);

    backdrop-filter: blur(10px);

}


/* =========================================
   RESPONSIVE MOBILE
========================================= */

@media (max-width: 768px) {

    h1 {

        font-size: 3rem;

    }

    .lead {

        font-size: 16px;

    }

    .brand h2 {

        font-size: 21px;

    }

    .services {

        gap: 18px;

    }

    footer {

        text-align: center;

    }

}
```