/* ============================================================
   IoTrack24 — design system condiviso
   Brand: Global System Management S.r.l. (manuale v2.0)
   Palette Petrolio/Ciano · piattaforma ispirata a Navixy
   ============================================================ */
@import url('fonts.css'); /* font auto-ospitati, nessuna richiesta esterna a Google */

:root{
  --petrol:#2A5B5F;
  --petrol-deep:#173e41;
  --cyan:#86C5D1;
  --aqua:#B2E4E8;
  --bg:#ffffff;
  --surface:#f1f8f9;
  --surface-2:#e4f1f3;
  --fg:#16383b;
  --muted:#5a777a;
  --border:#d9e8ea;
  --accent-ink:#1d7d88;
  --on-dark:#eaf6f7;
  --on-dark-mut:#9cc4c8;
  --success:#1f9e6f;
  --warn:#e0a106;
  --danger:#e0413c;

  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(23,62,65,.06), 0 2px 8px rgba(23,62,65,.05);
  --shadow:0 8px 30px rgba(23,62,65,.10);
  --shadow-lg:0 24px 60px rgba(23,62,65,.16);
  --maxw:1200px;
  --nav-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  width:100%;
}
/* Le colonne grid/flex (fr, 1fr) di default non si restringono sotto la
   dimensione minima del loro contenuto (min-width:auto): un bottone con
   testo "nowrap" o altro contenuto largo può quindi allargare la colonna
   oltre il viewport e generare scroll orizzontale su mobile, anche quando
   il layout collassa a una colonna. Questa regola forza tutte le colonne
   dirette dei contenitori grid/flex principali a poter restringersi
   normalmente. */
.hero-grid>*,.split>*,.wilma-grid>*,.pricing>*,.kpi>*,.trustband-grid>*,
.grid-2>*,.grid-3>*,.grid-4>*,.footer-grid>*,.leadmag>*{min-width:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:var(--cyan);color:var(--petrol-deep)}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.08;letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:700}
h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;letter-spacing:-.01em}
p{text-wrap:pretty}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- layout ---- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(64px,9vw,120px) 0}
.section-tight{padding:clamp(48px,6vw,80px) 0}
.eyebrow{
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent-ink);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--cyan)}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);max-width:60ch;line-height:1.6}
.section-head{max-width:680px;margin-bottom:48px}
.center{text-align:center;margin-inline:auto}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:.97rem;letter-spacing:.01em;
  padding:13px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--petrol);color:#fff;box-shadow:0 6px 18px rgba(42,91,95,.28)}
