/* =========================================================
   Studio Pixel & Partners — stile personalizzato
   Bootstrap 5 (CDN) + override minimi via variabili CSS.
   ========================================================= */

:root{
  --sp-navy: #0c2a54;
  --sp-navy-dark: #081b38;
  --sp-navy-soft: #eef2f6;
  --sp-gold: #a9813f;
  --sp-gold-light: #d9bd82;
  --sp-text: #1c2733;
  --sp-text-muted: #5b6b7c;
  --sp-bg: #f7f8fa;
  --sp-radius: .5rem;
  --sp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sp-font-head: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--sp-font-body);
  color: var(--sp-text);
  background: #fff;
}

h1,h2,h3,h4, .sp-brand{
  font-family: var(--sp-font-head);
  color: var(--sp-navy);
  font-weight: 700;
}

a{ color: var(--sp-navy); }
a:hover{ color: var(--sp-gold); }

/* ---------- Header / Nav ---------- */
.sp-header{
  border-bottom: 1px solid rgba(15,41,66,.08);
  background: #fff;
}
.sp-brand{
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing:.2px;
}
.sp-brand span{ color: var(--sp-gold); font-weight:600; }
.sp-brand-footer{ color:#fff; }
.sp-brand-footer span{ color: var(--sp-gold-light); }

.navbar-nav{ row-gap:.4rem; }
.navbar-nav .nav-link{
  color: var(--sp-text);
  font-weight:500;
  padding:.5rem 1rem;
}

/* Voci di menu in stile "pillola", coerenti con Area Riservata,
   con un piccolo effetto di sollevamento (3D) al passaggio del mouse. */
.navbar-nav .nav-link.sp-nav-pill{
  border:1px solid rgba(15,41,66,.18);
  border-radius:999px;
  padding:.32rem .8rem;
  margin-right:.25rem;
  font-size:.76rem;
  font-weight:600;
  color: var(--sp-text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}
.navbar-nav .nav-link.sp-nav-pill:hover{
  border-color: var(--sp-gold);
  color: var(--sp-navy);
  background:#fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(15,41,66,.16);
}
.navbar-nav .nav-link.sp-nav-pill.active{
  background: var(--sp-navy);
  border-color: var(--sp-navy);
  color:#fff;
}
.navbar-nav .nav-link.sp-nav-pill.active:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(15,41,66,.28);
}

.btn-sp-primary,
.btn-sp-outline{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  border-radius: 999px;
  padding:.65rem 1.4rem .65rem 1.6rem;
  font-weight:600;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-sp-primary{
  background: var(--sp-navy);
  color:#fff;
  border:1px solid var(--sp-navy);
}
.btn-sp-primary:hover{
  background: var(--sp-gold);
  border-color: var(--sp-gold);
  color:#fff;
}
.btn-sp-outline{
  border:1px solid var(--sp-navy);
  color: var(--sp-navy);
  background:transparent;
}
.btn-sp-outline:hover{
  background: var(--sp-navy);
  color:#fff;
}
.btn-outline-light.btn-lg{ border-radius:999px; }

/* Freccia animata su bottoni e link, in stile "arrow CTA" */
.btn-sp-primary::after,
.btn-sp-outline::after,
.sp-arrow-link::after{
  content:"\2192";
  display:inline-block;
  transition: transform .15s ease;
}
.btn-sp-primary:hover::after,
.btn-sp-outline:hover::after,
.sp-arrow-link:hover::after{
  transform: translateX(4px);
}
.sp-arrow-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  text-decoration:none;
}

/* ---------- Hero ---------- */
.sp-hero{
  background: linear-gradient(135deg, var(--sp-navy) 0%, var(--sp-navy-dark) 100%);
  color:#fff;
  padding: 5.5rem 0 6rem;
  position:relative;
  overflow:hidden;
}
.sp-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 85% 20%, rgba(169,129,63,.25), transparent 45%);
  pointer-events:none;
}
.sp-hero h1{
  color:#fff;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-.01em;
}
.sp-hero .lead{
  color: rgba(255,255,255,.82);
  font-size:1.15rem;
  max-width: 620px;
}
.sp-hero-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color: var(--sp-gold-light);
  padding:.3rem .9rem;
  border-radius: 999px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-bottom:1.25rem;
}

/* ---------- Sezioni ---------- */
.sp-section{ padding: 5.5rem 0; }
.sp-section-alt{ background: var(--sp-bg); }
.sp-eyebrow{
  color: var(--sp-gold);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:700;
  font-size:.8rem;
  margin-bottom:.5rem;
  display:block;
}
.sp-lead-muted{ color: var(--sp-text-muted); font-size:1.05rem; }
.sp-justify{ text-align: justify; text-align-last: left; }

