/* =====================================================
   QRESTA WEBSITE
   PART 1A
===================================================== */


/* RESET */

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

html{
    scroll-behavior:smooth;
}

body{

    background:#f5f8fc;

    color:#0d1d45;

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

    overflow-x:hidden;

    line-height:1.5;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    font-family:inherit;

    cursor:pointer;

}


/* =====================================================
   PAGE
===================================================== */

.page{

    width:100%;

    overflow:hidden;

}


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

.siteHeader{

    position:sticky;

    top:0;

    z-index:1000;

    width:100%;

    background:#061b52;

    backdrop-filter:blur(10px);

    box-shadow:

        0 10px 25px
        rgba(0,0,0,.10);

}

.siteHeaderInner{

    width:min(1400px,100%);

    margin:auto;

    padding:

        18px
        clamp(20px,5vw,60px);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


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

.qrestaLogo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.qrestaLogoImage{

    width:190px;

    height:auto;

}


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

.desktopNav{

    display:flex;

    align-items:center;

    gap:34px;

    margin-left:auto;

}

.desktopNav a{

    position:relative;

    color:white;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.desktopNav a:hover{

    color:#78c5ff;

}

.desktopNav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#3da8ff;

    transition:.25s;

}

.desktopNav a:hover::after{

    width:100%;

}


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

.headerActions{

    display:flex;

    align-items:center;

    gap:12px;

}

.headerButton{

    min-height:46px;

    padding:

        0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    font-size:14px;

    font-weight:700;

    transition:.25s;

}

.headerButtonOutline{

    color:white;

    border:

        1px solid
        rgba(255,255,255,.45);

}

.headerButtonOutline:hover{

    background:

        rgba(255,255,255,.10);

}

.headerButtonPrimary{

    color:white;

    background:

        linear-gradient(
            135deg,
            #1487ff,
            #0664d6
        );

}

.headerButtonPrimary:hover{

    transform:

        translateY(-2px);

}


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

.mobileMenuButton{

    display:none;

    width:46px;

    height:46px;

    border:none;

    border-radius:8px;

    background:

        rgba(255,255,255,.12);

    color:white;

    font-size:24px;

}


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

.growthHero{

    position:relative;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #041b4e 0%,
            #083b9e 65%,
            #106cff 100%
        );

    color:white;

}


/* BACKGROUND GLOWS */

.heroGlow{

    position:absolute;

    border-radius:50%;

    filter:blur(30px);

    opacity:.30;

}

.heroGlowOne{

    width:350px;

    height:350px;

    background:#53b5ff;

    top:-120px;

    right:-120px;

}

.heroGlowTwo{

    width:260px;

    height:260px;

    background:#006eff;

    bottom:-120px;

    left:-80px;

}


/* DOTS */

.heroDots{

    position:absolute;

    right:7%;

    top:12%;

    width:260px;

    height:260px;

    opacity:.12;

    background-image:

        radial-gradient(

            white 1px,

            transparent 1px

        );

    background-size:

        18px 18px;

}


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

.growthHeroInner{

    position:relative;

    z-index:5;

    width:min(1400px,100%);

    margin:auto;

    min-height:720px;

    padding:

        70px
        clamp(25px,5vw,70px);

    display:grid;

    grid-template-columns:

        .95fr
        1.05fr;

    align-items:center;

    gap:60px;

}


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

.growthHeroCopy{

    max-width:640px;

}

.heroTag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:

        11px 24px;

    border-radius:999px;

    background:

        rgba(255,255,255,.10);

    border:

        1px solid
        rgba(255,255,255,.25);

    font-size:12px;

    letter-spacing:1px;

    font-weight:700;

    margin-bottom:30px;

}

.growthHeroCopy h1{

    font-size:

        clamp(
            48px,
            5vw,
            72px
        );

    line-height:1.02;

    letter-spacing:-2px;

    margin-bottom:25px;

}

.growthHeroCopy h1 span{

    color:#8bd1ff;

}

.heroDescription{

    font-size:19px;

    color:

        rgba(255,255,255,.88);

    margin-bottom:25px;

}

.heroStartingText{

    font-size:20px;

    font-weight:700;

    color:#8ed2ff;

    margin-bottom:32px;

}


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

.heroButtons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.heroButton{

    min-height:56px;

    padding:

        0 28px;

    border-radius:10px;

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    transition:.25s;

}

.heroButton:hover{

    transform:

        translateY(-3px);

}

.heroButtonLight{

    background:white;

    color:#0b58d5;

}

.heroButtonBlue{

    color:white;

    background:

        linear-gradient(
            135deg,
            #0f6fe9,
            #1494ff
        );

}