.btn-primary:hover{background:#234e51;box-shadow:0 10px 26px rgba(42,91,95,.34)}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--cyan);background:var(--surface)}
.btn-light{background:#fff;color:var(--petrol)}
.btn-light:hover{background:var(--aqua)}
.btn-onpetrol{background:var(--cyan);color:var(--petrol-deep)}
.btn-onpetrol:hover{background:#9ed3dd}
.btn-lg{padding:16px 28px;font-size:1.02rem}
.btn-block{width:100%}

/* ---- navbar ---- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;gap:28px;height:100%}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:38px;height:38px}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;letter-spacing:.02em;color:var(--petrol);line-height:1}
.brand-name small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.6rem;letter-spacing:.22em;color:var(--muted);margin-top:3px}
.nav-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.nav-links a{
  padding:9px 14px;border-radius:8px;font-size:.94rem;font-weight:500;color:var(--fg);
  transition:background .15s,color .15s;
}
.nav-links a:hover{background:var(--surface);color:var(--petrol)}
.nav-links a.active{color:var(--accent-ink)}
.nav-cta{display:flex;align-items:center;gap:10px;margin-left:8px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:var(--petrol)}
.nav-toggle svg{width:26px;height:26px}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:clamp(48px,7vw,96px) 0}
.hero h1{margin-bottom:22px}
.hero .lead{margin-bottom:32px;font-size:clamp(1.1rem,1.6vw,1.3rem)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero-trust{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:.86rem;flex-wrap:wrap}
.hero-trust .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.hero-badge{
  display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);font-size:.83rem;color:var(--petrol);
  font-weight:500;margin-bottom:26px;
}
.hero-badge b{color:var(--success);display:inline-flex;align-items:center;gap:6px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(31,158,111,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,158,111,.5)}70%{box-shadow:0 0 0 9px rgba(31,158,111,0)}100%{box-shadow:0 0 0 0 rgba(31,158,111,0)}}

/* hero visual: connected globe + mini map card */
.hero-visual{position:relative;min-height:440px}
.globe-wrap{position:absolute;inset:0;display:grid;place-items:center;z-index:0}
/* Bagliore morbido invece del vecchio reticolo di ellissi concentriche: con la
   card più grande sopra, le linee che sporgevano ai bordi apparivano come un
   disegno "spettinato" invece che un accento discreto. Un unico glow sfumato
   più un sottile anello resta ordinato qualunque sia la porzione visibile. */
.globe{width:min(520px,96%);aspect-ratio:1;position:relative}
.globe::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(134,197,209,.32),rgba(178,228,232,.14) 55%,transparent 76%);
  filter:blur(6px);
}
.globe::after{content:"";position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(134,197,209,.4)}
.map-card{
  position:relative;z-index:2;width:100%;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;
}
.map-card-top{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.map-card-top .t{font-weight:600;font-size:.85rem;display:flex;align-items:center;gap:8px}
.mini-map{position:relative;aspect-ratio:32/15;background:
  linear-gradient(0deg,rgba(42,91,95,.04),rgba(42,91,95,.04)),
  radial-gradient(circle at 30% 30%,#eaf5f6,#dcebee 80%)}
.mini-map .roads{position:absolute;inset:0}
.veh{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translate(-50%,-50%);transition:left .9s linear,top .9s linear}
.veh.mov{background:var(--success)}.veh.idle{background:var(--warn)}.veh.alarm{background:var(--danger)}
.map-card-foot{display:flex;gap:14px;padding:12px 16px;border-top:1px solid var(--border);font-size:.78rem;color:var(--muted)}
.map-card-foot b{color:var(--fg);font-family:var(--font-mono)}

/* ---- hero risk-free line ---- */
.hero-risk{display:flex;align-items:center;gap:9px;margin:-14px 0 26px;font-size:.9rem;font-weight:600;color:var(--accent-ink)}
.hero-risk svg{width:18px;height:18px;flex-shrink:0;stroke-width:2.4}

/* ---- ambient background accents ----
   Macchie di colore sfumate e appena percettibili, in lenta deriva, dietro
   all'hero e alle testate di pagina: danno un minimo di vita allo sfondo
   senza distrarre dal contenuto. z-index:-1 + overflow:hidden sul contenitore
   le tiene sempre dietro al testo, che essendo in-flow le sovrasta comunque
   anche senza z-index esplicito. Disattivate per chi preferisce meno movimento. */
.hero,[data-od-id="pagehead"],[data-od-id="contact"]{position:relative;overflow:hidden}
.hero::before,.hero::after,
[data-od-id="pagehead"]::before,[data-od-id="pagehead"]::after,
[data-od-id="contact"]::before,[data-od-id="contact"]::after{
  content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);
  pointer-events:none;opacity:.5;
}
.hero::before,[data-od-id="pagehead"]::before,[data-od-id="contact"]::before{
  width:440px;height:440px;top:-160px;right:-120px;
  background:radial-gradient(circle,var(--cyan),transparent 70%);
  animation:ambientDriftA 17s ease-in-out infinite;
}
.hero::after,[data-od-id="pagehead"]::after,[data-od-id="contact"]::after{
  width:360px;height:360px;bottom:-140px;left:-100px;
  background:radial-gradient(circle,var(--aqua),transparent 70%);
  animation:ambientDriftB 21s ease-in-out infinite;
}
@keyframes ambientDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4%,4%) scale(1.1)}}
@keyframes ambientDriftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,-3%) scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,[data-od-id="pagehead"]::before,[data-od-id="pagehead"]::after,
  [data-od-id="contact"]::before,[data-od-id="contact"]::after{animation:none}
}

