:root{
    --green:#1b6a4b;
    --text:#1f2245;
    --muted:#6b7280;
    --light:#f5f6f8;
    --radius:.75rem;
    --transition:.25s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /**transition-duration: 300ms;**/
}

body{
    font-family:'Inter',sans-serif;
    background:#f4f5f7;
    color:var(--text);
    overflow-x: hidden;
    width: 100%;
}

.container{
    width:90%;
    max-width:75rem;
    margin:auto;
}

/* HEADER */

header{
    width:100%;
    padding:1.2rem 0;
}

.nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    display:flex;
    align-items:center;
    gap:.5rem;
    font-weight:600;
    font-size:1.1rem;
}


nav ul{
    display:flex;
    list-style:none;
    gap:2rem;
    align-items:center;
}

nav li{
    position:relative;
    font-size:.9rem;
    cursor:pointer;
}

nav li:hover{
    color:var(--green);
}

/* ===============================
MEGA MENU — FIX HOVER + PREMIUM UI
================================ */

/* parent nav item */
nav li{
    position:relative;
    transition-duration: 300ms;
}

/* container */
.mega-menu{
    position:absolute;
    top:calc(100% + 1rem);
    left:50%;
    transform:translateX(-50%) translateY(10px);
    width:46rem;
    padding:1.8rem;
    background:#ffffff;
    border-radius:1rem;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 25px 60px rgba(0,0,0,0.08);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:all .25s cubic-bezier(.4,.0,.2,1);
    z-index:50;
}
nav li a{
    text-decoration: none;
    color: currentColor ;
    font-weight: 600;

}
/* hover state */
nav li:hover .mega-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

/* small hover bridge to prevent flicker */
nav li::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:20px;
}

/* grid */
.mega-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
    margin-bottom:1.4rem;
}

/* card */
.mega-card{
    display:flex;
    flex-direction:column;
    gap:.45rem;
    padding:1rem 1rem;
    border-radius:.7rem;
    background:#ffffff;
    border:1px solid rgba(0,0,0,0.04);
    transition:all .18s ease;
    cursor:pointer;
}

/* hover */
.mega-card:hover{
    background:#f7f9fa;
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* icon */
.mega-icon{
    font-size:1.3rem;
    color:#111827;
    margin-bottom:.25rem;
}

/* title */
.mega-card h4{
    font-size:.9rem;
    font-weight:600;
    color:#111827;
}

/* description */
.mega-card p{
    font-size:.75rem;
    line-height:1.4;
    color:#6b7280;
}

/* bottom CTA */
.mega-cta{
    margin-top:.4rem;
    padding-top:1rem;
    border-top:1px solid rgba(0,0,0,0.06);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.mega-cta span{
    font-size:.8rem;
    color:#6b7280;
}

.mega-cta a{
    font-size:.8rem;
    font-weight:600;
    color:#111827;
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.4rem;
}

.mega-cta a i{
    font-size:.7rem;
    transition:transform .15s ease;
}

.mega-cta a:hover i{
    transform:translateX(4px);
}


.actions{
    display:flex;
    align-items:center;
    gap:1.2rem;
}

.signup{
    font-size:.9rem;
    cursor:pointer;
    color: #111827;
    text-decoration: none;
    font-weight: 600;
}

.signin{
    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);
    color:white;
    padding:.55rem 1.1rem;
    border-radius:.6rem;
    font-size:.85rem;
    text-decoration: none;
    font-weight: 600;
}

/* HERO */

.hero{
    padding:6rem 0 4rem 0;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:4rem;
    align-items:center;
}

.hero h1{
    font-size:4rem;
    font-weight:800;
    line-height:1.1;
    color: #104231;
}
.hero h1 strong, h2 strong {
    background: #104231;
    color: #fff;
    padding: 0 50px;
    clip-path: polygon(3% 0, 100% 0, 97% 100%, 0% 100%);
}
h2 strong{
    padding: 0 15px;
}
.hero-text{
    font-size:1.1rem;
    color:var(--muted);
    line-height:1.6;
    margin-bottom:1.6rem;
}

.hero-buttons{
    display:flex;
    gap:1rem;
}
/* ===============================
OXL MARQUEE — VERSION IMPACT
================================ */

.oxl-marquee{
    position:relative;
    width:110%;
    margin-left:-5%;
    overflow:hidden;
    background:#f3f4f6;
    border-top:1px solid rgba(0,0,0,0.04);
    border-bottom:1px solid rgba(0,0,0,0.04);
    padding:22px 0;

    transform:rotate(-3deg);
}

/* fade edges pour masquer la boucle */

.oxl-marquee::before,
.oxl-marquee::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.oxl-marquee::before{
    left:0;
    background:linear-gradient(
            to right,
            #f3f4f6 0%,
            rgba(243,244,246,0) 100%
    );
}

.oxl-marquee::after{
    right:0;
    background:linear-gradient(
            to left,
            #f3f4f6 0%,
            rgba(243,244,246,0) 100%
    );
}


/* TRACK */

.oxl-marquee-track{
    display:flex;
    gap:56px;
    width:max-content;
    animation:oxl-marquee-scroll 60s linear infinite;
}

/* ITEM */

.oxl-marquee-item{
    display:flex;
    align-items:center;
    gap:12px;

    font-size:16px;
    font-weight:600;
    color:#374151;
    white-space:nowrap;

    letter-spacing:.2px;
}

/* ICON */

.oxl-marquee-item i{
    color:#165b3a;
    font-size:15px;
}
.oxl-marquee-item i{
    display:flex;
    align-items:center;
    justify-content:center;

    width:28px;
    height:28px;

    border-radius:8px;

    background:rgba(22,91,58,0.08);
    color:#165b3a;

    font-size:14px;

    box-shadow:0 2px 6px rgba(0,0,0,0.05);

    transition:all .2s ease;
}

/* effet hover léger */
.oxl-marquee-item:hover i{
    background:#165b3a;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
/* ===============================
SECTION FEATURES
=============================== */

.features-section{
    position:relative;
    margin-top:120px;
    padding:140px 0;
    overflow:hidden;

    clip-path:polygon(
            0 6%,
            100% 0,
            100% 94%,
            0 100%
    );
    background: linear-gradient(
            95deg,
            #ffffff 0%,
            #ffffff 48.5%,
            #165b3a 51.5%,
            #165b3a 100%
    );
}


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

.features-container{
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 200px 1fr;
    gap: 80px;
    padding: 0 40px;
}


/* ===============================
TITLES
=============================== */

.features-col h2{
    font-size:2.6rem;
    font-weight:800;
    margin-bottom:34px;
    letter-spacing:-0.02em;
    position:relative;
    z-index:5;
}

.features-client h2{
    color:#ffffff;
}
.phone-features{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    pointer-events:none;
    padding:20px 0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:20;
}

.phone-features-number,
.phone-features-label{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* ===============================
LIST WRAPPER
=============================== */

.features-list-wrapper{
    max-height:440px;
    overflow:hidden;
    position:relative;
}


/* ===============================
LIST
=============================== */

.features-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;

    animation:featureScroll 45s linear infinite;
}


/* ===============================
FEATURE ITEM
=============================== */

.features-list li{

    display:flex;
    align-items:center;
    gap:14px;

    font-size:.98rem;
    font-weight:500;

    padding:10px 14px;

    border-radius:10px;

    transition:.2s ease;
}


/* ===============================
COACH STYLE
=============================== */

.features-coach li{

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

    color:#1f2937;
}

.features-coach li:hover{
    background:rgba(0,0,0,0.06);
}


/* ===============================
CLIENT STYLE
=============================== */

.features-client li{

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

    color:#ffffff;
}

.features-client li:hover{
    background:rgba(255,255,255,0.16);
}


/* ===============================
ICONS
=============================== */

.features-coach i{

    width:32px;
    height:32px;

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

    border-radius:8px;

    background:#eef2f1;

    color:#165b3a;

    font-size:13px;
}

.features-client i{

    width:32px;
    height:32px;

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

    border-radius:8px;

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

    color:#ffffff;

    font-size:13px;
}


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

@keyframes featureScroll{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-50%);
    }

}