.heroButtonIcon{

    font-size:17px;

}
/* =====================================================
   QRESTA WEBSITE
   PART 1B
   ADD THIS DIRECTLY UNDER PART 1A
===================================================== */


/* =====================================================
   HERO RIGHT VISUAL
===================================================== */

.heroVisual{

    position:relative;

    min-height:560px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =====================================================
   LAPTOP IMAGE
===================================================== */

.heroLaptopWrap{
    position:absolute;
    width:1150px;
    max-width:none;

    right:-170px;
    top:62%;

    transform:translateY(-50%);

    z-index:2;

    filter:
        drop-shadow(
            0 35px 45px
            rgba(0,0,0,.28)
        );
}

.heroLaptopImage{

    width:100%;

    height:auto;

    object-fit:contain;

}


/* =====================================================
   PHONE IMAGE
===================================================== */
.heroPhoneWrap{

    position:absolute;

    width:300px;

    right:-260px;

    bottom:-180px;

    z-index:4;

    filter:
        drop-shadow(
            0 30px 35px
            rgba(0,0,0,.30)
        );

}
/* =====================================================
   DEVICE DECORATIONS
===================================================== */

.heroVisual::before{

    content:"";

    position:absolute;

    width:430px;

    height:430px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(73,170,255,.42),
            rgba(73,170,255,.06) 60%,
            transparent 72%
        );

    right:45px;

    top:60px;

    z-index:0;

}

.heroVisual::after{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:28px;

    border:

        1px solid
        rgba(255,255,255,.18);

    transform:rotate(18deg);

    left:30px;

    bottom:65px;

    z-index:1;

}


/* =====================================================
   GENERAL SECTION HEADING
===================================================== */

.sectionHeading{

    width:min(1000px,100%);

    margin:

        0 auto 45px;

    padding:

        0 20px;

    text-align:center;

}

.sectionHeading h2{

    color:#10214c;

    font-size:

        clamp(
            34px,
            4vw,
            52px
        );

    line-height:1.12;

    letter-spacing:-1.5px;

}

.sectionHeading p{

    max-width:680px;

    margin:

        16px auto 0;

    color:#69758e;

    font-size:18px;

}


/* =====================================================
   LARGE TABLET
===================================================== */

@media(max-width:1200px){

    .desktopNav{

        gap:20px;

    }

    .desktopNav a{

        font-size:14px;

    }

    .headerButton{

        padding:

            0 16px;

    }

    .growthHeroInner{

        grid-template-columns:

            .9fr
            1.1fr;

        gap:30px;

    }

    .growthHeroCopy h1{

        font-size:

            clamp(
                43px,
                5vw,
                62px
            );

    }

    .heroLaptopWrap{

        width:min(620px,94%);

        right:-20px;

    }

    .heroPhoneWrap{

        width:185px;

        right:-15px;

    }

}


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

@media(max-width:1050px){

    .siteHeaderInner{

        flex-wrap:wrap;

        padding-top:14px;

        padding-bottom:14px;

    }

    .desktopNav{

        position:absolute;

        top:100%;

        left:0;

        right:0;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:15px 24px 24px;

        background:#061b52;

        box-shadow:

            0 18px 30px
            rgba(0,0,0,.18);

    }

    .desktopNav.open{

        display:flex;

    }

    .desktopNav a{

        padding:

            14px 4px;

        border-bottom:

            1px solid
            rgba(255,255,255,.10);

    }

    .desktopNav a::after{

        display:none;

    }

    .mobileMenuButton{

        display:flex;

        align-items:center;

        justify-content:center;

        order:3;

    }

    .headerActions{

        margin-left:auto;

    }

    .growthHeroInner{

        min-height:auto;

        padding-top:65px;

        padding-bottom:70px;

        grid-template-columns:1fr;

        text-align:center;

    }

    .growthHeroCopy{

        max-width:780px;

        margin:auto;

    }

    .heroButtons{

        justify-content:center;

    }

    .heroVisual{

        width:min(850px,100%);

        min-height:500px;

        margin:auto;

    }

    .heroLaptopWrap{

        width:min(670px,86%);

        right:50%;

        transform:

            translate(50%,-50%);

    }

    .heroPhoneWrap{

        width:190px;

        right:8%;

        bottom:5px;

    }

}


/* =====================================================
   SMALL TABLET
===================================================== */

