/* ===========================================================
   M-apperò — Interactive layer (v0.3)
   Auto-playing step player, impact calculator, hoverable map,
   live waveform, card tilt
   =========================================================== */


/* ---------- HOW IT WORKS: interactive player ---------- */
.how-player {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 28px;
  align-items: stretch;
}
.how-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}

/* Pagination dots — only on the mobile carousel */
.how-dots { display: none; }

@media (max-width: 1000px) {
  .how-player { grid-template-columns: 1fr; gap: 10px; }

  /* One card at a time, swipeable horizontally */
  .how-steps {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    touch-action: pan-x;
  }
  .how-steps::-webkit-scrollbar { display: none; }
  .how-step {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .how-step:hover { transform: none; box-shadow: none; }

  .how-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 2px 0 2px;
  }
  .how-dots button {
    width: 8px; height: 8px;
    padding: 0; border: none; cursor: pointer;
    border-radius: 50%;
    background: rgba(16,22,51,0.18);
    transition: background .25s ease, width .25s ease, border-radius .25s ease;
  }
  .how-dots button.is-active {
    width: 22px;
    border-radius: 5px;
    background: var(--color-decision-coral);
  }
}
.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16,22,51,0.08);
  cursor: pointer;
  text-align: left;
  width: 100%;
  overflow: hidden;
  transition: background 320ms ease, color 320ms ease, border-color 320ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.how-step:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -22px rgba(7,10,38,0.25); }
.how-step.is-active {
  background: var(--color-midnight);
  color: var(--color-white);
  border-color: var(--color-midnight);
  box-shadow: 0 24px 40px -28px rgba(7,10,38,0.45);
}
.hs-marker {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-soft);
  color: var(--color-ink);
  transition: background 320ms ease, color 320ms ease;
}
.how-step.is-active .hs-marker {
  background: var(--color-decision-coral);
  color: var(--color-midnight);
}
.how-step.is-done .hs-marker {
  background: rgba(120,216,207,0.22);
  color: var(--color-signal-teal);
}
.hs-body { min-width: 0; }
.hs-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-decision-coral);
}
.how-step.is-active .hs-tag { color: var(--color-clean-mint); }
.hs-body h3 {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600;
  margin: 4px 0 4px;
  color: inherit;
  letter-spacing: -0.01em;
}
.hs-body p {
  font-size: 13.5px; color: var(--color-muted);
  margin: 0;
  transition: color 320ms ease;
}
.how-step.is-active .hs-body p { color: rgba(255,255,255,0.72); }
.hs-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-soft);
  color: var(--color-muted);
  font-size: 14px;
  transition: background 320ms ease, color 320ms ease;
}
.how-step.is-active .hs-icon { background: rgba(255,255,255,0.08); color: var(--color-clean-mint); }

.hs-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: transparent;
  overflow: hidden;
}
.how-step.is-active .hs-bar { background: rgba(255,255,255,0.10); }
.hs-bar i {
  display: block; height: 100%; width: 0%;
  background: var(--color-decision-coral);
  transition: width 80ms linear;
}
.how-step.is-done .hs-bar i { width: 100%; background: var(--color-signal-teal); }

/* Stage */
.how-stage {
  position: relative;
  background: linear-gradient(180deg, #0d1238 0%, #070A26 100%);
  border-radius: 24px;
  overflow: hidden;
  min-height: 480px;
  box-shadow: 0 40px 60px -34px rgba(7,10,38,0.55);
  isolation: isolate;
}
.how-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(120,216,207,0.10), transparent 50%),
    radial-gradient(circle at 78% 76%, rgba(242,93,122,0.08), transparent 50%);
  pointer-events: none; z-index: 0;
}
.how-stage-controls {
  position: absolute; left: 20px; top: 20px; z-index: 5;
  display: flex; gap: 10px; align-items: center;
}
.how-stage-controls .play-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  display: grid; place-items: center;
  color: var(--color-white);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.how-stage-controls .play-btn:hover { background: rgba(120,216,207,0.16); border-color: rgba(120,216,207,0.4); }
.how-stage-controls .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
}

.how-scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms ease;
  z-index: 1;
}
.how-scene.is-active { opacity: 1; visibility: visible; }

/* Scene typography */
.how-scene .scene-title {
  position: absolute; right: 22px; top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(120,216,207,0.65);
  text-transform: uppercase;
}

