/* Foxy Guard · foxyguard.it
   Caratteri ospitati sul sito (sottoinsieme latin, SIL Open Font License 1.1). */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrainsmono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  --bg:#FBFAF8; --surface:#FFFFFF; --ink:#1B1714; --muted:#5E5751; --line:#E7E2DC;
  --orange:#EE6A1C; --orange-ink:#B8490B; --orange-soft:#FCEBDF;
  --field-line:#968D85; --placeholder:#77706A;
  --ok:#2E9A66; --ok-ink:#1F7A4F; --bad:#D2382B;
  /* schermate del prodotto: tema scuro fisso, come screenshot */
  --app-bg:#141110; --app-surface:#1E1A17; --app-raise:#262120; --app-line:#322C28;
  --app-ink:#F2EDE8; --app-muted:#A79E96; --app-accent:#F47A2E;
  --app-ok:#3DD68C; --app-crit:#FF6B6B; --app-warn:#F2C14E;
  --sev1:#8A4A3E; --sev2:#B5533F; --sev3:#DE5A45; --sev4:#FF8266;
  --display:"Montserrat","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --gut:clamp(16px,4vw,40px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#12100E; --surface:#1B1815; --ink:#F2EDE8; --muted:#A79E96; --line:#2E2925;
    --orange:#F47A2E; --orange-ink:#F79A5E; --orange-soft:#2A1B11; --ok:#3DD68C; --ok-ink:#3DD68C; --bad:#FF6B6B;
    --field-line:#70675F; --placeholder:#857D75;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#12100E; --surface:#1B1815; --ink:#F2EDE8; --muted:#A79E96; --line:#2E2925;
  --orange:#F47A2E; --orange-ink:#F79A5E; --orange-soft:#2A1B11; --ok:#3DD68C; --ok-ink:#3DD68C; --bad:#FF6B6B;
  --field-line:#70675F; --placeholder:#857D75;
}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);margin:0;padding-inline:var(--gut)}
.wrap{max-width:1180px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);line-height:1.08;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--orange-ink);outline-offset:3px;border-radius:4px}
.band :focus-visible,.msp :focus-visible{outline-color:#F47A2E}
/* testo solo per le tecnologie assistive */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* ---------- banda scura (hero) ---------- */
.band{margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);background:
    radial-gradient(900px 480px at 82% -8%,rgba(244,122,46,.30),transparent 62%),
    radial-gradient(700px 420px at -10% 110%,rgba(244,122,46,.12),transparent 60%),
    #120F0D;color:#F2EDE8;position:relative;overflow:hidden;overflow:clip}
.band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 85%);mask-image:linear-gradient(to bottom,#000 10%,transparent 85%);pointer-events:none}
.topnav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut);background:rgba(18,15,13,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07);color:#F2EDE8}
.topnav.scrolled{background:rgba(18,15,13,.92);box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -12px rgba(0,0,0,.6)}
.nav-in{display:flex;align-items:center;gap:26px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;border-radius:6px}
/* logo reale (versione per fondi scuri: la barra è scura in entrambi i temi) */
.brand img{display:block;width:162px;height:40px}
.nav-links{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.nav-links a{text-decoration:none;font-weight:500;color:#BDB4AC}
.nav-links a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);padding:14px 22px;border-radius:12px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#F47A2E;color:#fff;box-shadow:0 10px 30px -10px rgba(244,122,46,.7);position:relative;overflow:hidden}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover::after{transform:translateX(120%);transition:transform .7s cubic-bezier(.2,.7,.2,1)}}
.btn-glass{border-color:rgba(255,255,255,.18);color:#F2EDE8;background:rgba(255,255,255,.04)}
.btn-glass:hover{border-color:rgba(255,255,255,.35)}
.btn-sm{padding:10px 16px;font-size:14px}

.hero{position:relative;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;padding-block:64px 40px}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#F7B98F;border:1px solid rgba(244,122,46,.35);background:rgba(244,122,46,.08);border-radius:999px;padding:8px 12px}
.pill i{width:7px;height:7px;border-radius:50%;background:#F47A2E;box-shadow:0 0 0 4px rgba(244,122,46,.2);animation:pulse 1.8s ease-in-out infinite}
.hero h1{font-size:clamp(38px,5.6vw,68px);font-weight:800;letter-spacing:-.02em;margin-top:18px}
.hero h1 em{font-style:normal;background:linear-gradient(90deg,#FF9A55,#F47A2E 60%,#E4561A);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-side p{font-size:18px;color:#BDB4AC;max-width:32em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.fx-pin .intro,.fx-lite .intro{animation:introUp .8s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i)*90ms + 80ms)}

/* ---------- schermata principale ---------- */
.lid-stage{position:relative;padding-bottom:72px}
.scene,.lid{position:relative}
.screen{position:relative;background:var(--app-bg);color:var(--app-ink);border:1px solid var(--app-line);border-radius:18px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04),0 30px 80px -30px rgba(244,122,46,.35)}
/* elementi scenici: visibili solo quando una modalità li attiva */
.halo,.hinge-glow,.floor,.deck,.lid-shadow,.lid-back,.lid-edge,.power,.glare,.tour-bar,.pin-bg,.scanline,.v-devs,.v-scan,.side-pill,.wipe,.pflash{display:none}
.chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--app-line);background:#100D0C}
.chrome b{width:10px;height:10px;border-radius:50%;background:#3A3330}
.url{margin-inline:auto;font:500 12px/1 var(--mono);color:var(--app-muted);background:#1A1614;border:1px solid var(--app-line);border-radius:8px;padding:6px 14px}
.lid .url{display:grid;text-align:center;min-width:min(calc(34ch + 28px),64vw);overflow:hidden;white-space:nowrap}
.lid .url .u{grid-area:1/1;transition:opacity .24s,transform .24s}
.lid .url .u:not(.on){opacity:0;transform:translateY(6px)}
.screen:not(.tour-on) .url .u:not(.on){display:none}
.demo-chip{margin-left:8px;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#F7B98F;border:1px solid rgba(244,122,46,.35);border-radius:6px;padding:4px 7px;white-space:nowrap}
.app{display:grid;grid-template-columns:190px 1fr;min-height:540px}
.side{border-right:1px solid var(--app-line);padding:16px 12px;display:flex;flex-direction:column;gap:3px;background:#161311}
.side .mini{display:flex;align-items:center;padding:2px 8px 14px}
.side .mini img{display:block;width:130px;height:auto;aspect-ratio:438/108}
.nav-it{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--body);color:var(--app-muted);padding:9px 10px;border-radius:8px}
.nav-it svg{width:16px;height:16px;color:var(--app-accent)}
.nav-it.on{background:rgba(244,122,46,.12);color:var(--app-ink)}
.nav-it .bdg{margin-left:auto;background:var(--app-crit);color:#1b0f0e;font:700 10px/1 var(--body);border-radius:999px;padding:3px 6px}
.views{position:relative;display:grid;min-width:0}
.main{padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar .tt{display:block;margin:0;font:700 17px/1 var(--display)}
.chip{font:500 12px/1 var(--body);color:var(--app-muted);border:1px solid var(--app-line);border-radius:8px;padding:6px 10px}
.live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--body);color:var(--app-ok)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--app-ok);animation:pulse 1.6s ease-in-out infinite}
.live.wait{color:var(--app-muted)}
.live.wait i{background:#5A514B;animation:none}
.live.done i{animation:none}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{position:relative;background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(244,122,46,.6);opacity:0;pointer-events:none}
.kpi .l{font:500 12px/1.2 var(--body);color:var(--app-muted)}
.kpi .v{font:600 26px/1 var(--body);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kpi .d{font:500 12px/1 var(--body);color:var(--app-muted);display:flex;align-items:center;gap:6px}
.kpi .up{color:var(--app-ok)}
.kpi svg.spark{width:100%;height:26px;display:block}
.meter{height:8px;border-radius:999px;background:#3A2622;overflow:hidden}
.meter i{display:block;width:100%;height:100%;border-radius:999px;background:var(--sev3);transform:translateX(calc((var(--v,0) - 1) * 100%));transition:transform .6s ease}
.status{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--body)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.status.ok{color:var(--app-ok)} .status.crit{color:var(--app-crit)} .status.warn{color:var(--app-warn)}

.grid2{display:grid;grid-template-columns:1.7fr 1fr;gap:12px}
.panel{background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;padding:14px;min-width:0}
.panel-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px;flex-wrap:wrap}
.panel-h b{font:600 13.5px/1.2 var(--body)}
.panel-h span{font:500 12px/1 var(--body);color:var(--app-muted)}
.chart{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.plot{position:relative;overflow:hidden;border-radius:4px}
.wipe{position:absolute;inset:0;background:var(--app-surface);pointer-events:none}
:is(.fx-pin,.fx-lite) .wipe.on{display:block}
.wipe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#F47A2E;box-shadow:0 0 14px 3px rgba(244,122,46,.55)}
.wipe::after{content:"";position:absolute;right:100%;top:0;bottom:0;width:40px;background:linear-gradient(90deg,transparent,rgba(244,122,46,.14))}
.wipe:not(.run)::before,.wipe:not(.run)::after{opacity:0}
.tip{position:absolute;pointer-events:none;background:#0E0B0A;border:1px solid var(--app-line);border-radius:8px;padding:7px 9px;font:500 12px/1.3 var(--body);color:var(--app-ink);white-space:nowrap;transform:translate(-50%,-115%);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:2}
.tip b{font-variant-numeric:tabular-nums}
#threats .bar{transform-box:fill-box;transform-origin:0 50%}

.dets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.det{position:relative;background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;padding:12px 14px;display:grid;gap:6px}
.det .h{display:flex;justify-content:space-between;gap:8px;align-items:center}
.det .dev{font:500 12px/1 var(--mono);color:var(--app-muted)}
.det p{font:500 13.5px/1.35 var(--body)}
.det .t{font:500 12px/1 var(--body);color:var(--app-muted)}
.det .ring{position:absolute;inset:-1px;border-radius:inherit;border:1px solid rgba(255,107,107,.9);box-shadow:0 0 24px rgba(255,107,107,.35);opacity:0;pointer-events:none}

.sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);transform:translateX(-120%)}
.no-anim,.no-anim *{transition:none!important;animation:none!important}
/* site.js (defer) non ha ancora impaginato la scena: niente fotogramma provvisorio del portatile */
.fx-boot:not(.fx-static) .lid-stage{visibility:hidden}

/* ---------- stati di accensione (solo pin e lite; mai in statico o senza JS) ---------- */
:is(.fx-pin,.fx-lite) .lid .nav-it,:is(.fx-pin,.fx-lite) .lid .side .mini{transition:opacity .45s,transform .45s cubic-bezier(.2,.7,.2,1),color .35s;transition-delay:calc(var(--i)*40ms),calc(var(--i)*40ms),.15s}
:is(.fx-pin,.fx-lite) .lid .kpi{transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*70ms)}
:is(.fx-pin,.fx-lite) .lid .v-dash .topbar{transition:opacity .4s}
:is(.fx-pin,.fx-lite) .lid .det{transition:opacity .55s,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*90ms)}
:is(.fx-pin,.fx-lite) .lid #threats .bar{transition:transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*70ms)}
:is(.fx-pin,.fx-lite) .lid #threats .val{transition:opacity .4s .5s}
:is(.fx-pin,.fx-lite) .lid .demo-chip{transition:opacity .5s .4s}
:is(.fx-pin,.fx-lite) .screen:not(.b-side) .side .nav-it,:is(.fx-pin,.fx-lite) .screen:not(.b-side) .side .mini{opacity:0;transform:translateX(-10px)}
:is(.fx-pin,.fx-lite) .screen:not(.b-side) .side-pill{opacity:0}
:is(.fx-pin,.fx-lite) .screen:not(.b-kpis) .v-dash .topbar{opacity:0}
:is(.fx-pin,.fx-lite) .screen:not(.b-kpis) .kpi{opacity:0;transform:translateY(10px)}
:is(.fx-pin,.fx-lite) .screen:not(.b-kpis) .kpi .meter i{transform:translateX(-100%)}
:is(.fx-pin,.fx-lite) .screen:not(.b-threats) #threats .bar{transform:scaleX(0)}
:is(.fx-pin,.fx-lite) .screen:not(.b-threats) #threats .val{opacity:0}
:is(.fx-pin,.fx-lite) .screen:not(.b-dets) .det{opacity:0;transform:translateY(16px)}
/* i riquadri di grafico e minacce arrivano con il loro contenuto, non prima come gusci vuoti */
:is(.fx-pin,.fx-lite) .lid .v-dash .grid2 .panel{transition:opacity .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
:is(.fx-pin,.fx-lite) .screen:not(.b-panels) .v-dash .grid2 .panel{opacity:0;transform:translateY(12px)}
:is(.fx-pin,.fx-lite) .screen:not(.b-chrome) .demo-chip{opacity:0}
:is(.fx-pin,.fx-lite) .screen.b-kpis.kflash .kpi::after{animation:rim .9s ease-out calc(var(--i)*70ms + 200ms) backwards}

/* ---------- sezioni chiare ---------- */
section{padding-block:88px}
.eyebrow{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.sec-title{font-size:clamp(30px,3.8vw,46px);font-weight:800;letter-spacing:-.015em;margin-top:12px}
.sec-lede{color:var(--muted);font-size:18px;max-width:40em;margin-top:14px}

.caps{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;border-block:1px solid var(--line);padding-block:22px}
.cap{display:flex;align-items:center;gap:10px;font:600 15px/1.2 var(--body)}
.cap svg{width:22px;height:22px;color:var(--orange)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.shot{min-width:0}
.shot h3{font-size:22px;font-weight:700;margin-top:18px}
.shot p{color:var(--muted);margin-top:6px}
.shot .screen{border-radius:14px}
.shot .body{padding:16px;display:flex;flex-direction:column;gap:12px}

.stages{display:grid;gap:8px}
.stg{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;font:500 13px/1.2 var(--body);color:var(--app-muted)}
.stg .ic{width:18px;height:18px;border-radius:50%;border:2px solid var(--app-line);display:grid;place-items:center}
.stg.done{color:var(--app-ink)} .stg.done .ic{background:var(--app-ok);border-color:var(--app-ok)}
.stg.done .ic::after{content:"";width:5px;height:9px;border:solid #0f1a14;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.stg.run{color:var(--app-ink)} .stg.run .ic{border-color:var(--app-accent);border-top-color:transparent;animation:spin 1s linear infinite}
.stg .pct{font:500 12px/1 var(--mono);color:var(--app-muted)}
.bar{height:6px;border-radius:999px;background:#2E2724;overflow:hidden}
.bar i{display:block;width:100%;height:100%;background:var(--app-accent);border-radius:999px;transform:translateX(calc((var(--v,0) - 1) * 100%));transition:transform .4s linear}
.sev{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sev div{background:var(--app-raise);border-radius:10px;padding:10px;display:grid;gap:6px}
.sev .k{display:flex;align-items:center;gap:6px;font:500 12px/1 var(--body);color:var(--app-muted)}
.sev .k i{width:9px;height:9px;border-radius:3px}
.sev b{font:600 20px/1 var(--body);font-variant-numeric:tabular-nums}
.risk{display:flex;align-items:center;gap:14px}
.risk .score{font:600 34px/1 var(--body);font-variant-numeric:tabular-nums}
.risk .score small{font-size:14px;color:var(--app-muted);font-weight:500}
.risk .m{flex:1;display:grid;gap:6px}
.risk .m span{font:500 12px/1 var(--body);color:var(--app-muted)}
.findings{display:none}
.fh{font:600 13.5px/1.2 var(--body);margin-bottom:4px}
.fnd{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:10px;align-items:center;font:500 13px/1.3 var(--body)}
.fnd .sevtag{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--body)}
.fnd .sevtag::before{content:"";flex:none;width:9px;height:9px;border-radius:3px;background:var(--c,#5A514B)}
.fnd .ft{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fnd .host{font:500 12px/1 var(--mono);color:var(--app-muted)}
.fnd.wait{color:var(--app-muted);opacity:.55}

.dev-tbl{overflow-x:auto}
.dets{position:relative}
.dev-tbl table{border-collapse:collapse;width:100%;min-width:420px;font:500 13px/1.2 var(--body)}
.dev-tbl th{font:600 10.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--app-muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--app-line)}
.dev-tbl td{padding:10px;border-bottom:1px solid var(--app-line);white-space:nowrap}
.dev-tbl td.m{font-family:var(--mono);font-size:12px}
.dev-tbl tr:last-child td{border-bottom:0}
.ago{color:var(--app-muted);font-variant-numeric:tabular-nums}
.hb{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--app-ok);margin-right:6px;opacity:0;vertical-align:middle}
.speed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.speed div{background:var(--app-raise);border-radius:10px;padding:10px;display:grid;gap:4px}
.speed > div > span{font:500 12px/1 var(--body);color:var(--app-muted)}
.speed b{font:600 19px/1 var(--body);font-variant-numeric:tabular-nums}
.speed small{font-size:12px;color:var(--app-muted);font-weight:500}

.feats{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:44px}
.feat{position:relative;z-index:1;background:var(--surface);padding:28px;display:grid;gap:10px;align-content:start}
.feat svg{width:26px;height:26px;color:var(--orange)}
.feat h3{font-size:19px;font-weight:700}
.feat p{color:var(--muted);font-size:15px}
.beam{display:none;position:absolute;left:0;top:0;width:360px;height:360px;border-radius:50%;z-index:0;opacity:0;transition:opacity .3s;pointer-events:none;background:radial-gradient(closest-side,rgba(244,122,46,.9),rgba(244,122,46,0))}
.beam.lit{opacity:1}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.step{position:relative;border-top:0;padding-top:18px}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);transform-origin:0 50%;transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i)*150ms)}
.step .n{font:800 13px/1 var(--display);letter-spacing:.1em;color:var(--orange-ink);transition:opacity .4s calc(var(--i)*150ms + 500ms)}
.step h3{font-size:21px;font-weight:700;margin-block:10px 8px}
.step p{color:var(--muted);font-size:15px}

.nis2{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface);margin-top:44px}
.nis2 > div{padding:26px;border-right:1px solid var(--line)}
.nis2 > div:last-child{border-right:0}
.nis2 .k{font:800 28px/1 var(--display);color:var(--orange);font-variant-numeric:tabular-nums}
.nis2 .l{font-weight:700;margin-block:12px 6px}
.nis2 p{color:var(--muted);font-size:14px}

.msp{position:relative;overflow:hidden;border-radius:24px;padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center;margin-inline:0;background:radial-gradient(600px 300px at 100% 0,rgba(244,122,46,.28),transparent 65%),#120F0D;color:#F2EDE8}
.msp > div,.msp > ul{position:relative;z-index:1}
.msp-glow{display:none;position:absolute;left:0;top:0;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(244,122,46,.16),transparent);pointer-events:none}
.msp .eyebrow{color:#F7B98F}
.msp h2{font-size:clamp(30px,3.8vw,46px);font-weight:800;margin-top:12px}
.msp > div > p{color:#BDB4AC;margin-top:14px;font-size:17px}
.msp ul{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.msp li{display:grid;grid-template-columns:28px 1fr;gap:12px}
.msp li svg{width:22px;height:22px;color:#F47A2E;margin-top:2px}
.msp li svg path{stroke-dasharray:24;transition:stroke-dashoffset .4s ease calc(var(--i)*120ms + 300ms)}
.msp li b{display:block}
.msp li span{color:#BDB4AC;font-size:15px}

.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:48px}
form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px}
label{display:grid;gap:6px;font-weight:600;font-size:14px}
label .opt{font-weight:500;color:var(--muted)}
input,select,textarea{font:400 15px var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--field-line);border-radius:10px;padding:11px 12px;width:100%}
textarea::placeholder{color:var(--placeholder);opacity:1}
input[aria-invalid="true"]{border-color:var(--bad)}
textarea{min-height:92px;resize:vertical}
.full{grid-column:1 / -1}
/* consenso: casella vera, allineata alla prima riga del testo */
.consent{display:flex;align-items:flex-start;gap:10px;font-weight:500;font-size:14px;line-height:1.45;cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin:1px 0 0;padding:0;accent-color:var(--orange);cursor:pointer}
.consent input[aria-invalid="true"]{outline:2px solid var(--bad);outline-offset:2px}
.consent a{color:var(--orange-ink);font-weight:600;text-underline-offset:2px}
/* campo esca per i bot: fuori schermo, fuori dall'ordine di tabulazione e dall'albero accessibile */
.hp{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form-row{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
.form-note{flex:1 1 220px;font-size:14px;line-height:1.45;min-height:1.4em}
.form-note a{color:inherit;font-weight:600;text-underline-offset:2px;-webkit-user-select:all;user-select:all}
.btn[disabled]{cursor:progress;opacity:.72;transform:none;filter:none}
.btn[disabled]::after{display:none}
.nojs-note{grid-column:1 / -1;font-size:14px;color:var(--muted)}
/* stato di invio riuscito: sostituisce i campi dentro la stessa scheda */
.form-ok{display:none}
#demo.sent > :not(.form-ok){display:none}
#demo.sent{align-content:center}
#demo.sent .form-ok{display:grid;grid-column:1 / -1;justify-items:start;gap:10px;padding:8px 4px}
.form-ok .ok-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(46,154,102,.14);background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok-ink)}
.form-ok .ok-ic svg{width:22px;height:22px}
.form-ok h3{font-size:22px;font-weight:700;margin-top:6px}
.form-ok h3:focus{outline:none}
.form-ok p{color:var(--muted);max-width:34em}

/* ---------- piede: dati societari su ogni pagina ---------- */
.site-foot{border-top:1px solid var(--line);padding-block:32px 44px;display:grid;gap:18px;color:var(--muted);font-size:14px;line-height:1.55}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:14px 28px;flex-wrap:wrap}
.f-brand{display:block;flex:none;border-radius:6px}
.f-brand img{display:block;width:146px;height:36px}
.foot-links{display:flex;gap:8px 22px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.site-foot a{color:var(--ink);text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px}
.site-foot a:hover{color:var(--orange-ink);text-decoration-color:currentColor}
.foot-links a{font-weight:600;text-decoration:none}
.foot-co{display:grid;gap:2px}
.foot-co strong{color:var(--ink);font-weight:600}
.foot-co .sep{padding-inline:.45em;color:var(--muted);opacity:.55}
.foot-co .nw{white-space:nowrap}
.page-nf .site-foot{border-top:0}
@media (max-width:600px){
  .foot-co p:not(.copy){display:grid;gap:2px}
  .foot-co .sep{display:none}
  .foot-co .copy{margin-top:8px}
}
/* logo del piede: versione chiara o scura secondo il tema (stessa logica della palette) */
.logo-on-dark{display:none!important}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo-on-light{display:none!important}
  :root:not([data-theme="light"]) .logo-on-dark{display:block!important}
}
:root[data-theme="dark"] .logo-on-light{display:none!important}
:root[data-theme="dark"] .logo-on-dark{display:block!important}

/* ---------- pagine interne: privacy, cookie, 404 ---------- */
.page-head{position:relative;padding-block:clamp(40px,7vw,72px) clamp(44px,7vw,76px)}
.page-head:focus{outline:none}
.page-head .eyebrow{color:#F7B98F}
.page-head h1{font-size:clamp(34px,4.8vw,56px);font-weight:800;letter-spacing:-.02em;margin-top:14px}
.page-head .meta{margin-top:16px;color:#BDB4AC;font-size:16px}
.legal{padding-block:clamp(40px,6vw,64px) clamp(64px,8vw,96px)}
.legal-doc{max-width:65ch;font-size:17px;line-height:1.7}
.legal-doc > * + *{margin-top:14px}
.legal-doc .lead{font-size:18px;color:var(--muted)}
.legal-doc h2{font-size:clamp(20px,2.3vw,24px);font-weight:700;line-height:1.25;letter-spacing:-.005em;margin-top:42px}
.legal-doc h3{font-size:18px;font-weight:700;line-height:1.3;margin-top:26px}
.legal-doc h2 + p,.legal-doc h3 + p,.legal-doc h2 + ul{margin-top:10px}
.legal-doc ul{padding-left:1.25em;margin-bottom:0}
.legal-doc li + li{margin-top:10px}
.legal-doc li::marker{color:var(--orange)}
.legal-doc a{color:var(--orange-ink);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-doc strong{font-weight:600}
.callout{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:18px 20px;font-size:16px}
.callout b{display:block;font-family:var(--display);font-size:17px;margin-bottom:4px}
.back{display:inline-flex;align-items:center;gap:8px;margin-top:44px;font-weight:600;color:var(--orange-ink);text-decoration:none}
.back:hover{text-decoration:underline;text-underline-offset:3px}
.back svg{width:18px;height:18px}
.legal-doc > .back{margin-top:44px}
.nf{position:relative;padding-block:clamp(56px,12vh,128px) clamp(64px,13vh,136px);max-width:44rem}
.nf .code{font:800 clamp(72px,14vw,150px)/.9 var(--display);letter-spacing:-.04em;background:linear-gradient(90deg,#FF9A55,#F47A2E 60%,#E4561A);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font-size:clamp(30px,4.2vw,48px);font-weight:800;letter-spacing:-.015em;margin-top:18px}
.nf p{margin-top:14px;font-size:18px;color:#BDB4AC;max-width:34em}
.nf .hero-cta{margin-top:28px}
.page-legal .topnav,.page-nf .topnav{position:relative}

/* salto al contenuto per tastiera */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#120F0D;color:#fff;box-shadow:0 0 0 2px #F47A2E;font-weight:600;padding:10px 14px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
.sim{font-size:12.5px;color:var(--muted);text-align:center;margin-top:-50px;padding-bottom:40px;position:relative}
.band .sim{color:#8C837B}

/* ---------- effetti di sezione (pin e lite) ---------- */
.rv{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*60ms)}
:is(.fx-pin,.fx-lite) .rv:not(.in){opacity:0;transform:translateY(16px)}
.fx-lite .rv:not(.in){transform:translateY(12px)}
:is(.fx-pin,.fx-lite) .step:not(.in)::before{transform:scaleX(0)}
:is(.fx-pin,.fx-lite) .step:not(.in) .n{opacity:0}
:is(.fx-pin,.fx-lite) .msp:not(.in) li svg path{stroke-dashoffset:24}
@media (hover:hover) and (pointer:fine){
  :is(.fx-pin,.fx-lite) .beam,:is(.fx-pin,.fx-lite) .msp-glow{display:block}
}

/* ---------- PIN (a scroll) e VETRINA (a tempo): laptop che si apre, poi tour ---------- */
.fx-pin .band{background:#120F0D}
.fx-pin .band::before{display:none}
/* il pannello vive nel tour: la sezione resta solo per le tecnologie assistive */
:is(.fx-pin,.fx-show) #pannello{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(.fx-pin,.fx-show) #funzioni{padding-top:88px!important}
.fx-pin .lid-track{height:calc(100vh - var(--navH,64px) + var(--pinD,260vh))}
.fx-pin .lid-pin{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--navH,64px));height:calc(100vh - var(--navH,64px));overflow:hidden;overflow:clip;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
.fx-pin .lid-inner{position:relative;height:calc(100vh - var(--topOff,64px))}
.fx-pin .pin-bg{display:block;position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 480px at 82% -8%,rgba(244,122,46,.30),transparent 62%),radial-gradient(700px 420px at -10% 110%,rgba(244,122,46,.12),transparent 60%)}
.pin-grid{position:absolute;left:0;right:0;top:0;height:calc(100% + 48px);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(to bottom,#000 10%,transparent 85%);mask-image:linear-gradient(to bottom,#000 10%,transparent 85%)}
.fx-pin .hero{position:absolute;left:0;right:0;top:0;z-index:2;padding-block:clamp(20px,4.5vh,52px) 0}
.fx-pin .hero h1{font-size:clamp(38px,min(5.2vw,8vh),64px)}
/* pin da 900px: l'eroe resta su due colonne e basso, il coperchio chiuso non finisce sotto le CTA */
@media (max-width:980px){
  .fx-pin .hero{grid-template-columns:1.2fr 1fr;align-items:end;gap:32px}
  .fx-pin .hero h1{font-size:clamp(34px,min(4.6vw,7vh),64px)}
}
@media (max-height:760px){
  .fx-pin .hero-side p{font-size:16px}
  .fx-pin .hero-cta{margin-top:18px}
}
.fx-pin .lid-stage{position:absolute;left:0;right:0;top:0;bottom:var(--barH,92px);padding:0;perspective:1600px;perspective-origin:50% 0;pointer-events:none;z-index:1}
:is(.fx-pin,.fx-show) .halo{display:block;position:absolute;left:50%;top:52%;width:min(1100px,92%);height:70%;transform:translate(-50%,-50%) scale(.6);opacity:.15}
.halo i{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .6s}
.halo i.on{opacity:1}
.hl1{background:radial-gradient(closest-side,rgba(244,122,46,.34),transparent);animation:fadeIn .9s .2s backwards}
.hl2{background:radial-gradient(closest-side,rgba(61,214,140,.16),transparent)}
.hl3{background:radial-gradient(closest-side,rgba(255,107,107,.24),transparent)}
/* --dw: larghezza di impaginazione del monitor (mai sotto una soglia desktop); la scala lo fa entrare */
:is(.fx-pin,.fx-show) .scene{position:absolute;left:50%;width:var(--dw,100%);margin-left:calc(var(--dw,100%) / -2);bottom:calc(100% - var(--hinge0,62%));transform-style:preserve-3d;transform-origin:50% 100%;transform:scale3d(var(--s0,.6),var(--s0,.6),var(--s0,.6)) rotateY(-6deg)}
:is(.fx-pin,.fx-show) .lid{transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(-88deg)}
:is(.fx-pin,.fx-show) .lid > .screen{transform:translateZ(3px);-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:none;pointer-events:none}
:is(.fx-pin,.fx-show) .screen.live-on{pointer-events:auto}
:is(.fx-pin,.fx-show) .lid-back{display:grid;place-items:center;position:absolute;inset:0;border-radius:18px;background:linear-gradient(180deg,#221D1A,#161210);border:1px solid #2A2421;transform:rotateX(180deg) translateZ(3px);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* sul coperchio chiuso la volpe del logo, in rilievo scuro come un marchio impresso */
.lid-back img{display:block;width:110px;height:110px;filter:grayscale(1) sepia(.4) brightness(.34) contrast(1.15) drop-shadow(0 0 18px rgba(244,122,46,.18))}
:is(.fx-pin,.fx-show) .lid-edge{display:block;position:absolute;left:10px;right:10px;top:-3px;height:6px;background:#2A2421;transform:rotateX(90deg)}
.lid-edge i{position:absolute;left:8%;right:8%;top:2px;height:2px;background:linear-gradient(90deg,transparent,#F47A2E 20%,#FFB27A 50%,#F47A2E 80%,transparent);transform:scaleX(0);animation:seamIn .9s cubic-bezier(.2,.8,.2,1) .3s forwards}
.lid-edge i::after{content:"";position:absolute;inset:-2px 0;box-shadow:0 0 22px 4px rgba(244,122,46,.55);opacity:.55}
.lid-edge.breathe i::after{animation:breathe 2.4s ease-in-out 1.2s infinite}
:is(.fx-pin,.fx-show) .deck{display:block;position:absolute;left:1.5%;right:1.5%;top:100%;height:calc(var(--screenH,620px) * .92);transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 20px 20px;background:linear-gradient(180deg,#1E1A17,#15110F)}
.deck::before{content:"";position:absolute;left:9%;right:9%;top:7%;height:44%;border-radius:8px;background:linear-gradient(90deg,#15110F 3px,transparent 0) 0 0/calc(100% / 14) 100%,linear-gradient(#15110F 3px,transparent 0) 0 0/100% calc(100% / 5),rgba(255,255,255,.045)}
.deck::after{content:"";position:absolute;left:33%;right:33%;top:58%;height:30%;border-radius:10px;border:1px solid rgba(255,255,255,.07)}
.deck .spill{position:absolute;inset:0;opacity:0;background:radial-gradient(70% 55% at 50% 0%,rgba(255,196,150,.9),rgba(244,122,46,.25) 45%,transparent 75%)}
:is(.fx-pin,.fx-show) .floor{display:block;position:absolute;left:-12%;right:-12%;top:100%;height:calc(var(--screenH,620px) * 1.15);transform-origin:50% 0;transform:translateY(2px) rotateX(90deg);background:radial-gradient(50% 45% at 50% 40%,rgba(0,0,0,.55),transparent 70%),radial-gradient(40% 30% at 50% 45%,rgba(244,122,46,.10),transparent 70%)}
:is(.fx-pin,.fx-show) .lid-shadow{display:block;position:absolute;inset:0;border-radius:18px;opacity:0;box-shadow:0 60px 120px -40px rgba(0,0,0,.8),0 30px 80px -30px rgba(244,122,46,.35)}
.fx-pin .power,.fx-lite .power{display:block;position:absolute;inset:0;z-index:5;background:#0A0807;pointer-events:none}
/* lampo di accensione: parte una volta nel tempo, non è legato allo scroll */
:is(.fx-pin,.fx-show) .pflash{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transform:scaleY(.004);background:radial-gradient(110% 55% at 50% 50%,rgba(255,190,140,.8),rgba(244,122,46,.38) 42%,rgba(244,122,46,0) 76%)}
.fx-pin .glare,.fx-lite .glare{display:block;position:absolute;inset:-20% -40%;z-index:6;pointer-events:none;opacity:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%)}
:is(.fx-pin,.fx-show) .scene.is-flat,:is(.fx-pin,.fx-show) .scene.is-flat .lid{transform-style:flat}
:is(.fx-pin,.fx-show) .scene.is-flat .lid > .screen{transform:none}
:is(.fx-pin,.fx-show) .scene.is-flat :is(.deck,.floor,.lid-back,.lid-edge){display:none}
.scene.moving,.scene.moving .lid{will-change:transform}

/* tour dentro lo schermo */
.tour-on .views{overflow:hidden}
.tour-on .view{grid-area:1/1;position:relative;background:var(--app-bg);min-width:0}
.tour-on .v-dash{z-index:1} .tour-on .v-devs{z-index:2} .tour-on .v-scan{z-index:3}
.tour-on .v-devs,.tour-on .v-scan{display:block;overflow:hidden;visibility:hidden}
.vin{height:100%}
.tour-on .view:not(.active){pointer-events:none}
.wiping .view,.wiping .vin{will-change:transform}
.tour-on .scanline{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.sl-y::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#F47A2E 15%,#FFB27A 50%,#F47A2E 85%,transparent);box-shadow:0 0 18px 4px rgba(244,122,46,.55)}
.sl-y::after{content:"";position:absolute;left:0;right:0;bottom:100%;height:40px;background:linear-gradient(0deg,rgba(244,122,46,.10),transparent)}
.sl-x::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg,transparent,#F47A2E 15%,#FFB27A 50%,#F47A2E 85%,transparent);box-shadow:0 0 18px 4px rgba(244,122,46,.55)}
.sl-x::after{content:"";position:absolute;top:0;bottom:0;right:100%;width:40px;background:linear-gradient(270deg,rgba(244,122,46,.10),transparent)}
/* tendina all'indietro: la scia segue la linea anche quando torna indietro */
.rev .sl-x::after{right:auto;left:2px;background:linear-gradient(90deg,rgba(244,122,46,.10),transparent)}
.rev .sl-y::after{bottom:auto;top:2px;background:linear-gradient(180deg,rgba(244,122,46,.10),transparent)}
.tour-on .side{position:relative}
.tour-on .side-pill{display:block;position:absolute;left:12px;right:12px;top:0;border-radius:8px;background:rgba(244,122,46,.12);transition:transform .52s cubic-bezier(.3,.9,.3,1),opacity .4s .36s}
.tour-on .nav-it{position:relative;z-index:1;transition:color .3s}
.tour-on .nav-it.on{background:transparent}
.v-devs .body,.v-scan .body{padding:18px;display:grid;gap:14px 16px;align-content:start}
.tour-on .vin > .body{height:100%}
.v-devs .body{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"top top" "tbl spd"}
.v-devs .topbar{grid-area:top}
.v-devs .dev-tbl{grid-area:tbl;background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;padding:4px 8px}
.v-devs .dev-tbl table{height:100%}
.v-devs .speed{grid-area:spd;grid-template-columns:1fr;grid-auto-rows:1fr;align-content:stretch}
.v-devs .speed div{align-content:center;gap:8px;padding:14px 16px}
.v-devs .speed b{font-size:26px}
@media (max-width:1100px){
  .v-devs .body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-template-areas:"top" "tbl" "spd"}
  .v-devs .speed{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto}
}
.v-scan .body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"top top" "risk stg" "sev stg" "fnd fnd"}
.v-scan .topbar{grid-area:top}
.v-scan .risk{grid-area:risk}
.v-scan .sev{grid-area:sev;grid-template-columns:1fr 1fr}
.v-scan .stages{grid-area:stg;background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;padding:14px}
.v-scan .findings{grid-area:fnd;display:grid;gap:0;align-content:space-evenly;background:var(--app-surface);border:1px solid var(--app-line);border-radius:12px;padding:12px 14px}
.v-scan .fnd{padding-block:8px;border-top:1px solid var(--app-line)}

/* barra del tour */
.fx-pin .tour-bar{display:grid;position:absolute;left:0;right:0;bottom:0;height:var(--barH,92px);z-index:3;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px;color:#F2EDE8}
.fx-pin .tour-bar::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);top:-56px;bottom:0;background:linear-gradient(to top,#120F0D 50%,rgba(18,15,13,0));opacity:0;transition:opacity .4s;pointer-events:none}
.fx-pin .tour-bar.ph-open::before{opacity:1}
.tb-hint,.tb-open,.tb-rail,.tb-caps,.tb-side{grid-row:1}
.tb-hint,.tb-open{grid-column:1 / -1;justify-self:center}
.tb-rail{grid-column:1}
.tb-caps{grid-column:2}
.tb-side{grid-column:3}
.tb-hint,.tb-open,.tb-rail,.tb-caps,.tb-side,.tb-cap,.tb-skip,.tb-cta,.tb-replay{opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .28s ease-in,transform .28s ease-in,visibility 0s .28s}
.ph-hint .tb-hint,.ph-open .tb-open,.ph-open .tb-side,.ph-tour .tb-rail,.ph-tour .tb-caps,.ph-tour .tb-side,.ph-tour .tb-cap.on,.show-skip .tb-skip,.show-cta .tb-cta,.show-replay .tb-replay{opacity:1;visibility:visible;transform:none;transition:opacity .56s cubic-bezier(.2,.8,.2,1) .12s,transform .56s cubic-bezier(.2,.8,.2,1) .12s,visibility 0s .12s}
.tb-hint{display:flex;gap:8px;align-items:center;font:600 14px/1 var(--body);color:#BDB4AC;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.tb-hint span{animation:fadeIn .6s 1.2s backwards}
.chev{width:18px;height:18px;animation:bob 1.6s ease-in-out infinite}
.tb-open{font:700 18px/1.3 var(--display)}
.tb-rail{position:relative;display:flex;gap:22px;padding-bottom:12px}
.tb-rail button{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);color:#8C837B;background:none;border:0;padding:6px 0;cursor:pointer;white-space:nowrap}
.tb-rail button.on{color:#F2EDE8}
.tb-rail .dot{width:8px;height:8px;border-radius:50%;background:#3A3330;transition:background .3s,box-shadow .3s}
.tb-rail .reached .dot{background:#F47A2E}
.tb-rail .on .dot{box-shadow:0 0 0 4px rgba(244,122,46,.22)}
.tb-track{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12);overflow:hidden;border-radius:2px}
.tb-fill{position:absolute;inset:0;background:#F47A2E;transform-origin:0 50%;transform:scaleX(0)}
.tb-caps{display:grid;min-width:0}
.tb-cap{grid-area:1/1;min-width:0}
.tb-cap b{display:block;font:700 18px/1.25 var(--display)}
.tb-cap span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px;font-size:14.5px;line-height:1.45;color:#BDB4AC;text-wrap:pretty}
.tb-side{display:grid;grid-auto-flow:column;align-items:center;gap:12px}
.tb-sim{grid-area:1/1;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#8C837B;white-space:nowrap}
.tb-skip,.tb-cta{grid-area:1/3;justify-self:end}
.tb-skip{font:600 13px/1 var(--body);color:#BDB4AC;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.tb-skip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tb-replay{display:none}
/* pausa (WCAG 2.2.2): icona con testo per le tecnologie assistive, stesso stile di salto e replay */
.tb-pause{grid-area:1/2;display:inline-grid;place-items:center;width:34px;height:34px;padding:0;color:#BDB4AC;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:10px;cursor:pointer}
.tb-pause:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tb-pause svg{width:14px;height:14px;grid-area:1/1}
.tb-pause .i-play,.fx-paused .tb-pause .i-pause{display:none}
.fx-paused .tb-pause .i-play{display:block}
.fx-paused .tb-pause{color:#F7B98F;border-color:rgba(244,122,46,.45)}
/* in pausa si fermano anche le animazioni continue (punti "in tempo reale", spinner, cucitura, freccia) */
.fx-paused .pill i,.fx-paused .live i,.fx-paused .stg.run .ic,.fx-paused .lid-edge.breathe i::after,.fx-paused .chev{animation-play-state:paused}
.tb-replay svg{width:14px;height:14px;flex:none}
:is(.fx-pin,.fx-show) .sim{margin-top:0;padding-block:24px 40px}
@media (forced-colors:active){
  .tb-rail button.on{text-decoration:underline;text-underline-offset:4px}
  .tb-fill,.tb-rail .reached .dot{forced-color-adjust:none;background:Highlight}
  .tour-on .nav-it.on{outline:1px solid CanvasText}
}
@media (max-width:1180px){
  .tb-cap span{-webkit-line-clamp:1;font-size:13px;margin-top:3px}
  .tb-open{justify-self:start}
  .tb-rail{gap:16px}
  .tb-cap b{font-size:16px}
}

/* ---------- VETRINA: la stessa scena del pin, guidata dal tempo ----------
   per le finestre dove lo scroll non può guidarla (riquadri bassi, iframe alti quanto
   il contenuto, schermi touch larghi). Il palco ha l'altezza del monitor già scalato. */
/* +48px sfumati: la tastiera in prospettiva svanisce sopra la barra invece di finire sotto il testo */
.fx-show .lid-stage{position:relative;height:calc(var(--showH,560px) + 48px);margin-bottom:-48px;padding:0;margin-top:8px;perspective:var(--persp,1600px);perspective-origin:50% var(--eyeY,0px);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 48px),transparent)}
/* coperchio chiuso in attesa: invito a scorrere nella prima schermata */
.show-hint{display:none}
.fx-show .lid-stage.idle .show-hint{display:flex;position:absolute;z-index:2;left:50%;top:10px;transform:translateX(-50%);gap:8px;align-items:center;white-space:nowrap;font:600 14px/1 var(--body);color:#BDB4AC;text-shadow:0 1px 14px rgba(0,0,0,.9);animation:fadeIn .6s .8s backwards}
.fx-show .tour-bar.ph-tour :is(.tb-rail,.tb-caps),.fx-show .tour-bar.ph-open .tb-open{transition-delay:.3s}
.fx-show .tour-bar{display:grid;position:relative;z-index:3;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 24px;margin-top:clamp(22px,3vw,34px);color:#F2EDE8}
.fx-show .tb-rail{grid-row:1;grid-column:1}
.fx-show .tb-side{grid-row:1;grid-column:3;margin-bottom:12px}
.fx-show :is(.tb-caps,.tb-open){grid-row:2;grid-column:1 / -1;justify-self:start;max-width:62em}
.fx-show .tb-open{font:600 16px/1.45 var(--body);color:#BDB4AC;align-self:start}
/* in vetrina il titolo dell'hero resta visibile sopra: sotto il coperchio non si ripete */
.tbo-show,.fx-show .tbo-pin{display:none}
.fx-show .tbo-show{display:inline}
.fx-show .tb-cap b{font-size:18px}
.fx-show .tb-cap span{-webkit-line-clamp:2;font-size:14.5px;margin-top:4px}
.fx-show .tb-replay{display:inline-flex;align-items:center;gap:7px;grid-area:1/3;justify-self:end;font:600 13px/1 var(--body);color:#BDB4AC;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:9px 12px;cursor:pointer;white-space:nowrap}
.fx-show .tb-replay:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.fx-show .tb-replay[aria-disabled="true"]{cursor:default;color:#8C837B}
/* finestre strette: rail, didascalia, poi "dati simulati" e replay su righe proprie */
@media (max-width:800px){
  .fx-show .tour-bar{grid-template-columns:minmax(0,1fr)}
  .fx-show .tb-rail{grid-row:1;grid-column:1;justify-self:start;gap:16px}
  .fx-show :is(.tb-caps,.tb-open){grid-row:2;grid-column:1}
  .fx-show .tb-side{grid-row:3;grid-column:1;justify-self:start;margin-bottom:0}
}
/* nel laptop lo schermo resta un desktop anche su finestre strette: lo fa entrare la scala */
@media (max-width:980px){
  :is(.fx-pin,.fx-show) .lid .app{grid-template-columns:190px 1fr}
  :is(.fx-pin,.fx-show) .lid .side{display:flex}
  :is(.fx-pin,.fx-show) .lid .kpis{grid-template-columns:repeat(4,1fr)}
  :is(.fx-pin,.fx-show) .lid .grid2{grid-template-columns:1.7fr 1fr}
  :is(.fx-pin,.fx-show) .lid .dets{grid-template-columns:repeat(3,1fr)}
  :is(.fx-pin,.fx-show) .lid #threats{max-width:none}
}
/* ...anche sui telefoni: annulla le regole a larghezza di finestra pensate per lo schermo piatto */
:is(.fx-pin,.fx-show) .lid .url{min-width:calc(34ch + 28px)}
:is(.fx-pin,.fx-show) .lid .demo-chip{display:block}
:is(.fx-pin,.fx-show) .lid .dets .det{display:grid}
:is(.fx-pin,.fx-show) .lid .dev-tbl table{min-width:420px}
:is(.fx-pin,.fx-show) .lid .dev-tbl :is(th,td){display:table-cell;padding-inline:10px}
:is(.fx-pin,.fx-show) .lid .dev-tbl td.m{font-size:12px}
:is(.fx-pin,.fx-show) .lid .dev-tbl .hb{margin-right:6px}
/* in vetrina salto e CTA non compaiono mai: non devono occupare posto nella barra */
.fx-show :is(.tb-skip,.tb-cta){display:none}
/* telefoni: stessa vetrina del laptop scalato; la barra si impila e resta leggibile */
@media (max-width:600px){
  .fx-show .tour-bar{gap:10px;margin-top:18px}
  .fx-show .tb-rail{justify-self:stretch;justify-content:space-between;gap:8px}
  .fx-show .tb-rail button{padding-block:12px;font-size:12px}
  .fx-show .tb-cap b{font-size:17px}
  .fx-show .tb-cap span{-webkit-line-clamp:4;font-size:14.5px;line-height:1.5}
  .fx-show .tb-open{font-size:15px}
  .fx-show .tb-side{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .fx-show .lid-stage.idle .show-hint{font-size:13px;top:4px}
  /* il laptop qui è scalato a ~1/3: la volpe sul coperchio chiuso cresce per restare riconoscibile */
  .fx-show .lid-back img{width:250px;height:250px;filter:grayscale(1) sepia(.4) brightness(.62) contrast(1.1) drop-shadow(0 0 40px rgba(244,122,46,.45))}
  /* scalato a ~1/4 il coperchio scuro sparirebbe nello sfondo: alluminio più chiaro e bordo
     di 4px (≈1px a schermo), così si legge come un portatile chiuso e non come una riga */
  .fx-show .lid-back{background:linear-gradient(180deg,#3A312C,#231D1A);border:4px solid #54473F}
}
@media (max-width:400px){
  .fx-show .tb-n{display:none}
}

/* ---------- LITE (telefoni): il pannello si apre sulla cerniera ---------- */
.fx-lite:not(.fx-show) .scene{transform-origin:50% 0;transform:perspective(1200px) rotateX(-68deg) scale(.94)}
.fx-lite:not(.fx-show) .hinge-glow{display:block;position:absolute;left:6%;right:6%;top:-1px;height:2px;z-index:2;background:linear-gradient(90deg,transparent,#F47A2E 20%,#FFB27A 50%,#F47A2E 80%,transparent);box-shadow:0 0 18px 3px rgba(244,122,46,.5);transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fx-lite .hinge-glow.in{transform:scaleX(1)}
.fx-io .scene{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fx-io .lid-stage.flap-open .scene{transform:none}
.fx-io .power{transition:opacity .8s .3s}
.fx-io .flap-open .power{opacity:0}
.fx-io .hinge-glow{transition:transform .6s,opacity .6s .4s}
.fx-io .flap-open .hinge-glow{opacity:0}
.fx-lite .shot .screen{opacity:0;transform-origin:50% 100%;transform:perspective(1200px) rotateX(14deg) translateY(32px) scale(.97);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.fx-lite #shot-devs .screen{transition-delay:.12s}
.fx-lite .shot .screen.in{opacity:1;transform:none}

@keyframes pulse{50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes introUp{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes rim{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
@keyframes seamIn{to{transform:scaleX(1)}}
@keyframes breathe{50%{opacity:1}}
@keyframes bob{50%{transform:translateY(4px)}}

@media (max-width:980px){
  .hero,.duo,.msp,.contact{grid-template-columns:1fr}
  .hero{align-items:start;gap:24px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .dets{grid-template-columns:1fr}
  .feats,.steps{grid-template-columns:1fr 1fr}
  .nis2{grid-template-columns:1fr 1fr}
  .nis2 > div:nth-child(2){border-right:0}
  .nis2 > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  #threats{max-width:400px}
}
@media (max-width:760px){
  .nav-links{display:none}
}
@media (max-width:600px){
  .demo-chip{display:none}
  .feats,.steps,.nis2{grid-template-columns:1fr}
  .nis2 > div{border-right:0;border-bottom:1px solid var(--line)}
  .sev{grid-template-columns:1fr 1fr}
  .speed{grid-template-columns:1fr 1fr}
  form{grid-template-columns:1fr}
  .dets .det:nth-child(n+2){display:none}
  .dev-tbl table{min-width:0}
  .dev-tbl th:nth-child(3),.dev-tbl td:nth-child(3){display:none}
}
@media (max-width:420px){
  .shot .body{padding:12px}
  .dev-tbl th,.dev-tbl td{padding-inline:5px}
  .dev-tbl td.m{font-size:11px}
  .nav-in{gap:12px}
  .nav-in .btn-sm{padding:9px 12px;font-size:13px}
}
@media (max-width:380px){
  /* telefoni stretti (320-360px): logo e pulsante restano sulla stessa riga */
  .brand img{width:138px;height:34px}
  .dev-tbl td.m{font-size:10.5px}
  .dev-tbl .hb{margin-right:4px}
}
@media (prefers-reduced-motion:reduce){
  .pill i,.live i,.stg.run .ic{animation:none}
  .btn{transition:none}
  .btn-primary::after,.beam,.msp-glow{display:none}
  .meter i,.bar i{transition:none}
  .rv,.step::before,.step .n,.msp li svg path{transition:none}
}