@media(max-width:760px){

    .siteHeaderInner{

        gap:14px;

    }

    .qrestaLogoImage{

        width:155px;

    }

    .headerActions{

        display:none;

    }

    .mobileMenuButton{

        margin-left:auto;

    }

    .growthHeroInner{

        padding:

            55px 20px 60px;

    }

    .heroTag{

        padding:

            9px 17px;

        font-size:10px;

        margin-bottom:23px;

    }

    .growthHeroCopy h1{

        font-size:

            clamp(
                39px,
                10vw,
                55px
            );

        letter-spacing:-1.2px;

    }

    .heroDescription{

        font-size:17px;

    }

    .heroStartingText{

        font-size:18px;

    }

    .heroVisual{

        min-height:410px;

    }

    .heroLaptopWrap{

        width:96%;

        right:50%;

    }

    .heroPhoneWrap{

        width:145px;

        right:1%;

        bottom:18px;

    }

    .heroVisual::before{

        width:320px;

        height:320px;

        right:50%;

        transform:translateX(50%);

    }

    .heroVisual::after{

        display:none;

    }

}


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

@media(max-width:520px){

    .siteHeaderInner{

        padding:

            13px 16px;

    }

    .qrestaLogoImage{

        width:140px;

    }

    .mobileMenuButton{

        width:42px;

        height:42px;

        font-size:21px;

    }

    .growthHeroInner{

        padding:

            45px 16px 50px;

    }

    .growthHeroCopy h1{

        font-size:39px;

        line-height:1.04;

    }

    .heroDescription{

        font-size:16px;

        line-height:1.65;

    }

    .heroButtons{

        width:100%;

        flex-direction:column;

    }

    .heroButton{

        width:100%;

        justify-content:center;

    }

    .heroVisual{

        min-height:330px;

        margin-top:15px;

    }

    .heroLaptopWrap{

        width:108%;

    }

    .heroPhoneWrap{

        width:112px;

        right:-5px;

        bottom:8px;

    }

    .heroDots{

        display:none;

    }

    .sectionHeading h2{

        font-size:33px;

    }

    .sectionHeading p{

        font-size:16px;

    }

}
/* =====================================================
   QRESTA WEBSITE
   PART 2
   ADD THIS DIRECTLY UNDER PART 1B
===================================================== */


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

.featureSection{

    padding:

        95px
        20px
        105px;

    background:#f5f8fc;

}

.featureSliderOuter{

    position:relative;

    width:min(1320px,100%);

    margin:auto;

    padding:

        0 55px;

}

.featureSlider{

    display:flex;

    gap:22px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    padding:

        12px 4px
        28px;

}

.featureSlider::-webkit-scrollbar{

    display:none;

}


/* =====================================================
   FEATURE CARDS
===================================================== */

.featureCard{

    flex:

        0 0
        calc(
            25% - 17px
        );

    min-width:250px;

    min-height:315px;

    padding:

        34px
        28px
        30px;

    border-radius:22px;

    background:white;

    border:

        1px solid
        #e5ebf4;

    box-shadow:

        0 18px 45px
        rgba(15,35,78,.08);

    scroll-snap-align:start;

    transition:

        transform .25s,
        box-shadow .25s,
        border-color .25s;

    cursor:pointer;

}

.featureCard:hover{

    transform:

        translateY(-8px);

    box-shadow:

        0 26px 55px
        rgba(15,35,78,.14);

    border-color:#cbd9ed;

}

.featureCard:focus{

    outline:

        3px solid
        rgba(32,132,255,.25);

    outline-offset:4px;

}

.featureIcon{

    width:68px;

    height:68px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

}

.featureIcon img{

    width:34px;

    height:34px;

    object-fit:contain;

}

.featureIconBlue{

    background:#eaf3ff;

}

.featureIconGreen{

    background:#e8f9f1;

}

.featureIconOrange{

    background:#fff1e4;

}

.featureIconPurple{

    background:#f2ebff;

}

.featureIconTeal{

    background:#e7f9fa;

}

/* LARGE FEATURE IMAGE */
/* LARGE FEATURE IMAGE */

.featureCard{
    padding:0;
    overflow:hidden;
}

.featureCardImage{
    width:100%;
    height:220px;
    overflow:hidden;
    background:#eef4fb;
}

.featureCardImage img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.featureCard h3{
    padding:24px 24px 0;
    margin-bottom:14px;
}

.featureCard p{
    padding:0 24px;
}

.featureLearn{
    margin:20px 24px 24px;
}


.featureCard h3{

    margin-bottom:15px;

    color:#10214c;

    font-size:23px;

    line-height:1.2;

}

.featureCard p{

    min-height:78px;

    color:#6c7890;

    font-size:16px;

    line-height:1.65;

}

.featureLearn{

    display:inline-flex;

    margin-top:20px;

    font-size:15px;

    font-weight:800;

}

.featureLearnBlue{

    color:#1f7df0;

}

.featureLearnGreen{

    color:#19a46b;

}

.featureLearnOrange{

    color:#f28a27;

}

.featureLearnPurple{

    color:#8752d8;

}

.featureLearnTeal{

    color:#17a6a9;

}


