:root {
    --primary: #000;
    --white: #fff;
    --background: #f8f9fa;
    --nav: #efefef;
    --button: #236ad2;
    --icon: #0056d2;
    --text-blue: #1a68c4;
    --orange: #ff5213;
    --purple: #b02e82;
    --bg-secondary: #0a254d;
    --gold: #d4af37;
    --footer: #202020;
}

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

/* FONTS */
@font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2'); }

/* GLOBALS */
html, body { max-width: 100%; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body { background-color: var(--background); }
body, input, textarea, select, button { font-family: 'Montserrat', sans-serif; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { text-decoration: none; }
p { margin-bottom: 30px; }

/* LAYOUT UTILS */
.content { width: 1160px; margin: 0 auto; }
.divider { padding: 20px 0; border: none; }
.spacer { padding: 70px 0; }
.responsive { width: 100%; height: auto; }
.center { text-align: center; }
.flex { display: flex; flex-wrap: wrap; }
.align-center { align-items: center; }

/* GRID */
.col-1 { width: 8.33333%; }
.col-2 { width: 16.66666%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333%; }
.col-4-p-20 { width: 33.33333%; padding: 0 20px; position: relative; z-index: 1; }
.col-6 { width: 50%; }
.col-8 { width: 66.66666%; }
.col-10 { width: 83.33333%; }

/* SPACING UTILS */
.pr-15 { padding-right: 15px; }
.pl-15 { padding-left: 15px; }
.mb-5 { margin-bottom: 5px !important; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 30px; }
.mt-20 { margin-top: 20px; }

/* TYPOGRAPHY */
h1 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--white); text-align: left; font-size: 40px; }
h2, .numbers, .dark { font-weight: 700; color: var(--text-blue); font-size: 25px; margin-bottom: 30px; }
h2.h2-initial, .dark { font-size: 40px; }
.dark { color: var(--primary) !important; text-transform: none; margin-bottom: 0; }
h3 { font-size: 22px; font-weight: 700; color: var(--text-blue); margin: 20px 0; }
h4 { font-weight: 700; font-size: 22px; color: var(--white); margin-bottom: 25px; }
.title-bgsecondary { font-family: 'Poppins', sans-serif; font-weight: normal; font-size: 25px; color: var(--white); }

.numbers { font-variant-numeric: tabular-nums; min-width: 100px; display: inline-block; text-align: center; }

.text-orange { color: var(--orange); }
.text-white { color: var(--white); }
.text-blue { color: var(--text-blue); }
.text-dark { color: var(--primary); }
.tal { text-align: left; }
.uppercase { text-transform: uppercase; }

span.testo-evidenzia { font-weight: 700; color: var(--orange); font-size: 20px; text-transform: uppercase; display: inline-block; margin-bottom: 30px; }
span.gold { font-weight: 700; font-size: 13px; margin-bottom: 0; color: var(--gold); }

/* HEADER & NAV */
header { width: 100%; padding: 20px 0; position: fixed; top: 0; left: 0; z-index: 99998; transition: all 0.3s ease; }
header .content { background-color: var(--nav); box-shadow: 0 4px 10px 10px rgba(0, 0, 0, .25); border-radius: 50px; padding: 20px 30px; }
.header { display: flex; justify-content: space-between; align-items: center; }
header img { width: 208px; height: 33px; }

.menu { list-style-type: none; font-size: 18px; display: flex; gap: 35px; }
.menu > li > a { color: var(--primary); text-transform: uppercase; text-decoration: none; }

.navbar { position: relative; width: 60px; height: 60px; border: none; background: transparent; cursor: pointer; display: none; z-index: 100000; }
.navbar .bar { position: absolute; left: 10px; right: 10px; height: 2px; background-color: var(--primary); border-radius: 2px; transition: 0.3s ease transform, 0.3s ease top, 0.3s ease opacity; }
.navbar .bar:nth-child(1) { top: 22px; }
.navbar .bar:nth-child(2) { top: 34px; }
.navbar.active .bar:nth-child(1) { top: 28px; transform: rotate(45deg); }
.navbar.active .bar:nth-child(2) { top: 28px; transform: rotate(-45deg); }

/* HERO */
.main { width: 100%; height: 100vh; background: url(../img/above.png) no-repeat center center/cover; position: relative; z-index: 1; }
.main::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary); opacity: .6; content: ""; z-index: -1; }
.hero { height: 100vh; max-width: 640px; display: flex; flex-direction: column; justify-content: center; align-items: start; text-align: center; gap: 30px; color: var(--primary); position: relative; will-change: transform, opacity; }

