/* --- VARIABLES & RESET --- */
:root {
    --color-primary: #0f2e46;      /* Royal Navy Blue */
    --color-primary-light: #1a4563; 
    --color-accent: #00c864;       /* Tuo verde personalizzato */
    --color-accent-hover: #00b058;
    --color-bg: #f3f6f9;
    --color-text-dark: #1d2939;
    --color-text-body: #475467;
    --color-text-muted: #586675;  /* testi secondari (grigio appena bluastro) */
    --color-text-soft: #c3ccd6;   /* testi su sfondo scuro (bluastro) */
    --color-text-onblue: #b0c4d6; /* label form su navy */
    --color-sfumatura: #cfe5ff;
    --color-white: white;
    --font-main: 'Inter', sans-serif;
    --radius: 40px;
    --shadow-soft: 0 4px 20px rgba(0,0,0,0.05);
    --shadow-card: 0 10px 30px rgba(0,0,0,0.08);
}

/* --- ACCESSIBILITÀ: focus visibile da tastiera --- */
:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

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

/* Sfondo navy dietro la status bar iOS e nelle aree di "overscroll" */
html {
    background-color: var(--color-primary);
}

body {
    font-family: var(--font-main);
    color: var(--color-text-body);
    /* navy come html: Safari iOS colora la status bar con lo sfondo del documento.
       Le sezioni hanno tutte un proprio sfondo, quindi questo navy non si vede
       nel contenuto, solo dietro la status bar e nelle aree di overscroll. */
    background-color: var(--color-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    color: var(--color-text-dark);
    font-weight: 700;
    line-height: 1.2;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HEADER --- */
.site-header {
    background-color: var(--color-primary);
    /* il blu si estende sotto la status bar iOS (notch / orologio) */
    padding: 15px 1px;
    padding-top: calc(15px + env(safe-area-inset-top));
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    position: relative;
    z-index: 100;
}

/* In orizzontale, rispetta le aree sicure laterali del notch */
@supports (padding: max(0px)) {
    .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-text h1 {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

.text-highlight { color: var(--color-accent); }

.header-text p {
    font-size: 0.8rem;
    color: var(--color-text-soft);
    margin-top: -2px;
}

/* Logo con Zoom Out all'hover */
.header-logo {
    display: block;
    transition: transform 0.3s ease;
}

.header-logo:hover {
    transform: scale(0.95);
}

.header-logo img {
    height: 45px;
    width: auto;
}

/* --- HERO SECTION --- */
.hero-section {
    background: linear-gradient(180deg, white 0%, var(--color-sfumatura) 100%);
    padding: 70px 0 90px;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1;
    min-width: 300px;
}

.hero-text h2 {
    font-size: 3rem;
    margin-bottom: 30px;
    color: var(--color-primary);
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 500px;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-primary {
    background-color: var(--color-accent);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--color-accent-hover);
}

/* Leggero "battito" cromatico per richiamare l'attenzione sui CTA principali */
@keyframes ctaPulse {
    0%, 100% { background-color: var(--color-accent); }
    50%      { background-color: var(--color-accent-hover); }
}

.btn-primary,
.form-footer .btn-submit {
    animation: ctaPulse 2.4s ease-in-out infinite;
}

/* Al passaggio del mouse il battito si ferma e resta il colore hover */
.btn-primary:hover,
.form-footer .btn-submit:hover {
    animation: none;
}

/* Niente battito quando il bottone è disabilitato (invio in corso) */
.form-footer .btn-submit:disabled {
    animation: none;
}

/* Rispetto delle preferenze di accessibilità (riduzione movimento) */
@media (prefers-reduced-motion: reduce) {
    .btn-primary,
    .form-footer .btn-submit {
        animation: none;
    }
}

/* --- HERO VISUAL --- */
.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 300px;
}

@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    .hero-text { width: 100%; }
    /* su mobile il paragrafo torna centrato sotto il titolo */
    .hero-text p { margin-left: auto; margin-right: auto; }
    .hero-visual { display: none; }
}

/* Su smartphone riduciamo lo spazio sopra il titolo così da pareggiarlo
   con lo spazio tra "km zero" e il testo sottostante (30px). */
@media (max-width: 600px) {
    /* padding-top ridotto per pareggiare lo spazio sopra il titolo;
       padding-bottom maggiorato (~45px) così la foto bio non si sovrapponga
       al bottone "Chiedi un preventivo". */
    .hero-section { padding-top: 30px; padding-bottom: 135px; }
    .hero-text h2 { margin-bottom: 30px; }
}

.doc-slot-container {
    width: 100%;
    max-width: 455px;
    display: flex;
    justify-content: center;
}

.doc-card {
    width: 100%;
    max-width: 455px;
    aspect-ratio: 455 / 315;
    overflow: hidden;
}

.doc-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}


/* --- BIO SECTION --- */
.bio-section {
    background-color: var(--color-white);
    padding-bottom: 60px;
    margin-top: -30px; 
    position: relative;
    z-index: 10;
}

.bio-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bio-image-container {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 5px solid var(--color-white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    overflow: hidden;
    margin-bottom: 20px;
    background: #fff;
    margin-top: -75px;
}

.bio-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-content h3 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.separator-line {
    width: 60px;
    height: 4px;
    background-color: var(--color-accent);
    margin: 0 auto 15px;
    border-radius: 2px;
}

.role {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.bio-desc {
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-text-muted);
}

/* --- STEPS SECTION --- */
.steps-section {
    padding: 55px 0;
    background: linear-gradient(0deg, var(--color-sfumatura) 0%, white 100%);
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;
    color: var(--color-primary);
}

/* 4 tessere rettangolari arrotondate, equidistanti */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}

.step-card {
    /* Vetro satinato (frosted glass): traslucido + sfocatura dello sfondo */
    background: linear-gradient(to right, rgba(255,255,255,0.72), rgba(255,255,255,0.9));
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 5px solid #fff;          /* bordo bianco puro, stesso spessore della foto bio */
    border-radius: var(--radius);     /* arrotondamento su tutti gli spigoli */
    overflow: hidden;                 /* velo e sfocatura rispettano gli angoli */
    padding: 30px 26px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    isolation: isolate; /* crea un contesto per il velo animato */
    transition: background 0.3s ease;
}

/* Velo verde che evidenzia la tessera; resta SOTTO al testo (z-index -1) */
.step-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-accent);
    opacity: 0;
    pointer-events: none;
    animation: stepSequence 12s ease-in-out infinite;
}