/* =====================================================
   SLIDER ARROWS
===================================================== */

.sliderArrow{

    position:absolute;

    top:50%;

    transform:

        translateY(-50%);

    z-index:10;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    color:#154aa3;

    font-size:32px;

    line-height:1;

    box-shadow:

        0 12px 28px
        rgba(15,35,78,.16);

    transition:.22s;

}

.sliderArrow:hover{

    transform:

        translateY(-50%)
        scale(1.08);

    background:#116de7;

    color:white;

}

.sliderArrowLeft{

    left:0;

}

.sliderArrowRight{

    right:0;

}


/* =====================================================
   SLIDER DOTS
===================================================== */

.sliderDots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:18px;

}

.sliderDot{

    width:8px;

    height:8px;

    border-radius:999px;

    background:#cbd5e3;

    transition:.25s;

}

.sliderDot.active{

    width:28px;

    background:#1878ec;

}


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

.designSection{

    padding:

        95px
        20px
        105px;

    background:white;

}

.designHeading{

    margin-bottom:48px;

}

.designSliderOuter{

    position:relative;

    width:min(1320px,100%);

    margin:auto;

    padding:

        0 55px;

}

.designSlider{

    display:flex;

    gap:22px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;

    padding:

        12px 4px
        28px;

}

.designSlider::-webkit-scrollbar{

    display:none;

}


/* =====================================================
   DESIGN CARDS
===================================================== */

.designCard{

    flex:

        0 0
        calc(
            33.333% - 15px
        );

    min-width:285px;

    overflow:hidden;

    border-radius:20px;

    background:white;

    border:

        1px solid
        #e2e8f1;

    box-shadow:

        0 16px 40px
        rgba(16,33,76,.09);

    scroll-snap-align:start;

    transition:

        transform .25s,
        box-shadow .25s;

    cursor:pointer;

}

.designCard:hover{

    transform:

        translateY(-7px);

    box-shadow:

        0 25px 55px
        rgba(16,33,76,.15);

}

.designCard:focus{

    outline:

        3px solid
        rgba(32,132,255,.25);

    outline-offset:4px;

}

/* =====================================================
   DESIGN IMAGE
===================================================== */

.designImageWrap{

    position:relative;

    width:100%;

    height:360px;          /* Increase to 380px or 400px if desired */

    overflow:hidden;

    background:#eaf0f8;

}

.designImageWrap::after{

    content:"Preview";

    position:absolute;

    left:50%;

    top:50%;

    transform:
        translate(-50%,-40%);

    padding:
        10px 18px;

    border-radius:999px;

    background:
        rgba(7,34,91,.88);

    color:white;

    font-size:13px;

    font-weight:800;

    opacity:0;

    transition:.25s;

}

.designCard:hover .designImageWrap::after{

    opacity:1;

    transform:
        translate(-50%,-50%);

}

.designImageWrap img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.08);

    transition:
        transform .4s,
        filter .4s;

}

.designCard:hover .designImageWrap img{

    transform:scale(1.15);

    filter:brightness(.88);

}

.designCard:hover
.designImageWrap img{

    transform:scale(1.05);

    filter:brightness(.82);

}

.designCard h3{

    padding:

        22px 22px
        24px;

    color:#10214c;

    font-size:21px;

}


/* =====================================================
   VIEW ALL DESIGNS BUTTON
===================================================== */

.viewAllDesignsButton{

    min-width:190px;

    min-height:52px;

    margin:

        32px auto 0;

    padding:

        0 28px;

    border:

        1px solid
        #b9c8df;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:white;

    color:#115fc8;

    font-size:15px;

    font-weight:800;

    transition:.25s;

}

.viewAllDesignsButton:hover{

    background:#115fc8;

    color:white;

    border-color:#115fc8;

    transform:

        translateY(-2px);

}


/* =====================================================
   BOTTOM ACTION SECTION
===================================================== */

.bottomActionSection{

    padding:

        65px
        20px
        75px;

    background:

        linear-gradient(
            180deg,
            #f7faff,
            #eef4fc
        );

}

.bottomActionButtons{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:16px;

}

.bottomActionButton{

    min-width:215px;

    min-height:58px;

    padding:

        0 28px;

    border-radius:11px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:16px;

    font-weight:800;

    transition:.25s;

}

.bottomActionButton:hover{

    transform:

        translateY(-3px);

}

.bottomActionLight{

    background:white;

    color:#145fc7;

    border:

        1px solid
        #c8d7eb;

    box-shadow:

        0 12px 30px
        rgba(16,33,76,.08);

}

.bottomActionBlue{

    color:white;

    background:

        linear-gradient(
            135deg,
            #0f6fe9,
            #1594ff
        );

    box-shadow:

        0 14px 32px
        rgba(17,111,233,.22);

}

