/* ==========================================================================
   IoT4W — sito v2
   Temi per ambito: acqua (blu/ciano, chiaro) · smartcity (verdi, chiaro)
   · industria (grafite scuro, accento ambra). Il logo resta sempre blu.
   ========================================================================== */
:root {
  --brand: #2872B6;
  --brand-600: #1F5F9C;
  --cyan: #5CBCE2;

  --bg: #F4F8FB;
  --bg-alt: #EAF2F8;
  --surface: #FFFFFF;
  --surface-2: #F3F8FC;
  --ink: #0C2742;
  --ink-2: #3D5671;
  --ink-3: #5A728C;
  --line: #D6E2ED;
  --line-2: #C3D3E2;

  --accent: #2872B6;
  --accent-600: #1F5F9C;
  --accent-ink: #1F65A6;
  --accent-2: #5CBCE2;
  --accent-2-ink: #0D7BA4;
  --accent-rgb: 40, 114, 182;
  --accent-2-rgb: 92, 188, 226;
  --on-accent: #FFFFFF;
  --grad-a: #1F5F9C;
  --grad-b: #2A8CC6;
  --signal: #1BA8DC;
  --twin-glow: rgba(92, 188, 226, .45);

  --ok: #1E9E6A;
  --warn: #F29E0B;
  --warn-ink: #A85A06;
  --warn-rgb: 242, 158, 11;
  --danger: #DC3F45;

  --glass: rgba(255, 255, 255, .74);
  --glass-line: rgba(var(--accent-rgb), .16);
  --pill-bg: rgba(255, 255, 255, .92);
  --shadow-sm: 0 1px 2px rgba(12, 39, 66, .06), 0 4px 14px rgba(12, 39, 66, .06);
  --shadow-md: 0 2px 6px rgba(12, 39, 66, .06), 0 18px 44px rgba(12, 39, 66, .10);
  --footer: #0C2742;

  --radius: 18px;
  --f-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --nav-h: 72px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Smart City: palette di verdi ---------- */
body[data-area="smartcity"] {
  --bg: #F3F8F4;
  --bg-alt: #E5F1E9;
  --surface: #FFFFFF;
  --surface-2: #F1F8F3;
  --ink: #0E2A1D;
  --ink-2: #375849;
  --ink-3: #557465;
  --line: #D2E5D9;
  --line-2: #BCD7C6;
  --accent: #1F8A5B;
  --accent-600: #187249;
  --accent-ink: #18744C;
  --accent-2: #4CC38A;
  --accent-2-ink: #157048;
  --accent-rgb: 31, 138, 91;
  --accent-2-rgb: 76, 195, 138;
  --grad-a: #187249;
  --grad-b: #2FA36E;
  --signal: #2FBF7F;
  --twin-glow: rgba(47, 191, 127, .45);
  --footer: #0E2A1D;
}

/* ---------- Industria: grafite scuro con accento ambra ---------- */
body[data-area="industria"] {
  --bg: #0E141B;
  --bg-alt: #131C26;
  --surface: #17212C;
  --surface-2: #1B2632;
  --ink: #E8EEF4;
  --ink-2: #B3C0CD;
  --ink-3: #8C9CAE;
  --line: #26323F;
  --line-2: #354352;
  --accent: #F5A524;
  --accent-600: #E08E0B;
  --accent-ink: #F6B44A;
  --accent-2: #FFC861;
  --accent-2-ink: #FFC861;
  --accent-rgb: 245, 165, 36;
  --accent-2-rgb: 255, 200, 97;
  --on-accent: #1A1206;
  --grad-a: #F5A524;
  --grad-b: #FFD27A;
  --signal: #F5A524;
  --twin-glow: rgba(245, 165, 36, .45);
  --warn: #FF6B5E;
  --warn-ink: #FF8C82;
  --warn-rgb: 255, 107, 94;
  --ok: #3DD68C;
  --glass: rgba(23, 33, 44, .82);
  --glass-line: rgba(245, 165, 36, .18);
  --pill-bg: rgba(23, 33, 44, .94);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 44px rgba(0, 0, 0, .35);
  --footer: #070B10;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; }
p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--bg); }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 32px; }
@media (max-width: 640px) { .container { padding-inline: 16px; } }

