:root {
  --blu: #00325a;
  --blu-2: #001f3a;
  --blu-3: #0a4775;
  --giallo: #f5a500;
  --giallo-soft: #fde7b3;
  --surface: #f1f5f9;
  --surface-2: #ffffff;
  --ink: #0c1a2b;
  --ink-2: #36475c;
  --ink-3: #6b7a8e;
  --line: #d9e1ec;
  --line-2: #e7edf4;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 0 rgba(0, 50, 90, 0.04), 0 2px 8px rgba(0, 50, 90, 0.04);
  --shadow-md: 0 12px 40px -12px rgba(0, 50, 90, 0.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.serif { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: -0.01em; }
.serif-it { font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 600; }
.mono { font-family: 'Montserrat', sans-serif; font-weight: 500; letter-spacing: 0.06em; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.78);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.nav.scrolled { background: rgba(255,255,255,0.92); border-color: var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img, .brand svg { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--ink-2); font-size: 14px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--blu); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.btn-ghost-nav {
  background: transparent;
  color: var(--blu);
  border: 1px solid var(--line);
  padding: 9px 18px;
}
.btn-ghost-nav:hover { background: #fff; border-color: var(--blu); transform: translateY(-1px); }

@media (max-width: 880px) { .nav-links { display: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  border: none; transition: all .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--blu); color: #fff; }
.btn-primary:hover { background: var(--blu-3); transform: translateY(-1px); }
.btn-yellow { background: var(--giallo); color: var(--blu); }
.btn-yellow:hover { background: #ffb524; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--blu); }
.btn-arrow { font-size: 16px; line-height: 1; }

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: 70px 0 110px;
  overflow: hidden;
  background:
    radial-gradient(1100px 500px at 80% -10%, rgba(245,165,0,0.13), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(0,50,90,0.06), transparent 60%),
    var(--surface-2);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2);
  background: #fff;
}
.eyebrow .dot {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  background: var(--giallo); position: relative;
}
.eyebrow .dot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff;
}

h1.headline {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(44px, 5.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 22px 0 22px;
  color: var(--blu);
  text-wrap: balance;
}
h1.headline em { font-style: italic; color: var(--blu); }
h1.headline .underline {
  position: relative; display: inline-block; white-space: nowrap;
}
h1.headline .underline::after {
  content: ""; position: absolute;
  left: -2px; right: -2px; bottom: 6px; height: 12px;
  background: var(--giallo); opacity: .55;
  z-index: -1;
  border-radius: 2px;
}

.lede {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 560px;
  text-wrap: pretty;
}

.hero-ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

.hero-meta {
  display: flex; gap: 28px; margin-top: 44px;
  font-size: 13px; color: var(--ink-3);
}
.hero-meta div { display: flex; align-items: center; gap: 8px; }
.hero-meta .check {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--giallo);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--blu);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}

/* hero card */
.hero-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: var(--shadow-md);
}
.hero-card::before {
  content: "";
  position: absolute; inset: -16px -16px auto auto;
  width: 120px; height: 120px;
  background: var(--giallo);
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(2px);
  z-index: -1;
}
.hc-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--ink-3);
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
  margin-bottom: 18px;
}
.hc-head > span { display: inline-flex; align-items: center; gap: 6px; }
.hc-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--giallo); color: var(--blu);
  font-size: 9px; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.hc-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.hc-bando { font-family: 'Montserrat', sans-serif; font-size: 22px; line-height: 1.2; color: var(--blu); margin-bottom: 18px; }