/* ===============================
FADE TOP / BOTTOM
=============================== */

.features-list-wrapper::before,
.features-list-wrapper::after{

    content:"";
    position:absolute;

    left:0;
    width:100%;
    height:80px;

    pointer-events:none;
    z-index:3;
}

.features-list-wrapper::before{
    top:0;
}

.features-list-wrapper::after{
    bottom:0;
}


/* coach fade */

.features-coach .features-list-wrapper::before{
    background:linear-gradient(to bottom,#ffffff,transparent);
}

.features-coach .features-list-wrapper::after{
    background:linear-gradient(to top,#ffffff,transparent);
}


/* client fade */

.features-client .features-list-wrapper::before{
    background:linear-gradient(to bottom,#165b3a,transparent);
}

.features-client .features-list-wrapper::after{
    background:linear-gradient(to top,#165b3a,transparent);
}
/* ===============================
TITRES
=============================== */

.features-col h2{
    font-size:2.6rem;
    font-weight:800;
    letter-spacing:-0.02em;

    margin-bottom:6px; /* très peu d'espace avec le texte */
}

/* coach */

.features-coach h2{
    color:#111827;
}

/* client */

.features-client h2{
    color:#ffffff;
}


/* ===============================
TEXTE SOUS TITRE
=============================== */

.features-sub{
    font-size:1rem;
    line-height:1.55;
    font-weight:400;

    margin-bottom:32px;
    max-width:420px;
}

/* côté coach */

.features-coach .features-sub{
    color:#4b5563;
}

/* côté client */

.features-client .features-sub{
    color:rgba(255,255,255,0.9);
}


/* ===============================
MARGES COLONNES
=============================== */

.features-col{
    padding:0 20px;
}
/* LOOP INFINITE PARFAITE */

@keyframes oxl-marquee-scroll{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

.mockup-section{
    padding: 0px 0 80px;
    display: flex;
    justify-content: center;
    z-index: 9;
    position: relative;
    margin-top: 50px
}

.mockup-wrapper{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:60px;
    max-width:1100px;
    width:100%;
}

/* PHONE */

.phone{
    position:relative;
    width:260px;
    transition:transform .4s ease;
}

/* phone middle */

.phone-center{
    --phone-y:-180px;
    --phone-scale:1.05;
    transform:translateY(var(--phone-y)) scale(var(--phone-scale));
    z-index:3;
    will-change:transform;
}

/* phones side */



/* FRAME */

.phone-frame{
    background:rgb(246,246,246);
    border-radius:38px;
    padding:12px;
    box-shadow:
            0 30px 60px rgba(0,0,0,0.15),
            0 10px 20px rgba(0,0,0,0.08);
}

/* SCREEN */

.phone-screen{
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    aspect-ratio:9/19;
    display:flex;
}

.phone-screen img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* notch simple */

.phone-frame::before{
    content:"";
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:80px;
    height:18px;
    background:rgba(17,17,17,0.25);
    border-radius:12px;
}
.phone-features{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    pointer-events:none;
    padding:20px 0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;
}

.phone-features-number{
    font-size:4.2rem;
    font-weight:900;
    color:#184d3b;
    line-height:1;
    letter-spacing:-0.04em;

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

    margin-bottom:4px;
    white-space:nowrap;
}

.phone-features-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:2.8rem;
    padding:0 2.8rem;

    background:#104231;
    color:#fff;

    font-size:1.2rem;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
    white-space:nowrap;
    clip-path:polygon(3% 0, 100% 0, 97% 100%, 0% 100%);
}











.oxl-section{
    position:relative;
    padding:8rem 0;
}

.oxl-section-head{
    max-width:48rem;
    text-align:center;
    margin:0 auto 3.5rem;
}

.oxl-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:2rem;
    padding:0 .9rem;
    margin-bottom:1rem;
    border-radius:999px;
    background:rgba(27,106,75,.08);
    color:#165b3a;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.oxl-kicker-light{
    background:rgba(255,255,255,.12);
    color:#fff;
}

.oxl-section-head h2{
    font-size:3rem;
    line-height:1.05;
    letter-spacing:-.03em;
    color:#111827;
    margin-bottom:1rem;
}

.oxl-section-head p{
    font-size:1.05rem;
    line-height:1.7;
    color:#6b7280;
}

/* WHY */
.oxl-why{
    padding-top:4rem;
}

.oxl-why-grid{
    display:flex;
    gap:1.5rem;
}

.oxl-why-card{
    flex:1;
    min-height:18rem;
    padding:2rem;
    border-radius:1.5rem;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(17,24,39,.06);
    box-shadow:0 1.25rem 3.5rem rgba(17,24,39,.05);
    transition:transform .25s ease, box-shadow .25s ease;
}

.oxl-why-card:hover{
    transform:translateY(-.3rem);
    box-shadow:0 1.5rem 3.5rem rgba(17,24,39,.09);
}

.oxl-why-card-featured{
    background:linear-gradient(145deg,#104231,#1b6a4b);
    color:#fff;
}

.oxl-why-card-featured p,
.oxl-why-card-featured h3{
    color:#fff!important;
}

.oxl-why-icon{
    width:3.25rem;
    height:3.25rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:1rem;
    margin-bottom:1.5rem;
    background:rgba(27,106,75,.09);
    color:#165b3a;
    font-size:1.15rem;
}

.oxl-why-card-featured .oxl-why-icon{
    background:rgba(255,255,255,.12);
    color:#fff;
}

.oxl-why-card h3{
    font-size:1.45rem;
    line-height:1.15;
    color:#111827;
    margin-bottom:.9rem;
}
.oxl-section.oxl-mobile-app {
    padding: 5rem;
    padding-right: 0;
    background: linear-gradient( 95deg, #fff 0%, #fff 46%, #f5faf8 49%, #e6f2ed 50%, #1b6a4b 54%, #0f3d2e 100% );
}
.oxl-why-card p{
    font-size:.98rem;
    line-height:1.7;
    color:#6b7280;
}

/* DEMO */
.oxl-demo{
    padding-top: 5rem;
    box-shadow: 0 0 10px #00000012;
}

.oxl-demo-grid{
    display:flex;
    align-items:end;
    gap:4rem;
}

.oxl-demo-copy{
    flex:1;
    max-width:34rem;
}

.oxl-demo-copy h2{
    font-size:3rem;
    line-height:1.05;
    letter-spacing:-.03em;
    color:#111827;
    margin-bottom:1rem;
}

.oxl-demo-copy p{
    font-size:1.05rem;
    line-height:1.7;
    color:#6b7280;
    margin-bottom:2rem;
}

.oxl-demo-list{
    display:flex;
    flex-direction:column;
    gap:.85rem;
}

.oxl-demo-item{
    width:100%;
    border:none;
    background:rgba(255,255,255,.74);
    border:1px solid rgba(17,24,39,.06);
    border-radius:1rem;
    padding:1rem 1.1rem;
    display:flex;
    align-items:flex-start;
    gap:1rem;
    text-align:left;
    cursor:pointer;
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
    box-shadow:0 .8rem 1.8rem rgba(17,24,39,.04);
}

.oxl-demo-item:hover,
.oxl-demo-item.is-active{
    transform:translateX(.25rem);
    background:#fff;
    box-shadow:0 1rem 2rem rgba(17,24,39,.08);
}

.oxl-demo-item-icon{
    width:2.7rem;
    height:2.7rem;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:.9rem;
    background:rgba(27,106,75,.1);
    color:#165b3a;
    font-size:1rem;
}

.oxl-demo-item strong{
    display:block;
    font-size:1rem;
    line-height:1.25;
    color:#111827;
    margin-bottom:.2rem;
}

.oxl-demo-item small{
    display:block;
    font-size:.86rem;
    line-height:1.55;
    color:#6b7280;
}

.oxl-demo-visual{
    flex:1;
    min-height:38rem;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.oxl-demo-glow{
    position:absolute;
    width:24rem;
    height:24rem;
    border-radius:50%;
    background:radial-gradient(circle,rgba(27,106,75,.16) 0%,rgba(27,106,75,0) 70%);
    filter:blur(1rem);
}

.oxl-demo-phone{
    position:relative;
    z-index:2;
}

.oxl-demo-phone-shell{
    width:19rem;
    padding:.85rem;
    border-radius:2.3rem;
    background:#f5f6f8;
    box-shadow:0 2rem 4rem rgba(17,24,39,.12), 0 .7rem 1.4rem rgba(17,24,39,.06);
    position:relative;
}

.oxl-demo-phone-notch{
    position:absolute;
    top:.8rem;
    left:50%;
    transform:translateX(-50%);
    width:5rem;
    height:1.1rem;
    border-radius:999px;
    background:rgba(17,24,39,.2);
}

.oxl-demo-phone-screen{
    border-radius:1.8rem;
    overflow:hidden;
    background:#fff;
    padding:1rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.oxl-demo-app-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.oxl-demo-chip{
    min-height:1.8rem;
    padding:0 .8rem;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    background:rgba(27,106,75,.1);
    color:#165b3a;
    font-size:.78rem;
    font-weight:700;
}

.oxl-demo-dot{
    width:.65rem;
    height:.65rem;
    border-radius:50%;
    background:#165b3a;
}

.oxl-demo-app-card{
    padding:1.2rem;
    border-radius:1.35rem;
    background:linear-gradient(145deg,#104231,#1b6a4b);
    color:#fff;
}

.oxl-demo-app-card strong{
    display:block;
    font-size:1.15rem;
    margin-bottom:.2rem;
}

.oxl-demo-app-card p{
    color:rgba(255,255,255,.78);
    font-size:.9rem;
    margin-bottom:1rem;
}

.oxl-demo-bars{
    display:flex;
    gap:.55rem;
    align-items:flex-end;
    height:4.5rem;
}

.oxl-demo-bars span{
    width:1.15rem;
    border-radius:.6rem;
    background:rgba(255,255,255,.92);
}

.oxl-demo-bars span:nth-child(1){height:45%}
.oxl-demo-bars span:nth-child(2){height:72%}
.oxl-demo-bars span:nth-child(3){height:58%}
.oxl-demo-bars span:nth-child(4){height:88%}

.oxl-demo-app-grid{
    display:flex;
    flex-wrap:wrap;
    gap:.8rem;
}

.oxl-demo-mini-card{
    flex:1 1 calc(50% - .4rem);
    padding:1rem;
    border-radius:1.15rem;
    background:#f6f7f8;
}

.oxl-demo-mini-card small{
    display:block;
    font-size:.74rem;
    color:#6b7280;
    margin-bottom:.35rem;
}

.oxl-demo-mini-card strong{
    font-size:1.1rem;
    color:#111827;
}

.oxl-demo-mini-card-large{
    flex:1 1 100%;
}

.oxl-demo-line{
    margin-top:.5rem;
    height:4.5rem;
    border-radius:.8rem;
    background:
            linear-gradient(transparent 96%, rgba(17,24,39,.06) 96%),
            linear-gradient(135deg, transparent 12%, #1b6a4b 12%, #1b6a4b 18%, transparent 18%, transparent 34%, #1b6a4b 34%, #1b6a4b 40%, transparent 40%, transparent 60%, #1b6a4b 60%, #1b6a4b 66%, transparent 66%);
    background-size:100% 1.1rem, 100% 100%;
    background-repeat:repeat-y, no-repeat;
}

.oxl-demo-app-bottom{
    margin-top:auto;
    display:flex;
    justify-content:space-around;
    padding-top:.7rem;
    border-top:1px solid rgba(17,24,39,.06);
}

.oxl-demo-app-bottom span{
    width:1.2rem;
    height:1.2rem;
    border-radius:.4rem;
    background:#d9dde1;
}

.oxl-demo-app-bottom span.is-active{
    background:#165b3a;
}

/* BUSINESS */
.oxl-business{
    padding-top:5rem;
    background: linear-gradient(135deg,#0f3d2e,#1b6a4b);
}
.oxl-business .oxl-kicker{
    background: rgb(255, 255, 255);
}
.oxl-business h2, .oxl-business p{
    color:#fff;
}
.oxl-business-grid{
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
}

.oxl-business-card{
    flex:1 1 calc(33.333% - .8rem);
    min-width:16rem;
    padding:1.45rem;
    border-radius:1.3rem;
    background: rgb(255, 255, 255);
    border:1px solid rgba(17,24,39,.06);
    box-shadow:0 1rem 2rem rgba(17,24,39,.04);
    transition:transform .22s ease, box-shadow .22s ease;
}

.oxl-business-card:hover{
    transform:translateY(-.25rem);
    box-shadow:0 1.2rem 2.2rem rgba(17,24,39,.08);
}

.oxl-business-card-icon{
    width:2.9rem;
    height:2.9rem;
    border-radius:.95rem;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1rem;
    background:rgba(27,106,75,.1);
    color:#165b3a;
}

.oxl-business-card h3{
    font-size:1.18rem;
    color:#111827;
    margin-bottom:.5rem;
}

.oxl-business-card p{
    font-size:.94rem;
    line-height:1.65;
    color:#6b7280;
}

/* STATS */
.oxl-stats{
    padding-top:5rem;
    padding-bottom:5rem;
}

.oxl-stats-grid{
    display:flex;
    gap:1rem;
}

.oxl-stat-card{
    flex:1;
    min-height:11rem;
    border-radius:1.5rem;
    padding:2rem 1.5rem;
    background:linear-gradient(145deg,#104231,#1b6a4b);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    box-shadow:0 1.4rem 3.2rem rgba(16,66,49,.18);
}

.oxl-stat-card strong{
    font-size:3rem;
    line-height:1;
    letter-spacing:-.04em;
    margin-bottom:.55rem;
}

.oxl-stat-card span{
    font-size:1rem;
    color:rgba(255,255,255,.82);
}

/* TESTIMONIALS */
.oxl-testimonials{
    padding-top:0;
}

.oxl-testimonials-grid{
    display:flex;
    gap:1.25rem;
}

.oxl-testimonial-card{
    flex:1;
    padding:1.8rem;
    border-radius:1.4rem;
    background:#fff;
    border:1px solid rgba(17,24,39,.06);
    box-shadow:0 1rem 2.2rem rgba(17,24,39,.05);
}

.oxl-testimonial-card-featured{
    background:linear-gradient(145deg,#104231,#1b6a4b);
}

.oxl-testimonial-card-featured p,
.oxl-testimonial-card-featured strong,
.oxl-testimonial-card-featured span,
.oxl-testimonial-card-featured .oxl-testimonial-stars{
    color:#fff;
}

.oxl-testimonial-stars{
    font-size:.95rem;
    letter-spacing:.16em;
    color:#165b3a;
    margin-bottom:1rem;
}

.oxl-testimonial-card p{
    font-size:1rem;
    line-height:1.8;
    color:#4b5563;
    min-height:8.5rem;
}

.oxl-testimonial-author{
    display:flex;
    align-items:center;
    gap:.8rem;
    margin-top:1.2rem;
}

.oxl-testimonial-avatar{
    width:3rem;
    height:3rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(27,106,75,.1);
    color:#165b3a;
    font-weight:800;
}

.oxl-testimonial-author strong{
    display:block;
    color:#111827;
    font-size:.98rem;
    margin-bottom:.15rem;
}

.oxl-testimonial-author span{
    color:#6b7280;
    font-size:.88rem;
}
/* CALCULATOR CONTAINER */

.oxl-pricing-calculator{

    margin-top:40px;

    padding:40px;

    border-radius:20px;

    background:linear-gradient(135deg,#f7faf9,#eef6f3);

    border:1px solid #e4ece8;

    box-shadow:
            0 20px 40px rgba(0,0,0,0.06),
            0 5px 15px rgba(0,0,0,0.04);

}


/* GRID INPUT */

.oxl-calculator-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    margin-bottom:35px;

}


/* FIELD */

.oxl-calculator-field{

    display:flex;
    flex-direction:column;
    gap:8px;

}

.oxl-calculator-field label{

    font-size:13px;
    font-weight:600;

    color:#0f3d2e;

    opacity:.75;

}


/* INPUT STYLE */

.oxl-calculator-field input{

    padding:14px 16px;

    border-radius:10px;

    border:1px solid #d6e3de;

    font-size:18px;
    font-weight:700;

    background:#ffffff;

    transition:all .2s ease;

    box-shadow:0 4px 10px rgba(0,0,0,0.03);

}

.oxl-calculator-field input:focus{

    outline:none;

    border-color:#1b6a4b;

    box-shadow:
            0 0 0 3px rgba(27,106,75,0.15);

}


/* RESULTS GRID */

.oxl-calculator-results{

    display:grid;

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

    gap:20px;

}


/* RESULT CARD */

.oxl-calculator-result{

    background:#ffffff;

    padding:22px;

    border-radius:14px;

    text-align:center;

    border:1px solid #e6eeea;

    transition:.2s;

    box-shadow:
            0 10px 20px rgba(0,0,0,0.05);

}

.oxl-calculator-result:hover{

    transform:translateY(-3px);

    box-shadow:
            0 18px 35px rgba(0,0,0,0.08);

}


/* LABEL */

.oxl-result-label{

    display:block;

    font-size:12px;

    letter-spacing:.4px;

    color:#6b7280;

    margin-bottom:6px;

}


/* VALUE */

.oxl-calculator-result strong{

    font-size:26px;

    font-weight:800;

    color:#0f3d2e;

}


/* HIGHLIGHT RESULT */

.oxl-calculator-result:nth-child(2){

    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);

    color:#fff;

}

.oxl-calculator-result:nth-child(2) strong{

    color:#ffffff;
    font-size:32px;

}

.oxl-calculator-result:nth-child(2) .oxl-result-label{

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

}


/* RESPONSIVE */

@media (max-width:800px){

    .oxl-calculator-grid{
        grid-template-columns:1fr;
    }

    .oxl-calculator-results{
        grid-template-columns:1fr;
    }

}/* ROI CARD */

.oxl-calculator-roi{

    margin-top:28px;

    display:flex;
    align-items:center;
    gap:16px;

    padding:22px 26px;

    border-radius:14px;

    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);

    color:#fff;

    box-shadow:
            0 20px 40px rgba(0,0,0,0.12),
            0 6px 15px rgba(0,0,0,0.08);

    transition:.25s;

}

.oxl-calculator-roi:hover{

    transform:translateY(-2px);

    box-shadow:
            0 28px 50px rgba(0,0,0,0.18);

}


/* ICON */

.oxl-roi-icon{

    width:46px;
    height:46px;

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

    border-radius:12px;

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

    font-size:18px;

}


/* TEXT */

.oxl-roi-title{

    display:block;

    font-weight:700;

    font-size:15px;

    margin-bottom:2px;

}

.oxl-roi-text{

    font-size:14px;

    opacity:.9;

}

.oxl-roi-text strong{

    color:#ffffff;
    font-weight:700;

}


/* RESPONSIVE */

@media (max-width:800px){

    .oxl-calculator-roi{
        flex-direction:column;
        text-align:center;
    }

}
/* MOBILE APP */
.oxl-mobile-grid{
    gap: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5vw;
    padding-right: 0vw;
}

.oxl-mobile-copy{
    flex:1;
    max-width:34rem;
}

.oxl-mobile-copy h2{
    font-size:3rem;
    line-height:1.05;
    letter-spacing:-.03em;
    color:#111827;
    margin-bottom:1rem;
}

.oxl-mobile-copy p{
    font-size:1.05rem;
    line-height:1.7;
    color:#6b7280;
    margin-bottom:1.5rem;
}

.oxl-mobile-points{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.85rem;
    margin-bottom:2rem;
}

.oxl-mobile-points li{
    display:flex;
    align-items:center;
    gap:.8rem;
    color:#111827;
    font-weight:500;
}

.oxl-mobile-points i{
    width:1.8rem;
    height:1.8rem;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(27,106,75,.1);
    color:#165b3a;
    font-size:.8rem;
}

.oxl-mobile-store{
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
}

.oxl-store-badge{
    min-width:11rem;
    padding:.9rem 1rem;
    border-radius:1rem;
    background:#fff;
    border:1px solid rgba(17,24,39,.06);
    box-shadow:0 .8rem 1.8rem rgba(17,24,39,.05);
    text-decoration:none;
    display:flex;
    align-items:center;
    gap:.85rem;
    color:#111827;
    transition:transform .22s ease, box-shadow .22s ease;
}

.oxl-store-badge:hover{
    transform:translateY(-.2rem);
    box-shadow:0 1rem 2rem rgba(17,24,39,.08);
}

.oxl-store-badge i{
    font-size:1.4rem;
    color:#165b3a;
}

.oxl-store-badge small{
    display:block;
    font-size:.72rem;
    color:#6b7280;
    margin-bottom:.12rem;
}

.oxl-store-badge strong{
    font-size:.98rem;
}

.oxl-mobile-visual{
    flex:0 0 auto;
    display:flex;
    justify-content:center;
    max-width: 260px;
}
.oxl-mobile-visual .phone-frame:before{
    content:inherit;
}
.oxl-mobile-phone-shell{
    width:18rem;
    padding:.8rem;
    border-radius:2.3rem;
    background:#f5f6f8;
    box-shadow:0 1.8rem 4rem rgba(17,24,39,.12);
    position:relative;
}

.oxl-mobile-phone-notch{
    position:absolute;
    top:.8rem;
    left:50%;
    transform:translateX(-50%);
    width:5rem;
    height:1.1rem;
    border-radius:999px;
    background:rgba(17,24,39,.2);
}

.oxl-mobile-phone-screen{
    min-height:36rem;
    border-radius:1.8rem;
    overflow:hidden;
    background:#fff;
    padding:1rem;
}

.oxl-mobile-header{
    display:flex;
    justify-content:center;
    padding:.2rem 0 1rem;
}

.oxl-mobile-header strong{
    font-size:1rem;
    color:#111827;
}

.oxl-mobile-progress-card{
    min-height:13rem;
    border-radius:1.4rem;
    background:linear-gradient(145deg,#104231,#1b6a4b);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    margin-bottom:1rem;
}

.oxl-mobile-progress-card small{
    color:rgba(255,255,255,.8);
    margin-bottom:.45rem;
}

.oxl-mobile-progress-card strong{
    font-size:2.8rem;
    line-height:1;
}

.oxl-mobile-progress-ring{
    position:absolute;
    inset:1.1rem;
    border-radius:50%;
    border:.65rem solid rgba(255,255,255,.12);
    border-top-color:rgba(255,255,255,.92);
    border-right-color:rgba(255,255,255,.92);
    mask:radial-gradient(circle, transparent 56%, #000 57%);
}

.oxl-mobile-list{
    display:flex;
    flex-direction:column;
    gap:.8rem;
}

.oxl-mobile-list-item{
    height:4.7rem;
    border-radius:1.05rem;
    background:#f5f6f8;
}

/* PRICING */
.oxl-pricing{
    padding-block:5rem;
}

.oxl-pricing-grid{
    display:flex;
    gap:1.25rem;
    align-items:stretch;
}

.oxl-price-card{
    flex:1;
    position:relative;
    padding:2rem 1.6rem;
    border-radius:1.5rem;
    background:#fff;
    border:1px solid rgba(17,24,39,.06);
    box-shadow:0 1rem 2rem rgba(17,24,39,.05);
}

.oxl-price-card-featured{
    background:linear-gradient(160deg,#104231,#1b6a4b);
    color:#fff;
    transform:translateY(-.5rem);
    box-shadow:0 1.6rem 3.3rem rgba(16,66,49,.2);
}

.oxl-price-badge{
    position:absolute;
    top:1rem;
    right:1rem;
    min-height:1.8rem;
    padding:0 .75rem;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#fff;
    display:inline-flex;
    align-items:center;
    font-size:.75rem;
    font-weight:700;
}

.oxl-price-top{
    margin-bottom:1.5rem;
}

.oxl-price-plan{
    display:block;
    font-size:.9rem;
    font-weight:700;
    color:#6b7280;
    margin-bottom:.6rem;
}

.oxl-price-card-featured .oxl-price-plan{
    color:rgba(255,255,255,.78);
}

.oxl-price-top strong{
    font-size:3rem;
    line-height:1;
    letter-spacing:-.04em;
    color:#111827;
}

.oxl-price-card-featured .oxl-price-top strong{
    color:#fff;
}

.oxl-price-top small{
    font-size:1rem;
    font-weight:600;
    color:#6b7280;
}

.oxl-price-card-featured .oxl-price-top small{
    color:rgba(255,255,255,.78);
}

.oxl-price-card ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:.85rem;
    margin-bottom:1.8rem;
}

.oxl-price-card li{
    display:flex;
    align-items:center;
    gap:.7rem;
    color:#4b5563;
    font-size:.96rem;
}

.oxl-price-card-featured li{
    color:#fff;
}

.oxl-price-card i{
    color:#165b3a;
}

.oxl-price-card-featured i{
    color:#fff;
}

.oxl-price-btn{
    width:100%;
    min-height:3.2rem;
    border-radius:1rem;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(27,106,75,.08);
    color:#165b3a;
    font-weight:700;
}

.oxl-price-card-featured .oxl-price-btn{
    background:#fff;
    color:#104231;
}
/* CARD */

.oxl-pricing-card{

    display:flex;
    border-radius:22px;
    overflow:hidden;

    box-shadow:
            0 30px 70px rgba(0,0,0,0.08),
            0 10px 30px rgba(0,0,0,0.05);

}
.swiper-demo{

    display:flex;
    gap:40px;

    transition:transform .9s cubic-bezier(.22,1,.36,1);
    will-change:transform;

}

/* LEFT */

.oxl-pricing-left{

    flex:1;

    padding:60px;

    background:#ffffff;

    display:flex;
    flex-direction:column;
    justify-content:center;

}

.oxl-price{

    font-size:68px;
    font-weight:800;
    color:#0f3d2e;

    margin-bottom:10px;

}

.oxl-price span{

    font-size:20px;
    font-weight:500;
    color:#6b7280;

}

.oxl-pricing-desc{

    margin-bottom:30px;
    color:#6b7280;

}


/* GUARANTEES */

.oxl-pricing-guarantees{

    display:flex;
    flex-direction:column;
    gap:14px;

    margin-bottom:35px;

}

.oxl-guarantee{

    display:flex;
    align-items:center;
    gap:10px;

    font-weight:500;

}

.oxl-guarantee i{

    width:28px;
    height:28px;

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

    border-radius:50%;

    background:#e8f3ef;
    color:#0f3d2e;

    font-size:13px;

}


/* CTA */

.oxl-pricing-cta{

    display:inline-block;
    text-align: center;
    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);

    color:#fff;

    padding:18px 32px;

    border-radius:12px;

    font-weight:700;
    font-size:16px;

    text-decoration:none;

    transition:.25s;

}

.oxl-pricing-cta:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,0.12);

}


/* RIGHT */

.oxl-pricing-right{

    flex:1.3;

    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);

    padding:60px;

    display:flex;
    align-items:center;

}

.oxl-pricing-features{

    list-style:none;
    padding:0;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;

    color:#fff;

}


/* CHECK */

.oxl-pricing-features li{

    display:flex;
    align-items:center;
    gap:10px;

    font-weight:500;

}

.oxl-pricing-features i{

    width:24px;
    height:24px;

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

    border-radius:50%;

    background:#ffffff;
    color:#0f3d2e;

    font-size:12px;

}


/* RESPONSIVE */

@media (max-width:900px){

    .oxl-pricing-card{
        flex-direction:column;
    }

    .oxl-pricing-features{
        grid-template-columns:1fr;
    }

}
/* FAQ */
.oxl-faq{
    padding: 0;
    padding-block: 3rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.oxl-faq-list{
    max-width:52rem;
}

.oxl-faq-item{
    padding:1.35rem 1.4rem;
    border-radius:1.1rem;
    background:#fff;
    border:1px solid rgba(17,24,39,.06);
    box-shadow:0 .8rem 1.8rem rgba(17,24,39,.04);
    margin-bottom:1rem;
}

.oxl-faq-item summary{
    list-style:none;
    cursor:pointer;
    font-size:1rem;
    font-weight:700;
    color:#111827;
    position:relative;
    padding-right:2rem;
}

.oxl-faq-item summary::-webkit-details-marker{
    display:none;
}

.oxl-faq-item summary::after{
    content:"+";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    color:#165b3a;
    font-size:1.25rem;
    font-weight:700;
}

.oxl-faq-item[open] summary::after{
    content:"–";
}

.oxl-faq-item p{
    margin-top:.9rem;
    color:#6b7280;
    line-height:1.7;
    font-size:.96rem;
}

/* FINAL CTA */
.oxl-final-cta{
    padding-top:5rem;
    padding-bottom:7rem;
}

.oxl-final-cta-box{
    text-align:center;
    border-radius:2rem;
    padding:4rem 2rem;
    background:linear-gradient(145deg,#104231,#1b6a4b);
    color:#fff;
    box-shadow:0 1.8rem 4rem rgba(16,66,49,.2);
}

.oxl-final-cta-box h2{
    font-size:3rem;
    line-height:1.05;
    letter-spacing:-.03em;
    margin-bottom:1rem;
}

.oxl-final-cta-box p{
    max-width:36rem;
    margin:0 auto 1.8rem;
    color:rgba(255,255,255,.84);
    line-height:1.7;
    font-size:1.03rem;
}

.oxl-final-btn{
    min-height:3.4rem;
    padding:0 1.5rem;
    border-radius:1rem;
    background:#fff;
    color:#104231;
    text-decoration:none;
    font-weight:700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

/* FOOTER */
.oxl-footer{
    padding:0 0 4rem;
}

.oxl-footer-grid{
    display:flex;
    gap:3rem;
    padding-top:2rem;
    border-top:1px solid rgba(17,24,39,.08);
}

.oxl-footer-brand{
    flex:1.4;
    max-width:24rem;
}

.oxl-footer-logo{
    height:2.4rem;
    margin-bottom:1rem;
}

.oxl-footer-brand p{
    color:#6b7280;
    line-height:1.75;
    font-size:.95rem;
}

.oxl-footer-col{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.7rem;
}

.oxl-footer-col h4{
    font-size:1rem;
    color:#111827;
    margin-bottom:.35rem;
}

.oxl-footer-col a{
    text-decoration:none;
    color:#6b7280;
    font-size:.95rem;
}

.oxl-footer-col a:hover{
    color:#165b3a;
}
/* ===============================
VISUAL
=============================== */

.oxl-demo-visual{
    display:flex;
    flex-direction:column;
    gap:30px;
}


/* ===============================
TABS
=============================== */

.oxl-demo-tabs{

    display:flex;
    width:100%;

    border-radius:12px;
    overflow:hidden;

    border:1px solid #e5e7eb;

}

.oxl-demo-tab{

    flex:1;

    padding:16px;

    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    background:#fff;
    border:none;

    cursor:pointer;

}

.oxl-demo-tab.is-active{

    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);
    color:#fff;

}


/* ===============================
DEVICE
=============================== */

.oxl-demo-device{
    position:relative;
}

/* DESKTOP */

.oxl-demo-desktop{

    border-radius:18px;
    padding:12px;

    background:#f3f4f6;

    box-shadow:
            0 40px 80px rgba(0,0,0,0.15),
            0 10px 25px rgba(0,0,0,0.08);

}

.oxl-demo-desktop img{
    width:100%;
    border-radius:12px;
}


/* MOBILE */

.oxl-demo-mobile{

    display:flex;
    gap:20px;
    justify-content:center;

}

.oxl-demo-phone{

    width:200px;

    border-radius:26px;
    padding:10px;

    background:#111;

    box-shadow:
            0 20px 40px rgba(0,0,0,0.25);

}

.oxl-demo-phone img{

    width:100%;
    border-radius:16px;

}


/* ===============================
FEATURE ACTIVE
=============================== */

.oxl-demo-item.is-active{

    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);

}

.oxl-demo-item.is-active strong,
.oxl-demo-item.is-active small{
    color:#fff;
}

.oxl-demo-item.is-active .oxl-demo-item-icon{

    background:rgba(255,255,255,.15);
    color:#fff;

}


/* ===============================
HIDDEN
=============================== */

.oxl-hidden{
    display:none;
}
/* ===============================
ZOOM DEMO + PERSPECTIVE
=============================== */

.oxl-demo-device{

    perspective:1400px;

}
.swiper-container{
    overflow-x:hidden;
    max-width:50%;
}
.oxl-demo-desktop{

    width:140%;
    max-width:1200px;

    border-radius:18px;
    padding:12px;

    background:#f3f4f6;

    transform:rotateY(-5deg) rotateX(6deg);

    transform-origin:center right;

    box-shadow:
            0 40px 80px rgba(0,0,0,0.15),
            0 10px 25px rgba(0,0,0,0.08);

}

.oxl-demo-desktop img{

    width:100%;
    height:auto;

    display:block;

    border-radius:12px;

}
/* ===============================
MOBILE POSITION
=============================== */

.oxl-demo-mobile{

    transform:scale(1.1);

}
/* ===============================
FAQ GRID
================================ */

.oxl-faq-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:50px;
    align-items:flex-start;
}



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

.oxl-faq-contact{

    background:#ffffff;

    border:1px solid #e6e8ee;
    border-radius:14px;

    padding:36px 34px;

    box-shadow:0 20px 40px rgba(0,0,0,0.04);

    display:flex;
    flex-direction:column;
    gap:14px;

}

.oxl-faq-contact h3{
    font-size:20px;
    font-weight:600;
    letter-spacing:-0.01em;
}

.oxl-faq-contact p{
    color:#6b7280;
    line-height:1.6;
    font-size:14px;
}



/* ===============================
   FORM
================================ */

.oxl-faq-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}



/* INPUT GROUP */

.oxl-faq-field{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.oxl-faq-field label{
    font-size:13px;
    font-weight:600;
    color:#374151;
}



/* INPUT */

.oxl-faq-form input,
.oxl-faq-form textarea{

    width:100%;

    padding:12px 14px;

    font-size:14px;
    font-family:inherit;

    border-radius:8px;
    border:1px solid #e5e7eb;

    background:#fff;

    transition:
            border-color .2s,
            box-shadow .2s;

}



/* INPUT FOCUS */

.oxl-faq-form input:focus,
.oxl-faq-form textarea:focus{

    outline:none;

    border-color:#1b6a4b;

    box-shadow:0 0 0 3px rgba(27,106,75,.08);

}



/* TEXTAREA */

.oxl-faq-form textarea{
    min-height:130px;
    resize:vertical;
    line-height:1.6;
}



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

.oxl-faq-submit{

    margin-top:6px;

    padding:13px 16px;

    border-radius:8px;
    border:none;

    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);

    color:#fff;

    font-weight:600;
    font-size:14px;

    cursor:pointer;

    transition:
            transform .15s ease,
            box-shadow .15s ease,
            opacity .2s;

}

.oxl-faq-submit:hover{

    transform:translateY(-1px);

    box-shadow:0 6px 16px rgba(27,106,75,.25);

}



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

.oxl-faq-direct{

    margin-top:12px;

    padding:18px;

    border-radius:10px;

    border:1px solid #e5e7eb;

    background:#fafafa;

    text-align:center;

}

.oxl-faq-direct span{
    display:block;
    font-size:13px;
    color:#6b7280;
    margin-bottom:6px;
}

.oxl-faq-direct a{

    font-weight:600;
    font-size:15px;

    color:#1b6a4b;
    text-decoration:none;

}



/* ===============================
   PAGINATION
================================ */

.oxl-faq-pagination{

    display:flex;
    gap:8px;

    margin-top:20px;

}

.oxl-faq-page{

    width:36px;
    height:36px;

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

    border-radius:7px;

    border:1px solid #e5e7eb;

    background:#fff;

    font-size:14px;

    cursor:pointer;

    transition:
            background .2s,
            border-color .2s,
            color .2s;

}

.oxl-faq-page:hover{

    border-color:#1b6a4b;
    color:#1b6a4b;

}

.oxl-faq-page.active{

    background:#1b6a4b;
    color:#fff;

    border:none;

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

#footer{
    background:linear-gradient(180deg,#0f3d2e 0%,#0c2f23 100%);
    color:#cbd5e1;
    padding:90px 0 40px;
    position:relative;
}

#footer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
            radial-gradient(circle at 20% 10%,rgba(255,255,255,.05),transparent 50%),
            radial-gradient(circle at 80% 20%,rgba(255,255,255,.04),transparent 50%);
    pointer-events:none;
}

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

.footer-container{
    max-width:1400px;
    margin:auto;
    padding:0 40px;
    position:relative;
    z-index:2;
}

/* =========================
   INTRO SEO
========================= */

.footer-intro{
    max-width:850px;
    margin-bottom:60px;
    font-size:15px;
    line-height:1.8;
    color:#ffffff;
}

.footer-intro strong{
    color:#fff;
    font-weight:600;
}

/* =========================
   HEADER
========================= */

.footer-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    gap:10px;
    flex-wrap:wrap;
}

.footer-logo img{
    height:82px;
    filter:brightness(200);
}

/* =========================
   APP BUTTONS
========================= */

.footer-apps{
    display:flex;
    gap:18px;
}

.footer-app-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 18px;
    background:rgba(255,255,255,.06);
    backdrop-filter:blur(10px);
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    color:white;
    text-decoration:none;
    transition:.25s ease;
}

.footer-app-card:hover{
    background:rgba(255,255,255,.12);
    transform:translateY(-2px);
}

.footer-app-card i{
    font-size:22px;
}

.footer-app-card span{
    display:block;
    font-size:11px;
    opacity:.7;
}

.footer-app-card strong{
    font-size:14px;
    letter-spacing:.2px;
}

/* =========================
   GRID
========================= */

.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:50px;
    margin-bottom:70px;
}

/* =========================
   COL
========================= */

.footer-col{
    display:flex;
    flex-direction:column;
}

.footer-col h4{
    color:#fff;
    font-size:15px;
    font-weight:600;
    margin-bottom:18px;
    letter-spacing:.3px;
}

/* =========================
   LINKS
========================= */

.footer-col a{
    color:#cbd5e1;
    text-decoration:none;
    font-size:14px;
    margin-bottom:10px;
    position:relative;
    padding-left:0;
    transition:.2s ease;
}

.footer-col a::before{
    content:"";
    position:absolute;
    left:-14px;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:4px;
    background:#1b6a4b;
    border-radius:50%;
    opacity:0;
    transition:.2s ease;
}

.footer-col a:hover{
    color:white;
    padding-left:6px;
}

.footer-col a:hover::before{
    opacity:1;
    left:-8px;
}

/* =========================
   SEO TEXT
========================= */

.footer-seo-text{
    max-width:900px;
    font-size:14px;
    line-height:1.8;
    color:#fff;
    margin-bottom:50px;
}

.footer-seo-text strong{
    color:#fff;
}

/* =========================
   BOTTOM
========================= */

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:24px;
    font-size:13px;
    color:#94a3b8;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

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

@media(max-width:900px){

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

    .footer-header{
        flex-direction:column;
        align-items:flex-start;
    }

}

@media(max-width:600px){

    .footer-container{
        padding:0 25px;
    }

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

    .footer-apps{
        flex-direction:column;
        width:100%;
    }

    .footer-app-card{
        width:100%;
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

}
/* RESPONSIVE */
@media (max-width: 1100px){
    .oxl-why-grid,
    .oxl-testimonials-grid,
    .oxl-pricing-grid,
    .oxl-stats-grid,
    .oxl-demo-grid,
    .oxl-mobile-grid{
        flex-direction:column;
    }

    .oxl-demo-copy,
    .oxl-mobile-copy{
        max-width:none;
    }

    .oxl-business-card{
        flex:1 1 calc(50% - .6rem);
    }
}

@media (max-width: 780px){
    .oxl-section{
        padding:5.5rem 0;
    }

    .oxl-section-head h2,
    .oxl-demo-copy h2,
    .oxl-mobile-copy h2,
    .oxl-final-cta-box h2{
        font-size:2.25rem;
    }

    .oxl-business-card{
        flex:1 1 100%;
    }

    .oxl-footer-grid{
        flex-direction:column;
    }

    .oxl-demo-phone-shell,
    .oxl-mobile-phone-shell{
        width:16rem;
    }
}

/* responsive */

@media(max-width:900px){

    .mockup-wrapper{
        gap:20px;
    }

    .phone{
        width:200px;
    }

    .phone-center{
        transform:translateY(-40px);
    }

}

@media(max-width:600px){

    .mockup-wrapper{
        flex-direction:column;
        align-items:center;
    }

    .phone-left,
    .phone-right{
        transform:none;
    }

    .phone-center{
        transform:none;
    }

}



.btn-primary{
    background:linear-gradient(135deg,#0f3d2e,#1b6a4b);
    color:white;
    padding:.9rem 1.5rem;
    border-radius:.7rem;
    font-weight:600;
    font-size:.9rem;
}

.btn-secondary{
    background:linear-gradient(135deg, rgba(15, 61, 46, 0.11), rgba(27, 106, 75, 0.1));
    color:#141618;
    padding:.9rem 1.5rem;
    border-radius:.7rem;
    font-weight:600;
    font-size:.9rem;
}

.btn-primary:hover,
.btn-secondary:hover{
    transform:translateY(-2px);
}
.phone-features-number{
    position:relative;
}

.phone-features-number::before{
    content:attr(data-text);

    position:absolute;

    top:-2px;
    bottom:-2px;
    left:-22px;
    right:-22px;

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

    background:#104231;
    color:#fff;

    font-size:4.2rem;
    font-weight:900;
    line-height:1;
    letter-spacing:-0.04em;

    white-space:nowrap;

    clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);

    transform:translateY(105%);
    opacity:0;

    transition:
            transform .18s cubic-bezier(.4,0,.2,1),
            opacity .12s linear;

    z-index:2;
}

.phone-features-number.active::before{
    transform:translateY(0);
    opacity:1;
}
/* RESPONSIVE */

@media(max-width:900px){

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

    .hero h1{
        font-size:2.6rem;
    }

    nav ul{
        display:none;
    }

}

 .oxl-breadcrumb{
     font-size:13px;
     line-height:1.6;
     padding:28px 0 14px;
     color:#6b7280;
 }

/* list */

.oxl-breadcrumb ol{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding:0;
    margin:0;
    list-style:none;
}

/* items */

.oxl-breadcrumb li{
    display:flex;
    align-items:center;
}

/* links */

.oxl-breadcrumb a{
    color:#6b7280;
    text-decoration:none;
    font-weight:500;
    transition:.2s;

}

.oxl-breadcrumb a:hover{
    color:#1b6a4b;
}

/* separator */

.oxl-breadcrumb .separator{
    color:#cbd5e1;
    font-weight:400;
}
/* current */

.oxl-breadcrumb .current{
    color:#104231;
    font-weight:600;
}

/* responsive */

@media (max-width:640px){
    .oxl-breadcrumb{
        font-size:12px;
    }
}