html, body {
    height: 100%; /* serve per ancorare il 100% */
    margin: 0;
    overflow: hidden; /* disabilita lo scroll del body */
}

/*PAGE*/
.page {
    height: 100vh; /* occupa tutto il viewport */
    overflow-y: auto; /* abilita lo scroll verticale */
    scroll-snap-type: y proximity; /* oppure: y mandatory */
    scroll-behavior: smooth; /* scorrimento fluido (opzionale) */
    scroll-padding-top: var(--header-height);
    overflow-x:hidden;
}
.snap-section {
    height: 100vh; /* ogni sezione una “pagina” */
    scroll-snap-align: start; /* snap all'inizio della sezione */
    /* opzionale, utile per forzare lo stop: */
    /* scroll-snap-stop: always; */
}

/*HERO========================*/
.video-bg {
    position: absolute;
    top: 90px;
    left: -170px;
    right: 0;
    height: 688px;
    overflow: hidden;
    background: #FBFBFB; /* o #000 */
    /*transform: translateZ(0);*/
}

.video-bg video {
    /*width: 69%;*/
    display: block;
    border: 0;
    outline: 0;
    box-shadow: none;
    /* transform: translateZ(0); */
    backface-visibility: hidden;
    will-change: transform;
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
    background: #000;
}
/*.page{scroll-snap-type:none !important}*/
.snap-section{height:max-content;}
.hero-container{width:1720px;margin:auto;height:600px}
body{background-color:#FBFBFB;}
#hero{background-color:#FBFBFB;height:100vh;position:relative;padding-top:var(--header-height);overflow:hidden}
.hero-row{display:flex;padding:80px 0px 0px 20px;}
.left-hero {
    width: 20%;
    position: relative;
    z-index: 5;
}
.left-hero-header{
    margin-bottom:20px;
    display:flex;
    width:100%; 
    justify-content:space-between;
}
.left-hero-header > :nth-child(1),.left-hero-header > :nth-child(3){
    width: 40%;
}
.right-hero {
    position: relative;
    width: 63%;
    display: flex;
    justify-content: end;
}
.hero-text {
    font-size: clamp(1rem, 2vw, 1rem);
    color: #004F70;
    width:60%;
    padding:60px 0px;
}
.hero-text p{font-size:1.125rem;margin-bottom:20px;line-height:1.4375rem}
.hero-eyebrow {
    display: block;
    color: var(--ink);
    font-weight: 700;
    font-size: 4.25rem;
    letter-spacing: -.01em;
}
.hero-title {
    font-size: 4.25rem;
    color: var(--nav-color);
    font-weight: 400;
    line-height: 0.35;
    margin-bottom: 65px;
}
.cta-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.4rem
}
/*==========INCLUDE===========*/
#include {background-color: #0180B7;padding:150px 0px 300px 0px;border-radius:30px;}
.include-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.include-box {
    width: calc(100%/2 - 10px);
    height: 547px;
    background-color: #E3EFF4;
    margin-bottom: 20px;
    border-radius: 100px;
    display:flex;
}
.include-image {
    width: 45%;
    height: 100%;
    padding:24px 0px 0px 50px;
}
.include-image img{width:100%;}