.hc-bar {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 18px;
}
.hc-bar > div {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 12px;
}
.hc-bar .lbl { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.hc-bar .val { font-size: 18px; font-weight: 600; color: var(--blu); }
.hc-bar .val .pct { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.hc-score {
  background: linear-gradient(135deg, var(--blu) 0%, var(--blu-3) 100%);
  border-radius: 14px; padding: 18px 20px; color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.hc-score .label { font-size: 12px; opacity: .8; text-transform: uppercase; letter-spacing: 0.08em; }
.hc-score .num { font-family: 'Montserrat', sans-serif; font-size: 44px; line-height: 1; }
.hc-score .num span { color: var(--giallo); }
.hc-tip {
  display: flex; gap: 12px; padding: 12px 14px;
  background: #fef9ec; border: 1px solid var(--giallo-soft);
  border-radius: 10px;
  font-size: 13px; color: var(--ink-2);
}
.hc-tip .ico {
  width: 22px; height: 22px; border-radius: 50%; background: var(--giallo);
  color: var(--blu); font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ===== SECTION ===== */
section { padding: 110px 0; }
.section-eyebrow {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--giallo);
  margin-bottom: 22px;
}
.section-eyebrow::before {
  content: "— ";
  color: var(--blu);
}
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--blu);
  margin: 0 0 28px;
  text-wrap: balance;
  padding-bottom: 0.05em;
}
.section-title em { font-style: italic; color: var(--giallo); }
.section-lede {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 640px;
  text-wrap: pretty;
}
.section-head { max-width: 880px; margin-bottom: 64px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .section-eyebrow::before { content: ""; }

/* ===== CONTEXT bar ===== */
.context {
  background: var(--blu);
  color: #fff;
  padding: 28px 0;
  position: relative;
  overflow: hidden;
}
.context-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px;
  align-items: center;
}
@media (max-width: 880px) { .context-inner { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
.ctx-item .num {
  font-family: 'Montserrat', sans-serif;
  font-size: 38px;
  line-height: 1;
  color: var(--giallo);
}
.ctx-item .lbl {
  font-size: 13px; opacity: 0.78; margin-top: 4px;
}

/* ===== TIMELINE ===== */
.timeline-section {
  background: var(--surface);
  position: relative;
  padding: 110px 0;
}

/* ===== TIMELINE (vertical) + SCROLL-DRIVEN PINNED STAGE ===== */
/* The runway creates the scroll length; the stage is fixed-positioned
   while in the pin range, otherwise placed at top or bottom of runway. */
.timeline-runway {
  position: relative;
  height: var(--runway, 425vh);
  margin-top: 8px;
}
.timeline-stage {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, 1.35fr);
  gap: 60px;
  align-items: start;
}

/* BEFORE pin: stage sits at top of runway */
.pin-before .timeline-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
/* PINNED: stage fixed to viewport, just below sticky nav */
.pin-pinned .timeline-stage {
  position: fixed;
  top: 94px;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 32px;
  width: 100%;
  box-sizing: border-box;
}
/* AFTER pin: stage sits at bottom of runway */
.pin-after .timeline-stage {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

@media (max-width: 980px) {
  .timeline-runway { height: auto; }
  .timeline-stage,
  .pin-before .timeline-stage,
  .pin-pinned .timeline-stage,
  .pin-after .timeline-stage {
    position: static;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: none;
    padding: 0;
  }
}

.timeline-col, .demo-col { min-width: 0; }
.timeline-section .wrap { padding-bottom: 0; }

.timeline-v { position: relative; padding-left: 0; }
.timeline-v-rail {
  position: absolute;
  left: 16px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.timeline-v-fill {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: var(--giallo);
  border-radius: 2px;
  transition: height .35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Iteration loop: arrow from step 4 back to step 3, on the LEFT */
.tl-loop {
  position: absolute;
  left: -56px;
  width: 56px;
  pointer-events: none;
  /* top + height set inline by JS based on actual node positions */
}
.tl-loop svg {
  height: 100%;
  width: 56px;
  overflow: visible;
}
.tl-loop-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--giallo);
  background: var(--surface);
  padding: 4px 8px;
  border-radius: 4px;
}
@media (max-width: 980px) {
  .tl-loop { display: none; }
}

/* ===== MOBILE: HORIZONTAL STEPPER + SCROLLING SECTIONS ===== */
.timeline-section.is-mobile {
  padding: 60px 0 20px;
}
.timeline-section.is-mobile .section-head {
  margin-bottom: 60px;
}

.m-stepper-sticky {
  position: sticky;
  top: 64px;
  z-index: 10;
  background: var(--surface);
  padding: 14px 0 12px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.m-stepper {
  position: relative;
  height: 52px;
}
.m-stepper-rail {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 18px;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.m-stepper-fill {
  height: 100%;
  background: var(--giallo);
  transition: width .35s ease;
}
.m-loop {
  position: absolute;
  /* Span between node 3 center (50%) and node 4 center (70%) of stepper */
  left: 50%;
  width: 20%;
  top: 44px;
  height: 28px;
  pointer-events: none;
  display: block;
  z-index: 3;
}
.m-loop-arc {
  position: absolute;
  inset: 0;
  border: 2px solid #f5a500;
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.m-loop-tip {
  position: absolute;
  left: 1px;
  top: -4px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #f5a500;
}
.m-stepper-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  z-index: 2;
}
.m-node-row {
  display: flex;
  justify-content: center;
}
.m-node {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink-3);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  font-feature-settings: "tnum";
  padding: 0;
  flex-shrink: 0;
}
.m-node.done {
  background: var(--giallo);
  border-color: var(--giallo);
  color: var(--blu);
}
.m-node.active {
  background: var(--blu);
  border-color: var(--blu);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px -4px rgba(0,42,77,0.4);
}

.m-flow-body {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.m-flow-step {
  scroll-margin-top: 131px;
  opacity: 0.45;
  transition: opacity .35s ease;
}
.m-flow-step.is-active {
  opacity: 1;
}
.m-flow-step-head {
  position: sticky;
  top: 130px;
  z-index: 5;
  background: var(--surface);
  margin: 0 -24px;
  padding: 8px 24px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.m-flow-step-head .m-flow-eyebrow {
  margin-bottom: 2px;
}

.m-flow-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blu);
  margin-bottom: 8px;
}
.m-flow-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--blu);
  margin: 0 0 10px;
}
.m-flow-body-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 4px 0 20px;
}
.m-flow-demo {
  /* the Demo component carries its own visuals */
}
.timeline-v-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.tl-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 18px;
  padding: 14px 16px 14px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s ease;
  align-items: flex-start;
}
.tl-row:hover { background: rgba(255,255,255,0.6); }
.tl-row.active { background: #fff; box-shadow: 0 12px 30px -16px rgba(0,50,90,0.18); }

.tl-v-node {
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  position: relative; z-index: 1;
}
.tl-v-node.active { background: var(--giallo); border-color: var(--giallo); color: var(--blu); transform: scale(1.08); }
.tl-v-node.done { background: var(--giallo); border-color: var(--giallo); color: var(--blu); }

.tl-v-body { padding-top: 4px; }
.tl-v-body .tl-step {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.tl-row.active .tl-step,
.tl-row.done .tl-step { color: var(--giallo); }
.tl-v-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--blu);
  letter-spacing: -0.01em;
}
.tl-v-body p {
  font-size: 14px;
  color: var(--ink-2);
  margin: 0;
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}
.tl-row.active .tl-v-body p {
  max-height: 200px;
  opacity: 1;
  margin-top: 4px;
}


