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

.fc-hero{

    position:relative;

    min-height:820px;

    display:flex;

    align-items:center;

    overflow:visible;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.90) 28%,
            rgba(255,255,255,.55) 52%,
            rgba(255,255,255,0) 72%
        ),
        url("https://fingerclean.at/wp-content/uploads/2026/08/chatgpt-image-3-avg.-2026-g.-21_17_12.png")
        center center / cover
        no-repeat;

}


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

.fc-hero__container{

    width:100%;
    max-width:1320px;

    margin:0 auto;

    padding:40px 40px 90px;

}


/* ==========================================================
   CONTENT
========================================================== */

.fc-hero__content{

    max-width:620px;

}

/* ==========================================================
   LABEL
========================================================== */

.fc-hero__label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:26px;

    color:#4A8E32;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

}

.fc-dot{

    width:9px;

    height:9px;

    border-radius:50%;

    background:#4A8E32;

}


/* ==========================================================
   TITLE
========================================================== */

.fc-hero h1{

    margin:0;

    color:#14387B;

    font-size:78px;

    line-height:1.02;

    font-weight:800;

    letter-spacing:-2px;

}


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

.fc-hero p{

    margin:34px 0 46px;

    max-width:560px;

    color:#5B6473;

    font-size:22px;

    line-height:1.75;

}


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

.fc-hero-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 36px;

    border-radius:16px;

    background:#4A8E32;

    color:#fff;

    font-size:18px;

    font-weight:700;

    text-decoration:none;

    transition:.3s;

    box-shadow:0 18px 40px rgba(74,142,50,.25);

}

.fc-hero-btn:hover{

    background:#3D7C2C;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 24px 45px rgba(74,142,50,.30);

}

.fc-hero-btn svg{

    transition:.3s;

}

.fc-hero-btn:hover svg{

    transform:translateX(5px);

}

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

.fc-features-wrap{

    position:relative;

    max-width:1320px;

    margin:-110px auto 80px;

    padding:0 40px;

    z-index:20;

}

.fc-features{

    display:grid;

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

    gap:24px;

}

.fc-feature{

    background:#ffffff;

    border-radius:26px;

    padding:34px 22px;

    text-align:center;

    box-shadow:
        0 18px 45px rgba(20,56,123,.08);

    border:1px solid rgba(20,56,123,.05);

    transition:.3s;

}

.fc-feature img{

    width:58px;

    height:58px;

    object-fit:contain;

    margin:0 auto 18px;

    display:block;

}

.fc-feature span{

    display:block;

    color:#14387B;

    font-size:18px;

    font-weight:700;

    line-height:1.45;

}

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

@media (max-width:1024px){

    .fc-hero{

        min-height:680px;

        background-position:center center;

    }

    .fc-hero__container{

        padding:70px 30px 140px;

    }

    .fc-hero__content{

        max-width:520px;

    }

    .fc-hero h1{

        font-size:58px;

    }

    .fc-hero p{

        font-size:20px;

        max-width:460px;

    }

    .fc-features-wrap{

        padding:0 30px;

        margin:-80px auto 60px;

    }

    .fc-features{

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

        gap:20px;

    }

}

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

@media (max-width:767px){

    .fc-hero{

        min-height:auto;

        background-position:72% top;

        background-size:cover;

    }

    .fc-hero__container{

        padding:50px 20px 80px;

    }

    .fc-hero__content{

        max-width:100%;

    }

    .fc-hero__label{

        font-size:12px;

        letter-spacing:2px;

    }

    .fc-hero h1{

        font-size:42px;

        line-height:1.08;

    }

    .fc-hero p{

        font-size:17px;

        line-height:1.6;

        margin:24px 0 34px;

        max-width:100%;

    }

    .fc-hero-btn{

        width:100%;

        justify-content:center;

    }

    .fc-features-wrap{

        margin:-40px auto 40px;

        padding:0 20px;

    }

    .fc-features{

        grid-template-columns:1fr;

        gap:16px;

    }

    .fc-feature{

        display:flex;

        align-items:center;

        gap:18px;

        text-align:left;

        padding:20px;

    }

    .fc-feature img{

        width:48px;

        height:48px;

        margin:0;

        flex-shrink:0;

    }

    .fc-feature span{

        font-size:17px;

    }

}