/* ---- trust numbers band ---- */
.trustband{background:var(--bg);border-bottom:1px solid var(--border);padding:clamp(40px,5vw,64px) 0}
.trustband-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.trustband .tn{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.6vw,3rem);color:var(--petrol);letter-spacing:-.02em;line-height:1}
.trustband .tn .mono{font-family:var(--font-display)}
.trustband .tl{color:var(--muted);font-size:.88rem;margin-top:8px}
.trustband-foot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;margin-top:30px;font-size:.86rem;color:var(--muted)}
.trustband-foot svg{width:18px;height:18px;color:var(--accent-ink);flex-shrink:0}

/* ---- testimonials ---- */
.testi{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px}
.testi .stars{color:var(--warn);letter-spacing:2px;font-size:1rem}
.testi blockquote{font-size:.98rem;line-height:1.55;color:var(--fg)}
.testi figcaption{display:flex;flex-direction:column;margin-top:auto}
.testi .who{font-weight:700;font-family:var(--font-display)}
.testi .role{font-size:.82rem;color:var(--muted)}

/* ---- case study ---- */
.casestudy{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm)}
.casestudy .cs-tag{display:inline-block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);background:var(--surface-2);padding:5px 10px;border-radius:6px;margin-bottom:14px}
.casestudy h3{margin-bottom:10px}
.casestudy p{color:var(--muted);font-size:.95rem}
.cs-kpis{display:flex;gap:24px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.cs-kpis b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--petrol);line-height:1}
.cs-kpis span{font-size:.78rem;color:var(--muted)}

/* ---- lead magnet ---- */
.leadmag{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;background:var(--petrol-deep);
  background-image:radial-gradient(120% 90% at 90% 0%,rgba(134,197,209,.20),transparent 55%);
  border-radius:var(--r-xl);padding:clamp(32px,4vw,56px);color:var(--on-dark)}
.leadmag h2{color:#fff}
.leadmag .eyebrow{color:var(--cyan)}.leadmag .eyebrow::before{background:var(--cyan)}
.leadmag .lead{color:var(--on-dark-mut)}
.leadmag-list{list-style:none;display:grid;gap:11px;margin-top:22px}
.leadmag-list li{display:flex;gap:11px;align-items:flex-start;color:var(--on-dark);font-size:.94rem}
.leadmag-list svg{width:18px;height:18px;color:var(--cyan);flex-shrink:0;margin-top:2px}
.leadmag-form{background:#fff;border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow-lg)}
.lm-form{display:grid;gap:14px}
.lm-consent{display:flex;gap:10px;align-items:center;font-size:.84rem;color:var(--muted);cursor:pointer}
.lm-consent .req{color:var(--danger)}
.lm-form .msg{font-size:.78rem;color:var(--danger);display:none}
.lm-form .field.err .msg,.lm-form .msg.show{display:block}
@media(max-width:820px){.leadmag{grid-template-columns:1fr;gap:30px}.trustband-grid{grid-template-columns:1fr 1fr;gap:32px}.cs-kpis{gap:18px}}

/* ---- logo strip ---- */
.strip{border-block:1px solid var(--border);background:var(--surface)}
.strip-inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:center;padding:26px 0;color:var(--muted);font-size:.82rem}
.strip-inner .label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.strip-logos{display:flex;gap:28px;flex-wrap:wrap;align-items:center;font-weight:700;font-family:var(--font-display);color:#8aa3a5;font-size:1.05rem}

/* ---- feature cards ---- */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--shadow-sm);transition:transform .18s ease,box-shadow .18s ease,border-color .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--cyan)}
/* spotlight: bagliore che segue il cursore, aggiornato via JS su --mx/--my.
   z-index:-1 lo tiene sempre dietro al contenuto in-flow della card (icona,
   titolo, testo) senza bisogno di alzare lo z-index di questi ultimi. */
