/* === Palette rispettando i toni del logo (azzurri/blu) === */
:root{
  --brand-800:#0d47a1;
  --brand-700:#1565c0;
  --brand-600:#1976d2;
  --brand-500:#1e88e5;
  --brand-300:#64b5f6;
  --brand-100:#e3f2fd;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#ffffff;
  --bg-alt:#f6f9fe;
  --radius:16px;
  --shadow:0 10px 25px rgba(13,71,161,.15);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{width:min(1100px, 92vw); margin-inline:auto}

a{color:var(--brand-600); text-decoration:none}
a:hover{text-decoration:underline}

/* Accessibilità */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:static; width:auto; height:auto; padding:.5rem .75rem; background:var(--brand-600); color:#fff;
}

/* Header */
.header{
  position:sticky; top:0; inset-inline:0;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid #e6eefc;
  z-index:100;
}
.nav{
  display:flex; align-items:center; gap:1rem; padding: .75rem 0;
}
.brand{display:flex; align-items:center; gap:.75rem; font-weight:700; color:var(--ink)}
.logo{height:44px; width:auto; display:block}
.logo.small{height:32px}
.brand-text{display:none}
@media (min-width:720px){ .brand-text{display:inline} }

.menu{display:flex; gap:1rem; align-items:center; margin-left:auto}
.menu a{padding:.5rem .75rem; border-radius:10px}
.menu a:hover{background:var(--brand-100); text-decoration:none}

.menu-toggle{display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; background:transparent; border:0; margin-left:auto}
@media (min-width:840px){ .menu-toggle{display:none} }
@media (max-width:839px){
  .menu{ position:absolute; right:1rem; top:64px; background:#fff; padding:.5rem; border-radius:12px; box-shadow:var(--shadow); display:none; flex-direction:column; align-items:stretch; min-width:220px}
  .menu.open{display:flex}
}

/* Buttons */
.btn{
  display:inline-block; background:linear-gradient(135deg, var(--brand-600), var(--brand-300));
  color:#fff; border:none; padding:.8rem 1rem; border-radius:12px; font-weight:600; box-shadow:var(--shadow);
  transition:transform .08s ease, box-shadow .2s ease; text-align:center;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn-ghost{ background:transparent; color:var(--brand-600); border:2px solid var(--brand-300)}

/* Hero */
.hero{
  background: radial-gradient(1200px 600px at 10% 10%, var(--brand-100), transparent 60%),
              linear-gradient(180deg, #ffffff, #f7fbff 70%);
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:2rem; padding: 4rem 0 2rem;
}
@media (min-width:940px){ .hero-grid{ grid-template-columns: 1.1fr .9fr; align-items:center; padding: 6rem 0 3rem; } }
.hero-text h1{ font-size: clamp(2rem, 3.5vw + 1rem, 3.25rem); line-height:1.1; margin:0 0 .7rem; color:var(--brand-800); }
.hero-text p{ font-size:1.125rem; color:var(--muted); margin:0 0 1.25rem}
.hero-cta{ display:flex; gap:.75rem; flex-wrap:wrap }
.hero-media{
  display:block;
  width:100%;
  aspect-ratio: 16/10;   /* regola il rapporto se vuoi */
  object-fit: cover;     /* riempie mantenendo il taglio estetico */
  border-radius: var(--radius);
  border: 1px solid #e6eefc;
  box-shadow: var(--shadow);
}

.hero-wave{
  height:40px; background:linear-gradient(180deg, transparent, rgba(100,181,246,.25));
}

/* Sections */
.section{ padding: 3rem 0 }
.section.alt{ background:var(--bg-alt); border-block:1px solid #e6eefc }
.section-title{
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  margin:0 0 1.25rem; color:var(--brand-800);
}

/* Cards */
.cards{ display:grid; grid-template-columns: 1fr; gap:1rem }
@media (min-width:680px){ .cards{ grid-template-columns: repeat(2, 1fr) } }
@media (min-width:1040px){ .cards{ grid-template-columns: repeat(3, 1fr) } }
.card{
  border:1px solid #e6eefc; border-radius:var(--radius); padding:1.1rem; background:#fff; box-shadow:var(--shadow);
}
.card h3{ margin:.25rem 0 .25rem 0; color:var(--brand-700) }
.card p{ margin:0; color:var(--muted) }

/* Features */
.features{ display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:900px){ .features{ grid-template-columns: repeat(4, 1fr) } }
.feature{ background:#fff; border:1px solid #e6eefc; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow) }
.feature h4{ margin:.25rem 0; color:var(--brand-700) }
.feature p{ margin:0; color:var(--muted) }

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:1.2rem }
@media (min-width:940px){ .contact-grid{ grid-template-columns: 1.2fr .8fr } }
.form{ background:#fff; border:1px solid #e6eefc; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow) }
.form-row{ display:flex; flex-direction:column; gap:.25rem; margin-bottom:.9rem }
label{ font-weight:600; color:var(--brand-700) }
input, textarea{
  padding:.75rem; border:1px solid #d8e6fb; border-radius:10px; font:inherit; outline:none;
}
input:focus, textarea:focus{ border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(30,136,229,.15) }
.form-actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.5rem }
.privacy{ font-size:.9rem; color:var(--muted); margin:0 }
.contact-info{ display:flex; align-items:stretch }
.contact-card{ background:linear-gradient(180deg, #fff, var(--brand-100)); border:1px solid #e6eefc; border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow) }
.contact-card h4{ margin:.25rem 0 .5rem; color:var(--brand-700) }

/* Footer */
.footer{ background:#0b2f6b; color:#e8f1ff; padding:1.5rem 0; margin-top:2rem }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:.75rem; align-items:center }
@media (min-width:860px){ .footer-grid{ grid-template-columns: auto 1fr auto } }
.footer-brand{ display:flex; gap:.6rem; align-items:center; font-weight:600 }
.footer-links a{ color:#e8f1ff; margin-right:1rem }
.footer a:hover{ text-decoration:underline }
.copyright{ margin:0; opacity:.9 }