.bottomActionIcon{

    font-size:18px;

}


/* =====================================================
   FEATURE AND DESIGN RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .featureCard{

        flex:

            0 0
            calc(
                33.333% - 15px
            );

    }

    .designCard{

        flex:

            0 0
            calc(
                50% - 11px
            );

    }

}


@media(max-width:800px){

    .featureSection,
    .designSection{

        padding:

            75px
            16px
            80px;

    }

    .featureSliderOuter,
    .designSliderOuter{

        padding:

            0 42px;

    }

    .featureCard{

        flex:

            0 0
            calc(
                50% - 11px
            );

    }

    .sliderArrow{

        width:40px;

        height:40px;

        font-size:28px;

    }

}


@media(max-width:560px){

    .featureSliderOuter,
    .designSliderOuter{

        padding:

            0 6px;

    }

    .featureCard,
    .designCard{

        flex:

            0 0
            88%;

        min-width:0;

    }

    .featureCard{

        min-height:300px;

        padding:

            30px
            24px;

    }

    .sliderArrow{

        display:none;

    }

    .sliderDots{

        margin-top:12px;

    }

    .bottomActionButtons{

        flex-direction:column;

    }

    .bottomActionButton{

        width:100%;

        max-width:380px;

    }

}
/* =====================================================
   QRESTA WEBSITE
   PART 3
   ADD THIS DIRECTLY UNDER PART 2
===================================================== */


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

.siteFooter{

    background:#061b52;

    color:white;

    padding:

        70px
        20px
        25px;

}

.footerInner{

    width:min(1320px,100%);

    margin:auto;

    display:grid;

    grid-template-columns:

        1.4fr
        repeat(5,1fr);

    gap:38px;

    align-items:start;

}

.footerBrand{

    padding-right:20px;

}

.footerLogo{

    display:inline-flex;

    align-items:center;

}

.footerLogo img{

    width:185px;

    height:auto;

}

