:root{
  --bg-top:#a2dff7;
  --bg-bottom:#005ea2;
  --page-bg:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  --card:#ffffff;
  --soft:#f0f7ff;
  --ink:#0a0a0a;
  --muted:#3c536d;
  --accent:#005ea2;
  --shadow:0 20px 45px rgba(0,0,0,.12);
  --radius:20px;
  --radius-sm:14px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--page-bg);
  min-height:100vh;
}
.container{width:min(100% - 2rem,var(--maxw));margin-inline:auto;}
a{text-decoration:none;color:inherit}

.btn{
  display:inline-block;
  padding:.9rem 1.4rem;
  border-radius:12px;
  font-weight:600;
  background:var(--accent);
  color:#fff;
  box-shadow:var(--shadow);
}
.btn.outline{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.6);
  box-shadow:none;
}
.btn + .btn{margin-left:.75rem}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .9rem;
  background:rgba(255,255,255,.25);
  border-radius:999px;
  font-weight:600;
  color:#fff;
}
.muted{color:rgba(255,255,255,.75)}

.breadcrumb{
  position:sticky;top:0;z-index:20;
  backdrop-filter:blur(8px);
  background:rgba(0,0,0,.25);
  color:#fff;
}
.breadcrumb .inner{
  display:flex;align-items:center;gap:.75rem;
  padding:.9rem 0;
}
.breadcrumb a{color:#fff;opacity:.85}
.breadcrumb a:hover{opacity:1}

.hero{padding:3.5rem 0 2rem;color:#fff}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.82rem;
  color:rgba(255,255,255,.8);
}
h1{
  font-size:clamp(2.4rem,1.5rem + 2vw,3.5rem);
  margin:.4rem 0 1rem;
  line-height:1.1;
}
.subtitle{
  font-size:1.08rem;
  color:rgba(255,255,255,.9);
  margin-bottom:1.2rem;
}
.meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.4rem;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.mockup{
  border-radius:var(--radius);
  overflow:hidden;
  border:2px solid rgba(255,255,255,.35);
  box-shadow:var(--shadow);
}
.mockup img{width:100%;height:100%;object-fit:cover;display:block}

.stats{padding:0 0 1.5rem}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
}
.stat-card{
  background:rgba(255,255,255,.15);
  border-radius:var(--radius-sm);
  padding:1.1rem;
  text-align:center;
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.stat-card .num{font-size:2rem;font-weight:700}
.stat-card .lab{font-size:.95rem;opacity:.85}

section{padding:2.5rem 0;color:var(--ink)}
section h2{margin:0 0 1rem;font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem)}
.card{
  border-radius:var(--radius);
  background:var(--card);
  padding:1.5rem;
  box-shadow:var(--shadow);
}
.card h3{margin:.2rem 0 1rem;color:var(--accent)}
.two-col{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
  margin-top:1rem;
}
.list{
  margin:0;
  padding-left:1.1rem;
  display:grid;
  gap:.45rem;
  color:var(--muted);
}

.value{
  color:#fff;
}
.value-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.4rem;
}
.value-grid article{
  background:rgba(0,0,0,.35);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
}
.value-grid h3{margin:0 0 .6rem;color:#fff}

.timeline{
  color:var(--ink);
}
.timeline-list{
  display:grid;
  gap:1rem;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1rem;
  background:var(--card);
  border-radius:var(--radius-sm);
  padding:1rem 1.2rem;
  box-shadow:var(--shadow);
  align-items:flex-start;
}
.step .dot{
  width:42px;height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-weight:700;
}
.step h3{margin:.2rem 0 .4rem;color:var(--ink)}
.step p{margin:0;color:var(--muted)}

.tools{
  color:#fff;
}
.tools .badges{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.tools .badges span{
  padding:.4rem .9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
}

.feature{
  color:var(--ink);
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.2rem;
}
.feature-grid .card p{margin:0;color:var(--muted)}

.cta{
  color:var(--ink);
}
.cta-card{
  background:#fff;
  border-radius:var(--radius);
  padding:2rem;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:1.5rem;
  box-shadow:var(--shadow);
}
.cta-card p{color:var(--muted);margin:0}
.cta-actions{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  justify-content:center;
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .cta-card{grid-template-columns:1fr}
  .btn + .btn{margin-left:0}
}

/* ===== NAVBAR INTEGRATION ===== */
/* Override breadcrumb: non più sticky ora che c'è la navbar */
.breadcrumb { position:relative; top:auto; z-index:1; }

/* ===== SCROLL REVEAL ===== */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .5s, transform .5s; }
.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .reveal,.is-visible { opacity:1; transform:none; transition:none; }
}

/* ===== BACK TO TOP ===== */
#back-top {
  position:fixed; bottom:28px; right:28px;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#fff; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; box-shadow:0 6px 20px rgba(0,0,0,.28);
  z-index:998; opacity:0; transform:translateY(14px);
  transition:opacity .3s,transform .3s; pointer-events:none;
}
#back-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
#back-top:hover { transform:translateY(-4px); }

/* ===== PREV / NEXT NAVIGATION ===== */
.proj-nav { padding:2.5rem 0; border-top:1px solid rgba(255,255,255,.2); }
.proj-nav__inner {
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.proj-nav__item {
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem 1.4rem; flex:1; min-width:200px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  border-radius:14px; color:#fff; text-decoration:none;
  transition:background .2s, transform .2s;
}
.proj-nav__item:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }
.proj-nav__item.next { text-align:right; }
.proj-nav__label { font-size:.8rem; opacity:.7; }
.proj-nav__title { font-weight:700; font-size:1.05rem; }

/* ===== FOOTER ===== */
.proj-footer {
  background:rgba(0,0,0,.35); color:#fff;
  padding:1.2rem 0; margin-top:auto;
}
.proj-footer__inner {
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.proj-footer__links { display:flex; gap:1.5rem; }
.proj-footer__links a {
  color:rgba(255,255,255,.8); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition:color .2s;
}
.proj-footer__links a:hover { color:#fff; }

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --bg-top:#0d1117;
  --bg-bottom:#0a0e1a;
  --card:#161b27;
  --ink:#f1f5f9;
  --muted:#94a3b8;
  --soft:#1e2438;
  --accent:#4a9eff;
}
[data-theme="dark"] .card { box-shadow:0 20px 45px rgba(0,0,0,.4); }
[data-theme="dark"] .card h3 { color:#7eb4ff; }
[data-theme="dark"] .list { color:#94a3b8; }
[data-theme="dark"] .stat-card { background:rgba(255,255,255,.07); }
[data-theme="dark"] .step { background:var(--card); }
[data-theme="dark"] .step h3 { color:#e2e8f0; }
[data-theme="dark"] .step p { color:#94a3b8; }
[data-theme="dark"] .value-grid article { background:rgba(255,255,255,.06); }
[data-theme="dark"] section h2 { color:#e2e8f0; }
[data-theme="dark"] .feature-grid .card p { color:#94a3b8; }