.include-text{height:100%;width:55%;display:flex;align-items:end;}
#first-include-box {background-color: #0180B7;display:block;color:white;padding:50px;}
#first-include-box h3{font-size:2.625rem;margin-bottom:80px;}
#first-include-box p{width: 500px;font-size:1.4rem;line-height:1.7rem;}
.include-text-container{width:100%;padding-right: 40px;}
.include-text-container h3{font-size:2.625rem;line-height:3rem;margin-bottom:30px;}
.include-text-container p{margin-bottom:25px;}
#second-include-box .include-text .include-text-container{height:70%;}
#third-include-box .include-text .include-text-container{height:50%}
#fourth-include-box .include-text .include-text-container{height:50%}
#fifth-include-box .include-text .include-text-container{height:85%}
#sixth-include-box .include-text .include-text-container{height:50%}
/*=============HOW===============*/
#how {
    height: max-content;
    padding:250px 0px 100px;
}
.how-row{display:flex;height:100%;justify-content:space-between;}
.left-how{width:40%;display:flex;align-items:center;justify-content:center;}
.left-how-text h3{font-size:2.625rem;margin-bottom:30px;}
.right-how {
    width: 50%;
    display: flex;
    position: relative;
    gap: 130px;
}
.right-how-svg {
    position: absolute;
    top: calc(50% - 227px);
    right: -100px;
}
#linea{opacity:0;}
#linea.startGrow {
    stroke-dasharray: 4070.84;
    stroke-dashoffset: 4070.84;
    stroke-linecap: round;
    animation: draw-line 3s ease forwards;
}
@keyframes draw-line {
    to {
        opacity:1;
        stroke-dashoffset: 0;
    }
}
.right-how-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: max-content;
    gap: 20px;
}
.right-how-box {
    width: 420px;
    height: 184px;
    background-color: var(--ink);
    border-radius: 30px;
    opacity:0;
    transition:opacity 300ms ease-in-out;
    position:relative;
    display:flex;
    align-items:end;
    padding:20px;
    overflow:hidden;
}
#first-how-box.show{opacity:1;transition:opacity 500ms ease}
#second-how-box.show{opacity:1;transition:opacity 500ms ease }
#third-how-box.show{opacity:1;transition:opacity 500ms ease}
.how-box-text{color:white;height: 95%;}
.how-box-text h4{font-size:1.3rem;margin-bottom:20px;}
.how-box-img {
    position: absolute;
    width: 100%;
    top: -90px;
    right: -20px;
}
.how-box-img img{width:100%;object-fit:cover}
.right-how-svg {height: 454px;}
.right-how-svg svg{height:100%;}
/*====PINK ROW=========*/
.man-pink-row {justify-content: center;}
.man-pink-row .btn-secondary{background-color:transparent;}

/*================FAQ===============*/
#faq {
    padding: 200px 0px;
    height: max-content;
    background-color: #FBFBFB;
    position: relative;
}
.faq-container {
    height: 100%;
    padding:50px 140px;
    display:flex;
    flex-direction:column;
}
.faq-text{text-align:center;margin-bottom:40px;}
.faq-text h3{font-size: 2.625rem}
.faq-drops{
    display:flex;
    flex-direction:column;
    flex-grow:1
}
.faq-drop {
    height: 81px;
    width: 100%;
    background-color: #EFF3F4;
    margin: 10px 0px;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
    overflow: hidden;
    display: flex;
    padding: 23px 40px 23px 40px;
    cursor: pointer;
    transition: height 0.3s ease;
}
.faq-drop ul{opacity:0;transition:opacity 800ms ease-in-out;padding-left: 20px;}
.faq-drop ul li{line-height: 1rem;margin-bottom:7px}
.faq-drop.expand {
    height: 173px;
    width: 100%;
    transition: height 0.3s ease;
}
.faq-drop.faq-drop-ul.expand {
    height: 365px;
    width: 100%;
    transition: height 0.3s ease;
}
.faq-drop.expand ul{opacity:1;transition:opacity 800ms ease-in-out}

.faq-drop-text{
    flex-grow:1;
}
.faq-drop-text h4 {
    font-size: 1.5rem;
    margin-bottom:30px;
}
.faq-drop-text p {
    opacity: 0;
    font-size: 1.125rem;
    transition: opacity 0.8s ease;
    margin-bottom:10px;
}
.faq-drop.expand p {
    opacity: 1;
    transition: opacity 0.8s ease;
}

