:root {

    --ink: #132029;

    --paper: #f7f6f1;

    --accent: #a33f56;

    --accent-strong: #cf6f83;

    --sand: #f0d8dc;

    --panel: #ffffff;

    --ok: #15664d;

    --warn: #7a5b06;

    --error: #842029;

    --radius: 18px;

    --shadow: 0 12px 40px rgba(19, 32, 41, 0.14);

}



*,

*::before,

*::after {

    box-sizing: border-box;

}



html,

body {

    margin: 0;

    padding: 0;

}



body {

    font-family: "Manrope", sans-serif;

    color: var(--ink);

    background:

        radial-gradient(circle at 10% 5%, rgba(163, 63, 86, 0.14), transparent 32%),

        radial-gradient(circle at 90% 15%, rgba(240, 216, 220, 0.42), transparent 30%),

        linear-gradient(180deg, #f0f4f5 0%, var(--paper) 45%, #f6f1e5 100%);

    line-height: 1.6;

}



a {

    color: var(--accent);

    text-decoration-thickness: 2px;

    text-underline-offset: 2px;

}



.container {

    width: min(1120px, 92vw);

    margin: 0 auto;

}



.site-header {

    position: sticky;

    top: 0;

    z-index: 20;

    backdrop-filter: blur(8px);

    background: rgba(247, 246, 241, 0.86);

    border-bottom: 1px solid rgba(19, 32, 41, 0.08);

}



.nav {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 76px;

    gap: 14px;

}



.brand {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-weight: 700;

    text-decoration: none;

    color: var(--ink);

}



.brand-mark {

    width: 38px;

    height: 38px;

    border-radius: 12px;

    display: inline-grid;

    place-items: center;

    font-family: "Fraunces", serif;

    background: linear-gradient(135deg, var(--accent), var(--accent-strong));

    color: #fff;

    box-shadow: var(--shadow);

}



.nav-links {

    display: flex;

    align-items: center;

    gap: 20px;

}



.nav-links a {

    text-decoration: none;

    color: var(--ink);

    font-weight: 600;

}



.preview-link {

    font-weight: 700;

    text-decoration: none;

    color: var(--accent);

    border-bottom: 2px solid rgba(163, 63, 86, 0.25);

    padding-bottom: 2px;

}



.hero {

    padding: 58px 0 22px;

}



.hero-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 24px;

    align-items: stretch;

}



.eyebrow {

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--accent);

    font-size: 0.85rem;

    font-weight: 700;

    margin-bottom: 6px;

}



h1,

h2,

h3 {

    margin-top: 0;

    color: #0f1b22;

}



h1,

h2 {

    font-family: "Fraunces", serif;

    line-height: 1.1;

}



h1 {

    font-size: clamp(2rem, 5vw, 3.5rem);

    margin-bottom: 14px;

}



h2 {

    font-size: clamp(1.5rem, 3.5vw, 2.4rem);

}



.lead {

    max-width: 65ch;

    font-size: 1.05rem;

}



.hero-actions {

    margin: 22px 0;

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}



.btn {

    border: 0;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-weight: 700;

    padding: 12px 18px;

    border-radius: 12px;

    background: linear-gradient(135deg, var(--accent), var(--accent-strong));

    color: #fff;

    transition: transform 0.16s ease, opacity 0.16s ease;

}



.btn:hover {

    transform: translateY(-1px);

    opacity: 0.95;

}



.btn-ghost {

    background: transparent;

    border: 2px solid var(--accent);

    color: var(--accent);

}



.btn-small {

    padding: 9px 14px;

    font-size: 0.95rem;

}



.trust-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 5px;

    color: #2b3c46;

}



.trust-list li::before {

    content: "•";

    color: var(--accent-strong);

    margin-right: 8px;

}



.hero-card {

    background: var(--panel);

    border-radius: var(--radius);

    padding: 24px;

    box-shadow: var(--shadow);

    border: 1px solid rgba(19, 32, 41, 0.08);

}



.hero-card p {

    margin: 0 0 14px;

}



.section {

    padding: 48px 0;

}



.section-alt {

    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(233, 216, 166, 0.3));

}



.cards {

    margin-top: 22px;

    display: grid;

    gap: 16px;

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.card {

    background: #fff;

    border-radius: 14px;

    border: 1px solid rgba(19, 32, 41, 0.08);

    padding: 20px;

    box-shadow: 0 8px 22px rgba(19, 32, 41, 0.08);

}



.about-grid {

    display: grid;

    gap: 18px;

    grid-template-columns: 1.2fr 0.8fr;

}



.pillars {

    display: grid;

    gap: 12px;

}



.pillars > div {

    padding: 14px 16px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid rgba(19, 32, 41, 0.07);

}



.contact-wrap {

    display: grid;

    gap: 20px;

    grid-template-columns: 1fr 1fr;

    align-items: start;

}



.form-panel {

    padding: 24px;

    border-radius: var(--radius);

    background: #fff;

    box-shadow: var(--shadow);

    border: 1px solid rgba(19, 32, 41, 0.08);

}



form {

    display: grid;

    gap: 10px;

}



label {

    font-weight: 700;

    font-size: 0.95rem;

}



input,

textarea {

    font: inherit;

    border: 1px solid rgba(19, 32, 41, 0.25);

    border-radius: 10px;

    padding: 10px 12px;

    background: #fff;

}



input:focus,

textarea:focus {

    outline: 2px solid rgba(207, 111, 131, 0.35);

    border-color: var(--accent-strong);

}



.check {

    display: grid;

    grid-template-columns: auto 1fr;

    gap: 8px;

    align-items: start;

}



.check input {

    margin-top: 4px;

}



.alert {

    margin-bottom: 14px;

    border-radius: 10px;

    padding: 12px 14px;

    font-weight: 600;

}



.alert-success {

    background: rgba(21, 102, 77, 0.12);

    color: var(--ok);

}



.alert-warning {

    background: rgba(122, 91, 6, 0.14);

    color: var(--warn);

}



.alert-error {

    background: rgba(132, 32, 41, 0.13);

    color: var(--error);

}



.small {

    font-size: 0.92rem;

    color: #334851;

}



.site-footer {

    padding: 24px 0 38px;

    border-top: 1px solid rgba(19, 32, 41, 0.1);

}



.footer-grid {

    display: grid;

    gap: 16px;

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.cookie-banner {

    position: fixed;

    right: 16px;

    bottom: 16px;

    width: min(440px, calc(100vw - 32px));

    background: #102028;

    color: #f2f4f5;

    border-radius: 14px;

    padding: 14px;

    box-shadow: var(--shadow);

    display: grid;

    gap: 10px;

}



.cookie-banner .btn {

    width: fit-content;

}



.hp-field {

    position: absolute;

    left: -9999px;

}



.legal {

    padding: 36px 0 64px;

}



@media (max-width: 960px) {

    .hero-grid,

    .about-grid,

    .contact-wrap,

    .cards,

    .footer-grid {

        grid-template-columns: 1fr;

    }



    .nav-links {

        display: none;

    }



    .preview-link {

        display: none;

    }



    .hero {

        padding-top: 34px;

    }

}



/* ===== HEADER ARMONIZZATO ===== */



.brand span:last-child {

    color: #5A1620;

    font-weight: 600;

    letter-spacing: 0.3px;

}



.nav-links a {

    color: #5A1620;

    font-weight: 500;

}



.nav-links a:hover {

    color: #7A1E2C;

}



.brand-mark {

    background-color: #7A1E2C;

}