/* Scene 0 — Rilevazione */
.scene-detect-road {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(180deg, #0a1037 0%, #1b2358 100%);
  perspective: 800px;
}
.detect-road-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.detect-road-svg .road-edge {
  stroke: rgba(255,255,255,0.22);
  stroke-width: 2.5;
}
.detect-road-svg .lane-dash {
  stroke: rgba(255,255,255,0.6);
  stroke-width: 3;
  stroke-dasharray: 16 20;
  animation: laneScroll 0.6s linear infinite;
}
@keyframes laneScroll { to { stroke-dashoffset: -36; } }
@media (prefers-reduced-motion: reduce) {
  .detect-road-svg .lane-dash { animation: none; }
}
.scene-detect-car {
  position: absolute; left: 50%; bottom: 60px;
  width: 56px; height: 80px;
  transform: translateX(-50%);
  z-index: 2;
}
.scene-detect-car svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0,0,0,0.45)); }
.scene-detect-trace {
  position: absolute; left: 50%; transform: translateX(-50%); top: 68px;
  width: min(384px, 66%); height: 86px;
  background: rgba(7,10,38,0.6);
  border: 1px solid rgba(120,216,207,0.18);
  border-radius: 14px;
  padding: 10px 14px;
  z-index: 3;
  backdrop-filter: blur(6px);
}
.scene-detect-trace .head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.scene-detect-trace .head .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: rgba(120,216,207,0.85);
}
.scene-detect-trace .head .val {
  font-family: var(--font-display);
  font-size: 12px; color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.scene-detect-trace svg { width: 100%; height: 56px; display: block; }
.bump-flash {
  position: absolute; left: 50%; top: 50%;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242,93,122,0.45) 0%, rgba(242,93,122,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 5;
}
.bump-toast {
  position: absolute; bottom: 24px; right: 20px;
  transform: translateY(20px);
  background: rgba(242,93,122,0.18);
  border: 1px solid rgba(242,93,122,0.4);
  color: #ffd0d8;
  font-family: var(--font-display); font-size: 12px;
  padding: 8px 14px; border-radius: 999px;
  opacity: 0;
  transition: opacity 240ms ease, transform 240ms ease;
  z-index: 4;
  display: flex; align-items: center; gap: 8px;
}
.bump-toast.is-visible { opacity: 1; transform: translateY(0); }
.bump-toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--status-high); animation: pulse 1s ease infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } }

/* Scene 1 — Aggregazione */
.scene-agg-map {
  position: absolute; inset: 30px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,216,207,0.08), transparent 60%),
    #0a1037;
  border: 1px solid rgba(120,216,207,0.12);
  overflow: hidden;
}
.scene-agg-map svg { position: absolute; inset: 0; }
.scene-agg-hub {
  position: absolute; left: 50%; top: 50%;
  width: 92px; height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(120,216,207,0.55), rgba(120,216,207,0.15) 60%, transparent 80%);
  display: grid; place-items: center;
  z-index: 3;
}
.scene-agg-hub::before {
  content: "";
  position: absolute; inset: 22px;
  border-radius: 50%;
  background: rgba(7,10,38,0.85);
  border: 1px solid rgba(120,216,207,0.5);
}
.scene-agg-hub::after {
  content: ""; position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px dashed rgba(120,216,207,0.45);
  animation: hubSpin 14s linear infinite;
}
@keyframes hubSpin { to { transform: rotate(360deg); } }
.scene-agg-hub .label {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 11px; color: var(--color-signal-teal);
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.1;
}
.scene-agg-hub .label b {
  display: block; font-size: 18px; color: var(--color-white);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.scene-agg-counter {
  position: absolute; right: 30px; bottom: 30px;
  background: rgba(7,10,38,0.6);
  border: 1px solid rgba(120,216,207,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  z-index: 4;
}
.scene-agg-counter b { color: var(--color-signal-teal); font-variant-numeric: tabular-nums; }
.agg-vehicle {
  position: absolute;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  z-index: 2;
}
.agg-vehicle::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18), 0 0 16px rgba(255,255,255,0.35);
}
.agg-packet {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-clean-mint);
  box-shadow: 0 0 12px var(--color-signal-teal);
  z-index: 2;
  pointer-events: none;
}

