:root{
  --bg:#07060A;
  --bg2:#0B0A10;

  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --faint:rgba(255,255,255,.50);

  --gold:#D4AF37;
  --gold2:#F2D38A;
  --red:#7A1F2B;
  --red2:#A33444;

  --card:rgba(255,255,255,.05);
  --stroke:rgba(255,255,255,.10);

  --shadow: 0 22px 70px rgba(0,0,0,.50);
  --shadow2: 0 12px 34px rgba(0,0,0,.35);

  --r:16px;
  --r2:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: linear-gradient(180deg, var(--bg), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.gold{color:var(--gold)}
.red{color:var(--red2)}

/* Background cinematic */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg__vignette{
  position:absolute;inset:-1px;
  background: radial-gradient(1200px 700px at 50% 20%, transparent 30%, rgba(0,0,0,.78) 78%);
}
.bg__glow{position:absolute;filter:blur(18px)}
.bg__glow--red{
  width:980px;height:980px;left:-320px;top:-320px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(122,31,43,.95), rgba(122,31,43,.38) 40%, transparent 70%);
  opacity:.95;
}
.bg__glow--gold{
  width:880px;height:880px;right:-260px;top:60px;border-radius:50%;
  background: radial-gradient(circle at 40% 40%, rgba(212,175,55,.42), rgba(242,211,138,.14) 45%, transparent 72%);
  opacity:.75;
  filter: blur(22px);
}
.bg__grain{
  position:absolute;inset:0;opacity:.08;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
}

/* Navbar */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(7,6,10,.82), rgba(7,6,10,.36));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brandText{display:flex;flex-direction:column;line-height:1.1}
.brandText strong{font-weight:1000;letter-spacing:.2px}
.brandText span{color:var(--muted);font-weight:850;font-size:13px}

.brandLogo{
  width:75px;
  height:75px;
  object-fit:contain;
  border-radius:18px;
  padding:6px;

  /* piattino chiaro dietro per stacco */
  background: radial-gradient(circle at 30% 30%,
    rgba(255,255,255,.18),
    rgba(255,255,255,.06) 55%,
    rgba(0,0,0,.22) 100%
  );

  border:1px solid rgba(212,175,55,.55);
  box-shadow:
    0 0 0 4px rgba(212,175,55,.12),
    0 14px 34px rgba(0,0,0,.55),
    0 0 28px rgba(212,175,55,.18);

  /* “tiralo fuori” dal buio */
  filter: brightness(1.25) contrast(1.15) saturate(1.08)
          drop-shadow(0 2px 10px rgba(0,0,0,.55));
}

@media (max-width:720px){
  .brandLogo{ width:52px; height:52px; border-radius:16px; }
}

.brandLogo.small{
  width:40px; height:40px; border-radius:14px; padding:5px;
}

.menu{display:flex;gap:14px;align-items:center}
.menu a{
  padding:10px 10px;border-radius:12px;
  color:var(--muted);font-weight:900;
  border:1px solid transparent;
  transition:.2s ease;
}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.menu a.active{color:var(--gold);}
.navActions{display:flex;gap:10px;align-items:center}

.iconPill{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.iconPill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow2);
  font-weight:1000;
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.09)}
.btn.big{padding:14px 20px;border-radius:16px}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.16)}
.btn.primary{
  color:#140b0f;
  border-color: rgba(212,175,55,.60);
  background: linear-gradient(135deg, rgba(212,175,55,.98), rgba(122,31,43,.88));
  box-shadow:
    0 18px 44px rgba(212,175,55,.18),
    0 22px 60px rgba(122,31,43,.20);
}
.btnIcon{font-weight:1000}

.hamburger{
  width:44px;height:44px;border-radius:14px;
  display:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.hamburger span{display:block;height:2px;background:rgba(255,255,255,.85);margin:6px 10px;border-radius:2px}
.mobileMenu{display:none;border-top:1px solid rgba(255,255,255,.06);padding:12px 0}
.mobileMenu a{
  display:block;padding:12px 10px;border-radius:12px;
  color:var(--muted);font-weight:1000;
}
.mobileMenu a:hover{background:rgba(255,255,255,.06);color:var(--text)}
.mobileMenu.open{display:block}

/* Hero */
.hero{
  min-height: calc(100vh - 72px);
  display:grid;
  place-items:center;
  text-align:center;
  padding:46px 0 28px;
}
.heroWrap{max-width:960px}
.serverPill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-weight:1000;
}
.serverPill b{color:var(--gold)}
.dot{
  width:10px;height:10px;border-radius:99px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}