/* BUTTONS */
.button { background-color: var(--button); font-weight: 700; font-family: 'Poppins', sans-serif; font-size: 18px; color: var(--white); padding: 15px 30px; border-radius: 50px; border: none; display: inline-block; transition: transform 0.25s ease, box-shadow 0.25s ease !important; position: relative; overflow: hidden; }
.button:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(35, 106, 210, 0.35); }
.button:active { transform: translateY(0px) scale(0.97); box-shadow: none; }
.button::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.45s ease; pointer-events: none; }
.button:hover::after { left: 140%; }

/* ICONS & BLOCKS */
.fa-solid { color: var(--icon); font-size: 50px; }
.gap { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; }
.gap p { margin-bottom: 0; }

.img-trattativa { border-radius: 30px; max-width: 363px; z-index: 2; display: block; }
.absolute { position: relative; display: inline-block; z-index: 1; }
.ball { width: 215px; height: 215px; border-radius: 50%; filter: blur(40px); position: absolute; z-index: -1000; }
.orange { background-color: var(--orange); top: -30px; right: -90px; }
.purple { background-color: var(--purple); bottom: -30px; right: -90px; }

.img-chisiamo { border-radius: 30px; width: 100%; max-height: 450px; object-fit: cover; }
.logo-circle { width: 190px; height: 190px; background-color: var(--white); border-radius: 50%; box-shadow: 0 4px 8px 12px rgba(0, 0, 0, .25); display: flex; justify-content: center; align-items: center; margin: 0 auto; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }

.border-blue { border: 3px solid var(--text-blue); }
.border-orange { border: 3px solid var(--orange); }
.logo-circle img { max-width: 65%; max-height: 120px; }

/* CARDS */
.card { width: 100%; border-radius: 30px; background-color: var(--nav); box-shadow: 0 4px 8px 10px rgba(0, 0, 0, .25); padding: 40px; }
.card p.mb-0 { font-family: 'Poppins', sans-serif; font-size: 20px; margin-bottom: 0; }
.card .flex.center { align-items: center; }
.card .col-6.pr-15 { text-align: center; }
.card .benefits-list { display: inline-flex; flex-direction: column; align-items: flex-start; margin: 0 auto 20px auto; gap: 15px; }
.card .col-6.pr-15 .button { display: block; width: fit-content; margin: 20px auto 0; }