/* Scene 2 — Classificazione */
.scene-cls-frame {
  position: absolute; left: 50%; top: 50%;
  width: 78%; height: 64%;
  transform: translate(-50%, -54%);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #2a2f55 0%, #161a40 100%);
  border: 1px solid rgba(120,216,207,0.18);
  box-shadow: 0 30px 50px -28px rgba(0,0,0,0.6);
}
.scene-cls-frame .road-tex {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 70%, rgba(0,0,0,0.6) 0 28px, transparent 32px),
    radial-gradient(circle at 65% 35%, rgba(0,0,0,0.55) 0 18px, transparent 22px),
    radial-gradient(circle at 80% 80%, rgba(0,0,0,0.4) 0 12px, transparent 16px),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(255,255,255,0.45) 60px 64px, transparent 64px 130px),
    linear-gradient(180deg, #34395d 0%, #1a1f48 100%);
  filter: contrast(1.05);
}
.cls-box {
  position: absolute;
  border: 1.5px solid;
  border-radius: 4px;
  pointer-events: none;
}
.cls-box.high { border-color: var(--status-high); box-shadow: 0 0 0 4px rgba(242,93,122,0.18); }
.cls-box.med  { border-color: var(--status-medium); box-shadow: 0 0 0 4px rgba(246,200,95,0.18); }
.cls-box.low  { border-color: var(--status-low); box-shadow: 0 0 0 4px rgba(79,214,163,0.18); }
.cls-box .label {
  position: absolute; left: -1px; top: -22px;
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  color: var(--color-midnight);
  border-radius: 3px;
  white-space: nowrap;
}
.cls-box.high .label { background: var(--status-high); color: #fff; }
.cls-box.med  .label { background: var(--status-medium); }
.cls-box.low  .label { background: var(--status-low); }
.cls-bins {
  position: absolute; left: 22px; right: 22px; bottom: 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.cls-bin {
  background: rgba(7,10,38,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.cls-bin .h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: 11px;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cls-bin .h b {
  font-family: var(--font-display); font-size: 18px; color: var(--color-white);
  font-variant-numeric: tabular-nums;
}
.cls-bin .pips {
  display: flex; gap: 4px; margin-top: 6px;
  min-height: 8px; flex-wrap: wrap;
}
.cls-bin .pips i {
  width: 8px; height: 8px; border-radius: 2px; display: block;
  opacity: 0; transform: scale(0.5);
  animation: pipPop 320ms ease forwards;
}
@keyframes pipPop { to { opacity: 1; transform: scale(1); } }
.cls-bin.high .pips i { background: var(--status-high); }
.cls-bin.med  .pips i { background: var(--status-medium); }
.cls-bin.low  .pips i { background: var(--status-low); }

/* Scene 3 — Intervento (Kanban) */
.scene-kanban {
  position: absolute; inset: 28px 22px 22px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.kanban-col {
  background: rgba(7,10,38,0.45);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.kanban-col h4 {
  font-family: var(--font-display);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.kanban-col h4 i {
  width: 8px; height: 8px; border-radius: 2px; background: var(--color-slate);
}
.kanban-col.todo h4 i { background: var(--color-slate); }
.kanban-col.doing h4 i { background: var(--status-medium); }
.kanban-col.done h4 i { background: var(--status-low); }
.kanban-col .stack {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.kanban-card {
  background: #fff;
  color: var(--color-ink);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(16,22,51,0.08);
  font-size: 12px;
  transition: transform 600ms cubic-bezier(.5,.1,.3,1), opacity 400ms ease;
}
.kanban-card .id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--color-muted);
}
.kanban-card .t {
  font-family: var(--font-display);
  font-weight: 600; font-size: 12.5px;
  margin-top: 2px; color: var(--color-ink);
  line-height: 1.2;
}
.kanban-card .meta {
  margin-top: 6px;
  display: flex; gap: 8px; align-items: center;
  font-size: 10.5px; color: var(--color-muted);
}
.kanban-card .meta .dot {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.kanban-card.is-moving { transform: translate(20px, -8px); opacity: 0.4; }
.kanban-toast {
  position: absolute; left: 24px; bottom: 24px;
  background: rgba(120,216,207,0.14);
  border: 1px solid rgba(120,216,207,0.4);
  color: var(--color-clean-mint);
  font-family: var(--font-display); font-size: 12px;
  padding: 8px 14px; border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.kanban-toast.is-visible { opacity: 1; transform: translateY(0); }
.kanban-toast .av {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(120,216,207,0.25);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  color: var(--color-white);
}


/* ---------- IMPACT CALCULATOR ---------- */
.impact {
  background: linear-gradient(180deg, var(--color-midnight) 0%, #0a0e2e 100%);
  padding: var(--space-7) 0;
  position: relative;
  overflow: hidden;
}
.impact::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(120,216,207,0.14), transparent 45%),
    radial-gradient(circle at 88% 78%, rgba(242,93,122,0.10), transparent 45%);
  pointer-events: none;
}
.impact .container { position: relative; }
.impact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 36px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,216,207,0.18);
  border-radius: 28px;
  padding: 36px;
  align-items: stretch;
  margin-top: var(--space-5);
}
@media (max-width: 1000px) { .impact-card { grid-template-columns: 1fr; padding: 28px; } }

.impact-controls h3 {
  font-family: var(--font-display);
  font-size: 22px; color: var(--color-white);
  margin: 0 0 6px;
}
.impact-controls p {
  font-size: 14.5px; color: var(--color-slate); margin: 0 0 28px;
  max-width: 42ch;
}
.impact-slider { margin-top: 22px; }
.impact-slider .row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.impact-slider .label {
  font-family: var(--font-display);
  font-size: 13px; color: var(--color-white);
}
.impact-slider .val {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700;
  color: var(--color-signal-teal);
  font-variant-numeric: tabular-nums;
}
.impact-slider .val small {
  font-size: 12px; color: var(--color-slate); font-weight: 500; margin-left: 4px;
}
.impact-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--color-signal-teal) 0%, var(--color-signal-teal) var(--pct, 50%), rgba(255,255,255,0.12) var(--pct, 50%));
  border-radius: 4px;
  outline: none;
  cursor: grab;
}
.impact-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  background: var(--color-white);
  border: 3px solid var(--color-signal-teal);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 4px 12px rgba(120,216,207,0.4);
  transition: transform 120ms ease;
}
.impact-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.impact-range::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--color-white);
  border: 3px solid var(--color-signal-teal);
  border-radius: 50%;
  cursor: grab;
}
.impact-bounds {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--color-muted);
  margin-top: 8px; letter-spacing: 0.05em;
}

