:root{
  --bg:#0b0f14; --txt:#e5e7eb; --muted:#9ca3af;
  --line:#1f2937; --accent:#22c55e; --accent2:#60a5fa;
  --r:18px; --p:22px; --max:920px;
}

*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--txt);
}

.wrap{max-width:var(--max); margin:0 auto; padding:22px}
.top{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px}

.badge{
  font-size:12px; border:1px solid var(--line); padding:6px 10px;
  border-radius:999px; color:var(--muted); background:rgba(11,18,32,.55);
}

.bar{height:8px; background:#0b1220; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.fill{height:100%; background:linear-gradient(90deg,var(--accent),#16a34a)}
.fill.s1{width:20%} .fill.s2{width:40%} .fill.s3{width:60%} .fill.s4{width:80%} .fill.s5{width:100%}

.hero{
  border-radius:var(--r);
  border:1px solid var(--line);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  overflow:hidden;
}

.heroOverlay{
  background: linear-gradient(180deg, rgba(11,15,20,0.08), rgba(11,15,20,0.22));
  padding:var(--p);
}

.card{
  background:rgba(17,24,39,.25);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:var(--p);
  backdrop-filter: blur(10px);
}

.card {
    /* stile card esistente */
}

/* === ZERO – TESTI RIFLESSIVI === */
.reflection {
    font-size: 1.05em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(209, 211, 214, 0.9);
    margin-top: 8px;
    margin-bottom: 12px;
}


h1{font-size:clamp(26px,4.2vw,40px); line-height:1.08; margin:0 0 10px}
.sub{color:var(--muted); line-height:1.55; margin:0}

.btn{
  display:inline-block; text-decoration:none; border:1px solid var(--line);
  padding:12px 16px; border-radius:999px; color:var(--txt);
  background:rgba(11,18,32,.55);
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),#16a34a);
  border:none; color:#04110a; font-weight:800;
}
.nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}

.list{margin:14px 0 0; padding:0; list-style:none}
.list li{padding:10px 0; border-bottom:1px solid rgba(31,41,55,.6)}
.quote{margin-top:12px; border-left:3px solid var(--accent2); padding-left:12px; color:var(--muted); font-style:italic}

.smallLink{color:var(--accent2); font-size:12px; text-decoration:none}

/* Brand container anti-francobollo */
.brand{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:14px;
  background:rgba(11,18,32,.72);
  border:1px solid rgba(31,41,55,.8);
  backdrop-filter: blur(8px);
}
.brand img{height:28px; width:auto; display:block}
@media(max-width:520px){ .brand img{height:24px} }

.brandText{display:flex;flex-direction:column;line-height:1.1}
.payoff{font-size:12px;color:#e5e7eb;font-weight:600;letter-spacing:.2px}
.place{font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.3px}

/* Feedback chips */
.fb{margin-top:18px; padding-top:14px; border-top:1px solid rgba(31,41,55,.6)}
.fb h2{margin:0 0 8px; font-size:14px; color:var(--muted)}
.fbRow{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  border:1px solid var(--line);
  background:#0b1220;
  color:var(--txt);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
}

/* ============================
   TESTO SU IMMAGINI – FIX DEFINITIVO
   ============================ */

/* Titoli principali */
h1, h2, h3 {
  color: #ffffff;
  font-weight: 600;
}

/* Testo normale */
p, li, label {
  color: rgba(255, 255, 255, 0.88);
}

/* Micro-testi, note, spiegazioni */
.small,
.note,
.helper-text {
  color: #dcdcdc;
}

/* Contenitori su immagine */
.section,
.step,
.card {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
}

/* Barra di avanzamento – sempre leggibile */
.progress,
.progress span {
  color: #ffffff;
}

/* Pulsanti */
button,
.btn {
  color: #ffffff;
}

/* Link */
a {
  color: #ffffff;
}
a:hover {
  opacity: 0.85;
}
/* Rafforzo leggibilità testi di accompagnamento */
.section,
.step,
.card {
  background: rgba(0, 0, 0, 0.35);
}

/* CAREZZE: leggibili sempre */
p,
li,
label,
.small,
.note,
.helper-text {
  color: #ffffff;
  opacity: 0.9;
}

/* CAREZZE – FORZATE IN BIANCO */
p,
li,
label,
.small,
.note,
.helper-text {
  color: #ffffff !important;
}

.legal-footer{
  margin-top: 60px;
  padding: 18px 0 44px;   /* <-- questo evita il taglio su mobile */
  font-size: 12px;
  opacity: .75;
  text-align: center;
}

.legal-footer a{
  text-decoration: none;
}

p strong{
  font-weight: 800 !important;
}

.note strong{
  font-weight: 800 !important;
}