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

body {  background: #fff; color: #111 }

a { text-decoration: none; color: inherit }

img { max-width: 100%; display: block }

.container { width: 90%; max-width: 1500px; margin: 0 auto }


.hero { position: relative; width: 100%; height: auto; aspect-ratio: 2/1; overflow: hidden; }

.hero-video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%); }
    .hero-video iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/9; transform: translate(-50%,-50%); }
    .hero-video img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%); }

.hero-overlay { position: absolute; bottom:-1px; left: 0; height: 80%; width: 100%; background: linear-gradient( to top, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 28%, rgba(255,255,255,.25) 58%, rgba(255,255,255,0) 78% ); }

.hero-content { position: relative; z-index: 2; max-width: 420px; margin-left: 8%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 2rem; }

.hero-logo { width: 120px; margin-bottom: 25px; }

.hero h1 { font-size: 50px; font-weight: 400; letter-spacing: .5px; margin-bottom: 10px }

.hero p { font-size: 25px; line-height: 1.18; font-weight: 100; max-width: 600px }

.intro { text-align: center; padding: 38px 0 24px; background: #fff }

    .intro h2, .dna h2 { font-size: 34px; line-height: 1.1; font-weight: 900; text-transform: uppercase; margin-bottom: 12px }

    .intro .subtitle { font-size: 17px; font-weight: 600; margin-bottom: 22px }

    .intro .text { max-width: 760px; margin: 0 auto 24px; font-size: 14px; line-height: 1.35; font-weight: 500 }

        .intro .text strong { color: #005a9c; font-weight: 800 }

.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 260px; height: 38px; background: #fff; border-radius: 5px; font-size: 13px; text-transform: uppercase; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.28); transition: .25s ease; }

    .btn:hover { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0,0,0,.32) }

.models { padding: 0 0 28px; background: #fff; display: flex; align-items: center; justify-content: center; }

.models-grid { width: 1500px; margin: 0 auto; display: flex; gap: 30px; flex-wrap: wrap; }

.model-card { background: #f2f2f2; border-radius: 9px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,.16); transition: .25s ease; flex: 0 1 calc(90%/4); }

    .model-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 12px 28px rgba(0,0,0,.24) }

.model-img { height: 218px; background-position: center; background-size: cover; background-color: #ddd; }
.models-grid .model-card:nth-child(1) .model-img { background-image: url('../img/denza/01.webp'); }
.models-grid .model-card:nth-child(2) .model-img { background-image: url('../img/denza/01_2.webp'); }
.models-grid .model-card:nth-child(3) .model-img { background-image: url('../img/denza/01_3.webp'); }
.models-grid .model-card:nth-child(4) .model-img { background-image: url('../img/denza/01_4.webp'); }

.model-content { background: #f4f4f4; padding: 15px 17px 13px; text-align: left }

    .model-content h3 { font-size: 35px; line-height: .98; font-weight: 400; margin-bottom: 5px }

    .model-content h4 { font-size: 25px; line-height: 1.1; font-weight: 500; margin-bottom: 14px }

    .model-content p { font-size: 18px; line-height: 1.3; font-weight: 200; margin-bottom: 6px }

.read-more { display: block; text-align: right; font-size: 16px; font-weight: 700; text-decoration: underline; transition: .2s ease; cursor: pointer; }

    .read-more:hover { color: #005a9c }

.video-section { background: #f1f1f1; padding: 28px 0 30px }

.video-box { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 860px; height: 455px; margin: 0 auto; border-radius: 6px; background: url("img/video-cover.jpg") center/cover no-repeat; position: relative; overflow: hidden; box-shadow: 0 5px 18px rgba(0,0,0,.2); transition: .3s ease; cursor: pointer; }

    .video-box:hover { transform: scale(1.012); box-shadow: 0 13px 32px rgba(0,0,0,.28) }

.play { width: 64px; height: 46px; background: #d71f28; border-radius: 10px; position: absolute; inset: 0; margin: auto; display: flex; align-items: center; justify-content: center; transition: .25s ease }

    .play:before { content: ""; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px }

.video-box:hover .play { transform: scale(1.12) }

.dna { text-align: center; background: #fff; padding: 31px 0 40px }

    .dna h2 { margin-bottom: 4px }

.dna-subtitle { font-size: 17px; margin-bottom: 34px; font-weight: 400 }

.dna-grid { max-width: 2000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 50px }

.dna-card { height: 300px; border-radius: 6px; background: center/cover no-repeat #ddd; position: relative; overflow: visible; box-shadow: 0 4px 14px rgba(0,0,0,.2); transition: .25s ease }
.dna-grid .dna-card:nth-child(1) { background-image: url('../img/denza/07.webp'); }
.dna-grid .dna-card:nth-child(2) { background-image: url('../img/denza/07_2.webp'); }
.dna-grid .dna-card:nth-child(3) { background-image: url('../img/denza/07_3.webp'); }

    .dna-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,.27) }

.dna-box { position: absolute; left: -22px; top: 18px; width: 200px; min-height: 250px; background: rgba(255,255,255,.94); border-radius: 8px; padding: 13px 11px 9px; text-align: right; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: flex; flex-direction: column; justify-content: center; }

    .dna-box h3 { font-size: 20px; font-weight: 400; color: #555; line-height: 1.08; margin-bottom: 20px }

    .dna-box p { font-size: 15px; line-height: 1.2; color: #333; margin-bottom: 70px; font-weight: 500 }

    .dna-box a { text-align: left; font-size: 13px; font-weight: 700; text-decoration: underline; transition: .2s ease }

        .dna-box a:hover { color: #005a9c }


.modale { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 20; transform: translateY(-120%); transition: 0.5s ease-in-out; }

    .modale .sfondochiudi { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.7); z-index: 1; cursor: pointer; }

    .modale .contenuto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 1000px; height: 100%; max-height: 60vh; overflow-y: auto; z-index: 2; background-color: white; border-radius: 8px; }
        .modale .contenuto .chiudi { position: absolute; top: 10px; right: 10px; font-size: 20px; cursor: pointer; }

        .modale .contenuto .media { position: relative; margin: 20px auto; width: 250px; aspect-ratio: 1/1; border-radius: 100%; overflow: hidden; }
            .modale .contenuto .media img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; }

#modale1:checked ~ .modale.modale1 { transform: translateY(0); }

#modale2:checked ~ .modale.modale2 { transform: translateY(0); }

#modale6:checked ~ .modale.modale6 { transform: translateY(0); }

#modale7:checked ~ .modale.modale7 { transform: translateY(0); }

#modale3:checked ~ .modale.modale3 { transform: translateY(0); }

#modale4:checked ~ .modale.modale4 { transform: translateY(0); }

#modale5:checked ~ .modale.modale5 { transform: translateY(0); }



.titolo { font-size: 50px; padding: 10px 40px; }

.sottotitolo { font-size: 20px; padding: 10px 40px; }
.testo { font-size: 18px; padding: 10px 40px; }
.trigger { display: none; }


@media(max-width:900px) {
    .hero { min-height: 360px }

    .models-grid, .dna-grid { display: flex; flex-wrap: wrap; width: 100%;}



    .hero-overlay { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: linear-gradient( to right, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 28%, rgba(255,255,255,.25) 58%, rgba(255,255,255,0) 78% ); }
        .models-grid .model-card, .dna-card { flex: 1 1 100%; }
    .dna-card { height: fit-content; }
    .dna-box { position: relative; left: unset; top: unset; width: 200px; min-height: 250px; background: rgba(255, 255, 255, .94); border-radius: 8px; padding: 13px 11px 9px; text-align: right; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: flex; flex-direction: column; justify-content: center; }

    .video-box { height: 320px }

    .dna-card { height: 225px }

    .dna-box { left: 16px; top: 22px }
}

@media(max-width:600px) {
    .titolo { font-size: 35px; }
    .hero { min-height: 330px }

    .hero-content { margin-left: 6%; max-width: 285px }

    .hero h1 { font-size: 25px }

    .hero-overlay { position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; background: linear-gradient( to right, rgba(255,255,255,1) 0%, rgba(255,255,255,.85) 28%, rgba(255,255,255,.25) 58%, rgba(255,255,255,0) 78% ); }

    .hero p { font-size: 16px }

    .intro h2, .dna h2 { font-size: 27px }

    .model-img { height: 185px }

    .video-box { height: 230px }

    .btn { min-width: 220px }

    .dna-box { width: 155px }

    .models-grid .model-card, .dna-card { flex: 1 1 100%; }
    .dna-card { height: fit-content; }
    .dna-box { position: relative; left: unset; top: unset; width: 200px; min-height: 250px; background: rgba(255, 255, 255, .94); border-radius: 8px; padding: 13px 11px 9px; text-align: right; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: flex; flex-direction: column; justify-content: center; }

}