/* ===== DEMO PANE (right of timeline) ===== */
.demo-section { padding-top: 0; }
.demo-shell {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.demo-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  background: #fafbfd;
}
.demo-bar .pip { width: 11px; height: 11px; border-radius: 50%; background: #e2e8f0; }
.demo-bar .crumb {
  margin-left: 14px;
  font-size: 12px; color: var(--ink-3);
  font-family: 'Montserrat', sans-serif;
}
.demo-bar .crumb .sep { color: var(--line); margin: 0 6px; }
.demo-bar .crumb .here { color: var(--blu); font-weight: 600; }

.demo-body { min-height: 460px; padding: 36px 40px; position: relative; }

/* Step 3 - Compila */
.compila-list { display: flex; flex-direction: column; gap: 10px; }
.compila-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: 10px;
}
.compila-meta { font-size: 10px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.compila-label { font-size: 13px; color: var(--ink-2); }
.compila-val { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--blu); }
.compila-ai {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff7e3; color: #8a4d00;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid var(--giallo-soft);
}
.compila-edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-3);
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.compila-edit:hover {
  background: var(--giallo);
  border-color: var(--giallo);
  color: var(--blu);
}
@media (max-width: 600px) {
  .compila-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Step 1 - Bandi */
.step1-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bando-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: all .15s;
  background: #fff;
}
.bando-card:hover { border-color: var(--blu-3); transform: translateY(-1px); }
.bando-card.selected { border-color: var(--giallo); background: #fffaee; box-shadow: 0 6px 18px -8px rgba(245,165,0,0.4); }
.bando-card .city { font-family: 'Montserrat', sans-serif; font-size: 22px; color: var(--blu); margin-bottom: 6px; }
.bando-card .meta { font-size: 12px; color: var(--ink-3); display: flex; gap: 12px; margin-bottom: 10px; }
.bando-card .meta b { color: var(--ink-2); font-weight: 600; }
.bando-card .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bando-tag {
  font-size: 11px; padding: 3px 8px;
  background: var(--surface); border-radius: 999px; color: var(--ink-2);
}
.bando-tag.hot { background: #ffe9c4; color: #8a4d00; }

/* Step 2 - upload */
.upload-zone {
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  background: var(--surface);
  margin-bottom: 18px;
  transition: all .2s;
}
.upload-zone.active { border-color: var(--giallo); background: #fffbf0; }
.upload-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blu); color: var(--giallo);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.upload-files { display: flex; flex-direction: column; gap: 8px; }
.upload-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 13px;
}
.upload-row .name { flex: 1; color: var(--ink); }
.upload-row .size { color: var(--ink-3); font-size: 12px; font-family: 'Montserrat', sans-serif; }
.upload-row .check {
  width: 20px; height: 20px; border-radius: 50%; background: #2bbf6c; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.upload-row .spin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--blu);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Step 3 - AI eval */
.eval-grid { display: grid; grid-template-columns: 1fr 220px; gap: 22px; }
.eval-list { display: flex; flex-direction: column; gap: 10px; }
.eval-row {
  display: grid; grid-template-columns: 1fr 60px;
  align-items: center;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: 10px;
}
.eval-row .label { font-size: 13px; color: var(--ink); font-weight: 500; }
.eval-row .meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.eval-row .pts {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; color: var(--blu);
  text-align: right;
}
.eval-row .pts .max { color: var(--ink-3); font-size: 13px; }
.eval-bar {
  height: 4px; background: var(--line); border-radius: 2px; overflow: hidden;
  margin-top: 6px;
}
.eval-bar > div { height: 100%; background: var(--giallo); border-radius: 2px; }

.score-ring {
  background: linear-gradient(135deg, var(--blu) 0%, var(--blu-3) 100%);
  color: #fff; border-radius: 14px;
  padding: 22px 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
.score-ring .num { font-family: 'Montserrat', sans-serif; font-size: 56px; line-height: 1; }
.score-ring .num .y { color: var(--giallo); }
.score-ring .lbl { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
.score-ring .delta {
  background: rgba(245,165,0,0.2); color: var(--giallo);
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  margin-top: 14px; font-weight: 600;
}

/* Step 4 - submit + inconsistencies */
.submit-state { display: flex; flex-direction: column; gap: 14px; }
.incon-row {
  display: flex; gap: 14px;
  padding: 14px 16px;
  background: #fff7ed;
  border: 1px solid #fde0a8;
  border-radius: 10px;
}
.incon-row.fixed { background: #effaf3; border-color: #b9e7c7; }
.incon-ico {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--giallo); color: var(--blu);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.incon-row.fixed .incon-ico { background: #2bbf6c; color: #fff; }
.incon-body { flex: 1; }
.incon-body .t { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.incon-body .d { font-size: 12px; color: var(--ink-2); }
.submit-final {
  margin-top: 6px;
  padding: 22px;
  background: linear-gradient(135deg, var(--blu) 0%, var(--blu-3) 100%);
  color: #fff;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.submit-final .t { font-family: 'Montserrat', sans-serif; font-size: 24px; }
.submit-final .s { font-size: 12px; opacity: 0.75; margin-top: 4px; }

/* ===== AI section ===== */
.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 980px) { .ai-grid { grid-template-columns: 1fr; gap: 50px; } }

.ai-feature-list { display: flex; flex-direction: column; gap: 4px; }
.ai-feature {
  border-top: 1px solid var(--line);
  padding: 24px 0;
  display: grid; grid-template-columns: 40px 1fr;
  gap: 22px;
}
.ai-feature:last-child { border-bottom: 1px solid var(--line); }
.ai-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--giallo);
  font-weight: 500;
}
.ai-feature h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 24px; line-height: 1.2;
  margin: 0 0 8px;
  color: var(--blu);
  letter-spacing: -0.01em;
}
.ai-feature p {
  font-size: 14.5px; color: var(--ink-2); margin: 0;
}

.ai-illust {
  background: var(--blu);
  border-radius: var(--radius-lg);
  padding: 36px;
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: 480px;
}
.ai-illust::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,165,0,0.4), transparent 70%);
}
.ai-doc-stack { position: relative; margin-top: 30px; }
.ai-doc {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  color: var(--ink);
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.4);
}
.ai-doc .doc-title { font-size: 12px; color: var(--ink-3); margin-bottom: 8px; font-family: 'Montserrat', sans-serif; }
.ai-doc .doc-line { height: 7px; background: var(--surface); border-radius: 2px; margin-bottom: 6px; }
.ai-doc .doc-line.short { width: 60%; }
.ai-doc .doc-flag {
  display: inline-block;
  background: var(--giallo); color: var(--blu);
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  margin-top: 8px;
}
.ai-doc .doc-flag.alert {
  background: rgba(245,165,0,0.25); color: var(--giallo);
}
.ai-doc.alert {
  background: #1a3f63;
  color: #fff;
}
.ai-doc.alert .doc-line { background: rgba(255,255,255,0.15); }
.ai-link {
  position: absolute;
  width: 2px; background: var(--giallo);
  left: 50%;
}
.ai-illust h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 28px; font-weight: 400;
  margin: 0 0 8px; line-height: 1.2;
}
.ai-illust .small {
  font-size: 13px; opacity: 0.75; margin: 0;
}

