/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 1 / 15
========================================================= */

/* =========================
   RESET
========================= */

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

html{

    scroll-behavior:smooth;

    font-size:16px;

}

body{

    font-family:"Inter",sans-serif;

    background:#050816;

    color:#FFFFFF;

    overflow-x:hidden;

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* =========================
   VARIABLES
========================= */

:root{

    --primary:#4F8CFF;
    --primary-dark:#2563EB;

    --secondary:#7C3AED;

    --success:#22C55E;

    --danger:#EF4444;

    --background:#050816;

    --surface:#0B1224;

    --surface-light:#131E36;

    --border:rgba(255,255,255,.08);

    --text:#FFFFFF;

    --text-light:#C5D1E6;

    --radius:22px;

    --transition:.35s ease;

    --container:1320px;

    --shadow-lg:
    0 30px 80px rgba(0,0,0,.45);

}

/* =========================
   SELECTION
========================= */

::selection{

    background:var(--primary);

    color:#fff;

}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#07101E;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        180deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:100px;

}

/* =========================
   ELEMENTS
========================= */

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

img{

    display:block;

    max-width:100%;

}

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}

/* =========================
   CONTAINER
========================= */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/* =========================
   BACKGROUND
========================= */

body::before{

    content:"";

    position:fixed;

    top:-350px;

    left:50%;

    transform:translateX(-50%);

    width:1100px;

    height:1100px;

    background:

    radial-gradient(circle,
    rgba(79,140,255,.22),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    right:-250px;

    bottom:-250px;

    width:700px;

    height:700px;

    background:

    radial-gradient(circle,
    rgba(124,58,237,.18),
    transparent 70%);

    filter:blur(120px);

    pointer-events:none;

    z-index:-2;

}

.background-blur{

    display:none;

}

/* =========================
   TYPOGRAPHIE
========================= */

h1{

    font-size:76px;

    font-weight:900;

    line-height:1.05;

    letter-spacing:-2px;

}

h2{

    font-size:58px;

    line-height:1.08;

    font-weight:800;

    letter-spacing:-1px;

}

h3{

    font-size:24px;

    font-weight:700;

}

p{

    color:var(--text-light);

}

.gradient-text{

    background:

    linear-gradient(
        135deg,
        #60A5FA,
        #A855F7
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

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

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:17px 34px;

    border-radius:999px;

    transition:var(--transition);

    font-weight:700;

}

.btn-primary{

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    box-shadow:
    0 20px 50px rgba(79,140,255,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 30px 70px rgba(79,140,255,.45);

}

.btn-secondary{

    border:1px solid var(--border);

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(20px);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.08);

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 2 / 15
========================================================= */

/* =========================
   NAVBAR
========================= */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    padding:22px 0;

    background:rgba(5,8,22,.72);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    border-bottom:1px solid rgba(255,255,255,.06);

    transition:.35s ease;

}

.navbar .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

.logo{

    display:flex;

    align-items:center;

    gap:16px;

    user-select:none;

}

.logo-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-weight:800;

    font-size:20px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--secondary));

    box-shadow:
    0 20px 50px rgba(79,140,255,.35);

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-size:22px;

    font-weight:800;

    color:#fff;

}

.logo-subtitle{

    margin-top:2px;

    font-size:13px;

    color:var(--text-light);

}

/* =========================
   NAVIGATION
========================= */

