@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:#f6f3ec; --card:#ffffff; --testo:#0b1f3a; --muto:#5b6678; --linea:#e4ddd0;
  --navy:#0b1f3a; --navy2:#13305a; --teal:#0e7c86; --teal2:#0a6670; --sabbia:#efe7d8; --ok:#1e8e4f; --attenzione:#c28a00; --rosso:#b4322d;
  --ombra:0 10px 30px rgba(11,31,58,.08); --r:18px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b1522; --card:#121f31; --testo:#eef2f7; --muto:#9eacc0; --linea:#24344b; --navy:#eef2f7; --navy2:#d8e2f0; --teal:#3cc1cc; --teal2:#5fd3dc; --sabbia:#182840; --ombra:0 10px 30px rgba(0,0,0,.35); }
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--bg); color:var(--testo); font:16px/1.6 Inter,-apple-system,Segoe UI,Roboto,sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--teal) }
h1,h2,h3,.serif { font-family:Fraunces,Georgia,serif; letter-spacing:-.01em }
h2 { font-size:clamp(26px,3.4vw,36px); font-weight:600; margin:0 0 10px; line-height:1.15 }
.sotto-h2 { color:var(--muto); margin:0 0 28px; font-size:17px; max-width:640px }
.cont { max-width:1080px; margin:0 auto; padding:0 20px }

/* header */
header { position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); background:color-mix(in srgb,var(--bg) 85%,transparent); border-bottom:1px solid var(--linea) }
header .cont { display:flex; justify-content:space-between; align-items:center; height:64px }
.logo { font-family:Fraunces,serif; font-weight:700; font-size:21px; text-decoration:none; color:var(--testo); display:flex; align-items:center; gap:8px }
.logo svg { width:26px; height:26px }
header nav { display:flex; align-items:center; gap:22px; font-size:15px }
header nav a { color:var(--testo); text-decoration:none; font-weight:500 } header nav a:hover { color:var(--teal) }
header nav .bottone { padding:9px 16px; font-size:14px; margin:0 }
.lingue { font-size:13px; color:var(--muto) } .lingue a { color:var(--muto) } .lingue b { color:var(--testo) }
@media (max-width:760px) {
  header nav .nasc { display:none }
  header nav { gap:12px } header .cont { height:58px }
  .logo { font-size:18px } .lingue { white-space:nowrap }
  header nav .bottone { padding:8px 12px; font-size:13px; white-space:nowrap }
}
@media (max-width:420px) { header nav .bottone { display:none } }