/* ===== AUDIENCE ===== */
.audience-section { background: var(--surface); }
.aud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .aud-grid { grid-template-columns: 1fr; } }

.aud-card {
  background: #fff;
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  padding: 38px 36px 36px;
  position: relative;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.aud-card:hover {
  background: var(--blu);
  color: #fff;
  border-color: var(--blu);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.aud-card:hover h3 { color: #fff; }
.aud-card:hover > p { color: rgba(255,255,255,0.85); }
.aud-card:hover .aud-tag { background: var(--giallo); color: var(--blu); }
.aud-card:hover .aud-list li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.1); }
.aud-card:hover .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.aud-card:hover .btn-ghost:hover { background: var(--giallo); color: var(--blu); border-color: var(--giallo); }
.aud-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--surface);
  color: var(--blu);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 24px;
  font-weight: 500;
}
.aud-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 36px; line-height: 1.1;
  margin: 0 0 14px;
  letter-spacing: -0.015em;
  color: var(--blu);
  transition: color .25s ease;
}
.aud-card:hover h3 { color: #fff; }
.aud-card > p {
  font-size: 16px; color: var(--ink-2); margin: 0 0 28px;
  text-wrap: pretty;
  transition: color .25s ease;
}
.aud-card:hover > p { color: rgba(255,255,255,0.85); }
.aud-list { list-style: none; padding: 0; margin: 0 0 28px; }
/* TODO #2: bottoni audience — blu di default, bianchi su card evidenziata, gialli su hover */
.aud-card .btn-ghost {
  margin-top: auto; align-self: flex-start;
  background: var(--blu); color: #fff; border-color: var(--blu);
}
.aud-card .btn-ghost:hover {
  background: var(--giallo); border-color: var(--giallo); color: var(--blu);
}
.aud-card:hover .btn-ghost {
  background: #fff; border-color: #fff; color: var(--blu);
}
.aud-card:hover .btn-ghost:hover {
  background: var(--giallo); border-color: var(--giallo); color: var(--blu);
}
.aud-list li {
  position: relative; padding: 10px 0 10px 28px;
  font-size: 14.5px; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  transition: color .25s ease, border-color .25s ease;
}
.aud-card:hover .aud-list li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.1); }
.aud-list li:last-child { border-bottom: none; }
.aud-list li::before {
  content: ""; position: absolute; left: 0; top: 18px;
  width: 14px; height: 2px; background: var(--giallo);
}

