/*==================================================
    REMUNERX WEBSITE V2
    SECTIONS
==================================================*/

/*=========================================
    CORE MODULES
=========================================*/

.core-modules{
    padding:120px 0;
    background:#f8fafc;
}

.core-modules .section-header{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.module-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.module-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:22px;
    padding:35px 30px;
    transition:.35s ease;
    position:relative;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(15,23,42,.05);
}

.module-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#2563eb,#06b6d4);
    transform:scaleX(0);
    transition:.35s;
}

.module-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(0,0,0,.12);
    border-color:#2563eb;
}

.module-card:hover::before{
    transform:scaleX(1);
}

.module-icon{
    width:72px;
    height:72px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#fff;
    margin-bottom:25px;
}

.module-icon.blue{
    background:linear-gradient(135deg,#3b82f6,#2563eb);
}

.module-icon.green{
    background:linear-gradient(135deg,#22c55e,#16a34a);
}

.module-icon.purple{
    background:linear-gradient(135deg,#8b5cf6,#7c3aed);
}

.module-icon.orange{
    background:linear-gradient(135deg,#f59e0b,#ea580c);
}

.module-icon.cyan{
    background:linear-gradient(135deg,#06b6d4,#0891b2);
}

.module-icon.red{
    background:linear-gradient(135deg,#ef4444,#dc2626);
}

.module-card h3{
    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
    color:#111827;
}

.module-card p{
    color:#6b7280;
    line-height:1.8;
    margin-bottom:22px;
    min-height:95px;
}

.module-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.module-card ul li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 0;
    font-size:15px;
    color:#374151;
}

.module-card ul li i{
    color:#10b981;
    font-size:14px;
}

.module-card:hover .module-icon{
    transform:scale(1.08) rotate(-5deg);
}

.module-icon{
    transition:.35s;
}

@media(max-width:991px){

    .module-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:768px){

    .core-modules{
        padding:80px 0;
    }

    .module-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .module-card{
        padding:28px;
    }

    .module-card p{
        min-height:auto;
    }

}

/*=========================================
    TRUSTED BY
==========================================*/

.trusted{

    background:#ffffff;

    padding:70px 0;

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

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

}

.trusted-title{

    text-align:center;

    color:var(--muted);

    font-size:16px;

    font-weight:600;

    margin-bottom:45px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.trusted-logos{

    display:grid;

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

    gap:22px;

}

.logo-item{

    display:flex;

    align-items:center;

    justify-content:center;

    height:90px;

    background:#fff;

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

    border-radius:22px;

    font-size:18px;

    font-weight:600;

    color:var(--dark);

    transition:.35s ease;

}

.logo-item:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    color:var(--primary);

    box-shadow:var(--shadow);

}

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

.features{

    background:var(--bg);

}

.feature-grid{

    display:grid;

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

    gap:32px;

}

.feature-card{

    position:relative;

    background:#fff;

    padding:38px;

    border-radius:28px;

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

    overflow:hidden;

    transition:.35s ease;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

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

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}

.feature-card:hover{

    transform:translateY(-10px);

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

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-icon{

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

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

    color:#fff;

    font-size:30px;

    margin-bottom:28px;

}

.feature-card h3{

    margin-bottom:18px;

}

.feature-card p{

    margin-bottom:24px;

}

.feature-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--primary);

    font-weight:600;

}

.feature-card a:hover{

    gap:14px;

}

/*=========================================
    PLATFORM OVERVIEW
==========================================*/

.platform{

    background:#fff;

}

.platform-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.platform-image{

    position:relative;

}

.platform-image img{

    border-radius:28px;

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

}

.platform-content h2{

    margin-bottom:22px;

}

.platform-content p{

    margin-bottom:28px;

}

.platform-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.platform-list li{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.platform-list i{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary-light);

    color:var(--primary);

    border-radius:14px;

    flex-shrink:0;

}

.platform-list strong{

    display:block;

    margin-bottom:6px;

    color:var(--dark);

}

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

.facepoint{

    background:#fff;

}

.facepoint-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.facepoint-image{

    position:relative;

}

.facepoint-image img{

    width:100%;

    border-radius:30px;

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

}

.facepoint-badge{

    position:absolute;

    top:30px;

    right:-25px;

    background:#fff;

    border-radius:18px;

    padding:18px 24px;

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    gap:14px;

}

.facepoint-badge i{

    width:52px;

    height:52px;

    border-radius:16px;

    background:var(--success);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.facepoint-content h2{

    margin-bottom:22px;

}

.facepoint-content p{

    margin-bottom:30px;

}

.facepoint-list{

    display:grid;

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

    gap:18px;

}

.facepoint-list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px;

    background:#fff;

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

    border-radius:18px;

    transition:.35s;

}

.facepoint-list li:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

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

}

.facepoint-list i{

    color:var(--primary);

    font-size:18px;

}

/*=========================================
    PAYROLL
==========================================*/

.payroll{

    background:var(--surface-2);

}

.payroll-grid{

    display:grid;

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

    gap:32px;

}

.payroll-card{

    background:#fff;

    padding:34px;

    border-radius:26px;

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

    transition:.35s;

}

.payroll-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.payroll-icon{

    width:72px;

    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    color:#fff;

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

    margin-bottom:24px;

}

.payroll-card h3{

    margin-bottom:18px;

}

.payroll-card p{

    margin-bottom:24px;

}

.payroll-card ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.payroll-card li{

    display:flex;

    align-items:center;

    gap:12px;

}

.payroll-card li i{

    color:var(--success);

}

/*=========================================
    INDUSTRIES
==========================================*/

.industries{

    background:#fff;

}

.industry-grid{

    display:grid;

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

    gap:30px;

}

.industry-card{

    text-align:center;

    background:#fff;

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

    border-radius:26px;

    padding:40px 30px;

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:var(--shadow);

}

.industry-card i{

    width:80px;

    height:80px;

    margin:auto auto 24px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary-light);

    color:var(--primary);

    font-size:32px;

}

.industry-card h3{

    margin-bottom:16px;

}

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

.stats{

    background:linear-gradient(
        135deg,
        var(--primary),
        #1D4ED8
    );

    color:#fff;

}

.stats-grid{

    display:grid;

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

    gap:28px;

}

.stats-card{

    text-align:center;

    padding:40px 20px;

}

.stats-card h2{

    color:#fff;

    font-size:54px;

    margin-bottom:12px;

}

.stats-card p{

    color:rgba(255,255,255,.8);

}

/*=========================================
    TESTIMONIALS
==========================================*/

.testimonials{

    background:var(--bg);

}

.testimonial-grid{

    display:grid;

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

    gap:30px;

}

.testimonial-card{

    background:#fff;

    padding:35px;

    border-radius:28px;

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

    transition:.35s ease;

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

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

.testimonial-stars{

    display:flex;

    gap:6px;

    margin-bottom:20px;

    color:#FBBF24;

}

.testimonial-card p{

    margin-bottom:25px;

    font-style:italic;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h4{

    font-size:18px;

}

.testimonial-user span{

    font-size:14px;

    color:var(--muted);

}

/*=========================================
    PRICING
==========================================*/

.pricing{

    background:#fff;

}

.pricing-grid{

    display:grid;

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

    gap:32px;

}

.pricing-card{

    position:relative;

    background:#fff;

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

    border-radius:30px;

    padding:45px 35px;

    transition:.35s ease;

}

.pricing-card:hover{

    transform:translateY(-10px);

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

}

.pricing-card.featured{

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

    transform:scale(1.03);

}

.pricing-badge{

    position:absolute;

    top:-16px;

    left:50%;

    transform:translateX(-50%);

    background:var(--primary);

    color:#fff;

    padding:8px 20px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

}

.price{

    font-size:52px;

    font-weight:800;

    color:var(--dark);

    margin:25px 0;

}

.price span{

    font-size:16px;

    color:var(--muted);

}

.pricing-card ul{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:30px 0;

}

.pricing-card li{

    display:flex;

    align-items:center;

    gap:12px;

}

.pricing-card li i{

    color:var(--success);

}

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

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        #1D4ED8
    );

    color:#fff;

}

.cta-box{

    text-align:center;

    max-width:850px;

    margin:auto;

}

.cta h2{

    color:#fff;

    margin-bottom:20px;

}

.cta p{

    color:rgba(255,255,255,.85);

    margin-bottom:40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}

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

.footer{

    background:#0F172A;

    color:#CBD5E1;

    padding:90px 0 30px;

}

.footer-grid{

    display:grid;

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

    gap:50px;

    margin-bottom:60px;

}

.footer-logo img{

    height:48px;

    margin-bottom:20px;

}

.footer h4{

    color:#fff;

    margin-bottom:20px;

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.footer a{

    transition:.3s ease;

}

.footer a:hover{

    color:#fff;

    padding-left:6px;

}

.footer-bottom{

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

    padding-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.social-icons{

    display:flex;

    gap:14px;

}

.social-icons a{

    width:42px;

    height:42px;

    border-radius:12px;

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

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s ease;

}

.social-icons a:hover{

    background:var(--primary);

    transform:translateY(-4px);

}

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

@media(max-width:992px){

    .trusted-logos,

    .feature-grid,

    .industry-grid,

    .testimonial-grid,

    .pricing-grid,

    .stats-grid,

    .footer-grid{

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

    }

    .platform-grid,

    .facepoint-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

}

@media(max-width:768px){

    .trusted-logos,

    .feature-grid,

    .industry-grid,

    .testimonial-grid,

    .pricing-grid,

    .stats-grid,

    .footer-grid,

    .payroll-grid,

    .facepoint-list{

        grid-template-columns:1fr;

    }

    .cta-buttons{

        flex-direction:column;

    }

    .footer-bottom{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }

    .pricing-card.featured{

        transform:none;

    }

}

@media(max-width:576px){

    .testimonial-card,

    .pricing-card,

    .industry-card,

    .feature-card,

    .payroll-card{

        padding:25px;

    }

    .price{

        font-size:42px;

    }

}

/*====================================================
    HOW IT WORKS
====================================================*/

.how-it-works{
    padding:120px 0;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

.how-it-works::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(37,99,235,.05);
    border-radius:50%;
    top:-220px;
    right:-180px;
    filter:blur(90px);
}

.how-it-works::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:rgba(59,130,246,.05);
    border-radius:50%;
    bottom:-180px;
    left:-150px;
    filter:blur(90px);
}

.how-it-works .container{
    position:relative;
    z-index:2;
}

/*-----------------------------------
Workflow Layout
-----------------------------------*/

.workflow{

    position:relative;

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

/*-----------------------------------
Timeline
-----------------------------------*/

.workflow-line{

    position:absolute;

    top:40px;

    left:12%;

    right:12%;

    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

    border-radius:20px;

    z-index:0;
}

/*-----------------------------------
Each Step
-----------------------------------*/

.workflow-step{

    position:relative;

    text-align:center;

    z-index:2;
}

/*-----------------------------------
Step Number
-----------------------------------*/

.step-circle{

    width:82px;

    height:82px;

    margin:0 auto 30px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.4rem;

    font-weight:700;

    box-shadow:
        0 18px 40px rgba(37,99,235,.25);

    border:6px solid #fff;

    transition:.35s;
}

.step-circle span{

    letter-spacing:1px;

}

/*-----------------------------------
Card
-----------------------------------*/

.step-card{

    background:#fff;

    border-radius:24px;

    padding:35px 30px;

    min-height:260px;

    box-shadow:
        0 15px 45px rgba(15,23,42,.08);

    border:1px solid rgba(226,232,240,.8);

    transition:.35s ease;

    position:relative;

    overflow:hidden;
}

.step-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );

    transform:scaleX(0);

    transition:.35s;
}

.step-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 25px 60px rgba(37,99,235,.18);

}

.step-card:hover::before{

    transform:scaleX(1);

}

.workflow-step:hover .step-circle{

    transform:scale(1.08);

}

/*-----------------------------------
Icon
-----------------------------------*/

.step-icon{

    width:72px;

    height:72px;

    margin:0 auto 22px;

    border-radius:18px;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    transition:.35s;
}

.step-card:hover .step-icon{

    background:#2563eb;

    color:#fff;

    transform:rotate(-8deg);

}

/*-----------------------------------
Typography
-----------------------------------*/

.step-card h3{

    font-size:1.35rem;

    color:#0f172a;

    margin-bottom:15px;

    font-weight:700;

}

.step-card p{

    color:#64748b;

    line-height:1.8;

    font-size:.97rem;

}

/*-----------------------------------
Bottom CTA
-----------------------------------*/

.workflow-cta{

    margin-top:90px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    border-radius:28px;

    padding:60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    box-shadow:
        0 30px 60px rgba(37,99,235,.20);
}

.workflow-cta h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:15px;

}

