/* ========== Base ========== */
:root{
 --maxw: 1100px;
 --ink: #1b1b1b;
 --ink-soft: #444;
 --line: #eee;
 --panel: #fafafa;
 --brand-size: 1.6rem;        /* ↑ dimensione brand */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
 line-height:1.6; color:var(--ink); background:#fff;
}
a{color:inherit;text-decoration:none}

/* ========== Header / Nav ========== */
.header{
 position:sticky; top:0; z-index:10;
 backdrop-filter:blur(10px);
 background: rgba(255,255,255,.78);
 border-bottom:1px solid var(--line);
}
.nav{
 max-width:var(--maxw); margin:0 auto; padding:12px 20px;
 display:flex; align-items:center; gap:14px;
}
.nav img{ width:34px; height:34px; }        /* ↑ logo più grande */
.nav .brand{
 display:flex; align-items:center; gap:10px;
 font-weight:700; letter-spacing:.3px;
 font-size: var(--brand-size);             /* ↑ testo più grande */
}
.nav .links{ margin-left:auto; display:flex; gap:8px; flex-wrap:wrap }
.nav a{ padding:8px 10px; border-radius:8px }
.nav .cta{ background:#111; color:#fff }

/* ========== Hero ========== */
.hero{
 min-height:72vh; display:grid; place-items:center; text-align:center;
 /* Se carichi un'immagine, sostituisci la riga sotto con:
    background: url('/images/hero.jpg') center/cover no-repeat; */
 background: #7a7a7a; /* fallback */
 color:#fff; position:relative;
}
.hero::after{
 content:""; position:absolute; inset:0;
 /* Beige caldo (opzione B) come overlay */
 background: linear-gradient(180deg,
   rgba(222, 210, 190, 0.35),
   rgba(222, 210, 190, 0.45)
 );
}
.hero > .inner{ position:relative; z-index:1; padding:80px 20px; max-width:900px }
h1{ line-height:1.1; font-size: clamp(2rem, 3.5vw, 3.4rem); margin:0 0 10px }
.lead{ font-size: clamp(1rem, 1.25vw, 1.25rem); opacity:.95 }
.btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px }
.btn{ display:inline-block; padding:12px 16px; border-radius:10px; text-decoration:none; border:1px solid rgba(255,255,255,.6); color:#fff }
.btn.primary{ background:#0a0a0a; border-color:#0a0a0a }

/* ========== Sections & cards ========== */
.section{ padding:60px 20px }
.container{ max-width:var(--maxw); margin:0 auto }
.grid{ display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card{ border:1px solid var(--line); border-radius:14px; padding:18px }
.card h3{ margin:0 0 6px }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; background:#f3f3f3; font-size:.85rem }
ul.clean{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.highlight{ background:#faf8f3; border:1px dashed #e7dfcf; padding:14px; border-radius:12px }

/* ========== Gallery ========== */
.gallery{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.gallery img{ width:100%; height:220px; object-fit:cover; border-radius:12px }

/* ========== Pricing ========== */
.pricing{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.price-card{ border:1px solid var(--line); border-radius:14px; padding:22px }
.price{ font-size:1.8rem; font-weight:800 }
.kicker{ font-size:.9rem; opacity:.8 }

/* ========== Contact / form ========== */
.contact{ display:grid; gap:22px; grid-template-columns: 1.2fr 1fr; }
input, textarea, select{ width:100%; padding:12px; border-radius:10px; border:1px solid #ddd; font:inherit;}
label{ font-weight:600; font-size:.95rem }
form .row{ display:grid; gap:12px; grid-template-columns: repeat(2, 1fr) }

/* ========== Footer ========== */
footer{ padding:36px 20px; border-top:1px solid var(--line); background:#faf8f3; font-size:.95rem }
.small{ font-size:.92rem; opacity:.8 }

/* ========== Responsive ========== */
@media (max-width: 800px){
 .contact{ grid-template-columns: 1fr; }
 .hero{ min-height:64vh }
 .nav .brand{ font-size:1.3rem }
 .nav img{ width:28px; height:28px }
}