:root{
    --accent:#1EA7D0;
    --text:#1F1F1F;
    --muted:#515151;
    --bg:#ffffff;
    --panel:#F5F5F7;
    --border:#DADADA;
    --radius:22px;
    --container:1120px;
}

*{ box-sizing:border-box; }
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
.container{
    width:min(var(--container), 100% - 2rem);
    margin-inline:auto;
}

.header{
    position:sticky;
    top:0;
    z-index:50;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(18px);
    border-bottom:1px solid rgba(190,190,190,.25);
}
.header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 0;
}

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__mark{
    width:28px; height:28px;
    background:var(--accent);
    border-radius:8px;
    position:relative;
}
.brand__mark::after{
    content:"";
    position:absolute;
    left:-8px; top:12px;
    width:22px; height:6px;
    background:var(--accent);
    transform:rotate(-90deg);
    transform-origin:left top;
    border-radius:4px;
}
.brand__text{ font-weight:600; color:var(--muted); }

.nav{ display:flex; align-items:center; gap:1.25rem; }
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.7rem 1rem;
    border-radius:999px;
    background:var(--accent);
    color:white;
    border:1px solid #20A6CE;
    font-weight:600;
    white-space:nowrap;
}
.btn--full{ width:100%; }

.hero{ padding:4.5rem 0 2.5rem; }
.hero__grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:2.5rem;
    align-items:start;
}
.hero__title{
    font-family: ui-sans-serif, system-ui;
    font-weight:500;
    line-height:1.05;
    font-size: clamp(2rem, 3.6vw, 4rem);
    margin:0;
}
.hero__title span{ color:var(--accent); }

.quote{
    background:rgba(245,245,247,.6);
    border:1px solid #EEE;
    box-shadow: 0 0 30px rgba(168,168,168,.2);
    backdrop-filter: blur(18px);
    border-radius: var(--radius);
    padding:1.25rem;
}
.quote__mark{ font-size:3rem; line-height:1; }
.quote__who{ display:flex; gap:.75rem; align-items:center; margin-top:1rem; }
.avatar{
    width:44px; height:44px;
    border-radius:999px;
    background:var(--accent);
    display:inline-block;
}