.workflow-cta p{

    color:rgba(255,255,255,.9);

    line-height:1.8;

    max-width:650px;

}

.workflow-cta .btn{

    white-space:nowrap;

    background:#fff;

    color:#2563eb;

}

.workflow-cta .btn:hover{

    background:#f8fafc;

}

/*-----------------------------------
Responsive
-----------------------------------*/

@media(max-width:1100px){

.workflow{

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

}

.workflow-line{

display:none;

}

.workflow-cta{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.how-it-works{

padding:90px 0;

}

.workflow{

grid-template-columns:1fr;

gap:30px;

}

.step-card{

min-height:auto;

}

.workflow-cta{

padding:45px 30px;

}

.workflow-cta h3{

font-size:1.7rem;

}

}

@media(max-width:480px){

.step-circle{

width:70px;
height:70px;
font-size:1.2rem;

}

.step-icon{

width:60px;
height:60px;

font-size:1.6rem;

}

.workflow-cta{

border-radius:20px;

}

}

/*====================================================
    WHY REMUNERX
====================================================*/

.why-remunerx{
    padding:120px 0;
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

.why-remunerx::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    background:rgba(37,99,235,.04);
    border-radius:50%;
    top:-250px;
    right:-200px;
    filter:blur(100px);
}

.why-remunerx .container{
    position:relative;
    z-index:2;
}

/*------------------------------------
Rows
------------------------------------*/

.why-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    margin-top:100px;

}