.benefits-list { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.benefit-item { display: flex; align-items: center; justify-content: flex-start; gap: 20px; }
.benefit-item p { margin: 0; }

.cerchio { width: 40px; height: 40px; min-width: 40px; background: var(--button); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cerchio i { color: var(--white); font-size: 20px; }
.img-aziende { width: 100%; height: 100%; border-radius: 30px; object-fit: cover; }
.icon-azienda { height: 100px; width: 91.6px;}
.bg-blue { background-color: var(--bg-secondary); }

.cardnum2 { width: 95%; margin: 0 auto; border: 2px solid var(--gold); background-color: rgba(255, 255, 255, .07); box-shadow: 0 0 20px 0 rgba(196, 160, 91, .5); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 20px; padding: 10px 40px 40px; transition: transform 0.2s ease !important; }
.cardnum2 p.mb-0 { font-size: 13px; margin-bottom: 0; }
.fa-solid.fa-gear { margin-top: 30px; color: var(--gold); }
.line { height: 2px; background-color: var(--gold); margin: 0 10px 15px 10px; }

.review-stars { color: var(--orange); font-size: 18px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.fa-solid.fa-star { color: var(--orange) !important; font-size: 20px; }

/* FLOATING BTN WHATSAPP */
.floating-btn { position: fixed; bottom: 25px; right: 25px; width: 60px; height: 60px; background-color: #25d366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); z-index: 99999; transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; opacity: 0; pointer-events: none; }
.floating-btn:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); opacity: 0.9; }
.floating-btn.show { opacity: 1; pointer-events: auto; animation: pulseWA 2.5s infinite; }

/* FOOTER */
.logo-img { width: 208px; height: 33px; }
.footer-dark { background-color: var(--footer); color: var(--white); padding-top: 60px; padding-bottom: 30px; }
.footer-header { margin-bottom: 55px; }
.header-line { width: 100%; height: 1px; background-color: var(--white); margin-top: 10px; }
.menu-footer-list { list-style-type: none; padding: 0; }
.menu-footer-list a { color: var(--white); font-size: 16px; font-weight: normal; display: inline-block; margin-bottom: 15px; transition: color 0.3s ease; }
.footer-line { width: 100%; height: 1px; background-color: var(--white); margin: 50px 0 30px; }

/* FORMS */
.form-contacts-styled { width: 100%; }
.input-row-flex { display: flex; gap: 20px; margin-bottom: 20px; }
.input-group { flex: 1; }
.input-group.full-width { width: 100%; margin-bottom: 20px; }
.form-contacts-styled input[type="text"], .form-contacts-styled input[type="tel"], .form-contacts-styled input[type="email"], .form-contacts-styled textarea { width: 100%; border: 2px solid var(--orange); border-radius: 30px; background-color: #fff; padding: 20px; font-size: 18px; color: var(--dark); outline: none; transition: border-color 0.3s ease; }
.form-contacts-styled textarea { height: 150px; resize: vertical; }
.form-contacts-styled input:focus, .form-contacts-styled textarea:focus { border-color: var(--orange); }
.gdpr-container-styled { display: flex; align-items: start; gap: 10px; font-size: 12px; color: var(--dark); }
.gdpr-container-styled input[type="checkbox"] { margin-top: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* UNDER FORM */
.confirmation{ display: none; margin-top: 15px; font-weight: bold; text-align: left; }

/* ANIMATIONS */
.will-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.revealed { opacity: 1 !important; transform: translateY(0); }
.benefit-item:nth-child(1) { transition-delay: 0ms !important; }
.benefit-item:nth-child(2) { transition-delay: 80ms !important; }
.benefit-item:nth-child(3) { transition-delay: 160ms !important; }
.benefit-item:nth-child(4) { transition-delay: 240ms !important; }
.ripple-effect { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); animation: rippleAnim 0.6s linear; pointer-events: none; }

@keyframes rippleAnim { to { transform: scale(2.5); opacity: 0; } }
@keyframes pulseWA { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } }

/* MEDIA QUERIES */
@media only screen and (max-width: 1200px) {
    .content { width: 92%; margin: 0 4%; }
}

@media only screen and (max-width: 830px) {
    .ball.orange { top: -70px; right: auto; left: -30px; }
    .ball.purple { bottom: 0; right: -20px; }
}

@media only screen and (max-width: 800px) {
    .navbar { display: initial; }
    nav { position: fixed; top: 0; left: 0; width: 60%; height: 100%; background-color: var(--primary); padding: 40px; transform: translateX(-100%); transition: .3s; z-index: 2; }
    .wide { transform: translateX(0); }
    .menu { flex-direction: column; }
    .menu > li > a { color: var(--white); font-size: 18px; width: fit-content; margin: 0 auto; }
    
    .absolute { display: block; text-align: center; margin-bottom: 20px; }
    .ball.orange { top: -40px; right: auto; left: 10px; }
    .ball.purple { bottom: -30px; right: 20px; }
    .flex.section1 { flex-direction: row !important; flex-wrap: nowrap !important; }
    .flex.section1 .col-4 { width: 33.33% !important; padding: 0 5px; min-height: 140px; display: flex; flex-direction: column; justify-content: flex-start; }

}

@media only screen and (max-width: 768px) {
    .flex { flex-direction: column; }
    .col-1, .col-2, .col-3, .col-4, .col-4-p-20, .col-6, .col-8, .col-10 { width: 100%; }
    .pl-15, .pr-15 { padding: 0; }
    .img-trattativa, .img-chisiamo { display: block; margin: 0 auto 15px; }
    .flex.center { flex-direction: row-reverse !important; gap: 15px; }
    .col-6.pl-15, .col-6.pl-15 p { text-align: center !important; }
}

@media only screen and (max-width: 500px) {
    header .content { padding: 5px 15px; }
    .spacer { padding: 50px 0; }
    .footer-line { margin: 15px 0; }
}

@media only screen and (max-width: 400px) {
    h1 { font-size: 30px; }
    h2.h2-initial, .dark { font-size: 25px; padding: 0 15px; }
    p, .button, h4 { font-size: 13px; }
    h4 { margin-bottom: 15px; }
    .img-trattativa { width: 90%; }
    span { margin-bottom: 15px; }
    .divider { padding: 0; }
    .card { padding: 30px; }
    .form-contacts-styled input[type="text"], .form-contacts-styled input[type="tel"], .form-contacts-styled input[type="email"] { padding: 10px; }
    .input-row-flex { gap: 5px; }
    .menu-footer-list a { font-size: 13px; }
}

@media (hover: hover) and (pointer: fine) {
    .logo-circle:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(26, 104, 196, 0.35); }
}