.footerColumn{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.footerColumn h3{

    margin-bottom:8px;

    font-size:16px;

    color:white;

}

.footerColumn a{

    color:

        rgba(255,255,255,.72);

    font-size:14px;

    transition:.22s;

}

.footerColumn a:hover{

    color:#79c5ff;

}

.footerSocialLinks{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}

.socialLink{

    width:36px;

    height:36px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        rgba(255,255,255,.10);

    border:

        1px solid
        rgba(255,255,255,.16);

    color:white !important;

    font-size:13px !important;

    font-weight:800;

}

.socialLink:hover{

    background:#157fe9;

    border-color:#157fe9;

    transform:translateY(-2px);

}

.footerBottom{

    width:min(1320px,100%);

    margin:

        55px auto 0;

    padding-top:22px;

    border-top:

        1px solid
        rgba(255,255,255,.12);

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footerBottom p{

    color:

        rgba(255,255,255,.62);

    font-size:13px;

}

.footerLegal{

    display:flex;

    gap:22px;

}

.footerLegal a{

    color:

        rgba(255,255,255,.62);

    font-size:13px;

    transition:.22s;

}

.footerLegal a:hover{

    color:white;

}


/* =====================================================
   MODAL BASE
===================================================== */

.qrestaModal{

    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:24px;

}

.qrestaModal.open{

    display:flex;

}

.qrestaModalOverlay{

    position:absolute;

    inset:0;

    background:

        rgba(2,15,48,.76);

    backdrop-filter:blur(8px);

}

.qrestaModalContent{

    position:relative;

    z-index:2;

    width:min(720px,100%);

    max-height:90vh;

    overflow-y:auto;

    padding:

        46px
        42px
        40px;

    border-radius:24px;

    background:white;

    color:#10214c;

    box-shadow:

        0 35px 90px
        rgba(0,0,0,.30);

    animation:

        qrestaModalOpen
        .28s ease;

}

@keyframes qrestaModalOpen{

    from{

        opacity:0;

        transform:

            translateY(24px)
            scale(.97);

    }

    to{

        opacity:1;

        transform:

            translateY(0)
            scale(1);

    }

}

.qrestaModalClose{

    position:absolute;

    top:18px;

    right:18px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef3fa;

    color:#173c79;

    font-size:28px;

    line-height:1;

    transition:.22s;

}

.qrestaModalClose:hover{

    background:#0f70e7;

    color:white;

    transform:rotate(90deg);

}

.modalIcon{

    width:72px;

    height:72px;

    margin-bottom:22px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            135deg,
            #0e6be5,
            #35a8ff
        );

    color:white;

    font-size:30px;

    font-weight:900;

    box-shadow:

        0 15px 30px
        rgba(18,116,234,.22);

}

.modalLabel{

    margin-bottom:10px;

    color:#1376e9;

    font-size:12px;

    font-weight:900;

    letter-spacing:1.3px;

}

.qrestaModalContent h2{

    margin-bottom:16px;

    font-size:

        clamp(
            30px,
            5vw,
            42px
        );

    line-height:1.12;

}

.qrestaModalContent > p:not(.modalLabel){

    color:#68758e;

    font-size:17px;

    line-height:1.7;

}


/* =====================================================
   MODAL FEATURE GRID
===================================================== */

.modalFeatureGrid{

    display:grid;

    grid-template-columns:

        repeat(2,1fr);

    gap:14px;

    margin-top:28px;

}

.modalFeatureItem{

    padding:

        18px
        17px;

    border-radius:14px;

    display:flex;

    align-items:flex-start;

    gap:11px;

    background:#f5f8fc;

    border:

        1px solid
        #e4eaf3;

}

.modalFeatureCheck{

    flex-shrink:0;

    width:24px;

    height:24px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e3f2ff;

    color:#0d70e8;

    font-size:13px;

    font-weight:900;

}

.modalFeatureText{

    color:#34415c;

    font-size:14px;

    line-height:1.5;

}


/* =====================================================
   MODAL ACTIONS
===================================================== */

.modalActions{

    margin-top:32px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.modalPrimaryButton,
.modalSecondaryButton{

    min-height:52px;

    padding:

        0 25px;

    border-radius:10px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border:none;

    font-size:15px;

    font-weight:800;

    transition:.24s;

}

.modalPrimaryButton{

    color:white;

    background:

        linear-gradient(
            135deg,
            #0d6fe8,
            #1598ff
        );

}

.modalPrimaryButton:hover{

    transform:translateY(-2px);

    box-shadow:

        0 13px 28px
        rgba(15,111,232,.22);

}

.modalSecondaryButton{

    background:white;

    color:#155fc3;

    border:

        1px solid
        #c6d4e7;

}

.modalSecondaryButton:hover{

    background:#edf5ff;

    transform:translateY(-2px);

}


/* =====================================================
   DESIGN MODAL
===================================================== */

.designModalContent{

    width:min(920px,100%);

}

.designPreviewImage{

    width:100%;

    margin:

        24px 0;

    overflow:hidden;

    border-radius:18px;

    background:#edf2f8;

    border:

        1px solid
        #dce5f1;

    box-shadow:

        0 18px 38px
        rgba(15,35,78,.10);

}

.designPreviewImage img{

    width:100%;

    max-height:480px;

    object-fit:cover;

}


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

.qrestaModalContent::-webkit-scrollbar{

    width:8px;

}

.qrestaModalContent::-webkit-scrollbar-track{

    background:#edf2f8;

    border-radius:20px;

}

.qrestaModalContent::-webkit-scrollbar-thumb{

    background:#b6c7de;

    border-radius:20px;

}


/* =====================================================
   BODY MODAL LOCK
===================================================== */

body.modalOpen{

    overflow:hidden;

}


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

@media(max-width:1150px){

    .footerInner{

        grid-template-columns:

            repeat(3,1fr);

    }

    .footerBrand{

        grid-column:

            1 / -1;

    }

}


@media(max-width:760px){

    .siteFooter{

        padding-top:55px;

    }

    .footerInner{

        grid-template-columns:

            repeat(2,1fr);

        gap:34px 24px;

    }

    .footerBottom{

        flex-direction:column;

        align-items:flex-start;

    }

}


@media(max-width:500px){

    .footerInner{

        grid-template-columns:1fr;

    }

    .footerBrand{

        grid-column:auto;

    }

    .footerLegal{

        flex-direction:column;

        gap:8px;

    }

}


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

@media(max-width:700px){

    .qrestaModal{

        padding:14px;

    }

    .qrestaModalContent{

        padding:

            42px
            24px
            28px;

        border-radius:19px;

    }

    .modalFeatureGrid{

        grid-template-columns:1fr;

    }

    .modalActions{

        flex-direction:column;

    }

    .modalPrimaryButton,
    .modalSecondaryButton{

        width:100%;

    }

}


@media(max-width:430px){

    .qrestaModalContent{

        padding:

            40px
            18px
            24px;

    }

    .qrestaModalClose{

        top:12px;

        right:12px;

        width:38px;

        height:38px;

    }

    .modalIcon{

        width:62px;

        height:62px;

        font-size:26px;

    }

    .qrestaModalContent h2{

        font-size:30px;

    }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}
/* =====================================================
   FEATURE MODAL
===================================================== */

.qrestaModal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    padding:30px;
    z-index:99999;
}

.qrestaModal.open{
    display:flex;
}

.qrestaModalOverlay{
    position:absolute;
    inset:0;
    background:rgba(8,20,45,.72);
    backdrop-filter:blur(5px);
}

.qrestaModalContent{
    position:relative;
    width:min(760px,95%);
    max-height:90vh;
    overflow-y:auto;
    background:#fff;
    border-radius:24px;
    padding:40px;
    z-index:2;
    box-shadow:
        0 30px 70px rgba(0,0,0,.25);
}

.qrestaModalClose{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:#eef3fb;
    cursor:pointer;
    font-size:24px;
}

.modalIcon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:#0f5fe8;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    font-weight:700;
    margin-bottom:20px;
}