.heroTitle{
  margin:18px 0 8px;
  font-size: clamp(44px, 6.2vw, 78px);
  line-height:1.02;
  letter-spacing:-1px;
  font-weight:1100;
  text-shadow:
    0 22px 60px rgba(122,31,43,.38),
    0 18px 55px rgba(212,175,55,.10);
}
.heroLead{
  margin:0 auto 18px;
  color:var(--muted);
  max-width: 74ch;
  font-weight:780;
  font-size: clamp(15px, 1.6vw, 18px);
}
.heroButtons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px}

.ipBlock{
  margin:22px auto 0;
  max-width: 620px;
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(620px 240px at 20% 30%, rgba(122,31,43,.18), transparent 60%),
    radial-gradient(620px 240px at 80% 20%, rgba(212,175,55,.12), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: var(--shadow2);
  padding:14px;
  text-align:left;
}
.ipLabel{color:var(--faint);font-weight:950;font-size:12px;margin-bottom:10px}
.ipRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
code{
  flex:1;
  min-width: 240px;
  display:block;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight:1000;
  color: var(--gold2);
}
.copyBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:1000;
  padding:12px 14px;border-radius:14px;
  cursor:pointer;
}
.copyBtn:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.fine{color:var(--faint);font-weight:720;font-size:12px;margin:10px 0 0}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}
.scrollHint{
  margin-top:18px;
  display:flex;flex-direction:column;gap:6px;
  color:rgba(255,255,255,.38);
  font-weight:950;
}
.chev{font-size:18px}

/* Sections */
.section{padding:54px 0}
.sectionHead{margin-bottom:18px}
.sectionHead.center{text-align:center}
.kicker{
  color: rgba(212,175,55,.88);
  font-weight:1100;
  letter-spacing:.18em;
  font-size:12px;
  margin-bottom:10px;
}
.sectionHead h2{
  margin:0 0 8px;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing:-.4px;
  font-weight:1100;
}
.sectionHead p{margin:0;color:var(--muted);font-weight:780}

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.card, .panel{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.18);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover, .panel:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.22);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.32);
}
.card:before{
  content:"";
  position:absolute;inset:-1px;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(122,31,43,.28), transparent 60%),
    radial-gradient(520px 220px at 80% 20%, rgba(212,175,55,.16), transparent 60%);
  opacity:.95;
  pointer-events:none;
}
.card > *{position:relative}
.cardIcon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--gold2);
  box-shadow: 0 0 0 6px rgba(212,175,55,.08), 0 14px 40px rgba(122,31,43,.18);
  font-size:18px;
}
.card h3, .panel h3{margin:12px 0 6px;font-weight:1100}
.card p, .panel p{margin:0;color:var(--muted);font-weight:780}

/* Stats */
.statsBand{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 240px at 20% 40%, rgba(122,31,43,.24), transparent 60%),
    radial-gradient(900px 240px at 80% 30%, rgba(212,175,55,.12), transparent 60%),
    rgba(0,0,0,.18);
}
.statsGrid{
  padding:26px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.stat{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  padding:18px;
  text-align:center;
}
.statVal{
  font-size: clamp(36px, 4vw, 56px);
  font-weight:1200;
  letter-spacing:-.1px;
  color: var(--gold);
  text-shadow:
    0 0 18px rgba(212,175,55,.25),
    0 0 35px rgba(122,31,43,.35);
  font-variant-numeric:tabular-nums;  
}
.statLab{
  margin-top:6px;
  color: rgba(255,255,255,.60);
  font-weight:950;
}
.odometer{
  font-variant-numeric: tabular-nums;
  letter-spacing:-.8px;
}

/* Paths */
.pathsGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pathCard{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.18);
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pathCard:hover{
  transform: translateY(-1px);
  border-color: rgba(212,175,55,.22);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.32);
}
.pathMedia{
  height:180px;
  background:
    radial-gradient(420px 180px at 20% 20%, rgba(122,31,43,.34), transparent 60%),
    radial-gradient(420px 180px at 80% 30%, rgba(212,175,55,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.46));
  position:relative;
}
.pathTag{
  position:absolute;left:14px;top:14px;
  padding:8px 10px;border-radius:999px;
  background: linear-gradient(135deg, rgba(122,31,43,.62), rgba(212,175,55,.25));
  border:1px solid rgba(212,175,55,.20);
  box-shadow: 0 10px 28px rgba(122,31,43,.25);
  font-weight:1100;
  color: rgba(255,255,255,.92);
}
.pathBody{padding:16px}
.pathBody h3{margin:0 0 6px;font-weight:1100}
.pathBody p{margin:0;color:var(--muted);font-weight:780}
.pathCard--choose .pathMedia{
  background:
    radial-gradient(520px 220px at 25% 30%, rgba(212,175,55,.18), transparent 60%),
    radial-gradient(520px 220px at 75% 30%, rgba(122,31,43,.28), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.52));
}
.pathCard--choose .pathTag{
  background: linear-gradient(135deg, rgba(212,175,55,.70), rgba(122,31,43,.35));
  color:#140b0f;
}