.impact-output {
  display: grid; grid-template-rows: auto auto 1fr;
  gap: 18px;
}
.impact-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.impact-kpi {
  background: rgba(7,10,38,0.55);
  border: 1px solid rgba(120,216,207,0.16);
  border-radius: 16px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.impact-kpi::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-signal-teal), transparent);
  opacity: 0.55;
}
.impact-kpi .lbl {
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-slate);
}
.impact-kpi .num {
  font-family: var(--font-display);
  font-weight: 700; font-size: 32px;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin-top: 8px;
}
.impact-kpi .num small {
  font-size: 14px; color: var(--color-signal-teal);
  font-weight: 600; margin-left: 2px;
}
.impact-kpi .sub {
  font-size: 12px; color: var(--color-muted);
  margin-top: 4px;
}
.impact-kpi.coral::after { background: linear-gradient(90deg, var(--color-decision-coral), transparent); }
.impact-kpi.gold::after  { background: linear-gradient(90deg, var(--status-medium), transparent); }

.impact-viz {
  background: rgba(7,10,38,0.45);
  border: 1px solid rgba(120,216,207,0.14);
  border-radius: 16px;
  padding: 18px;
}
.impact-viz .head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-display); font-size: 12px;
  color: var(--color-slate); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.impact-viz .head b { color: var(--color-white); font-variant-numeric: tabular-nums; }
.impact-stack {
  display: flex; width: 100%; height: 28px;
  border-radius: 6px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.impact-stack > i {
  height: 100%;
  transition: width 420ms cubic-bezier(.4,0,.2,1);
  display: block;
}
.impact-stack .auto { background: linear-gradient(90deg, var(--color-signal-teal), var(--color-clean-mint)); }
.impact-stack .manual { background: rgba(168,176,199,0.30); }
.impact-legend {
  display: flex; gap: 18px; margin-top: 10px;
  font-family: var(--font-display); font-size: 11.5px;
  color: var(--color-slate);
}
.impact-legend span { display: inline-flex; align-items: center; gap: 8px; }
.impact-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.impact-legend i.auto { background: var(--color-signal-teal); }
.impact-legend i.manual { background: rgba(168,176,199,0.6); }

.impact-note {
  font-size: 11.5px; color: var(--color-muted);
  margin-top: 6px;
  font-style: italic;
}


/* ---------- HOVERABLE MAP DOTS / TOOLTIP ---------- */
.trail-dot { cursor: pointer; transition: r 180ms ease, filter 180ms ease; }
.trail-dot:hover { filter: drop-shadow(0 0 8px currentColor); }
.map-tooltip {
  position: absolute;
  background: rgba(7,10,38,0.92);
  border: 1px solid rgba(120,216,207,0.35);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font-display);
  color: var(--color-white);
  font-size: 12px;
  pointer-events: none;
  z-index: 8;
  min-width: 160px;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 160ms ease;
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.6);
}
.map-tooltip.is-visible { opacity: 1; }
.map-tooltip::after {
  content: ""; position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: rgba(7,10,38,0.92);
  border-right: 1px solid rgba(120,216,207,0.35);
  border-bottom: 1px solid rgba(120,216,207,0.35);
}
.map-tooltip .ttip-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--color-slate);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.map-tooltip .ttip-head i {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
}
.map-tooltip .ttip-title {
  font-weight: 600; font-size: 13px;
}
.map-tooltip .ttip-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--color-slate);
  margin-top: 4px;
}


/* ---------- CARD TILT (problem + benefit) ---------- */
.problem-card, .benefit-card {
  transform-style: preserve-3d;
  transition: transform 220ms ease, border-color 220ms ease;
  will-change: transform;
}
.problem-card .pc-num,
.benefit-card .b-num,
.benefit-card .b-icon,
.problem-card h3,
.benefit-card h3 {
  transform: translateZ(20px);
}