.why-row.reverse{

    direction:rtl;

}

.why-row.reverse>*{

    direction:ltr;

}

/*------------------------------------
Content
------------------------------------*/

.why-label{

    display:inline-block;

    padding:8px 18px;

    background:#eff6ff;

    color:#2563eb;

    border-radius:30px;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:20px;

}

.why-content h3{

    font-size:2rem;

    color:#0f172a;

    line-height:1.3;

    margin-bottom:22px;

}

.why-content p{

    color:#64748b;

    line-height:1.9;

    font-size:1.05rem;

    margin-bottom:30px;

}

.why-list{

    list-style:none;

    padding:0;

    margin:0;

}

.why-list li{

    display:flex;

    align-items:center;

    margin-bottom:18px;

    color:#334155;

    font-weight:500;

}

.why-list li::before{

    content:"✓";

    width:28px;

    height:28px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-right:15px;

    font-size:.8rem;

    flex-shrink:0;

}

/*------------------------------------
Screenshot
------------------------------------*/

.why-image{

    position:relative;

}

.why-image::before{

    content:"";

    position:absolute;

    width:90%;

    height:90%;

    background:linear-gradient(
        135deg,
        rgba(37,99,235,.18),
        rgba(96,165,250,.08)
    );

    border-radius:30px;

    top:25px;

    left:25px;

    filter:blur(40px);

    z-index:0;

}