.nav-links{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-links a{

    position:relative;

    color:var(--text-light);

    font-weight:600;

    transition:.35s;

}

.nav-links a:hover{

    color:#fff;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    border-radius:50px;

    background:
    linear-gradient(
    90deg,
    var(--primary),
    var(--secondary));

    transition:.35s;

}

.nav-links a:hover::after{

    width:100%;

}

.navbar-buttons{

    display:flex;

    align-items:center;

    gap:16px;

}

.navbar-buttons .btn-primary{

    padding:15px 28px;

}

.navbar-buttons .btn-secondary{

    padding:15px 28px;

}

/* =========================
   SECTION
========================= */

section{

    position:relative;

    padding:120px 0;

}

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    margin-bottom:24px;

    border-radius:999px;

    color:#fff;

    font-size:14px;

    font-weight:700;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.section-header h2{

    margin-bottom:24px;

}

.section-header p{

    font-size:20px;

    line-height:1.8;

}

/* =========================
   MINI TITRES
========================= */

.section-mini-title{

    text-align:center;

    margin-bottom:50px;

    font-size:18px;

    color:var(--text-light);

}

/* =========================
   TRANSITIONS
========================= */

.btn-primary,
.btn-secondary,
.nav-links a,
.logo-icon{

    transition:.35s ease;

}

.logo:hover .logo-icon{

    transform:rotate(-6deg) scale(1.05);

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 3 / 15
========================================================= */

/* =========================
   HERO
========================= */

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:180px;

    padding-bottom:120px;

}

.hero-container{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    align-items:center;

    gap:90px;

}

.hero-content{

    position:relative;

    z-index:2;

}

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

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:34px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.badge-dot{

    width:11px;

    height:11px;

    border-radius:50%;

    background:var(--success);

    box-shadow:
    0 0 18px var(--success);

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:.65;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

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

.hero-content h1{

    max-width:760px;

    margin-bottom:30px;

}

.hero-description{

    max-width:620px;

    font-size:21px;

    line-height:1.9;

    margin-bottom:45px;

}

/* =========================
   CTA
========================= */

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:70px;

}

.hero-btn{

    min-width:230px;

}

/* =========================
   STATS
========================= */

.hero-infos{

    display:flex;

    gap:55px;

}

.hero-info{

    display:flex;

    flex-direction:column;

}

.hero-info h3{

    font-size:42px;

    font-weight:800;

    margin-bottom:8px;

}

.hero-info span{

    color:var(--text-light);

}

/* =========================
   VISUEL
========================= */

.hero-visual{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.hero-visual::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(79,140,255,.28),
    transparent 70%);

    filter:blur(90px);

    z-index:-1;

}

.hero-visual::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.05);

    animation:rotateCircle 18s linear infinite;

}

@keyframes rotateCircle{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 4 / 15
========================================================= */

/* =========================
   SMARTPHONE
========================= */

.phone{

    position:relative;

    width:360px;

    height:720px;

    border-radius:42px;

    background:linear-gradient(
        180deg,
        #1D2437,
        #0B1224
    );

    border:1px solid rgba(255,255,255,.08);

    padding:16px;

    box-shadow:
    0 60px 120px rgba(0,0,0,.45),
    0 0 0 8px rgba(255,255,255,.03);

    overflow:hidden;

    animation:phoneFloat 5s ease-in-out infinite;

}

@keyframes phoneFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0px);

    }

}

.phone::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:120px;

    background:linear-gradient(
        rgba(255,255,255,.08),
        transparent
    );

}

.phone-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

    color:#fff;

    font-size:14px;

    font-weight:600;

}

.phone-status{

    display:flex;

    gap:8px;

}

.phone-screen{

    width:100%;

    height:640px;

    border-radius:30px;

    background:#F6F8FC;

    overflow:hidden;

    display:flex;

    flex-direction:column;

}

.phone-header{

    display:flex;

    align-items:center;

    gap:14px;

    padding:22px;

    background:#fff;

    border-bottom:1px solid #ECECEC;

}

.phone-header h3{

    color:#111827;

    font-size:18px;

}

.phone-header span{

    color:#16A34A;

    font-size:13px;

}

.assistant-avatar{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:800;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

}

/* =========================
   CHAT
========================= */

.chat-container{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:22px;

    overflow:hidden;

}

.message{

    max-width:82%;

    padding:16px 18px;

    border-radius:18px;

    font-size:15px;

    line-height:1.6;

}

.client{

    align-self:flex-start;

    background:#E8EEF9;

    color:#111827;

}

.assistant{

    align-self:flex-end;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.success{

    box-shadow:
    0 12px 25px rgba(79,140,255,.25);

}

/* =========================
   EMPLOYÉ VIRTUEL
========================= */

.employee-card{

    position:absolute;

    right:-40px;

    bottom:40px;

    width:340px;

    padding:28px;

    border-radius:28px;

    background:rgba(14,22,40,.88);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    box-shadow:var(--shadow-lg);

}

.employee-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-weight:700;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--success);

    box-shadow:0 0 12px var(--success);

}

