@import url('https://fonts.googleapis.com/css2? family=Raleway:wght@400;600;700&display=swap');


:root {
--color-primary: #F29322; /* arancione principale */
--color-bg-light: #F6F6F6; /* grigio chiaro background */
--color-black: #000000; /* nero */
--color-white: #FFFFFF; /* bianco */
--color-text-secondary: #555555; /* testi grigi */
--color-text-main: #262626; /* titoli e testi principali */
--color-border-light: #C0C0BE; /* bordi / elementi neutri */
--max-width-hero: 1180px;
--max-width-text: 900px;
--max-width-form: 760px;
--max-width-result: 860px;
--font-main: 'Raleway', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* RESET BASE */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--font-main);
	
color: var(--color-text-main);
background-color: var(--color-white);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* HEADER MINIMALE */
.header {
background-color: var(--color-primary);
color: var(--color-white);
padding: 12px 20px;
}
.header-inner {
max-width: var(--max-width-hero);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-logo {
display: flex;
align-items: center;
	gap: 8px;
}
.header-logo img {
height: 32px;
width: auto;
object-fit: cover;
}
.header-logo span {
font-weight: 700;
font-size: 20px;
}
.header-minimal-text {
font-size: 14px;
}
/* SEZIONI GENERALI */
.section {
padding: 80px 20px;
}
.section--hero {
padding-top: 120px;
padding-bottom: 80px;
background-color: var(--color-white);
}
.section--light {
background-color: var(--color-bg-light);
}
/* Paragrafo problemi – padding specifico 40/40 come da specifiche */
.section--problems {
padding-top: 40px;
padding-bottom: 40px;
}
/* Risultato – padding 100/100 */
.section--result {
padding-top: 100px;
padding-bottom: 100px;
}
/* Form finale – padding 100/100 */
.section--form {
padding-top: 100px;
padding-bottom: 100px;
}
/* Conferma – padding 120/120 */
.section--confirm {
padding-top: 120px;
padding-bottom: 120px;
}
.section-inner {
max-width: var(--max-width-hero);
margin: 0 auto;
}
/* LAYOUT HERO – 2 COLONNE (circa 6/12 – 6/12) */
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 900px) {
.section--hero {
padding-top: 80px;
padding-bottom: 60px;
}
.hero-grid {
grid-template-columns: 1fr;
}
}
/* TIPOGRAFIA BASE */
h1,
h2,
h3 {
margin: 0;
color: var(--color-text-main);
}
.hero-title {
font-weight: 700;
font-size: 48px;
line-height: 1.1;
max-width: 700px;
}
.hero-subtitle {
margin-top: 20px;
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: var(--color-text-secondary);
max-width: 650px;
}
.section-title {
font-weight: 600;
font-size: 32px;
line-height: 1.2;
margin-bottom: 30px;
}
.section-text {
font-size: 20px;
line-height: 1.5;
color: var(--color-text-main);
}
/* Font-size mobile per testi principali e liste */
@media (max-width: 600px) {
.hero-title {
font-size: 30px;
}
.hero-subtitle {
font-size: 18px;
}
.section-title {
font-size: 26px;
}
.section-text,
.bullet-list li,
.check-list li {
font-size: 18px;
}
}
/* LISTE PUNTATE (problemi + benefici) */