/* ---------- CONTINUOUS WAVEFORM (tech card 01) ---------- */
.tc-illustration.live-wave svg .static-trace { display: none; }
.tc-illustration.live-wave svg .live-trace {
  stroke: var(--color-signal-teal);
  stroke-width: 1.4;
  fill: none;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(120,216,207,0.4));
}
.tc-illustration.live-wave svg .live-bump {
  fill: var(--status-high);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
}
.tc-illustration.live-wave svg .live-cursor {
  fill: var(--color-clean-mint);
}


/* ---------- INTERACTIVE TELEMETRY pulse ring on hero ---------- */
.telemetry-panel { transition: transform 260ms ease; }
.hero-mapview:hover .telemetry-panel { transform: translateY(-2px); }


/* ---------- Subtle anim helper ---------- */
.fade-up-enter {
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 460ms ease forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }


/* ---------- DASHBOARD month scrubber ---------- */
.dash .chart { position: relative; }
.dash-month-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--color-decision-coral) 0%, var(--color-decision-coral) var(--pct, 100%), rgba(16,22,51,0.10) var(--pct, 100%));
  border-radius: 4px;
  outline: none;
  cursor: grab;
}
.dash-month-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  background: #fff;
  border: 3px solid var(--color-decision-coral);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 4px 10px rgba(242,93,122,0.35);
}
.dash-month-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #fff;
  border: 3px solid var(--color-decision-coral);
  border-radius: 50%;
  cursor: grab;
}
.chart-svg .month-bars rect {
  opacity: 0.32;
  transition: opacity 240ms ease, transform 240ms ease;
  transform-origin: center bottom;
  transform-box: fill-box;
}
.chart-svg .month-bars.is-selected rect {
  opacity: 1;
  transform: scale(1.04);
}
.chart-svg .month-bars:hover rect { opacity: 0.7; cursor: pointer; }
.chart-svg .month-bars.is-selected:hover rect { opacity: 1; }


/* ===========================================================
   SCENE 0 — Rilevazione: scansione strada + difetti
   =========================================================== */
.detect-defects { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.detect-defect {
  position: absolute; top: 0;
  width: 52px; height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.4) 55%, transparent 78%);
  border: 1.5px solid rgba(255,255,255,0.35);
}
.detect-defect.kind-high { border-color: var(--status-high); }
.detect-defect.kind-med  { border-color: var(--status-medium); }
.detect-defect.kind-low  { border-color: var(--status-low); }
.detect-defect.captured {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.18), 0 0 22px 4px currentColor;
  animation: defectPing 500ms ease;
}
.detect-defect.kind-high.captured { color: var(--status-high); }
.detect-defect.kind-med.captured  { color: var(--status-medium); }
.detect-defect.kind-low.captured  { color: var(--status-low); }
@keyframes defectPing {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.5); }
  100% { box-shadow: 0 0 0 18px rgba(255,255,255,0); }
}
.scan-cone {
  position: absolute; left: 50%; bottom: 14px;
  width: 210px; height: 230px;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(120,216,207,0.30), rgba(120,216,207,0.04) 70%, transparent);
  clip-path: polygon(40% 100%, 60% 100%, 100% 0, 0 0);
  z-index: 2; pointer-events: none;
  animation: conePulse 1.6s ease-in-out infinite;
}
@keyframes conePulse { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }
.scan-line {
  position: absolute; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-signal-teal), transparent);
  box-shadow: 0 0 10px var(--color-signal-teal);
  z-index: 2; pointer-events: none; opacity: 0.8;
  animation: scanSweep 2.2s linear infinite;
}
@keyframes scanSweep {
  0%   { top: 30%; opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.9; }
  100% { top: 82%; opacity: 0; }
}
.detect-collect {
  position: absolute; left: 20px; bottom: 20px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(7,10,38,0.6);
  border: 1px solid rgba(120,216,207,0.30);
  color: var(--color-clean-mint);
  font-family: var(--font-display); font-size: 11px;
  padding: 7px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.detect-collect .rec {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--status-high);
  animation: pulse 1.1s ease infinite;
}


/* ===========================================================
   SCENE 1 — Aggregazione: board stile Monday
   =========================================================== */