/* STAFF (NUOVO) */
.staffGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top: 16px;
}
.staffCard{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(122,31,43,.22), transparent 60%),
    radial-gradient(520px 220px at 80% 20%, rgba(212,175,55,.14), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.18);
  padding:18px;
  overflow:hidden;
}
.staffRole{
  color: rgba(212,175,55,.90);
  font-weight:1100;
  letter-spacing:.14em;
  font-size:12px;
  text-transform:uppercase;
}
.staffNames{
  margin-top:10px;
  font-size:20px;
  font-weight:1100;
  letter-spacing:-.3px;
}
.staffCard--wide{
  grid-column: 1 / -1;
}

/* Links + CTA + Footer */
.list{margin:10px 0 0;padding-left:18px}
.list li{color:var(--muted);font-weight:900;margin:6px 0}
.list b{color:var(--text)}

.linksGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.linkCard{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:16px;
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.14);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:.2s ease;
}
.linkCard span{color:var(--muted);font-weight:1000}
.linkCard b{font-weight:1150;color:var(--gold2)}
.linkCard:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}

.ctaFinal{padding:18px 0 58px}
.ctaBox{
  border-radius: var(--r2);
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(620px 240px at 20% 30%, rgba(122,31,43,.26), transparent 60%),
    radial-gradient(620px 240px at 80% 20%, rgba(212,175,55,.22), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  padding:20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.ctaBox h2{margin:0 0 6px;font-weight:1150}
.ctaBox p{margin:0;color:var(--muted);font-weight:900}
.ctaBtns{display:flex;gap:10px;flex-wrap:wrap}

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:22px 0 34px;
}
.footerInner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footerLeft{display:flex;align-items:center;gap:12px}
.footerRight{display:flex;gap:12px;flex-wrap:wrap}
.footerRight a{color:var(--muted);font-weight:1000}
.footerRight a:hover{color:var(--gold2)}

@media (max-width: 980px){
  .menu{display:none}
  .hamburger{display:inline-block}
  .grid3{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .statsGrid{grid-template-columns:repeat(2,1fr)}
  .pathsGrid{grid-template-columns:1fr}
  .linksGrid{grid-template-columns:1fr}
  .staffGrid{grid-template-columns:1fr}
  .staffCard--wide{grid-column:auto}
}

.statVal.finished{
  animation: statGlow 1.4s ease;
}

@keyframes statGlow{

  0%{
    text-shadow:
      0 0 0 rgba(212,175,55,0),
      0 0 0 rgba(122,31,43,0);
  }

  50%{
    text-shadow:
      0 0 18px rgba(212,175,55,.65),
      0 0 32px rgba(122,31,43,.45);
  }

  100%{
    text-shadow:
      0 0 10px rgba(212,175,55,.35),
      0 0 20px rgba(122,31,43,.25);
  }

}

/* ===== ODOMETER (slot machine) ===== */
.odoWrap{
  display:inline-flex;
  align-items:baseline;
  gap:0;
}
.odoSlot{
  display:inline-block;
  width:0.72em;
  height:1em;
  overflow:hidden;
  position:relative;
  vertical-align:baseline;
}
.odoReel{
  display:block;
  line-height:1em;
  font-variant-numeric: tabular-nums;
  transform: translateY(0);
}
.odoSep{
  display:inline-block;
  width:auto;
  opacity:.92;
}
.odoSlot.spin .odoReel{
  animation: odoSpin 1.55s cubic-bezier(.12,.75,.12,1) forwards;
  transform: translateY(calc(var(--odo-steps, 0) * -1em));
}
@keyframes odoSpin{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(calc(var(--odo-steps, 0) * -1em)); }
}

/* ===== Light sweep sulle card Lavori ===== */
.pathCard{ position:relative; }
.pathCard::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background: linear-gradient(120deg, transparent, rgba(212,175,55,.22), transparent);
  transition: .8s;
  pointer-events:none;
}
.pathCard:hover::after{ left:120%; }