/* Sfalsamento: si accendono una dopo l'altra (1 → 2 → 3 → 4) */
.step-card:nth-child(1)::after { animation-delay: 0s; }
.step-card:nth-child(2)::after { animation-delay: 1.2s; }
.step-card:nth-child(3)::after { animation-delay: 2.4s; }
.step-card:nth-child(4)::after { animation-delay: 3.6s; }

@keyframes stepSequence {
    0%   { opacity: 0; }
    4%   { opacity: 0.26; }   /* accensione */
    8%   { opacity: 0.26; }   /* breve tenuta */
    16%  { opacity: 0; }      /* fade-out morbido ma più rapido */
    100% { opacity: 0; }      /* lunga pausa, poi ricomincia */
}

/* Rispetto delle preferenze di riduzione del movimento */
@media (prefers-reduced-motion: reduce) {
    .step-card::after { animation: none; }
}

.step-icon {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.step-icon svg {
    width: 35px;
    height: 35px;
    stroke: var(--color-accent);
    stroke-width: 1.5px;
}

/* HOVER: tinta verde traslucida */
.step-card:hover {
    background: linear-gradient(to right, rgba(0,214,75,0.18), rgba(0,214,75,0.28));
}

.step-card:hover .step-icon {
    transform: scale(1.1);
}

.step-card h4 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    color: var(--color-primary);
}

.step-card p {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Sotto gli 860px: 1 colonna, tessere rettangolari arrotondate ed equidistanti */
@media (max-width: 860px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        max-width: 480px;
        margin: 0 auto;
    }

    .step-card {
        background: linear-gradient(to bottom, rgba(255,255,255,0.72), rgba(255,255,255,0.9));
        padding: 26px 22px;
        align-items: center;
        text-align: center;
    }

    .step-card:hover {
        background: linear-gradient(to bottom, rgba(0,214,75,0.18), rgba(0,214,75,0.28));
    }
}

/* --- FORM SECTION --- */
.form-section {
    background-color: var(--color-primary);
    padding: 80px 0;
    color: #fff;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=');
}

.form-wrapper {
    max-width: 800px;
}

.form-intro {
    text-align: center;
    margin-bottom: 40px;
}