.modalLabel{
    color:#0f5fe8;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

#modalTitle{
    margin:10px 0;
    font-size:36px;
    color:#14295d;
}

#modalDescription{
    color:#5e6b84;
    line-height:1.7;
    margin-bottom:30px;
}

.modalFeatureGrid{
    display:grid;
    gap:14px;
    margin-bottom:30px;
}

.modalFeatureItem{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border-radius:12px;
    background:#f6f9ff;
}

.modalFeatureCheck{
    color:#0f5fe8;
    font-size:22px;
    font-weight:700;
}

.modalFeatureText{
    color:#23365f;
    line-height:1.5;
}

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

.modalPrimaryButton,
.modalSecondaryButton{
    padding:14px 28px;
    border-radius:12px;
    text-decoration:none;
    font-weight:700;
}

.modalPrimaryButton{
    background:#0f5fe8;
    color:#fff;
}

.modalSecondaryButton{
    border:2px solid #0f5fe8;
    color:#0f5fe8;
    background:#fff;
}

body.modalOpen{
    overflow:hidden;
}

/* =====================================================
   QUICK CONTACT FORM
===================================================== */

.quickContactContent{
    width:min(650px,95%);
}

#quickContactForm{
    display:grid;
    gap:12px;
    margin-top:24px;
}

#quickContactForm label{
    color:#20345d;
    font-weight:700;
}

#quickContactForm input,
#quickContactForm textarea{
    width:100%;
    padding:14px;
    border:1px solid #d5deeb;
    border-radius:10px;
    background:#f8fbff;
    color:#10214c;
    font:inherit;
}

#quickContactForm textarea{
    resize:vertical;
    min-height:130px;
}

#quickContactForm input:focus,
#quickContactForm textarea:focus{
    outline:none;
    border-color:#1677ed;
    box-shadow:0 0 0 4px rgba(22,119,237,.12);
}

#quickContactStatus{
    min-height:22px;
    font-weight:700;
}

#quickContactStatus.success{
    color:#16844f;
}

#quickContactStatus.error{
    color:#c63333;
}
.footerLogo img{
    width:24px;
    height:24px;
    object-fit:contain;
    display:block;
}
/* Keep hero buttons above the laptop and phone images */
.growthHeroCopy,
.heroButtons,
.heroButton {
    position: relative;
    z-index: 20;
}

.heroVisual {
    position: relative;
    z-index: 5;
    pointer-events: none;
}

.heroVisual img {
    pointer-events: none;
}

.heroButton {
    pointer-events: auto;
}
/* =====================================================
   HEADER LOGO + MOBILE HERO OVERRIDE
   Keep this at the very bottom of styles.css
===================================================== */

/* Smaller header logo on desktop */
.qrestaLogoImage {
    width: 115px;
    height: auto;
}