.drop-circle > .circle {
    transition: all .45s cubic-bezier(0.65,0,.076,1);
    width: 2rem;
    height: 2rem;
    background: var(--ink);
    border-radius: 1rem;
    z-index: 2;
    pointer-events: none;
    position: relative
}
.drop-circle.expand > .circle{
    background-color:var(--rosaScuro)
}

.drop-circle > .circle .icon.arrow {
    left: .625rem;
    width: 1.125rem;
    height: .125rem;
    background: none
}

.drop-circle >.circle .icon.arrow::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 11px;
    width: .5rem;
    height: .5rem;
    border-top: .125rem solid #fff;
    border-right: .125rem solid #fff;
    transform: rotate(135deg);
    transition: transform 0.3s ease;
}

.drop-circle.expand >.circle .icon.arrow::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 11px;
    width: .5rem;
    height: .5rem;
    border-top: .125rem solid #fff;
    border-right: .125rem solid #fff;
    transform: rotate(-45deg)
}

@media (max-width: 1700px) {
    .hero-container{width:95vw;height:525px;}
    /*==========HERO================*/
    .right-hero {width: 50%;}
    .hero-text{padding:40px 0px;width:75%}
    .left-hero {width: 25%;margin-right: 150px;}
    .hero-eyebrow {font-size:3.5rem;}
    .hero-title {font-size: 3.5rem;margin-bottom:40px;}
    .hero-text p{font-size:1.1rem;margin-bottom:20px;line-height:1.25rem}
    .hero-row{padding:50px 0px 0px 20px;}
    .video-bg {top: 55px;left: -290px;}
    /*============INCLUDE===============*/
    #include {padding: 120px 0px 210px 0px;border-radius: 30px;}
    .include-box {height: 460px;}
    #second-include-box .include-text .include-text-container {height: 77%;}
    #fifth-include-box .include-text .include-text-container {height: 90%;}
    #sixth-include-box .include-text .include-text-container {height: 45%;}
    .include-text-container h3 {font-size: 2.225rem;line-height: 2.6rem;margin-bottom: 15px;}
    .include-text-container p {margin-bottom: 20px;}
    .include-text-container h4 {margin-bottom: -5px;}
    .how-box-text h4 {margin-bottom: 10px;}
    .how-box-text p {line-height:1.4rem;}
    /*=============HOW==================*/
    .right-how-column {gap: 20px;}
    .how-box-text {height: 74%;}
    .right-how-svg {height: 366px;top: calc(50% - 183px);right: -30px;}
    .right-how-svg svg{height:100%;}
    /*=============FAQ==================*/
    .faq-container {padding: 30px 140px;}
    .faq-drop.expand {height: 140px;}
    .faq-text {margin-bottom: 20px;}
    .faq-drop {height: 90px;margin: 8px 0px;padding: 23px 40px 23px 40px;;border-radius:20px;}
    .faq-drop-text h4{font-size:1.2rem;margin-bottom:15px;line-height: 1.4rem;}
    .faq-drop-text p{font-size:1rem;}
    #forma-pink-row {right: 5%;top: -17%; height: 160px;}
    #forma-pink-row img{height:100%}
}

@media (max-width: 1400px) {
    /*==========HERO================*/
    .hero-text{padding:40px 0px;}
    .hero-eyebrow {font-size:2.85rem;}
    .hero-title {font-size: 2.85rem;margin-bottom:40px;}
    .hero-text p{font-size:1rem;margin-bottom:20px;line-height:1.25rem}
    .hero-row{padding:50px 0px 0px 20px;}
    .right-hero{padding-right:100px;}
    .btn-primary{font-size:1rem}
    .btn-secondary{font-size:1rem}
    /*=========INCLUDE==============*/
    .include-box {height: 380px;border-radius:60px;}
    .include-image {padding: 24px 0px 0px 20px;}
    .include-text-container {padding-right: 15px;}
    .include-text-container h3 {font-size: 1.7rem;line-height: 2rem;margin-bottom: 10px;}
    .include-text-container p {margin-bottom: 10px;font-size: 0.9rem;line-height: 1.2rem;}
    #first-include-box {padding: 30px;}
    #first-include-box h3 {font-size: 1.7rem;margin-bottom: 60px;}
    #first-include-box p {font-size: 1.1rem;margin-bottom: 60px;width: 100%;}
    #second-include-box .include-text .include-text-container {height: 80%;}
    /*===============HOW============*/
    .right-how {gap: 30px}
    .right-how-svg {right: -188px;}
    .left-how-text h3 {font-size: 1.825rem;margin-bottom: 16px;line-height: 2rem;}
    /*=============FAQ==================*/
    .faq-container {padding: 30px 0px;}
    #forma-pink-row {height: 120px;}
    #forma-pink-row img{height:100%}
    .faq-drop.faq-drop-ul.expand {height: 320px;}
}