/*------------------------------------
Bottom CTA
------------------------------------*/

.why-bottom{

    margin-top:120px;

    padding:70px;

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

    text-align:center;

    border-radius:30px;

}

.why-bottom h3{

    font-size:2.2rem;

    margin-bottom:20px;

    color:#fff;

}

.why-bottom p{

    color:rgba(255,255,255,.9);

    max-width:700px;

    margin:0 auto 35px;

    line-height:1.8;

}

.why-bottom .btn{

    background:#fff;

    color:#2563eb;

}

.why-bottom .btn:hover{

    background:#f8fafc;

}

/*------------------------------------
Responsive
------------------------------------*/

@media(max-width:992px){

.why-row{

grid-template-columns:1fr;

gap:50px;

}

.why-row.reverse{

direction:ltr;

}

.why-content{

text-align:center;

}

.why-list{

display:inline-block;

text-align:left;

}

.why-bottom{

padding:50px 30px;

}

}

@media(max-width:768px){

.why-remunerx{

padding:90px 0;

}

.why-row{

margin-top:70px;

}

.why-content h3{

font-size:1.7rem;

}

.why-bottom h3{

font-size:1.8rem;

}

}

@media(max-width:576px){

.why-content h3{

font-size:1.5rem;

}

.why-bottom{

border-radius:20px;

padding:40px 25px;

}

}