/* Keep hero in desktop-style two-column layout */
@media (max-width: 1050px) {

    .growthHeroInner {
        min-height: 560px;
        grid-template-columns: minmax(0, 48%) minmax(0, 52%);
        align-items: center;
        gap: 15px;
        padding: 45px 20px;
        text-align: left;
    }

    .growthHeroCopy {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .growthHeroCopy h1 {
        font-size: clamp(30px, 5vw, 48px);
        line-height: 1.04;
        letter-spacing: -1px;
    }

    .heroDescription {
        font-size: 15px;
        line-height: 1.5;
    }

    .heroStartingText {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .heroButtons {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .heroButton {
        min-height: 44px;
        padding: 0 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .heroVisual {
        width: 100%;
        min-height: 390px;
        margin: 0;
    }

    .heroLaptopWrap {
        width: 145%;
        max-width: none;
        right: -30%;
        top: 53%;
        transform: translateY(-50%);
    }

    .heroPhoneWrap {
        width: 25%;
        right: -2%;
        bottom: 2%;
    }
}

/* Phone layout — still side by side */
@media (max-width: 760px) {

    .qrestaLogoImage {
        width: 90px;
    }

    .siteHeaderInner {
        padding: 9px 15px;
    }

    .growthHeroInner {
        grid-template-columns: minmax(0, 47%) minmax(0, 53%);
        gap: 6px;
        min-height: 430px;
        padding: 28px 12px;
        text-align: left;
    }

    .heroTag {
        padding: 6px 9px;
        margin-bottom: 12px;
        font-size: 7px;
        letter-spacing: 0.4px;
    }

    .growthHeroCopy h1 {
        font-size: clamp(22px, 6.4vw, 34px);
        line-height: 1.04;
        letter-spacing: -0.6px;
        margin-bottom: 14px;
    }

    .heroDescription {
        font-size: 11px;
        line-height: 1.45;
        margin-bottom: 12px;
    }

    .heroStartingText {
        font-size: 11px;
        margin-bottom: 13px;
    }

    .heroButtons {
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: 5px;
    }

    .heroButton {
        width: auto;
        min-height: 34px;
        padding: 0 8px;
        border-radius: 6px;
        gap: 4px;
        font-size: 8px;
    }

    .heroButtonIcon {
        font-size: 10px;
    }

    .heroVisual {
        min-height: 300px;
        margin: 0;
    }

.heroLaptopWrap{
    position:absolute;
    width:780px;
    right:-220px;
    top:25%;
    transform:translateY(-50%);
}

.heroPhoneWrap{
    width:220px;
    right:-40px;
    bottom:-40px;
}

    .heroVisual::before {
        width: 220px;
        height: 220px;
        right: -20px;
        top: 45px;
        transform: none;
    }
}

/* Very small phones */
@media (max-width: 520px) {

    .qrestaLogoImage {
        width: 78px;
    }

    .growthHeroInner {
        grid-template-columns: minmax(0, 49%) minmax(0, 51%);
        min-height: 365px;
        padding: 22px 9px;
    }

    .growthHeroCopy h1 {
        font-size: clamp(18px, 6vw, 27px);
    }

    .heroDescription {
        font-size: 9px;
    }

    .heroStartingText {
        font-size: 9px;
    }

.heroButton{
    min-height:30px;
    padding:0 10px;
    font-size:10px;
    border-radius:10px;
}

    .heroVisual {
        min-height: 245px;
        margin-top: 0;
    }

    .heroLaptopWrap {
        width: 185%;
        right: -33%;
    }

    .heroPhoneWrap {
        width: 71%;
        right: 20%;
        bottom: -27%;
    }
}
/* MOBILE MODAL FIX */
@media (max-width: 760px){

    .qrestaModal{
        padding:12px;
        align-items:flex-start;
        overflow-y:auto;
    }

    .qrestaModalContent,
    .quickContactContent,
    .designModalContent{
        width:100%;
        max-width:100%;
        max-height:calc(100vh - 24px);
        margin:12px auto;
        padding:54px 18px 24px;
        border-radius:18px;
        overflow-x:hidden;
        overflow-y:auto;
        box-sizing:border-box;
    }

    .qrestaModalClose{
        top:10px;
        right:10px;
        width:38px;
        height:38px;
        font-size:24px;
        z-index:20;
    }

    .modalIcon{
        width:62px;
        height:62px;
        margin-bottom:15px;
        font-size:26px;
    }

    .qrestaModalContent h2,
    #modalTitle{
        font-size:25px;
        line-height:1.15;
        margin:8px 0 12px;
    }

    .qrestaModalContent > p:not(.modalLabel),
    #modalDescription{
        font-size:14px;
        line-height:1.55;
        margin-bottom:18px;
    }

    .modalFeatureGrid{
        grid-template-columns:1fr;
        gap:9px;
        margin-top:18px;
        margin-bottom:20px;
    }

    .modalFeatureItem{
        padding:12px;
    }

    .modalActions{
        display:grid;
        grid-template-columns:1fr;
        gap:9px;
        margin-top:20px;
    }

    .modalPrimaryButton,
    .modalSecondaryButton{
        width:100%;
        min-height:44px;
        padding:10px 14px;
        box-sizing:border-box;
    }

    /* Modal images */
    .qrestaModalContent img,
    .designModalContent img{
        width:100%;
        max-width:100%;
        height:auto;
        min-height:210px;
        max-height:310px;
        object-fit:cover;
        border-radius:14px;
        display:block;
    }

    /* Form correction */
    #quickContactForm{
        width:100%;
        gap:10px;
        margin-top:18px;
    }

    #quickContactForm label{
        display:block;
        width:100%;
        font-size:13px;
    }

    #quickContactForm input,
    #quickContactForm select,
    #quickContactForm textarea{
        display:block;
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        padding:12px;
        font-size:16px;
        border-radius:10px;
    }

    #quickContactForm textarea{
        min-height:110px;
    }
}