/* ---------- FAQ (accordion) ---------- */
.sp-faq .accordion-item{
  border:1px solid rgba(15,41,66,.1);
  border-radius: var(--sp-radius) !important;
  overflow:hidden;
  margin-bottom:.9rem;
}
.sp-faq .accordion-button{
  font-family: var(--sp-font-head);
  font-weight:700;
  color: var(--sp-navy);
  background:#fff;
}
.sp-faq .accordion-button:not(.collapsed){
  color: var(--sp-navy);
  background: var(--sp-navy-soft);
  box-shadow:none;
}
.sp-faq .accordion-button:focus{ box-shadow:none; border-color: rgba(15,41,66,.1); }
.sp-faq .accordion-button::after{ filter: none; }
.sp-faq .accordion-body{ color: var(--sp-text-muted); }

/* ---------- Card servizi ---------- */
.sp-card{
  background:#fff;
  border:1px solid rgba(15,41,66,.08);
  border-radius: var(--sp-radius);
  padding: 2rem 1.75rem;
  height:100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sp-card:hover{
  box-shadow: 0 12px 28px rgba(15,41,66,.09);
  transform: translateY(-2px);
}
.sp-card-icon{
  width:48px; height:48px;
  border-radius:12px;
  background: var(--sp-navy-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--sp-navy);
  margin-bottom:1.1rem;
}
.sp-card h3, .sp-card h5{
  font-size:1.15rem;
  margin-bottom:.6rem;
}
.sp-card p{ color: var(--sp-text-muted); font-size:.95rem; margin-bottom:0; }

/* ---------- Credenziali / numeri ---------- */
.sp-stat{
  text-align:center;
  padding: 1.5rem 1rem;
}
.sp-stat .num{
  font-family: var(--sp-font-head);
  font-size:2.2rem;
  font-weight:700;
  color: var(--sp-navy);
  display:block;
}
.sp-stat .lbl{
  color: var(--sp-text-muted);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ---------- Badge certificazioni ---------- */
.sp-badge-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.sp-badge{
  border:1px solid rgba(15,41,66,.15);
  border-radius: 999px;
  padding:.4rem 1rem;
  font-size:.82rem;
  font-weight:600;
  color: var(--sp-navy);
  background: var(--sp-navy-soft);
}

/* ---------- Timeline chi-siamo ---------- */
.sp-timeline{ border-left:2px solid rgba(15,41,66,.12); padding-left:1.75rem; }
.sp-timeline .item{ position:relative; padding-bottom:2rem; }
.sp-timeline .item::before{
  content:"";
  position:absolute; left:-2.28rem; top:.3rem;
  width:12px; height:12px; border-radius:50%;
  background: var(--sp-gold);
  border:2px solid #fff;
  box-shadow: 0 0 0 2px rgba(169,129,63,.35);
}
.sp-timeline .item:last-child{ padding-bottom:0; }

/* ---------- Network / società collegate ---------- */
.sp-entity{
  border:1px solid rgba(15,41,66,.08);
  border-radius: var(--sp-radius);
  padding:1.75rem;
  height:100%;
  background:#fff;
}
.sp-entity .tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color: var(--sp-gold);
  margin-bottom:.5rem;
}

/* ---------- Form contatti ---------- */
.sp-form .form-control,
.sp-form .form-select{
  border-radius: var(--sp-radius);
  border-color: rgba(15,41,66,.18);
  padding:.65rem .85rem;
}
.sp-form .form-control:focus{
  border-color: var(--sp-navy);
  box-shadow: 0 0 0 .2rem rgba(15,41,66,.12);
}
.sp-form label{ font-weight:600; font-size:.9rem; }

/* honeypot: campo invisibile agli utenti, visibile ai bot */
.sp-hp{ position:absolute; left:-9999px; top:-9999px; }

/* ---------- Footer ---------- */
.sp-footer{
  background: var(--sp-navy-dark);
  color: rgba(255,255,255,.7);
  font-size:.82rem;
}
.sp-footer h6{
  font-size:.72rem;
  margin-bottom:.6rem !important;
  letter-spacing:.06em;
}
.sp-footer-links a{
  color: rgba(255,255,255,.65);
  text-decoration:none;
  display:block;
  padding:.1rem 0;
  font-size:.82rem;
  line-height:1.5;
}
.sp-footer-links a:hover{ color: var(--sp-gold-light); }
.sp-footer li{
  font-size:.82rem;
  line-height:1.5;
  margin-bottom:.15rem;
  color: rgba(255,255,255,.65);
}
/* Contatti: label e valore (Tel./Email) restano sulla stessa riga, come PEC */
.sp-footer-contact a{
  display:inline;
  padding:0;
}
.sp-footer .sp-brand-footer{ font-size:1.1rem; }
.sp-footer-bottom{
  font-size:.74rem;
  color: rgba(255,255,255,.5);
}

/* ---------- Utility ---------- */
.sp-divider{
  width:56px; height:3px; background: var(--sp-gold);
  border:none; border-radius:2px; margin: 0 0 1.25rem;
}