.card::before,.plan::before,.qa::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(134,197,209,.22),transparent 70%);
  transition:opacity .3s ease;
}
.card:hover::before,.plan:hover::before,.qa:hover::before{opacity:1}
.ic{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:var(--surface-2);color:var(--petrol);
}
.ic svg{width:24px;height:24px;stroke-width:1.7}
.card h3{margin-bottom:9px}
.card p{color:var(--muted);font-size:.95rem}
.card .more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--accent-ink);font-weight:600;font-size:.88rem}
.card .more svg{width:15px;height:15px;transition:transform .15s}
.card:hover .more svg{transform:translateX(3px)}

/* feature: big split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev .split-media{order:-1}
.feature-list{list-style:none;display:grid;gap:16px;margin-top:26px}
.feature-list li{display:flex;gap:13px;align-items:flex-start}
.feature-list .ck{flex-shrink:0;width:24px;height:24px;border-radius:7px;background:var(--surface-2);color:var(--accent-ink);display:grid;place-items:center;margin-top:1px}
.feature-list .ck svg{width:15px;height:15px;stroke-width:2.2}
.feature-list b{display:block;font-weight:600}
.feature-list span{color:var(--muted);font-size:.92rem}

/* panel (product screenshot frame) */
.panel{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.panel-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;border-bottom:1px solid var(--border);background:var(--surface)}
.panel-bar .dots{display:flex;gap:6px}
.panel-bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.panel-bar .tt{font-size:.78rem;color:var(--muted);font-family:var(--font-mono);margin-left:6px}

/* ---- stat band ---- */
.band{background:var(--petrol);color:var(--on-dark)}
.band h2,.band h3{color:#fff}
.band .lead{color:var(--on-dark-mut)}
.band .eyebrow{color:var(--cyan)}
.band .eyebrow::before{background:var(--cyan)}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
.kpi .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);color:#fff;letter-spacing:-.02em}
.kpi .n .mono{font-family:var(--font-display)}
.kpi .l{color:var(--on-dark-mut);font-size:.88rem;margin-top:6px}