.bullet-list {
list-style: none;
padding: 0;
margin: 12px 0 0 0;
}
.bullet-list li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
font-size: 20px;
line-height: 1.4;
}
.bullet-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-primary);
}
/* LISTA QUALIFICAZIONE (check) */
.check-list {
list-style: none;
	padding: 0;
margin: 0 0 24px 0;
}
.check-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 14px;
font-size: 20px;
}
.check-icon {
width: 18px;
height: 18px;
border-radius: 4px;
background-color: var(--color-primary);
}
/* Allineamento sezione qualificazione:
left su desktop, center su mobile */
.qual-section {
text-align: left;
}
@media (max-width: 600px) {
.qual-section {
text-align: center;
	}
.qual-section .qual-content {
margin-left: auto;
margin-right: auto;
}
.qual-section .check-list {
display: inline-block;
text-align: left;
}
}
/* CTA – BOTTONI */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 18px 32px;
border-radius: 6px;
border: none;
font-weight: 600;
font-size: 20px;
text-decoration: none;
cursor: pointer;
background-color: var(--color-primary);
color: var(--color-white);
transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
	
}
.btn:hover,
.btn:focus-visible {
/* Hover specificato: #d67f1d */
background-color: #d67f1d;
box-shadow: 0 0 0 3px var(--color-border-light);
transform: translateY(-1px);
}
.btn:focus-visible {
outline: 2px solid var(--color-text-main);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
background-color: var(--color-border-light);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btn--full {
width: 100%;
}
/* MICROCOPY SOPRA CTA */	
.cta-microcopy {
font-size: 18px;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
/* IMMAGINE HERO */
.hero-image-wrapper {
width: 100%;
}
.hero-image {
width: 100%;
max-width: 620px;
height: 540px;
object-fit: cover;
border-radius: 8px;
}
/* PARAGRAFO PROBLEMI */
.problems {
max-width: var(--max-width-text);
margin: 0 auto;
}
/* SEZIONE QUALIFICAZIONE */
.qual-section .section-inner {
max-width: var(--max-width-hero);
	}
.qual-content {
max-width: var(--max-width-text);
}
/* =========================================
TEST – PARTE 2
========================================= */
.test-section {
max-width: var(--max-width-form);
margin: 0 auto;
}
.test-progress {
font-size: 16px;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
.test-step {
display: none;
}
.test-step--active {
display: block;
}
.test-question-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 32px;
color: var(--color-text-main);
}
@media (max-width: 600px) {
.test-question-title {
font-size: 22px;
}
}
/* RADIO GROUP – LAYOUT */
.radio-group {
display: flex;
flex-direction: column;
gap: 18px;
margin-bottom: 32px;
}
.radio-option {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
color: var(--color-text-main);
	}
/* RADIO BUTTON – STILE CUSTOM */
.radio-group input[type="radio"] {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--color-text-main); /* #262626 */
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
display: inline-block;
position: relative;
background-color: var(--color-white);
}
.radio-group input[type="radio"]:checked {
background-color: var(--color-primary); /* #F29322 */
}
.radio-group input[type="radio"]:focus-visible {
box-shadow: 0 0 0 3px var(--color-text-main); /* #262626 */
}
/* =========================================
RISULTATO – PARTE 3
========================================= */
.result-section {
max-width: var(--max-width-result);
margin: 0 auto;
}
.result-badge {
font-weight: 700;
font-size: 36px;
margin-bottom: 16px;
color: var(--color-text-main);
}
.result-subtitle {
font-size: 22px;
color: var(--color-text-secondary);
margin-bottom: 24px;
}
/* =========================================
FORM – PARTE 4
========================================= */
.form-section {
max-width: var(--max-width-form);
margin: 0 auto;
}
.form-field {
margin-bottom: 18px;
}
.form-label {
display: block;
font-size: 18px;
margin-bottom: 6px;
color: var(--color-text-main);
}
.form-input,
.form-textarea {
width: 100%;
font-size: 18px;
font-family: var(--font-main);
padding: 14px;
border-radius: 6px;
border: 1px solid var(--color-border-light);
color: var(--color-text-main);
background-color: var(--color-white);
}
/* Altezza 54px per i campi input singoli, come da specifiche */
.form-input {
height: 54px;
}
.form-input:focus-visible,
.form-textarea:focus-visible {
outline: 3px solid var(--color-primary); /* #F29322 */
border-color: var(--color-primary);
}
.form-textarea {
min-height: 140px;
resize: vertical;
}
.form-privacy {
margin: 18px 0;
font-size: 16px;
color: var(--color-text-secondary);
}
.form-privacy a {
color: var(--color-primary);
text-decoration: underline;
}
/* =========================================
CONFERMA – PARTE 5
========================================= */
.confirm-text-main {
font-size: 22px;
margin-bottom: 12px;
color: var(--color-text-main);
}
.confirm-note {
font-size: 16px;
color: var(--color-text-secondary);
}
/* FOOTER ESSENZIALE */
.footer {
background-color: var(--color-black);
color: var(--color-white);
padding: 32px 20px;
font-size: 14px;
}
.footer-inner {
max-width: var(--max-width-hero);
margin: 0 auto;
}
.footer-links {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.footer-links a {
color: var(--color-primary);
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}