/*====================================================
BROWSER MOCKUP
====================================================*/

.browser-window{

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    border:1px solid #e5e7eb;

    box-shadow:
        0 30px 60px rgba(15,23,42,.12);

    position:relative;

    transition:.4s ease;

}

.browser-window:hover{

    transform:
        translateY(-10px)
        rotate(-1deg);

}

.browser-top{

    height:46px;

    display:flex;

    align-items:center;

    padding:0 18px;

    background:#f8fafc;

    border-bottom:1px solid #e2e8f0;

}

.browser-top span{

    width:12px;

    height:12px;

    border-radius:50%;

    margin-right:8px;

}

.browser-top span:nth-child(1){

    background:#ff5f57;

}

.browser-top span:nth-child(2){

    background:#ffbd2e;

}

.browser-top span:nth-child(3){

    background:#28c840;

}

.browser-title{

    flex:1;

    text-align:center;

    color:#64748b;

    font-size:.9rem;

    font-weight:600;

    margin-right:52px;

}

.browser-window img{

    display:block;

    width:100%;

    height:auto;

}

/*====================================================
    INDUSTRIES WE SERVE
====================================================*/

.industries{

    padding:120px 0;

    background:#f8fafc;

    position:relative;

    overflow:hidden;

}

.industries::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:rgba(37,99,235,.05);

    border-radius:50%;

    top:-220px;

    right:-180px;

    filter:blur(100px);

}

.industries .container{

    position:relative;

    z-index:2;

}

/*===================================
Grid
===================================*/

.industry-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

/*===================================
Card
===================================*/

.industry-card{

    background:#fff;

    border-radius:24px;

    padding:35px;

    position:relative;

    overflow:hidden;

    transition:.35s ease;

    border:1px solid #e2e8f0;

    box-shadow:
        0 12px 35px rgba(15,23,42,.05);

}

.industry-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

    transform:scaleX(0);

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(37,99,235,.12);

}

.industry-card:hover::before{

    transform:scaleX(1);

}

/*===================================
Icon
===================================*/

.industry-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2rem;

    margin-bottom:25px;

    transition:.35s;

}

.industry-card:hover .industry-icon{

    background:#2563eb;

    color:#fff;

    transform:rotate(-8deg);

}

/*===================================
Typography
===================================*/

.industry-card h3{

    font-size:1.4rem;

    color:#0f172a;

    margin-bottom:18px;

}

.industry-card p{

    color:#64748b;

    line-height:1.8;

    margin-bottom:25px;

}

.industry-card span{

    color:#2563eb;

    font-weight:600;

    transition:.3s;

}

.industry-card:hover span{

    letter-spacing:.5px;

}

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

.industry-footer{

    margin-top:90px;

    text-align:center;

    background:#fff;

    border-radius:30px;

    padding:60px;

    box-shadow:
        0 20px 50px rgba(15,23,42,.06);

    border:1px solid #e2e8f0;

}

.industry-footer h3{

    font-size:2rem;

    color:#0f172a;

    margin-bottom:18px;

}