/* ---------- transizione tra pagine ---------- */
html.is-wiping body::after { content: ""; position: fixed; inset: 0; z-index: 300; background: var(--wipe, #fff); }
.page-wipe { position: fixed; inset: 0; z-index: 300; pointer-events: none; }

/* ---------- tipografia ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.hero .eyebrow::before, .home-hero .eyebrow::before { display: none; }
.eyebrow-warn { color: var(--warn-ink); }
.display { font-size: clamp(2.6rem, 5.4vw, 4.75rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
.grad { background: linear-gradient(100deg, var(--grad-a) 10%, var(--grad-b) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h2 { font-size: clamp(2rem, 3.8vw, 3.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--ink-2); max-width: 36em; }
.section-sub { font-size: 1.1rem; color: var(--ink-2); max-width: 40em; }
.mono-k { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .28); }
.btn-primary:hover { background: var(--accent-600); }
.btn-ghost { background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn-whatsapp { background: #167647; color: #fff; border-color: #167647; }
.btn-whatsapp:hover { background: #115d38; color: #fff; border-color: #115d38; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .92rem; }

.glass {
  background: var(--glass); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow-md);
}

/* ---------- navigazione ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.is-scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--line); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { height: 44px; width: auto; }
.brand-name { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.area-switch { display: flex; padding: 4px; gap: 2px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 75%, transparent); }
.area-switch a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: .84rem; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: background-color .2s, color .2s; white-space: nowrap; }
.area-switch a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.area-switch a:hover { color: var(--ink); background: rgba(var(--accent-rgb), .08); }
.area-switch a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.area-switch a[data-go-area="acqua"] { --dot: #2872B6; }
.area-switch a[data-go-area="industria"] { --dot: #F5A524; }
.area-switch a[data-go-area="smartcity"] { --dot: #2FA36E; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { padding: 10px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--ink); background: rgba(var(--accent-rgb), .08); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: pointer; position: relative; }
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s; }
.nav-toggle span:first-child { top: 16px; }
.nav-toggle span:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
.nav-mobile { display: grid; gap: 4px; padding: 8px 16px 20px; background: color-mix(in srgb, var(--bg) 97%, transparent); border-bottom: 1px solid var(--line); }
.nav-mobile[hidden] { display: none; }
.nav-mobile a:not(.btn) { padding: 12px 8px; color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line); }
.nav-mobile .area-switch { margin: 6px 0 4px; justify-content: space-between; }
.nav-mobile .area-switch a { border-bottom: 0; padding: 8px 10px; flex: 1; justify-content: center; }
.nav-mobile .btn { margin-top: 10px; }
@media (max-width: 1180px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }
@media (max-width: 980px) {
  .nav-inner > .area-switch, .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- hero delle onepage ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 28px) 0 64px; overflow: hidden;
  background:
    radial-gradient(60% 55% at 78% 40%, rgba(var(--accent-2-rgb), .20), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(var(--accent-rgb), .08), transparent 70%),
    var(--bg);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(30deg, rgba(var(--accent-rgb), .06) 1px, transparent 1px), linear-gradient(150deg, rgba(var(--accent-rgb), .06) 1px, transparent 1px);
  background-size: 46px 26.6px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent 80%);
  mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent 80%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 32px; }
.hero-copy { display: grid; gap: 24px; justify-items: start; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(30, 158, 106, .16); animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 7px rgba(30, 158, 106, .05); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-domains { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 4px 0 0; }
.hero-domains li { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
.hero-visual { position: relative; aspect-ratio: 1.12; width: 100%; }
.hero-visual .scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-chip { position: absolute; display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; min-width: 168px; animation: bob 6s ease-in-out infinite; }
.hero-chip b { font-size: .98rem; font-weight: 700; color: var(--ink); }
.chip-k { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chip-s { font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.chip-s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-s.ok { color: var(--ok); }
.chip-s.warn { color: var(--warn-ink); }
.chip-a { left: 0; top: 56%; }
.chip-b { right: 2%; top: 70%; animation-delay: -2s; }
.chip-c { right: 0; top: 34%; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.hero-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.hero-scroll span { width: 1px; height: 26px; background: linear-gradient(var(--accent), transparent); animation: drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 640px; margin-inline: auto; }
  .hero-scroll { display: none; }
}
@media (max-width: 640px) {
  .hero-chip { min-width: 0; max-width: 46%; padding: 9px 12px; }
  .hero-chip b { font-size: .85rem; }
  .chip-b { display: none; }
  .chip-c { top: 42%; }
}

/* ==========================================================================
   HOME — scelta dell'ambito
   ========================================================================== */
.home-hero {
  position: relative; min-height: 100svh; overflow: hidden;
  padding: calc(var(--nav-h) + clamp(4px, 1.5vh, 24px)) 0 clamp(12px, 2.5vh, 36px);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(45% 50% at 20% 85%, rgba(47, 163, 110, .10), transparent 70%),
    radial-gradient(45% 50% at 55% 25%, rgba(92, 188, 226, .18), transparent 70%),
    radial-gradient(40% 50% at 90% 75%, rgba(245, 165, 36, .08), transparent 70%),
    var(--bg);
}
/* l'hero della home si allarga sugli schermi grandi e si adatta anche all'altezza */
.home-hero .container, body[data-area="home"] .nav-inner { max-width: 1960px; padding-inline: clamp(16px, 3vw, 56px); }
.home-grid { display: grid; grid-template-columns: minmax(370px, .62fr) minmax(0, 1.38fr); gap: clamp(16px, 2.5vw, 56px); align-items: center; }
.home-copy { display: grid; gap: clamp(8px, 1.6vh, 18px); justify-items: start; }
.home-copy .display { font-size: clamp(1.75rem, min(2.7vw, 5.6vh), 4rem); }
.home-copy .lead { font-size: clamp(.92rem, min(.95vw, 2vh), 1.15rem); max-width: 30em; }
.area-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(6px, 1.1vh, 12px); width: 100%; }
.area-choice {
  --c: #2872B6; --c-rgb: 40, 114, 182; --c-bg: #FFFFFF; --c-ink: #0C2742; --c-ink-2: #3D5671;
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(10px, 1vw, 16px);
  padding: clamp(7px, 1.3vh, 14px) clamp(10px, 1vw, 16px); border-radius: 16px; text-decoration: none; color: var(--c-ink);
  background: var(--c-bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease-out), border-color .3s, box-shadow .3s, background-color .3s;
}
.area-choice[data-area-choice="industria"] { --c: #F5A524; --c-rgb: 245, 165, 36; --c-bg: #141C25; --c-ink: #E8EEF4; --c-ink-2: #AEBBC8; border-color: #26323F; }
.area-choice[data-area-choice="smartcity"] { --c: #1F8A5B; --c-rgb: 31, 138, 91; }
.area-choice:hover, .area-choice.is-active, .area-choice:focus-visible { transform: translateX(6px); border-color: var(--c); box-shadow: 0 10px 30px rgba(var(--c-rgb), .22); }
.area-num { width: clamp(32px, 4.6vh, 44px); height: clamp(32px, 4.6vh, 44px); border-radius: 12px; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: .8rem; color: var(--c); background: rgba(var(--c-rgb), .12); }
.area-text { display: grid; gap: 1px; }
.area-text b { font-size: clamp(1rem, min(1.1vw, 2.4vh), 1.3rem); font-weight: 800; letter-spacing: -0.02em; }
.area-text span { font-size: clamp(.78rem, min(.8vw, 1.8vh), .95rem); color: var(--c-ink-2); }
.area-go { width: clamp(30px, 4.4vh, 42px); height: clamp(30px, 4.4vh, 42px); border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; transition: transform .35s var(--ease-out); }
.area-choice[data-area-choice="industria"] .area-go { color: #1A1206; }
.area-choice:hover .area-go, .area-choice.is-active .area-go { transform: translateX(3px) rotate(-45deg); }
.area-go svg { width: 18px; height: 18px; }
.worlds-visual { position: relative; width: 100%; aspect-ratio: 1.35; max-height: calc(100svh - var(--nav-h) - 40px); margin-inline: auto; }
.worlds-visual .scene { position: absolute; inset: 0 0 56px 0; width: 100%; height: calc(100% - 56px); overflow: visible; }
.district { cursor: pointer; transition: opacity .45s var(--ease-out), filter .45s; }
.worlds-visual[data-active] .district:not(.is-active) { opacity: .28; filter: saturate(.3); }
.worlds-visual[data-active] .link:not(.is-active) { opacity: .15; }
.worlds-visual[data-active] .beacon:not(.is-active) { opacity: .3; }
.link.area-acqua .link-packets, .beacon.area-acqua .beacon-dot { stroke: #2872B6; }
.link.area-industria .link-packets { stroke: #F5A524; }
.link.area-smartcity .link-packets { stroke: #1F8A5B; }
.beacon.area-acqua .beacon-dot { fill: #2872B6; }
.beacon.area-acqua .beacon-ring { stroke: #2872B6; }
.beacon.area-industria .beacon-dot { fill: #F5A524; }
.beacon.area-industria .beacon-ring { stroke: #F5A524; }
.tag.area-tag .tag-pill { min-width: 112px; }
.tag.area-tag.is-active .tag-pill { border-color: var(--c, var(--accent)); box-shadow: 0 8px 24px rgba(12, 39, 66, .16); }
.tag.area-acqua { --c: #2872B6; }
.tag.area-industria { --c: #F5A524; }
.tag.area-smartcity { --c: #1F8A5B; }
.tag.area-tag small { color: var(--c) !important; }
.tag.area-tag .tag-dot { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.tag.area-tag .tag-line { background: linear-gradient(var(--c), transparent) !important; }
@media (max-width: 1080px) {
  .home-grid { grid-template-columns: 1fr; gap: 12px; }
  .worlds-visual { order: -1; max-width: 860px; max-height: none; }
  .home-copy .display { font-size: clamp(1.9rem, 6vw, 3rem); }
  .home-copy .eyebrow { display: none; }
  .area-text b { font-size: 1.1rem; }
  .area-text span { font-size: .85rem; }
}

.system { padding: 120px 0; background: var(--surface); }
.sys-steps { list-style: none; margin: 0 auto; padding-block: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.sys-step { position: relative; padding: 20px 22px 26px; border-radius: 22px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 10px; }
.sys-step svg { width: 100%; height: auto; aspect-ratio: 1.6; overflow: visible; }
.sys-step h3 { font-size: 1.3rem; font-weight: 800; }
.sys-step p { color: var(--ink-2); }
.sys-n { font-family: var(--f-mono); font-size: .75rem; color: var(--accent-ink); letter-spacing: .1em; }
.sys-step:not(:last-child)::after { content: ""; position: absolute; top: 34%; right: -16px; width: 12px; height: 12px; border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2); transform: rotate(45deg); }
.sys-step.gw-on .gw-glow { animation: glow 1.4s ease-in-out infinite; }
@media (max-width: 900px) { .sys-steps { grid-template-columns: 1fr; } .sys-step::after { display: none; } }

.area-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.area-card { --c: #2872B6; position: relative; display: grid; gap: 12px; padding: 24px; border-radius: 22px; text-decoration: none; color: #0C2742; background: linear-gradient(160deg, #FFFFFF, #EAF2F8); border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s; }
.area-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.area-card.is-ind { --c: #F5A524; color: #E8EEF4; background: linear-gradient(160deg, #1B2632, #0E141B); border-color: #26323F; }
.area-card.is-city { --c: #1F8A5B; background: linear-gradient(160deg, #FFFFFF, #E3F1E8); }
.area-card .app-k { color: var(--c); }
.area-card h3 { font-size: 1.5rem; font-weight: 800; }
.area-card p { opacity: .82; }
.area-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.area-card li { font-size: .78rem; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.area-card .more { font-weight: 700; color: var(--c); }
@media (max-width: 900px) { .area-cards { grid-template-columns: 1fr; } }

/* ---------- sfida / soluzione ---------- */
.statement { padding: 140px 0 120px; background: linear-gradient(var(--bg), var(--surface)); }
.statement-inner { display: grid; gap: 96px; }
.statement-block { display: grid; gap: 20px; max-width: 1060px; }
.statement-block:nth-child(2) { justify-self: end; }
.statement-text { font-size: clamp(1.7rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; color: var(--ink); }
.statement-text .w { opacity: .14; transition: opacity .2s linear; }
.no-motion .statement-text .w { opacity: 1; }

.section-head { display: grid; gap: 18px; justify-items: start; padding-top: 120px; padding-bottom: 40px; }
@media (max-width: 640px) { .section-head { padding-top: 88px; } }

/* ==========================================================================
   STORIE IN SCROLL (sezioni bloccate)
   ========================================================================== */
.story { background: var(--surface); }
.story-case { background: linear-gradient(var(--surface), var(--bg)); }
.story-pin { position: relative; }
.motion .story-pin { height: 100vh; height: 100svh; overflow: hidden; }
.story-grid { height: 100%; display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.5fr); gap: 40px; align-items: center; padding-top: calc(var(--nav-h) + 8px); padding-bottom: 24px; }
.story-copy { display: grid; gap: 28px; align-content: center; }
.story-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.story-nav button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  transition: color .25s, border-color .25s, background-color .25s;
}
.story-nav button span { color: var(--accent-ink); font-weight: 600; }
.story-nav button:hover { border-color: var(--accent); color: var(--ink); }
.story-nav li.is-active button { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.story-nav li.is-active button span { color: var(--accent-2); }
body[data-area="industria"] .story-nav li.is-active button span { color: #B4661A; }
.story-case .story-nav li.is-active button span { color: #FFC56B; }
body[data-area="industria"] .story-case .story-nav li.is-active button span { color: #C2362C; }
.story-nav li.is-done button { color: var(--ink-2); }
.story-steps { display: grid; }
.story-step { display: grid; gap: 14px; align-content: start; }
.step-num { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; color: var(--accent-ink); letter-spacing: .1em; }
.story-case .step-num { color: var(--warn-ink); }
.story-step h3 { font-size: clamp(1.6rem, 2.6vw, 2.35rem); font-weight: 800; letter-spacing: -0.03em; }
.story-step p { font-size: 1.06rem; color: var(--ink-2); max-width: 30em; }
.signal-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.signal-list li { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em; padding: 6px 10px; border-radius: 8px; background: rgba(var(--accent-2-rgb), .14); color: var(--accent-2-ink); border: 1px solid rgba(var(--accent-2-rgb), .35); }
.story-progress { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; max-width: 420px; }
.story-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform-origin: left; transform: scaleX(0); }
.story-case .story-progress span { background: linear-gradient(90deg, var(--accent), var(--warn)); }
.story-stage { position: relative; height: 100%; min-height: 420px; }
.story-stage .scene {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 92%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.motion .story-steps > * { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; }
.motion .story-steps > .is-active { opacity: 1; transform: none; pointer-events: auto; }
.no-motion .story-steps { gap: 36px; }
.no-motion .story-nav, .no-motion .story-progress { display: none; }
.no-motion .story-grid { align-items: start; }
.no-motion .story-stage { height: 70vh; position: sticky; top: calc(var(--nav-h) + 16px); }
@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; padding-top: calc(var(--nav-h) + 4px); padding-bottom: 12px; }
  .motion .story-copy { order: 2; align-content: start; gap: 12px; }
  .motion .story-stage { order: 1; min-height: 0; }
  .story-nav button { padding: 0 10px; min-height: 32px; font-size: 0; gap: 0; }
  .story-nav button span { font-size: .72rem; }
  .story-step h3 { font-size: 1.35rem; }
  .story-step p { font-size: .95rem; }
  .signal-list { display: none; }
  .no-motion .story-stage { position: relative; top: 0; height: 60vh; }
}

/* ---------- etichette sopra le scene ---------- */
.tags { position: absolute; inset: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .35s var(--ease-out); }
.tag.is-on { opacity: 1; }
.tag-dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .2); }
.tag-line { position: absolute; left: -0.5px; bottom: 4px; width: 1px; height: 30px; background: linear-gradient(transparent, var(--accent)); }
.tag-pill {
  position: absolute; bottom: 34px; left: 0; white-space: nowrap; padding: 6px 11px; border-radius: 9px;
  font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .02em; color: var(--ink);
  background: var(--pill-bg); border: 1px solid var(--glass-line); box-shadow: var(--shadow-sm);
  transform: translate(-50%, 6px); transition: transform .45s var(--ease-out);
}
.tag.is-on .tag-pill { transform: translate(-50%, 0); }
.tag.dir-r .tag-pill { transform: translate(6px, 6px); }
.tag.dir-r.is-on .tag-pill { transform: translate(6px, 0); }
.tag.dir-l .tag-pill { transform: translate(calc(-100% - 6px), 6px); }
.tag.dir-l.is-on .tag-pill { transform: translate(calc(-100% - 6px), 0); }
.tag.down .tag-line { bottom: auto; top: 4px; background: linear-gradient(var(--accent), transparent); }
.tag.down .tag-pill { bottom: auto; top: 34px; }
.tag.warn .tag-dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(var(--warn-rgb), .22); }
.tag.warn .tag-line { background: linear-gradient(transparent, var(--warn)); }
.tag.warn.down .tag-line { background: linear-gradient(var(--warn), transparent); }
.tag.warn .tag-pill { border-color: rgba(var(--warn-rgb), .5); color: var(--warn-ink); background: color-mix(in srgb, var(--pill-bg) 88%, rgb(var(--warn-rgb))); }
.tag.data .tag-pill { padding: 9px 13px; display: grid; gap: 1px; font-family: var(--f-sans); border-radius: 12px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tag.data .tag-pill small { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2-ink); }
.tag.data .tag-pill b { font-size: .95rem; font-weight: 700; }
.tag.data .tag-dot { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(var(--accent-2-rgb), .25); }
.tag.data .tag-line { background: linear-gradient(transparent, var(--accent-2)); }
.tag.data.down .tag-line { background: linear-gradient(var(--accent-2), transparent); }
@media (max-width: 640px) {
  .tag.hide-sm { display: none; }
  .tag.flip-sm .tag-pill { transform: translate(calc(-100% - 6px), 6px); }
  .tag.flip-sm.is-on .tag-pill { transform: translate(calc(-100% - 6px), 0); }
  .tag.flip-r-sm .tag-pill { transform: translate(6px, 6px); }
  .tag.flip-r-sm.is-on .tag-pill { transform: translate(6px, 0); }
  .tag-pill { font-size: .64rem; padding: 4px 8px; bottom: 24px; }
  .tag-line { height: 20px; }
  .tag.down .tag-pill { top: 24px; }
  .tag.data .tag-pill b { font-size: .8rem; }
}

/* ---------- scheda screenshot / interfaccia (passo 4) ---------- */
.shot-card { position: absolute; right: 0; bottom: 6%; width: min(560px, 74%); margin: 0; border-radius: 14px; overflow: hidden; opacity: 0; transform: translateY(24px) scale(.97); pointer-events: none; }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--glass-line); background: color-mix(in srgb, var(--surface) 85%, transparent); }
.shot-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.shot-bar span { margin-left: 8px; font-family: var(--f-mono); font-size: .68rem; color: var(--ink-3); }
.shot-card img { width: 100%; height: auto; }
@media (max-width: 980px) { .shot-card { width: 92%; right: 4%; bottom: 2%; } }

/* interfaccia illustrativa (stesso linguaggio della piattaforma) */
.ui-mock { display: grid; grid-template-rows: auto 1fr; font-size: .74rem; color: #0C2742; background: #EEF2F6; }
.ui-kpis { display: flex; gap: 6px; padding: 8px; background: #F7F9FB; border-bottom: 1px solid #DCE3EA; flex-wrap: wrap; }
.ui-kpi { padding: 4px 8px; border: 1px solid #D3DCE5; border-radius: 6px; background: #fff; display: grid; line-height: 1.2; }
.ui-kpi small { font-size: .58rem; color: #5A728C; }
.ui-kpi b { font-size: .78rem; }
.ui-kpi.warn { border-color: #F2B45C; background: #FFF6E8; }
.ui-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 10px; }
.ui-syn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; align-content: start; }
.ui-box { border: 1.5px solid #9DB0C3; border-radius: 6px; background: #F4F7FA; padding: 6px 8px; display: grid; gap: 2px; }
.ui-box b { font-size: .72rem; }
.ui-box span { font-size: .66rem; color: #5A728C; display: inline-flex; align-items: center; gap: 5px; }
.ui-box span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st, #9DB0C3); }
.ui-box.on { border-color: #2872B6; --st: #1E9E6A; }
.ui-box.idle { --st: #9DB0C3; }
.ui-side { background: #fff; border: 1px solid #DCE3EA; border-radius: 6px; padding: 8px; display: grid; gap: 6px; align-content: start; }
.ui-side svg { width: 100%; height: 56px; }
.ui-row { display: flex; justify-content: space-between; border-bottom: 1px solid #EDF1F5; padding-bottom: 3px; font-size: .66rem; }

/* ---------- elementi SVG animati ---------- */
.scene text { font-family: var(--f-mono); }

/* Finestra web delle sole scene iniziali, ancorata alla lastra isometrica. */
.pf-browser {
  --ui-bg: #FFFFFF; --ui-bar: #F4F8FC; --ui-panel: #FAFCFE; --ui-line: #D9E5EF;
  --ui-ink: #173C5C; --ui-muted: #668099; --ui-accent: #2872B6;
  --ui-tint: #E9F3FA; --ui-map: #EEF4F8; --ui-block: #DDE8F0; --ui-road: #FFFFFF;
  pointer-events: none; filter: drop-shadow(0 8px 10px rgba(12, 39, 66, .15));
}
.pf-browser[data-view="smartcity"] {
  --ui-bar: #F3F9F5; --ui-panel: #FBFDFC; --ui-line: #D3E6DB;
  --ui-ink: #173E2B; --ui-muted: #638270; --ui-accent: #1F8A5B;
  --ui-tint: #E7F5EC; --ui-map: #EDF6F0; --ui-block: #D6E9DD;
}
.pf-browser[data-view="industria"] {
  --ui-bg: #17212C; --ui-bar: #202C39; --ui-panel: #1B2734; --ui-line: #354454;
  --ui-ink: #E7EEF5; --ui-muted: #99ACBF; --ui-accent: #F5A524;
  --ui-tint: #3C3226; --ui-map: #1B2734; --ui-block: #344555; --ui-road: #475A6C;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3));
}
.pf-ui-frame { fill: var(--ui-bg); fill-opacity: .97; stroke: var(--ui-line); stroke-width: 1.4; }
.pf-ui-bar, .pf-ui-rail { fill: var(--ui-bar); }
.pf-ui-rule { stroke: var(--ui-line); stroke-width: .8; }
.pf-ui-browser-dot, .pf-ui-muted-dot { fill: var(--ui-muted); opacity: .45; }
.pf-ui-title { font-size: 8px; font-weight: 500; fill: var(--ui-muted); }
.pf-ui-caption { font-size: 6.8px; fill: var(--ui-muted); }
.pf-ui-nav { font-size: 6.5px; font-weight: 500; fill: var(--ui-ink); }
.pf-ui-value { font-size: 12px; font-weight: 600; fill: var(--ui-ink); }
.pf-ui-label { font-size: 8px; fill: var(--ui-ink); }
.pf-ui-panel, .pf-ui-plot { fill: var(--ui-panel); stroke: var(--ui-line); stroke-width: .7; }
.pf-ui-selected { fill: var(--ui-tint); }
.pf-ui-placeholder { fill: var(--ui-line); }
.pf-ui-status { fill: #26A675; }
.pf-ui-accent-dot, .pf-ui-meter-fill { fill: var(--ui-accent); }
.pf-ui-trend { fill: none; stroke: var(--ui-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-ui-live { animation: pf-data-received 2.4s ease-in-out infinite; }
@keyframes pf-data-received { 50% { opacity: .35; } }
.pf-ui-machine { fill: var(--ui-bar); stroke: var(--ui-muted); stroke-width: 1; }
.pf-ui-machine-on { fill: var(--ui-tint); stroke: var(--ui-accent); stroke-width: 1.3; }
.pf-ui-fan { fill: none; stroke: var(--ui-muted); stroke-width: .8; }
.pf-ui-machine-line { stroke: var(--ui-accent); stroke-width: .9; }
.pf-ui-pipe { stroke: var(--ui-accent); stroke-width: 3; opacity: .45; }
.pf-ui-meter-track { fill: var(--ui-line); }
.pf-ui-map { fill: var(--ui-map); stroke: var(--ui-line); stroke-width: .7; }
.pf-ui-map-road { stroke: var(--ui-road); stroke-width: 8; fill: none; }
.pf-ui-map-block { fill: var(--ui-block); stroke: var(--ui-line); stroke-width: .6; }
.pf-ui-map-dot.tone-acqua, .pf-ui-map-halo.tone-acqua { fill: #2872B6; }
.pf-ui-map-dot.tone-industria, .pf-ui-map-halo.tone-industria { fill: #F5A524; }
.pf-ui-map-dot.tone-smartcity, .pf-ui-map-halo.tone-smartcity { fill: #1F8A5B; }
.pf-ui-map-halo { opacity: .14; }
.pf-browser-tether { pointer-events: none; }
.pf-browser-reflection { fill: var(--accent); opacity: .07; }
.pf-browser-uplink { fill: none; stroke: var(--accent); stroke-width: .8; stroke-dasharray: 1.5 2.5; opacity: .5; }

.pump-tag { font-size: 6px; font-weight: 600; fill: var(--ink-2); }
.is-twin .pump-tag { fill: #2B9FD2; }
.pump-ring { stroke: #A8BACB; stroke-width: 1; stroke-dasharray: 4 3; transition: stroke .3s; }
.pump-ring.is-on { stroke: #1FB27A; stroke-width: 1.6; stroke-dasharray: 10 6; animation: spin-dash 1.1s linear infinite; }
.is-twin .pump-ring.is-on { stroke: var(--signal); }
.station.alarm .pump-ring.is-on { stroke: var(--warn); }
.room.alarm .pump-ring.is-on { stroke: #1FB27A; }
@keyframes spin-dash { to { stroke-dashoffset: -100; } }

.flow { stroke-dasharray: 3 7; animation: flow 1.4s linear infinite; }
.flow-out, .flow-air { opacity: 0; transition: opacity .4s; }
.pumping .flow-out, .mini-scene .flow-out, .loading .flow-air { opacity: 1; }
.flow-air { animation-duration: .9s; }
@keyframes flow { to { stroke-dashoffset: -100; } }

.pulse { stroke: var(--signal); stroke-dasharray: .8 13; stroke-linecap: round; opacity: 0; transition: opacity .4s; animation: flow 2.6s linear infinite; filter: url(#f-glow); }
[data-story="main"][data-step="2"] .is-real .pulse, [data-story="main"][data-step="3"] .is-real .pulse { opacity: 1; }
body[data-area="smartcity"] [data-story="main"][data-step="3"] .is-real .pulse { opacity: 0; }

.float-halo { fill: rgba(242, 158, 11, 0); stroke: none; }
.float.is-stuck .float-halo { fill: rgba(242, 158, 11, .28); stroke: var(--warn); stroke-width: 1; animation: halo 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.35); opacity: .55; } }
.stream { stroke-dasharray: 2 3; animation: flow 1s linear infinite; }

.radio path { opacity: 0; }
.story-pin[data-step="3"] .radio path, .story-pin[data-step="4"] .radio path, .story-pin[data-step="5"] .radio path, .hero .radio path { animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.gw-glow { opacity: 0; }
[data-story="main"][data-step="2"] .gw-glow, [data-story="main"][data-step="3"] .heat-cabinet .gw-glow { animation: glow 1.4s ease-in-out infinite; }
@keyframes glow { 50% { opacity: 1; } }
.led { animation: blink 1.2s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.wires { opacity: .4; }
[data-story="main"][data-step="2"] .wires { opacity: 1; stroke-dasharray: .05 .05; animation: flow-s 1s linear infinite; }
@keyframes flow-s { to { stroke-dashoffset: -.5; } }

.link-base { stroke: rgba(var(--accent-2-rgb), .6); stroke-width: 1.3; stroke-dasharray: 1.2 1.6; fill: none; }
.link-packets { stroke: var(--accent); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .4 19.6; animation: flow 3s linear infinite; }
.link.warn .link-packets { stroke: var(--warn); }
.link { transition: opacity .45s; }
.beacon { transition: opacity .45s; }
.beacon-dot { fill: #1FB27A; stroke: #fff; stroke-width: 1.2; }
.beacon-ring { fill: none; stroke: #1FB27A; stroke-width: 1; animation: ring 2.4s ease-out infinite; }
.beacon.warn .beacon-dot { fill: var(--warn); }
.beacon.warn .beacon-ring { stroke: var(--warn); }
body[data-area="industria"] .beacon-dot { fill: #F5A524; stroke: #0E141B; }
body[data-area="industria"] .beacon-ring { stroke: #F5A524; }
body[data-area="industria"] .beacon.warn .beacon-dot { fill: var(--warn); }
body[data-area="industria"] .beacon.warn .beacon-ring { stroke: var(--warn); }
@keyframes ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
.pf-dot { animation: twinkle 3s ease-in-out infinite; }
.pf-dot.warn { animation-duration: 1.2s; }
@keyframes twinkle { 50% { opacity: .45; } }

.is-twin .face, .is-twin .pipe path, .is-twin .cable { vector-effect: non-scaling-stroke; }
.is-twin { filter: drop-shadow(0 0 6px var(--twin-glow)); }

/* industria: compressori, manometro, perdita */
.comp-ring { stroke: #4F5E72; stroke-width: 1; stroke-dasharray: 4 3; }
.comp-ring.is-load { stroke: #F5A524; stroke-width: 1.6; stroke-dasharray: 10 6; animation: spin-dash .6s linear infinite; }
.comp-ring.is-unload { stroke: #8C9CAE; stroke-width: 1.2; stroke-dasharray: 8 8; animation: spin-dash 2.2s linear infinite; }
.station.alarm .comp-ring.is-load { stroke: var(--warn); }
.comp-led { fill: #4F5E72; }
.comp.is-load .comp-led { fill: #3DD68C; }
.comp.is-unload .comp-led { fill: #F5A524; }
.comp-bar { fill: #2C3846; }
.comp.is-load .comp-bar { fill: #F5A524; }
.needle { transition: transform .3s; }
.leak { opacity: 0; transition: opacity .4s; }
.has-leak .leak { opacity: 1; }
.leak path { animation: puff 1s ease-out infinite; }
.leak-dot { fill: none; stroke: var(--warn); stroke-width: 1; animation: halo 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes puff { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
.leak path { transform-box: fill-box; transform-origin: 0 100%; }
.flow-cool { opacity: 1; }

/* smart city: notte, lampioni, fontana, sensori */
.city .face, .city .road, .city .grass, .city .plaza, .city .lot, .city .win { transition: fill .7s; }
.lamp-glow, .lamp-pool { opacity: 0; transition: opacity .7s; }
.lamp-pool { fill: rgba(255, 214, 107, .35); }
.city.night .lamp-glow, .city.night .lamp-pool, .night-mini .lamp-glow, .night-mini .lamp-pool { opacity: 1; }
.city.night.line2-off .line-2 .lamp-glow, .city.night.line2-off .line-2 .lamp-pool { opacity: 0; }
.city.is-real.night .slab .face-top, .city.is-real.night .ground .grass { fill: #9FB8AA; }
.city.is-real.night .slab .face-left { fill: #6C8A7B; }
.city.is-real.night .slab .face-right { fill: #5E7C6D; }
.city.is-real.night .road { fill: #6E8579; }
.city.is-real.night .plaza, .city.is-real.night .lot { fill: #879F92; }
.city.is-real.night .bld .face-top { fill: #A9BEB2; }
.city.is-real.night .bld .face-left { fill: #8DA597; }
.city.is-real.night .bld .face-right { fill: #7A9384; }
.city.is-real.night .win { fill: #FFD66B; }
.city.is-real.night .tree circle:first-of-type { fill: #3F8F66; }
.smoke circle { fill: rgba(220, 230, 225, .9); opacity: 0; }
.heating .smoke circle { animation: smoke 2.1s ease-out infinite; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -18px) scale(1.6); } }
.smoke circle { transform-box: fill-box; transform-origin: center; }
.jet { stroke-dasharray: 6 4; opacity: 0; }
.fountain-on .jet { opacity: 1; animation: flow 1.2s linear infinite; }
.spot { transition: fill .4s; }
.spot.free { fill: #2FBF7F; }
.spot.busy { fill: #E5484D; }
.is-twin .spot.free { fill: #2FBF7F; }
.is-twin .spot.busy { fill: rgba(32, 166, 108, .25); }

/* ---------- caso guida ---------- */
.case-stage .scene { inset: 0 34% 26% 0; width: auto; height: auto; }
.case-chart { position: absolute; right: 0; bottom: 4%; width: min(560px, 62%); border-radius: var(--radius); padding: 16px 18px 14px; display: grid; gap: 10px; z-index: 2; }
.case-chart-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.case-chart-head b { display: block; font-size: 1.05rem; transition: color .3s; }
.case-state.is-on { color: var(--ok); }
.case-state.is-anom { color: var(--warn-ink); }
.case-level { text-align: right; }
.chart-wrap { position: relative; }
.chart { width: 100%; height: 150px; overflow: visible; }
.chart-grid line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-band { fill: rgba(12, 39, 66, .05); }
body[data-area="industria"] .chart-band { fill: rgba(0, 0, 0, .25); }
.chart-hist { fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: .8; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.chart-usual { fill: rgba(var(--accent-rgb), .10); }
.chart-anom { fill: rgba(var(--warn-rgb), .18); }
.chart-cursor { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.chart-marker { position: absolute; top: -2px; transform: translateX(6px); font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: .74rem; color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 18px; height: 0; border-top: 2.5px solid var(--accent); }
.chart-legend .lg-dash { border-top: 2px dashed var(--ink-3); }
.chart-legend .lg-anom { height: 10px; border: 0; background: rgba(var(--warn-rgb), .35); border-radius: 2px; }
.run-meter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.run-bar { position: relative; height: 8px; border-radius: 6px; background: var(--bg-alt); overflow: visible; }
.run-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 6px; background: var(--ok); transition: background-color .3s; }
.run-fill.is-anom { background: linear-gradient(90deg, var(--ok) 0 28%, var(--warn) 28%); }
.run-usual { position: absolute; left: 28%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 2px; }
.run-meter.night .run-usual { left: 6%; }
.run-meter.night .run-fill.is-anom { background: linear-gradient(90deg, var(--ok) 0 6%, var(--warn) 6%); }
.case-clock { font-family: var(--f-mono); font-weight: 600; color: var(--accent-ink); }

.case-phone { position: absolute; right: 2%; top: 2%; width: min(300px, 46%); z-index: 3; padding: 12px; border-radius: 22px; background: #0F2236; color: #fff; box-shadow: 0 30px 60px rgba(12, 39, 66, .28); border: 1px solid rgba(255, 255, 255, .1); opacity: 0; transform: translateY(-16px) scale(.96); }
.phone-top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: #93A9BE; padding: 2px 4px 10px; }
.phone-msg { background: #fff; color: #0C2742; border-radius: 14px; padding: 12px 14px; display: grid; gap: 6px; font-size: .86rem; line-height: 1.4; border-left: 4px solid #25B062; }
.phone-msg b { font-size: .82rem; }
.phone-hint { font-weight: 700; color: #A85A06; }
body[data-area="industria"] .phone-msg { border-left-color: #F5A524; }
body[data-area="industria"] .phone-hint { color: #B4342B; }

.case-file { position: absolute; right: 0; bottom: 4%; width: min(560px, 62%); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 10px; z-index: 4; opacity: 0; transform: translateY(24px); }
.file-head { display: grid; gap: 10px; }
.file-tabs { display: flex; gap: 6px; }
.file-tabs span { font-size: .78rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); }
.file-tabs .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.file-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: .84rem; }
.file-row.is-new { border-color: rgba(var(--warn-rgb), .55); box-shadow: inset 4px 0 0 var(--danger); }
.file-main { display: grid; }
.file-main small { color: var(--ink-3); font-size: .74rem; }
.file-date { font-family: var(--f-mono); font-size: .74rem; color: var(--ink-2); }
.pill { font-size: .72rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pill-open { border-color: var(--accent); color: var(--accent-ink); }
.pill-closed { color: var(--ink-3); }
.fineprint { padding-top: 18px; padding-bottom: 32px; font-size: .78rem; color: var(--ink-3); }
.no-motion .shot-card { display: none; }
.no-motion .case-stage { height: auto; position: relative; top: 0; display: grid; gap: 14px; }
.no-motion .case-stage .scene { position: relative; inset: auto; width: 100%; height: 46vh; }
.no-motion .case-chart, .no-motion .case-phone, .no-motion .case-file { position: relative; inset: auto; width: 100%; opacity: 1; transform: none; }
.no-motion .case-phone { max-width: 380px; }
@media (max-width: 980px) {
  .case-stage .scene { inset: 0 0 46% 0; }
  .case-chart { left: 0; right: 0; width: auto; bottom: 0; padding: 10px 12px; gap: 6px; }
  .chart { height: 84px; }
  .chart-legend { font-size: .66rem; gap: 10px; }
  .run-meter { display: none; }
  .case-phone { width: min(280px, 82%); right: 0; top: 0; }
  .case-file { left: 0; right: 0; width: auto; bottom: 0; padding: 10px 12px; }
  .file-row { grid-template-columns: 1fr auto; gap: 6px 10px; font-size: .78rem; }
  .file-row .file-date, .file-row > .pill:first-of-type { display: none; }
  .file-tabs { display: none; }
}

/* ---------- piattaforma ---------- */
.platform { background: var(--bg); padding-bottom: 120px; }
.pf-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.pf-caps { display: grid; gap: 14px; }
.cap { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease-out); }
.cap:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cap h3 { font-size: 1.15rem; font-weight: 700; }
.cap p { color: var(--ink-2); font-size: .95rem; }
.cap-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--accent-2-rgb), .16); color: var(--accent-ink); }
.cap-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-viewer { border-radius: 22px; padding: 14px; display: grid; gap: 12px; }
.pf-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--ink-2); transition: background-color .2s, color .2s, border-color .2s; }
.pf-tabs button:hover { border-color: var(--accent); color: var(--ink); }
.pf-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pf-panels { position: relative; border-radius: 14px; overflow: hidden; background: #E9EEF3; aspect-ratio: 2.1; }
.pf-panel { position: absolute; inset: 0; margin: 0; display: grid; animation: fade-in .45s var(--ease-out); }
.pf-panel[hidden] { display: none; }
.pf-panel img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pf-panel-duo { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; background: #EEF2F6; }
.pf-panel-duo img, .pf-panel-solo img { object-fit: contain; object-position: center; border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); }
.pf-panel-solo { padding: 14px; background: #EEF2F6; }
.pf-panel figcaption { position: absolute; left: 12px; bottom: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 8px 12px; border-radius: 10px; font-size: .84rem; color: #0C2742; background: rgba(255, 255, 255, .92); box-shadow: var(--shadow-sm); }
.pf-panel .ui-mock { height: 100%; }
.pf-note { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
@keyframes fade-in { from { opacity: 0; transform: scale(.99); } }
@media (max-width: 980px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); order: 2; }
  .pf-panels { aspect-ratio: 1.45; }
}
@media (max-width: 720px) {
  .pf-caps { grid-template-columns: 1fr; }
  .pf-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pf-tabs button { flex: none; }
  .pf-panel figcaption { font-size: .74rem; }
  .pf-panel-duo { grid-template-columns: 1fr; overflow: auto; }
}

/* ---------- segnalazioni (smart city) ---------- */
.alerts { background: var(--bg); padding-bottom: 120px; }
.alerts-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.alerts-summary { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 16px; padding: 26px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
.alerts-count { font-size: 4rem; font-weight: 800; line-height: 1; color: var(--accent-ink); letter-spacing: -0.04em; }
.alert-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.alert { --c: var(--accent); display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.alert-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.alert-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alert-body { display: grid; gap: 4px; }
.alert-meta { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.alert-body b { font-size: 1.02rem; }
.alert-body p { color: var(--ink-2); font-size: .92rem; }
.alert-ticket { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--accent-ink); background: rgba(var(--accent-rgb), .1); }
.alert-ticket svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s .1s; }
.alert.is-done .alert-ticket svg { stroke-dashoffset: 0; }
.alert.c-luce { --c: #C58A00; }
.alert.c-edifici { --c: #1F8A5B; }
.alert.c-acqua { --c: #2872B6; }
.alert.c-park { --c: #C2362C; }
@media (max-width: 900px) { .alerts-grid { grid-template-columns: 1fr; } .alerts-summary { position: relative; top: 0; } }

/* ---------- mappa a livelli (smart city) ---------- */
.layer-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.layer-tools button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 600; font-size: .86rem; color: var(--ink-3); transition: all .2s; }
.layer-tools button::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); opacity: .35; transition: opacity .2s; }
.layer-tools button[aria-pressed="true"] { color: var(--ink); border-color: var(--c); }
.layer-tools button[aria-pressed="true"]::before { opacity: 1; }
#layer-map { width: 100%; height: auto; border-radius: 14px; background: #EAF3ED; }
.map-block { fill: #FFFFFF; stroke: #CFE3D6; }
.map-road { stroke: #D9E6DE; stroke-width: 26; fill: none; }
.map-lane { stroke: #FFFFFF; stroke-width: 1.5; stroke-dasharray: 8 8; fill: none; }
.map-plaza { fill: #DDEFE3; }
.map-layer { transition: opacity .4s var(--ease-out); }
.map-layer .map-pin { transition: transform .45s var(--ease-out), opacity .4s; transition-delay: var(--d); transform-box: fill-box; transform-origin: center; }
.map-layer.is-hidden .map-pin { transform: scale(0); opacity: 0; transition-delay: 0s; }
.pin-luce { fill: #FFC93C; stroke: #B07D00; stroke-width: 1.5; }
.pin-luce.off { fill: #FFFFFF; stroke: #C2362C; stroke-width: 2; }
.pin-edificio { fill: #1F8A5B; }
.pin-acqua { fill: #5CBCE2; stroke: #2872B6; stroke-width: 2; }
.pin-park { fill: #0E2A1D; }
.pin-text { font-family: var(--f-mono); font-size: 13px; font-weight: 600; fill: #FFFFFF; }

/* ---------- applicazioni ---------- */
.apps { background: var(--surface); padding-bottom: 120px; }
.apps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.apps-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app-card { position: relative; padding: 18px 22px 26px; border-radius: 22px; background: linear-gradient(180deg, var(--surface-2), var(--surface) 60%); border: 1px solid var(--line); display: grid; gap: 10px; transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s; }
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.app-scene { width: 100%; height: auto; aspect-ratio: 1.3; overflow: visible; transition: transform .5s var(--ease-out); }
.app-card:hover .app-scene { transform: translateY(-4px) scale(1.02); }
.app-k { font-family: var(--f-mono); font-size: .75rem; color: var(--accent-ink); letter-spacing: .1em; }
.app-card h3 { font-size: 1.45rem; font-weight: 800; }
.app-card p { color: var(--ink-2); }
@media (max-width: 1100px) { .apps-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .apps-grid { grid-template-columns: 1fr; } .apps-grid.four { grid-template-columns: 1fr; } .app-scene { max-width: 420px; justify-self: center; } }

/* ---------- adozione ---------- */
.adopt { background: var(--bg); padding-bottom: 120px; }
.adopt-steps { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.adopt-steps li { position: relative; padding: 26px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.adopt-steps li::after { content: ""; position: absolute; top: 40px; right: -17px; width: 18px; height: 1px; background: var(--line-2); }
.adopt-steps li:last-child::after { display: none; }
.adopt-n { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; color: var(--accent-ink); }
.adopt-steps h3 { font-size: 1.2rem; font-weight: 700; }
.adopt-steps p { color: var(--ink-2); font-size: .95rem; }
@media (max-width: 900px) { .adopt-steps { grid-template-columns: 1fr 1fr; } .adopt-steps li::after { display: none; } }
@media (max-width: 560px) { .adopt-steps { grid-template-columns: 1fr; } }

/* ---------- contatti ---------- */
.cta { padding: 40px 0 120px; background: var(--bg); }
.cta-card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px;
  padding-top: 64px; padding-bottom: 64px; border-radius: 28px; max-width: 1216px;
  background: radial-gradient(60% 90% at 90% 20%, rgba(var(--accent-2-rgb), .35), transparent 70%), linear-gradient(135deg, var(--surface), var(--bg-alt));
  border: 1px solid var(--line);
}
.cta-copy { display: grid; gap: 18px; justify-items: start; padding-left: 16px; }
.cta-logo { width: 180px; height: auto; margin-right: 32px; filter: drop-shadow(0 20px 30px rgba(40, 114, 182, .25)); animation: bob 7s ease-in-out infinite; }
.cta-areas { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .cta-card { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; } .cta-logo { display: none; } .cta-copy { padding-left: 0; } }

/* ---------- footer ---------- */
.footer { background: var(--footer); color: #C9D6E3; padding: 64px 0 28px; font-size: .92rem; }
.footer a { color: #E7F0F8; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer h4 { font-size: .74rem; font-family: var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #8FB0CE; margin-bottom: 12px; font-weight: 500; }
.footer .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { max-width: 26em; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; color: #8FA6BC; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .footer-base { flex-direction: column; } }

/* ---------- comparse ---------- */
.motion .reveal { opacity: 0; transform: translateY(18px); }
.motion .reveal.is-in { opacity: 1; transform: none; }
.motion .reveal.is-in:hover { transform: translateY(-4px); }
.motion .cap.reveal.is-in:hover { transform: translateY(-2px); }

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pulse, .float.is-stuck .float-halo { animation: none !important; }
}