.form-intro h2 { color: #fff; font-size: 2.2rem; }
.form-intro p { opacity: 0.8; }

.modern-form {
    background: rgba(255, 255, 255, 0.04);
    padding: 32px;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

@media (max-width: 600px) {
    .modern-form { padding: 22px; }
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media(max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: var(--color-text-onblue);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    /* campi "frosted": si integrano nel pannello invece di sembrare buchi bianchi */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 13px 14px;
    font-family: var(--font-main);
    font-size: 1rem;
    color: #fff;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

/* Tendina delle select leggibile (testo scuro su bianco) */
.form-group select option {
    color: var(--color-text-dark);
    background: #fff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 200, 100, 0.18);
}


/* --- Aggiunte per Modern Form --- */
.form-feedback {
    margin-top: 15px;
    padding: 15px;
    border-radius: 5px;
    display: none; /* Nascosto di default */
    font-size: 0.95rem;
}
.form-feedback.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.form-feedback.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.btn-submit {
    position: relative;
    transition: all 0.3s ease;
}
.btn-submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
/* Spinner per il caricamento */
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }


.checkbox-wrap {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.checkbox-wrap input { width: auto; }
.checkbox-wrap label { margin: 0; font-size: 0.85rem; cursor: pointer; }

.form-footer {
    text-align: center;
    margin-top: 30px;
}

.form-footer .btn-submit {
    width: 100%;
    max-width: 300px;
    background-color: var(--color-accent);
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: 0.3s;
}

.form-footer .btn-submit:hover {
    background-color: var(--color-accent-hover);
    transform: translateY(-2px);
}

.form-footer small {
    display: block;
    margin-top: 15px;
    opacity: 0.6;
    font-size: 0.8rem;
}

/* --- FAQ SECTION --- */
.faq-section {
    padding: 80px 0;
    background-color: #fff;
}

.accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    transition: color 0.3s;
}

.faq-btn:hover {
    color: var(--color-primary);
}

/* Icona + Verde */
.plus-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.plus-icon::before,
.plus-icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-accent);
    border-radius: 2px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.plus-icon::before { width: 100%; height: 3px; }
.plus-icon::after { height: 100%; width: 3px; }

.faq-btn.active .plus-icon {
    transform: rotate(45deg);
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-body {
    padding-bottom: 25px;
    color: var(--color-text-body);
    line-height: 1.7;
    font-size: 0.95rem;
}
.faq-body a {
    color: var(--color-accent);
    text-decoration: underline;
}
/* Spaziatura uniforme tra paragrafi multipli nella stessa risposta */
.faq-body p + p { margin-top: 10px; }
.faq-body ul {
    list-style: disc;
    margin-left: 20px;
    margin-top: 5px;
}
.faq-body li { margin-bottom: 4px; }

/* --- PORTFOLIO CLIENTI --- */
.portfolio-section {
    padding: 60px 0;
    background: linear-gradient(0deg, var(--color-sfumatura) 0%, white 100%);
    border-top: 3px dotted #a8d3ff;
}

.logos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    align-items: center;
}

.client-logo {
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.3s ease;
    cursor: pointer;
}

.client-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

.client-logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

/* --- FOOTER --- */
.site-footer {
    background-color: var(--color-primary);
    color: #ffffff;
}

.footer-main-content {
    padding: 60px 20px;
}

.footer-office-block {
    display: flex;
    gap: 30px;
    align-items: center;
}

.office-img-wrap img {
    width: 118px;
    height: 139px;
    object-fit: cover;

    display: block;
}

.office-details h4 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.office-details .accreditation {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.address-box p {
    color: rgba(255,255,255,0.9);
    font-size: 0.95rem;
    margin-bottom: 3px;
    line-height: 1.5;
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 0;
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.legal-info p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.footer-link-uniform {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    transition: color 0.3s;
    text-decoration: none;
}

.legal-links-container .footer-link-uniform {
    margin-left: 20px;
}

.footer-link-uniform:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .footer-office-block {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bottom-flex {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .legal-links-container .footer-link-uniform {
        margin-left: 0;
        margin-right: 20px;
        display: inline-block;
        margin-top: 10px;
    }
}

/* --- PAGINE DI TESTO (Privacy / Condizioni) --- */
.text-page-wrapper,
.privacy-page-wrapper {
    background-color: #fff;
    padding: 60px 0;
    min-height: 60vh;
}

.text-content,
.privacy-content {
    max-width: 800px;
    margin: 0 auto;
    color: var(--color-text-body);
}

.back-link-container {
    margin-bottom: 40px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 1.1rem;
    transition: color 0.3s;
}

.back-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.back-link::before {
    content: '←';
    margin-right: 8px;
    transition: transform 0.3s;
}

.back-link:hover::before {
    transform: translateX(-4px);
}

/* Titolo pagina Condizioni */
.text-content h1 {
    color: var(--color-primary);
    font-size: 2rem;
    margin-bottom: 40px;
    line-height: 1.3;
    text-transform: uppercase;
}

.condition-section {
    margin-bottom: 50px;
}

.condition-section h2 {
    font-size: 1.4rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    border-left: 4px solid var(--color-accent);
    padding-left: 15px;
}

.condition-section p {
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 1rem;
    text-align: justify;
}

.condition-section ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 20px;
    color: var(--color-text-body);
}

.condition-section li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.highlight-box {
    background-color: var(--color-bg);
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
    margin-top: 20px;
}

.highlight-box p:last-child { margin-bottom: 0; }

/* Titolo e sottotitolo pagina Privacy */
.privacy-content h1 {
    color: var(--color-primary);
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 1.2;
}

.privacy-subtitle {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 50px;
    font-style: italic;
}

.policy-section {
    margin-bottom: 40px;
}

.policy-section h2 {
    font-size: 1.3rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.policy-section h3 {
    font-size: 1.1rem;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--color-text-dark);
}

.policy-section p,
.policy-section li {
    margin-bottom: 15px;
    line-height: 1.7;
    font-size: 0.95rem;
}

.policy-section ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

.policy-section a {
    color: var(--color-accent);
    text-decoration: underline;
}

.spam-protected span {
    display: none;
}