.industry-footer p{

    color:#64748b;

    max-width:700px;

    margin:0 auto 35px;

    line-height:1.8;

}

/*===================================
Responsive
===================================*/

@media(max-width:1100px){

.industry-grid{

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

}

}

@media(max-width:768px){

.industries{

padding:90px 0;

}

.industry-grid{

grid-template-columns:1fr;

gap:25px;

}

.industry-footer{

padding:40px 25px;

}

.industry-footer h3{

font-size:1.7rem;

}

}

@media(max-width:480px){

.industry-card{

padding:28px;

}

.industry-icon{

width:60px;

height:60px;

font-size:1.6rem;

}

}

/*====================================================
    CUSTOMER SUCCESS STORIES
====================================================*/

.success-stories{

    padding:120px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.success-stories::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:rgba(37,99,235,.05);

    border-radius:50%;

    top:-250px;

    left:-180px;

    filter:blur(100px);

}

.success-stories .container{

    position:relative;

    z-index:2;

}

/*====================================
Stories Grid
====================================*/

.stories-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

/*====================================
Story Card
====================================*/

.story-card{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:24px;

    padding:35px;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);

}

.story-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #60a5fa
    );

    transform:scaleX(0);

    transition:.35s;

}

.story-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(37,99,235,.14);

}

.story-card:hover::before{

    transform:scaleX(1);

}

/* Featured Card */

.story-card.featured{

    background:linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color:#fff;

}

.story-card.featured .story-text,

.story-card.featured span,

.story-card.featured h4{

    color:#fff;

}

.story-card.featured .story-avatar{

    background:#fff;

    color:#2563eb;

}

/*====================================
Rating
====================================*/

.story-rating{

    color:#fbbf24;

    font-size:1.2rem;

    margin-bottom:22px;

    letter-spacing:2px;

}

/*====================================
Quote
====================================*/

.story-text{

    color:#475569;

    line-height:1.9;

    margin-bottom:35px;

    font-size:1rem;

    font-style:italic;

}

/*====================================
Customer
====================================*/

.story-user{

    display:flex;

    align-items:center;

    gap:16px;

}

.story-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:1.1rem;

    flex-shrink:0;

}

.story-user h4{

    font-size:1rem;

    color:#0f172a;

    margin-bottom:6px;

}

.story-user span{

    color:#64748b;

    font-size:.92rem;

}

/*====================================
Statistics
====================================*/

.success-stats{

    display:grid;

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

    gap:30px;

    margin-top:90px;

}

.stat-box{

    background:#f8fafc;

    border-radius:20px;

    text-align:center;

    padding:35px;

    border:1px solid #e2e8f0;

    transition:.35s;

}

.stat-box:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-8px);

}

.stat-box:hover p{

    color:#fff;

}

.stat-box h3{

    font-size:2.4rem;

    color:#2563eb;

    margin-bottom:12px;

    font-weight:800;

}

.stat-box:hover h3{

    color:#fff;

}

.stat-box p{

    color:#64748b;

    font-weight:500;

}

/*====================================
Responsive
====================================*/

@media(max-width:1100px){

.stories-grid{

grid-template-columns:1fr;

}

.success-stats{

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

}

}

@media(max-width:768px){

.success-stories{

padding:90px 0;

}

.story-card{

padding:30px;

}

.success-stats{

grid-template-columns:1fr;

gap:20px;

margin-top:60px;

}

}

@media(max-width:480px){

.story-avatar{

width:52px;

height:52px;

font-size:1rem;

}

.story-card{

padding:25px;

}

.stat-box{

padding:28px;

}

}

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

.faq{

    padding:120px 0;

    background:#f8fafc;

    position:relative;

    overflow:hidden;

}

.faq::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:rgba(37,99,235,.05);

    border-radius:50%;

    right:-180px;

    bottom:-220px;

    filter:blur(100px);

}

.faq .container{

    position:relative;

    z-index:2;

}

/*====================================
Layout
====================================*/