.employee-card h3{

    margin-bottom:16px;

    line-height:1.4;

}

.employee-card p{

    margin-bottom:22px;

}

.employee-features{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.feature{

    display:flex;

    align-items:center;

    gap:14px;

}

.feature span{

    font-size:22px;

}

.feature p{

    margin:0;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 5 / 15
========================================================= */

/* =========================
   INTÉGRATIONS
========================= */

#integrations{

    padding-top:40px;

}

.integration-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:24px;

}

.integration-card{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:30px;

    text-align:center;

    backdrop-filter:blur(18px);

    transition:.35s;

}

.integration-card:hover{

    transform:translateY(-10px);

    border-color:rgba(79,140,255,.35);

    box-shadow:
    0 25px 60px rgba(0,0,0,.25);

}

.integration-icon{

    width:72px;

    height:72px;

    margin:0 auto 24px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:linear-gradient(
        135deg,
        rgba(79,140,255,.20),
        rgba(124,58,237,.20)
    );

}

.integration-card h3{

    margin-bottom:14px;

}

.integration-card p{

    font-size:15px;

    line-height:1.7;

}

/* =========================
   POURQUOI Noxaa
========================= */

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:70px;

}

.why-card{

    position:relative;

    padding:38px;

    border-radius:28px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

}

.why-card:hover{

    transform:translateY(-10px);

    border-color:rgba(79,140,255,.35);

    box-shadow:
    0 35px 80px rgba(0,0,0,.30);

}

.why-icon{

    width:72px;

    height:72px;

    margin-bottom:26px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
    0 20px 45px rgba(79,140,255,.30);

}

.why-card h3{

    margin-bottom:18px;

}

.why-card p{

    line-height:1.8;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 6 / 15
========================================================= */

/* =========================
   AVANT / APRÈS
========================= */

.comparison-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:36px;

    margin-top:70px;

}

.comparison-card{

    position:relative;

    padding:42px;

    border-radius:30px;

    overflow:hidden;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

}

.comparison-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 70px rgba(0,0,0,.30);

}

.before{

    border-left:5px solid #EF4444;

}

.after{

    border-left:5px solid #22C55E;

}

.comparison-title{

    font-size:28px;

    font-weight:800;

    margin-bottom:26px;

}

.comparison-card ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.comparison-card li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text-light);

    font-size:17px;

}

/* =========================
   WORKFLOW
========================= */

.timeline{

    display:flex;

    flex-direction:column;

    gap:34px;

    max-width:900px;

    margin:80px auto 0;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:34px;

    top:0;

    width:2px;

    height:100%;

    background:linear-gradient(
        var(--primary),
        var(--secondary)
    );

}

.timeline-item{

    display:flex;

    align-items:flex-start;

    gap:28px;

    position:relative;

}

.timeline-number{

    min-width:70px;

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:800;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
    0 20px 45px rgba(79,140,255,.35);

    z-index:2;

}

.timeline-item h3{

    margin-bottom:10px;

}

.timeline-item p{

    font-size:17px;

    line-height:1.8;

    max-width:620px;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 7 / 15
========================================================= */

/* =========================
   STATISTIQUES
========================= */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:70px;

}

.stat-card{

    position:relative;

    padding:42px 24px;

    text-align:center;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.025)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-12px);

    border-color:rgba(79,140,255,.35);

    box-shadow:
    0 35px 80px rgba(0,0,0,.28);

}

.stat-card h3{

    font-size:52px;

    font-weight:900;

    margin-bottom:12px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.stat-card p{

    font-size:17px;

}

/* =========================
   AVANTAGES
========================= */

.benefits-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

    margin-top:70px;

}

.benefit-card{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.05),
        rgba(255,255,255,.025)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

}

.benefit-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.06),
        transparent
    );

    transition:.7s;

}

.benefit-card:hover::before{

    left:100%;

}