/* bottoni */
.bottone { display:inline-block; padding:14px 26px; border:0; border-radius:12px; background:var(--navy); color:#fff; font:600 16px Inter,sans-serif; cursor:pointer; text-decoration:none; transition:transform .08s, background .15s }
.bottone:hover { background:var(--navy2); transform:translateY(-1px) }
.bottone.teal { background:var(--teal) } .bottone.teal:hover { background:var(--teal2) }
.bottone.secondario { background:transparent; color:var(--testo); border:1.5px solid var(--linea) } .bottone.secondario:hover { border-color:var(--testo); background:transparent }
.bottone.grande { padding:17px 32px; font-size:17px }
@media (prefers-color-scheme: dark) { .bottone { color:#0b1522 } .bottone.secondario { color:var(--testo) } }

/* hero */
.hero { padding:72px 0 56px; position:relative; overflow:hidden }
.hero .cont { max-width:860px; text-align:center }
.occhiello { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); background:color-mix(in srgb,var(--teal) 12%,transparent); padding:6px 12px; border-radius:999px; margin-bottom:22px }
.hero h1 { font-size:clamp(36px,6vw,64px); line-height:1.05; margin:0 0 22px; font-weight:600 }
.hero p { font-size:clamp(17px,2vw,20px); color:var(--muto); margin:0 auto 32px; max-width:700px }
.azioni { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.fiducia { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top:30px; font-size:14px; color:var(--muto) }
.fiducia span::before { content:"✓ "; color:var(--ok); font-weight:700 }
.onda { position:absolute; left:0; right:0; bottom:-2px; height:70px; color:var(--sabbia) }

/* contatore archivio */
.contatore { background:var(--sabbia); padding:22px 0; text-align:center; font-size:17px }
.contatore b { font-family:Fraunces,serif; font-size:30px; color:var(--teal); margin-right:6px }

/* sezioni e card */
section.blocco { padding:72px 0 }
.griglia { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px }
.card { background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:26px; box-shadow:var(--ombra) }
.card .ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--sabbia); font-size:20px; margin-bottom:14px }
.card h3 { margin:0 0 8px; font-size:19px } .card p { margin:0; color:var(--muto); font-size:15px }
.perche { background:var(--navy); color:#fff; border-radius:28px; padding:56px 40px }
.perche h2, .perche .sotto-h2 { color:#fff } .perche .sotto-h2 { color:#b9c6d9 }
.perche .card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); box-shadow:none } .perche .card h3 { color:#fff } .perche .card p { color:#c6d1e0 }
.perche .card .ico { background:rgba(255,255,255,.1) }
@media (prefers-color-scheme: dark) { .perche { background:#06101c } }

/* prezzi */
.piani { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; max-width:820px; margin:0 auto }
.piano { position:relative; background:var(--card); border:1.5px solid var(--linea); border-radius:var(--r); padding:30px; box-shadow:var(--ombra) }
.piano.top { border-color:var(--teal) }
.piano .tag { position:absolute; top:-13px; left:26px; background:var(--teal); color:#fff; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px }
.piano h3 { margin:0 0 6px; font-size:22px } .piano .desc { color:var(--muto); font-size:15px; min-height:66px }
.piano .cifra { font-family:Fraunces,serif; font-size:48px; font-weight:600; margin:10px 0 2px } .piano .cifra small { font:500 15px Inter,sans-serif; color:var(--muto) }
.piano ul { list-style:none; padding:0; margin:18px 0 22px } .piano li { padding:6px 0; font-size:15px } .piano li::before { content:"✓"; color:var(--ok); font-weight:700; margin-right:10px }
.piano .bottone { width:100%; text-align:center }

/* form */
.form { background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:34px; box-shadow:var(--ombra); max-width:820px; margin:0 auto }
.form h2 { font-size:28px }
textarea, input[type=email], input[type=text] { width:100%; padding:14px 16px; border:1.5px solid var(--linea); border-radius:12px; background:var(--bg); color:var(--testo); font:15px/1.5 Inter,sans-serif }
textarea:focus, input:focus { outline:none; border-color:var(--teal) }
textarea { min-height:190px; resize:vertical }
label { display:block; margin:18px 0 8px; font-weight:600; font-size:15px }
.piccolo { font-size:13px; color:var(--muto); margin:8px 0 0 }
.scelta { display:grid; grid-template-columns:1fr 1fr; gap:12px } @media (max-width:560px) { .scelta { grid-template-columns:1fr } }
.scelta label { margin:0; border:1.5px solid var(--linea); border-radius:12px; padding:14px 16px; cursor:pointer; display:flex; gap:12px; align-items:flex-start; font-weight:500; background:var(--bg) }
.scelta input { margin-top:4px; accent-color:var(--teal) }
.scelta label:has(input:checked) { border-color:var(--teal); background:color-mix(in srgb,var(--teal) 8%,var(--bg)) }
.scelta b { display:block; font-size:16px } .scelta small { color:var(--muto); font-weight:400; font-size:13px }
.avviso { background:#fff6d6; color:#6b4e00; border-radius:10px; padding:10px 14px; margin:10px 0; font-size:15px }
@media (prefers-color-scheme: dark) { .avviso { background:#3b3010; color:#ffe08a } }

/* passi */
.passi { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px }
.passi div { background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:22px } .passi b { display:block; font-family:Fraunces,serif; font-size:34px; color:var(--teal); line-height:1; margin-bottom:8px }

/* faq */
.faq details { background:var(--card); border:1px solid var(--linea); border-radius:14px; padding:16px 20px; margin:10px 0 }
.faq summary { cursor:pointer; font-weight:600; font-size:16px } .faq p { color:var(--muto); margin:10px 0 0 }

/* report */
main.pagina { padding:40px 0 80px }
.stato { margin:10px 0 18px; color:var(--muto); font-size:16px; min-height:24px; display:flex; align-items:center; gap:10px }
.stato .pallino { width:10px; height:10px; border-radius:50%; background:var(--teal); animation:pulsa 1.2s infinite } .stato.fermo .pallino { animation:none; background:var(--ok) } .stato.err .pallino { background:var(--rosso); animation:none }
@keyframes pulsa { 0%,100% { opacity:.3 } 50% { opacity:1 } }
.report { background:var(--card); border:1px solid var(--linea); border-radius:var(--r); padding:40px; box-shadow:var(--ombra) }
.report h1 { font-size:30px; margin-top:0; line-height:1.15 } .report h2 { font-size:21px; margin-top:34px; border-top:1px solid var(--linea); padding-top:20px }
.report table { border-collapse:collapse; width:100%; margin:12px 0; font-size:15px; display:block; overflow-x:auto }
.report th, .report td { border:1px solid var(--linea); padding:8px 11px; text-align:left; vertical-align:top } .report th { background:var(--bg) }
.report a { word-break:break-all }
.barra { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px }
.lato { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; margin-top:22px }
.lato .card h3 { font-size:17px }
.lista-mon { list-style:none; padding:0; margin:8px 0 0; font-size:14px } .lista-mon li { padding:6px 0; border-top:1px solid var(--linea); color:var(--muto) } .lista-mon li b { color:var(--testo) }
@media (max-width:640px) { .report { padding:24px } .form { padding:22px } .perche { padding:40px 22px } }

/* modelli */
.tab-mod { width:100%; border-collapse:collapse; font-size:15px } .tab-mod th, .tab-mod td { padding:10px 12px; border-bottom:1px solid var(--linea); text-align:left } .tab-mod th { color:var(--muto); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.04em }
.kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:24px 0 }
.kpi div { background:var(--card); border:1px solid var(--linea); border-radius:14px; padding:18px } .kpi small { color:var(--muto); font-size:13px; display:block } .kpi b { font-family:Fraunces,serif; font-size:28px }

/* admin */
table.admin { border-collapse:collapse; width:100%; font-size:13px } table.admin td, table.admin th { border:1px solid var(--linea); padding:6px 8px }

footer { border-top:1px solid var(--linea); padding:34px 0 50px; color:var(--muto); font-size:13px }
footer .cont { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap } footer a { color:var(--muto); margin-right:16px }

@media print {
  header, footer, .stato, .barra, .lato, .bottone { display:none !important }
  body { background:#fff; color:#000 } .report { border:0; box-shadow:none; padding:0 } main.pagina { padding:0 }
}