/* ---- sectors ---- */
.sector{
  position:relative;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;min-height:230px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
}
.sector:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sector .scene{position:absolute;inset:0;z-index:0;opacity:.9}
.sector .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(23,62,65,0) 30%,rgba(23,62,65,.82))}
.sector .body{position:relative;z-index:2;color:#fff}
.sector h3{color:#fff;margin-bottom:6px}
.sector p{color:rgba(255,255,255,.86);font-size:.9rem}
.sector .tag{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--petrol);padding:5px 10px;border-radius:6px}

/* ---- pricing ---- */
.guarantee{display:inline-flex;align-items:center;gap:9px;margin:0 auto 26px;padding:9px 16px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:.88rem;font-weight:600;color:var(--accent-ink)}
.guarantee svg{width:18px;height:18px;flex-shrink:0;stroke-width:2.2}
.price-toggle{display:inline-flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px;margin-inline:auto}
.price-toggle button{border:0;background:transparent;padding:9px 18px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--muted);cursor:pointer;transition:.15s}
.price-toggle button.on{background:#fff;color:var(--petrol);box-shadow:var(--shadow-sm)}
.price-toggle .save{font-size:.72rem;color:var(--success);font-weight:600;font-family:var(--font-mono)}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.plan{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:30px;box-shadow:var(--shadow-sm);position:relative}
.plan.feat{border-color:var(--petrol);box-shadow:var(--shadow-lg);transform:translateY(-8px)}
.plan .pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--petrol);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:5px 14px;border-radius:999px;text-transform:uppercase}
.plan .pn{font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.plan .pd{color:var(--muted);font-size:.9rem;margin:6px 0 20px;min-height:42px}
.plan .pp{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.plan .pp .amt{font-family:var(--font-display);font-weight:800;font-size:2.6rem;letter-spacing:-.02em}
.plan .pp .cur{font-size:1.2rem;font-weight:700;color:var(--muted)}
.plan .pp .per{color:var(--muted);font-size:.86rem}
.plan .pnote{color:var(--muted);font-size:.8rem;margin-bottom:22px}
.plan ul{list-style:none;display:grid;gap:11px;margin:22px 0;border-top:1px solid var(--border);padding-top:22px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem}
.plan li svg{width:17px;height:17px;color:var(--accent-ink);flex-shrink:0;margin-top:2px;stroke-width:2.2}
.plan li.off{color:var(--muted)}.plan li.off svg{color:var(--border)}

/* ---- comparison table ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg)}
table.cmp{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
table.cmp th,table.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border)}
table.cmp thead th{background:var(--surface);font-family:var(--font-display);font-weight:700;font-size:.86rem;color:var(--petrol)}
table.cmp td.c,table.cmp th.c{text-align:center}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .yes{color:var(--success)}.cmp .no{color:var(--border)}
table.cmp td:first-child{font-weight:500}

/* ---- faq ---- */
.faq{display:grid;gap:12px;max-width:780px;margin-inline:auto}
.qa{position:relative;border:1px solid var(--border);border-radius:var(--r);background:#fff;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:600;font-family:var(--font-display);display:flex;justify-content:space-between;gap:16px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .2s}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;background:var(--accent-ink);border-radius:2px}
.qa summary .pm::before{top:10px;left:3px;width:16px;height:2px}
.qa summary .pm::after{top:3px;left:10px;width:2px;height:16px;transition:transform .2s}
.qa[open] summary .pm::after{transform:rotate(90deg);opacity:0}
.qa .a{padding:0 22px 22px;color:var(--muted);font-size:.95rem}

/* ---- forms ---- */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.85rem;font-weight:600;color:var(--fg)}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;color:var(--fg);background:#fff;
  border:1.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(134,197,209,.35)}
.field textarea{resize:vertical;min-height:120px}
.field.err input,.field.err select,.field.err textarea{border-color:var(--danger)}
.field .msg{font-size:.78rem;color:var(--danger);display:none}
.field.err .msg{display:block}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* select: sostituisce la doppia freccia nativa del browser (che stona con lo
   stile arrotondato degli altri campi) con un chevron custom coerente col resto. */
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a777a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px;
}
/* checkbox: dimensione fissa + colore del brand invece del default del browser
   (spesso troppo piccolo/disallineato rispetto al testo accanto). */