.benefit-card:hover{

    transform:translateY(-10px);

    border-color:rgba(79,140,255,.35);

    box-shadow:
    0 35px 80px rgba(0,0,0,.30);

}

.benefit-icon{

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:22px;

    font-size:34px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
    0 20px 45px rgba(79,140,255,.30);

}

.benefit-card h3{

    margin-bottom:18px;

}

.benefit-card p{

    font-size:17px;

    line-height:1.8;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 8 / 15
========================================================= */

/* =========================
   FAQ
========================= */

.faq-container{

    max-width:950px;

    margin:70px auto 0;

    display:flex;

    flex-direction:column;

    gap:22px;

}

.faq-item{

    border-radius:24px;

    overflow:hidden;

    background:
    rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:30px 35px;

    color:#fff;

    font-size:19px;

    font-weight:700;

    cursor:pointer;

}

.faq-question::after{

    content:"+";

    font-size:28px;

    font-weight:300;

}

.faq-answer{

    padding:0 35px 30px;

}

.faq-answer p{

    line-height:1.9;

    font-size:17px;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 9 / 15
========================================================= */

/* =========================
   CTA
========================= */

.cta-card{

    position:relative;

    overflow:hidden;

    max-width:1150px;

    margin:auto;

    padding:90px 80px;

    text-align:center;

    border-radius:40px;

    background:
    linear-gradient(
        135deg,
        rgba(79,140,255,.16),
        rgba(124,58,237,.14)
    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(24px);

    box-shadow:
    0 40px 90px rgba(0,0,0,.30);

}

.cta-card::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-320px;

    right:-250px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(79,140,255,.25),
        transparent 70%
    );

    filter:blur(90px);

}

.cta-card h2{

    max-width:850px;

    margin:20px auto 30px;

}

.cta-card p{

    max-width:700px;

    margin:0 auto 45px;

    font-size:19px;

    line-height:1.9;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}

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

footer{

    margin-top:120px;

    padding:90px 0 50px;

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

}

.footer-container{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-brand p{

    max-width:420px;

    margin-top:26px;

    line-height:1.9;

}

.footer-links,
.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-links h4,
.footer-contact h4{

    margin-bottom:10px;

    font-size:20px;

    color:#fff;

}

.footer-links a,
.footer-contact a{

    color:var(--text-light);

    transition:.3s;

}

.footer-links a:hover,
.footer-contact a:hover{

    color:#fff;

}

/* =========================
   CONTACT
========================= */

.contact-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:70px;

}

.contact-card{

    padding:40px;

    text-align:center;

    border-radius:28px;

    background:
    rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-10px);

    border-color:rgba(79,140,255,.35);

    box-shadow:
    0 35px 80px rgba(0,0,0,.28);

}

.contact-icon{

    width:76px;

    height:76px;

    margin:0 auto 26px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:
    0 20px 45px rgba(79,140,255,.30);

}

.contact-card h3{

    margin-bottom:14px;

}

.contact-card a{

    color:var(--text-light);

    transition:.3s;

}