@media(max-width:1300px){
    /*=========LEFT HERO===============*/
    .left-hero{opacity:0;width:1%;margin-right: 365px;}
    .right-hero{padding-right:0px;}
    .video-bg {top: 55px;left: -450px;}
}

@media(max-width:1100px) {
    /*=========LEFT HERO===============*/
    .left-hero {display: none;}
    .right-hero {width: 75%}
    .video-bg {height: 630px;}
    .hero-row {padding: 50px 0px 0px 50px;justify-content: end;height: 470px;}
    /*========HOW======================*/
    .how-row{width:80vw}
    .right-how-svg {right: -550px;}
    /*=========SUPPORTO================*/
    #second-include-box .include-text .include-text-container {height: 93%;}
    #third-include-box .include-text .include-text-container {height: 70%;}
    #fourth-include-box .include-text .include-text-container {height: 70%}
    #fifth-include-box .include-text .include-text-container {height: 95%;}
    .include-text-container h3 {font-size: 1.5rem;line-height: 1.8rem;margin-bottom: 10px;}
    .include-box{border-radius:40px;}
}

@media(max-width:870px){
    /*=====HERO========*/
    .hero-eyebrow{font-size:2.6rem;line-height:2.8rem;}
    .hero-title {font-size: 2.5rem;line-height:2.8rem;margin-bottom:15px;}
    .hero-row{height:380px;}
    .hero-row {padding: 50px 0px 0px 00px;}
    .hero-text {padding: 0px 0px;max-width: 80%;}
    .hero-text p{font-size:1rem;}
    .video-bg {height: 490px;}
    /*=====INCLUDE=====*/
    .include-container {
        width: 75%;
        display: block;
        margin: auto;
    }
    .include-box{width:100%;}
    #sixth-include-box .include-text .include-text-container {height: 50%;}

    /*=====HOW========*/
    .how-row {display:block;}
    .left-how{width:100%;margin-bottom:30px;}
    #how {padding: 150px 0px;}
    .right-how{width:100%;}
    .right-how-column{margin:auto;}
    .right-how-svg {right: -450px;}

    /*=============FAQ============*/
    .faq-drop.faq-drop-ul.expand {height: 450px;}

}

