:root{
  --bg-light:#f7f8ff;
  --bg-lighter:#eef2ff;
  --primary:#5a6dff;
  --primary-2:#00c896;
  --text:#0f1226;
  --muted:#5b6bb3;
  --card:#ffffff;
  --shadow: 0 14px 28px rgba(15,18,38,.12);
  --radius: 16px;
  --border:#e6e9ff;
  --blue:#0c2c66;
}

*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; background:var(--bg-light); color:#0f1226; line-height:1.6}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1020px,96%); margin-inline:auto}

/* HEADER (nav centrata, senza logo) */
.site-header{position:sticky; top:0; z-index:1000; background:var(--blue); color:#e9ecff; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.header-inner{display:flex; align-items:center; justify-content:center; padding:10px 0}
.quick a{color:#e9ecff; margin:0 10px; font-weight:700; opacity:.95}
.quick a:hover{opacity:1; color:#cbd6ff}
.quick .btn.sm{padding:6px 12px; border-radius:10px; border:1px solid rgba(255,255,255,.25)}
.lang{display:inline-flex; gap:8px; margin-left:12px}
.lang a{padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.3); color:#e9ecff; font-weight:700; font-size:.9rem; opacity:.9}
.lang a.active{background:#e9ecff; color:#0f1226; opacity:1}

/* HERO */
.hero{position:relative; min-height:92vh; display:grid; place-items:center; text-align:center; overflow:hidden; background:linear-gradient(180deg,#ffffff 0%, var(--bg-light) 100%)}
.hero-bg{position:absolute; inset:0; background: radial-gradient(1200px 600px at 15% 25%, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 45%, transparent 70%), radial-gradient(1200px 600px at 85% 85%, rgba(106,125,255,.22) 0%, transparent 55%); pointer-events:none}
.hero-inner{position:relative; z-index:2; padding:90px 0}
.hero-brand{display:flex; justify-content:center; margin-bottom:14px}
.hero-brand img{height:264px; width:auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));}
.kicker{display:inline-flex; align-items:center; gap:.6rem; background:#ffffffcc; border:1px solid var(--border); padding:.4rem .8rem; border-radius:999px; box-shadow:0 6px 16px rgba(15,18,38,.08)}
.kicker .dot{width:8px; height:8px; border-radius:50%; background:var(--primary-2); box-shadow:0 0 12px var(--primary-2)}
h1{font-size:clamp(2.4rem,4vw + .5rem,3.8rem); margin:.8rem 0}
.subtitle{font-size:1.2rem; color:#2b3566; margin:0 auto; max-width:900px}
.cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.btn{border:none; padding:12px 22px; border-radius:12px; cursor:pointer; font-weight:800; letter-spacing:.2px; transition:.25s transform,.25s box-shadow,.25s background}
.btn-primary{background:linear-gradient(180deg, #7e8dff, #5a6dff); color:#fff; box-shadow:0 10px 25px rgba(106,125,255,.25)}
.btn-ghost{background:#ffffff; color:#2b3566; border:1px solid var(--border); box-shadow:0 6px 16px rgba(15,18,38,.08)}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn-primary:hover{background:linear-gradient(180deg,#6a7dff,#4c5cff)}
.btn-ghost:hover{background:#f0f2ff}

/* SECTIONS */
section{padding:80px 0}
.section-title{font-size:clamp(1.8rem,1.8vw + .6rem,2.3rem); text-align:center; margin:0 0 10px}
.section-sub{color:#3c4a8f; text-align:center; margin:0 auto 36px; max-width:900px}
.section-sub.small{font-size:.95rem; color:#4a589a}
.section-contrast{background:linear-gradient(180deg,#ffffff 0%, #eef2ff 100%)}
.section-clean{background:#fff}
.mini-title{font-size:1.1rem; text-align:center; margin:18px 0 10px; color:#2b3566; font-weight:800}

/* VIDEO */
.video-frame{background:#000; border-radius:16px; overflow:hidden; border:1px solid var(--border); box-shadow:0 14px 28px rgba(15,18,38,.12)}
.video-frame video{display:block; width:100%; height:auto; aspect-ratio:16/9}

/* GRID STRIPS (desktop 4 colonne, tablet 2, mobile 1 verticale) */
.row-4.grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px}
@media (max-width: 1024px){ .row-4.grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 680px){ .row-4.grid{grid-template-columns:1fr;} }

/* CARDS */
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 10px 22px rgba(15,18,38,.08); transition: transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.card.soft{backdrop-filter:saturate(1.1)}
.media{display:block; background:#000}
.card__img{width:100%; height:100%; min-height:220px; aspect-ratio:4/3; object-fit:cover}
.card__body{padding:18px 18px 22px}
.card__title{margin:0 0 6px; font-size:1.1rem}
.card__text{margin:0; color:#33406d}

/* TIMELINE (orizzontale -> verticale su mobile) */
.timeline-h{position:relative; display:flex; justify-content:space-between; gap:20px; padding:10px 0 0}
.timeline-h::before{content:""; position:absolute; top:20px; left:0; right:0; height:3px; background:linear-gradient(90deg,#9aa6ff,#6fe0c3)}
.t-step{position:relative; width:32%; text-align:center}
.t-dot{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #6a7dff; box-shadow:0 0 0 6px rgba(106,125,255,.12)}
.t-year{display:block; margin-top:36px; font-weight:900; color:#2b3566}
.t-title{margin:.35rem 0 .2rem; font-size:1.05rem; font-weight:800}
.t-text{color:#33406d; margin:0 auto; max-width:280px; font-size:.98rem; line-height:1.5}

@media (max-width: 760px){
  .timeline-h{display:block; padding-left:16px}
  .timeline-h::before{left:10px; right:auto; width:3px; height:auto; bottom:0; top:10px; background:linear-gradient(#9aa6ff,#6fe0c3)}
  .t-step{width:auto; text-align:left; padding-left:26px; margin:28px 0; position:relative}
  .t-dot{left:10px; top:0; transform:none}
  .t-year{margin-top:0; font-weight:900}
}

/* CONTACT / FORM */
.contact{background: linear-gradient(180deg,#ffffff 0%, var(--bg-lighter) 100%)}
form{display:grid; gap:14px; max-width:620px; margin:0 auto}
.field{padding:14px; border:1px solid var(--border); border-radius:12px; background:#fff}
.field.error{border-color:#b00020; outline:none}
.consent{font-size:.92rem; color:#33406d}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{margin-top:14px; text-align:center; font-weight:700}

/* FAQ */
.faq details{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 16px; margin:10px 0; box-shadow:0 6px 16px rgba(15,18,38,.06)}
.faq summary{cursor:pointer; font-weight:800; color:#2b3566}
.faq p{margin:8px 0 0; color:#33406d}

/* Reveal */
.reveal{opacity:0; transform: translateY(12px); transition: .6s ease}
.reveal.in{opacity:1; transform:none}

/* Footer */
.footer{padding:36px 0; color:#33406d; text-align:center; font-size:.95rem}