.contact-card a:hover{

    color:#fff;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 10 / 15
========================================================= */

/* =========================
   FINAL BANNER
========================= */

.final-banner{

    padding:140px 0;

    text-align:center;

}

.final-banner .container{

    max-width:900px;

}

.final-banner h2{

    margin-bottom:28px;

}

.final-banner p{

    font-size:20px;

    line-height:1.9;

    margin-bottom:45px;

}

/* =========================
   ESPACEMENTS
========================= */

section + section{

    margin-top:20px;

}

.section-header{

    margin-bottom:80px;

}

.section-header h2{

    max-width:900px;

    margin-left:auto;

    margin-right:auto;

}

.section-header p{

    max-width:760px;

    margin-left:auto;

    margin-right:auto;

}

/* =========================
   HOVER GLOBAL
========================= */

.integration-card,
.why-card,
.stat-card,
.benefit-card,
.contact-card,
.comparison-card{

    will-change:transform;

}

.integration-card:hover,
.why-card:hover,
.stat-card:hover,
.benefit-card:hover,
.contact-card:hover,
.comparison-card:hover{

    transform:
    translateY(-12px)
    scale(1.015);

}

/* =========================
   ANIMATION APPARITION
========================= */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* =========================
   OMBRES
========================= */

.phone,
.employee-card,
.video-placeholder,
.cta-card{

    box-shadow:

    0 50px 100px rgba(0,0,0,.35);

}

/* =========================
   GLASS
========================= */

.integration-card,
.why-card,
.stat-card,
.benefit-card,
.contact-card,
.employee-card,
.comparison-card,
.video-placeholder,
.cta-card{

    backdrop-filter:blur(24px);

    -webkit-backdrop-filter:blur(24px);

}

/* =========================
   FOCUS
========================= */

a:focus,
button:focus{

    outline:2px solid var(--primary);

    outline-offset:4px;

}

/* =========================
   FIN PARTIE 10
========================= */
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 11 / 15
   RESPONSIVE - TABLETTES
========================================================= */

@media (max-width:1200px){

    h1{

        font-size:64px;

    }

    h2{

        font-size:48px;

    }

    .hero-container{

        gap:60px;

    }

    .phone{

        width:330px;

        height:670px;

    }

    .employee-card{

        right:-20px;

        width:310px;

    }

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .integration-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media (max-width:992px){

    section{

        padding:100px 0;

    }

    .navbar .container{

        flex-wrap:wrap;

        justify-content:center;

        gap:25px;

    }

    .nav-links{

        order:3;

        width:100%;

        justify-content:center;

        gap:28px;

    }

    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        align-items:center;

    }

    .hero-description{

        max-width:700px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-infos{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-visual{

        margin-top:70px;

    }

    .employee-card{

        position:relative;

        right:auto;

        bottom:auto;

        margin:35px auto 0;

        width:100%;

        max-width:430px;

    }

    .why-grid{

        grid-template-columns:1fr;

    }

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .comparison-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand p{

        margin-left:auto;

        margin-right:auto;

    }

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 12 / 15
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width:768px){

    html{

        font-size:15px;

    }

    h1{

        font-size:46px;

        line-height:1.12;

    }

    h2{

        font-size:36px;

    }

    h3{

        font-size:22px;

    }

    section{

        padding:80px 0;

    }

    .navbar{

        padding:18px 0;

    }

    .navbar .container{

        flex-direction:column;

        gap:18px;

    }

    .logo{

        justify-content:center;

    }

    .nav-links{

        flex-wrap:wrap;

        justify-content:center;

        gap:18px;

    }

    .navbar-buttons{

        width:100%;

        flex-direction:column;

    }

    .navbar-buttons a{

        width:100%;

    }

    .hero-badge{

        width:100%;

        justify-content:center;

        text-align:center;

    }

    .hero-description{

        font-size:18px;

    }

    .hero-buttons{

        width:100%;

        flex-direction:column;

    }

    .hero-btn{

        width:100%;

    }

    .hero-infos{

        gap:25px;

    }

    .hero-info{

        flex:1;

    }

    .hero-info h3{

        font-size:34px;

    }

    .phone{

        width:300px;

        height:610px;

    }

    .phone-screen{

        height:535px;

    }

    .chat-container{

        padding:16px;

        gap:14px;

    }

    .message{

        font-size:14px;

        padding:14px 16px;

    }

    .employee-card{

        padding:24px;

    }

    .integration-grid{

        grid-template-columns:1fr;

    }

    .stats-grid{

        grid-template-columns:1fr;

    }

    .video-placeholder{

        min-height:420px;

        padding:40px 24px;

    }

    .play-button{

        width:90px;

        height:90px;

        font-size:34px;

    }

    .cta-card{

        padding:55px 30px;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .cta-buttons a{

        width:100%;

    }

}

@media (max-width:480px){

    .container{

        width:94%;

    }

    h1{

        font-size:38px;

    }

    h2{

        font-size:30px;

    }

    .phone{

        width:270px;

        height:560px;

    }

    .logo-title{

        font-size:19px;

    }

    .logo-subtitle{

        font-size:12px;

    }

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 13 / 15
   ANIMATIONS & MICRO-INTERACTIONS
========================================================= */

/* =========================
   TRANSITIONS GLOBALES
========================= */

*{

    transition:
    background .35s ease,
    color .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}

/* =========================
   APPARITION
========================= */

.fade{

    opacity:0;

    transform:translateY(50px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}

.fade.active{

    opacity:1;

    transform:translateY(0);

}

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

.btn-primary:active{

    transform:scale(.97);

}

.btn-secondary:active{

    transform:scale(.97);

}

/* =========================
   HERO
========================= */

.hero-content{

    animation:heroFade 1s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================
   PHONE
========================= */

.phone{

    transition:
    transform .45s ease,
    box-shadow .45s ease;

}

.phone:hover{

    transform:
    translateY(-18px)
    rotate(-2deg);

    box-shadow:

    0 70px 130px rgba(0,0,0,.40);

}

/* =========================
   EMPLOYEE CARD
========================= */

.employee-card{

    transition:
    transform .35s ease;

}

.employee-card:hover{

    transform:

    translateY(-8px)

    scale(1.02);

}

/* =========================
   LOGO
========================= */

.logo{

    transition:.35s ease;

}

.logo:hover{

    transform:translateY(-2px);

}

/* =========================
   TITRES
========================= */

.section-header h2{

    transition:.35s ease;

}

.section-header h2:hover{

    letter-spacing:-0.5px;

}

/* =========================
   LIENS
========================= */

a{

    transition:.3s ease;

}

/* =========================
   CARTES
========================= */

.integration-card,
.why-card,
.stat-card,
.benefit-card,
.contact-card,
.comparison-card,
.faq-item{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

}

/* =========================
   ICÔNES
========================= */

.integration-icon,
.benefit-icon,
.contact-icon,
.why-icon{

    transition:
    transform .35s ease;

}

.integration-card:hover .integration-icon,
.benefit-card:hover .benefit-icon,
.contact-card:hover .contact-icon,
.why-card:hover .why-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}

/* =========================
   SCROLL
========================= */

html{

    scroll-padding-top:110px;

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 14 / 15
   EFFETS PREMIUM
========================================================= */

/* =========================
   LUMIÈRES
========================= */

.hero::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(79,140,255,.22),
    transparent 70%);

    filter:blur(90px);

    z-index:-1;

}

.hero::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-180px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(124,58,237,.18),
    transparent 70%);

    filter:blur(90px);

    z-index:-1;

}

/* =========================
   GLOW
========================= */

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

}

.btn-primary:hover::before{

    left:150%;

    transition:.9s;

}

/* =========================
   GLASS
========================= */

.phone,
.employee-card,
.integration-card,
.why-card,
.stat-card,
.benefit-card,
.video-placeholder,
.contact-card,
.comparison-card,
.faq-item,
.cta-card{

    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );

}

/* =========================
   HOVER TITRES
========================= */

h1,
h2{

    transition:
    transform .35s ease;

}

h1:hover,
h2:hover{

    transform:translateY(-2px);

}

/* =========================
   FAQ
========================= */

.faq-item:hover{

    border-color:

    rgba(79,140,255,.30);

}

/* =========================
   PLAY BUTTON
========================= */

.play-button{

    position:relative;

}

.play-button::after{

    content:"";

    position:absolute;

    inset:-12px;

    border-radius:50%;

    border:2px solid

    rgba(79,140,255,.25);

    animation:ring 2.5s infinite;

}

@keyframes ring{

    0%{

        transform:scale(1);

        opacity:1;

    }

    100%{

        transform:scale(1.4);

        opacity:0;

    }

}

/* =========================
   IMAGES
========================= */

img{

    transition:
    transform .4s ease;

}

img:hover{

    transform:scale(1.03);

}

/* =========================
   SCROLLBAR PREMIUM
========================= */

::-webkit-scrollbar-thumb:hover{

    background:

    linear-gradient(
        180deg,
        #69A7FF,
        #9F67FF
    );

}
/* =========================================================
   Noxaa
   Style.css
   Version 1.0
   Partie 15 / 15
   FINITIONS & OPTIMISATIONS
========================================================= */

/* =========================
   ANIMATIONS FLOTTANTES
========================= */

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

.phone{

    animation:float 6s ease-in-out infinite;

}

/* =========================
   OMBRES PREMIUM
========================= */

.logo-icon,
.play-button,
.benefit-icon,
.integration-icon,
.contact-icon,
.why-icon,
.timeline-number{

    box-shadow:

    0 15px 45px rgba(79,140,255,.30);

}

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

.btn-primary:hover{

    filter:brightness(1.08);

}

.btn-secondary:hover{

    border-color:rgba(79,140,255,.45);

}

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

.footer-links a,
.footer-contact a{

    position:relative;

}

.footer-links a::after,
.footer-contact a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.footer-links a:hover::after,
.footer-contact a:hover::after{

    width:100%;

}

/* =========================
   PERFORMANCE
========================= */

.phone,
.integration-card,
.why-card,
.stat-card,
.benefit-card,
.contact-card,
.employee-card,
.comparison-card,
.video-placeholder{

    will-change:transform;

}

/* =========================
   SÉLECTION DES CHAMPS
========================= */

input,
textarea{

    width:100%;

    padding:16px 20px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    color:#fff;

    outline:none;

    transition:.3s;

}

input:focus,
textarea:focus{

    border-color:var(--primary);

    box-shadow:

    0 0 0 4px rgba(79,140,255,.15);

}

/* =========================
   PETITES OPTIMISATIONS
========================= */

.hero-content,
.hero-visual,
.section-header,
.integration-card,
.why-card,
.stat-card,
.benefit-card,
.contact-card{

    position:relative;

    z-index:2;

}
.contact-form{
    max-width:620px;
    margin:60px auto 0;
    padding:40px;
    background:#ffffff;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.contact-form h3{
    text-align:center;
    margin-bottom:25px;
    font-size:32px;
    color:#111827;
}

.contact-form form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:16px 20px;
    border:1px solid #ddd;
    border-radius:12px;
    font-size:16px;
    font-family:inherit;
    color: #222;
    caret-color: #222;
}