.scene-agg2 {
  position: absolute; inset: 26px 26px 52px;
  display: grid; grid-template-columns: 70px 1fr; gap: 14px;
  z-index: 1;
}
.agg2-stream {
  position: relative; overflow: hidden;
  border-radius: 12px;
  background: rgba(7,10,38,0.45);
  border: 1px solid rgba(120,216,207,0.12);
}
.agg2-stream::after {
  content: "raw";
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(120,216,207,0.4);
}
.agg2-raw {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  transform: translateX(-50%);
}
.agg2-raw.kind-high { background: var(--status-high); box-shadow: 0 0 8px rgba(240,90,120,0.7); }
.agg2-raw.kind-med  { background: var(--status-medium); box-shadow: 0 0 8px rgba(246,200,95,0.7); }
.agg2-raw.kind-low  { background: var(--status-low); box-shadow: 0 0 8px rgba(79,214,163,0.7); }
/* overlay layer: raw dots fly from the stream into the tables */
.agg2-flow { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.agg2-flow .agg2-raw { top: 0; left: 0; }
.agg2-group.fed { animation: aggFed 400ms ease; }
@keyframes aggFed {
  0%   { box-shadow: inset 0 0 0 0 rgba(120,216,207,0); }
  30%  { box-shadow: inset 0 0 0 2px rgba(120,216,207,0.45); }
  100% { box-shadow: inset 0 0 0 0 rgba(120,216,207,0); }
}
@media (prefers-reduced-motion: reduce) {
  .agg2-group.fed { animation: none; }
}

.agg2-board {
  display: flex; flex-direction: column; gap: 9px;
  min-height: 0; overflow: hidden;
}
.agg2-group {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: rgba(7,10,38,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 3px solid;
  border-radius: 10px;
  padding: 8px 11px;
}
.agg2-group.high { border-left-color: var(--status-high); }
.agg2-group.med  { border-left-color: var(--status-medium); }
.agg2-group.low  { border-left-color: var(--status-low); }
.agg2-ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.agg2-pill { width: 11px; height: 11px; border-radius: 3px; }
.agg2-group.high .agg2-pill { background: var(--status-high); }
.agg2-group.med  .agg2-pill { background: var(--status-medium); }
.agg2-group.low  .agg2-pill { background: var(--status-low); }
.agg2-gname {
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.68);
}
.agg2-count {
  margin-left: auto;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  color: var(--color-white); font-variant-numeric: tabular-nums;
}
.agg2-rows { display: flex; flex-direction: column; gap: 5px; }
.agg2-row {
  display: grid; grid-template-columns: 10px 42px 1fr 1fr 48px;
  align-items: center; gap: 8px;
  background: rgba(255,255,255,0.045);
  border-radius: 6px; padding: 5px 8px;
  animation: agg2RowIn 340ms cubic-bezier(.4,0,.2,1);
}
.agg2-row.leaving { opacity: 0; transform: translateY(-6px); transition: opacity 260ms ease, transform 260ms ease; }
@keyframes agg2RowIn {
  from { opacity: 0; transform: translateX(-18px) scaleX(0.5); transform-origin: left; }
  to   { opacity: 1; transform: none; }
}
.agg2-dot { width: 9px; height: 9px; border-radius: 50%; }
.agg2-group.high .agg2-dot { background: var(--status-high); }
.agg2-group.med  .agg2-dot { background: var(--status-medium); }
.agg2-group.low  .agg2-dot { background: var(--status-low); }
.agg2-code {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: rgba(255,255,255,0.55);
}
.agg2-cell { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.agg2-cell.c2 { background: rgba(255,255,255,0.09); }
.agg2-status {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600;
  text-align: center; padding: 2px 0; border-radius: 4px;
  color: #07091e;
}
.agg2-group.high .agg2-status { background: var(--status-high); color: #fff; }
.agg2-group.med  .agg2-status { background: var(--status-medium); }
.agg2-group.low  .agg2-status { background: var(--status-low); }


/* ===========================================================
   SCENE 2 — Classificazione: box su immagini
   =========================================================== */
.cls-grid {
  position: absolute; inset: 28px 26px 56px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr); gap: 12px;
  z-index: 1;
}
.cls-tile {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  opacity: 0; transform: scale(0.9);
  transition: opacity 340ms ease, transform 340ms ease;
}
.cls-tile.shown { opacity: 1; transform: none; }
.cls-photo { position: absolute; inset: 0; }
.cls-bbox {
  position: absolute; inset: 22% 18%;
  border: 1.5px solid; border-radius: 2px;
  animation: bboxIn 420ms ease;
}
.cls-bbox b { position: absolute; width: 9px; height: 9px; }
.cls-bbox b:nth-child(1) { top: -2px; left: -2px;  border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.cls-bbox b:nth-child(2) { top: -2px; right: -2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.cls-bbox b:nth-child(3) { bottom: -2px; left: -2px;  border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; }
.cls-bbox b:nth-child(4) { bottom: -2px; right: -2px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; }
.cls-tile.high .cls-bbox { color: var(--status-high); border-color: var(--status-high); box-shadow: 0 0 0 3px rgba(240,90,120,0.20); }
.cls-tile.med  .cls-bbox { color: var(--status-medium); border-color: var(--status-medium); box-shadow: 0 0 0 3px rgba(246,200,95,0.20); }
.cls-tile.low  .cls-bbox { color: var(--status-low); border-color: var(--status-low); box-shadow: 0 0 0 3px rgba(79,214,163,0.20); }
@keyframes bboxIn { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
/* AI-vision scan sweep over the grid */
.cls-scan {
  position: absolute; left: 26px; right: 26px; top: 28px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-clean-mint), transparent);
  box-shadow: 0 0 12px var(--color-clean-mint);
  opacity: 0; z-index: 3; pointer-events: none;
}
.how-scene[data-scene="2"].is-active .cls-scan { animation: clsScan 3.8s ease-in-out infinite; }
@keyframes clsScan {
  0% { top: 28px; opacity: 0; }
  12% { opacity: 0.85; }
  82% { opacity: 0.85; }
  100% { top: calc(100% - 58px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .how-scene[data-scene="2"].is-active .cls-scan { animation: none; }
}
.cls-tag {
  position: absolute; left: 7px; bottom: 7px;
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 7px; border-radius: 4px;
  color: #07091e; white-space: nowrap;
}
.cls-tile.high .cls-tag { background: var(--status-high); color: #fff; }
.cls-tile.med  .cls-tag { background: var(--status-medium); }
.cls-tile.low  .cls-tag { background: var(--status-low); }

/* stylised asphalt + defect textures */
.cls-photo.tex-crack-long {
  background:
    linear-gradient(92deg, transparent 45%, rgba(0,0,0,0.7) 48%, rgba(0,0,0,0.55) 51%, transparent 55%),
    linear-gradient(160deg, #3a3f5e, #23284a);
}
.cls-photo.tex-crack-diff {
  background:
    repeating-linear-gradient(38deg, transparent 0 15px, rgba(0,0,0,0.5) 15px 17px),
    repeating-linear-gradient(-42deg, transparent 0 19px, rgba(0,0,0,0.42) 19px 21px),
    linear-gradient(160deg, #3a3f5e, #23284a);
}
.cls-photo.tex-avvall {
  background:
    radial-gradient(ellipse 70% 52% at 50% 58%, rgba(0,0,0,0.55), transparent 72%),
    linear-gradient(160deg, #3a3f5e, #23284a);
}
.cls-photo.tex-cedimento {
  background:
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0.82) 0 20%, rgba(0,0,0,0.4) 32%, transparent 56%),
    repeating-linear-gradient(20deg, transparent 0 22px, rgba(0,0,0,0.3) 22px 24px),
    linear-gradient(160deg, #343a59, #1d2244);
}
.cls-photo.tex-tombino {
  background:
    radial-gradient(circle at 50% 50%, #757a96 0 15%, #494e6d 16% 21%, rgba(0,0,0,0.3) 22% 25%, transparent 27%),
    linear-gradient(160deg, #3a3f5e, #23284a);
}
.cls-photo.tex-caditoia {
  background:
    repeating-linear-gradient(90deg, #5b6082 0 4px, #262a47 4px 9px),
    linear-gradient(160deg, #3a3f5e, #23284a);
}

.cls-summary {
  position: absolute; left: 26px; right: 26px; bottom: 18px;
  display: flex; gap: 20px; justify-content: center;
  font-family: var(--font-display); font-size: 12px;
  color: rgba(255,255,255,0.7);
  z-index: 2;
}
.cls-sum-item { display: inline-flex; align-items: center; gap: 7px; }
.cls-sum-item i { width: 10px; height: 10px; border-radius: 3px; }
.cls-sum-item i.high { background: var(--status-high); }
.cls-sum-item i.med  { background: var(--status-medium); }
.cls-sum-item i.low  { background: var(--status-low); }
.cls-sum-item b { color: var(--color-white); font-variant-numeric: tabular-nums; }


/* ---------- SCENE 3 — costo intervento ---------- */
.kanban-card .meta .cost {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  color: var(--color-ink);
}
/* segment-level (tratto) card */
.kanban-card {
  position: relative;
  padding-left: 13px;
  min-width: 0;
  overflow: hidden;
}
.kanban-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 4px 0 0 4px; background: var(--color-slate);
}
.kanban-card.pri-high::before { background: var(--status-high); }
.kanban-card.pri-med::before  { background: var(--status-medium); }
.kanban-card.pri-low::before  { background: var(--status-low); }
.kanban-card .kc-top {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  min-width: 0; overflow: hidden;
}
.kanban-card .id {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanban-card .kc-tag {
  flex: 0 1 auto; min-width: 0; max-width: 58%;
  font-family: 'JetBrains Mono', monospace; font-size: 8.5px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-muted);
  background: var(--bg-soft); border: 1px solid rgba(16,22,51,0.08);
  padding: 2px 5px; border-radius: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.kanban-card .t {
  margin-top: 6px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em;
}
.kanban-card .kc-seg {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
  color: var(--color-muted); margin-top: 2px;
}
.kanban-card .kc-pts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin-top: 8px;
  width: 100%; overflow: hidden;
}
.kanban-card .kc-pts .pt {
  display: inline-flex; align-items: center; gap: 3px;
  min-width: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 10.5px;
  color: var(--color-ink); font-variant-numeric: tabular-nums;
}
.kanban-card .kc-pts .pt i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: 0 0 6px; }
.kanban-card .kc-pts .pt.high i { background: var(--status-high); }
.kanban-card .kc-pts .pt.med  i { background: var(--status-medium); }
.kanban-card .kc-pts .pt.low  i { background: var(--status-low); }
.kanban-card .meta { margin-top: 8px; justify-content: space-between; min-width: 0; overflow: hidden; }
.kanban-card .meta .cost {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kanban-card .meta .kc-note {
  flex: 1 1 auto; min-width: 0; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; color: var(--color-muted); font-family: 'JetBrains Mono', monospace;
}


/* ---------- PLATFORM — Servizio gestito mock ---------- */
.svc { padding: 30px 28px; display: flex; flex-direction: column; gap: 22px; color: var(--color-ink); }
.svc-flow { display: flex; align-items: center; gap: 12px; }
.svc-node {
  flex: 1; text-align: center; padding: 16px 12px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.svc-node.ente { background: #eef0f5; color: var(--color-ink); border: 1px solid rgba(16,22,51,0.08); }
.svc-node.team { background: var(--color-midnight); color: #fff; }
.svc-arrow { position: relative; flex: 0 0 74px; height: 2px; background: linear-gradient(90deg, var(--color-signal-teal), var(--color-decision-coral)); }
.svc-arrow span {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--font-display); font-size: 10px;
  color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.svc-arrow::after {
  content: ""; position: absolute; right: -1px; top: -4px;
  border-left: 8px solid var(--color-decision-coral);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.svc-status {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(79,214,163,0.12); border: 1px solid rgba(79,214,163,0.4);
  color: #1d8a59; font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.svc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-low); box-shadow: 0 0 0 4px rgba(79,214,163,0.2); }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.svc-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--color-ink); }
.svc-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(79,214,163,0.18); color: #1d8a59;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: 0 0 auto;
}


/* ---------- CHI SIAMO — mazzo di card ---------- */
.network-deck { max-width: 540px; margin: 30px auto 0; }
.deck-stack { position: relative; height: 392px; }
@media (max-width: 560px) { .deck-stack { height: 440px; } }
.deck-item {
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  margin: 0; cursor: pointer;
  transition: transform 480ms cubic-bezier(.4,0,.2,1), opacity 420ms ease, box-shadow 300ms ease;
  will-change: transform, opacity;
  box-shadow: 0 30px 50px -30px rgba(7,10,38,0.35);
}
.deck-item[data-pos="0"] { transform: none; opacity: 1; z-index: 3; }
.deck-item[data-pos="1"] { transform: translateY(16px) scale(0.955); z-index: 2; }
.deck-item[data-pos="2"] { transform: translateY(30px) scale(0.91); z-index: 1; }
.deck-item.leaving { transform: translateY(-40px) scale(1.02) !important; opacity: 0 !important; z-index: 4; }
.deck-item[data-pos="0"]:hover { box-shadow: 0 40px 60px -28px rgba(7,10,38,0.45); }

/* Replay the front card's content reveal each time it is shown */
@keyframes ncReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.deck-item.replay > * { animation: ncReveal 460ms cubic-bezier(.2,.7,.2,1) both; }
.deck-item.replay > *:nth-child(1) { animation-delay: 40ms; }
.deck-item.replay > *:nth-child(2) { animation-delay: 100ms; }
.deck-item.replay > *:nth-child(3) { animation-delay: 160ms; }
.deck-item.replay > *:nth-child(4) { animation-delay: 220ms; }
.deck-item.replay > *:nth-child(5) { animation-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  .deck-item.replay > * { animation: none; }
}

.deck-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.deck-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(16,22,51,0.14); background: #fff;
  color: var(--color-ink); font-size: 20px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background 200ms ease, border-color 200ms ease;
}
.deck-arrow:hover { background: var(--bg-soft); border-color: rgba(16,22,51,0.28); }
.deck-dots { display: flex; gap: 8px; }
.deck-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; border: none;
  background: rgba(16,22,51,0.18); cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.deck-dot.is-active { background: var(--color-decision-coral); transform: scale(1.25); }
.deck-hint {
  display: block; text-align: center; margin-top: 12px;
  font-family: var(--font-display); font-size: 12px; color: var(--color-muted);
}

@media (max-width: 560px) {
  .bump-toast {
    left: 50%;
    right: auto;
    bottom: 62px;
    max-width: calc(100% - 48px);
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    transform: translate(-50%, 14px);
    white-space: normal;
  }
  .bump-toast.is-visible {
    transform: translate(-50%, 0);
  }
}