:root {

  --bg: #0b1f3a;

  --bg2: #08162a;

  --text: #0f172a;

  --muted: #5b667a;

  --surface: #ffffff;

  --surface2: #f4f6f9;

  --border: #e6eaf2;

  --accent: #1b6cff;

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  color: var(--text);

  background: #fff;

  line-height: 1.6;

}



.container {

  width: min(1100px, 92%);

  margin: 0 auto;

}



.header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(11, 31, 58, .92);

  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(255, 255, 255, .08);

}



.header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 0;

  gap: 16px;

}



.brand {

  color: #fff;

  text-decoration: none;

  font-weight: 800;

  letter-spacing: .4px;

  font-size: 1.1rem;

}



.nav {

  display: flex;

  gap: 18px;

  align-items: center;

}



.nav a {

  color: rgba(255, 255, 255, .9);

  text-decoration: none;

  font-weight: 600;

  font-size: .95rem;

}



.nav a:hover {

  color: #fff;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 12px 16px;

  border-radius: 12px;

  background: var(--accent);

  color: #fff;

  text-decoration: none;

  font-weight: 700;

  border: 1px solid transparent;

  box-shadow: 0 10px 25px rgba(27, 108, 255, .18);

}



.btn:hover {

  filter: brightness(1.05);

}



.btn--ghost {

  background: transparent;

  border-color: rgba(255, 255, 255, .25);

  box-shadow: none;

}



.btn--ghost:hover {

  border-color: rgba(255, 255, 255, .45);

}



.btn--small {

  padding: 10px 14px;

  border-radius: 10px;

}



.btn--full {

  width: 100%;

}



.hero {

  background: radial-gradient(1200px 600px at 20% 10%, rgba(27, 108, 255, .25), transparent 55%),

    linear-gradient(180deg, var(--bg), var(--bg2));

  color: #fff;

  padding: 64px 0 44px;

}



.hero__inner {

  display: grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 28px;

  align-items: start;

}



.badge {

  display: inline-block;

  padding: 6px 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, .12);

  border: 1px solid rgba(255, 255, 255, .14);

  font-weight: 700;

  font-size: .85rem;

  margin: 0 0 14px;

}



.hero h1 {

  margin: 0 0 12px;

  line-height: 1.15;

  font-size: clamp(1.9rem, 2.6vw, 2.8rem);

  letter-spacing: -.2px;

}



.lead {

  font-size: 1.05rem;

  margin: 0 0 18px;

}



/* Lead bianco SOLO dentro hero */

.hero .lead {

  color: rgba(255, 255, 255, .9);

}



/* Lead normale nelle sezioni chiare */

.section .lead {

  color: var(--text);

}



.hero__cta {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin: 18px 0 18px;

}



.hero__highlights {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

  margin-top: 8px;

}



.kpi {

  padding: 10px 12px;

  border-radius: 14px;

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .12);

  min-width: 140px;

}



.kpi__value {

  font-size: 1.25rem;

  font-weight: 900;

}



.kpi__label {

  font-size: .9rem;

  color: rgba(255, 255, 255, .82);

}



.note {

  margin: 10px 0 0;

  font-size: .85rem;

  color: rgba(255, 255, 255, .75);

}



.hero__card {

  background: rgba(255, 255, 255, .08);

  border: 1px solid rgba(255, 255, 255, .14);

  border-radius: 18px;

  padding: 18px;

}



.hero__card h2 {

  margin: 0 0 10px;

  font-size: 1.1rem;

}



.hero__card ul {

  margin: 0 0 14px 18px;

  padding: 0;

  color: rgba(255, 255, 255, .9);

}



.muted {

  color: var(--muted);

  margin: 10px 0 0;

}



.section {

  padding: 56px 0;

}



.section--alt {

  background: var(--surface2);

}



.section__head {

  margin-bottom: 20px;

}



.section__head h2 {

  margin: 0 0 6px;

  font-size: 1.6rem;

}



.section__head p {

  margin: 0;

  color: var(--muted);

}



.grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}



.card {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 18px;

  box-shadow: 0 10px 25px rgba(15, 23, 42, .05);

}



.card h3 {

  margin: 0 0 8px;

  font-size: 1.05rem;

}



.card p {

  margin: 0 0 10px;

  color: var(--muted);

}



.list {

  margin: 0;

  padding-left: 18px;

  color: var(--text);

}



.list li {

  margin: 6px 0;

}



.two-col {

  display: grid;

  grid-template-columns: 1.2fr .8fr;

  gap: 18px;

  align-items: start;

}



.panel {

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 18px;

}



.panel h3 {

  margin: 0 0 10px;

}



.contact-box {

  margin-top: 14px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: 18px;

  overflow: hidden;

}



.contact-row {

  display: flex;

  justify-content: space-between;

  gap: 10px;

  padding: 12px 14px;

  border-bottom: 1px solid var(--border);

}



.contact-row:last-child {

  border-bottom: none;

}



.contact-label {

  color: var(--muted);

  font-weight: 700;

}



.contact-row a {

  color: var(--accent);

  text-decoration: none;

  font-weight: 700;

}



.contact-row a:hover {

  text-decoration: underline;

}



.divider {

  height: 1px;

  background: var(--border);

  margin: 14px 0;

}



.footer {

  background: var(--bg2);

  color: #fff;

  padding: 26px 0 10px;

}



.footer__inner {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 18px;

  flex-wrap: wrap;

}



.footer__links {

  display: flex;

  gap: 14px;

  flex-wrap: wrap;

}



.footer__links a {

  color: rgba(255, 255, 255, .88);

  text-decoration: none;

  font-weight: 700;

}



.footer__links a:hover {

  color: #fff;

}



.footer__bottom {

  margin-top: 14px;

  border-top: 1px solid rgba(255, 255, 255, .10);

  padding-top: 10px;

}



.footer .muted {

  color: rgba(255, 255, 255, .72);

}



@media (max-width: 980px) {

  .grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .hero__inner {

    grid-template-columns: 1fr;

  }



  .two-col {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 520px) {

  .nav {

    display: none;

  }



  .grid {

    grid-template-columns: 1fr;

  }

}



#certificazioni .panel {

  border-color: rgba(27, 108, 255, .25);

  box-shadow: 0 14px 30px rgba(27, 108, 255, .10);

}