.faq-wrapper{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    align-items:start;

}

/*====================================
Left
====================================*/

.faq-intro{

    position:sticky;

    top:120px;

}

.faq-intro h2{

    font-size:2.6rem;

    line-height:1.2;

    color:#0f172a;

    margin:20px 0;

}

.faq-intro>p{

    color:#64748b;

    line-height:1.9;

    margin-bottom:35px;

}

.faq-contact{

    display:flex;

    gap:18px;

    align-items:flex-start;

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:20px;

    padding:25px;

    margin-bottom:35px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05);

}

.contact-icon{

    width:60px;

    height:60px;

    background:#eff6ff;

    color:#2563eb;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.6rem;

    flex-shrink:0;

}

.faq-contact h4{

    color:#0f172a;

    margin-bottom:8px;

}

.faq-contact p{

    color:#64748b;

    line-height:1.7;

    margin:0;

}

/*====================================
Right
====================================*/

.faq-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.faq-item{

    background:#ffffff;

    border:1px solid #e2e8f0;

    border-radius:20px;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
        0 10px 25px rgba(15,23,42,.04);

}

.faq-item.active{

    border-color:#2563eb;

    box-shadow:
        0 20px 40px rgba(37,99,235,.10);

}

.faq-question{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:26px 30px;

    background:none;

    border:none;

    cursor:pointer;

    font-size:1.05rem;

    font-weight:600;

    color:#0f172a;

    text-align:left;

}

.faq-question:hover{

    color:#2563eb;

}

.faq-icon{

    width:34px;

    height:34px;

    border-radius:50%;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.2rem;

    transition:.3s;

    flex-shrink:0;

}

.faq-item.active .faq-icon{

    background:#2563eb;

    color:#fff;

    transform:rotate(45deg);

}

/*====================================
Answer
====================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

}

.faq-item.active .faq-answer{

    max-height:250px;

}

.faq-answer p{

    padding:0 30px 30px;

    color:#64748b;

    line-height:1.8;

    margin:0;

}

/*====================================
Responsive
====================================*/

@media(max-width:992px){

.faq-wrapper{

grid-template-columns:1fr;

gap:50px;

}

.faq-intro{

position:relative;

top:auto;

text-align:center;

}

.faq-contact{

text-align:left;

}

}

@media(max-width:768px){

.faq{

padding:90px 0;

}

.faq-intro h2{

font-size:2rem;

}

.faq-question{

padding:22px;

font-size:1rem;

}

.faq-answer p{

padding:0 22px 22px;

}

}

@media(max-width:480px){

.faq-contact{

flex-direction:column;

align-items:flex-start;

}

.contact-icon{

width:55px;

height:55px;

}

}

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

.footer{

    background:#0f172a;
    color:#cbd5e1;

    padding:80px 0 30px;

}

.footer-grid{

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:50px;

}

.footer-logo{

    width:220px;
    margin-bottom:25px;

}

.footer-column h4{

    color:#fff;

    margin-bottom:20px;

    font-size:18px;

}

.footer-column p{

    line-height:1.8;
    color:#94a3b8;

}

.footer-column ul{

    list-style:none;
    padding:0;
    margin:0;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column a{

    color:#94a3b8;
    text-decoration:none;
    transition:.3s;

}

.footer-column a:hover{

    color:#3b82f6;

}

.footer-column i{

    color:#3b82f6;
    width:22px;

}

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

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

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;

}

.footer-links{

    display:flex;
    gap:25px;

}

.footer-links a{

    color:#94a3b8;
    text-decoration:none;

}

.footer-links a:hover{

    color:#fff;

}

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

@media(max-width:768px){

    .footer{

        padding:60px 20px 30px;

    }

    .footer-grid{

        grid-template-columns:1fr;
        gap:35px;

    }

    .footer-logo{

        width:180px;

    }

    .footer-bottom{

        flex-direction:column;
        text-align:center;

    }

    .footer-links{

        justify-content:center;
        flex-wrap:wrap;

    }

}

/*=========================================
    END OF SECTIONS.CSS
==========================================*/