.contact-form textarea{
    resize:vertical;
    min-height:170px;
}

.contact-form button{
    width:100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#6b7280;
}

.contact-form{
    margin-top:80px;
}

.contact-subtitle{
    text-align:center;
    color:#6b7280;
    margin-bottom:30px;
    font-size:16px;
}

/* =========================
   FIN DU FICHIER
========================= */

/* =========================================================
   VERSION MOBILE NOXAA V3 FINAL
========================================================= */

@media (max-width:768px){

html{
    font-size:15px;
}

/* ================= HERO ================= */

#hero{
    min-height:auto;
    padding:70px 0 55px;
}

.hero-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
    padding:0 20px;
}

.hero-content{
    width:100%;
    text-align:center;
}

.hero-badge{
    margin:0 auto 16px;
}

.hero-content h1{

    font-size:2.2rem;
    line-height:1.15;
    margin-bottom:18px;

}

.hero-description{

    font-size:1rem;
    line-height:1.7;
    margin:0 auto 28px;
    max-width:100%;

}

/* Cache les boutons du Hero */

.hero-buttons{

    display:none;

}

/* ================= TELEPHONE ================= */

.hero-visual{

    width:100%;
    display:flex;
    justify-content:center;
    margin-top:5px;

}

.phone{

    width:295px;
    height:495px;

    border-radius:34px;

}

.phone-screen{

    height:432px;

}

/* ================= EMPLOYE ================= */

.employee-card{

    width:215px;

    right:-8px;

    bottom:-12px;

    padding:18px;

}

.employee-card h3{

    font-size:1rem;

}

.employee-card p{

    font-size:.84rem;

}

/* ================= FEATURES ================= */

.feature span{

    font-size:18px;

}

.feature p{

    font-size:.82rem;

}

/* ================= AUTRES ================= */

section{

    padding-left:22px;
    padding-right:22px;

}

.stats,
.features,
.contact-container{

    grid-template-columns:1fr;

}

img{

    max-width:100%;
    height:auto;

}

}