/* ===== EXPERTS ===== */
.experts {
  background: var(--blu);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.experts::before {
  content: ""; position: absolute;
  top: -200px; right: -100px; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,165,0,0.18), transparent 65%);
}
.experts-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
}
@media (max-width: 980px) { .experts-inner { grid-template-columns: 1fr; } }
.experts h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  margin: 0 0 24px;
  letter-spacing: -0.018em;
}
.experts h2 em { color: var(--giallo); font-style: italic; }
.experts p { font-size: 17px; opacity: 0.85; margin: 0 0 28px; max-width: 480px; }

.expert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.expert-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 22px;
  backdrop-filter: blur(10px);
}
.expert-card .role {
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  color: var(--giallo); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 16px;
}
.expert-card .title {
  font-family: 'Montserrat', sans-serif; font-size: 22px; line-height: 1.2;
  margin-bottom: 10px;
}
.expert-card .desc { font-size: 13px; opacity: 0.7; line-height: 1.5; }

/* ===== FORM ===== */
.contact-section {
  background:
    radial-gradient(900px 500px at 0% 100%, rgba(245,165,0,0.08), transparent 70%),
    var(--surface-2);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  grid-template-areas: "side form" "info form";
  column-gap: 80px;
  row-gap: 40px;
  align-items: start;
}
.contact-grid .contact-side     { grid-area: side; }
.contact-grid .contact-form-col { grid-area: form; }
.contact-grid .contact-info     { grid-area: info; }