/* ===== Light sweep sui bottoni primary ===== */
.btn.primary{ position:relative; overflow:hidden; }
.btn.primary::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.32), transparent);
  transition:.7s;
  pointer-events:none;
}
.btn.primary:hover::after{ left:120%; }

/* ===== Logo intro ===== */
.brandLogo{ animation: logoIntro 1.2s ease; }
@keyframes logoIntro{
  0%{ transform:scale(.7) rotate(-6deg); opacity:0; }
  60%{ transform:scale(1.06); opacity:1; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}

/* ===== FIX CROPPING PORTRAIT IMMAGINI (override finale) ===== */
.pathsGrid{
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  gap: 18px;
}

.pathMedia{
  height: 300px;
  background-size: auto, auto, auto, cover;
  /* crop intelligente: guarda un po' più in alto (volti) */
  background-position: center, center, center, var(--bgpos, 50% 18%);
}

@media (max-width: 1100px){
  .pathsGrid{ grid-template-columns: repeat(2, minmax(340px, 1fr)); }
  .pathMedia{ height: 280px; }
}
@media (max-width: 720px){
  .pathsGrid{ grid-template-columns: 1fr; }
  .pathMedia{ height: 260px; }
}


/* ===== NASCITA: TIMELINE (linea progressiva + dot) ===== */
.timeline{
  --p: 0;
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 74px; /* gutter per linea+dot */
}

.timeline .tlRail{
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.timeline .tlRail .tlProgress{
  position: absolute;
  inset: 0;
  transform-origin: top;
  transform: scaleY(var(--p, 0));
  background: linear-gradient(180deg, rgba(212,175,55,.92), rgba(122,31,43,.78));
  box-shadow: 0 0 18px rgba(212,175,55,.18), 0 0 24px rgba(122,31,43,.18);
}

.tlItem{
  position: relative;
}

.tlDot{
  position: absolute;
  left: -58px; /* nel gutter, allineato alla linea */
  top: 28px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(7,6,10,.95);
  border: 2px solid rgba(212,175,55,.55);
  box-shadow: 0 0 0 6px rgba(212,175,55,.08);
}

.tlItem.is-active .tlDot{
  background: rgba(212,175,55,.95);
  border-color: rgba(212,175,55,.95);
  box-shadow: 0 0 0 6px rgba(212,175,55,.12), 0 0 18px rgba(212,175,55,.22);
}

.tlHead{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.tlBadge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1100;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(212,175,55,.22);
  background: linear-gradient(135deg, rgba(122,31,43,.62), rgba(212,175,55,.22));
}

@media (max-width: 720px){
  .timeline{ padding-left: 58px; }
  .timeline .tlRail{ left: 22px; }
  .tlDot{ left: -42px; }
}


/* ===== ROLES IMAGES (BEST FIX): no crop, 4:3, overlays via pseudo ===== */
.pathsGrid{
  /* restore clean grid */
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.pathMedia{
  height:auto !important;              /* override older fixed heights */
  aspect-ratio: 4 / 3;
  position:relative;
  overflow:hidden;
  /* the role image is set inline via background-image:url(...) */
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;             /* <-- NO CROP */
  background-color: rgba(0,0,0,.22);   /* cinematic letterbox area */
}

/* overlays stay above the image, without touching the inline background-image */
.pathMedia::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 180px at 20% 20%, rgba(122,31,43,.34), transparent 60%),
    radial-gradient(420px 180px at 80% 30%, rgba(212,175,55,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.46));
  pointer-events:none;
  z-index:1;
}

.pathTag{ z-index:2; }

@media (max-width: 980px){
  .pathsGrid{ grid-template-columns: 1fr; }
}

@media (min-width: 981px) and (max-width: 1100px){
  .pathsGrid{ grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   NASCITA — Layout stile "Impero" (2 colonne)
   Sinistra: story lunga | Destra: milestone cards
   ========================================================= */

.nascitaShell{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items:start;
  margin-top: 18px;
}

@media (max-width: 980px){
  .nascitaShell{ grid-template-columns: 1fr; }
}

.nascitaStory{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

/* Cards colonna destra */
.nascitaCards{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.nascitaCard{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.18);
  padding: 18px;
  position:relative;
  overflow:hidden;
}

.nascitaCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(122,31,43,.22), transparent 60%),
    radial-gradient(520px 220px at 80% 20%, rgba(212,175,55,.14), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

.nascitaCard > *{ position:relative; }

.nascitaMeta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(212,175,55,.88);
  font-weight: 1100;
  margin-bottom: 8px;
}

.nascitaTitle{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 1100;
  letter-spacing: -.3px;
}

.nascitaCard p{
  margin: 0 0 10px;
  color: var(--muted);
  font-weight: 780;
}

.nascitaList{
  margin: 0;
  padding-left: 18px;
}

.nascitaList li{
  margin: 6px 0;
  color: var(--muted);
  font-weight: 900;
}

.nascitaList li::marker{ color: rgba(212,175,55,.92); }

/* Optional: la colonna destra resta visibile mentre leggi */
@media (min-width: 981px){
  .nascitaCards{
    position: sticky;
    top: 92px;
  }
}

/* Disattiva layout timeline se rimane qualche classe in pagina */
.timeline{ display:none !important; }


/* =========================================================
   FINAL OVERRIDE — ROLE CARDS IMAGE (NO CROP, always)
   Fix: some older blocks still force cover/auto sizes.
   This block must stay at the VERY END of style.css.
   ========================================================= */
.pathMedia{
  aspect-ratio: 4 / 3;
  height: auto !important;

  background-repeat: no-repeat !important;
  background-size: contain !important;                /* never crop */
  background-position: var(--bgpos, 50% 50%) !important;

  background-color: rgba(0,0,0,.22);
}


/* =========================================================
   NASCITA — STYLE "IMPERO" (2 colonne)
   Left: testo pulito (senza card) | Right: milestone cards
   Scoped to body.nascitaPage
   ========================================================= */

.nascitaPage .nascitaImpero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 42px;
  align-items:start;
  margin-top: 26px;
}

@media (max-width: 980px){
  .nascitaPage .nascitaImpero{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.nascitaPage .nascitaLeft{
  max-width: 74ch;
}

.nascitaPage .nascitaLeft .nascitaKicker{
  display:inline-block;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: rgba(212,175,55,.88);
  font-weight: 1100;
  margin: 18px 0 10px;
}

.nascitaPage .nascitaLeft h3{
  font-size: 22px;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}

.nascitaPage .nascitaLeft p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.68);
  font-weight: 780;
}

.nascitaPage .nascitaLeft ul{
  margin: 10px 0 0;
  padding-left: 18px;
}

.nascitaPage .nascitaLeft li{
  margin: 6px 0;
  color: rgba(255,255,255,.68);
  font-weight: 820;
}

.nascitaPage .nascitaLeft li::marker{ color: rgba(212,175,55,.92); }

/* make existing .panel blocks look like plain text on Nascita left */
.nascitaPage .nascitaLeft .panel{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Right cards */
.nascitaPage .nascitaRight{
  display:flex;
  flex-direction:column;
  gap: 16px;
}

@media (min-width: 981px){
  .nascitaPage .nascitaRight{
    position: sticky;
    top: 92px;
  }
}

.nascitaPage .imperoCard{
  border-radius: var(--r2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
  box-shadow: var(--shadow2), 0 0 0 1px rgba(122,31,43,.14);
  padding: 18px 18px 16px;
  position:relative;
  overflow:hidden;
}

.nascitaPage .imperoCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(560px 260px at 18% 15%, rgba(122,31,43,.18), transparent 60%),
    radial-gradient(560px 260px at 85% 18%, rgba(212,175,55,.12), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

.nascitaPage .imperoCard > *{ position:relative; }

.nascitaPage .imperoMeta{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color: rgba(212,175,55,.88);
  font-weight: 1100;
  margin-bottom: 8px;
}

.nascitaPage .imperoTitle{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 1100;
  letter-spacing: -.02em;
}

.nascitaPage .imperoCard p{
  margin: 0 0 10px;
  color: rgba(255,255,255,.64);
  font-weight: 760;
}

.nascitaPage .imperoList{
  margin: 0;
  padding-left: 18px;
}

.nascitaPage .imperoList li{
  margin: 7px 0;
  color: rgba(255,255,255,.64);
  font-weight: 820;
}

.nascitaPage .imperoList li::marker{ color: rgba(212,175,55,.92); }

/* hide old timeline if still present (safety) */
.nascitaPage .timeline{ display:none !important; }