.section{ padding:3rem 0; border-top:1px solid #BEBEBE; }
.section--muted{
    background:var(--panel);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.section__head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    margin-bottom:1.5rem;
}
.section h2{ margin:0; font-size:1.25rem; color:#1D1D1D; }
.link{ color:var(--accent); font-weight:700; text-decoration:underline; }

.cards{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1.25rem;
}
.card{
    background:rgba(245,245,247,.6);
    border:1px solid #EEE;
    box-shadow: 0 0 30px rgba(168,168,168,.2);
    backdrop-filter: blur(18px);
    border-radius: var(--radius);
    padding:1.25rem;
}
.card__media{
    height:180px;
    background:#EFEFEF;
    border-radius: var(--radius);
    border:1px solid #EEE;
    margin-bottom:1rem;
}
.card h3{
    margin:.25rem 0 .5rem;
    font-family: ui-sans-serif, system-ui;
    font-weight:500;
    font-size:1.4rem;
}
.card p{ margin:0; color:#1D1D1D; }

.partners{
    display:grid;
    grid-template-columns: 1fr 0.9fr;
    gap:2rem;
    align-items:start;
}
.partners__image{
    height:520px;
    background:#EFEFEF;
    border-radius: var(--radius);
    border:1px solid #EEE;
}
.partner{ margin:1.5rem 0 2rem; }
.partner__meta{ color:#A2A2A2; font-weight:600; }
.partner__name{ font-size:1.5rem; margin:.25rem 0; font-family: ui-sans-serif, system-ui; }
.partner__desc{ color:#1D1D1D; }

.contacts{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:2rem;
    align-items:start;
}
.lead{ margin:.75rem 0 1.5rem; color:#1D1D1D; }
.kv{
    display:grid;
    gap:1rem;
}
.kv a{ text-decoration:underline; }

.form{
    background:rgba(245,245,247,.6);
    border:1px solid #EEE;
    border-radius: var(--radius);
    padding:1.25rem;
    backdrop-filter: blur(18px);
}
.form label{
    display:block;
    font-size:.95rem;
    margin-bottom:1rem;
}
.form input, .form textarea{
    width:100%;
    margin-top:.5rem;
    padding:.85rem 1rem;
    border-radius:14px;
    border:1px solid var(--border);
    background:white;
    font:inherit;
}
.form textarea{ min-height:120px; resize:vertical; }
.form__row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
}
.phone{
    display:flex;
    gap:.5rem;
    align-items:center;
    border:1px solid var(--border);
    background:white;
    border-radius:14px;
    padding:.2rem .75rem;
}
.phone span{ color:#1D1D1D; }
.phone input{ border:none; padding:.75rem .25rem; margin:0; outline:none; }

.footer{
    background:var(--panel);
    border-top:1px solid var(--border);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding:2rem 0;
}
.footer__grid{
    display:grid;
    grid-template-columns: 1fr 1.2fr;
    gap:2rem;
}
.footer__cols{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap:1.5rem;
}
.footer__cols strong{ display:block; margin-bottom:.75rem; }
.footer__cols a{ display:block; color:var(--muted); margin:.4rem 0; }
.muted{ color:var(--muted); }
.social{ display:flex; gap:.5rem; margin-top:1rem; }
.social span{ width:20px; height:20px; border-radius:5px; background:#D9D9D9; display:inline-block; }

/* --- Responsive --- */
@media (max-width: 980px){
    .hero__grid{ grid-template-columns: 1fr; }
    .partners{ grid-template-columns: 1fr; }
    .contacts{ grid-template-columns: 1fr; }
    .cards{ grid-template-columns: 1fr; }
    .footer__grid{ grid-template-columns: 1fr; }
    .footer__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .nav{ gap:.75rem; }
}
@media (max-width: 560px){
    .nav a:not(.btn){ display:none; } /* nav minimal su mobile */
    .form__row{ grid-template-columns: 1fr; }
}

/* =========================
   1) CONTAINER più simile al mock
========================= */
:root { --container: 1240px; }

.container{
    width: min(var(--container), 100% - 48px);
}
@media (max-width: 560px){
    .container{ width: min(var(--container), 100% - 32px); }
}

/* =========================
   2) HERO come mock: titolo enorme + quote in basso a destra
========================= */
.hero{
    padding: clamp(56px, 6vw, 96px) 0 clamp(32px, 4vw, 56px);
}

.hero__grid{
    display:grid;
    grid-template-columns: 1.35fr .65fr; /* titolo dominante */
    gap: clamp(24px, 4vw, 56px);
    align-items:start;
    min-height: min(82vh, 900px); /* grande “white space” */
}

.hero__title{
    font-weight:500;
    line-height: 1.02;
    letter-spacing: -0.02em;


}

/* quote box “appoggiata” in basso */
.quote{
    align-self: end;
    justify-self: start;
    max-width: 380px;
}

/* Mobile/Tablet: stack */
@media (max-width: 980px){
    .hero__grid{
        grid-template-columns: 1fr;
        min-height: unset;
    }
    .hero__title{ max-width: 18ch; }
    .quote{
        align-self: start;
        max-width: 520px;
    }
}

/* =========================
   3) SERVIZI head come mock: label + claim + CTA allineata a destra
========================= */
.section.services{
    padding: clamp(56px, 6vw, 96px) 0;
}

.services__head{
    display:grid;
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
    align-items:end;
    margin-bottom: clamp(28px, 4vw, 56px);
}

.services__label{
    grid-column: 1 / -1;
    font-size: 20px;
    font-weight: 600;
    color:#1D1D1D;
}

.services__claim{
    margin:0;
    font-weight:500;
    line-height:1.05;
    letter-spacing:-0.02em;
    font-size: clamp(39px, 2.8vw, 22px);
    max-width: 52ch;
}
.services__claim span{ color: var(--accent); }

.services__all{
    justify-self:end;
    align-self:end;
    color: var(--accent);
    font-weight:700;
    text-decoration: underline;
    white-space: nowrap;
}

/* su mobile CTA sotto al claim */
@media (max-width: 700px){
    .services__head{ grid-template-columns: 1fr; }
    .services__all{ justify-self:start; }
}

/* =========================
   4) CARDS: 3 → 2 → 1 (invece di 1 subito)
========================= */
.cards{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
}

@media (max-width: 1100px){
    .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
    .cards{ grid-template-columns: 1fr; }
}

/* media box nelle card più “morbida” come mock */
.card__media{
    height: 220px;
    border-radius: 18px;
}

/* =========================
   5) PARTNERS: più aria e immagine più alta (come screenshot)
========================= */
.section--muted{ padding: clamp(56px, 6vw, 96px) 0; }

.partners{
    gap: clamp(20px, 3vw, 56px);
}

.partners__image{
    height: clamp(380px, 40vw, 640px);
}

/* =========================
   6) CONTATTI: allineamenti e aria come mock
========================= */
#contatti.section{
    padding: clamp(56px, 6vw, 96px) 0;
}
.contacts{
    gap: clamp(20px, 3vw, 56px);
}
.lead{ max-width: 52ch; }

:root{
    --accent:#1EA7D0;
    --text:#1F1F1F;
    --muted:#6B6B6B;
    --bg:#ffffff;
    --panel:#F5F5F7;
    --border:#E3E3E6;
    --radius:22px;
    --container:1240px;
}

*{ box-sizing:border-box; }
body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color:var(--text);
    background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
.container{
    width:min(var(--container), 100% - 48px);
    margin-inline:auto;
}
@media (max-width: 560px){
    .container{ width:min(var(--container), 100% - 32px); }
}

/* ====== Contatti (come foto) ====== */
.section{ padding: 96px 0; }
.contacts-section{ padding: clamp(64px, 6vw, 110px) 0; }

.contacts{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(22px, 4vw, 64px);
    align-items:start;
}

/* Left block */
.contacts__kicker{
    font-size: 18px;
    color: var(--text);
    margin-bottom: 24px;
}
.contacts__title{
    margin:0;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(40px, 4.2vw, 64px);
}
.contacts__title span{ color: var(--accent); }

.contacts__lead{
    margin: 18px 0 36px;
    color: #2B2B2B;
    max-width: 52ch;
    font-size: 16px;
    line-height: 1.45;
}

.contacts__kv{
    display:grid;
    gap: 22px;
    margin-top: 8px;
}
.contacts__kvLabel{
    font-weight: 650;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 6px;
}
.contacts__kvValue{
    font-size: 14px;
    color: #2B2B2B;
}
.contacts__kvItem a.contacts__kvValue{ text-decoration: underline; }

/* Right form card */
.contact-form{
    background: rgba(245,245,247,.75);
    border: 1px solid rgba(220,220,224,.8);
    border-radius: 26px;
    padding: 22px;
    backdrop-filter: blur(18px);
    box-shadow: 0 0 30px rgba(168,168,168,.18);
}

.contact-form__row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.field{ display:block; margin-bottom: 14px; }
.field__label{
    display:block;
    font-size: 13px;
    color: #2B2B2B;
    margin-bottom: 8px;
}

.field__control{
    width:100%;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 0 16px;
    font: inherit;
    outline: none;
}

.field__control:focus{
    border-color: rgba(30,167,208,.55);
    box-shadow: 0 0 0 4px rgba(30,167,208,.12);
}

.field__withIcon{ position:relative; }
.field__icon{
    position:absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .55;
    font-size: 14px;
}
.field__control--icon{ padding-left: 40px; }

.field__control--textarea{
    height:auto;
    min-height: 120px;
    border-radius: 18px;
    padding: 14px 16px;
    resize: none; /* come mock */
}

.field__counter{
    display:block;
    text-align:right;
    margin-top: 8px;
    font-size: 12px;
    color: #9A9A9A;
}

/* Phone */
.phone{
    display:flex;
    align-items:center;
    gap: 10px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background:#fff;
    padding: 0 14px;
}
.phone__prefix{
    color:#2B2B2B;
    font-size: 13px;
    padding-right: 10px;
    border-right: 1px solid rgba(0,0,0,.08);
}
.phone__input{
    border:0;
    outline: none;
    font:inherit;
    width:100%;
    height:100%;
}

/* Button (come mock: pill blu grande) */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--accent);
    color:#fff;
    border: 1px solid rgba(0,0,0,.05);
    font-weight: 650;
    cursor:pointer;
}
.btn--full{ width:100%; }

/* ===== Footer come screenshot ===== */
.footer{
    background: var(--panel);
    border-top: 1px solid rgba(220,220,224,.9);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    padding: 52px 0;
    margin-top: 40px;
    margin-left: 9em;
    margin-right: 9em;
}
.footer__grid{
    display:grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 56px;
    align-items:start;
}
.footer__cols{
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 28px;
}
.footer__cols strong{
    display:block;
    margin-bottom: 14px;
    color: #1D1D1D;
}
.footer__cols a{
    display:block;
    color: var(--muted);
    margin: 10px 0;
}
.muted{ color: var(--muted); }

.brand{ display:flex; align-items:center; gap:.75rem; }
.brand__mark{
    width:28px; height:28px;
    background:var(--accent);
    border-radius:8px;
    position:relative;
}
.brand__mark::after{
    content:"";
    position:absolute;
    left:-8px; top:12px;
    width:22px; height:6px;
    background:var(--accent);
    transform:rotate(-90deg);
    transform-origin:left top;
    border-radius:4px;
}
.brand__text{ font-weight:650; color: #5E5E5E; }

.social{ display:flex; gap:10px; margin-top: 18px; }
.social span{ width:18px; height:18px; border-radius:6px; background:#D9D9D9; display:inline-block; }

/* ===== Responsive ===== */
@media (max-width: 980px){
    .contacts{ grid-template-columns: 1fr; }
    .contact-form{ max-width: 520px; }
    .footer__grid{ grid-template-columns: 1fr; }
    .footer__cols{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
    .contact-form__row{ grid-template-columns: 1fr; }
    .contacts__lead br{ display:none; } /* su mobile evita “a capo” forzato */
}

/* NAV ACTIVE STATE */
.nav a.is-active{
    color: var(--text);
    position: relative;
}

/* underline soft come “selected” */
.nav a.is-active:not(.btn)::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    border-radius: 999px;
    background: rgba(0,0,0,.22);
}

/* se il bottone è attivo, lo rendiamo "più pieno" */
.nav a.btn.is-active{
    filter: brightness(0.95);
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
}