@media(max-width:576px){
    .page{scroll-snap-type:none !important}
    .snap-section{height:max-content;}
    /*=========HERO===============*/
    #hero{height:100vh;padding-bottom:50px;}
    .hero-container{width:90%;}
    .hero-row {display:block;padding:30vh 0px 0px 0px;position:relative;height:100%;}
    .right-hero {
        display: block;
        padding: 0px;
        width: 100%;
        background: rgb(255 255 255 / 11%);
        position: relative;
        z-index: 5;
    }
    .video-bg {top: -60px;left: -160px;height: 490px;}
    .hero-text{max-width:100%;}
    .hero-text {width: 100%;}
    .hero-eyebrow{font-size:2.4rem}
    .hero-title{font-size:2.2rem}
    .hero-text p {margin-bottom: 30px;}
    .btn-primary,.btn-secondary{width:240px;text-align:center}
    /*==========INCLUDE============*/
    #include {padding: 80px 0px 210px 0px;}
    .include-box {width: 356px;height: 335px;display: block;margin: auto;margin-bottom: 30px;}
    .include-container{width:100%;}
    .include-image{height:auto;width:100%;padding:20px;display: flex;justify-content: center;}
    .include-image img{width:70%;}
    .include-text {height: auto;width: 100%;display: flex;align-items: end;padding: 0px 25px 20px 25px;}
    .mobileScaffold{opacity:0;height:0px;}
    .include-text-container h3 {font-size: 1.4rem;line-height: 1.6rem;}
    .include-text-container{position:relative;}
    .include-drop-circle{position:absolute;top:-5px;px;right:0px;}
    .include-drop-circle > .include-circle {
        transition: all .45s cubic-bezier(0.65,0,.076,1);
        width: 2rem;
        height: 2rem;
        background: var(--ink);
        border-radius: 1rem;
        z-index: 2;
        pointer-events: none;
        position: relative
    }
    .include-drop-circle.expand > .include-circle {background-color: var(--rosaScuro)}
    .include-drop-circle > .include-circle .icon.arrow {left: .625rem;width: 1.125rem;height: .125rem;background: none}
    .include-drop-circle > .include-circle .icon.arrow::before {
        content: "";
        position: absolute;
        top: 10px;
        right: 11px;
        width: .5rem;
        height: .5rem;
        border-top: .125rem solid #fff;
        border-right: .125rem solid #fff;
        transform: rotate(135deg);
        transition: transform 0.3s ease;
    }
    .include-drop-circle.expand > .include-circle .icon.arrow::before {
        content: "";
        position: absolute;
        top: 12px;
        right: 11px;
        width: .5rem;
        height: .5rem;
        border-top: .125rem solid #fff;
        border-right: .125rem solid #fff;
        transform: rotate(-45deg)
    }
    .include-box{transition:height 500ms ease-in-out;overflow:hidden}
    .include-box.expand{transition:height 500ms ease-in-out}
    .include-box.expand .mobileScaffold{opacity:1;transition:opacity 600ms ease-in-out}
    #second-include-box.expand{height:500px;}
    #third-include-box.expand{height:400px;}
    #fourth-include-box.expand{height:400px;}
    #fifth-include-box.expand{height:560px;}
    #sixth-include-box.expand{height:400px;}
    #first-include-box h3 {font-size: 1.5rem;line-height: 1.75rem;margin-bottom: 60px;}
    #first-include-box p {font-size: 1.125rem;line-height: 1.5rem;}
    /*==========HOW================*/
    #how{height:max-content;padding-top:100px;}
    .how-row{display:block;}
    .left-how {padding: 0px 30px;margin-bottom: 50px;}
    .left-how-text h3 {font-size: 1.5rem;line-height: 1.75rem;}
    .left-how-text p {font-size: 1.125rem;line-height: 1.5rem;}
    .right-how{padding:0px;width:max-content;margin:auto;}
    .right-how{display:block;}
    .right-how-svg{display:none;}
    .right-how-box{opacity:1;}
    .right-how-box {width: 305px;height: 180px;padding: 20px;border-radius:30px;}

    .how-box-text {height: 100%;}
    .how-box-text p {line-height: 1.3rem;}
    /*==========FAQ===============*/
    #faq {height: max-content;padding: 60px 0px;}
    .faq-container {padding: 90px 0px;}
    .faq-drop-text h4{font-size:1rem;}
    .faq-drop-text p{font-size:0.9rem;}
    .faq-drop {height: 70px;margin: 8px 0px;padding: 18px 10px 23px 15px;border-radius: 10px;}
    #forma-pink-row {right: 5%;top: -15%;height: 85px;}
    .faq-drop.faq-drop-ul.expand {height: 420px;}
}