:root{
  --c-primary:#003366;
  --c-primary-2:#0055a5;
  --c-accent:#e60000;
  --c-bg:#f9fafc;
  --c-text:#222;
  --c-muted:#555;
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,0.08);
  --maxw:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0; color:var(--c-text); background:var(--c-bg); line-height:1.6;
}

/* Accessibilità */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}

/* Header sticky */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,#00264d,#004c99); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center}
.brand h1{font-size:1.1rem; margin:0}
.brand small{opacity:.9; font-weight:400}

nav.primary-nav a{
  color:#fff; text-decoration:none; font-weight:600; margin:0 10px; padding:8px 10px; border-radius:8px;
}
nav.primary-nav a:hover{background:rgba(255,255,255,.12)}
.menu-toggle{display:none; background:transparent; border:0; color:#fff; font-size:1.2rem}

/* Mobile menu */
.mobile-menu{display:none; background:#004c99}
.mobile-menu a{display:block; color:#fff; text-decoration:none; padding:12px 20px; border-top:1px solid rgba(255,255,255,.15)}

/* Hero */
.hero{
  position:relative; text-align:center; color:#fff; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, #004c99 0%, #003366 70%);
  padding:80px 20px;
}
.hero .container{max-width:900px}
.hero h2{font-size:2.2rem; margin:0 0 10px}
.hero p{font-size:1.1rem; color:#eef2f6; margin:0 auto 24px}
.btn{
  display:inline-block; text-decoration:none; font-weight:700; letter-spacing:.3px;
  background:var(--c-accent); color:#fff; padding:12px 20px; border-radius:10px;
  box-shadow:0 6px 18px rgba(230,0,0,.25); transition:transform .15s ease, filter .15s ease;
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05)}
.btn-outline{
  background:transparent; border:2px solid #ffcc00; color:#ffcc00; box-shadow:none;
}
.btn-outline:hover{background:#ffcc00; color:#003366}

/* Sezioni */
.section{padding:56px 20px}
.card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; margin:0 auto; max-width:var(--maxw);
}
.section h1,.section h2,.section h3{color:var(--c-primary); margin-top:0}

/* Griglie */
.services{display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:12px}
.service{background:#fdfefe; border:1px solid #eef2f6; border-radius:12px; padding:18px}
.service strong, .service h2{color:var(--c-primary-2)}
.service p{margin:6px 0 0; color:var(--c-muted)}

/* Contatti */
.contact-grid{display:grid; gap:24px; grid-template-columns:1.2fr .8fr; align-items:start}
form.contact{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
form.contact label{display:block; font-weight:600; margin:12px 0 6px}
form.contact input, form.contact textarea{
  width:100%; padding:12px 14px; border:1px solid #dfe6ee; border-radius:10px; font:inherit; background:#fbfdff;
}
form.contact textarea{min-height:140px; resize:vertical}
form .row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.contact-aside{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;
}
.contact-aside p{margin:.4rem 0}

/* Footer */
footer.footer{
  background:var(--c-primary); color:#fff; text-align:center; padding:26px 16px; font-size:.95rem;
}
.social a{
  color:#fff; text-decoration:none; font-weight:600; margin:0 8px; padding:6px 8px; border-radius:8px;
}
.social a:hover{background:rgba(255,255,255,.12)}

/* Testimonianze */
.testimonials{padding:56px 20px}
.testimonials .grid{
  display:grid; gap:18px; grid-template-columns:repeat(3,1fr); margin-top:12px;
}
.testimonial-card{
  background:#fff; border:1px solid #eef2f6; border-radius:12px; padding:18px; box-shadow:var(--shadow);
}
.testimonial-header{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.avatar{
  width:40px; height:40px; border-radius:50%; background:#e8f0fe; display:flex; align-items:center; justify-content:center; font-weight:700; color:#003366;
}
.person{font-weight:700; color:var(--c-primary)}
.role{color:var(--c-muted); font-size:.9rem}
.stars{font-size:1rem; line-height:1; margin:6px 0 10px}
.stars span{filter:grayscale(0)}
.t-note{font-size:.85rem; color:var(--c-muted); margin-top:12px}

/* CTA finale */
.cta-final {
  background: linear-gradient(90deg, #004c99, #003366);
  color: white;
  padding: 60px 20px;
  text-align: center;
}
.cta-final .btn {
  background: #ffcc00;
  color: #003366;
  box-shadow: 0 6px 14px rgba(255,204,0,0.3);
}
.cta-final .btn:hover { background: #ffd633; }

/* Network status banner */
.net-banner{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.net-banner.online{ display:flex; background:#2e7d32; color:#fff; }
.net-banner.offline{ display:flex; background:#b00020; color:#fff; }
.net-banner .nb-btn{
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}
.net-banner.online .nb-btn{ background: #ffcc00; color: #003366; }
.net-banner.offline .nb-btn{ background: rgba(255,255,255,0.15); color: #fff; }
body.has-net-banner{ padding-top: 54px; }

/* Responsive */
@media (max-width: 960px){
  .services{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  form .row{grid-template-columns:1fr}
  .testimonials .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  nav.primary-nav{display:none}
  .menu-toggle{display:inline-flex; align-items:center; gap:8px}
  .mobile-menu{display:none; background:#004c99}
  .mobile-menu a{display:block; color:#fff; text-decoration:none; padding:12px 20px; border-top:1px solid rgba(255,255,255,.15)}
  .hero h2{font-size:1.8rem}
  .testimonials .grid{grid-template-columns:1fr}
}

/* Motion preferenze */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}


#chi-siamo-servizi h3 { color: #003366; font-size: 1.6em; margin-top: 0.5em; }
#chi-siamo-servizi h4 { color: #0055a5; margin-bottom: 0.4em; }



.section-intro {
  text-align: center;
  color: #333;
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1em;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.service-card {
  background: #ffffff;
  border-radius: 15px;
  padding: 30px 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.service-card h2 {
  color: #003366;
  font-size: 1.3em;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 1em;
  color: #444;
  margin-bottom: 10px;
}

.service-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-card ul li {
  margin-bottom: 6px;
  padding-left: 22px;
  position: relative;
}

.service-card ul li::before {
  content: "✔";
  color: #ffcc00;
  position: absolute;
  left: 0;
}



/* --- Home Enhancements --- */
.hero-list{
  list-style:none; padding:0; margin:18px auto 16px; max-width:720px; text-align:left;
}
.hero-list li{ position:relative; padding-left:28px; margin:8px 0; color:#eef2f6; }
.hero-list li::before{ content:"▹"; position:absolute; left:8px; top:0; opacity:.9 }

.trustbar{ background:#f2f6fb; padding:16px 0; border-top:1px solid #e3edf7; border-bottom:1px solid #e3edf7; }
.pillbar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:0; padding:0; list-style:none; }
.pill{ background:#fff; border:1px solid #dbe6f3; color:#003366; border-radius:999px; padding:8px 14px; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,.04) }

.steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.step-card{ background:#fff; border:1px solid #eef2f6; border-radius:12px; padding:18px; box-shadow:var(--shadow); text-align:left; }
.step-ico{ font-size:1.6rem; }
.step-card h4{ margin:.4rem 0 .2rem; color:var(--c-primary-2); }
.step-card p{ margin:0; color:var(--c-muted); }

/* Sticky mobile CTA (shown on small screens) */
.sticky-cta-mobile{
  position:fixed; z-index:60; left:0; right:0; bottom:0;
  display:none; gap:10px; justify-content:center; padding:10px; background:#ffffffee; backdrop-filter: blur(6px);
  border-top:1px solid #e5ebf3;
}
@media (max-width: 720px){
  .sticky-cta-mobile{ display:flex; }
}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}



/* === Branding boost === */
header.site-header .navbar{ padding:18px 0 }
.brand{ gap:14px }
.brand-logo{ width:72px; height:auto !important; filter: drop-shadow(0 3px 8px rgba(0,0,0,.18)); }
.brand h1{ margin:0; font-size:2rem; font-weight:800; letter-spacing:.3px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.18) }
.brand small,.brand-subtitle{ display:block; margin-top:2px; color:#ffcc00; font-weight:700; letter-spacing:1px; text-transform:uppercase }

@media (max-width: 960px){
  .brand-logo{ width:60px }
  .brand h1{ font-size:1.7rem }
}
@media (max-width: 720px){
  .brand-logo{ width:52px }
  .brand h1{ font-size:1.45rem }
  .brand small,.brand-subtitle{ letter-spacing:.8px }
}



/* --- About grid (text + visual) --- */
.about-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  align-items: center;
}
.about-visual img{
  width:100%; height:auto; border-radius:12px;
  display:block;
}
.about-visual figcaption{
  font-size:.9rem; color:#666; margin-top:8px; text-align:center;
}
@media (max-width: 960px){
  .about-grid{ grid-template-columns: 1fr; }
}



/* === Logo SVG & micro-animazioni (desktop only) === */
.brand{ position:relative; align-items:center; }
.brand-logo{ transition: transform .25s ease; will-change: transform; }
@media (hover:hover) and (pointer:fine) and (min-width: 961px){
  .brand:hover .brand-logo{ transform: scale(1.06); }
  .brand::after{
    content:""; position:absolute; left:-30%; top:0; height:100%; width:30%;
    background: linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-12deg);
    opacity:0; pointer-events:none;
  }
  .brand:hover::after{
    animation: brand-shine .9s ease forwards;
  }
  @keyframes brand-shine{
    0%{ left:-30%; opacity:0; }
    10%{ opacity:1; }
    100%{ left:130%; opacity:0; }
  }
}