.field input[type="checkbox"],.lm-consent input[type="checkbox"]{
  width:19px;height:19px;flex-shrink:0;accent-color:var(--petrol);cursor:pointer;margin-top:1px;
}
.form-note{font-size:.8rem;color:var(--muted)}
.form-ok{display:none;background:#eaf7f1;border:1px solid #b9e3d0;color:#15543c;border-radius:var(--r);padding:18px 20px;font-size:.92rem;align-items:flex-start;gap:12px}
.form-ok.show{display:flex}
.form-err{display:none;background:#fdecea;border:1px solid #f5c2c0;color:#9b2520;border-radius:var(--r);padding:13px 16px;font-size:.88rem;margin-bottom:16px}
.form-err.show{display:block}
/* honeypot anti-bot: nascosto agli utenti, visibile ai bot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-ok svg{width:22px;height:22px;color:var(--success);flex-shrink:0}

/* ---- footer ---- */
.footer{background:var(--petrol-deep);color:var(--on-dark-mut);padding:64px 0 30px}
.footer a{color:var(--on-dark-mut);transition:color .15s}
.footer a:hover{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .brand-name{color:#fff}
.footer .fdesc{font-size:.9rem;margin:16px 0;max-width:34ch;line-height:1.6}
.footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--font-mono);font-weight:500;margin-bottom:16px}
.footer ul{list-style:none;display:grid;gap:10px;font-size:.9rem}
.footer-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding-top:24px;font-size:.82rem}
.footer-bottom .mono{font-size:.78rem}
.badge-iso{display:inline-flex;gap:8px;align-items:center;font-size:.78rem;color:var(--on-dark-mut)}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .4s ease,transform .4s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.live-dot{animation:none}.veh{transition:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{min-height:380px}
  .map-card{margin-inline:auto}
  .split{gap:36px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .kpi{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-cta{margin-left:auto}
  .nav-toggle{display:inline-flex}
  .nav.open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:fixed;top:var(--nav-h);left:0;right:0;background:#fff;
    max-height:calc(100vh - var(--nav-h));overflow-y:auto;
    border-bottom:1px solid var(--border);padding:14px 24px 22px;box-shadow:var(--shadow)
  }
  .nav.open .nav-links a{padding:13px 14px;border-radius:8px}
  .grid-3,.grid-2,.pricing{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr}
  .split.rev .split-media{order:0}
  .plan.feat{transform:none}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:520px){
  .container{padding-inline:18px}
  .grid-4,.kpi{grid-template-columns:1fr 1fr}
  .hero-actions .btn{flex:1}
  h1{font-size:clamp(2rem,8vw,2.6rem)}
}

/* ============================================================
   WILMA — assistente AI (avatar video)
   ============================================================ */
.wilma{background:
  radial-gradient(120% 90% at 85% 0%,rgba(134,197,209,.18),transparent 55%),
  var(--petrol-deep);color:var(--on-dark);position:relative;overflow:hidden}
.wilma h2,.wilma h3{color:#fff}
.wilma .lead{color:var(--on-dark-mut)}
.wilma .eyebrow{color:var(--cyan)}.wilma .eyebrow::before{background:var(--cyan)}
.wilma-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
.wilma-stage{position:relative;justify-self:center;width:min(320px,100%)}
.wilma-frame{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px rgba(0,0,0,.45);background:#0c2426;aspect-ratio:2/3}
.wilma-frame video{width:100%;height:100%;object-fit:cover;display:block}
.wilma-stage::before{content:"";position:absolute;inset:-30px;border-radius:50%;
  background:radial-gradient(circle,rgba(134,197,209,.28),transparent 65%);z-index:-1;filter:blur(8px)}
.wilma-tag{position:absolute;left:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:9px;
  background:rgba(12,36,38,.78);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:8px 14px 8px 10px;font-size:.82rem}
.wilma-tag .av{width:26px;height:26px;border-radius:50%;background:var(--cyan);display:grid;place-items:center;color:var(--petrol-deep);font-weight:800;font-family:var(--font-display);font-size:.8rem}
.wilma-tag b{color:#fff;font-weight:600}.wilma-tag span{color:var(--cyan);font-family:var(--font-mono);font-size:.72rem}
.wilma-cap{margin-top:16px;text-align:center;font-size:.82rem;color:var(--on-dark-mut)}
.wilma-feats{list-style:none;display:grid;gap:18px;margin:28px 0 30px}
.wilma-feats li{display:flex;gap:14px;align-items:flex-start}
.wilma-feats .ic{width:44px;height:44px;border-radius:12px;background:rgba(134,197,209,.14);color:var(--cyan);flex-shrink:0}
.wilma-feats b{display:block;color:#fff;font-weight:600;margin-bottom:3px}
.wilma-feats span{color:var(--on-dark-mut);font-size:.92rem}
.wilma .btn-ghost{color:#fff;border-color:rgba(255,255,255,.25)}
.wilma .btn-ghost:hover{border-color:var(--cyan);background:rgba(255,255,255,.06)}
@media(max-width:900px){.wilma-grid{grid-template-columns:1fr;gap:40px}}

/* mini “chat” mock with Wilma in features pages */
.wilma-chat{display:grid;gap:10px;max-width:420px}
.bub{padding:11px 14px;border-radius:14px;font-size:.9rem;line-height:1.45;max-width:88%;color:var(--fg)}
.bub.u{background:#fff;border:1px solid var(--border);align-self:flex-end;border-bottom-right-radius:4px}
.bub.w{background:var(--surface-2);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:4px}
.bub.w b{color:var(--accent-ink)}

/* avatar image (Wilma) inside any .av circle */
.av{overflow:hidden}
.av img,.av video{width:100%;height:100%;object-fit:cover;object-position:50% 16%;border-radius:inherit;display:block}
.wilma-tag .av{padding:0}