/* mobile: testo → form → contatti */
@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "side" "form" "info";
    gap: 40px;
  }
}
@media (max-width: 540px) {
  .contact-grid { row-gap: 20px; }
  .contact-grid .contact-side p { margin-bottom: 0; }
}

.contact-side h2 em { font-style: italic; color: var(--giallo); }

.contact-side h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 400;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.05;
  margin: 12px 0 22px;
  color: var(--blu);
  letter-spacing: -0.018em;
}
.contact-side h2 em { font-style: italic; }
.contact-side p {
  font-size: 17px; color: var(--ink-2); max-width: 460px; margin: 0 0 36px;
  text-wrap: pretty;
}

.contact-info { display: flex; flex-direction: column; gap: 18px; }
.contact-info-row { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-row .ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface); color: var(--blu);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.contact-info-row .lbl { font-size: 12px; color: var(--ink-3); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.06em; }
.contact-info-row .val { font-size: 15px; color: var(--ink); font-weight: 500; }
.contact-info-row a.val:hover { color: var(--blu); }

.contact-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px;
  box-shadow: var(--shadow-md);
}
@media (max-width: 600px) { .contact-form { padding: 26px 22px; } }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label {
  font-size: 12px; color: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.form-group label .req { color: var(--giallo); margin-left: 2px; }
.form-group input,
.form-group select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px; font-family: inherit;
  background: #fff; color: var(--ink);
  transition: all .15s;
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blu);
  box-shadow: 0 0 0 3px rgba(0,50,90,0.08);
}
.form-group.error input,
.form-group.error select {
  border-color: #d64545;
  background: #fff7f7;
}
.form-group .err {
  font-size: 12px; color: #d64545;
  margin-top: 2px;
}
.form-submit {
  width: 100%;
  background: var(--blu); color: #fff;
  border: none; border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px; font-weight: 600;
  margin-top: 10px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: all .18s;
}
.form-submit:hover:not(:disabled) { background: var(--blu-3); }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.form-privacy {
  font-size: 12px; color: var(--ink-3); margin-top: 14px; text-align: center;
}
.form-privacy a { color: var(--blu); text-decoration: underline; }

