.hero-canvas {
  height: auto;
  aspect-ratio: 1942 / 809;
}

.hero-art {
  background-image: url('hero-preferenza-locale-2026-09.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: none !important;
}

.hammer-note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  margin-top: 18px;
  padding: 28px 32px 31px;
  border: 0;
  border-left: 4px solid var(--red);
  border-radius: 0 18px 18px 0;
  background: var(--off);
  color: var(--ink);
  font-family: Manrope, sans-serif;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.35;
}

.hammer-note strong {
  color: var(--red);
  font-size: clamp(21px, 1.75vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}

.hero-microcopy {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* Header logo stays clean on the white navigation bar. */
.header .brand {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.header .logo {
  width: 182px;
}

.footer .brand {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Ten short, ordered steps remain legible around the flywheel. */
.fly-node {
  width: 94px;
  font-size: 10px;
  line-height: 1.25;
  white-space: normal;
}

.fly-node b {
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  position: relative;
}

.fly-node b svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fly-node b svg path:only-child {
  fill: currentColor;
  stroke: none;
}

.fly-step {
  position: absolute;
  top: -6px;
  right: -7px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid #38404a;
  border-radius: 50%;
  background: #12161b;
  color: #cbd1d8;
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
}

.fly-node.active .fly-step,
.fly-node.fuel .fly-step {
  border-color: #fff;
  background: #fff;
  color: var(--red);
}

.f1 { --x: 50%; --y: 10%; }
.f2 { --x: 73.5%; --y: 17%; }
.f3 { --x: 87%; --y: 35%; }
.f4 { --x: 87%; --y: 59%; }
.f5 { --x: 73.5%; --y: 79%; }
.f6 { --x: 50%; --y: 87%; }
.f7 { --x: 26.5%; --y: 79%; }
.f8 { --x: 13%; --y: 59%; }
.f9 { --x: 13%; --y: 35%; }
.f10 { --x: 26.5%; --y: 17%; }

@media (max-width: 860px) {
  .hammer-note {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 24px 25px 27px;
  }

  .fly-node {
    width: 78px;
    font-size: 8px;
  }

  .fly-node b {
    font-size: 9px;
    width: 38px;
    height: 38px;
  }

  .fly-node b svg {
    width: 16px;
    height: 16px;
  }

  .fly-step {
    top: -5px;
    right: -6px;
    width: 15px;
    height: 15px;
    font-size: 6px;
  }
}

@media (max-width: 520px) {
  .hero-canvas {
    height: auto;
    aspect-ratio: 1942 / 809;
  }

  .hero-art {
    background-position: center;
    background-size: contain;
  }

  .hammer-note {
    margin-top: 14px;
    padding: 21px 20px 24px;
    border-left-width: 3px;
    border-radius: 0 14px 14px 0;
    font-size: 17px;
  }

  .hammer-note strong {
    font-size: 21px;
  }

  .fly-node b {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
  }

.fly-node b svg {
    width: 14px;
    height: 14px;
  }
}
+
/* Volano: a clear circular system, not a collection of floating labels. */
.fly-visual {
  max-width: 720px;
  filter: drop-shadow(0 28px 45px #00000038);
}

.orbit-base {
  stroke: #ffffff18;
  stroke-width: 9;
}

.orbit-progress {
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px #ff0d0d80);
}

.orbit-inner {
  stroke: #ffffff16;
  stroke-width: 1.4;
  stroke-dasharray: 1 11;
}

.orbit-core {
  fill: #101319;
  stroke: #ffffff18;
  stroke-width: 1.3;
}

.orbit-ticks {
  fill: none;
  stroke: #ffffff20;
  stroke-width: 3;
  stroke-dasharray: 2 10;
}

.orbit-traveler {
  filter: drop-shadow(0 0 8px #ff0d0d) drop-shadow(0 0 18px #ff0d0d80);
}

.fly-center {
  z-index: 2;
  width: 35%;
  padding: 18px;
  border: 1px solid #ffffff32;
  background:
    radial-gradient(circle at 35% 28%, #2a2f37 0%, #15181e 42%, #080a0e 100%);
  box-shadow: 0 0 0 13px #ffffff05, 0 28px 60px #00000060, inset 0 1px 0 #ffffff18;
  line-height: 1.12;
}

.fly-center:before {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid #ff0d0d38;
  border-radius: 50%;
}

.fly-center:after {
  inset: -18px;
  border-color: #ff0d0d1c;
}

.fly-center span,
.fly-center strong,
.fly-center i { position: relative; z-index: 1; display: block; }

.fly-center span {
  color: #c9ced5;
  font: 600 9px/1.2 Manrope, sans-serif;
  letter-spacing: .16em;
}

.fly-center strong {
  margin-top: 7px;
  color: white;
  font: 700 clamp(14px, 1.65vw, 22px)/1 Manrope, sans-serif;
  letter-spacing: -.055em;
}

.fly-center i {
  margin-top: 12px;
  color: #9ea5af;
  font: 500 8px/1.35 'DM Sans', sans-serif;
  font-style: normal;
}

.fly-node {
  z-index: 3;
  width: 116px;
  color: #f5f6f7;
  font-size: 0;
  line-height: 1;
  white-space: normal;
  pointer-events: none;
}

.fly-node b {
  position: relative;
  width: 54px;
  height: 54px;
  margin-bottom: 7px;
  border: 1px solid #ffffff30;
  background: linear-gradient(145deg, #242a32, #12161c);
  box-shadow: 0 10px 20px #0000003d, inset 0 1px 0 #ffffff13;
}

.fly-node b svg {
  width: 20px;
  height: 20px;
}

.fly-node .fly-step {
  top: -7px;
  right: -9px;
  width: 19px;
  height: 19px;
  border-color: #ffffff2b;
  background: #0c0f14;
  color: #bdc3cc;
  font-size: 7px;
  box-shadow: 0 3px 7px #00000055;
}

.fly-node-label {
  display: inline-block;
  min-width: 82px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c7cbd1;
  background: #11151b9e;
  box-shadow: 0 6px 14px #00000024;
  font: 600 10px/1.28 'DM Sans', sans-serif;
  letter-spacing: -.01em;
  transition: .35s ease;
}

.fly-node.active b,
.fly-node.fuel b {
  border-color: #ff5a5a;
  background: linear-gradient(145deg, #ff3333, #e70808);
  box-shadow: 0 0 0 8px #ff0d0d10, 0 12px 26px #ff0d0d45;
}

.fly-node.active .fly-node-label,
.fly-node.fuel .fly-node-label {
  border-color: #ff0d0d50;
  background: #ff0d0d1a;
  color: white;
}

.fly-node.active .fly-step,
.fly-node.fuel .fly-step {
  border-color: #fff;
  background: #fff;
  color: var(--red);
}

.fly-tag {
  bottom: -30px;
  left: 19%;
  width: 62%;
  padding: 9px 14px;
  border: 1px solid #ffffff14;
  border-radius: 999px;
  background: #ffffff08;
  color: #c7cbd1;
  font-size: 11px;
}

@media (max-width: 860px) {
  .fly-node { width: 96px; }
  .fly-node b { width: 46px; height: 46px; }
  .fly-node-label { min-width: 72px; padding: 4px 6px; font-size: 8px; }
  .fly-center { width: 34%; padding: 12px; }
  .fly-center strong { font-size: 16px; }
  .fly-center i { display: none; }
}

@media (max-width: 520px) {
  .fly-node { width: 66px; }
  .fly-node b { width: 34px; height: 34px; margin-bottom: 3px; }
  .fly-node b svg { width: 14px; height: 14px; }
  .fly-node-label { min-width: 58px; padding: 3px 4px; border-radius: 6px; font-size: 6.5px; }
  .fly-node .fly-step { top: -5px; right: -6px; width: 13px; height: 13px; font-size: 5px; }
  .fly-center { width: 38%; padding: 8px; }
  .fly-center span { font-size: 6px; }
  .fly-center strong { margin-top: 4px; font-size: 10px; }
  .fly-tag { bottom: -34px; left: 10%; width: 80%; font-size: 9px; }
}
+
/* Final flywheel refinement: the motion is the hero; the steps are luminous waypoints. */
.orbit-base {
  stroke: #ffffff28;
  stroke-width: 1.25;
}

.orbit-progress {
  stroke-width: 2.4;
  filter: drop-shadow(0 0 5px #ff0d0d70);
}

.orbit-inner {
  stroke-width: 1;
  stroke-dasharray: 1 12;
}

.orbit-ticks {
  stroke-width: 1;
  stroke-dasharray: 1 13;
  stroke: #ffffff1d;
}

.fly-center {
  width: 33%;
  padding: 18px;
  border-color: #ffffff24;
  background: radial-gradient(circle at 35% 25%, #20242b, #0b0d11 72%);
  box-shadow: 0 0 0 10px #ffffff04, 0 24px 55px #00000042, inset 0 1px 0 #ffffff13;
}

.fly-center:before {
  inset: 15px;
  border-color: #ffffff18;
}

.fly-center span {
  color: #d7dbe0;
  font-size: 10px;
  letter-spacing: .19em;
}

.fly-center strong {
  margin-top: 8px;
  font-size: clamp(17px, 1.9vw, 25px);
  letter-spacing: -.06em;
}

.fly-node {
  width: 124px;
}

.fly-node b {
  width: 29px;
  height: 29px;
  margin: 0 auto 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #d1d6dd;
  transition: color .35s ease, transform .45s var(--ease), filter .35s ease;
}

.fly-node b svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.55;
}

.fly-node .fly-step { display: none; }

.fly-node-label {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #d7dbe0;
  font: 600 12.5px/1.26 Manrope, sans-serif;
  letter-spacing: -.035em;
  transition: color .35s ease, text-shadow .35s ease;
}

.fly-node.active b,
.fly-node.fuel b {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #ff3030;
  filter: drop-shadow(0 0 7px #ff0d0d90);
  transform: scale(1.22);
}

.fly-node.active .fly-node-label,
.fly-node.fuel .fly-node-label {
  border: 0;
  background: transparent;
  color: white;
  text-shadow: 0 0 18px #ff0d0d60;
}

.fly-tag { display: none; }

@media (max-width: 860px) {
  .fly-node { width: 100px; }
  .fly-node b { width: 24px; height: 24px; margin-bottom: 7px; }
  .fly-node b svg { width: 24px; height: 24px; }
  .fly-node-label { font-size: 10px; }
}

@media (max-width: 520px) {
  .fly-node { width: 70px; }
  .fly-node b { width: 18px; height: 18px; margin-bottom: 4px; }
  .fly-node b svg { width: 18px; height: 18px; }
  .fly-node-label { font-size: 7px; line-height: 1.2; }
  .fly-center { width: 36%; }
  .fly-center span { font-size: 6px; }
  .fly-center strong { font-size: 11px; }
}
/* Hero report preview */
.hero-top{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:start;gap:clamp(40px,6vw,110px)}
.hero-copy .hero-intro{padding:0;max-width:700px;margin-top:28px}.hero-copy .hero-intro .lead{font-size:18px;line-height:1.7}.hero-offer{margin-top:18px;font-size:18px;line-height:1.5}.hero-copy .btn{margin-top:25px}.hero-benefits{display:grid;gap:8px;margin-top:22px;color:var(--muted);font-size:13px}.report-preview{margin-top:4px;background:#fff;border:1px solid #d8d3ca;border-radius:18px;padding:25px;box-shadow:0 24px 70px #1b17120e;transform:rotate(1.5deg)}.report-topline{display:flex;justify-content:space-between;border-bottom:1px solid #ded9d0;padding-bottom:10px;color:#777;font:600 10px/1.2 Manrope;letter-spacing:.08em}.report-topline b{color:#1a1a1a}.report-title{margin-top:22px;font:700 clamp(21px,2.1vw,31px)/1.08 Georgia,serif;color:#1e1b18}.report-title em{font-size:.62em;color:#d85b25;font-style:normal}.report-name{margin-top:18px;font:600 15px Manrope;color:#403b35}.report-metrics{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border:1px solid #d9d2c6}.report-metrics>div{text-align:center;padding:18px 10px;background:#faf7f0}.report-metrics>div+div{border-left:1px solid #d9d2c6;background:#fff6d8}.report-metrics small{display:block;color:#c45b2e;font:700 10px Manrope;letter-spacing:.05em}.report-metrics strong{display:block;margin:7px 0;font:700 34px Georgia;color:#191817}.report-metrics span{font:600 10px Manrope;color:#68615a}.report-footer{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #d9d2c6;border-top:0;text-align:center;padding:12px 5px;font:700 20px Georgia}.report-footer span+span{border-left:1px solid #d9d2c6}.report-footer small{font:600 10px Manrope;color:#d85b25;text-transform:uppercase}.report-verdict{margin-top:16px;padding:13px 15px;border-left:4px solid #e2ac2c;background:#fff6df;font:13px/1.45 Georgia;color:#3b342a}.report-verdict b{color:#d39a18;font:700 11px Manrope;letter-spacing:.06em}
@media(max-width:860px){.hero-top{grid-template-columns:1fr;gap:38px}.report-preview{max-width:620px;width:100%;margin:0 auto;transform:none}.hero-copy .hero-intro{margin-top:22px}.hero-copy .hero-intro .lead{font-size:16px}.hero-offer{font-size:17px}}
@media(max-width:520px){.report-preview{padding:18px;border-radius:14px}.report-title{margin-top:17px;font-size:24px}.report-metrics strong{font-size:28px}.report-footer{font-size:17px}.report-verdict{font-size:12px}}