.form-success {
  text-align: center;
  padding: 30px 0;
}
.form-success .icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--giallo); color: var(--blu);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; margin-bottom: 18px;
}
.form-success h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 32px; font-weight: 400;
  color: var(--blu);
  margin: 0 0 8px;
}
.form-success p { font-size: 15px; color: var(--ink-2); margin: 0; }
.form-success .success-lede {
  font-size: 16px; line-height: 1.55; color: var(--ink-2);
  max-width: 460px; margin: 0 auto 22px;
}
.success-email {
  color: var(--blu);
  font-weight: 700;
  word-break: break-all;
}
.success-hint {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 460px;
  margin: 0 auto 22px;
  text-align: left;
}
.success-hint .hint-title {
  font-size: 13px; font-weight: 700; color: var(--blu);
  margin-bottom: 4px;
}
.success-hint .hint-body {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.success-back {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.success-back.is-waiting {
  color: var(--ink-3);
  border-color: var(--line);
  background: var(--surface);
  cursor: not-allowed;
  opacity: 0.85;
}
.success-back.is-waiting:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: none;
}
.success-spinner {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.success-spinner-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--blu);
  font-variant-numeric: tabular-nums;
}

/* ===== FOOTER ===== */
footer {
  background: var(--blu-2);
  color: rgba(255,255,255,0.7);
  padding: 60px 0 30px;
  font-size: 14px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 800px) { .foot-top { grid-template-columns: 1fr; gap: 28px; } }
.foot-brand img, .foot-brand svg { height: 28px; width: auto; display: block; }
.foot-brand p { font-size: 13px; opacity: 0.7; margin-top: 16px; max-width: 320px; line-height: 1.5; }
.foot-col h5 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--giallo);
  margin: 0 0 16px;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}
.foot-col a { display: block; padding: 5px 0; opacity: 0.85; transition: opacity .15s; font-size: 14px; }
.foot-col a:hover { opacity: 1; color: var(--giallo); }
.foot-bottom {
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; opacity: 0.6;
}
.arsera-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.arsera-link:hover { color: var(--giallo); }

/* ===== MOBILE OVERFLOW FIXES ===== */
/* clip (not hidden) so position:sticky children still work */
html, body { overflow-x: clip; }

@media (max-width: 540px) {
  /* Nav: hide ghost "Accedi" button; shrink logo + CTA to fit in ~311px.
     Scope to .nav-cta so the form's retry button (same class) stays visible. */
  .nav-cta .btn-ghost-nav { display: none; }
  .brand img, .brand svg { height: 22px; }
  .nav-cta .btn { padding: 8px 13px; font-size: 13px; }

  /* Headline: "concessioni balneari" had white-space:nowrap which overflowed at 44px */
  h1.headline .underline { white-space: normal; }

  /* Hero meta: let the three trust badges wrap to two rows */
  .hero-meta { flex-wrap: wrap; gap: 14px; }

  /* Demo shell: tighter padding so content fits */
  .demo-body { padding: 20px 16px; }

  /* Demo bar breadcrumb: hide domain prefix, keep just the page name */
  .demo-bar .crumb { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 60px); }

  /* Bandi step: single column so cards don't overflow */
  .step1-grid { grid-template-columns: 1fr; }

  /* Eval grid: fixed 220px column overflowed — stack vertically */
  .eval-grid { grid-template-columns: 1fr; }
  .score-ring { flex-direction: row; justify-content: space-between; align-items: center; padding: 16px 20px; }
  .score-ring .num { font-size: 44px; }
  .score-ring .delta { margin-top: 0; }

  /* Experts: 2-col grid had no mobile breakpoint */
  .expert-grid { grid-template-columns: 1fr; }
}